/*==========================================================
    CHIA CHANG ERP
    LOGIN CSS
==========================================================*/

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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    font-family:
    "Segoe UI",
    Tahoma,
    Geneva,
    Verdana,
    sans-serif;

    background:#f3f6fb;

}

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

.login-container{

    width:100%;
    height:100vh;

}

.login-container .row{

    width:100%;
    height:100vh;

    margin:0;

}

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

.left-side{

    position:relative;

    overflow:hidden;

    color:#ffffff;

    background:

    linear-gradient(

    rgba(0,0,0,.5),

    rgba(0,0,0,.5)),

     url('https://images.unsplash.com/photo-1497366754035-f200968a6e72');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.left-side::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(13,110,253,.20),

    rgba(0,0,0,.35)

    );

}

.left-content{

    position:relative;

    z-index:2;

    padding:70px;

}

.left-content h1{

    font-size:52px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;

}

.left-content hr{

    width:560px;

    height:4px;

    border:0;

    background:#0d6efd;

    opacity:1;

    margin:25px 0;

}

.left-content h5{

    font-size:21px;

    font-weight:500;

    margin:16px 0;

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

.login-right{

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f3f6fb;

}

/*==========================================================
    LOGIN BOX
==========================================================*/

.login-box{

    width:420px;

    background:#ffffff;

    border-radius:18px;

    padding:45px;

    box-shadow:

    0 10px 35px rgba(0,0,0,.12);

    border:1px solid #e9ecef;

}

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

.logo{

    font-size:30px;

    font-weight:700;

    color:#0d6efd;

    margin-bottom:8px;

}

.login-box p{

    color:#6c757d;

    margin-bottom:30px;

}

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

.login-box label{

    font-weight:600;

    color:#495057;

    margin-bottom:8px;

}

.form-control{

    height:50px;

    border-radius:10px;

    border:1px solid #d0d7de;

    font-size:15px;

    transition:.3s;

}

.form-control:focus{

    border-color:#0d6efd;

    box-shadow:

    0 0 0 .20rem rgba(13,110,253,.15);

}

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

.form-check{

    margin-top:10px;

    margin-bottom:20px;

}

.form-check-label{

    color:#6c757d;

}

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

.btn-login{

    width:100%;

    height:50px;

    border:none;

    border-radius:10px;

    background:#0d6efd;

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.btn-login:hover{

    background:#0b5ed7;

    color:#ffffff;

}

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

.alert{

    border-radius:10px;

}

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

.login-box{

    animation:loginFade .5s ease;

}

@keyframes loginFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}