.bubble_unread {
	font-weight: 400;
	font-family: inherit;
	height: 100%;
	position: relative;
	top: -2px;
	color: rgb(255, 255, 255);
	white-space: pre-wrap;
	left: -16px;
}

.togglePassword {
	display: none;
}

.warningPageText {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	line-height: normal;
	font-family: 'Manrope';
}


.forbiddenPageText {
	display:block;
	height: 100%;
	line-height: normal;
	font-family: 'Manrope';
}

.loadingScreenBox {
	opacity: .7
}

.inactiveText {
	margin-top: 10px;
	display: inline-block;
}

.togglePassword.active {
	display: table-row;
	height: auto;
	-webkit-animation: slide-in-top 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-top 0.1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-9-30 10:37:54
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-top {
	0% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide-in-top {
	0% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}


.notification_bubble {
	position: relative;
	width: 5px;
	border-radius: 20px;
	line-height: 0px;
	height: 26px;
	box-sizing: content-box;
	background-color: rgb(179, 179, 179);
	top: -54px;
	left: 35px;
	padding: 0px 10px !important;
	margin-left: 0px;
	margin-top: 0px;
}

.pendo_badge_ {
	border: 0px solid transparent !important;
	border-radius: 25px;
	inset: 15px 25px auto auto;
	background: rgba(255, 255, 255, 0);
	padding: 0px;
	line-height: 1;
	min-width: auto;
	width: 50px;
	height: 50px;
	box-shadow: rgba(0, 0, 0, 0.15) 2px 0px 6px 0px;
	border: 0px;
	float: none;
	vertical-align: text-bottom;
	cursor: default;
	display: inline-block;
	position: relative;
	right: 0px;
	margin: 0px 1em;
}

.pendoSmallText {
	font-size: 16px !important;
	position: relative;
	top: -25px;
}

.pendo_image_ {
	display: block;
	height: 50px;
	width: 50px;
	box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px;
	float: none;
	vertical-align: baseline;
}


.pendo-resource-center-badge-notification-bubble::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(179, 179, 179);
	border-radius: 100%;
	z-index: -1;
}

.mobileShow {
	display: none !important
}

@media screen and (max-width: 768px) {
	.mobileShow {
		display: block !important
	}
}

/*new STYLES*/

.container2 {
	display: flex;
	flex-direction: row;
	margin: 0 auto;
	height: 100vh;
}

.left-panel {
	flex: 1 1 50%;
	min-width: 0; /*lets the panel shrink below the width of the white box*/
	background-color: #1180e8;
	display: flex;
	flex-direction: column;
}


.right-panel {
	flex: 1 1 50%;
	min-width: 0;
	/*sampled from the artwork's bottom edge, so the strip exposed by
	  background-size:contain below blends into the graphic instead of banding*/
	background-color: #010106;
	background-image: url('/images/background/03-JetnetLogin-960x1080_v2.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.loginBoxContainer, .left-panel-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	width: 100%;
	min-width: 0;
	padding: 1rem;
	box-sizing: border-box;
	font-family: "Manrope", sans-serif;
}

.loginBox, .left-penel-content-box {
	display: flex;
	flex-direction: column;
	justify-items: center;
	align-items: center;
	background-color: white;
	padding: clamp(16px, 3vw, 29px);
	border-radius: 24px;
	width: 100%;
	max-width: 29rem;
	box-sizing: border-box;
}

	/*nothing inside the box may force it wider than the panel*/
	.loginBox > *, .left-penel-content-box > * {
		max-width: 100%;
		box-sizing: border-box;
	}

	.loginBox h2, .left-penel-content-box h2 {
		text-align: center;
		overflow-wrap: break-word;
	}

#main-jetnet-logo {
	width: 100%;
	height: 100%;
	object-fit: contain; /*need this one for Mac/Safari to properly display*/
}


/*Re-applying styles form Login control*/
.loginBoxContainer .content_padding {
	width: 100%;
}

	.loginBoxContainer .content_padding #GoToEvoButton2 {
		width: 100%;
		border-radius: 27px;
		height: 43px;
		background: #dc3663;
		color: white;
		font-size: 16px;
	}


.loginBoxContainer #outerTableLogon td #emailLabel, #passwordLabel {
	text-align: left;
	width: 90%;
	padding: 10px;
	font-weight: 600;
	color: #1180E8;
	margin-left: 15px;
	display: inline-block;
}

.logonButton {
	margin: 17px 0px 0px 0px !important;
	width: 90%;
	border-radius: 27px;
	height: 43px;
	background: #dc3663;
	color: white;
	font-size: 16px;
}

#outerTableLogon .logonButton {
	margin-bottom: 10px !important
}

.loginText {
	width: 90%;
	height: 20px;
	border-radius: 27px;
	text-indent: 10px;
	font-size: 14px;
}

/*email password loginbutton*/
.loginBoxContainer #outerTableLogon input {
	border-radius: 24px;
}

	/*Email and password*/
	.loginBoxContainer #outerTableLogon input[type="text"], input[type="password"] {
		height: 20px;
		text-indent: 10px;
		padding: 10px 0px !important;
		margin: 0px 0 !important;
		font-size: 14px;
	}

/*Login button*/
.loginBoxContainer #logonUser_LoginButton {
	background-color: #DC3663;
	color: white;
	font-size: 14px
}



.loginBoxHeader, .modalPopup h1 {
	transition: 0.3s ease-in-out;
	font-style: normal;
	font-weight: bold;
	opacity: 1;
	line-height: 2.5rem;
	text-align: center;
	color: #020140;
	margin-bottom: 1.5rem;
}
.modalPopup.demo{width:500px !important;text-align:left;font-size:16px;line-height:20px;}
.modalPopup .demoText{width:100%;height:500px;overflow-y:scroll;display:block;padding:5px;}

.loginBoxHeader {
	font-size: 2rem;
}

.modalPopup h1 {
	font-size: 1.5rem;
	line-height: 2rem;
	margin-bottom: 1rem;
	margin-top:.7rem;
}

.preloginbox {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

.container2 #copyright {
	text-align: center;
	color: white;
	margin-bottom: 20px;
}

	.container2 #copyright p {
		margin: 0
	}

	.container2 #copyright a {
		color: white;
		text-decoration: underline;
	}

/*The artwork is 960x1080 - exactly the right half of a 16:9 screen - so at 16:9
  `cover` fits it edge to edge with no cropping at all.  As soon as the window is
  narrower than 16:9 (a ~4:3 window, a shared/presented screen, a restored-down
  browser) the panel gets taller than the art and `cover` scales it up by height,
  slicing "One Sign-In", "Connected Aviation Intelligence", the JETNET logo and
  the product names off the sides.  Fit the whole graphic instead, anchored to the
  top so the single exposed strip lands at the bottom where the art is already
  black and blends into .right-panel's matching background-color.*/
@media (max-aspect-ratio: 16/9) {
	.right-panel {
		background-size: contain;
		background-position: center top;
	}
}

/*Mirror image of the above: past ~2.4:1 (super-ultrawide, 32:9) `cover` scales by
  width and starts eating the headline off the top instead.  16:9 through 21:9 are
  unaffected and keep the full-bleed look.*/
@media (min-aspect-ratio: 12/5) {
	.right-panel {
		background-size: contain;
		background-position: center center;
	}
}

/*Keep the image panel visible as long as the white box still fits;
  give it a little less room than the content panel while things get tight*/
@media (max-width: 1000px) {
	.left-panel {
		flex: 1 1 60%;
	}

	.right-panel {
		flex: 1 1 40%;
		background-size: contain;
		background-position: center top;
	}
}

/*Below this the content panel needs the whole viewport, so drop the image*/
@media (max-width: 640px) {
	.right-panel {
		display: none;
	}

	.left-panel {
		flex: 1 1 100%;
	}
}

@media (max-width: 480px) {
	.loginBoxContainer, .left-panel-content {
		padding: 0.75rem;
	}

	.loginBoxContainer #outerTableLogon #addonsTableLogon td{
		padding: 5px 0;
	}
}