@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;
    }

    #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;
    }
}