:root {
    --brand-green: #234b32;
    --brand-green-dark: #173b28;
    --brand-green-light: #eef3ec;
    --brand-ink: #17252e;
}

/* The three standalone account pages share the same AdminLTE layout. */
.login-page {
    min-height: 100vh;
    padding: 36px 20px;
    background: var(--brand-green-light);
    color: var(--brand-ink);
}

.login-box { width: min(100%, 520px); }
.login-logo { margin-bottom: 26px; color: var(--brand-green-dark); }
.login-logo p { margin-bottom: 12px; }
.login-logo img { display: block; width: min(100%, 280px); height: auto; margin: 0 auto; }
.login-box .card { overflow: hidden; border: 1px solid #d6e0d5; border-radius: 10px; box-shadow: 0 14px 35px rgba(23, 59, 40, .08); }
.login-card-body { padding: 28px; }
.login-box-msg { color: var(--brand-ink); font-size: 18px; font-weight: 600; }
.login-card-body .form-control { height: 44px; }
.login-card-body .form-control:focus { border-color: var(--brand-green); box-shadow: 0 0 0 .2rem rgba(35, 75, 50, .15); }
.login-card-body .btn { min-height: 44px; border-radius: 5px; }
.login-card-body .btn-brand { background: var(--brand-green); border-color: var(--brand-green); color: #fff; font-weight: 600; }
.login-card-body .btn-brand:hover, .login-card-body .btn-brand:focus { background: var(--brand-green-dark); border-color: var(--brand-green-dark); color: #fff; }
.login-card-body a { color: var(--brand-green); }
.login-card-body a:hover { color: var(--brand-green-dark); text-decoration: underline; }
.login-text { width: 100%; position: static; left: auto; margin-top: 28px; color: #3e4c46; line-height: 1.5; }
.login-text p { margin-bottom: 12px; }

/* Keep the new horizontal wordmark within the legacy member-area columns. */
#header .logo img, .footer-logo img { display: block; max-width: 100%; height: auto; }
#header .site-navigation.navdown ul.main-menu > li > a:hover,
#header .site-navigation.navdown ul.main-menu > li > a:focus { color: #fff; }

@media (max-width: 575px) {
    .login-page { padding: 24px 16px; }
    .login-logo { font-size: 25px; }
    .login-logo img { width: min(100%, 240px); }
    .login-card-body { padding: 22px; }
}