.loginContainer{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;width:100%;height:100vh;overflow:hidden;background-image:url(/images/bg.png);background-size:cover;z-index:0}
.loginContainer .bgLiveImage{position:absolute;top:0;left:0;width:120%;height:120%;background-image:url(/images/bg.png);background-size:cover;background-position:center;animation:bgMove 60s ease-in-out infinite;animation:bgMove 20s ease-in-out infinite;z-index:-1}
@keyframes bgMove{
    0%{transform:translate(-4%, 0%)}
    25%{transform:translate(-8%, 2%)}
    50%{transform:translate(-16%, 0%)}
    75%{transform:translate(-8%, -6%)}
    100%{transform:translate(-4%, 0%)}
}
.loginContainer .logo{width:20rem}
@keyframes gradiFlow{
    0%{background-position:200% 0}
    100%{background-position:0 0}
}
.loginContainer .loginBox{width:100%;max-width:400px;margin-top:30px;text-align:center}
.loginContainer .loginBox.wrap{padding:40px 30px;background-color:rgba(28, 27, 30, 0.9)}
.loginContainer .logo{width:245px;padding-bottom:50px}
.loginContainer .loginBox .loginForm{display:flex;flex-direction:column;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;gap:16px}
.loginContainer .loginBox .loginForm input[type=text],
.loginContainer .loginBox .loginForm input[type=password]{width:100%;padding:0.5rem 1rem;border:1px solid #3c4248;border-radius:10px;background-color:#3c4248;font-size:1rem}
.loginContainer .loginBox .loginForm input[type=text]:focus,
.loginContainer .loginBox .loginForm input[type=password]:focus{background-color:#191919;border-color:#6b6b6b;outline:none}
.loginContainer .loginBox .loginForm .passwordWrapper{position:relative;width:100%}
.loginContainer .loginBox .loginForm .passwordWrapper .toggleVisibility{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;right:0.75rem;transform:translateY(-50%);padding:0;border:none;background:none}
.loginContainer .loginBox .loginForm .passwordWrapper .toggleVisibility .icon{width:1.25rem;height:1.25rem;fill:#9c9c9c}
.loginContainer .loginBox .loginForm .passwordWrapper .toggleVisibility .iconHide{display:none}
.loginContainer .loginBox .loginForm .passwordWrapper .toggleVisibility.hideMode .iconShow{display:none}
.loginContainer .loginBox .loginForm .passwordWrapper .toggleVisibility.hideMode .iconHide{display:block}
.loginContainer .loginBox .autoLogin{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;width:100%}
.loginContainer .loginBox .autoLogin input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.loginContainer .loginBox .autoLogin .checkBox{display:flex;align-items:center;justify-content:center;position:relative;width:1rem;height:1rem;margin-right:0.5rem}
.loginContainer .loginBox .autoLogin .checkBox .icon{position:absolute;top:0;left:0;width:1rem;height:1rem}
.loginContainer .loginBox .autoLogin .checkBox .iconCheck{display:none;fill:#0077ff}
.loginContainer .loginBox .autoLogin .checkBox .iconUncheck{display:inline;fill:#9c9c9c}
.loginContainer .loginBox .autoLogin input[type=checkbox]:checked + .checkBox .iconUncheck{display:none}
.loginContainer .loginBox .autoLogin input[type=checkbox]:checked + .checkBox .iconCheck{display:inline}
.loginContainer .loginBox .loginBtn{width:100%;padding:0.5rem 1rem;border-radius:10px;border:none;background-color:#003399;color:#eaefe7;font-size:1rem;font-weight:700;transition:background-color 0.3s}
.loginContainer .loginBox .loginBtn:hover{background-color:#0077ff}