body.autuslogin-active {
    --autuslogin-panel-width: 390px;
    --autuslogin-card-height: 640px;
    --autuslogin-accent: #8e159c;
    --autuslogin-button-text: #ffffff;
    background: #f7f8fa !important;
}

body.autuslogin-active #page > .flex-fill {
    justify-content: flex-start !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 56px 24px 28px !important;
}

body.autuslogin-active .container-tight {
    width: min(1500px, 94vw) !important;
    max-width: 1500px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.autuslogin-active .container-tight > .text-center:first-child {
    display: none !important;
}

body.autuslogin-active .main-content-card {
    overflow: hidden;
    border: 0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 10px 35px rgba(24, 35, 55, .12) !important;
}

body.autuslogin-active .main-content-card > .card-header {
    display: none !important;
}

body.autuslogin-active .main-content-card > .card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--autuslogin-panel-width);
    min-height: var(--autuslogin-card-height);
    padding: 0 !important;
    background: #fff;
}

body.autuslogin-active .autuslogin-visual {
    grid-column: 1;
    min-width: 0;
    min-height: var(--autuslogin-card-height);
    background-color: #e9ebef;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

body.autuslogin-active .autuslogin-visual--empty {
    background-image:
        radial-gradient(circle at 20% 25%, rgba(142, 21, 156, .15), transparent 36%),
        radial-gradient(circle at 78% 72%, rgba(78, 112, 255, .12), transparent 34%),
        linear-gradient(135deg, #f4f5f8, #e4e6eb);
}

body.autuslogin-active .main-content-card form {
    grid-column: 2;
    display: flex;
    min-width: 0;
    min-height: var(--autuslogin-card-height);
    margin: 0;
    background: #fff;
}

/* The plugin renders its own public links below the card. */
body.autuslogin-active .main-content-card form > .rich_text_container {
    display: none !important;
}

body.autuslogin-active .main-content-card form > .row {
    width: 100%;
    min-height: var(--autuslogin-card-height);
    margin: 0 !important;
    padding: 64px 38px;
    align-content: center;
    justify-content: flex-start !important;
    background: #fff;
    box-shadow: -10px 0 30px rgba(20, 30, 50, .035);
}

body.autuslogin-active .main-content-card form > .row > .col-md-5 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

body.autuslogin-active .main-content-card h2 {
    width: 100%;
    margin-bottom: 8px;
    color: #172033;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

body.autuslogin-active .main-content-card .form-label {
    color: #253047;
    font-weight: 500;
}

body.autuslogin-active .main-content-card .form-control,
body.autuslogin-active .main-content-card .form-select {
    min-height: 42px;
    border-color: #cbd2df;
    border-radius: 7px;
    background: #f5f7fc;
}

body.autuslogin-active .main-content-card .form-control:focus,
body.autuslogin-active .main-content-card .form-select:focus {
    border-color: var(--autuslogin-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--autuslogin-accent) 15%, transparent);
}

body.autuslogin-active .main-content-card .form-check-input:checked {
    border-color: var(--autuslogin-accent);
    background-color: var(--autuslogin-accent);
}

body.autuslogin-active .main-content-card .btn-primary {
    min-height: 42px;
    border-color: var(--autuslogin-accent) !important;
    border-radius: 6px;
    background: var(--autuslogin-accent) !important;
    color: var(--autuslogin-button-text) !important;
    font-weight: 600;
}

body.autuslogin-active .main-content-card .btn-primary:hover,
body.autuslogin-active .main-content-card .btn-primary:focus {
    filter: brightness(.9);
}

body.autuslogin-active .main-content-card a,
body.autuslogin-active .autuslogin-support a {
    color: var(--autuslogin-accent);
}

body.autuslogin-active .autuslogin-support {
    margin: 28px auto 0;
    padding: 0 18px;
    color: #5d6472;
    text-align: center;
}

body.autuslogin-active .autuslogin-support__title {
    margin-bottom: 3px;
    color: #2a3242;
    font-size: 14px;
    font-weight: 700;
}

body.autuslogin-active .autuslogin-support__text {
    font-size: 13px;
    line-height: 1.5;
}

body.autuslogin-active .autuslogin-support__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 18px;
    margin-top: 7px;
}

body.autuslogin-active .autuslogin-support__link {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

body.autuslogin-active .autuslogin-support__link:hover,
body.autuslogin-active .autuslogin-support__link:focus {
    text-decoration: underline;
}

body.autuslogin-active .container-tight > .text-center.text-muted.mt-3 {
    margin-top: 18px !important;
    font-size: 11px;
    opacity: .75;
}

@media (max-width: 900px) {
    body.autuslogin-active #page > .flex-fill {
        justify-content: center !important;
        padding: 22px 14px !important;
    }

    body.autuslogin-active .container-tight {
        width: min(540px, 100%) !important;
    }

    body.autuslogin-active .main-content-card > .card-body {
        display: block;
        min-height: auto;
    }

    body.autuslogin-active .autuslogin-visual {
        display: none;
    }

    body.autuslogin-active .main-content-card form {
        display: block;
        min-height: auto;
    }

    body.autuslogin-active .main-content-card form > .row {
        min-height: auto;
        padding: 42px 28px 34px;
        box-shadow: none;
    }

    body.autuslogin-active .autuslogin-support {
        margin-top: 22px;
    }
}