* { margin: 0; font-family: 'Poppins', sans-serif; outline: none; border: 0; padding: 0; text-decoration: none; list-style: none; }
body { overflow: hidden; }
.loading { position: fixed; width: 100vw; height: 100vh; top: 0px; left: 0px; z-index: 999; background: #0040AB url(/utils/img/bg-login.png) center; background-size: cover; transition: 1000ms all ease; display: flex; align-items: center; justify-content: center; }
.loading svg { transition: 1000ms all ease; opacity: 0; }
@keyframes loadingAnim { 0% { transform: scale(1) rotate(0deg);; } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes loadingFinished { 100% { transform: scale(0) rotate(360deg); } }

.cube { position: absolute; z-index: 2; }
.cube-1 { transform: rotate(-24deg); width: 100px; left: calc(50% - 400px); top: 60px; animation: float1 6s ease-in-out infinite; }
.cube-2 { transform: rotate(-24deg); width: 150px; left: calc(50% - 550px); top: 200px; animation: float2 7s ease-in-out infinite; }
.cube-3 { transform: rotate(-24deg); width: 50px; left: calc(50% - 500px); top: 380px; animation: float3 5s ease-in-out infinite; }
.cube-4 { transform: rotate(-24deg); width: 230px; left: calc(50% - 600px); top: 450px; animation: float4 8s ease-in-out infinite; }
.cube-5 { width: 100px; left: calc(50% + 300px); top: 60px; animation: float5 6s ease-in-out infinite; }
.cube-6 { width: 80px; left: calc(50% + 480px); top: 160px; animation: float6 7s ease-in-out infinite; }
.cube-7 { width: 30px; left: calc(50% + 500px); top: 260px; animation: float7 6s ease-in-out infinite; }
.cube-8 { width: 260px; left: calc(50% +  300px); top: 400px; animation: float8 8s ease-in-out infinite; }
@media screen and (max-width: 1000px) { .cube { display: none; } }
@keyframes float1 { 0% { transform: translatey(0px) rotate(-24deg); } 50% { transform: translatey(-10px) rotate(-15deg); } 100% { transform: translatey(0px) rotate(-24deg); } }
@keyframes float2 { 0% { transform: translatey(0px) rotate(-24deg); } 50% { transform: translatey(20px) rotate(-30deg); } 100% { transform: translatey(0px) rotate(-24deg); } }
@keyframes float3 { 0% { transform: translatey(0px) rotate(-24deg); } 50% { transform: translatey(-15px) rotate(-40deg); } 100% { transform: translatey(0px) rotate(-24deg); } }
@keyframes float4 { 0% { transform: translatey(0px) rotate(-24deg); } 50% { transform: translatey(30px) rotate(-20deg); } 100% { transform: translatey(0px) rotate(-24deg); } }
@keyframes float5 { 0% { transform: translatey(0px) rotate(0deg); } 50% { transform: translatey(25px) rotate(10deg); } 100% { transform: translatey(0px) rotate(0deg); } }
@keyframes float6 { 0% { transform: translatey(0px) rotate(0deg); } 50% { transform: translatey(10px) rotate(-10deg); } 100% { transform: translatey(0px) rotate(0deg); } }
@keyframes float7 { 0% { transform: translatey(0px) rotate(0deg); } 50% { transform: translatey(15px) rotate(10deg); } 100% { transform: translatey(0px) rotate(0deg); } }
@keyframes float8 { 0% { transform: translatey(0px) rotate(0deg); } 50% { transform: translatey(-25px) rotate(-5deg); } 100% { transform: translatey(0px) rotate(0deg); } }

.login-screen { width: 100vw; height: 100vh; position: absolute; background: #013594 url(/utils/img/bg-login.png) no-repeat center; background-size: cover; display: flex; flex-direction: column; align-items: center; overflow-y: auto; }

.login { opacity: 0; transform: translateY(30px) scale(0.5); width: 100%; margin: auto 0; transition: 800ms all ease; display: flex; flex-direction: column; align-items: center; }
.login-main-logo { width: calc(100% - 40px); max-width: 250px; transition: 300ms transform ease; margin: 60px 0 30px 0; }
.login-main-logo:hover { transform: scale(1.05); }

.login-box { width: calc(100% - 40px); max-width: 400px; max-height: calc(100% - 80px); background: #fff; border-radius: 10px; box-shadow: 0 20px 20px rgba(0,0,0,0.1); }

.login.start { opacity: 1; transform: translateY(0px) scale(1); }
.login .p { padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login h1 { font-size: 22px; color: #AD5DFC; text-align: center; margin-bottom: 10px; font-weight: 700; }
.login h2 { font-size: 13px; color: #000062; text-align: center; margin-bottom: 25px; font-weight: 300; }
.login .input { width: 100%; height: 50px; background: #E9E9E9; border-radius: 5px; display: flex; flex-direction: row; margin-bottom: 15px; transition: 100ms box-shadow ease; }
.login .input .ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; width: 50px; height: 50px; background: #8000FF; }
.login .input .ico * { stroke: #fff; transition: 100ms stroke ease; }
.login .input input[type=password],
.login .input input[type=text],
.login .input select { flex-grow: 1; padding: 0 0 0 15px; height: 50px; background: transparent; font-size: 16px; color: #777; font-weight: 300; border-radius: 5px; transition: 300ms box-shadow ease; }
.login .remember { margin: 10px 0 20px 0; font-size: 15px; color: #2B3553; cursor: pointer; }
.login .remember span { margin-left: 5px; font-weight: 300; }
.login .captcha { margin-bottom: 20px; }
.login .button { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: row; transition: 300ms box-shadow ease; border-radius: 5px; cursor: pointer; color: #fff; font-size: 18px; font-weight: 600; }
.login .button.signin,
.login .button.register,
.login .button.reset { background: #00FFFF;color:#330066 }
/*.login .button.signin:hover,
.login .button.register:hover,
.login .button.reset:hover { box-shadow: 0 0 0 4px rgba(27, 233, 89, 0.418); }*/
.login .button.signup { background: #330066; margin-bottom: 20px; }
/*.login .button.signup:hover { box-shadow: 0 0 0 4px rgba(140, 26, 255, 0.479); }*/
.login .button.register { margin-bottom: 20px; }
.login .separator { margin: 20px 0; }
.login .footer-link { font-size: 12px; font-weight: 300; color: #2B3553; text-align: center; transition: 200ms all ease; }

.switch { position: relative; display: inline-block; width: 45px; height: 22px; }
.switch input {  opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #EBECF0; -webkit-transition: .4s; transition: .4s; border-radius: 11px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; top: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
input:checked + .slider { background-color: #1D8CF8; }
input:focus + .slider { box-shadow: 0 0 1px #1D8CF8; }
input:checked + .slider:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); }
.copyright,
.language,
.goback { height: 40px; color: #fff; font-size: 12px; font-weight: 500; }
.copyright { margin-top: auto; padding: 40px 0 10px 0; }
.language { right: 20px; top: 5px; position: absolute; }
.language span { margin: 0 8px; }
.language .button { padding: 0 10px; height: 40px; display: flex; flex-direction: row; align-items: center; justify-content: center; cursor: pointer; }
.language .dropdown { top: 40px; right: 0px; position: absolute; background: #fff; border-radius: 5px; font-weight: 700; padding: 5px 0; box-shadow: 0 5px 10px rgba(0,0,0,0.1); margin-top: -5px; transition: 300ms all ease; opacity: 0; visibility: hidden; }
.language .dropdown.active { opacity: 1; visibility: visible; margin: 0; }
.language .dropdown a { display: flex; flex-direction: row; padding: 5px 10px; color: #444; }

.goback { left: 20px; top: 5px; position: absolute; display: flex; flex-direction: row; align-items: center; gap: 10px; }
.goback svg { margin-top: -2px; position: relative; }