@import url("./common.css");
@import url("./header.css");
@import url("./footer.css");
@import url("./form-field.css");

.auth {
    width: 43.51vw;
    padding: 4.06vw 3.125vw;
    border-radius: 1.56vw;
    background: #FFFFFF;
    font-size: 1.56vw;
    line-height: 1.25;
    position: fixed;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@media (max-width: 768px) {
    .auth {
        width: 80%;
        padding: 5.06vw 3.9vw;
        font-size: 4.28vw;
    }
}


.auth p {
    text-align: center;
}


@media (max-width: 768px) {
    .auth p br {
        display: none;
    }
}

.auth button:focus,

.auth button, .auth button:focus, .auth button:active {
    padding: 1.17vw 4.29vw;
    border-radius: 1.8vw;
    outline: none;
    border: 0.08vw solid var(--primary-blue);
    color: var(--primary-blue);
    transition: 0.3s;
    cursor: pointer;
    display: flex;
    background: none;
    font-size: 1.25vw;
    flex: 1 0 auto;
    gap: 1.875vw;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

@media (max-width: 768px) {
    .auth button {
        padding: 3.43vw 4.29vw;
        border-radius: 5.3vw;
        border: 0.31vw solid var(--primary-blue);
        font-size: 3.43vw;
        width: 100%;
        flex: initial;
    }
}

.auth button.auth__button_secondary {
    color: var(--overlay-color);
    background: var(--primary-blue);
}

.auth_row {
    display: flex;
    align-content: center;
    justify-content: space-between;
    gap: 2.57vw;
}
@media (max-width: 768px) {
    .auth_row {
        margin-top: 5.06vw;
    }
}

.auth form.error button[type="submit"] {
    pointer-events: none;
    background: rgba(46, 46, 46, 0.35);
    border: 0.08vw solid rgba(46, 46, 46, 0.35);

}

@media (max-width: 768px) {
    .auth form.error button[type="submit"] {
        border: 0.31vw solid rgba(46, 46, 46, 0.35);
    }
}

.auth form button img {
    width: 0.39vw;
    height: 0.7vw;
    display: block;
}

@media (max-width: 768px) {
    .auth form button img {
        display: none;
    }
}

.auth form.error button span {
    display: block;
}

.auth .form-field__input-wrap .form-field__input:focus {
    color: var(--text);
}
.auth .form-field__input-wrap .form-field__input::placeholder {
    opacity: 0.5;
}

.auth__title {
    font-size: 3.125vw;
    line-height: 1.25vw;
    text-align: center;
}

@media (max-width: 768px) {
    .auth__title {
        font-size: 5.06vw;
        text-align: center;
    }
}

.mt34 {
    margin-top: 2.65vw;
}

@media (max-width: 768px) {
    .mt34 {
        margin-top: 5.03vw;
    }
}

.auth__code-form {
    display: none;
}

.control-text {
    margin-top: 0.7vw;
}
.control-text p {
    font-size: .8vw;
    text-align: left;
    margin-top: 0.5vw;
}
@media (max-width: 768px) {
    .control-text p {
        font-size: 1.5vw;
    }
}
.control-text p a {
    color: var(--primary-blue);
}
.control-text input {
    width: .7vw;
    height: .7vw;
}
@media (max-width: 768px) {
    .control-text input {
        width: 2vw;
        height: 2vw;
    }
}

.control-text p.error-text, .control-text p.error-text a {
    color: red;
}
.auth .form-field__input-wrap .form-field__input.error-field {
    color: red;
}