.login{padding:.5rem;display:flex}.login .photo,.login .form{width:50%}.login .form{flex-direction:column;align-items:center;gap:10rem;height:98vh;padding:2rem 0;display:flex}.login .form .form-top{justify-content:space-between;align-items:center;width:100%;padding:0 2rem;display:flex}.login .form .logo{width:150px;height:auto}.login .form h2{font-size:2rem;font-weight:300}.login .form h2 span{color:var(--blue);font-weight:600}.login .form form{flex-direction:column;align-items:center;gap:8px;display:flex}.login .form form p{font-size:14px;font-weight:300}.login .form form .input{flex-direction:column;gap:8px;width:100%;margin-top:1.5rem;display:flex;position:relative}.login .form form .input input{background:var(--input);width:100%;color:var(--text);box-sizing:border-box;border:2px solid #0000;border-radius:12px;outline:none;padding:12px;transition:all .3s}.login .form form .input input.special-char{border-color:#e6b800}.login .form form .input .password-field{width:100%;position:relative}.login .form form .input .password-field input{padding-right:56px}.login .form form .input .password-field .toggle-password{width:auto;color:var(--text);opacity:.6;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:6px;font-size:16px;transition:opacity .2s;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.login .form form .input .password-field .toggle-password:hover{opacity:1}.login .form form .input .special-char-popup{color:#fff;z-index:10;background:#e6b8009e;border-radius:8px;align-items:center;gap:6px;margin-top:6px;padding:8px 12px;font-size:12px;font-weight:600;display:flex;position:absolute;bottom:70%;left:40%}.login .form form .input .special-char-popup svg{flex-shrink:0}.login .form form button{width:100%;font-family:var(--headings);background:var(--blue);color:#fff;cursor:pointer;border:none;border-radius:12px;margin-top:1rem;padding:14px 0;font-weight:700}.login .form form .password-hint{box-sizing:border-box;background:var(--input);width:100%;color:var(--text);opacity:.8;border-radius:8px;justify-content:center;align-items:center;margin-top:4px;padding:10px 12px;font-size:12px;font-weight:300;line-height:1.5;display:flex}.login .form form .password-hint ul{margin:0;padding:0;list-style:none}.login .form form .password-hint li{align-items:center;gap:6px;font-weight:600;display:flex}.login .form form .password-hint li svg{color:var(--blue);flex-shrink:0}.login .form form .password-hint li+li{margin-top:4px}.login .form .signup{font-size:14px}.login .form .signup a{color:var(--blue);font-weight:700}.login .photo{background:url(../media/login.13o47pzplnq_1.jpg) 50%/cover no-repeat;border-radius:1rem}.login .error{color:red;font-size:13px}.login .form-group{flex-direction:row-reverse;gap:12px;width:100%;display:flex}.login .form-group .input{width:90%}.login .form-group .select{width:10%}.login .form-group select{height:100%;font-family:var(--body);background:var(--input);border:none;border-radius:8px;padding:0 1rem}@media (max-width:768px){.login{flex-direction:column;padding:0}.login .photo{border-radius:0 0 1rem 1rem;width:100%;height:200px;display:none}.login .form{gap:5rem;width:100%;height:auto;min-height:calc(100vh - 200px);padding:1.5rem}.login .form .form-top{padding:0}.login .form form{width:100%}}
