.wrapper{position:relative;border-radius:10px;width:800px;height:500px;background:#081b29;border:1px solid #00ff58;overflow:hidden;box-shadow:0 0 1px #00ff58}.wrapper .form-box{position:absolute;top:0;width:50%;height:100%;display:flex;flex-direction:column;justify-content:center}.wrapper .form-box.login{left:0;padding:0 60px 0 40px}.wrapper .form-box.login .animation{transform:translateX(0);opacity:1;filter:blur(0);transition:.7s ease;transition-delay:calc(.1s * var(--j))}.wrapper.active .form-box.login .animation{transform:translateX(-120%);opacity:0;filter:blur(10px);transition-delay:calc(.1s * var(--i))}.wrapper .form-box.register{right:0;padding:0 40px 0 60px;pointer-events:none}.wrapper.active .form-box.register{pointer-events:auto}.wrapper .form-box.register .animation{transform:translateX(120%);opacity:0;filter:blur(10px);transition:.7s ease}.wrapper.active .form-box.register .animation{transform:translateX(0);opacity:1;filter:blur(0);transition-delay:calc(.1s * var(--i))}.form-box h2{font-size:32px;color:#fff;text-align:center}.form-box .input-box{position:relative;width:100%;height:40px;margin:15px 0}.input-box input{width:100%;height:100%;background:transparent;outline:none;border:none;border-bottom:2px solid #fff;padding-right:23px;font-size:13px;color:#fff;font-weight:500;transition:.5s}.form-box .select-box{position:relative;width:100%;height:40px;margin:15px 0}.select-box select{width:100%;height:100%;background:transparent;outline:none;border:none;border-bottom:2px solid #fff;padding-right:23px;font-size:13px;color:#fff;font-weight:500;transition:.5s;appearance:none;-webkit-appearance:none;-moz-appearance:none}.select-box select option{background:#081b29;color:#fff}.select-box select:focus,.select-box select:valid{border-bottom-color:#00ff58}.select-box label{position:absolute;top:50%;left:0;transform:translateY(-50%);font-size:15px;color:#fff;pointer-events:none;transition:.5s}.select-box select:focus~label,.select-box select:valid~label{top:0;color:#00ff58}.select-box i{position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:18px;color:#fff;transition:.5s;pointer-events:none}.phone-input-box{position:relative;width:100%;height:40px;margin:15px 0}.phone-input-box .PhoneInput{border:none;border-bottom:2px solid #fff}.phone-input-box .PhoneInput,.phone-input-box .PhoneInput input{width:100%;height:100%;background:transparent;outline:none;transition:.5s}.phone-input-box .PhoneInput input{border:none;padding-right:23px;font-size:13px;color:#fff;font-weight:500}.phone-input-box .PhoneInput__country-select{background:transparent;border:none;color:#fff;margin-right:8px}.phone-input-box .PhoneInput__country-select-arrow{color:#fff}.phone-input-box .PhoneInput:focus-within{border-bottom-color:#00ff58}.phone-input-box .PhoneInput input:focus,.phone-input-box .PhoneInput input:valid{border-bottom-color:#00ff58}.phone-input-box label{position:absolute;top:0;left:0;transform:translateY(-50%);font-size:15px;color:#fff;pointer-events:none;transition:.5s;color:#00ff58}.input-box input:focus,.input-box input:valid{border-bottom-color:#00ff58}.form-check{color:#fff;font-size:13px}.form-check input{height:15px;width:15px;border-radius:5px}.input-box label{position:absolute;top:50%;left:0;transform:translateY(-50%);font-size:15px;color:#fff;pointer-events:none;transition:.5s}.input-box input:focus~label,.input-box input:valid~label{top:0;color:#00ff58}.input-box i{position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:18px;color:#fff;transition:.5s}.input-box input:focus~i,.input-box input:valid~i{color:#00ff58}.btn{position:relative;width:100%;height:45px;background:transparent;border:2px solid #00ff58;outline:none;border-radius:10px;cursor:pointer;font-size:16px;color:#fff;font-weight:600;z-index:1;overflow:hidden}.btn:before{content:"";position:absolute;top:-100%;left:0;width:100%;height:300%;background:linear-gradient(#081b29,#00ff58,#081b29,#00ff58);z-index:-1;transition:.5s}.btn:hover:before{top:0}.form-box .logreg-link{font-size:14.5px;color:#fff;text-align:center;margin:20px 0 10px}.logreg-link p a{color:#00ff58;text-decoration:none;font-weight:600}.logreg-link p a:hover{text-decoration:underline}.wrapper .info-text{position:absolute;top:0;width:50%;height:100%;display:flex;flex-direction:column;justify-content:center}.wrapper .info-text.login{right:0;text-align:right;padding:0 40px 60px 120px}.wrapper .info-text.login .animation{transform:translateX(0);opacity:1;filter:blur(0);transition:.7s ease;transition-delay:calc(.1s * var(--j))}.wrapper.active .info-text.login .animation{transform:translateX(120%);opacity:0;filter:blur(10px);transition-delay:calc(.1s * var(--i))}.wrapper .info-text.register{left:0;text-align:left;padding:0 150px 60px 40px;pointer-events:none}.wrapper.active .info-text.register{pointer-events:auto}.wrapper .info-text.register .animation{transform:translateX(-120%);opacity:0;filter:blur(10px);transition:.7s ease;transition-delay:calc(.1s * var(--j))}.wrapper.active .info-text.register .animation{transform:translateX(0);opacity:1;filter:blur(0);transition-delay:calc(.1s * var(--i))}.info-text h2{font-size:25px;color:#fff;line-height:1.3;text-transform:uppercase;text-align:center}.info-text p{font-size:16px;color:#fff}.wrapper .bg-animate{position:absolute;top:0;right:0;width:850px;height:600px;background:linear-gradient(45deg,#2c485d,#46e87e);border-bottom:2px solid #00ff58;transform:rotate(10deg) skewY(40deg);transform-origin:bottom right;transition:1.5s ease;transition-delay:1.6s}.wrapper.active .bg-animate{transform:rotate(0) skewY(0);transition-delay:.5s}.wrapper .bg-animate2{position:absolute;top:100%;left:250px;width:850px;height:700px;background:#081b29;border-top:3px solid #00ff58;transform:rotate(0) skewY(0);transform-origin:bottom left;transition:1.5s ease;transition-delay:.5s}.wrapper.active .bg-animate2{transform:rotate(-11deg) skewY(-41deg);transition-delay:1.2s}@media (max-width:768px){.wrapper{width:100%;height:auto;flex-direction:column-reverse;display:flex}.wrapper.active{flex-direction:column}.wrapper .form-box{position:relative;width:100%;height:auto;padding:20px}.wrapper .form-box.login{left:0;padding:20px;order:1}.wrapper .form-box.register{right:0;padding:20px;order:3;display:none}.wrapper.active .form-box.login{display:none}.wrapper.active .form-box.register{display:flex}.wrapper .info-text{position:relative;width:100%;height:auto;text-align:center;padding:20px}.wrapper .info-text.login{right:0;text-align:center;padding:20px;order:2}.wrapper .info-text.register{left:0;text-align:center;padding:20px;order:2;display:none}.wrapper.active .info-text.login{display:none}.wrapper.active .info-text.register{display:flex}.form-box h2,.info-text h2,.wrapper .bg-animate,.wrapper .bg-animate2{display:none}.form-box .input-box,.form-box .select-box{margin:20px 0}}:root{--PhoneInput-color--focus:#03b2cb;--PhoneInputInternationalIconPhone-opacity:0.8;--PhoneInputInternationalIconGlobe-opacity:0.65;--PhoneInputCountrySelect-marginRight:0.35em;--PhoneInputCountrySelectArrow-width:0.3em;--PhoneInputCountrySelectArrow-marginLeft:var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth:1px;--PhoneInputCountrySelectArrow-opacity:0.45;--PhoneInputCountrySelectArrow-color:currentColor;--PhoneInputCountrySelectArrow-color--focus:var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform:rotate(45deg);--PhoneInputCountryFlag-aspectRatio:1.5;--PhoneInputCountryFlag-height:1em;--PhoneInputCountryFlag-borderWidth:1px;--PhoneInputCountryFlag-borderColor:rgba(0,0,0,0.5);--PhoneInputCountryFlag-borderColor--focus:var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading:rgba(0,0,0,0.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}