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 .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; }