.user-authentication-component{background-color:#c9a66b;border-radius:10px;place-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.form-container{width:60%;height:100%;position:relative;overflow:hidden}.form-box{box-sizing:border-box;text-align:center;z-index:2;scrollbar-width:none;-ms-overflow-style:none;background-color:#faf1e6;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:0 150px;transition:transform .7s ease-in-out;display:flex;position:absolute;top:0;left:0;overflow-y:scroll}.form-box::-webkit-scrollbar{display:none}.form-box.login{transform:translate(0)}.form-box.register{transform:translate(100%)}.user-authentication-component.active .form-box.login{transform:translate(-100%)}.user-authentication-component.active .form-box.register{transform:translate(0)}.welcome-container{color:#faf1e6;background:#c9a66b;justify-content:center;align-items:center;width:40%;height:100%;display:flex;position:relative;overflow:hidden}.welcome-panel{z-index:1;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .7s ease-in-out;display:flex;position:absolute;top:0;left:0}.welcome-panel-login,.welcome-panel-register{color:#faf1e6;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .7s ease-in-out;display:flex;position:absolute;top:0}.welcome-panel-login{transform:translate(0)}.welcome-panel-register{transform:translate(100%)}.user-authentication-component.active .welcome-panel-login{transform:translate(-100%)}.user-authentication-component.active .welcome-panel-register{transform:translate(0)}.user-authentication-component h2,.welcome-panel h2{margin-bottom:10px;font-size:30px;font-weight:600}.user-authentication-component form{flex-direction:column;width:100%;display:flex}.input-container{width:100%;position:relative}.input-container input,.input-container .select-field{box-sizing:border-box;border:1px solid #626262;border-radius:10px;width:100%;height:45px;margin:15px 0;padding-left:15px;padding-right:40px}.select-field{appearance:none;color:inherit;background:#fff url("data:image/svg+xml;utf8,<svg fill='%238B4513' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") right 10px center/15px no-repeat;padding-right:40px}.select-field option{color:#8b4513;background-color:#fff}.input-icon{color:#8b4513;font-size:15px;position:absolute;top:50%;right:15px;transform:translateY(-50%)}.toggle-icon{color:#8b4513;cursor:pointer;font-size:15px;position:absolute;top:50%;right:40px;transform:translateY(-50%)}.user-authentication-button{color:#fff;background-color:#8b4513;border:none;border-radius:10px;height:45px;margin-top:20px;padding:10px 20px;font-size:15px;font-weight:600}.user-authentication-button:hover{background-color:#a05017;transition:all .4s ease-in}.dont-have-account-button{background-color:#d9d9d9;border:1px solid #8b4513;border-radius:10px;margin-top:30px;padding:10px 20px;font-size:14px}.dont-have-account-button:hover{background-color:#faf1e6;transition:all .4s ease-in}.spinner{vertical-align:middle;border:2px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;width:14px;height:14px;margin-left:8px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toggle-link{margin-top:20px}.toggle-link span{color:#8b4513;cursor:pointer;font-size:16px;font-weight:600;text-decoration:underline}.error-message{color:red;font-size:14px}@media (max-width:500px){.user-authentication-component{border-radius:5px;flex-direction:column;min-height:100vh;padding:10px;position:relative;overflow:hidden}.form-container{width:100%;min-height:60vh;position:relative;overflow:hidden}.welcome-container{width:100%;max-height:40vh;position:relative;overflow:hidden}.form-box{background:#faf1e6;border-radius:10px;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;padding:20px;transition:all .6s;display:flex;position:absolute;top:0;left:0;overflow-y:auto}.welcome-panel-login,.welcome-panel-register{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:all .6s;display:flex;position:absolute;top:0;left:0}.form-box.login{justify-content:center}.form-box.register{justify-content:flex-start}.form-box.login,.welcome-panel-login{opacity:1;z-index:2;transform:translate(0)}.form-box.register,.welcome-panel-register{opacity:0;z-index:1;transform:translate(100%)}.user-authentication-component.active .form-box.login,.user-authentication-component.active .welcome-panel-login{opacity:0;z-index:1;transform:translate(-100%)}.user-authentication-component.active .form-box.register,.user-authentication-component.active .welcome-panel-register{opacity:1;z-index:2;transform:translate(0)}.welcome-container{color:#faf1e6;background:#c9a66b}.welcome-container p{font-size:12px}.user-authentication-component h2{margin-bottom:10px;font-size:20px;font-weight:500}.input-container input,.input-container .select-field{border-radius:5px;height:35px;margin:12px 0;font-size:12px}.input-icon{font-size:12px;right:10px}.toggle-icon{font-size:12px;right:30px}.user-authentication-button{border-radius:5px;height:35px;margin:10px 0;padding:5px 10px;font-size:12px;font-weight:600}.dont-have-account-button{border-radius:5px;margin-top:20px;padding:10px 15px;font-size:12px}.toggle-link{font-size:12px}.toggle-link span{margin-left:5px;font-size:13px}}@media (min-width:500px) and (max-width:860px){.user-authentication-component{border-radius:5px;flex-direction:column;padding:30px}.form-container,.welcome-container{width:100%;height:100%}.form-box{border-radius:10px;padding:20px 100px}.form-box.register{justify-content:flex-start}.user-authentication-component h2{margin-bottom:10px;font-size:20px;font-weight:600}.user-authentication-component input{margin:10px 0;padding-left:10px}.user-authentication-button{margin-top:20px}.toggle-link{font-size:12px}.toggle-link span{margin-left:5px;font-size:13px}}@media (min-width:860px) and (max-width:1100px){.user-authentication-component{border-radius:10px}.form-box{padding:0 100px}.user-authentication-component h2{margin-bottom:20px;font-weight:600}.user-authentication-component input{margin:10px 0;padding-left:10px}.user-authentication-button{margin-top:20px}}@media (min-width:1100px) and (max-width:1300px){.user-authentication-component{border-radius:10px}.form-box{padding:0 100px}.user-authentication-component h2{margin-bottom:20px;font-weight:600}.user-authentication-component input{margin:10px 0;padding-left:10px}.user-authentication-button{margin-top:20px}}