.wrapper{position:relative;width:850px;height:650px;background:#fff;border-radius:10px;box-shadow:0 0 20px #000;overflow:hidden}.wrapper .form-box{position:absolute;top:0;width:50%;height:100%;display:flex;justify-content:center;flex-direction:column}.wrapper .form-box.login{left:0;padding:0 60px 0 40px}.form-box h2{margin-bottom:10px;position:relative;font-size:32px;color:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);text-align:center}.form-box h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:40px;height:4px;background:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%)}.form-box .input-box{position:relative;width:100%;height:50px;margin:25px 0}.input-box input{width:100%;height:100%;background:transparent;color:#000;font-size:16px;font-weight:500;outline:none;border:none;border-bottom:2px solid #000;transition:.5s;padding-right:23px}.input-box input:focus,.input-box input:valid{border-bottom-color:#ff8a00}.input-box label{left:0;transform:translateY(-50%);font-size:16px;color:#000;transition:.5s}.input-box input:focus~label,.input-box input:valid~label{top:-5px;color:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%)}.input-box i{position:absolute;top:50%;right:0;transform:translateY(-50%);font-size:18px;transition:.5s}.input-box input:focus~i,.input-box input:valid~i{color:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%)}form button{width:100%;height:45px;color:#fff;border:none;outline:none;border-radius:40px;cursor:pointer;font-size:16px;font-weight:600;transition:.3s}form .linkTxt{font-size:14px;color:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);text-align:center;margin:20px 0 10px}.linkTxt p a{color:#27272F!important;text-decoration:none;font-weight:600}.wrapper .form-box.login .animation{transform:translateX(0);transition:.7s ease;opacity:1;filter:blur(0);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 .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 150px}.wrapper .info-text h2{font-size:36px;color:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);line-height:1.3}.wrapper .info-text p{font-size:16px;color:#fff}.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(120px);opacity:0;filter:blur(10px);transition:.7s ease;transition-delay:calc(.1s * var(--i))}.wrapper .rotate-bg{position:absolute;top:0;right:0;width:850px;height:650px;background:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);transform:rotate(10deg) skewY(40deg);transform-origin:bottom right;transition:1.5s ease;transition-delay:1.6s}.wrapper.active .rotate-bg{transform:rotate(0) skewY(0);transition-delay:.5s}.wrapper .form-box.register{padding:0 70px 0 85px;right:0}.wrapper.active .form-box.register{pointer-events:auto}.wrapper .form-box.register .animation{transform:translateX(120%);opacity:0;filter:blur(10px);transition:.7s ease;transition-delay:calc(.1s * var(--j))}.wrapper.active .form-box.register .animation{transform:translateX(0);opacity:1;filter:blur(0);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))}.wrapper .rotate-bg2{position:absolute;top:100%;left:250px;width:850px;height:700px;background:#fff;transform:rotate(0) skewY(0);transform-origin:bottom left;transition:1.5s ease;transition-delay:.5s}.wrapper.active .rotate-bg2{transform:rotate(-11deg) skewY(-45deg);transition-delay:1.2s}.input-box{position:relative}.input-box label{position:absolute;top:50%;left:10px;transition:.3s;pointer-events:none}.input-box input:valid~label{top:-5px;background:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);-webkit-background-clip:text;color:transparent}.input-box input:valid{border-bottom:2px solid linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%)}.input-box input:valid~i{color:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%)}.input-box input:focus{border-bottom:2px solid transparent!important;background-image:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);background-size:100% 2px;background-repeat:no-repeat;background-position:bottom}.input-box input:focus~label{top:-5px}.input-box input:focus~i,.input-box input:focus~label{background:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);-webkit-background-clip:text;color:transparent}button.btn.animation{font-size:18px!important;font-weight:600}.linkTxt .animation a{color:#27272F!important}.animation{--i:0;--j:0;animation:fadeIn 1s ease-in-out}.custom-toast-container{position:fixed!important;top:20px!important;right:50px!important;width:auto!important;z-index:9999!important}@media (max-width:767px){.wrapper{width:100%;height:auto;flex-direction:column;border-radius:0;padding:20px 10px}.wrapper .form-box,.wrapper .info-text{width:100%;position:relative;padding:20px;text-align:center!important}.wrapper .form-box.login,.wrapper .form-box.register,.wrapper .info-text.login,.wrapper .info-text.register{padding:10px}.wrapper.active .form-box.login,.wrapper.active .form-box.register,.wrapper.active .info-text.login,.wrapper.active .info-text.register{transform:none!important;opacity:1!important;filter:none!important;transition-delay:0s!important}.form-box h2,.info-text h2{font-size:24px}.info-text p{font-size:14px}form button{font-size:16px}.form-box .input-box input,.linkTxt p a{font-size:14px}.wrapper .rotate-bg{position:absolute;top:0;right:0;width:850px;height:0;background:linear-gradient(53.52deg,#ffb35b 24.13%,#ff8a00 78.74%);transform:rotate(270deg) skewY(190deg);transform-origin:bottom right;transition:1.5s ease;transition-delay:1.6s}.wrapper{overflow:hidden;border:5px solid #ff8c02;margin:0}.wrapper .info-text p{font-size:16px;color:#ff8c02}}