/* ======================================================
   LOGIN
   ANNA LEE STUDIO
====================================================== */

/* =========================
   BODY LOGIN
========================= */

body.login-page{

    margin:0;
    padding:0;

    min-height:100vh;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    overflow:hidden;

    position:relative;

    background:linear-gradient(
        to right,
        #eef7f5 72%,
        #4f6b58 28%
    );

}

/* =========================
   WALLPAPER IZQUIERDO
========================= */

body.login-page::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:72%;
    height:100%;

    background-image:url("../../img/wallPaper.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:65%;

    opacity:.95;

}

/* =========================
   CONTENEDOR LOGIN
========================= */

.login-box{

    width:100%;

    max-width:420px;

    position:absolute;

    right:9%;

    top:50%;

    transform:translateY(-50%);

    z-index:10;

}

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

.login-card-body{
    border:none;

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

    backdrop-filter:blur(18px);

    border-radius:24px;

    padding:26px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

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

}

.login-card{

    border:none;

    background:transparent;

    box-shadow:none;

}

/* =========================
   LOGO
========================= */

.login-logo{

    text-align:center;

    margin-bottom:18px;

}

.login-logo img{

    width:170px;

    height:auto;

    object-fit:contain;

}

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

.login-title-card{

    background:#ffffff;

    border-radius:18px;

    padding:18px;

    text-align:center;

    margin-bottom:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

/* TITULO */

.titulo-login{

    font-size:28px;

    font-weight:800;

    color:#043838 !important;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:5px;

}

/* SUBTITULO */

.subtitulo-login{

    font-size:14px;

    color:#5d7568 !important;

    margin-bottom:5px;

}

/* NOMBRE SALON */

.salon-login{

    font-size:17px;

    font-weight:700;

    color:#2bb3b1 !important;

}

/* =========================
   INPUTS
========================= */

.login-card-body .form-control{

    height:46px;

    border-radius:14px;

    border:1px solid #dfe7e5;

    transition:all .25s ease;

}

/* FOCUS */

.login-card-body .form-control:focus{

    border-color:#2bb3b1;

    box-shadow:0 0 0 4px rgba(43,179,177,.12);

}

/* =========================
   PASSWORD ICON
========================= */

.toggle-password{

    background:#f8fafc;

    border-radius:0 14px 14px 0;

    cursor:pointer;

}

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

.icheck-primary label{

    color:#4b5563;

    font-size:14px;

    font-weight:500;

}

/* CHECK ACTIVO */

.icheck-primary input:checked + label::before{

    background-color:#2bb3b1;

    border-color:#2bb3b1;

}

/* =========================
   BOTON LOGIN
========================= */

.btn-login{

    width:100%;

    height:48px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2bb3b1,
        #1d8cf8
    );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    transition:all .25s ease;

}

/* HOVER */

.btn-login:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(43,179,177,.25);

}

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

@media (max-width:992px){

    body.login-page{

        justify-content:center;

        background:#eef7f5;

    }

    body.login-page::before{

        opacity:.08;

        width:100%;

        background-size:60%;

    }

    .login-box{

        position:relative;

        right:auto;

        top:auto;

        transform:none;

        margin:0 auto;

        padding:20px;

    }

}

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

@media (max-width:576px){

    .login-card-body{

        padding:22px;

        border-radius:20px;

    }

    .titulo-login{

        font-size:22px;

    }

    .login-logo img{

        width:140px;

    }

}