/*
|--------------------------------------------------------------------------
| NTeam Design System (NDS)
|--------------------------------------------------------------------------
| Login Page
|--------------------------------------------------------------------------
*/


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

.nds-login-page {

    width:100%;

    height:100vh;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,8,35,.55),
            rgba(0,8,35,.55)
        ),
        url('../img/bg-login.jpg');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}

.register-page{

    overflow-y:auto;

}

.register-page .nds-login-container{

    min-height:100vh;

    padding:30px 0;

    align-items:flex-start;

}



/* ================================
   CONTAINER
================================ */

.nds-login-container {

    width:100%;

    max-width:1500px;

    height:100vh;

    margin:0 auto;

    display:flex;

    align-items:center;

}



/* ================================
   LEFT
================================ */

.nds-login-left {

    width:55%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-left:80px;

}



.nds-login-content {

    width:100%;

    max-width:520px;

    color:#fff;

}



/* BRAND */

.nds-login-brand {

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

}



.nds-login-logo {

    width:75px;

}



.nds-login-brand span {

    font-size:48px;

    font-weight:700;

    color:#fff;

}



/* TITLE */

.nds-login-title {

    font-size:27px;

    line-height:1.35;

    font-weight:600;

    max-width:390px;

    margin-bottom:20px;

    color:#ffffff;

}



.nds-login-title span {

    color:#1f8fff;

}



/* DIVIDER */

.nds-login-divider {

    width:35px;

    height:4px;

    border-radius:20px;

    background:#1f8fff;

    margin-bottom:25px;

}



/* FEATURES */

.nds-login-features {

    display:flex;

    flex-direction:column;

    gap:22px;

}



.nds-login-feature {

    display:flex;

    gap:15px;

}



.nds-login-feature i {

    width:38px;

    font-size:30px;

    color:#1994ff;

}



.nds-login-feature strong {

    display:block;

    color:#fff;

    font-size:15px;

}



.nds-login-feature span {

    display:block;

    color:#b9c5d8;

    font-size:13px;

    margin-top:3px;

}



/* ================================
   RIGHT
================================ */

.nds-login-right {

    width:45%;

    display:flex;

    justify-content:flex-start;

    align-items:center;

}



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

.nds-login-card {

    width:100%;

    max-width:420px;

    padding:28px;


    border-radius:20px;


    background:

        rgba(10,25,65,.28);


    backdrop-filter:

        blur(18px);


    -webkit-backdrop-filter:

        blur(18px);


    border:

        1px solid rgba(255,255,255,.12);


    box-shadow:

        0 20px 50px rgba(0,0,0,.35);


    color:#fff;

}



/* ICON */

.nds-login-icon {

    display:flex;

    justify-content:center;

    margin-bottom:5px;

}


.nds-login-icon svg {

    width:50px;

    height:50px;

}



/* TITLE */

.nds-login-card h2 {

    text-align:center;

    font-size:22px;

    font-weight:700;

    margin-bottom:5px;
    
    color:#ffffff;

}



.nds-login-card p {

    text-align:center;

    color:#c4d0e6;

    font-size:13px;

    margin-bottom:18px;

}



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

.nds-form-group {

    margin-top:12px;

}



.nds-form-label {

    display:block;

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:5px;

}



.nds-form-input {

    width:100%;

    height:44px;


    border-radius:9px;


    border:

        1px solid rgba(255,255,255,.12);


    background:

        rgba(255,255,255,.05);


    color:#fff;


    padding:0 14px;


    font-size:14px;


    outline:none;


    transition:.3s;

}



.nds-form-input:focus {

    border-color:#008cff;


    box-shadow:

        0 0 0 3px rgba(0,140,255,.15);

}



.nds-form-input::placeholder {

    color:#aeb8c8;

}



/* ================================
   OPTIONS
================================ */

.nds-login-options {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:12px;

}



.nds-login-options a {

    color:#0a84ff;

    font-size:13px;

    text-decoration:none;

}



.nds-login-remember {

    display:flex;

    align-items:center;

    gap:7px;

    color:#cdd7e8;

    font-size:13px;

}



.nds-login-remember input {

    width:15px;

    height:15px;

}



/* ================================
   BUTTON
================================ */

.nds-btn-login {

    width:100%;

    height:46px;


    margin-top:18px;


    border:none;


    border-radius:9px;


    background:

        linear-gradient(

            90deg,

            #006dff,

            #148cff

        );


    color:#fff;


    font-size:18px;

    font-weight:700;


    cursor:pointer;


    transition:.3s;

}



.nds-btn-login:hover {

    transform:translateY(-2px);


    box-shadow:

        0 10px 25px rgba(0,102,255,.35);

}



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

.nds-login-separator {

    display:flex;

    align-items:center;

    margin:15px 0;

}



.nds-login-separator::before,

.nds-login-separator::after {

    content:"";

    flex:1;

    height:1px;

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

}



.nds-login-separator span {

    margin:0 12px;

    color:#b8c4d9;

    font-size:13px;

}



/* REGISTER */

.nds-btn-register {

    width:100%;

    height:44px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:9px;


    border:

        1px solid #0a84ff;


    color:#0a84ff;


    text-decoration:none;


    font-size:15px;

    font-weight:600;

}



.nds-btn-register:hover {

    background:

        rgba(10,132,255,.10);

}



/* TRIAL */

.nds-login-trial {

    text-align:center;

    margin-top:10px;


    color:#c3cde0;


    font-size:12px;

}



/* ALERT */

.nds-alert {

    padding:10px;

    border-radius:8px;

    margin-bottom:12px;

    font-size:13px;

}

/* ==========================================================
   REGISTER
   Ajustes exclusivos da tela de cadastro
========================================================== */

.register-page .nds-login-card{

    max-width:390px;

    padding:18px;

    transform:scale(.88);

    transform-origin:center;

}

.register-page .nds-login-icon{

    margin-bottom:2px;

}

.register-page .nds-login-icon svg{

    width:40px;

    height:40px;

}

.register-page .nds-login-card h2{

    font-size:20px;

    margin-bottom:2px;

}

.register-page .nds-login-card p{

    font-size:12px;

    margin-bottom:8px;

}

.register-page .nds-form-group{

    margin-top:6px;

}

.register-page .nds-form-label{

    font-size:12px;

    margin-bottom:3px;

}

.register-page .nds-form-input{

    height:38px;

    padding:0 12px;

    font-size:13px;

}

.register-page .nds-btn-login{

    height:40px;

    margin-top:12px;

    font-size:16px;

}

.register-page .nds-btn-register{

    height:38px;

    font-size:14px;

}

.register-page .nds-login-separator{

    margin:8px 0;

}

.register-page .nds-login-trial{

    margin-top:6px;

    font-size:11px;

}

/* força da senha */

.register-page .password-strength{

    margin-top:6px;

}

.register-page .password-strength-title{

    font-size:12px;

}

.register-page .password-strength-bar{

    height:4px;

    margin:4px 0;

}

.register-page .password-strength-list{

    gap:2px;

}

.register-page .password-strength-list li{

    font-size:11px;

    line-height:1.2;

}

.register-page .step-buttons{

    margin-top:12px;

    gap:8px;

}


/* ================================
   NOTEBOOKS
================================ */

@media(min-width:1366px){

    /* Login */

    body:not(.register-page) .nds-login-card{

        transform:scale(.95);

    }

    body:not(.register-page) .nds-login-content{

        transform:scale(.95);

        transform-origin:left center;

    }

    /* Cadastro */

    .register-page .nds-login-card{

        transform:scale(.88);

        transform-origin:center;

    }

}


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

@media(max-width:1050px){

    .nds-login-left{

        display:none;

    }

    .nds-login-right{

        width:100%;

        justify-content:center;

        padding:20px;

    }

    .register-page .nds-login-card{

        transform:none;

        max-width:420px;

        padding:22px;

    }

}



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

@media(max-width:767px){


    .nds-login-page {

        overflow:auto;

    }


    .nds-login-container {

        min-height:100vh;

        height:auto;

    }


    .nds-login-card {

        max-width:390px;

        padding:25px;

    }


}



@media(max-width:480px){


    .nds-login-card {

        padding:22px;

    }


    .nds-login-card h2 {

        font-size:20px;

    }


}