@layer components {
    body{
        background-color: var(--surface-third) !important;
        background-position: right center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        font-size: 12px;
    }

    /* body::after{
        content: "";
        position: fixed;
        bottom: 150px;
        left: 50%;
        width: 300vw;
        height: 300vw;
        background: var(--secondary);
        transform: translate(-150vw, 300vw);
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    } */

    DIV#loginWrapper{
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    DIV.loginWindow{
        padding: 0px;
        display: flex;
        flex-direction: column;
        max-width: 418px;
        width: 100%;
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        z-index: 9;
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .loginWindow .header{
        position: relative;
        padding: 40px 24px 16px 24px;
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: auto;
        border: none;
        background-color: transparent;
    }

    .loginWindow .header img{
        height: 40px;
    }

    .loginWindow .header h2{
        font-size: var(--font-size-xl);
        font-weight: 500;
        color: var(--foreground-primary);
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    #userLogin{
        padding: 24px;
    }

    .loginWindow .passwordBox {
        padding: 24px;
    }

    #login-fields{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    label{
        padding-bottom: 4px !important;
    }

    .btn-login{
        margin-top: 32px;
    }

    #loginWrapper footer{
        bottom: 32px;
    }

    #loginWrapper footer img{
        padding: 8px 24px;
        background-color: var(--surface-primary);
        border-radius: var(--widget-radius);
    }

    .logo-header{
        display: none;
    }

    .login-divider{
        border-top: 1px solid var(--border);
        margin-left: -25px;
        margin-right: -25px;
        margin-top: 30px;
    }

    /* These buttons carry .btn-login as well as .white-btn, so the primary
       hover/active/focus rules in buttons.css match and turn them blue.
       Restate the white states at higher specificity. */
    .btn-login.white-btn:hover{
        border: 1px solid var(--border) !important;
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    .btn-login.white-btn:active,
    .btn-login.white-btn:focus{
        border: 1px solid var(--border) !important;
        background-color: var(--surface-third) !important;
        color: var(--foreground-primary) !important;
    }
}