body.enter    { position: relative; margin: 0; padding: 0; min-height: 100vh; }

.enter:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; }
.enter:before { background: url('/static/img/enter/bg.png') no-repeat center center; background-size: cover; }

.enter:after  { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(5,136,223,0.8); }

.enter .cikumas-langs          { position: absolute; right: 20px; top: 20px; z-index: 1000; margin: 0; }
.enter .cikumas-langs      > a { padding: 8px 10px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,1); }
.enter .cikumas-langs.open > a { background-color: #fff; color: #264A84; text-shadow: none; box-shadow: 0 0 4px rgba(0,0,0,0.3); }

@media screen and (max-width: 400px) {
    .enter .cikumas-langs     { top: 9px; }
    .enter .cikumas-langs > a { background-color: #fff; color: #264A84; text-shadow: none; }
}

.enter > .document > .logo { position: absolute; transform: translate(0, -50%); top: 40px; left: 40px; z-index: 200; }
.enter > .document > .logo { width: 155px; height: 32px; background: url('/static/img/enter/logo-white.svg') no-repeat center center; background-size: 100%; }

@media screen and (max-width: 400px) {
    .enter > .document > .logo { display: none; }
}

.enter .modal-form                    { background-color: transparent; }
.enter .modal-form .container a.close { display: none; }

.enter .modal-form .domain-warning          { margin-top: 20px; text-align: justify; font-size: 14px; color: #FF5D40; }
.enter .modal-form .domain-warning b > span { color: #2D6DF2; }

.enter .modal-form .ctrl-recover   { margin-top: 10px; text-align: right; }
.enter .modal-form .ctrl-recover a { color: #2D6DF2; font-size: 12px; line-height: 14px; }
.enter .modal-form .ctrl-admin     { margin-top: 25px; text-align: center; }
.enter .modal-form .ctrl-admin a   { color: #10B163; font-size: 14px; line-height: 16px; }
.enter .modal-form .ctrl-signup    { margin-top: 25px; text-align: center; }
.enter .modal-form .ctrl-signup a  { color: #10B163; font-size: 14px; line-height: 16px; }
.enter .modal-form .ctrl-signin    { margin-top: 25px; text-align: center; }
.enter .modal-form .ctrl-signin a  { color: #10B163; font-size: 14px; line-height: 16px; }
.enter .modal-form .sso-separator {
    margin: 14px 0 10px;
    position: relative;
    text-align: center;
}
.enter .modal-form .sso-separator:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #d8e1f2;
}
.enter .modal-form .sso-separator > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 10px;
    background-color: #ffffff;
    color: #7a89a8;
    font-size: 12px;
    line-height: 16px;
}
.enter .modal-form .sso-providers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.enter .modal-form .sso-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid #d9e2f4;
    background-color: #ffffff;
    color: #1f3c77;
}
.enter .modal-form .sso-provider:hover {
    background-color: #f7faff;
}
.enter .modal-form .sso-provider.sso-google {
    border-color: #d7dde8;
}
.enter .modal-form .sso-provider > i {
    font-size: 15px;
    line-height: 1;
}

.enter .modal-form .ctrl-msft          { text-align: center; font-size: 0; }
.enter .modal-form .ctrl-msft a        { color: #706D6E; line-height: 21px; }
.enter .modal-form .ctrl-msft a > *    { display: inline-block; vertical-align: middle; }
.enter .modal-form .ctrl-msft a > i    { width: 17px; height: 17px;  margin-right: 5px; }
.enter .modal-form .ctrl-msft a > i    { background: url('/static/img/microsoft-logo.png') no-repeat center center; background-size: contain; }
.enter .modal-form .ctrl-msft a > span { font-size: 14px; }

@media screen and (max-width: 400px) {
    .enter .modal-form .ctrl-admin     { margin-bottom: 25px; }
    .enter .modal-form .ctrl-signup    { margin-bottom: 25px; }
    .enter .modal-form .ctrl-signin    { margin-bottom: 25px; }
}

.enter .modal-form > .container         { width: 360px; }
.enter .modal-form > .container > .logo { display: none; margin: 20px auto 10px; }
.enter .modal-form > .container > .logo { width: 160px; height: 60px; background: url('/static/img/enter/logo-blue.svg') no-repeat center center; background-size: contain; }
@media screen and (max-width: 400px) {
    .enter .modal-form > .container         { width: 100%; }
    .enter .modal-form > .container > .logo { display: block; }
}



.enter .modal-form .user-name        { padding-top: 0; }
.enter .modal-form .user-name        { align-items: flex-start; justify-content: space-between; }
.enter .modal-form .user-name .first { width: calc(50% - 5px); margin-right: 5px; }
.enter .modal-form .user-name .last  { width: calc(50% - 5px); margin-left: 5px; }

.enter .modal-form .birth-date       { padding-top: 0; margin-bottom: 10px; }
.enter .modal-form .birth-date       { align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.enter .modal-form .birth-date label { display: block; width: 100%; line-height: 18px; font-size: 12px; color: #264A84; margin-bottom: 5px; }
.enter .modal-form .birth-date .bd   { flex-grow: 0; flex-shrink: 0; margin-bottom: 0; width: 80px; margin-right: 10px; }
.enter .modal-form .birth-date .bm   { flex-grow: 1; flex-shrink: 1; margin-bottom: 0; max-width: calc(100% - 90px - 90px); }
.enter .modal-form .birth-date .by   { flex-grow: 0; flex-shrink: 0; margin-bottom: 0; width: 80px; margin-left: 10px; }

@media screen and (max-width: 800px) {
	.enter .modal-form .birth-date .bd ul.autocomplete { min-width: 70px; }
	.enter .modal-form .birth-date .bm ul.autocomplete { min-width: 120px; }
	.enter .modal-form .birth-date .by ul.autocomplete { min-width: 70px; }
}

#modal-activate .input-frame > .icon       { background-color: transparent; }
#modal-activate .input-frame > .icon:hover { background-color: transparent; }