.auth-container{padding:4px;min-width:460px;max-width:800px;width:36%;background-color:hsl(0,0%,10%);border-radius:10px;color:#eee;transition:all .25s}.auth-container,.login-group{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}.login-group{height:100%;width:100%;padding:2rem 7rem}.timegrid-logo{display:flex;gap:2px;font-size:.8rem;align-items:center;padding:0 1rem 0 0;margin-bottom:.4rem}h3{font-size:20px;font-weight:500}.signin-text{font-size:1.2rem;color:hsl(0,0%,90%)}.signin-text,p{font-weight:300}p{color:hsl(0,0%,70%)}.login-form{display:flex;flex-direction:column;width:100%;gap:12px}.login-form input{height:56px;width:100%;padding:0 1.4em;border-radius:.5em;font-size:1em;font-weight:300;color:hsl(0,0%,85%);background-color:hsl(0,0%,6%);outline:1px solid hsl(0,0%,20%);transition:all .12s ease-out;box-sizing:border-box;z-index:2}.login-form input:focus{background-color:hsl(0,0%,8%);outline:2px solid hsl(0,0%,50%)}.login-form input:active{background-color:hsl(0,0%,6%);outline-color:hsl(0,0%,55%)}.auth-container button{display:flex;align-items:center;justify-content:center;margin-top:16px;height:52px;width:100%;padding:0 1.4em;border-radius:.5em;font-size:1.2em;transition:all .25s}.auth-container .sigin-button{font-weight:500;color:hsl(0,0%,2%);background-color:hsl(0,0%,100%);padding-left:1em}.auth-container .sigin-button:hover{color:hsl(0,0%,1%);background-color:hsl(0,0%,85%)}.auth-container .sigin-button:active{color:hsl(0,0%,1%);background-color:hsl(0,0%,60%)}.auth-container .sigin-button.loading{background-color:hsl(0,0%,65%);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding-left:1.4em}.loader{display:inline-block;width:16px;height:16px;border:2px solid hsl(0,0%,2%);border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotation 1s linear infinite;opacity:0;transition:all .25s}.loader.visible{opacity:1;translate:-8px}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.input-error{outline:2px solid hsl(9,50%,30%);transition:all .25s}.invalid-message{color:hsl(9,68%,56%);margin-top:-12px}.invalid-message,.success-message{font-weight:300;opacity:0;transition:all .25s}.success-message{color:hsl(120,43%,63%);margin-top:-24px;margin-bottom:-12px}.success-message.visible{margin-top:0;opacity:1}.invalid-message.visible{opacity:1;margin-top:0;margin-bottom:8px}.signup{text-decoration:underline}.forget-password,.signup{font-size:14px;font-weight:400;color:hsl(0,0%,60%);transition:all .2s}.forget-password{display:flex;justify-content:flex-end;margin-top:-1.2rem}.forget-password:hover,.signup:hover{color:hsl(0,0%,90%);cursor:pointer;text-decoration:underline}.forget-password:active,.signup{color:hsl(0,0%,70%)}.divider{display:flex;align-items:center;text-align:center;width:100%}.divider:after,.divider:before{content:"";flex:1 1;border-bottom:1px solid hsl(0,0%,25%)}.divider:not(:empty):before{margin-right:12px}.divider:not(:empty):after{margin-left:12px}.divider span{font-size:.95em;color:#888;letter-spacing:.05em}.auth-container .google-signin{display:flex;align-items:center;justify-content:center;gap:8px;background-color:hsl(0,0%,15%);font-size:1em;color:hsl(0,0%,80%);font-weight:400;margin-top:0}.auth-container .google-signin:hover{background-color:hsl(0,0%,13%);color:hsl(0,0%,90%)}.auth-container .google-signin:active{background-color:hsl(0,0%,14%)}.google-signin svg{width:24px;height:24px;fill:hsl(0,0%,80%);aspect-ratio:1/1;display:block}.create-account{display:flex;align-items:center;justify-content:center;width:100%;padding:24px;border-radius:8px;background-color:hsl(0,0%,8.5%)}