.login{
    height: 89vh;
}
.login-popup{
    max-width: 500px;
    width: 100%;
    height: 360px;
    margin: auto;
    background-color: #212e4e;
    border-radius: 15px;
    margin-top: 20vh;
}
.login-header{
    display: flex;
    justify-content: space-around;
    height: 40px;
}
.login-block, .register-block{
    cursor: pointer;
    margin-top: 10px;
    color: white;
}
.login-block.active, .register-block.active{
    color: orange;
}
.login-form, .register-form, .reset-form{
    display: none;
}
.login-popup input{
    width: 90%;
    margin: auto;
}
.login-popup input {
    width: -webkit-fill-available;;
    margin: 5px 40px;
    height: 34px;
    border-radius: 5px;
    border: 1px solid black;
    padding: 0 15px;
}
.login-form.login-block.active,
.register-form.register-block.active,
.reset-form.reset-password.active{
    display: flex;
    flex-direction: column;
}
.social-block{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.social{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 0 5px;
}
.social.tg iframe {
    position: relative;
    opacity: 0;
    z-index: 2;
}
.error-reset,
.reset-password{
    margin: 0 40px;
}