body.login{
    display: block;
    padding:0;
}

section#login{
    width:100vw;
    height:100vh;
    position:relative;
    background: var(--body-color);
    overflow: auto;
}
#login-form{
    background: var(--aside-background);
    color:var(--white-color);
    padding:30px 50px 50px 50px;
    width:100%;
    box-shadow: 15px 20px 30px rgba(0,0,0,0.2);
    animation: loginLoad 1.5s;
    position: relative;
}
#login-form img{
    width:70px;
}

#login-form .loading{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background: var(--aside-background);
    display:none;
    z-index: 2;
}
#login-form .loading.show{
    display: block;
}

#login-form .login-btn{
    max-width:200px;
    width:100%;
    font-weight: bold;
    text-transform: uppercase;
}

.form-field input{
    background:transparent;
    color:var(--white-color);
    border:none;
    border-bottom: solid 1px rgba(255,255,255,.5);
    border-radius: 0;
}
.form-field input:focus::placeholder {
    opacity: 1;
}
.form-field input:focus{
    border-color: var(--main-menu-active-color);
}

.form-field .append-icon.active{
    color:var(--danger-color);
}

.form-field .prepend-icon{
    opacity:0.3;
    transition: 0.5s;
}
.form-field.focused .prepend-icon{
    opacity: 1;
}
.form-field.error .prepend-icon{
    opacity:1;
    color:var(--danger-color);
}


.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--white-color);
    -webkit-box-shadow: none;
    background: none;
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

@keyframes loginLoad {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media screen and (max-width: 400px) {
    #login-form{
        padding:35px 25px 35px 25px;
    }
}