:root {
    --bs-body-bg: var(--cs-gunmetal-200);
}

html,
body {
    height: 100%;
}

body.auth-page {
    background: var(--bs-body-bg);
}

.auth-brand {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--cs-blue-900) 0%, var(--cs-blue-700) 58%, var(--cs-blue-800) 100%);
}

.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 100% 0, rgba(104, 180, 209, 0.16), transparent 43%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.13), transparent 58%);
}

.auth-logo-negative {
    width: 230px;
    height: auto;
}

.auth-logo {
    width: 175px;
    height: auto;
}

.auth-claim {
    max-width: 460px;
}

.auth-side {
    min-height: 100vh;
    padding-bottom: 84px;
    overflow-y: auto;
}

.auth-content {
    max-width: 480px;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #198754;
}

.close-page {
    z-index: 2;
    font-size: 1.7rem;
    line-height: 1;
    text-decoration: none;
}

.quiet-link {
    color: var(--cs-gunmetal-800);
    font-weight: 500;
    text-decoration: none;
}

.quiet-link:hover {
    color: var(--cs-gunmetal);
    text-decoration: underline;
    text-decoration-color: var(--cs-gunmetal-500);
    text-underline-offset: 3px;
}

.legal-footer {
    font-size: 0.75rem;
}

.legal-footer a {
    color: var(--cs-gunmetal-600);
    text-decoration: none;
}

.legal-footer a:hover {
    color: var(--cs-gunmetal-800);
}

@media (max-width: 991.98px) {
    .auth-side {
        display: block !important;
        padding-top: 3rem;
        padding-bottom: 0;
    }

    .legal-footer {
        position: static !important;
        margin-top: 3rem;
    }
}

@media (max-width: 575.98px) {
    .legal-footer {
        display: block !important;
    }

    .legal-footer > span:last-child {
        display: block;
        margin-top: 0.5rem;
        text-align: left !important;
    }
}