*,*:before,*:after{margin:0;box-sizing:border-box}html{box-sizing:border-box}body{margin:0;padding:0;background:#fdfcfa;font-family:Montserrat,sans-serif!important;overflow-x:hidden;background-size:cover;background-repeat:no-repeat;background-position:center center;height:100%;width:100%;z-index:1;transition:background-image 3s ease-in-out}.online,.offline{position:absolute;top:0;padding:1rem;font-size:1.5rem;font-weight:700;text-align:center;background-color:#1b5e20;color:#fff;width:100%;z-index:10}.offline{background-color:#b71c1c}body:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;background-color:#000000b3;height:100%;z-index:1}.main-content{width:100vw;height:100vh;padding:20px;z-index:2;position:relative}.main-content .box{display:grid;place-items:center;width:100%;height:100%;padding:20px}.main-content .box .login{color:#fff;width:90%;display:flex;align-items:center;flex-direction:column;gap:20px;header {height: 147px;} .flip-card-inner {width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; -webkit-transition: -webkit-transform .8s; transition: -webkit-transform .8s; transition: transform .8s; transition: transform .8s,-webkit-transform .8s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; form {width: 100%; max-width: 320px; align-items: center; gap: 13px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 10px 0; a {text-decoration: none; color: #fff; font-size: 14px;}} .back {position: absolute; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}} .flip-card-inner.show {-webkit-transform: rotateY(180deg); transform: rotateY(180deg);} .reset-form {width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 15px; a {text-decoration: none; color: #fff; font-size: 14px;}}}.form-control{color:#fff;border:1px solid transparent;background:rgba(255,255,255,.3);height:45px;border-radius:40px;box-shadow:none;padding-left:15px;width:100%}.form-control:hover{background:transparent!important;outline:none!important;border-color:#fff6!important}.form-control:focus{background:transparent!important;outline:none!important;border-color:#fff6!important}.form-control::placeholder{color:#fff!important}.submit{background:red!important;font-weight:700!important;border:1px solid transparent;cursor:pointer;width:100%;height:40px}.submit:hover{background:transparent!important;border-color:red!important}.form-group a:hover{color:#fff}.label-show{margin-left:10px}.show-password{width:100%;padding:8px 15px;display:flex;justify-content:space-between;font-size:.9em;label { --color: white; --size: 15px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer; font-size: var(--size); user-select: none; fill: var(--color); margin-right: 15px; .eye-slash { position: absolute; animation: keyframes-fill .5s; } .eye { position: absolute; animation: keyframes-fill .5s; display: none; } input:checked ~ .eye-slash { display: none; } input:checked ~ .eye { display: block; } input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } }}.errors-container,.success-container{margin-top:16px;text-align:center;background-color:#fff;padding:15px;border-radius:10px;color:#e74c3c;font-size:14px;font-weight:600;cursor:pointer;max-height:110px;overflow-y:auto}.success-container{color:green!important}@keyframes keyframes-fill{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}}