/* ==========================
   RESET
========================== */

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

body{
    font-family:"Segoe UI",Arial,sans-serif;
    background:#f5f5f5;
    overflow-x:hidden;
}

/* ==========================
   BACKGROUND PANELS
========================== */

.top-blue{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:255px;
    background:#2d3d92;
    z-index:-10;
}

.bottom-white{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:calc(100% - 255px);
    background:#f7f7f7;
    z-index:-10;
}

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

.wrapper{

    width:1500px;
    height:850px;

    max-width:95%;

    margin:10px auto;

    display:flex;

    overflow:hidden;

    border-radius:4px;

    background:#fff;

    box-shadow:
    0 10px 40px rgba(0,0,0,.15);

}

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

.login-side{

    width:50%;

    background:
    linear-gradient(
    120deg,
    #534d4d 0%,
    #252534 45%,
    #0d1022 100%
    );

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:70px;

}

.login-side h1{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin-bottom:55px;

}

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

.login-box{

    width:500px;

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

    border-radius:6px;

    padding:40px 34px;

}

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

.input-group{

    position:relative;

    margin-bottom:24px;

}

.input-group input{

    width:100%;

    height:56px;

    background:transparent;

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

    border-radius:4px;

    color:#fff;

    padding:20px 45px 8px 16px;

    font-size:16px;

    outline:none;

    transition:.25s;

}

.input-group input:focus{

    border-color:#9cb8ff;

}

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

.input-group label{

    position:absolute;

    left:16px;

    top:18px;

    color:#d2d2d2;

    transition:.25s;

    pointer-events:none;

    font-size:16px;

}

.input-group input:focus+label,
.input-group input.filled+label{

    top:7px;

    font-size:11px;

    color:#bfcfff;

}

/* ==========================
   VIRTUAL KEYBOARD
========================== */

.vk-hint{

    display:none;

    margin-top:7px;

    color:#8d8d8d;

    font-size:11px;

}

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

.toggle-password{

    position:absolute;

    right:16px;

    top:18px;

    color:#ececec;

    cursor:pointer;

    font-size:18px;

}

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

.forgot{

    display:block;

    text-align:center;

    margin:12px 0 26px;

    color:#d7b45d;

    text-decoration:none;

    font-size:15px;

}

.forgot:hover{

    text-decoration:underline;

}

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

button{

    width:100%;

    height:56px;

    background:#fff;

    border:none;

    border-radius:4px;

    cursor:pointer;

    font-size:20px;

    font-weight:600;

    transition:.25s;

}

button:hover{

    background:#efefef;

}

/* ==========================
   COPYRIGHT
========================== */

.copyright{

    margin-top:26px;

    color:#fff;

    text-align:center;

    line-height:1.4;

    font-size:15px;

}

.copyright a{

    color:#d7b45d;

    text-decoration:none;

}

.copyright a:hover{

    text-decoration:underline;

}

/* ==========================
   IMAGE SIDE
========================== */

.image-side{

    width:50%;

    overflow:hidden;

    background:#fff;

}

.image-side img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

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

@media(max-width:1200px){

.wrapper{

    width:95%;
    height:auto;

    flex-direction:column;

}

.login-side{

    width:100%;
    padding:50px 20px;

}

.image-side{

    width:100%;
    height:450px;

}

.login-box{

    width:100%;

    max-width:520px;

}

}

@media(max-width:600px){

.login-side h1{

    font-size:22px;

}

.login-box{

    padding:25px;

}

.input-group input{

    font-size:15px;

}

button{

    font-size:18px;

}

}