body {
	height: 100%;
}

h3 {
	margin: 0;
}

#MainLoginContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

	#MainLoginContainer > div:first-child {
		height: calc(100% - 30px);
		background: #F5F5F5;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	#MainLoginContainer p, #MainLoginContainer a {
		font-size: 1.1rem;
	}

#MainMessagesContainer > div:first-child {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
}

/*** National Data Systems Image/ Logo (Left Side) ***/
#NdsBackGroundLogo {
	position: fixed;
	height: 1047.59px;
	width: 1862.39px;
	bottom: 19%;
	right: 45%;
}

/*** The Login Box - Login Message and Input Area containers ( Right Side of the NDS logo ) ***/
#SystemLoginContainer {
	height: 100%;
	width: 62%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
}

	#SystemLoginContainer > div:first-child {
		height: 480px;
		width: 812px;
		overflow: auto;
		border: 5px solid #256b93;
		background: #256b93;
	}

		#SystemLoginContainer > div:first-child > div:first-child {
			display: flex;
			flex-direction: row;
			height: 100%;
		}

/*** Internet Explorer Message ***/
#BrowserAlertContainer {
	background: #0A364F;
	min-height: 28px;
	font-size: 1.6rem;
	padding: 10px !important;
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
	position: fixed;
	top: 2px;
	left: 2.5px;
	align-items: center;
}

	#BrowserAlertContainer > div:first-child > div:nth-child(2) {
		width: calc(100% - 22px);
	}

	#BrowserAlertContainer > div:first-child > div:first-child {
		display: flex;
		align-items: center;
		margin-right: 10px;
		font-size: 1.5rem;
	}

	#BrowserAlertContainer > div:first-child {
		width: 100%;
	}

	#BrowserAlertContainer > div:nth-child(2) {
		display: flex;
		align-items: center;
	}

/*** System Messages & Alerts ***/
#ImportantInfo {
	display: flex;
	flex-direction: column;
	background: #256B93;
	height: 100%;
	width: 50%;
	z-index: 2;
	position: relative;
}

.message-container {
	overflow: auto;
	height: calc(100% - 42px);
}

.system-message {
	flex-grow: 1;
	padding: 10px;
	margin-top: 10px;
}

.system-message-date {
	border-bottom: 1px solid white;
	line-height: 0.1em;
	margin: 10px 0 20px;
}

	.system-message-date span {
		margin-left: 40px;
		background: #256b93;
		padding: 0 10px;
		color: white;
	}

/*** Environment Messages ***/
#ImportantInfo .importantCard {
	color: white;
	margin-right: 5px;
	padding: 10px;
	width: calc(100% - 25px);
}

.importantCard > div:first-child > div:first-child > svg:first-child {
	margin-right: 5px;
}

#UatDisclaimerContainer {
	background: #F15A29;
	height: 22px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	position: relative;
}

#LoginMsgOverlay1 {
	background-color: #F15A29;
	height: unset;
}

#LoginMsgOverlay2 {
	background: #0A364F;
	height: 50px;
}

.loginMsgOverlay {
	position: absolute;
	width: 100%;
	z-index: 2;
	left: 0;
	top: 42px;
	right: 0;
	margin-bottom: 0px;
}

	.loginMsgOverlay div:first-child {
		height: calc(100% - 20px);
		width: calc(100% - 20px);
		padding: 10px;
	}

		.loginMsgOverlay div:first-child > p {
			margin: 0;
		}

/*** Login Error  ***/
.login-error {
	height: 21px;
}

#LoginErrorReason {
	width: calc(100% - 5px);
	padding-left: 5px;
	height: 100%;
	color: #256b93;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 1.1rem;
	background: #ff00002e;
}

	#LoginErrorReason p {
		margin: 0;
		padding-right: 5px;
	}

	#LoginErrorReason svg {
		color: rgb(255, 0, 0, .5);
		padding-right: 5px;
	}

#FormContents > div:nth-child(4).login-error > div:first-child{
	border: 1px solid rgb(255, 0, 0, .3);
	min-height: 18px;
	width: calc(100% - 20px);
	margin: auto;
	margin-bottom: 5px;
}

/*** Form Inputs ***/
#LogoHeader {
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 150px;
	align-items: center;
	margin-top: 5px;
}

#FormContents > div:nth-child(2) {
	justify-content: space-between;
	width: 40%;
	margin: 10px auto;
}

#FormBody {
	width: 50%;
	background: white;
}

	#FormBody > form {
		height: 100%;
		position: relative;
	}

#FormContents {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.login-inputs {
	position: relative;
	height: 40px;
	margin-bottom: 10px;
}

#FormContents > div:last-child {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

	#FormContents > div:last-child > div:last-child {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		width: calc(100% - 20px);
		margin: 0 10px;
	}

#UserNameInputs {
	display: flex;
	height: 100%;
	flex-direction: column;
	width: calc(100% - 20px);
}

	#UserNameInputs svg, #UserNameInputs i {
		width: 18px;
		height: 18px;
	}

#Username, #Password, #TwoFaSecurityCode {
	background: #f4f4f4;
	border: none;
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	color: #444;
	position: absolute;
	text-indent: 10px;
	border-radius: 0;
}

#PasswordContainer > div:first-child, #AuthenticatorCodeContainer > div:first-child > div:first-child, #UserContainer > div:first-child {
	background: #ddd;
	width: 39px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #777;
	font-size: 1.5rem;
	color: #256B93;
	z-index: 2;
}

#PasswordContainer > span:nth-child(2), #AuthenticatorCodeContainer > div:first-child .k-textbox, #UserContainer > span:nth-child(2) {
	width: 100%;
	border-radius: 0 !important;
}

#PasswordContainer > div:last-child {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 16px;
	top: 10px;
}

	#PasswordContainer > div:last-child > p {
		color: #2196F3;
		text-transform: uppercase;
		margin: 0;
		z-index: 2;
		display: none;
	}

#AuthenticatorCodeContainer {
	margin-bottom: 10px;
}

	#AuthenticatorCodeContainer > div:first-child {
		display: flex;
		flex-direction: row;
		position: relative;
		height: 40px;
	}

#TwoFaRegistration {
	position: absolute;
	top: 215px;
	height: calc(100% - 225px);
	width: calc(100% - 20px);
	background: white;
	z-index: 2;
	padding: 0 10px 10px 10px;
}

	#TwoFaRegistration > div:nth-child(2) {
		height: 107px;
		width: 107px;
		margin: auto;
		margin-bottom: 10px;
	}

#TwoFactorQrCodeContainer {
	height: calc(100% - 47px);
	margin-top: 5px;
	width: calc(100% - 5px);
	border-bottom: 4px solid white;
	background: white;
}

/*******************/
#LoginBtnContainer {
	margin-top: auto;
	width: calc(100% - 20px);
	margin-bottom: 20px;
}

	.login-button-style {
		height: 40px;
		font-size: 1.3rem;
		width: 100%;
	}

#PasswordRecoveryContainer {
	color: #256b93;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	margin-bottom: auto;
}

#RegisterSecurityCode:hover {
	color: #FF9800 !important;
}

/*** Logging in Blue Bar Animation ***/
.loadingBarContainer {
	text-align: center;
	height: 20px;
	display: flex;
	align-items: center;
}

.loading-bar {
	width: 130px;
	height: 4px;
	margin: 0 auto;
	border-radius: 2px;
	background-color: #cfcfcf;
	position: relative;
	overflow: hidden;
	z-index: 1;
	transform: rotateY(0);
	transition: transform .3s ease-in;
	display: none;
}

.blue-bar {
	height: 100%;
	width: 68px;
	position: absolute;
	transform: translate(-34px, 0);
	background-color: #0073b1;
	border-radius: 2px;
	animation: initial-loading 1.5s infinite ease;
}

@keyframes initial-loading {
	0%, 100% {
		transform: translate(-34px,0)
	}

	50% {
		transform: translate(96px,0)
	}
}

/****** Footer *******/
#LoginFooter {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #256B93;
	color: white;
	height: 30px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#VersionLabel {
	font-weight: 100;
	color: #206b94;
}

#version {
	font-size: 10pt;
}

#CopyRightContainer > p {
	margin: 0 0 0 10px;
	white-space: nowrap;
}

/**** Media Queries ****/
@media only screen and (max-width: 1383px) {
	#SystemLoginContainer {
		width: 100%;
	}

	#MainMessagesContainer > div:first-child > div:first-child {
		width: unset;
	}
}

@media only screen and (max-width: 821px) {
	body {
		overflow-x: hidden;
	}

	#SystemLoginContainer {
		justify-content: flex-end;
	}

		#SystemLoginContainer > div:first-child {
			width: 92%;
			height: calc(100% - 45px);
			overflow:hidden;
		}

		#SystemLoginContainer > div:first-child > div:first-child {
			display: block;
		}

	#SystemLoginContainer > p:last-child {
		margin: 5px;
	}

	#ImportantInfo {
		height: 40%;
		width: 100%;
	}
	
	#FormBody {
		height: 60%;
		width: 100%;
		overflow: auto;
	}

	#FormContents > div:nth-child(2) {
		width: 24%;
	}

	#ImportantInfo .importantCard {
		width: calc(100% - 20px);
	}

	#LoginFooter {
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 36px;
	}

		#LoginFooter p {
			margin: 0;
			white-space: unset;
			padding-left: 4px;
		}
}