.toggle{cursor:pointer;display:flex;gap:15px;align-items:center}.toggle p{margin:0}.toggle .toggle-btn{position:relative;display:flex;align-items:center;width:85px;height:40px;padding:3px;border-radius:50px;background-color:var(--primaryColor);box-shadow:0 3px 8px rgba(0,0,0,.24)}.toggle .toggle-btn span{position:absolute;width:35px;height:35px;border-radius:50%;transition:all .2s ease-in-out;background-color:var(--intermediateColor);box-shadow:inset 0 0 7px 3px rgba(0,0,0,.5)}.toggle .toggle-btn.display-login span{left:5px}.toggle .toggle-btn.display-register span{left:calc(100% - 40px)}.card{max-width:600px;width:100%;min-height:50vh;perspective:1000px}.card .card-container{width:100%;height:500px;min-height:-moz-fit-content;min-height:fit-content;transition:transform .5s ease-in;transform-style:preserve-3d;display:flex;flex-direction:column;background-color:var(--primaryColorOpacity90);border:1px solid var(--intermediateColor);border-radius:20px}.card .card-container .card-login,.card .card-container .card-register{inset:0;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform 1.2s ease-in-out;display:flex;flex-direction:column;padding:20px;gap:50px}.card .card-container .card-login form,.card .card-container .card-register form{height:100%;display:flex;flex-direction:column;align-items:center;gap:30px}.card .card-container .card-login form ::-ms-reveal,.card .card-container .card-register form ::-ms-reveal{filter:invert(100%)}.card .card-container .card-login form .inputBox,.card .card-container .card-register form .inputBox{position:relative;width:100%}.card .card-container .card-login form .inputBox label,.card .card-container .card-register form .inputBox label{cursor:text;position:absolute;left:5px;bottom:3px;color:var(--lightColor);transition:all .2s ease-in}.card .card-container .card-login form .inputBox input,.card .card-container .card-register form .inputBox input{background-color:transparent;border:none;border-bottom:2px solid var(--lightColor);padding-left:10px;outline:none;width:100%}.card .card-container .card-login form .inputBox input::placeholder,.card .card-container .card-register form .inputBox input::placeholder{color:transparent}.card .card-container .card-login form .inputBox input:focus~label,.card .card-container .card-login form .inputBox input:not(:placeholder-shown)~label,.card .card-container .card-register form .inputBox input:focus~label,.card .card-container .card-register form .inputBox input:not(:placeholder-shown)~label{bottom:100%;left:5px;font-size:.6rem;color:#767676}.card .card-container .card-login form button,.card .card-container .card-register form button{margin-top:auto;margin-bottom:auto}.card .card-container .card-login{transform:translateZ(0)}.card .card-container .card-register{transform:rotateY(180deg) translateZ(0)}.card .card-container h3{margin:0;font-size:var(--titleMediumSize);padding-bottom:5px;border-bottom:3px solid var(--lightColor)}.card.display-login .card-container{transform:rotateY(0)}.card.display-login .card-container .card-login{transform:translateZ(15px)}.card.display-register .card-container{transform:rotateY(180deg)}.card.display-register .card-container .card-register{transform:rotateY(180deg) translateZ(15px)}.card input:-webkit-autofill,.card input:-webkit-autofill:active,.card input:-webkit-autofill:focus,.card input:-webkit-autofill:hover{-webkit-transition:background-color 5000s;transition:background-color 5000s;-webkit-text-fill-color:var(--lightColor)!important}#infoBox{position:fixed;min-width:100%;max-width:500px;margin-left:auto;margin-right:auto;border-radius:0 0 30px 30px;border:1px solid var(--intermediateColor);padding:10px 45px;background-color:var(--primaryColor);z-index:2;transform:translateY(-100px);transition:transform .2s ease-in}#infoBox.open{transform:translateY(0)}#infoBox p{font-size:var(--basicSize);text-align:center}#infoBox p.error{color:#b90e0e}#infoBox p.success{color:#0aa81f}#infoBox p.info{color:var(--lightColor)}#infoBox .closeBtn{display:flex;align-items:center;justify-content:center;position:absolute;top:5px;right:5px;padding:10px;cursor:pointer;margin-left:auto}#infoBox .closeBtn .closeIcon{font-size:25px}