/*--------------------------------------------------------------
Login
--------------------------------------------------------------*/
.login {background:var(--bkgd-color02);}
.login .container {grid-template-columns:auto; grid-template-rows:auto; grid-template-areas:"content"; position:relative; max-width:none;}
.login .content {place-self:center; align-content:center; min-height:0;}
.login .main {display:grid; grid-template-columns:100%; grid-template-rows:auto; grid-template-areas:"logo" "stage" "navigation" "info"; padding:20px; position:relative; margin:auto; max-width:380px; width:100%; z-index:1;}
.login .login-logo {grid-area:logo; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; margin:0; padding:20px 0 64px; position:relative; transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1);}
.login .login-logo .logo {display:block; flex:0 0 auto; height:200px; margin:0 auto; object-fit:contain; width:150px; position:relative; text-align:center; transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1);}
.login .login-logo a {display:block; color:transparent; font-size:0.75rem; letter-spacing:-1px; margin:0 auto; padding:0; position:absolute; top:0; bottom:0; left:0; right:0; outline:0; text-align:center; text-decoration:none; z-index:-1;}
.login .login-logo a.hover {color:transparent;}
.login .login-stage {grid-area:stage; justify-self:center; margin-bottom:40px; position:relative;}
.login .login-stage:before, .login .login-stage:after {content:""; position:absolute; z-index:-5}
.login .login-stage:before {background:var(--main-color02); background:linear-gradient(23deg,rgba(50, 85, 200, 1) 0%, rgba(205, 0, 35, 1) 100%); border-radius:4px; transform:rotate(23deg); height:calc(340px - 3rem); top:1.5rem; left:1.5rem; right:1.5rem; animation-duration:3s; animation-name:rotateBkgd;}
.login .login-stage:after {background:var(--bkgd-color02);  border-radius:16px; top:-0.5rem; bottom:-0.5rem; left:-0.5rem; right:-0.5rem;}
.login .form {background:var(--bkgd-color03); border:1px solid rgba(var(--bkgd-color09-rgb),0.05); box-shadow:rgba(var(--bkgd-color09-rgb), 0.07) 0px 0 1px, rgba(var(--bkgd-color09-rgb), 0.07) 0px 2px 2px, rgba(var(--bkgd-color09-rgb), 0.07) 0px 4px 4px; border-radius:16px; display:flex; flex-direction:column; min-height:340px; margin:0 auto; max-width:340px; padding:30px 40px 40px; position:relative; width:100%; transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1);}
.login .form > p {color:var(--text-color05); margin-top:10px;}
.login .form > .form-separator + p {margin-top:0;}
.login .form .form-label, .login .form .form-text, .login .form .form-list {color:var(--text-color05);}
.login .form .form-button {margin:auto 0 0 0;}
.login select.control-langauge {background:var(--bkgd-color02); border-color:var(--bkgd-color02); align-self:flex-end; flex:0 0 auto; font-size:1.25rem; line-height:1.5rem; padding:0; width:max-content !important;}
.login .control-langauge {width:3rem;}
.login .control-langauge .select-input[type="text"][readonly] {background:transparent; border-color:transparent; box-shadow:none; cursor:pointer; font-size:1.25rem; margin-top:-0.125rem; padding-left:0; padding-right:0 !important; text-align:center; width:100%;}
.login .control-langauge.active .select-input[type="text"][readonly] {background:transparent; border-color:transparent; box-shadow:none;}
.login .control-langauge .select-icon {display:none;}
.login .control-langauge .select-options {border-radius:4px; border-width:1px; top:calc(100% + 0.5rem); width:3rem;}
.login .control-langauge .select-option {justify-content:center; padding:0.5rem;}
.login-tabs .tabs-list {width:100%;}
.login-tabs .tab  {flex:1 1 50%;}
.login-tabs .tab .tab-link {padding-left:1rem; padding-right:1rem; width:100%;}
.login-tabs .tab.ui-state-active .tab-link {background:var(--bkgd-color03); border-bottom-color:var(--bkgd-color03);}
.login .login-navigation {grid-area:navigation; font-family:var(--main-font02); font-variation-settings:var(--font-opts02); padding:40px 0; position:relative; text-align:center; transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1);}
.login .login-navigation::after {content:""; clear:both; display:block; height:0; visibility:hidden;}
.login .login-navigation .login-menu {display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; list-style:none; margin:0; padding:0;}
.login .login-navigation .login-item {border:0; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:center; flex:1 1 50%; align-self:center; font-size:0; margin:0 auto; padding:0.5rem 0; position:relative; text-align:center;}
.login .login-navigation .login-item + .login-item::before {background:rgba(var(--bkgd-color01-rgb),0.20); content:""; position:absolute; top:10px; bottom:10px; left:0; width:1px; vertical-align:middle;}
.login .login-navigation .login-link {flex:1 1 0; font-size:1rem; font-weight:400;}
.login .login-navigation .login-item .login-link {justify-content:flex-start; min-width:90px;}
.login .login-info {grid-area:info; color:var(--main-color03); font-size:0.75rem; font-weight:400; line-height:24px; margin:0; padding:0; min-height:50px; position:relative; text-align:center;}
.login .login-info::after {content:""; clear:both; display:block; height:0; visibility:hidden;}
.login .login-info strong {font-size:0.875rem; font-weight:600;}
.login .alert {background:transparent; border-width:0; color:var(--text-color05); margin:0; padding-top:20px;}
.login .alert-warning, .login .alert-success {background:transparent; border-color:transparent; border-style:solid; border-radius:4px; border-width:1px; margin:10px 0; padding:1.25rem 10px;}
.login .alert-default {margin-bottom:40px;}
@media only screen and (max-width:640px) {
.login .main::before {top:10%;}
.login .login-logo {margin:0;}
.login .login-navigation {padding-top:40px;}
.login .login-info {padding-bottom:40px;}
}
@media only screen and (max-width:480px) {
.login .main {max-width:380px;}
.login .login-logo {padding:0 0 3rem;}
.login .login-logo .logo {height:150px; width:120px;}
.login .login-stage {margin-bottom:0;}
.login .login-form {padding-left:1.5rem; padding-right:1.5rem;}
}
@media only screen and (max-width:380px) {
.login .login-stage:before, .login .login-stage:after {display:none;}
}