/*=========================================================
        MEMBER LOGIN
        login/assets/login.css
=========================================================*/

:root{

    --primary:#0B2D5B;
    --primary-dark:#082143;
    --secondary:#F5F7FB;
    --gold:#C89B3C;
    --white:#ffffff;
    --text:#333333;
    --border:#d9dee8;
    --shadow:0 15px 40px rgba(0,0,0,.08);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;

    background:
        linear-gradient(rgba(11,45,91,.88),rgba(11,45,91,.88)),
        url("../../assets/images/login-bg.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:100vh;

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

    padding:40px 15px;

}

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

.login-page{

    width:100%;
    max-width:460px;

}

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

.login-card{

    background:#fff;

    border-radius:18px;

    padding:45px;

    box-shadow:var(--shadow);

    animation:fadeUp .5s ease;

}

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

.login-logo{

    width:90px;
    height:90px;

    object-fit:contain;

    margin-bottom:15px;

}

.login-card h2{

    color:var(--primary);

    font-size:28px;

    font-weight:700;

    margin-bottom:5px;

}

.login-card p{

    color:#666;

    margin-bottom:0;

}

/*=========================================================
                    LABEL
=========================================================*/

.form-label{

    font-weight:600;

    color:var(--primary);

}

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

.form-control{

    height:50px;

    border:1px solid var(--border);

    border-left:0;

    font-size:15px;

    box-shadow:none;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:none;

}

.input-group-text{

    background:#fff;

    border:1px solid var(--border);

    border-right:0;

    color:var(--primary);

    width:50px;

    justify-content:center;

}

#togglePassword{

    border:1px solid var(--border);

    border-left:0;

}

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

.btn-primary{

    background:var(--primary);

    border:none;

    height:52px;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.btn-outline-primary{

    border-color:var(--primary);

    color:var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:#fff;

}

/*=========================================================
                    LINKS
=========================================================*/

a{

    text-decoration:none;

}

a:hover{

    text-decoration:none;

}

.login-card a{

    color:var(--primary);

    font-weight:500;

}

.login-card a:hover{

    color:var(--gold);

}

/*=========================================================
                    ALERT
=========================================================*/

.alert{

    border-radius:10px;

    font-size:14px;

}

/*=========================================================
                REMEMBER
=========================================================*/

.form-check-input:checked{

    background:var(--primary);

    border-color:var(--primary);

}

/*=========================================================
                    LOADING
=========================================================*/

.btn-loading{

    pointer-events:none;

    opacity:.8;

}

/*=========================================================
                    DIVIDER
=========================================================*/

hr{

    margin:30px 0;

    opacity:.15;

}

/*=========================================================
                    ANIMATION
=========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:576px){

    body{

        padding:20px;

    }

    .login-card{

        padding:30px 22px;

    }

    .login-logo{

        width:75px;
        height:75px;

    }

    .login-card h2{

        font-size:24px;

    }

    .btn-primary{

        height:50px;

    }

}