/*
 * Sign in, verification and password pages: a centered card that fills a phone screen less a 16px margin on each
 * side and is capped at 420px (520px for pages listing password rules) on larger screens.
 */
.login-box {
	width: 100%;
	max-width: 420px;
	margin: 0 16px;
}

.login-box.login-box-wide {
	max-width: 520px;
}

/* square, gold outlined card instead of Bootstrap's rounded grey one; !important overrides inline border styles on cards */
.login-box .card {
	border: 1px solid var(--uiowa-gold) !important;
	border-radius: 0;
}

/* Bootstrap rounds the header's top and the footer's bottom corners */
.login-box .card-header,
.login-box .card-footer {
	border-radius: 0 !important;
}

.login-box .card-header,
.login-box .card-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	background-color: var(--uiowa-gold);
	border-color: var(--uiowa-gold);
	color: var(--uiowa-black);
}

.login-box .card-footer {
	font-size: 80%;
}

.login-box .card-body {
	padding: 24px;
}

/* stacked full-width buttons, e.g. HawkID / Vendor login */
.login-box .login-actions {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px 24px;
}

/* a form field: label above a full-width input */
.login-box .login-field {
	margin-bottom: 16px;
}

/* a form's buttons: side by side, wrapping onto their own lines when there is no room */
.login-box .login-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.login-btn {
	width: 100%;
	height: 50px;
	border-radius: 15px;
	background-color: #f0f0f0;
	font-weight: bold;
}

/* a password rule with its pass/fail icon at the end */
.login-box .login-rule {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

@media (max-width: 400px) {
	.login-box .card-body {
		padding: 16px;
	}

	.login-box .login-actions {
		padding: 28px 16px;
	}
}