.auth-wrapper{background:radial-gradient(circle at top,#0f2027,#000);min-height:100vh}.auth-container{background:#111;border-radius:14px;width:900px;max-width:100%;min-height:480px;position:relative;overflow:hidden;box-shadow:0 0 40px #00ffff40}.form-container{align-items:center;width:50%;height:100%;padding:50px;transition:all .6s ease-in-out;display:flex;position:absolute;top:0}.form-container form{width:100%}.form-container h3{color:#fff;margin-bottom:20px}.form-control{color:#fff;background:#1c1c1c;border:1px solid #333}.form-control:focus{color:#fff;box-shadow:none;background:#1c1c1c;border-color:#0dcaf0}.sign-in-container{z-index:2;left:0}.sign-up-container{opacity:0;z-index:1;left:0}.overlay-container{z-index:100;width:50%;height:100%;transition:transform .6s ease-in-out;position:absolute;top:0;left:50%;overflow:hidden}.overlay{background:linear-gradient(135deg,#00c6ff,#0072ff);width:200%;height:100%;transition:transform .6s ease-in-out;position:relative;left:-100%;transform:translate(0)}.overlay-panel{color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;width:50%;height:100%;padding:40px;display:flex;position:absolute}.overlay-left{transform:translate(-20%)}.overlay-right{right:0;transform:translate(0)}.auth-container.right-panel-active .sign-in-container{transform:translate(100%)}.auth-container.right-panel-active .sign-up-container{opacity:1;z-index:5;transform:translate(100%)}.auth-container.right-panel-active .overlay-container{transform:translate(-100%)}.auth-container.right-panel-active .overlay{transform:translate(50%)}@media (max-width:768px){.auth-container{width:100%;min-height:550px}.overlay-container{display:none}.form-container{width:100%;position:relative}}