.header-login-page {
    color: red;
    .header--inner {
        padding-top: 62px;
        display: flex;
        align-self: center;
        justify-content: center;
        @include mq(md, max) {
            padding-top: 30px;
        }
        .logo-img {
            max-width: 294px;
            @include mq(md, max) {
                max-width: 150px;
            }
        }
    }
}
.login-page,
.register-page {
    &.page-content {
        padding-top: 40px;
        padding-bottom: 40px;
        @include mq(md, max) {
            padding-top: 30px;
            padding-bottom: 30px;
        }
    }
    .form-content {
        max-width: 600px;
    }
}
.form-card {
    border: 1px solid #CBE7EB;
    background: #FFF;
    box-shadow: 0 4px 25px 0 rgba(203, 231, 235, 0.25);
    max-width: 888px;
    min-height: 650px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 30px;
    @include mq(md, max) {
        min-height: 500px;
        padding: 30px 20px;
    }
}
.form-content {
    max-width: 670px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    .btn-box {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 24px;
        &.one-btn {
            justify-items: center;
        }
        @include mq(md, max) {
            justify-items: center;
        }
        .main-btn {
            font-family: $font-primary-bold;
            min-height: 48px;
            max-width: 300px;
            @include mq(md, max) {
                min-height: 42px;
                min-width: 100%;
            }
        }
    }

    .form-content__title {
        margin-bottom: 58px;
        text-transform: uppercase;
        font-size: 32px;
        font-family: $font-primary-bold;
        @include mq(md, max) {
            font-size: 24px;
            margin-bottom: 30px;
        }
    }
    .form-content__subtitle {
        font-family: $font-primary-bold;
        text-transform: uppercase;
        font-size: 22px;
        color: #2D2D2D;
        margin-bottom: 32px;
        @include mq(md, max) {
            font-size: 20px;
            margin-bottom: 24px;
        }
    }
    .form-group {
        margin-bottom: 24px;
        .form-input {
            width: 100%;
            border-radius: 4px;
            border: 1px solid #CBE7EB;
            color: $color-primary;
            background-color: #FFF;
            font-family: $font-primary-bold;
            min-height: 48px;
            padding: 0 16px;
            font-size: 16px;
            @include mq(md, max) {
                min-height: 42px;
            }
            @include placeholder {
                font-size: 16px;
            }
        }
        .password-input-group {
            position: relative;
            .eyeImg {
                cursor: pointer;
                position: absolute;
                top: 0;
                width: 24px;
                height: 24px;
                right: 16px;
                bottom: 0;
                margin: auto 0;
            }
            .form-input {
                &.form-input-password {
                    padding-right: 50px;
                }
            }
        }
        .form-label {
            margin-bottom: 8px;
            color: $color-primary--light;
            font-size: 16px;
            font-family: $font-primary-bold;
        }
    }
    .check-pass-box {
        display: flex;
        margin-bottom: 24px;
        .check-pass-link {
            font-family: $font-primary-bold;
            margin-left: auto;
            color: #636363;
            text-decoration: underline;
            font-size: 14px;
        }
    }
    .custom-checkbox {
        font-family: $font-primary;
        font-size: 14px;
        input {
            display: none;
            &:checked ~ label::after {
                background-image: url("/images/main/vector-icons/check-pass.svg");
            }
        }
        .checkbox-label {
            padding-left: 28px;
            position: relative;
            cursor: pointer;
            &::after {
                content: '';
                position: absolute;
                background-size: 16px;
                background-position: center;
                background-repeat: no-repeat;
                top: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                width: 16px;
                height: 16px;
                border: 1px solid #6B7678;
                border-radius: 2px;
                cursor: pointer;
            }
        }
    }
    .textarea-form-box {
        padding-top: 30px;
        .form-input {
            &.form-textarea {
                padding-top: 16px;
                padding-bottom: 16px;
                min-height: 150px;
            }
        }
    }
}
.reset-password-page {
    .form-card {
        min-height: 300px;
    }
}