body {
	color: #fff;
	background: var(--primary-color);
}
.form-control {
	min-height: 41px;
	background: #fff;
	box-shadow: none !important;
	border-color: #e3e3e3;
}
.form-control:focus {
	border-color: #70c5c0;
}
.form-control, .btn {        
	border-radius: 2px;
}
.login-form {
	width: 350px;
	margin: 0 auto;
	padding: 150px 0 30px;		
}
.login-form form {
	color: #7a7a7a;
	border-radius: 2px;
	margin-bottom: 15px;
	font-size: 15px;
	background: #ececec;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
	padding: 30px;	
	position: relative;	
}
.login-form h2 {
	font-size: 22px;
	margin: 35px 0 25px;
}
.login-form .avatar {
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: -50px;
	width: 95px;
	height: 95px;
	border-radius: 50%;
	z-index: 9;
	background: #B8C6D9;
	padding: 15px;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.login-form .avatar img {
	width: 100%;
}	
.login-form input[type="checkbox"] {
	position: relative;
	top: 1px;
}
.login-form .btn, .login-form .btn:active {        
	font-size: 16px;
	font-weight: bold;
	background: #0A3463 !important;
	border: none;
	margin-bottom: 20px;
}
.login-form .btn:hover, .login-form .btn:focus {
	background: #b2becf !important;
}    
.login-form a {
	color: #fff;
	text-decoration: underline;
}
.login-form a:hover {
	text-decoration: none;
}
.login-form form a {
	color: #7a7a7a;
	text-decoration: none;
}
.login-form form a:hover {
	text-decoration: underline;
}
.login-form .bottom-action {
	font-size: 14px;
}

/* --- a153: make the login page genuinely responsive ---------------------------
   This page is the one part of the staff site that is hit from a phone all the
   time, and it is the one page that does NOT include Elements/head.php, so it can
   stay width=device-width while the app itself gets a fixed desktop canvas.
   Before this block the card was a hard 350px: at 320px (iPhone SE, small Android)
   the document scrolled horizontally and the card sat flush against the left edge,
   and at 360px it had 5px of margin. Desktop is unchanged by construction: 380px of
   border-box width minus 15px of padding a side is the same 350px form as before. */
.login-form {
	width: 100%;
	max-width: 380px;
	padding: 150px 15px 30px;
}

/* Phone: 150px of dead space above the card wastes most of a short screen, but the
   avatar hangs 50px above the form, so the top padding cannot go below about 60px
   without clipping it. */
@media (max-width: 575.98px) {
	.login-form {
		padding-top: 60px;
	}
	.login-form form {
		padding: 24px 20px;
	}
	.login-form .bottom-action {
		font-size: 13px;
	}
}