/* LOGIN PAGE */
#login .container-fluid {
    max-width: 1920px;
}
#login .background-login-block {
    border-radius: var(--border-radius-block);
    background: var(--gradiant-color);
    height: calc(100vh - 100px);
    margin: 50px;
    text-align: center;
}
#login .background-login-block img {
    max-width: 250px;
    margin-top: 20vh;
}
#login .background-login-block h1 {
    margin-top: 5vh;
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
    color: white;
    font-weight: bold;
}
#login .background-login-block h2 {
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-subtitle);
    color: white;
    text-transform: uppercase;
    font-weight: lighter;
}
#login .form-login-block {
    height: calc(100vh - 400px);
    margin: 180px 10% 100px 10%;
}
#login .form-login-block img {
    max-width: 300px;
    margin: 100px auto 50px auto;
    display: block;
}
#login .form-login-block h3 {
    color: var(--maindark-color);
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-subtitle);
    font-weight: bold;
    margin-bottom: 30px;
}
#login button.btn.btn-primary {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
#login #forgot-password, #login #donot-forgot-password {
    cursor: pointer;
    font-weight: bold;
    color: var(--main-color);
}
#login #forgot-password:hover, #login #donot-forgot-password:hover {
    text-decoration: underline;
}
#login #forgot-password-block {
    display: none;
}
#login .form-login-block .message {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: var(--font-size-menu);
    display: none;
}
#login .form-login-block .message i {
    margin-right: 5px;
}
#login .form-login-block .message.error, #login .form-login-block .message.error-oldpassword {
    color: var(--red-color);
}
#login .form-login-block .message.forgotpassword, #login .form-login-block .message.changepassword {
    color: var(--green-color);
}
#login .form-login-block.error .message.error, #login .form-login-block.error-oldpassword .message.error-oldpassword,
#login .form-login-block.forgot .message.forgotpassword, #login .form-login-block.changepassword .message.changepassword {
    display: block;
}
#login .form-login-block.error .input-group, #login .form-login-block.error-oldpassword .input-group {
    border: 1px solid var(--red-color);
}
#login .form-login-block.error .input-group .input-group-text, #login .form-login-block.error-oldpassword .input-group .input-group-text,
#login .form-login-block.error .input-group input, #login .form-login-block.error-oldpassword .input-group input,
#login .form-login-block.error .input-group input::placeholder, #login .form-login-block.error-oldpassword .input-group input::placeholder,
#login .form-login-block.error .input-group .show-password, #login .form-login-block.error-oldpassword .input-group .show-password {
    color: var(--red-color);
}
#login .form-login-block .password-valid-elems {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -10px;
    margin-bottom: 30px;
    font-size: var(--font-size-tiny-text);
}
#login .form-login-block .password-valid-elems li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    content: "\f2ee";
}
#login .form-login-block .password-valid-elems li.valid::before {
    content: "\e416";
}
#login .form-login-block .password-valid-elems li {
    min-width: 120px;
}
#login .form-login-block .password-valid-elems li.valid {
    color: var(--green-color);
}
@media (max-width: 991.98px) {
    #login .form-login-block {
        height: 100%;
        margin: 15px auto;
        max-width: 375px;
    }
}