/*
 * Login / password-reset / OTP screens (theme/template/login.php).
 * Moved out of an inline <style> block and style="" attributes: the
 * Content-Security-Policy (style-src 'self') blocks inline styles.
 */
@font-face {
    font-family: "ArialBG";
    src: url("/fonts/arialbg_0-webfont.eot");
    src: url("/fonts/arialbg_0-webfont.eot?#iefix") format("embedded-opentype"),
    url("/fonts/arialbg_0-webfont.woff") format("woff"),
    url("/fonts/arialbg_0-webfont.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "ArialBG";
    src: url("/fonts/arialbgb_0-webfont.eot");
    src: url("/fonts/arialbgb_0-webfont.eot?#iefix") format("embedded-opentype"),
    url("/fonts/arialbgb_0-webfont.woff") format("woff"),
    url("/fonts/arialbgb_0-webfont.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}
.animateform {
	animation: animateform 1s ease-out forwards;
}
.unload {
	animation: unload .8s ease-out forwards;
}
@keyframes unload { 100% {opacity: 0;}}
@keyframes animateform {
	0%{		opacity: 1;}
	10% {	opacity: 0;	transform: translateY(-10px);}
	50% {	opacity: 0;	transform: translateY(10px;); }
	100% {	opacity: 1;transform: translateY(0)}
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0 !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Hide Edge's native password reveal/clear controls; we overlay our own
   link/eye toggle inside password fields. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

a {text-decoration: none; color: #003865; }
a:hover {text-decoration: underline;}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "ArialBG", Arial, sans-serif;
	font-weight: 300;
	font-size: 13px;
	background: #E1EAFF;	
	background: #0E508B;	
}
#wrap {min-height: 100%;}
#main {padding-bottom: 80px;	min-height: 100vh;}
.text-color {
	color: #4A4A4A;
}
.center,
.container-x {
	max-width: 1300px;
}

body {
	background: url(/img/login.jpg) center top no-repeat ;
	background-size: 2000px auto;
}
footer {
	background: #fff;
	margin-top: -80px;
	height: 80px;
	clear:both;
	border-top: 1px solid #E3E8EB;
	padding-top: 15px;
	font-size: 12px;
}
.loginformwrap {
	min-height: 600px;	
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
	background: 0 !important;
}


	.fbox {
		display: inline-block;
		vertical-align: middle;
		line-height: 50px;
	}
	.kbcbox {
		font-size: 13px;
		color: #003865;
	}
	
	.fbox + .fbox {
		border-left: 1px solid #e3e8eB;
		padding-left: 24px;
		margin-left: 24px;
	}
	.fbox + .fbox.float-right {
		border: 0;
	}
	.fbox img {
		vertical-align: middle;
		margin-right: 5px;
	}
	.fbox.right {
		border: 0;
		font-size: 12px;
		line-height: 50px;
	}
	.fbox a+a {
		margin-left: 10px;
	}
	.login-form {
		background: #fff;
		width: 420px;
    	padding: 20px 40px 30px;
    	display: inline-block;
		vertical-align: top;
		margin-top: 75px;
	}
	.logo {
		margin-top: 75px;
		display: inline-block;
		vertical-align: top;
		margin-right: 30px;
	}
	.logintitle {
		color: #003865;
		text-align: center;
		text-transform: uppercase;
		margin: 20px 0 22px;
		font-size: 20px;
	}
	
	.forminput {
		width: 100%;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin-bottom: 10px;
	}
	.forminput label {
		font-size: 12px;
		color: #003865;
		display: inline-block;
		padding: 0 4px;	
		position: absolute;
		top:15px;
		left: 10px;
		margin: auto;
		height: 16px;
		pointer-events: none;
		transition: all .15s linear;
		
	}
	.forminput .icon {
		width: 46px;
		height: 46px;
		position: absolute;
		left: 0;top:0;
		padding: 12px;
		border-right: 1px solid #CFDCE8;		
		transition: all .2s linear;
		color: #0E508B;
	}
	.forminput.focused .icon {
		border-right-color: #009EE2;
		color: #009EE2;
	}
	.forminput select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	.forminput input[type="number"] {
		-moz-appearance:textfield;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	.forminput select,
	.forminput input[type] {
		border: 2px solid #CFDCE8;
		background: #fff;
		font-size: 12px;
		line-height: 42px;
		height: 46px;		
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 12px;
        width: 100%;
        outline: 0 !important;
        box-shadow: none !important;
        border-radius: 0;
		transition: all .15s linear;
	}
	.forminput .icon+input[type] {
		padding: 0 12px 0 56px;
	}
	.forminput .icon+input[type]+label {
		left: 55px;
	}	
	.forminput select:focus,
	.forminput input[type]:focus {
		border-color: #00AEEF;
	}
	.forminput select + label,
	label.withvalue,
	.forminput input[type] + label {
		top:-6px;
		font-size: 11px;
		color: #00AEEF;
		background: #fff;
	}
	.forminput select + label,
	label.withvalue {
		color: #003865;
	}	
	.forminput .select-wrap {
		position: relative;
		display: block;
	}
	.forminput .select-wrap .icon {
		display: block;
		position: absolute;
		top:5px; right: 15px;bottom: 0;left: auto;
		margin: auto;
		width: 19px;
		height: 19px;
		transform: rotate(-90deg);
		color: inherit;
		border: 0;
		pointer-events: none;
		padding: 0;
		color: #0E508B;
	}	
	.forminput .select-wrap select {
		color: #003865;
		font-size: 12px;
		padding-right: 40px;
	}
	.input-group-lg .forminput .btn,
	.forminput .btn-lg {
		padding: 0 10px;
		line-height: 44px;
		height: 46px;
	}
	.forminput .btn {
		border-radius: 0;
	}
	.forminput .forgotten_pass {
		position: absolute;
		top:15px;
		right: 10px;
		font-size: 11px;
		color: #999999;
		z-index: 2;
	}
	.forminput .forgotten_pass:hover {
		color: #009EE2;
		cursor: pointer;
	}
	
	.bg-blue {
		background: #0E508B;
	}
	
	.logintips {
		color: #fff;
		padding-top: 75px;
		padding-bottom: 75px;
		display: inline-block;
		width: 100%;
		vertical-align: top;
	}
	.logintips h3 {
		font-size: 17px;
		margin: 20px 0;	
	}
	.logintips p {
		font-size: 13px;
		line-height: 1.3;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.input-group-md {
		
	}
	
	body .alert {
		background: #fff !important;
		border-radius: 0;
		padding-left: 50px !important;
		position: relative;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
		background: #ECECEC;
		font-family: "ArialBG", Arial;
		font-size: 12px;
		color: #5B5B5B !important; 
		border: 0;		
	}
	body .alert:before {
		content: "";
		position: absolute;
		left: 0;top:0;
		bottom: 0;
		background-repeat: no-repeat;
		background-position: center 10px;
		background-size: 19px 19px !important;
		background-image: url(/img/alerti.png);
		width: 36px;
		display: block;
	}
	body .alert-success:before {	background-image: url(/img/alerts.png); background-color: #7AC231;	}
	body .alert-warning:before {	background-image: url(/img/alertw.png);	background-color: #F5A623; }
	body .alert-danger:before {		background-color: #E53935; }
	body .alert-secondary:before {		background-color: #999999; }
	body .alert-primary:before {		background-color: #0E508B; }
	body .alert-info:before {		background-color: #00AEEF; }
	body .alert-light:before {		background-image: url(/img/alertl.png); background-color: #ECECEC; }
	body .alert-dark:before {		background-color: #5B5B5B; }
	
	
	.logintips .justify-content-center {
		text-align: center;
		display: block;
		margin: auto auto;
		
	}
	.logintips .justify-content-center .col {
		float: left;
		display: block;
		width: 33.33%;
		padding: 0 .6%;
	}
	.logintips .justify-content-center .col .col-10 {
		width: 300px;
		margin: auto auto 30px;
		padding: 0;
	}
		
	@media screen and (max-width:1200px) {
		footer {
			height: auto;
			margin-top: 0;				
		}
		footer .container {
			display: flex;
			flex-wrap: wrap;
		}
		.fbox {
			margin: 0 !important;
			padding: 0 10px !important;
			flex-grow: 1;			
			text-align: center;
		}
		.fbox + .fbox {
			border: 0;
		}
	}
	@media screen and (max-width:767px) {
		.logintips .justify-content-center.col-10 .col-12 {
			padding: 0;
		}
		.logintips .justify-content-center.col-10 {
			width: 100%;
			max-width: 100% !important;
			flex: unset;
			display: block;
		}
		.fbox {
			width: 100%;
		}
		.logintips .col {
			width: 100% !important;
			max-width: 100% !important;
			float: none !important;
			margin-bottom: 50px;
		}
	}
	@media screen and (max-width:600px) {
		.loginformwrap {
			display: block;
		}
		.logo {
			text-align: center;
			float: none !important;
			margin: 30px auto 20px;
			display: block !important;
		}
		.login-form {
			max-width: 100%;
			width: auto;
			margin-top: 20px;
		}
	}	

	@media screen and (max-width:480px) {
		.login-form {
			padding: 20px;
		}
	}

/* ---- former style="" attributes in theme/template/login.php ---- */
#autofillform { height: 0; width: 0; opacity: 0; border: 0; padding: 0; }

/* DEV environment marker on the login button. */
.btn.btn-dev { background-color: red !important; }

/* Green submit buttons on the reset / OTP steps. !important keeps the
   colour over Bootstrap's .btn-primary state rules, as the inline style did. */
.btn.btn-login-green { background: #2e9f5f !important; border-color: #2e9f5f !important; }

.login-muted { color: #5B5B5B; }
.login-strong-blue { color: #003865; }

/* Show/hide password toggle inside the password fields. The JS switches the
   two icons via element.style (CSSOM), which the CSP allows. */
.pw-eye {
	position: absolute; right: 8px; top: 8px; width: 32px; height: 30px;
	background: transparent; border: 0; color: #0E508B; cursor: pointer;
}
.pw-eye .pw-eye-closed { display: none; }

/* Colour is updated from JS (element.style), so no !important here. */
#client_pass_match { font-size: 11px; color: #9a9a9a; min-height: 14px; }

.pw-rules-box {
	border: 1px solid #e3e8eB; background: #fafbfc; padding: 10px 14px;
	margin: 12px 0 14px; font-size: 12px;
}
.pw-rules-box .pw-rules-title { color: #003865; font-weight: bold; }
#pwRulesList { list-style: none; padding-left: 0; margin: 0; }
#pwRulesList li { color: #8a8a8a; line-height: 1.55; }
.pw-rule-icon { display: inline-block; width: 14px; text-align: center; }

.otp-phone { color: #0E508B; font-weight: bold; font-size: 15px; }
.forminput.otp-boxes-wrap { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 14px; }
.forminput.otp-boxes-wrap input.otp-digit[type] {
	width: 46px; height: 56px; text-align: center; font-size: 22px;
	border: 2px solid #CFDCE8; background: #fff;
}
.otp-resend-row { font-size: 12px; }
#otpResendLink { float: right; }
.otp-resend-exhausted { float: right; color: #999; }