html, body{
    height: 100%;
    overflow: hidden;
    font-size: 10px;
}

body {
    background: #030e2e;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}


*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

input, button {
    outline: none;
    border: none;
}

.dm-table {
    display: table;
    width: 100%;
    height: 100%;
    padding-bottom: 30px;
}

.dm-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.main-container {
    background-image: url(../img/tlk-bg-2.jpg);
    background-position: center;
    background-size: cover;
    height: 100%;
    position: relative;
    overflow-y: auto;
}

.form-container {
    display: inline-block;
    background: linear-gradient(to bottom, rgba(0, 122, 191, 0.6) 0%, rgba(0, 22, 94, 0.8) 100%);
    min-width: 400px;
    border-radius: 2px;
    margin: 2rem;


}

.form {
    padding: 0.5rem 2.5rem 3.5rem;
}

.logo {
    min-width: 300px;
    position: relative;
    margin-bottom: 90px;
}

#earth {
    width: 300px;
    height: 300px;
    background: url(../img/Earth-Spec4096.png);
    border-radius: 50%;
    background-size: 610px;
    animation-name: rotate2;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotate2;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    transform: scale(0.5);
    -moz-transform: scale(0.5);
    margin: auto;
    position: absolute;
    left: calc(50% - 150px);
    opacity: 0.85;
}
#earth:after {
    content: "";
    width: 300px;
    height: 300px;
    display: block;
    background: radial-gradient(farthest-corner at 80px 80px, #fff 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 100%);
    opacity: 0.9;
    border-radius: 50%;
}

#logoborder {
    background: url(../img/logoborder.png);
    width: 213px;
    height: 158px;
    background-size: cover;
    position: relative;
    top: 68px;
    left: calc(50% - 114px);
    opacity: 0.8;
}

@keyframes rotate2 {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: 610px 0px;
    }
}
@-webkit-keyframes rotate2 {
    from {
        background-position: 0px 0px;
    }
    to {
        background-position: 610px 0px;
    }
}





.login__row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    padding-top: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
    overflow: hidden;
}

.login__icon {
    margin-bottom: -0.4rem;
    margin-right: 0.5rem;
}

.login__input {
    display: inline-block;
    width: 32rem;
    height: 100%;
    padding-left: 1.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: #FDFCFD;
}
.login__input.pass {
    padding-left: 0;
    display: inline-flex;
    background: transparent;
    align-items: center;
}

.login__input input {
    width: 30rem;
    height: 100%;
    padding-left: 1.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: #FDFCFD;
}

.password-control {
    display: flex;
    width: 2em;
    text-decoration: none;
    color: #dfe4f0;
}

.password-control i {
    width: 100%;
    height: 100%;
}

.fas:before {
    width: 20px;
}

.login__input.icq {
    outline: none;
    border: none;
    background: transparent;
    -webkit-appearance: none;
}

.login__input.icq option {
    background: #375b8e;
}

.login__icon.name path {
    stroke-dasharray: 73.50196075439453;
    stroke-dashoffset: 73.50196075439453;
    -webkit-animation: animatePath 2s 0.5s forwards;
    animation: animatePath 2s 0.5s forwards;
}

.login__icon.code {
    filter: invert(0.9);
}

.svg-icon path {
    stroke: rgba(255, 255, 255, 0.9);
    fill: none;
    stroke-width: 1;
}

.svg-icon {
    cursor: pointer;
}
svg {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    overflow: visible;
}

.login__icon.pass path {
    stroke-dasharray: 92.10662841796875;
    stroke-dashoffset: 92.10662841796875;
    -webkit-animation: animatePath 2s 0.5s forwards;
    animation: animatePath 2s 0.5s forwards;
}


.error__row {
    min-height: 2rem;
}

.alert-warning__form {
    color: #ff9090;
    font-size: 1.15rem;
    background: none;
    padding: 0.2rem 0rem;
    display: none;
}

.button__success, .login__submit, .password__submit, .restore__submit, .forgetpassword__submit, .register__submit {
    position: relative;
    width: 100%;
    height: 4rem;
    margin: 1rem 0 2.2rem;
    color: rgba(255, 255, 255, 0.8);
    background: #007abf;
    font-size: 1.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
}

.restore__submit:after, .register__submit:after, .forgetpassword__submit:after, .password__submit:after, .login__submit:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -1.5rem;
    margin-top: -1.5rem;
    width: 3rem;
    height: 3rem;
    border: 2px dotted #fff;
    border-radius: 50%;
    border-left: none;
    border-bottom: none;
    transition: opacity 0.1s 0.4s;
    opacity: 0;
}

.password__submit.processing:after,
.register__submit.processing:after,
.restore__submit.processing:after,
.forgetpassword__submit.processing:after,
.login__submit.processing:after {
    opacity: 1;
    -webkit-animation: rotate 0.5s 0.4s infinite linear;
    animation: rotate 0.5s 0.4s infinite linear;
}

.password__submit.processing,
.register__submit.processing,
.forgetpassword__submit.processing,
.restore__submit.processing,
.login__submit.processing {
    width: 4rem;
    font-size: 0;
}

.login_register,
.comeback__a{
    font-size: 1.6rem;
    color: #428bca;
    line-height: 1.5
}

.captcha{
    border: none;
    height: 100px;
    margin: 0 auto;
    width: 300px;
}

.message__item {
    font-size: 1.5rem;
    color: #d2d2d2;
}

.content-text{
    color: #fff;
    padding: 0 20px 30px;
}
.content-text p {
    font-size: 1.5rem;
}
.content-text h3 {
    font-size: 2rem;
    margin: 2rem;
}

.developer-block {
    height: 30px;
    margin-top: -30px;
    text-align: right;
    color: #fff;
    padding-right: 2rem;
    text-shadow: 1px 1px 2px #000000;
    font-size: 1.2rem;
}

.developer-block a{
    color: #fff !important;
}

@-webkit-keyframes animatePath {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes animatePath {
    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



/*Mobile*/
@media only screen and (max-width: 420px) {
    .developer-block{
        text-align: center;
        padding-top: 10px;
    }

    .form-container {
        max-width: none;
        width: 90vw;
        min-width: 300px;
        margin: 0;
        margin-top: 10%;
    }

    .login__input {
        width: 70vw;
    }

    html, body {
        font-size: 8px;
    }
}

@media only screen and (max-width: 300px) {
    .form-container {
        height: 100%;
    }
    .form {
        padding: 0 4px;
    }
    .login__input{
        min-width: 260px;
    }
}

@media only screen and (max-width: 380px) {

    .captcha {
        width: auto;
    }

    .g-recaptcha{
        -moz-transform:scale(0.85);
        -ms-transform:scale(0.85);
        -o-transform:scale(0.85);
        -moz-transform-origin:0;
        -ms-transform-origin:0;
        -o-transform-origin:0;
        -webkit-transform:scale(0.85);
        transform:scale(0.85);
        -webkit-transform-origin:0 0;
        transform-origin:0;
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.85,M12=0,M21=0,M22=0.85,SizingMethod='auto expand');
        margin: 0 auto;
        width: 258px;
    }
}

/* update */
body {
    background: #F4F6F7;
}
.main-container {
    background-image: url(../img/tlk-bg-3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.form-container {
    background: #FFF;
    border-radius: 6px;
    min-width: 534px;
}
.logo {
    margin-bottom: 120px;
}
#logo-border {
    background: url(../img/auth_logo.png);
    width: 214px;
    height: 246px;
    background-size: cover;
    position: relative;
    top: 68px;
    left: calc(50% - 114px);
    opacity: unset;
}
.login__row {
    border-radius: 24px;
    border: 1px solid #4A76A8;
    max-width: 374px;
    max-height: 48px;
    margin: 0 auto 30px auto;
    padding: 0;
    padding-left: 10px;
}
.svg-icon path {
    fill: #808080;
}
.password-control {
    color: #006FB4;
}
.button__success, .login__submit, .password__submit, .restore__submit, .forgetpassword__submit, .register__submit {
    border-radius: 24px;
    /*background: #FFF;*/
    /*color: #;*/
    width: 263px;
}
.login__input input,
.login__input {
    color: #000000;
}
input::placeholder{
    color: #000000;
}

.motivation-block {
    min-width: 534px;
}
.tooltip.fade.right.in {
    left: -160px !important;
}
@media screen and (max-width: 1300px) {
    .main-container {
        background-size: 1300px 774px;
    }
}
@media screen and (max-width: 768px) {
    .form-container {
        max-width: none;
        width: 90vw;
        min-width: 300px;
        margin: 0;
    }
    .login__input {
        width: 70vw;
    }
    .motivation-block {
        display: none;
    }
}
@media screen and (max-width: 420px) {
    .tooltip.fade.right.in {
        left: -120px !important;
    }
}