@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@600;700&display=swap);*{outline:0;font-family:"Open Sans",system-ui,-apple-system,sans-serif}body{margin:0;padding:0;background:#23272a;color:#fff;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:"Raleway","Segoe UI",sans-serif;font-weight:600;letter-spacing:-.02em;color:#fff}#container{height:100vh;display:flex;justify-content:center;align-items:center;background:url(../img/general/hero-bg.webp) center/cover no-repeat fixed;position:relative}#container::before{content:"";position:absolute;inset:0;background:rgb(10 10 10 / .65);z-index:0}#inviteContainer{display:flex;overflow:hidden;position:relative;z-index:1;border-radius:5px}#inviteContainer .acceptContainer{padding:0 30px;width:400px;margin-left:-400px;max-height:0;opacity:0;position:relative;overflow:hidden;transition:max-height 0.5s ease,margin 0.5s ease,opacity 0.5s ease,padding 0.5s ease}#inviteContainer .acceptContainer.loadIn{opacity:1;margin-left:0;max-height:500px;padding:45px 30px}#inviteContainer .acceptContainer::before{content:"";position:absolute;top:-50px;left:-50px;width:150%;height:150%;background:url(../img/general/hero-bg.jpg) center/cover fixed;filter:blur(10px);box-shadow:inset 0 0 0 3000px rgb(40 43 48 / .75);z-index:-1}form{position:relative;text-align:center;height:100%}form h1{margin:0 0 15px;font:700 20px/1 "Raleway",sans-serif;color:#fff;user-select:none;opacity:0;transform:translateX(-30px);transition:transform 0.5s ease,opacity 0.5s ease}form h1.loadIn{transform:translateX(0);opacity:1}.formContainer{text-align:left;width:100%;box-sizing:border-box}.formContainer .formDiv{margin-bottom:30px;opacity:0;transform:translateX(-25px);transition:transform 0.5s ease,opacity 0.5s ease}.formContainer .formDiv.loadIn{opacity:1;transform:translateX(0)}.formContainer .formDiv.username-field{transition-delay:0.2s}.formContainer .formDiv.email-field{transition-delay:0.4s}.formContainer .formDiv.password-field{transition-delay:0.6s}.formContainer .formDiv.submit-field{transition-delay:0.8s}.formContainer .formDiv.submit-field{margin-top:10px;margin-bottom:20px}.formContainer p{margin:0;font:700 12px/1 "Open Sans",sans-serif;color:#fff;user-select:none}.formContainer input[type="text"],.formContainer input[type="email"],.formContainer input[type="password"]{width:100%;padding:15px 0;background:#fff0;border:none;box-sizing:border-box;color:#fff;font:14px/1 "Open Sans",sans-serif;box-shadow:inset 0 -1px 0 rgb(255 255 255 / .15)}.formContainer input:focus{box-shadow:inset 0 -2px 0 #fff}.logoContainer{background:#fff;padding:45px 35px;box-sizing:border-box;position:relative;z-index:2;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:scale(0)}.logoContainer .img-logo{width:150px;margin-bottom:-5px}.acceptBtn{width:100%;padding:10px 28px;box-sizing:border-box;background:#2596be;color:#fff;border:none;border-radius:24px;cursor:pointer;font:600 15px/1 "Raleway",sans-serif;letter-spacing:.6px;text-transform:uppercase;text-decoration:none;display:flex;align-items:center;justify-content:center;transition:all 0.25s ease;box-shadow:0 4px 10px rgb(37 150 190 / .35);user-select:none}.acceptBtn:hover{background:#1d7a96;transform:translateY(-1px);box-shadow:0 5px 12px rgb(37 150 190 / .45)}.forgotPas{color:#aaa;opacity:.8;text-decoration:none;font:600 10px/1 "Open Sans",sans-serif;margin-top:15px;display:block;transition:color 0.2s ease}.forgotPas:hover{color:#fff;opacity:1}.formDiv.error-message-container{margin-bottom:15px;opacity:0;transform:translateX(-25px);transition:transform 0.5s ease,opacity 0.5s ease;min-height:auto;padding:0;text-align:left}.formDiv.error-message-container.loadIn{opacity:1;transform:translateX(0)}.error-message{background-color:rgb(220 53 69 / .1);border-left:3px solid #dc3545;color:#ff6b6b;padding:10px 15px;font-family:"Open Sans",system-ui,-apple-system,sans-serif;font-size:13px;font-weight:500;line-height:1.4;border-radius:0 4px 4px 0;word-break:break-word;margin-bottom:10px;box-shadow:0 2px 4px rgb(0 0 0 / .1)}.error-message p{margin:0;padding:2px 0}