body { background-color: #FFF; }

.login { height: 100vh; display: flex; flex-direction: row-reverse; overflow: hidden; align-items: center; }
.slider { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; }
.slider img { width: 100%; height: 100%; object-fit: cover; }
.login-container { position: fixed; left: 0; right: 0; bottom: 0; max-height: calc(100vh - 50px); overflow-y: auto; text-align: center; padding: 20px 0 10px; border-top-left-radius: 40px; border-top-right-radius: 40px; }
.frm-login, .frm-register, .frm-verify-register, .frm-register-data, .frm-login-data { display: flex; flex-direction: column; padding: 25px; gap: 20px; max-width: 400px; margin: 20px auto 0; }
.register, .verify-register, .register-data, .login-data { display: none; }

.code-input { text-align: center; letter-spacing: 20px; font-size: 16px; font-weight: 700; }

.code-container { display: flex; align-items: center; justify-content: center; gap: 7px; }

.timer-container { display: none; font-size: 12px; color: #A4A4A4; }
.resend { display: flex; gap: 5px; align-items: center; cursor: pointer; color: #0460E4; }

.success-message { display: none; }

@media only screen and (min-width: 600px) {
    .slider, .login-container { position: unset; }
    .slider { flex: 2; }
    .login-container { flex: 4; }
}

@media only screen and (min-width: 1200px) {
    .slider, .login-container { position: unset; }
    .slider { flex: 2; }
    .login-container { flex: 5; }
}