/* /Login.aspx */

/* page background */
.pageLogin {
	background: #0b121c url("../../images/loginBG.jpg")  no-repeat center 0;
	background: #0b121c url("../../images/loginBG.webp") no-repeat center 0;
	/*background: #0b121c url("../../images/loginBG.svg")  no-repeat center 0;*/
}

	.pageLogin body {
		background-color: transparent !important;
		font-family: "FreeSet-DemiBold", Arial, Tahoma, sans-serif;
		color: #7d91a5;
		color: rgb(125, 145, 165);
		border: none !important;
	}
		.pageLogin body:before {
			background-color: transparent !important;
		}

		.pageLogin .helpLink {
			margin-top: 1em;
		}

			.pageLogin .helpLink a {
				color: white;
				font-size: .66em;
				opacity: .4;
				transition: opacity .1s ease;
				/*
				margin-right: 3.25em;
				margin-right: 3.6vw;
				*/
			}
				.pageLogin .helpLink a:hover {
					opacity: 1;
					text-decoration: none;
				}
				.pageLogin .helpLink a:after {
					content: '>';
				}

		/* <header> */
		.pageLogin header {
			padding: 1.75em 1em;
			background-color: transparent !important;
		}

		/* <main> */
		.pageLogin main {
			background: transparent;
		}

			/* currentAppName */
			.pageLogin .currentAppName {
				font-size:   0.81em;
				line-height: 1.25em;
				margin-bottom: 4.5em;
			}

		.pageLogin .securityInput {
			width: 26em;
			height: 3em;
			color: white;
			border: 1px solid #c1c1c1;
			background: transparent;
			background-repeat: no-repeat;
			background-size: 1.25em;
			background-position: 1.25em center;
			padding: 1em;
			padding-left: 3.33em;
			font-size: 1em;
			line-height: 1.25em;
			opacity: .5;
			transition: all .25s ease;
			margin-bottom: 2.5em;
		}
			.pageLogin .securityInput:focus {
				opacity: 1;
			}

		.pageLogin #txtUserID {
			background-color: rgb(35, 60, 95);
			background-image: url("../../images/icons/user.png");
			background-image: url("../../images/icons/user.svg");
		}

	.pageLogin #txtPassword {
		background-color: rgb(35, 60, 95);
		background-image: url("../../images/icons/lock.png");
		background-image: url("../../images/icons/lock.svg");
	}

		.pageLogin #valLogin {
			color: red;
			font-size: .9em;
			font-weight: 200;
			margin-bottom: 1em;
		}

		.pageLogin #btnLoginUserId,
		.pageLogin #btnLoginPassword {
			display: inline-block;
			padding: 1em 5em;
			font-size: 1em;
			line-height: 1.25em;
			color: white;
			background-color: #325587;
			background-color: rgb(50, 85, 135);
			border: none;
			text-transform: uppercase;
			transition: background-color .25s ease;
			animation-duration: 1.5s;
			margin-bottom: 2em;
		}
			.pageLogin #btnLoginUserId:hover,
			.pageLogin #btnLoginPassword:hover {
				background-color: #3c6496;
				background-color: rgb(60, 100, 160);
			}
			.pageLogin #btnLoginUserId:active,
			.pageLogin #btnLoginPassword:active {
				background-color: #416ea0;
				background-color: rgb(65, 110, 160);
			}

		@keyframes valid {
			from { background-color: rgb( 0, 175, 100); }
			to   { background-color: rgb(50,  85, 135); }
		}
		.pageLogin .invalid {
			animation-name:     valid;
		}
		@keyframes invalid {
			from { background-color: rgb(200,  0,  75); }
			to   { background-color: rgb( 50, 85, 135); }
		}
		.pageLogin .invalid {
			animation-name:     invalid;
		}

		.pageLogin #btnCancel {
			display: inline-block;
			color: #7D8EA5;
			font-size: .8em;
			text-decoration: underline;
			transition: color .25s ease;
			margin-bottom: 4.25em;
		}
			.pageLogin #btnCancel:hover {
				color: white;
			}

		.pageLogin #messageForFirstTimeUsers {
			font-size: .8em;
			color: #7d8Ea5;
		}

		.pageLogin .pleaseRegister {
			color: #7d8Ea5;
			transition: color .25s ease;
		}
			.pageLogin .pleaseRegister:hover {
				color: white;
			}


		/* <footer> */
		.pageLogin footer {
			padding: 8.5em 1.75em 1.75em 1.75em;
			font-size:   .66em;
			line-height: 1em;
		}

		/* "More Information on our Enhanced Security" */
		.pageLogin .infoLink {
			color: white;
			opacity: .4;
			transition: all .1s ease;
		}
			.pageLogin .infoLink:hover {
				opacity: 1;
				text-decoration: none;
			}
			.pageLogin .infoLink:after {
				content: '>';
			}

		.pageLogin .dciLogo {
			width: 85px;
			height: 25px;
		}

	.validationMessage {
		  text-shadow: 0 0 .25em black !important;
	}


	/* PWA */

	.pageLogin #addToHomeScreen {
		display: none;
	}
		.pageLogin #addToHomeScreen img {
			max-width: 3.5em;
			margin: 0.625em;
			float: left;
		}
		.pageLogin #addToHomeScreen button {
			text-align: center;
		}