@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap');

:root {
    --main-color-light-blue: #DEE6F5;
}

* {
    font-family: Mulish, sans-serif;
}

body {
    background-color: #f4f6fb !important;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
}

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

.remember_me {
    margin-left: 5px;
    font-size: 14px;
    color: #283445;
    line-height: 150%;
}

.link-dark {
    color: #283445;
}

.form-lk-wrapper {
    border: 1px solid var(--main-color-light-blue);
    border-radius: 8px;
    margin: 40px auto;
    background: #fff;
    padding: 50px 70px;
}

.form-auth {
    width: 475px;
}

.form-signup {
    width: 489px;
}

.form-reset {
    width: 483px;
}

.form-lk-wrapper .title {
    color: #283445;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 0em;
    text-align: left;
}

.logo {
    display: flex;
}

.sign-up_wrapper .logo {
    margin: 60px auto 0;
}

.btn-auth {
    font-weight: bold;
    border: 1px solid var(--main-color-light-blue);
    border-radius: 60px;
    color: #283445;
    flex-direction: row;
    align-items: flex-start;
    padding: 10px 30px 12px;
}

.btn-submit {
    color: #fff;
    border-radius: 8px;
    padding: 13px 28px 16px;
    background: #3c83ed;
    width: 100%;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: center;
}

.btn-auth.active {
    color: #fff !important;
    background: #283445;
}

form .error-message {
    color: #ff3939;
    font-size: 13px;
    z-index: 999999;
}

.hide-password-input,
.hide-password-input-active {
    background-size: 20px;
    background-position: center center;
    position: absolute;
}

.form-validate,
.form-no-validate {
    right: -30px;
    width: 20px;
    height: 20px;
    border: none;
    background-size: cover;
    position: absolute;
    top: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.form-validate {
    background-image: url(img/good.svg);
}

.form-no-validate {
    background-image: url(img/bad.svg);
}

.hide-password-input,
.hide-password-input-active {
    right: 6px;
    width: 30px;
    height: 18px;
    border: none;
    top: 20%;
}

.hide-password-input {
    background: url(img/hide_password.svg) no-repeat;
    cursor: pointer;
}

.hide-password-input-active {
    background: url(img/hide_password_two.svg) no-repeat;
}

.border-green {
    border: 1px solid #6ac96e !important;
}

.border-red {
    border: 1px solid #f04461 !important;
}

.error-message {
    border: 1px solid #f04461;
    background: #ffecef;
    padding: 7px 20px 9px;
    border-radius: 8px;
    position: absolute;
    top: -2.5rem;
    right: -50px;
    z-index: 99999;
}

.error-message:after {
    content: "";
    width: 10px;
    right: 9px;
    position: absolute;
    background: url(img/group.svg) no-repeat right 0px top -30px;
    background-position: center center;
    height: 10px;
    bottom: -9px;
}

.alert-success {
    padding: 20px 30px !important;
    background: rgba(113, 216, 117, 0.1) !important;
    border: 1px solid #6ac96e !important;
    border-radius: 8px !important;
    color: #6ac96e !important;
}

.mail-list .item {
    border: 1px solid var(--main-color-light-blue);
    flex: 1 1 31.33%;
    margin-left: 5px;
    padding: 13px 23px 16px 20px;
    border-radius: 8px;
    text-align: center;
}

.mail-list .item a {
    color: #212529;
}

.mail-list .item span {
    margin-left: 6px;
    font-size: 14px;
    display: inline-block;
    color: #283445;
}

.mail-list .item:first-child {
    margin-left: 0 !important;
}

#checkboxSeller {
    position: relative;
}

.form-control + .form-control {
    margin-top: 1em;
}

input[type="checkbox"] {
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #8A92A2;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px;
}

input[type="checkbox"]:checked {
    border: 0;
}

input[type="checkbox"]:checked::before {
    position: absolute;
    background-color: #3c83ed;
    background-position: center;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMyAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS44NjM3IDEuMTM2MzZDMTIuMTU2NiAxLjQyOTI1IDEyLjE1NjYgMS45MDQxMiAxMS44NjM3IDIuMTk3MDJMNS4xOTcwMSA4Ljg2MzY4QzQuOTA0MTEgOS4xNTY1OCA0LjQyOTI0IDkuMTU2NTggNC4xMzYzNSA4Ljg2MzY4TDAuODAzMDEzIDUuNTMwMzVDMC41MTAxMiA1LjIzNzQ2IDAuNTEwMTIgNC43NjI1OCAwLjgwMzAxMyA0LjQ2OTY5QzEuMDk1OTEgNC4xNzY4IDEuNTcwNzggNC4xNzY4IDEuODYzNjcgNC40Njk2OUw0LjY2NjY4IDcuMjcyNjlMMTAuODAzIDEuMTM2MzZDMTEuMDk1OSAwLjg0MzQ2NCAxMS41NzA4IDAuODQzNDY0IDExLjg2MzcgMS4xMzYzNloiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==);
    background-size: 14px 14px;
    border-radius: 4px;
}

input[type="checkbox"]:not(:disabled) {
    cursor: pointer;
}

.form-check .form-check-input {
    margin-top: 3px;
}

.form-check {
    margin-left: 0;
    margin-right: 10px;
}

.line-hr {
    background: #dee6f5;
    height: 1px;
    width: 100%;
    margin: 20px 0;
}

.link-rules {
    color: #3c83ed !important;
    text-decoration: underline;
}

select {
    color: #75797d;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url(/img/arrow-down.svg) !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
}

.form-check-label {
    margin-left: 10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
}

.mb-3 {
    margin-bottom: 0.85em !important;
}

.arrow {
    margin-left: 0.5em;
}

.reset-text {
    color: #283445;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 1.8em;
}

.link-style {
    color: #283445;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
}

.children {
    border-left: 1px solid var(--main-color-light-blue);
    background: #f4f6fb;
    padding-top: 50px;
}

.login-wrapper .logo {
    margin: 150px auto 0;
}

.login-wrapper .title {
    margin-bottom: 25px;
}

.form-signup .title {
    margin-bottom: 25px;
}

a {
    text-decoration: unset !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: unset !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

hr {
    background: var(--main-color-light-blue) !important;
    border: 1px solid var(--main-color-light-blue) !important;
}

select option {
    background-color: #fff;
}

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

    .children {
        border-left: 0;
    }

    .hide-password-input,
    .hide-password-input-active {
        transform: scale(1.2);
        height: 6vw;
    }

    .mail-list {
        gap: 4vw;
    }
    .mail-list .item a {
        display: flex;
        flex-direction: column;
        gap: 4vw;
    }
    .mail-list .item a img {
        height: 8vw;
    }

    .login-wrapper .logo {
        margin: 15vh auto 0;
    }

    .form-auth,
    .form-signup,
    .form-reset {
        width: 90vw;
    }

    .form-lk-wrapper {
        padding: 3vh 10vw;
        border: 2px solid rgb(222 230 245 / 70%);
    }

    .form-lk-wrapper.form-reset {
        margin: 20vh auto;
    }

    .form-control {
        border-color: rgba(156, 163, 176, 0.3) !important;
        height: 12vw;
        padding: 3vw 0 !important;
        text-indent: 2rem;
        background: var(--bs-body-bg);
    }

    .form-control,
    .form-control::placeholder {
        font-size: 15px !important;
    }
}