*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html {
    font-size:14px;
    letter-spacing:.01rem;
    scroll-behavior:smooth;
}
html,
body{
    height:100px;
    margin:0;
    padding:0;
    user-select:none;
}
body{
    font-size:1rem;
    font-weight:400;
    line-height:1.45;
    color:rgba(255,255,255,0.8);
    background-color: #202938;
    scroll-behavior:smooth;
    font-family : 'Roboto',sans-serif;
}

.h-100
{
    height:100% !important;
}

.login-wrapper{
    position:absolute;
    top:0;
    left:0;
    width:33.33%;
    height:100%;
    background:#111727;
}

.login-wrapper-inner{
    position:relative;
    width: 100%;
    height: 100px;
    padding:50px;
}
.title{
    position : relative;
    margin : 0;
    font-size : 2.5rem;
    font-weight : 500;
}

.sub-title{
    position : relative;
    font-size : 0.995rem;
    margin:0;
    font-weight:400;
    margin-bottom:1rem;
    padding-left:0.25rem;
}

.main-form{
    position : relative;
    padding-top:calc(3rem*2);
}

.form-group{
    margin-bottom : 1rem;
}
label{
    display : inline-block;
    font-size : 14px;
    color:#d0d2d6;
    margin-bottom : 0.5rem;
}
.form-control{
    position : relative;
    display :block;
    width:100%;
    height:2.714rem;
    font-size:1rem;
    font-weight:400;
    line-height:1.45;
    color:rgba(255,255,255,0.8);
    padding:0.438rem 1rem;
    background-color:#111727;
    outline:none;
    border:1px solid #3b4253;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;
}

.form-control::placeholder{
    color:#3b4253;
}
.form-control :focus{
    border-color:#7367f0;
}
.btn-submit{
    display:block;
    width:100%;
    color:#fff;
    font-weight:600;
    letter-spacing:1px;
    color:#fff;
    background:#7367f0;
    border:1px solid #7367f0;
    cursor:pointer;
    margin-top:1rem;
    font-size:1.05rem;
    outline:none;
    padding:0.786rem 1.5rem;
    border-radius:0.358rem;
    transition:color .15s ease-in-out,
        border-color .15s ease-in-out,
        box-shadow .15s ease-in-out;

}
.btn-submit:hover{
    box-shadow : 0 8px 25px -8px #7367f0;
}
.login-wallpaper-box {
    position: absolute;
    top: 0;
    left: 33.33%;
    width: 66.66%;
    height: 100%;
    background: #111727;
}
.login-wallpaper{
    position : relative;
    width:100%;
    height:100%;
    overflow : hidden;
}

.login-wallpaper img{
    position : relative;
    width: 100%;
    height:100%;
    object-fit : cover;
    overflow:hidden;
}

.login-wallpaper:before{
    content: '';
    width:100%;
    height:100%;
    background : linear-gradient(to right,#111727,transparent);
    position :absolute;
    top:0;
    left:0;
    right:-120px;
    z-index : 3; 
    opacity : 0.75;
}

    .login-wallpaper:after {
        content: '';
        width: 120px;
        height: 100%;
        background: linear-gradient(to right,#111727,transparent);
        position: absolute;
        top: 0;
        left:0;
        right: -120px;
        z-index : 3;
        opacity: 0.5;
    }