body { height: 100%; }
.login-logo { margin: 0 calc(50% - 62.5px) 25px; width: 125px; height: auto; fill: var(--red-color); }
.login-abstract { margin-bottom: 25px; font-size: 18px; }
.login-form { display: flex; flex-wrap: wrap; }
.login-field-wrapper { margin-bottom: 15px; }
.login-field-wrapper.email { width: calc(50% - 7.5px); margin-right: 15px; }
.login-field-wrapper.password { width: calc(50% - 7.5px); }
.login-field-label { font-size: 18px; cursor: pointer; }
.login-field-label:not(.remember-me) { display: block; margin-bottom: 10px; }
.login-field-label.remember-me { margin-left: 5px; }
.login-field:not(.remember-me) { padding: 10px; width: calc(100% - 20px); font-size: 16px; border: 1px solid #ced4da; border-radius: 3px; outline: none; }
.login-field-wrapper.remember-me { width: 100%; display: flex; justify-content: flex-end; user-select: none; }
.login-field-error { margin-top: 5px; color: var(--red-color); text-align: right; }
#login-form-submit { padding: 10px 20px; margin: 25px 0 0 auto; color: #FFF; font-size: 15px; text-transform: uppercase; background: var(--blue-color); border: none; border-radius: 3px; cursor: pointer; user-select: none; }

@media (min-width: 1024px) {
    .login-container { display: flex; width: 100%; height: 100vh; align-items: center; }
    .login-image-wrapper { width: 33.3333%; height: 100%; overflow: hidden; }
    .login-image { display: block; width: 100%; height: 100%; object-fit: cover; }
    .login-wrapper { margin: 30px 8.3334%; flex-grow: 1; }
}

@media (max-width: 1023px) {
    .login-container { width: 100%; height: 100%; }
    .login-image-wrapper { display: none;  }
    .login-wrapper { display: flex; margin: 30px; height: calc(100% - 60px); flex-direction: column; justify-content: center; }
}

@media (max-width: 639px) {
    .login-form { flex-direction: column; }
    .login-field-wrapper,
    .login-field-wrapper.email,
    .login-field-wrapper.password { width: unset; margin: 0 0 25px; }
}

@media (max-width: 319px) {
    .login-wrapper { margin: 15px; height: calc(100% - 30px); }
}