* { box-sizing: border-box; }

html { min-height: 100%; background: #f3f6fa; }

body.loginPage {
	min-height: 100vh;
	margin: 0;
	background: #f3f6fa;
	color: #172b49;
	font: 15px/1.45 Arial, Helvetica, sans-serif;
}

.loginShell {
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
	padding: 58px 20px 30px;
}

.loginBrand {
	margin-bottom: 24px;
	text-align: center;
}

.loginBrand img {
	display: block;
	width: 178px !important;
	height: auto;
	margin: 0 auto 12px;
}

.loginBrandName {
	margin: 0;
	color: #52677f;
	font-size: 16px;
	font-weight: 600;
}

.loginCard {
	padding: 28px 30px 30px;
	border: 1px solid #d5dfeb;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 25px rgba(20, 42, 68, .09);
}

.loginCard h1 {
	margin: 0 0 6px;
	padding: 0;
	color: #112d50;
	font: bold 24px/1.25 Arial, Helvetica, sans-serif;
	text-shadow: none;
}

.loginIntro {
	margin: 0 0 22px;
	color: #607089;
}

.loginField {
	margin-top: 15px;
}

.loginField label {
	display: block;
	margin-bottom: 6px;
	color: #294663;
	font-size: 13px;
	font-weight: bold;
}

.loginField input {
	display: block;
	width: 100%;
	height: 43px;
	margin: 0;
	padding: 9px 11px;
	border: 1px solid #b9c8d8;
	border-radius: 6px;
	background: #fff;
	color: #172b49;
	font: 15px/1.3 Arial, Helvetica, sans-serif;
}

.loginField input:focus {
	outline: 0;
	border-color: #2f6fba;
	box-shadow: 0 0 0 3px rgba(47, 111, 186, .14);
}

#Login,
.loginCard .loginAction {
	display: inline-flex;
	width: 100%;
	min-height: 43px;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	padding: 9px 16px;
	border: 1px solid #235d9f;
	border-radius: 6px;
	background: #2868ad;
	color: #fff;
	cursor: pointer;
	font: bold 14px/1.3 Arial, Helvetica, sans-serif;
	text-align: center;
	text-decoration: none;
}

#Login:hover,
.loginCard .loginAction:hover { background: #215a98; }
#Login:focus,
.loginCard .loginAction:focus { outline: 3px solid rgba(47, 111, 186, .2); outline-offset: 2px; }

.loginAlerts {
	width: 100%;
	margin-top: 18px;
	border-collapse: collapse;
}

.loginAlerts td { padding: 0; }
.loginAlerts .warningHeader { padding: 9px 11px; border-radius: 7px 7px 0 0; }
.loginAlerts .warningMsgBox { padding: 11px; border-radius: 0 0 7px 7px; line-height: 1.45; }

.loginSuccess {
	margin: 18px 0 0;
	padding: 12px;
	border: 1px solid #bbf7d0;
	border-radius: 7px;
	background: #f0fdf4;
	color: #166534;
}

#ForgottenPassword {
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px solid #e1e7ef;
}

#ForgottenPassword .msg {
	margin-top: 4px;
	color: #607089;
	text-align: left;
}

#ForgottenPassword .msg a {
	color: #1f5f9f;
	font-weight: bold;
	text-decoration: none;
}

#ForgottenPassword .msg a:hover { text-decoration: underline; }

.loginFooter {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 1px solid #d5dfeb;
	color: #738298;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}

@media (min-width: 769px) {
/* TODO Once image provided */
/*	body.loginPage {
		background: linear-gradient(rgba(18, 35, 54, .18), rgba(18, 35, 54, .18)),
			#f3f6fa url("login-background.png") center center / cover no-repeat fixed;
	}*/

	.loginBrand {
		padding: 14px 18px;
		border-radius: 12px;
		background: rgba(255, 255, 255, .96);
	}

	.loginFooter {
		padding: 12px 14px;
		border: 0;
		border-radius: 8px;
		background: rgba(255, 255, 255, .96);
		color: #52677f;
	}
}

@media (max-width: 520px) {
	.loginShell { padding: 30px 14px 22px; }
	.loginCard { padding: 23px 20px 25px; }
	.loginBrand img { width: 150px !important; }
}