body {
	background-color: #f8f8f8;
}

input[type="text"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* The password field sits in an input-group with the visibility toggle, which
   drops the field's own bottom margin, so the group carries it instead. */
.input-group {
	position: relative;
	margin-bottom: 10px;
}

/* Lay the toggle over the field rather than beside it. A regular addon would
   have to keep its own fill in step with the field's, and it cannot: the
   field's background changes with the theme, with focus, and again when the
   browser paints its autofill highlight over it. Sitting on top, the toggle
   stays transparent and the field itself shows through. */
.input-group .form-control {
	padding-right: 2.75rem;
	border-radius: 0 0 .25rem .25rem;
}

.input-group .input-group-append {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	/* .form-control raises itself to 3 while focused. */
	z-index: 4;
}

/* The display is forced because the font loader sets
   'display: inline-block !important' on every .material-icons, which would
   otherwise beat the flex centring. */
.input-group .input-group-text.material-icons {
	display: flex !important;
	align-items: center;
	border: 0;
	background-color: transparent;
}

input[type="submit"] {
	margin-top: 20px;
}

form {
	max-width: 450px;
	margin: 15px auto;
	border: 1px solid #e7e7e7;
	background-color: #fff;
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.08);
}

form .alarm {
	font-size:180%;
	padding:20px;
	border-bottom: 1px solid #e7e7e7;
}

#loginMessage {
	margin-bottom: 15px;
	padding: 10px 12px;
	border-left: 3px solid #ccc;
	background-color: #f8f8f8;
	color: #555;
	font-size: 90%;
	/* Admin-supplied text of unknown length, so keep long words from
	   widening the fixed-width form. */
	overflow-wrap: break-word;
}

/* Notices on the password-change and first-run forms are sentences, not the
   one-line .alarm the login error is, so keep them at text size. */
#passwordChangeRequired,
#passwordChangeProblem,
#firstRunProblem {
	font-size: 100%;
	line-height: 1.4;
	margin-bottom: 15px;
	padding: 10px 12px;
	border: 0;
	border-left: 3px solid currentColor;
	text-align: left;
}

#loginform {
	padding: 40px 60px;
}

.form-control {
	height: 54px;
}

h1 {
	font-size: 150%;
	margin-top: 0;
	margin-bottom: 15px;
}