@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&display=swap');


:root{
    --sty-font-family: "Inter", sans-serif;
    --sty-bg: white;
    --sty-primary-color: rgba(28, 100, 242, 1);
    --sty-panel-border-width: 0;
    --sty-panel-margin: 150px 0px 0px 0px;
    --sty-panel-border-radius: 16px;
    --sty-panel-max-width: minmax(360px, 480px);
    --sty-panel-text-alignment: start;
    --sty-section-title-font-size: 1.1rem;
    --sty-section-title-font-weight: 700;
    --sty-input-label-font-weight: 500;
    --sty-input-label-color: : rgba(82, 82, 82, 1);
    --sty-input-border-color: rgba(82, 82, 82, 1);
    --sty-input-border-width: 2px;
    --sty-input-color: rgba(82, 82, 82, 1);
    --sty-link-color: rgba(82, 82, 82, 1);
    --sty-link-decoration: underline;
    --sty-border-radius: 18px;
    --sty-checkbox-border-radius: 6px;
    --sty-checkbox-border-color: var(--sty-primary-color);
    --sty-checkbox-border-width: 1px;
    --sty-button-primary-bg: linear-gradient(90deg,rgba(0, 102, 255, 1) 0%, rgba(51, 133, 255, 1) 100%);
    --sty-button-primary-focus-bg: linear-gradient(90deg,rgba(0, 102, 255, 1) 0%, rgba(51, 133, 255, 1) 100%);
    --sty-button-primary-hover-bg: linear-gradient(90deg,#0044dd 0%, #0044dd 100%);
    --sty-button-primary-focus-ring-color: black;
    --sty-panel-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.1);
}

div.separator-w-text {
    font-weight: 700;
}


header{
    width: 100%;
    height: 4rem;
    background: var(--sty-button-primary-bg);
    display: flex;
    align-items: center;
}

header div[data-logo] a{
    width: 12rem;
    height: auto;
    padding-left: 1rem;
    display: flex;
    align-items: center;
}

[data-sign-header]{
    background-image: url("https://res.cloudinary.com/dwd9j3b7f/image/upload/Create_Account_BG.jpg");
    font-size: 1.5rem;
    background-size: cover;
    height: 120px;
    border-radius: 20px;
    font-weight: 800;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.9rem;
    margin-bottom: 16px;}

[data-section="panelHeader"],
#app:not(.registration):not(.identifier) [data-sign-header],
#language-selector {
    display: none;
}

[data-block-reg-head]{
    display: flex;
    flex-direction: row;
    font-size: 0.9rem;
    padding-bottom: 1rem;
    text-align: center;


    & > div{
        align-items: center;
        flex: 1 1 0px;

        & > p{
            color: rgba(0, 0, 0, 1);
            font-weight: 500;
        }
    }

    img {
        max-width: 61px;
        max-height: 60px;
    }

}

/***** IDENTIFIER *****/

#app.identifier div.section-title {
    text-align: center;
}

#app.identifier [data-separator="registration"]{
    display: none;
}

div.terms-conditions {
    font-size: 12px;
    margin-top: 10px;
}

sty-button[data-button^='loginProvider']{
    background-color: #F2F7FF !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0 2px 3px;

    & span {
        color: black;
    }

    & sty-external-provider-icon[type="facebook"]{ /* check if we should move forward with this, could be sued*/
        color: rgba(0, 102, 255, 1)
    }

    & sty-external-provider-icon[type="apple"]{
        color: rgba(0, 0, 0, 1)
    }
}

#app.identifier [data-section="panelContainer"],
#app.registration [data-section="panelContainer"]{
    --sty-panel-container-padding: 0.4rem 2rem 2rem 2rem;
}

/***** REGISTRATION *****/

#app.registration div.external-login-providers{
    display: none;
}

#app.mfaPasscode sty-form div.text{
    padding-bottom: 1rem;
}

sty-input-passcode label {
    display: none;
}

#app.registration div.section-title {
    text-align: center;
}

/***** MFA PASSCODE *****/

#app.mfaPasscode [data-mfa-gif],
#app.mfaEnrollChallenge [data-mfa-gif]{
    display: block;
    margin: 0 auto 0 auto;
    max-width: 250px;
    max-height: 250px;
}

#app.mfaPasscode sty-input-passcode::part(input-separated),
#app.mfaPasscode sty-input-passcode>input,
#app.mfaEnrollChallenge sty-input-passcode::part(input-separated),
#app.mfaEnrollChallenge sty-input-passcode>input{
    caret-color: black;
}

/**** MFA SUCCESS SCREEN ****/
#app[data-screen="mfaEnrollSuccess"] section{
    display: none;
}


/**** MFA METHOD ****/
#app.mfaMethod section{
    display: none;
}



/***** GENERIC RESULT SCREEN *****/
#app.genericResult section:has(svg.session-expired){
    & [data-block-title]{
        text-align: center;
    }
    & svg{
        display: none;
    }
}

[data-expired-logo]{
    margin: 0 auto 2rem auto;
    display: block;
    height: 200px;
}