*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{
    background:#f5f5f5;
}


.headContainer{

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgb(22,19,46);

    padding:14px 40px;
}


.nuvationLogo{
    height:40px;
}


.authHeaderActions{
    display:flex;
    align-items:center;
    gap:22px;
}

.createUser,
.websiteLink{

    color:white;
    text-decoration:none;

    font-size:14px;
    font-weight:bold;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;

    transition:.2s;
}


.createUser:hover,
.websiteLink:hover{

    color:rgb(220,190,38);

}



.loginContainer{

    display:flex;
    justify-content:center;
    align-items:center;

    min-height:80vh;

}



.loginCard{

    background:white;

    width:380px;

    padding:35px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.1);

}



.loginCard h1{

    text-align:center;

    margin-bottom:30px;

    font-size:2rem;

}



.inputGroup{

    margin-bottom:20px;

}



.inputGroup label{

    display:block;

    margin-bottom:8px;

    font-size:16px;

    font-weight:bold;

}



.inputField{

    width:100%;

    padding:12px;

    font-size:16px;

    border:1px solid #ccc;

    border-radius:8px;

}



.inputField:focus{

    outline:none;

    border-color:rgb(22,19,46);

}



.inputField:-webkit-autofill,
.inputField:-webkit-autofill:hover,
.inputField:-webkit-autofill:focus {

    -webkit-box-shadow:0 0 0px 1000px white inset;

}



.submitButton{

    width:100%;

    padding:12px;

    margin-top:10px;

    background:white;

    border:1px solid black;

    border-radius:8px;

    font-size:16px;

    cursor:pointer;

    transition:.2s;

}



.submitButton:hover{

    background:rgb(22,19,46);

    color:white;

    border-color:rgb(22,19,46);

}



.statusMessage{

    color:#4f5661;

    font-size:14px;

    line-height:1.45;

    text-align:center;

    margin-top:15px;

}

.statusMessage:empty{
    display:none;
}

.recoveryLink{
    display:block;
    width:max-content;
    max-width:100%;
    margin:18px auto 0;
    color:rgb(22,19,46);
    font-size:14px;
    font-weight:bold;
    text-align:center;
    text-underline-offset:3px;
}

.recoveryLink:hover{
    color:rgb(172,137,0);
}

.recoveryIntro{
    margin:-14px 0 24px;
    color:#4f5661;
    font-size:14px;
    line-height:1.55;
    text-align:center;
}

.passwordRequirements{
    margin:-8px 0 18px;
    color:#4f5661;
    font-size:13px;
    line-height:1.5;
}

.submitButton:disabled{
    cursor:not-allowed;
    opacity:.65;
}

.mfaLoginCard[hidden]{display:none!important}
.mfaStepBadge{display:block;width:max-content;margin:0 auto 14px;padding:6px 10px;border:1px solid #e6d681;border-radius:999px;color:#5b4810;background:#fff9dc;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.mfaLoginCard h1{margin-bottom:24px}
.mfaCodeInput{min-height:62px;padding:12px 10px;border:2px solid #d6c56c;color:rgb(22,19,46);background:#fffdf2;font-family:"Courier New",monospace;font-size:2rem;font-weight:800;letter-spacing:.22em;line-height:1;text-align:center}
.mfaCodeInput::placeholder{color:#b8ac72;opacity:.62}
.mfaBackButton{width:100%;min-height:44px;margin-top:10px;padding:10px 14px;border:1px solid #d8dde5;border-radius:8px;color:rgb(22,19,46);background:#f1f3f6;font-size:14px;font-weight:800;cursor:pointer}
.mfaBackButton:hover,.mfaBackButton:focus-visible{background:#e6e9ee}

.websiteLink{
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:7px;
}

@media(max-width:560px){
    body .headContainer{
        flex-direction:column !important;
        justify-content:center !important;
        height:auto !important;
        min-height:0 !important;
        padding:14px 16px 16px !important;
        gap:13px;
    }
    body .headContainer .nuvationLogo{
        width:min(164px,58vw) !important;
        height:auto !important;
        max-width:164px !important;
        max-height:42px;
    }
    .authHeaderActions{
        width:100%;
        justify-content:center;
        gap:10px;
    }
    .createUser,.websiteLink{
        flex:1 1 0;
        max-width:170px;
        min-height:46px;
        padding:9px 12px;
        font-size:13px;
        line-height:1.2;
        text-align:center;
        border:1px solid rgba(255,255,255,.45);
        border-radius:7px;
    }
    .loginCard{width:min(100% - 24px,380px);padding:28px 23px}
}


.legalNotice{

    margin-top:22px;

    color:#6b6b6b;

    font-size:12px;

    line-height:1.55;

    text-align:center;

}


.legalNotice a{

    color:rgb(22,19,46);

    font-weight:bold;

    text-decoration:underline;

    text-underline-offset:2px;

}


.legalNotice a:hover{

    color:rgb(172,137,0);

}