* {user-select: none;}

#main {width: 100vw; min-height: 50vh; display: flex; align-items: center; flex-direction: column;}
.auth-label {font-size: 36px;}

#auth-form {background: var(--main-main-color); padding: 16px 24px; border-radius: 6px; display: flex; flex-direction: column; gap: 12px;}
.form-group {display: flex; flex-direction: column;}
.auth-group-label {font-size: 20px;}
#id_login, #id_password {font-size: 22px; padding: 6px 10px; background: var(--main-sub-color); user-select: none; border-radius: 4px; color: var(--sub-text-color);}
#id_login:focus, #id_password:focus {outline: #6e2e2e;}
.button-submit {background: var(--main-sub-color); color: var(--sub-text-color); font-size: 20px; padding: 6px 12px;}
.save-login {display: flex; margin-top: 20px; justify-content: center; width: 100%; align-items: center; gap: 8px;}
.save-login > span {font-size: 18px;}
.save-login > input[type="checkbox"] {background-color: transparent; appearance: none; border: 2px solid #2e2e2e; width: 20px; height: 20px; border-radius: 4px; transition: background 0.3s ease, border 0.3s ease;}
.save-login > input[type="checkbox"]:hover {background: #4e4e0e;}
.save-login > input[type="checkbox"]:checked {background: #2e6e2e;}

.error {font-size: 18px; margin-top: 10px; color: #Ae4e4e;}