body:has(.earea-login) {
    background: #f1f3f6;
}

.earea-login {
    min-height: min(78vh, 54rem);
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem);
    color: #1f2937;
    background: #f1f3f6;
}

.earea-login form.max-w-420 {
    width: min(100%, 26.25rem);
    max-width: 26.25rem;
    margin-inline: auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid #c8d0d9;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.75rem 2rem rgb(31 41 55 / 12%);
}

.earea-login label,
.earea-login legend {
    color: #1f2937;
    font-weight: 600;
}

.earea-login .form-control,
.earea-login .form-select {
    min-height: 2.75rem;
    border-color: #667085;
    color: #17212b;
    background-color: #fff;
}

.earea-login .form-control:focus-visible,
.earea-login .form-select:focus-visible,
.earea-login .form-check-input:focus-visible,
.earea-login button:focus-visible,
.earea-login a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
    box-shadow: none;
}

.earea-login .btn-primary {
    min-height: 2.75rem;
    border-color: #0b4f71;
    color: #fff;
    background-color: #0b4f71;
}

.earea-login .btn-primary:hover {
    border-color: #083b55;
    background-color: #083b55;
}

.earea-login a {
    color: #064e72;
    text-underline-offset: 0.15em;
}

.earea-login .alert {
    width: min(100%, 26.25rem);
    margin: 0 auto 1rem;
}

@media (max-width: 35rem) {
    .earea-login {
        min-height: 70vh;
        padding: 1rem 0.5rem;
    }

    .earea-login form.max-w-420 {
        padding: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .earea-login *,
    .earea-login *::before,
    .earea-login *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}