@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");:root{--white:#fff;--black:#000;--lightBlue:#17a;--primary:#088178}.auth-container{margin:0;box-sizing:border-box;font-family:Poppins,sans-serif;display:grid;place-items:center;min-height:100vh;background:#f0f2f5;padding:20px}.wrapper{position:relative;width:750px;height:550px;background:var(--white);border:2px solid var(--black);border-radius:12px;box-shadow:0 0 30px rgba(0,0,0,.2);overflow:hidden}.wrapper .rotate-bg{position:absolute;top:-4px;right:0;width:850px;height:650px;background:#000;transform:rotate(10deg) skewY(40deg);transform-origin:bottom right;transition:1.5s ease;transition-delay:1.6s;z-index:5}.wrapper.active .rotate-bg{transform:rotate(0) skewY(0);transition-delay:.5s;right:50%}.wrapper .rotate-bg2{position:absolute;top:100%;left:250px;width:850px;height:700px;background:var(--white);transform:rotate(0) skewY(0);transform-origin:bottom left;transition:1.5s ease;transition-delay:.5s;z-index:5}.wrapper.active .rotate-bg2{transform:rotate(-11deg) skewY(-40deg);transition-delay:1.2s}.wrapper .form-box{position:absolute;top:0;width:50%;height:100%;display:flex;justify-content:center;flex-direction:column;overflow-y:auto;z-index:10}.wrapper .form-box.login{left:0;padding:0 60px 0 40px;transition:.7s ease;transition-delay:.7s}.wrapper.active .form-box.login{transform:translateX(-100%);transition-delay:0s;opacity:0}.form-box h2{margin-bottom:25px;position:relative;font-size:32px;font-weight:800;color:var(--black);text-align:center}.form-box h2:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:40px;height:4px;background:var(--black)}.form-box .input-box{position:relative;width:100%;height:50px;margin:20px 0}.input-box input{width:100%;height:100%;background:transparent;color:var(--black);font-size:15px;font-weight:500;border:none;outline:none;border-bottom:2px solid var(--black);transition:.5s;padding-right:23px}.input-box input:focus,.input-box input:valid{border-bottom-color:var(--lightBlue)}.input-box label{position:absolute;top:50%;left:0;transform:translateY(-50%);font-size:15px;color:var(--black);pointer-events:none;transition:.5s}.input-box input:focus~label,.input-box input:valid~label{top:-5px;color:var(--lightBlue);font-size:12px}.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:var(--lightBlue)}.auth-btn{width:100%;height:42px;background-color:var(--black);color:var(--white);border:none;outline:none;border-radius:40px;cursor:pointer;font-size:15px;font-weight:600;transition:.3s;margin-top:10px}.auth-btn:hover{box-shadow:0 0 12px rgba(0,0,0,.6)}.forgot-link{margin:-10px 0 10px;text-align:right}.forgot-link a{color:var(--lightBlue);font-size:13px;text-decoration:none}.linkTxt{font-size:13px;color:var(--black);text-align:center;margin:15px 0 8px}.linkTxt p a{color:blue;text-decoration:none;font-weight:600;cursor:pointer}.wrapper .info-text{position:absolute;top:0;width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;z-index:10}.wrapper .info-text.login{right:0;text-align:right;padding:0 40px 60px 150px;transition:.7s ease;transition-delay:.7s}.wrapper.active .info-text.login{transform:translateX(100%);transition-delay:0s;opacity:0}.wrapper .info-text h2{font-size:30px;color:var(--white);line-height:1.3;text-transform:uppercase}.wrapper .info-text p{font-size:14px;color:var(--white)}.wrapper .form-box.register{padding:20px 40px 20px 60px;right:0;transform:translateX(100%);transition:.7s ease;transition-delay:0s;opacity:0;pointer-events:none}.wrapper.active .form-box.register{transform:translateX(0);transition-delay:.7s;opacity:1;pointer-events:auto}.wrapper .info-text.register{left:0;text-align:left;padding:0 150px 60px 40px;transform:translateX(-100%);transition:.7s ease;transition-delay:0s;opacity:0;pointer-events:none}.wrapper.active .info-text.register{transform:translateX(0);transition-delay:.7s;opacity:1;pointer-events:auto}.animation{opacity:0;filter:blur(10px);transition:.7s ease}.animation,.login .animation{transform:translateX(-100%)}.register .animation{transform:translateX(100%)}.info-text .animation{transform:translateX(0);opacity:1;filter:blur(0)}.wrapper.active .info-text.register .animation,.wrapper.active .register .animation,.wrapper:not(.active) .info-text.login .animation,.wrapper:not(.active) .login .animation{transform:translateX(0);opacity:1;filter:blur(0);transition-delay:calc(.1s * var(--j))}.auth-alert{padding:10px;border-radius:5px;margin-bottom:15px;font-size:13px;text-align:center;position:relative;z-index:20}.auth-alert-danger{background:#ffebee;color:#c62828}.auth-alert-success{background:#e8f5e9;color:#2e7d32}@media (max-width:850px){.wrapper{width:95%;max-width:750px}}@media (max-width:768px){.auth-container{padding:10px}.wrapper{width:100%;max-width:450px;height:auto;min-height:500px;background:var(--white);display:flex;flex-direction:column;overflow-y:auto}.wrapper .info-text,.wrapper .rotate-bg,.wrapper .rotate-bg2{display:none}.wrapper .form-box{position:relative;width:100%;height:auto;padding:40px 25px;transform:none!important;opacity:1!important;pointer-events:auto!important;transition:none}.wrapper.active .form-box.login,.wrapper:not(.active) .form-box.register{display:none}.form-box h2{font-size:28px}.animation{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}}@media (max-width:480px){.wrapper{border:none;box-shadow:none;background:transparent}.auth-container{background:var(--white);padding:0;display:block}.wrapper .form-box{padding:60px 20px}.form-box h2{font-size:24px}}