/* =========================================================
   PRIMETECH SOLUTIONS
   AUTHENTICATION UI
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.auth-page{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    background:var(--navy);
}



/* =========================================================
   MAIN
========================================================= */

.auth-main{

    position:relative;

    flex:1;

    min-height:
        calc(100vh - 82px);

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:
        75px
        20px
        90px;

    background:

        radial-gradient(
            circle at 72% 35%,
            rgba(8,124,255,.14),
            transparent 30%
        ),

        radial-gradient(
            circle at 15% 65%,
            rgba(0,183,255,.055),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #010612,
            #06152b 52%,
            #020817
        );
}



/* =========================================================
   GRID
========================================================= */

.auth-grid{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.12;

    background-image:

        linear-gradient(
            rgba(40,135,255,.09) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(40,135,255,.09) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );
}



/* =========================================================
   BACKGROUND LINES
========================================================= */

.auth-background{

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        linear-gradient(
            115deg,
            transparent 42%,
            rgba(8,124,255,.08) 42.2%,
            transparent 42.5%
        ),

        linear-gradient(
            295deg,
            transparent 70%,
            rgba(8,124,255,.055) 70.2%,
            transparent 70.5%
        );
}



/* =========================================================
   GLOWS
========================================================= */

.auth-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;
}


.auth-glow-left{

    width:550px;

    height:550px;

    left:-360px;

    bottom:-150px;

    background:
        rgba(8,124,255,.11);
}


.auth-glow-right{

    width:650px;

    height:650px;

    right:-350px;

    top:-120px;

    background:
        rgba(0,153,255,.10);
}



/* =========================================================
   LAYOUT
========================================================= */

.auth-container{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,500px);

    align-items:center;

    gap:100px;
}



/* =========================================================
   INTRO
========================================================= */

.auth-intro{

    max-width:620px;
}


.auth-badge{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:
        7px 14px;

    margin-bottom:27px;

    border:
        1px solid
        rgba(38,149,255,.25);

    border-radius:999px;

    background:
        rgba(8,124,255,.065);

    color:#b9d9ff;

    font-size:11px;

    font-weight:650;
}


.auth-status-dot{

    width:6px;

    height:6px;

    border-radius:50%;

    background:#20a6ff;

    box-shadow:
        0 0 12px
        #168fff;
}



/* =========================================================
   TITLE
========================================================= */

.auth-intro h1{

    max-width:650px;

    color:#f2f6fc;

    font-size:
        clamp(
            3rem,
            5vw,
            4.8rem
        );

    line-height:1.03;

    letter-spacing:-2.5px;

    font-weight:720;
}


.auth-intro h1 span{

    display:block;

    margin-top:4px;

    background:
        linear-gradient(
            90deg,
            #ffffff 5%,
            #8cccff 52%,
            #118bff
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}


.auth-intro > p{

    max-width:570px;

    margin-top:25px;

    color:#8e9db2;

    font-size:16px;

    line-height:1.75;
}



/* =========================================================
   BENEFITS
========================================================= */

.auth-benefits{

    display:flex;

    flex-direction:column;

    gap:11px;

    max-width:520px;

    margin-top:38px;
}


.auth-benefit{

    display:flex;

    align-items:center;

    gap:14px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:11px;

    background:
        rgba(255,255,255,.022);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.auth-benefit:hover{

    transform:translateX(3px);

    border-color:
        rgba(8,124,255,.20);

    background:
        rgba(8,124,255,.04);
}


.auth-benefit-icon{

    flex:0 0 37px;

    width:37px;

    height:37px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    border:
        1px solid
        rgba(8,124,255,.14);

    background:
        rgba(8,124,255,.07);

    color:#299cff;

    font-size:15px;
}


.auth-benefit strong{

    display:block;

    color:#dce6f3;

    font-size:12px;
}


.auth-benefit span{

    display:block;

    margin-top:2px;

    color:#687a92;

    font-size:10px;
}



/* =========================================================
   CARD WRAPPER
========================================================= */

.auth-card-wrapper{

    position:relative;
}


.auth-card-glow{

    position:absolute;

    left:50%;

    top:50%;

    width:90%;

    height:85%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        rgba(8,124,255,.13);

    filter:blur(75px);

    pointer-events:none;
}



/* =========================================================
   AUTH CARD
========================================================= */

.auth-card{

    position:relative;

    z-index:2;

    padding:35px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:20px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 100% 0,
            rgba(8,124,255,.09),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            rgba(11,28,52,.97),
            rgba(3,11,25,.985)
        );

    box-shadow:

        0 35px 80px
        rgba(0,0,0,.40),

        0 0 70px
        rgba(8,124,255,.055),

        inset 0 1px 0
        rgba(255,255,255,.045);
}


.auth-card::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:55%;

    height:1px;

    transform:
        translateX(-50%);

    background:

        linear-gradient(
            90deg,
            transparent,
            #168dff,
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(8,124,255,.5);
}



/* =========================================================
   CARD HEADER
========================================================= */

.auth-card-header{

    display:flex;

    align-items:center;

    gap:15px;
}


.auth-mini-logo{

    flex:0 0 70px;

    width:70px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border:
        1px solid
        rgba(8,124,255,.14);

    border-radius:11px;

    background:
        rgba(8,124,255,.045);
}


.auth-mini-logo img{

    display:block;

    width:65px;

    height:auto;
}


.auth-card-label{

    display:block;

    margin-bottom:2px;

    color:#168dff;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.7px;
}


.auth-card h2{

    color:#f2f6fc;

    font-size:27px;

    line-height:1.2;
}


.auth-card-description{

    margin-top:17px;

    color:#73839a;

    font-size:12px;
}



/* =========================================================
   FORM
========================================================= */

.auth-form{

    margin-top:27px;
}


.auth-field{

    margin-bottom:19px;
}


.auth-field label{

    display:block;

    margin-bottom:7px;

    color:#c7d1df;

    font-size:11px;

    font-weight:650;
}


.auth-label-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;
}


.auth-label-row label{

    margin-bottom:7px;
}


.forgot-link{

    margin-bottom:7px;

    color:#168dff;

    text-decoration:none;

    font-size:10px;

    font-weight:600;
}


.forgot-link:hover{

    text-decoration:underline;
}



/* =========================================================
   INPUT
========================================================= */

.auth-input-wrapper{

    position:relative;
}


.auth-input-wrapper input{

    width:100%;

    height:50px;

    padding:
        0 48px;

    color:#edf3fb;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:10px;

    outline:none;

    background:
        rgba(255,255,255,.035);

    font-size:12px;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.auth-input-wrapper input::placeholder{

    color:#50627b;
}


.auth-input-wrapper input:hover{

    border-color:
        rgba(255,255,255,.14);
}


.auth-input-wrapper input:focus{

    border-color:
        rgba(8,124,255,.55);

    background:
        rgba(8,124,255,.045);

    box-shadow:
        0 0 0 3px
        rgba(8,124,255,.075);
}


.auth-input-wrapper input:disabled{

    opacity:.65;

    cursor:not-allowed;
}



/* =========================================================
   INPUT ICON
========================================================= */

.auth-input-icon{

    position:absolute;

    z-index:2;

    left:17px;

    top:50%;

    transform:
        translateY(-50%);

    color:#68809d;

    font-size:13px;

    pointer-events:none;
}


.auth-lock-icon{

    font-size:7px;

    color:#168dff;
}



/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle{

    position:absolute;

    z-index:3;

    right:8px;

    top:50%;

    width:36px;

    height:36px;

    transform:
        translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:8px;

    outline:0;

    background:transparent;

    color:#71849c;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease;
}


.password-toggle:hover{

    color:#168dff;

    background:
        rgba(8,124,255,.07);
}



/* =========================================================
   MESSAGE
========================================================= */

.auth-message{

    display:none;

    margin-top:20px;

    padding:
        11px 13px;

    border-radius:9px;

    font-size:11px;

    line-height:1.5;
}


.auth-message.show{

    display:block;
}


.auth-message.error{

    color:#ffb4b4;

    border:
        1px solid
        rgba(255,86,86,.18);

    background:
        rgba(255,62,62,.07);
}


.auth-message.success{

    color:#9ee6bd;

    border:
        1px solid
        rgba(53,210,122,.18);

    background:
        rgba(53,210,122,.07);
}


.auth-message.info{

    color:#a9d7ff;

    border:
        1px solid
        rgba(8,124,255,.18);

    background:
        rgba(8,124,255,.07);
}



/* =========================================================
   SUBMIT
========================================================= */

.auth-submit{

    position:relative;

    width:100%;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    margin-top:6px;

    border:
        1px solid
        rgba(65,165,255,.45);

    border-radius:10px;

    color:white;

    background:
        linear-gradient(
            135deg,
            #1192ff,
            #0757c9
        );

    box-shadow:
        0 11px 32px
        rgba(8,124,255,.20),
        inset 0 1px 0
        rgba(255,255,255,.14);

    cursor:pointer;

    font-size:12px;

    font-weight:750;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}


.auth-submit:hover:not(:disabled){

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 40px
        rgba(8,124,255,.32),
        inset 0 1px 0
        rgba(255,255,255,.16);
}


.auth-submit:disabled{

    cursor:not-allowed;

    opacity:.72;
}


.auth-submit-arrow{

    font-size:16px;

    transition:
        transform .25s ease;
}


.auth-submit:hover
.auth-submit-arrow{

    transform:
        translateX(3px);
}



/* =========================================================
   SPINNER
========================================================= */

.auth-spinner{

    display:none;

    width:16px;

    height:16px;

    border:
        2px solid
        rgba(255,255,255,.35);

    border-top-color:#ffffff;

    border-radius:50%;

    animation:
        auth-spin .7s linear infinite;
}


@keyframes auth-spin{

    to{

        transform:
            rotate(360deg);

    }

}



/* =========================================================
   SEPARATOR
========================================================= */

.auth-separator{

    display:flex;

    align-items:center;

    gap:12px;

    margin:
        27px 0 20px;
}


.auth-separator span{

    flex:1;

    height:1px;

    background:
        rgba(255,255,255,.06);
}


.auth-separator small{

    color:#53657d;

    font-size:9px;
}



/* =========================================================
   REGISTER
========================================================= */

.auth-register{

    text-align:center;
}


.auth-register p{

    color:#718299;

    font-size:10px;
}


.auth-register-button{

    width:100%;

    min-height:47px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    margin-top:11px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:9px;

    color:#cbd7e6;

    text-decoration:none;

    background:
        rgba(255,255,255,.025);

    font-size:11px;

    font-weight:650;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}


.auth-register-button:hover{

    transform:
        translateY(-1px);

    color:#ffffff;

    border-color:
        rgba(8,124,255,.27);

    background:
        rgba(8,124,255,.055);
}


.auth-register-button span{

    color:#168dff;
}



/* =========================================================
   SECURITY
========================================================= */

.auth-security{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin-top:23px;

    padding-top:18px;

    border-top:
        1px solid
        rgba(255,255,255,.045);

    color:#52647b;

    font-size:9px;
}


.auth-security-icon{

    color:#168dff;
}



/* =========================================================
   FOOTER
========================================================= */

.auth-footer{

    min-height:auto;

    background:#01050d;

    border-top:
        1px solid
        rgba(255,255,255,.055);
}


.auth-footer-inner{

    min-height:64px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    color:#485970;

    font-size:9px;
}


.auth-footer-inner div{

    display:flex;

    align-items:center;

    gap:10px;
}


.auth-footer a{

    color:#61738b;

    text-decoration:none;

    transition:
        color .2s ease;
}


.auth-footer a:hover{

    color:#168dff;
}



/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"]
.auth-main{

    background:

        radial-gradient(
            circle at 72% 35%,
            rgba(8,124,255,.11),
            transparent 31%
        ),

        radial-gradient(
            circle at 15% 65%,
            rgba(0,183,255,.05),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #edf6ff 52%,
            #f8fbff
        );
}


html[data-theme="light"]
.auth-grid{

    opacity:.35;

    background-image:

        linear-gradient(
            rgba(8,124,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8,124,255,.06) 1px,
            transparent 1px
        );
}


html[data-theme="light"]
.auth-background{

    background-image:

        linear-gradient(
            115deg,
            transparent 42%,
            rgba(8,124,255,.055) 42.2%,
            transparent 42.5%
        ),

        linear-gradient(
            295deg,
            transparent 70%,
            rgba(8,124,255,.04) 70.2%,
            transparent 70.5%
        );
}


html[data-theme="light"]
.auth-glow-left{

    background:
        rgba(8,124,255,.075);
}


html[data-theme="light"]
.auth-glow-right{

    background:
        rgba(0,160,255,.065);
}



/* =========================================================
   LIGHT INTRO
========================================================= */

html[data-theme="light"]
.auth-badge{

    color:#176dbb;

    border-color:
        rgba(8,124,255,.17);

    background:
        rgba(255,255,255,.72);

    box-shadow:
        0 5px 20px
        rgba(22,73,120,.05);
}


html[data-theme="light"]
.auth-intro h1{

    color:#10243e;
}


html[data-theme="light"]
.auth-intro h1 span{

    background:
        linear-gradient(
            90deg,
            #102d52 5%,
            #087cff 58%,
            #00a9ed
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}


html[data-theme="light"]
.auth-intro > p{

    color:#61758b;
}


html[data-theme="light"]
.auth-benefit{

    border-color:
        rgba(18,54,91,.075);

    background:
        rgba(255,255,255,.58);

    box-shadow:
        0 5px 18px
        rgba(25,60,95,.025);
}


html[data-theme="light"]
.auth-benefit:hover{

    border-color:
        rgba(8,124,255,.18);

    background:#ffffff;
}


html[data-theme="light"]
.auth-benefit strong{

    color:#19334f;
}


html[data-theme="light"]
.auth-benefit span{

    color:#71869b;
}



/* =========================================================
   LIGHT CARD
========================================================= */

html[data-theme="light"]
.auth-card-glow{

    background:
        rgba(8,124,255,.09);
}


html[data-theme="light"]
.auth-card{

    border:
        1px solid
        rgba(19,58,96,.10);

    background:

        radial-gradient(
            circle at 100% 0,
            rgba(8,124,255,.065),
            transparent 36%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(241,247,252,.99)
        );

    box-shadow:
        0 35px 75px
        rgba(26,65,104,.13),
        0 0 65px
        rgba(8,124,255,.04),
        inset 0 1px 0
        rgba(255,255,255,.95);
}


html[data-theme="light"]
.auth-mini-logo{

    border-color:
        rgba(8,124,255,.12);

    background:
        rgba(237,246,255,.8);
}


html[data-theme="light"]
.auth-card h2{

    color:#10243e;
}


html[data-theme="light"]
.auth-card-description{

    color:#71869b;
}


html[data-theme="light"]
.auth-field label{

    color:#354e68;
}


html[data-theme="light"]
.auth-input-wrapper input{

    color:#17304c;

    border-color:
        rgba(20,56,92,.11);

    background:
        rgba(255,255,255,.76);

    box-shadow:
        inset 0 1px 2px
        rgba(20,52,85,.025);
}


html[data-theme="light"]
.auth-input-wrapper input::placeholder{

    color:#91a1b2;
}


html[data-theme="light"]
.auth-input-wrapper input:hover{

    border-color:
        rgba(8,124,255,.20);
}


html[data-theme="light"]
.auth-input-wrapper input:focus{

    border-color:
        rgba(8,124,255,.48);

    background:#ffffff;

    box-shadow:
        0 0 0 3px
        rgba(8,124,255,.07);
}


html[data-theme="light"]
.auth-input-icon{

    color:#71879e;
}


html[data-theme="light"]
.password-toggle{

    color:#71879e;
}


html[data-theme="light"]
.auth-separator span{

    background:
        rgba(20,56,92,.08);
}


html[data-theme="light"]
.auth-separator small{

    color:#8497aa;
}


html[data-theme="light"]
.auth-register p{

    color:#71869b;
}


html[data-theme="light"]
.auth-register-button{

    color:#38536e;

    border-color:
        rgba(20,56,92,.10);

    background:
        rgba(255,255,255,.68);
}


html[data-theme="light"]
.auth-register-button:hover{

    color:#0872d3;

    border-color:
        rgba(8,124,255,.22);

    background:#ffffff;

    box-shadow:
        0 7px 20px
        rgba(25,60,95,.055);
}


html[data-theme="light"]
.auth-security{

    color:#8295a8;

    border-top-color:
        rgba(20,56,92,.07);
}



/* =========================================================
   LIGHT FOOTER
========================================================= */

html[data-theme="light"]
.auth-footer{

    background:#eef4f9;

    border-top-color:
        rgba(17,52,87,.08);
}


html[data-theme="light"]
.auth-footer-inner{

    color:#74889b;
}


html[data-theme="light"]
.auth-footer a{

    color:#61778d;
}



/* =========================================================
   TABLET
========================================================= */

@media(max-width:950px){

    .auth-main{

        padding:
            65px
            20px
            75px;

    }


    .auth-container{

        grid-template-columns:1fr;

        max-width:620px;

        gap:55px;

    }


    .auth-intro{

        max-width:600px;

        margin:auto;

        text-align:center;

    }


    .auth-intro > p{

        margin-left:auto;

        margin-right:auto;

    }


    .auth-benefits{

        margin-left:auto;

        margin-right:auto;

        text-align:left;

    }


    .auth-card-wrapper{

        width:100%;

        max-width:500px;

        margin:auto;

    }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .auth-main{

        min-height:auto;

        padding:
            48px
            14px
            60px;

    }


    .auth-container{

        width:100%;

        gap:42px;

    }


    .auth-intro h1{

        font-size:
            clamp(
                2.45rem,
                12vw,
                3.3rem
            );

        letter-spacing:-1.7px;

    }


    .auth-intro > p{

        font-size:14px;

    }


    .auth-benefits{

        margin-top:30px;

    }


    .auth-benefit{

        padding:12px;

    }


    .auth-card{

        padding:
            27px 21px;

        border-radius:17px;

    }


    .auth-mini-logo{

        flex-basis:62px;

        width:62px;

        height:53px;

    }


    .auth-mini-logo img{

        width:58px;

    }


    .auth-card h2{

        font-size:24px;

    }


    .auth-label-row{

        gap:10px;

    }


    .forgot-link{

        font-size:9px;

    }


    .auth-footer-inner{

        min-height:75px;

        flex-direction:column;

        justify-content:center;

        gap:5px;

        text-align:center;

    }

}



/* =========================================================
   VERY SMALL
========================================================= */

@media(max-width:400px){

    .auth-card{

        padding:
            24px 17px;

    }


    .auth-input-wrapper input{

        padding-left:43px;

        padding-right:43px;

    }


    .auth-benefit span{

        font-size:9px;

    }

}

/* =========================================================
   REGISTER
========================================================= */

.auth-register-card {
    max-width: 520px;
}

.register-name-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}


/* =========================================================
   PASSWORD STRENGTH
========================================================= */

.password-strength {
    margin-top: 9px;
}

.password-strength-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.password-strength-bars span {
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    transition:
        background .25s ease,
        box-shadow .25s ease;
}

.password-strength-bars span.active.weak {
    background: #ff5c5c;
}

.password-strength-bars span.active.medium {
    background: #f0ad38;
}

.password-strength-bars span.active.strong {
    background: #32c77b;
    box-shadow:
        0 0 8px rgba(50,199,123,.25);
}

.password-strength-info {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 6px;
    color: #53657d;
    font-size: 8px;
}


/* =========================================================
   CHECKBOX
========================================================= */

.auth-checkbox {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin:
        5px 0
        21px;
    cursor: pointer;
}

.auth-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-checkbox-box {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border:
        1px solid
        rgba(255,255,255,.13);
    border-radius: 5px;
    background:
        rgba(255,255,255,.035);
    color: transparent;
    font-size: 9px;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.auth-checkbox input:checked
+ .auth-checkbox-box {
    color: #ffffff;
    border-color: #168dff;
    background: #087cff;
    box-shadow:
        0 0 13px
        rgba(8,124,255,.20);
}

.auth-checkbox input:focus-visible
+ .auth-checkbox-box {
    box-shadow:
        0 0 0 3px
        rgba(8,124,255,.12);
}

.auth-checkbox-text {
    color: #718299;
    font-size: 9px;
    line-height: 1.6;
}

.auth-checkbox-text a {
    color: #168dff;
    text-decoration: none;
}

.auth-checkbox-text a:hover {
    text-decoration: underline;
}


/* =========================================================
   REGISTER LIGHT THEME
========================================================= */

html[data-theme="light"]
.password-strength-bars span {
    background:
        rgba(20,56,92,.09);
}

html[data-theme="light"]
.auth-checkbox-box {
    border-color:
        rgba(20,56,92,.15);
    background:
        rgba(255,255,255,.75);
}

html[data-theme="light"]
.auth-checkbox-text {
    color: #71869b;
}


/* =========================================================
   REGISTER RESPONSIVE
========================================================= */

@media(max-width:600px) {

    .register-name-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .password-strength-info {
        font-size: 7.5px;
    }

}


.referral-invite-notice {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 16px 0 4px;
    padding: 12px 14px;
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 12px;
    color: #c9f8e5;
    background: rgba(34, 197, 94, .075);
}

.referral-invite-notice[hidden] {
    display: none;
}

.referral-invite-notice > span {
    color: #34d399;
    font-size: 18px;
}

.referral-invite-notice strong,
.referral-invite-notice small {
    display: block;
}

.referral-invite-notice strong {
    font-size: 11px;
}

.referral-invite-notice small {
    margin-top: 3px;
    color: #91ad9f;
    font-size: 9px;
    line-height: 1.45;
}

html[data-theme="light"] .referral-invite-notice {
    color: #14633f;
    border-color: rgba(22, 163, 74, .20);
    background: rgba(22, 163, 74, .07);
}

html[data-theme="light"] .referral-invite-notice small {
    color: #4e7562;
}