@font-face {
    font-family: 'Manrope';
    src: url(../stylesheet/fonts/Manrope-Regular.ttf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url(../stylesheet/fonts/Manrope-Medium.ttf);
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url(../stylesheet/fonts/Manrope-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url(../stylesheet/fonts/Manrope-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}

:root {
    --gradient: linear-gradient(90deg, #1B5DC5 0%, #6422C5 100%);
    --orange: #F18F3F;
    --light-orange: #F18F3F80;
    --white: #ffffff;
    --blue: #3480F3;
    --blueF: #2A69C8;
    --black: #282828;
    --black2: #000000;
    --black3: #454545;
    --grey: #A6A6A6;
    --grey2: #919191;
    --grey3: #d9d9d9;
    --grey4: #d4d4d4;
    --grey5: #929292;
    --grey6: #d8d8d8;
    --light-grey: #E3E3E3;
    --light-grey2: #f1f1f1;
    --light-grey3: #fafafa;
    --dark-grey: #595959;
    --dark-grey2: #333333;
    --red: #F13F3F;
    --yellow: #FFD913;
    --yellowF: #E9C712;
    --light-purple: #8838DC;
    --green: #4ADD85;
    --border-radius: 45px;
}

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

html,
body {
    height: 100%;
}

body {
    font-family: 'Manrope';
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    padding: 1rem;
}

h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 43.71px;
}

h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 38.25px;
}

h3 {
    font-size: 24px;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
}

.textLimit2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    height: 60px;
}

span.xmark {
    position: relative;
    height: 18.99px;
    width: 17.97px;

    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: url(../image/icons/svg/xmark.svg);
        background-repeat: no-repeat;
        width: 17.97px;
        height: 18.99px;
    }
}

.form-control:focus {
    box-shadow: none;
}

.form-select:focus {
    box-shadow: none;
}
.form-floating label::after {
    background-color: transparent !important;
}
/* Buttons */
.btn {
    border-radius: var(--border-radius);
    border: none;
    transition: .5s ease-in-out;
}

button, a[type="button"] {
    font-size: 14px;
    line-height: 19.12px;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius);
}

.btn-close {
    background: var(--light-grey2);
    border-radius: 100%;
    width: 46px;
    height: 46px;
    transition: .5s ease-in-out;
    background-image: url(../image/icons/svg/xmark.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;

    &:focus {
        background-color: var(--grey4);
    }

    &:hover {
        background-color: var(--grey4);
    }
}

.btnYellow {
    color: var(--black);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    padding-block: 14px;
    background-color: var(--yellow);
    cursor: pointer;
    &:focus {
        background-color: var(--yellowF);
    }

    &:hover {
        background-color: var(--yellowF);
        color: var(--black2);
    }
    &:disabled {
        color: var(--black);
        background-color: var(--yellow);
    }
}

.btnBlue {
    background-color: var(--blue);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--white);
    padding-block: 14px;

    &:hover {
        background-color: var(--blueF);
        color: var(--white);
    }

    &:focus {
        background-color: var(--blueF);
        color: var(--white);
    }

    &.disabled {
        color: var(--white);
        background-color: var(--grey6);
    }
}

.btnGrey {
    background-color: var(--grey);
    color: var(--dark-grey);
    font-size: 24px;
    line-height: 28px;
    padding-block: 18.5px;

    &:hover {
        background-color: var(--grey5);
        color: var(--white);
    }

    &:focus {
        color: var(--white);
    }

    &.active {
        background-color: var(--grey5);
        color: var(--white);
    }
}

.btnDateAdded {
    margin-bottom: 36px;
    width: 100%;
    display: block;
    background-color: var(--light-grey);
    color: var(--dark-grey);
    font-weight: 600;
    line-height: normal;
    padding-block: 11.64px;

    & span {
        position: relative;
        padding-left: 30px;

        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-size: 100%;
            background-image: url(../image/icons/svg/date.svg);
        }
    }
}

/* End buttons */
/* Icons */
i {
    position: relative;
    width: 100%;
    height: 100%;
    &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}
i.close::before {
    background-image: url(../image/icons/svg/xmark.svg);
    width: 15px;
    height: 15px;
}
/* End icons */
/* Colors */
.colorBlue {
    color: var(--blue);
}
/* end */
/* Alerts */
.alert {
    border-radius: var(--border-radius);
    padding: 11px 29px;
    display: flex;
    gap: 4px;
    align-items: center;
    color: var(--black2);
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    background: var(--white);
    width: 1296px;

    &.alert-success {
        border: 1px solid var(--green);
    }

    &.alert-danger {
        border: 1px solid var(--red);
    }

    & a:nth-child(2) {
        color: var(--blue);
    }

    & .btn-close {
        display: block;
        margin-left: auto;
        width: 13px;
        height: 13px;
        background-color: transparent;
    }
}
& .form-feedback {
    font-weight: 600;
    color: var(--dark-grey) !important;
    line-height: 2;
    border-radius: var(--border-radius);
    padding: 8px 32px;
    margin-bottom: 16px;
    &.text-success {
        border: 1px solid var(--green);
        & a {
            color: var(--blue);
        }
    }
    &.text-danger {
        border: 1px solid var(--red);
    }
}
.form-floating-city {
    position: relative;
    & .autocomplete-suggestions {
        position: absolute;
        padding-inline: 32px;
        border-top: none;
        z-index: 1000;
        left: 0;
        right: 0;
        background: var(--white);
        max-height: 160px;
        overflow-y: auto;
        display: none;
        border-radius: var(--border-radius);
        box-shadow: 0px 4px 8px 0px #00000026;
        & .autocomplete-suggestion {
            padding-block: 16px;
            cursor: pointer;
            border-bottom: 1px solid var(--grey6);
        }
    }
}
/* End Alerts */
/* Form */
select.form-select:disabled {
    background-color: var(--grey3);
}

.formBorder {
    input.form-control {
        border-radius: var(--border-radius);
    }
}

.floatingSimple {
    & input[type="text"], select, input[type="email"], input[type="tel"] {
        padding-inline: 0;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--grey);
    }

    & label {
        padding-inline: 0;
    }
}

.form-check-input:focus {
    box-shadow: none;
}

select.form-select {
    border-radius: var(--border-radius);
    padding: 16px 32px;
    border: 1px solid var(--grey3);
    color: var(--black2);
    font-size: 18px;
    line-height: 28px;
}

input[type="checkbox"] {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid var(--dark-grey);
    margin-top: 0;

    &:checked {
        background-color: transparent;
        border-color: var(--dark-grey);
        background-image: url(../image/icons/svg/checkmark.svg);
        background-size: 80%;
    }
}

/* End Form */
#content, #column-left {
    padding-bottom: 24px;
}

.accordion-button:focus {
    box-shadow: none;
}

/* Header */
.top {
    background: var(--gradient);
    padding-block: 20.5px;
}

.navbar {
    padding-block: 21px;

    & .logo {
        margin-right: 3.813rem;

        & a {
            margin-right: 0;

            & span {
                margin-inline: .75rem;
                font-size: .75rem;
                color: var(--dark-grey);
            }
        }
    }

    & ul.navbar-nav {
        font-size: .875rem;
        color: var(--dark-grey);
        gap: 1rem;

        & .nav-link {
            padding-block: 0;
        }
    }

    & .headerBtnBlock {
        display: flex;
        align-items: center;
        gap: 24px;

        & button.btnLogin, a.btnCart, a.btnOrder, a.btnLot, button.btnAccount, a.btnAccount {
            display: block;
            font-size: 16px;
            line-height: 16.39px;
            padding-top: 23.88px;
            position: relative;
            background: inherit;
            color: var(--black2);
            white-space: nowrap;
            text-decoration: none;
            &::before {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 0;
                background-repeat: no-repeat;
                background-size: 100%;
                width: 15.09px;
                height: 17.88px;
            }
        }

        & button.btnAccount, a.btnAccount {
            &::before {
                background-image: url(../image/icons/svg/user.svg);
            }
        }

        & a.btnOrder {
            &::before {
                background-image: url(../image/icons/svg/order.svg);
            }
        }

        & a.btnLot {
            &::before {
                background-image: url(../image/icons/svg/lot_new.svg);
            }
        }

        & .loginItemNavMenu {
            & button.btnLogin {
                &::before {
                    background-image: url(../image/icons/svg/login.svg);
                }
            }

            & a.btnAccount {
                &::before {
                    background-image: url(../image/icons/svg/login.svg);
                }
            }
        }

        & .cartBox {
            & a.btnCart {
                font-weight: 400;
                position: relative;

                &::before {
                    background-image: url(../image/icons/svg/cart.svg);
                }

                &.full::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 20px;
                    width: 9px;
                    height: 9px;
                    background-color: var(--red);
                    border-radius: var(--border-radius);
                }
            }
        }
    }
}

.menuBox {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 23px;
    & .btnCatalog {
        padding: 11px 49.5px;
        font-weight: 700;
        font-size: 16px;
        line-height: initial;
    }
}

.searchBox {
    position: relative;
    width: 100%;
    & input {
        border-radius: var(--border-radius);
        border: 2px solid var(--yellow);
        padding: 18.33px 32px;
        font-size: .875rem;
        color: var(--black2);
        line-height: 19.12px;
    }

    & .btnSearch {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        padding: 11px 49.5px;
        margin-right: 9.58px;
        font-weight: 700;
        font-size: 16px;
    }
}

/* End Header */
/* Banner */
.swiperSlaider {
    & .swiper-container {
        & .swiper-wrapper {
            & .swiper-slide {
                border-radius: var(--border-radius);

                & .slaiderContent {
                    width: 100%;
                    height: 463px;
                    position: relative;

                    & .bannerContent {
                        margin-left: 93px;
                        color: var(--white);
                        width: max-content;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);

                        & h1 {
                            font-size: 32px;
                            font-weight: 600;
                            line-height: normal;
                            margin-bottom: 1px;
                            color: var(--black2);
                        }

                        & p {
                            font-size: 18px;
                            line-height: normal;
                            color: var(--black2);
                        }

                        & a.btnBanner {
                            padding: 13.5px 43.5px;
                            margin-top: 8px;
                        }
                    }

                    & img {
                        display: block;
                        margin-left: auto;
                    }
                }
            }
        }
    }
}

/* End Banner */
/* Swiper */
.swiper {
    width: 100%;
    height: 100%;

    & .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    & .swiper-button-next, .swiper-button-prev {
        width: 46px;
        height: 46.21px;
        background-color: var(--grey3);
        border-radius: 50%;

        &::after {
            content: '';
            position: absolute;
            width: 20.36px;
            height: 11.46px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }

    & .swiper-button-next::after {
        background-image: url(../image/icons/svg/chevron.next.svg);
    }

    & .swiper-button-prev::after {
        background-image: url(../image/icons/svg/chevron.prev.svg);
    }
}

/* End Swiper */
/* ProductSlaider */
.productSlaider {
    margin-top: 62px;
    padding-bottom: 48px;
    margin-bottom: 48px;

    & .productHeader {
        display: grid;
        width: 25%;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 32px;
        row-gap: 24px;
        align-items: center;

        & h1 {
            font-size: 48px;
            font-weight: 600;
            line-height: 65.57px;
            margin-bottom: 0;
            white-space: nowrap;
        }

        & a {
            white-space: nowrap;

            &.catalogLink {
                position: relative;
                height: 36px;
                width: 36px;
                border: 1px solid var(--blue);
                border-radius: 50%;

                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 12px;
                    height: 20px;
                    transform: translate(-50%, -50%);
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-image: url(../image/icons/svg/chevron.default.svg);
                }
            }
        }

        & .btnFilter {
            white-space: nowrap;
            font-weight: 700;
            line-height: 21.86px;
            text-align: center;
            padding-block: 12px;
            background-color: var(--light-grey);
            color: var(--grey);
            padding-inline: 16px;

            &.active {
                color: var(--white);
                background-color: var(--black);
            }
        }
    }

    & .productSwiper {
        margin-top: 24px;
        & .swiperWrapper {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            column-gap: 22px;
            row-gap: 36px;
            & .swiperSlide {
                width: calc((100% - 22px*4)/5);
            }
        }
        /* & .swiper-slide {
            width: 241px;
            &:nth-child(5) {
                width: 167.25px;
            }
        } */

        & .swiper-button-prev {
            left: 0;
        }

        & .swiper-button-next {
            right: 0;
        }

        & .product-thumb {
            width: 241px;
            margin-inline: auto;
            box-sizing: border-box;
            padding-top: 33px;

            & .image {
                width: 100%;
                height: 151px;
                margin-bottom: 16px;
                padding: 4px;

                & img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: contain;
                }
            }

            & .caption {
                & .topCaprtion {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    & p:first-child {
                        color: var(--grey);
                        line-height: 28px;
                        margin-bottom: 0;
                    }

                    & .timer {
                        display: flex;
                        align-items: center;
                        color: var(--green);
                        padding-left: 27px;
                        position: relative;

                        &::before {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                            width: 17px;
                            height: 17px;
                            background-repeat: no-repeat;
                            background-size: 100%;
                            background-image: url(../image/icons/svg/clock.svg);
                        }
                    }

                    & p:last-child {
                        line-height: 21.86px;
                        margin-bottom: 0;

                        & span {
                            position: relative;


                        }
                    }
                }

                & h4 a {
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 28px;
                    margin-bottom: 1rem;
                }

                p.price {
                    font-size: 28px;
                    font-weight: 600;
                    line-height: 28px;

                    & span {
                        display: block;
                        font-size: 16px;
                        font-weight: 400;
                        color: var(--grey);
                        margin-bottom: 2px;
                    }
                }
            }

            & button {
                line-height: 21.86px;
                width: 182.28px;
            }
        }

        & .hide {
            opacity: 0;
            visibility: hidden;
            display: none;
        }
    }
}
.catalogLink_seeAll {
    display: block;
    margin-inline: auto;
    width: max-content;
    margin-top: 32px;
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 12px 95.5px;
    border-radius: var(--border-radius);
}
/* End ProductSlaider */
/* BgBlock */
.bgBlock {
    margin-top: 27px;
    padding-top: 47px;
    padding-bottom: 34.22px;
    padding-inline: 93px;
    border-radius: var(--border-radius);
    /* background-color: var(--light-purple); */
    background-image: url(../image/bg/banner2.png);

    color: var(--white);
    position: relative;

    & h3 {
        text-align: right;
        line-height: 22px;
        margin-bottom: 40px;
        color: var(--black2);
        margin-left: auto;
    }

    & a {
        display: block;
        width: max-content;
        margin-left: auto;
        text-align: right;
        font-size: 14px;
        font-weight: 700;
        line-height: 19.12px;
        padding-block: 12.39px;
        padding-inline: 41.07px;
        background-color: var(--black2);
    }

    /* &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        width: 100%;
        max-width: 823.2px;
        background-image: url(../image/bg/banner2.png);
        background-repeat: no-repeat;
    } */
}

/* End BgBlock */
/* Modal */
.modal#loginModal {
    & .modal-content {
        position: relative;
        background-color: var(--light-grey2);
        border-radius: var(--border-radius);

        & button.btn-close {
            position: absolute;
            top: 0;
            right: -66px;
            color: var(--dark-grey);
            opacity: 1;
        }

        & .modal-body {
            padding-block: 69.5px;
            padding-inline: 48.5px;

            & img {
                display: block;
                margin-inline: auto;
                margin-bottom: 38px;
            }

            & .modalBtnChoice {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 32px;
                margin-bottom: 32px;

                & button {
                    width: calc(50% - 16px);
                    background: var(--light-grey);
                    color: var(--grey);
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 21.86px;
                    padding-block: 14.12px;

                    &.active {
                        background: var(--blue);
                        color: var(--white);
                    }
                }
            }

            & p.textMessage {
                text-align: center;
                color: var(--dark-grey);
                font-size: 20px;
                line-height: 27.32px;
            }

            & input {
                border: 2px solid var(--grey2);
            }

            & a.switch {
                display: block;
                text-align: center;
                margin-top: 2px;
                text-decoration: underline;
                color: var(--blue);
                line-height: 28px;
            }

            .btnSubmit {
                width: 100%;
                border-radius: var(--border-radius);
                background-color: var(--blue);
                color: var(--white);
                margin-top: 32px;
                border: none;
                padding-block: 18.5px;
                font-size: 24px;
                line-height: 28px;
            }
        }
    }
}
& .bidBlock {
    & h3 {
        color: var(--grey);
        margin-bottom: 16px;
        font-weight: 500;
    }
}
& table.tableBid {
    --bs-table-bg: transparent;
    border-top:  1px solid var(--grey6);
    padding-block: 16px;
    & tr.rowBlue td {
        color: var(--blue);
    }
    & tr td:last-child {
        text-align: right;
    }
}
.modalBet {
    --bs-modal-width: 896px;
    & .modal-content {
        border-radius: var(--border-radius);
        background-color: var(--light-grey3);
        padding: 36px 32px;
        & .modal-header {
            border-bottom: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            & h3 {
                font-size: 25px;
                line-height: 28px;
                font-weight: 600;
                text-align: center;
                margin-inline: auto;
            }
            & button {
                position: absolute;
                top: 7px;
                right: -35.01px;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                padding: 0;
                background-color: var(--light-grey2);
                opacity: 1;
            }
        }
    }

    & .historyTable {
        & h4 {
            border-bottom: 1px solid var(--grey3);
            padding-bottom: 24px;
            color: var(--grey);
            font-size: 24px;
            font-weight: 500;
            text-align: left;
        }

        & table {
            margin-top: 16px;
            font-size: 24px;
            line-height: 28px;
            --bs-table-color: var(--dark-grey);

            & th {
                font-weight: 400;
                text-align: center;
            }

            & tr th:last-child {
                text-align: right;
            }
        }
    }

    & .modal-body {
        & .btnCart {
            margin-inline: auto;
            width: 390.6px;
            display: block;
            margin-top: 16px;
            font-size: 24px;
            line-height: 28px;
            font-weight: 400;
            padding-block: 11px;
        }
        & .buyListing {
            display: block;
            margin-inline: auto;
            padding: 11px 117px;
        }
        & .form-check {
            margin-inline: 33px;
            margin-bottom: 37px;
            & input[type="checkbox"] {
                margin-right: 12px;
            }
        }
        & select {
            color: var(--grey);
        }
    }
    & .btnOfferta {
        font-family: 'Manrope', sans-serif;
        text-decoration: underline;
        color: var(--blue);
    }
    .offertaBlock {
        display: none;
        position: absolute;
        z-index: 99999;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 1186px;
        overflow-y: scroll;
        height: max-content;
        background: var(--white);
        padding: 32px 36px;
        height: 896px;
        transition: .5s ease-in-out;
        &.show {
            display: block;

        }
    }
}

/* End Modal */
/* Footer */
footer {
    padding-block: 28px;
    background-color: var(--dark-grey2);
    color: var(--white);

    & .footerBlock {
        margin-bottom: 44px;
        display: flex;
        justify-content: space-between;

        & .footerBox {
            & img {
                width: 100%;
                max-width: 112.32px;
                margin-bottom: 16px;
            }

            & h5 {
                font-size: 36px;
                font-weight: 600;
                line-height: 49.18px;
                padding-bottom: 12px;
                display: block;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 28px;
                    height: 1px;
                    background-color: var(--white);
                }
            }

            & ul {
                margin-top: 20px;
                margin-bottom: 0;
                font-size: 18px;
                line-height: 28px;

                & li:not(:last-child) {
                    margin-bottom: 12px;
                }
            }

            & p, a {
                font-size: 12px;
                line-height: 16.39px;
                margin-bottom: 14px;
            }

            & a {
                text-decoration: underline;
                display: block;
            }

            & .footerIconBlock {
                margin-top: 31px;

                & h6 {
                    font-size: 24px;
                    line-height: 32.78px;
                    font-weight: 600;
                    margin-bottom: 0;

                    &:not(:last-child) {
                        margin-bottom: 24px;
                    }
                }
            }
        }
    }
}

/* End Footer */
/* Breadcrumbs */
ol.breadcrumb {
    margin-bottom: 18px;

    & li a, li, li.active {
        font-size: 16px;
        line-height: 21.86px;
        color: var(--dark-grey);
    }
}

/* End Breadcrumbs */
/* Forms */
& form.formBet {
    padding-top: 24px;
    & select, input:not(input[type=checkbox]) {
        border-radius: var(--border-radius);
        border: 1px solid var(--grey3);
        font-size: 18px;
        line-height: 28px;
        &:focus {
            border: 1px solid var(--grey);
            color: var(--black2);
        }
    }

    & select:not(:last-child) {
        margin-bottom: 16px;
    }
    & select.form-select:last-child {
        margin-bottom: 36px;
    }

    & .form-check {
        margin-top: 36px;
        font-size: 18px;
        line-height: 28px;
        width: max-content;
    }
    & .input-group input {
        padding: 23px 32px;
    }

    & .betBtnBlock {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 24px;
        & button {
            line-height: 21.86px;
            padding: 11px 12.5px;
            background: #3480F31A;
            color: var(--black2);
            font-size: 18px;
            line-height: 24.59px;
        }
    }

    & button[type="submit"] {
        margin-inline: auto;
        width: 390.6px;
        display: block;
        margin-top: 36px;
        font-size: 24px;
        line-height: 28px;
        font-weight: 400;
        padding-block: 11px;
    }

    & p.textDanger {
        font-size: 12px;
        font-weight: 500;
        line-height: 16.38px;
        margin-top: 16px;
        margin-bottom: 0;
        color: var(--grey);
        text-align: center;
    }
}

/* End Forms */
/* Product */
#product-product {
    & h1 {
        font-size: 28px;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 26px;
    }

    & .swiper.productImageSwiper {
        max-width: 597px;
        margin-inline: auto;
        height: 350px;
        margin-bottom: 36px;
        & .swiper-pagination {
            & span.swiper-pagination-bullet {
                width: 62.95px;
                height: 6px;
                border-radius: var(--border-radius);
                background-color: var(--grey);

                &.swiper-pagination-bullet-active {
                    background-color: var(--grey2);
                }
            }
        }
    }
    .tableInfoProduct {
        margin-bottom: 36px;
        & tr th {
            font-size: 18px;
            font-weight: 500;
            color: var(--dark-grey);
        }
        & i {
            width: 20px;
            height: 20px;
            position: relative;
            display: block;
            &::before {
                content: '';
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    background-repeat: no-repeat;
                    background-size: 100%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
        }
        & i.startPrice::before {
            background-image: url(../image/icons/svg/startprice.svg);
        }

        & i.minStep::before {
            background-image: url(../image/icons/svg/minstep.svg);
        }

        & i.dateStart::before {
            background-image: url(../image/icons/svg/datestart.svg);
        }

        & i.lot::before {
            background-image: url(../image/icons/svg/lot.svg);
        }
        & i.count::before {
            background-image: url(../image/icons/svg/solar_calendar.svg);
        }
    }
    & .descriptionBlock {
        margin-bottom: 36px;
        & h4 {
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 8px;
        }
    }
    & .tab-content {
        & .tabBlock {
            padding-block: 24px;

        }
    }

    & .nav-tabs#productTab {
        margin-top: 24px;
        border-bottom: none;
        gap: 32px;

        & li {
            & button {
                border: none;
                font-size: 14px;
                font-weight: 700;
                line-height: 19.12px;
                color: var(--grey);
                background-color: var(--light-grey);
                border-radius: var(--border-radius);
                padding-block: 14.12px;
                width: 177px;

                &.active {
                    color: var(--white);
                    background-color: var(--black2);
                }
            }
        }
    }

    & .productControls {
        margin-bottom: 36px;
        & .productBet {
            border: 1px solid var(--grey3);
            border-radius: var(--border-radius);
            padding: 36px 119.5px;
            & select {
                padding-block: 8px;
            }
            & input[type="text"] {
                padding: 8px 32px;
            }
            & .priceBlock {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 16.5px;

                & h1 {
                    color: var(--black2);
                    font-size: 36px;
                    line-height: 28px;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    gap: 25px;
                    margin-bottom: 0;
                    margin-inline: auto;
                    & span {
                        font-size: 16px;
                        color: var(--grey);
                        font-weight: 400;
                    }
                }

                & .timer {
                    display: flex;
                    align-items: center;
                    color: var(--green);
                    padding-left: 27px;
                    position: relative;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 0;
                        transform: translateY(-50%);
                        width: 17px;
                        height: 17px;
                        background-repeat: no-repeat;
                        background-size: 100%;
                        background-image: url(../image/icons/svg/clock.svg);
                    }
                }
            }

            & button.btnBet, button.btnCart {
                margin-top: 24px;
                width: 100%;
                font-size: 18px;
                font-weight: 500;
                line-height: 28px;
                padding-block: 11px;

                & span {
                    display: block;
                    padding-right: 25.9px;
                    position: relative;
                    width: max-content;
                    margin-inline: auto;

                    &::after {
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 15.9px;
                        height: 15.91px;
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }
            }
            & button.btnBet span::after {
                background-image: url(../image/icons/svg/bet.svg);

            }
            & button.btnCart span::after {
                background-image: url(../image/icons/svg/cart-white.svg);

            }
        }

        & p.textAttention {
            background-color: var(--light-orange);
            text-align: center;
            font-size: 18px;
            line-height: 28px;
            padding-block: 11px;
            border-radius: var(--border-radius);
            margin-block: 24px;

            & span {
                position: relative;
                padding-left: 24px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 20px;
                    height: 20px;
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-image: url(../image/icons/svg/attention.svg);
                }
            }
        }

        & button.btnLogin {
            display: block;
            margin-inline: auto;
            background: none;
            color: var(--blue);
            text-decoration: underline;
            font-size: 18px;
            line-height: 28px;
        }

        & button.btnCart {
            margin-top: 24px;
            width: 100%;
            font-size: 18px;
            font-weight: 500;
            line-height: 28px;
            padding-block: 11px;
        }

        & .historyTable {
            margin-top: 36px;
            margin-bottom: 52px;

            & h4 {
                font-size: 18px;
                line-height: 28px;
                font-weight: 600;
                margin-bottom: 18.43px;
            }

            & table {
                & th {
                    font-size: 18px;
                    font-weight: 400;
                    line-height: 28px;
                }

                & tr:nth-child(1) {
                    & th:last-child {
                        color: var(--blue);
                    }
                }

                & tr th:last-child {
                    font-weight: 500;
                }
            }
        }
    }
}

/* End Product */
/* Category */
#product-category {
    margin-bottom: 80px;

    & h1 {
        font-size: 28px;
        font-weight: 700;
        line-height: 38.25px;
        margin-bottom: 21px;
    }
}

.product-layout, .tableProductList {
    display: flex;
    align-items: center;
    gap: 21.27px;
    padding-bottom: 24px;

    &:not(:last-child) {
        border-bottom: 1px solid var(--grey3);
        margin-bottom: 24px;
    }

    & .image {
        width: 171.1px;
        height: 151px;
        border: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;

        & img {
            object-fit: contain;
            display: block;
            margin-inline: auto;
            width: 100%;
            height: auto;
            max-height: 150px;
        }
    }

    & .caption {
        width: 554.12px;

        & p.model {
            line-height: 28px;
            color: var(--grey);
            margin-bottom: 2px;
        }

        & h4 {
            font-size: 24px;
            line-height: 28px;
            margin-bottom: 36px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
        }

        & .productLotInfo {
            display: flex;
            align-items: center;
            gap: 60px;

            & .timer {
                display: flex;
                align-items: center;
                color: var(--green);
                padding-left: 27px;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 17px;
                    height: 17px;
                    background-repeat: no-repeat;
                    background-size: 100%;
                    background-image: url(../image/icons/svg/clock.svg);
                }
            }

            & p {
                display: block;
                padding-left: 25.09px;
                position: relative;
                line-height: 21.86px;
                margin-bottom: 0;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                &.productSaler::before {
                    background-image: url(../image/icons/svg/user.svg);
                    width: 15.09px;
                    height: 17.88px;
                }

                &.qbet {
                    color: var(--blue);
                    text-decoration: underline;

                    &::before {
                        background-image: url(../image/icons/svg/mdi_court-hammer.svg);
                        width: 19px;
                        height: 19px;
                    }
                }

                &.textListing::before {
                    background-image: url(../image/icons/svg/listing.svg);
                    width: 15.9px;
                    height: 13.01px;
                }
            }
        }
    }

    & .productBtnBlock {
        text-align: right;
        margin-left: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 143px;

        & p.lotPrice {
            line-height: 28px;
            color: var(--grey);
            margin-bottom: 2px;
        }

        & p.price {
            font-size: 28px;
            line-height: 28px;
            font-weight: 600;
            margin-bottom: 24px;

            &.colorPrice {
                color: var(--black2);
            }
        }

        & button {
            font-weight: 700;
            line-height: 21.86px;
            padding-block: 14px;
            width: 182px;

            &.button-remove {
                background: none;
                border: none;
                position: relative;
                width: 20.5px;
                height: 22px;
                margin-top: auto;
                margin-left: auto;

                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-image: url(../image/icons/svg/remove.svg);
                    width: 20.5px;
                    height: 22px;
                }
            }
        }
    }
}

& .paginationBlock {
    margin-top: 56px;

    & ul.pagination {
        margin-inline: auto;
        width: max-content;
        gap: 12px;

        & li {
            & a, span {
                border: 1px solid var(--grey);
                font-size: 16px;
                line-height: 21.86px;
                color: var(--grey);
                width: 48px;
                height: 48px;
                display: block;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &.active span {
                color: var(--blue);
                border: 2px solid var(--blue);
            }
        }
    }
}

/* End Category */
/* Cart */
#quickcheckout h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 24px;

    &.headingTitle {
        margin-bottom: 36px;
    }
}

& .paymentSwitchBlock {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 36px;

    & .btnPaySwitch {
        background: none;
        border: 1px solid var(--grey3);
        padding-block: 7.56px;
        width: 293px;

        & label {
            font-weight: 500;
            line-height: 21.86px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;

            & span {
                position: relative;
                width: 45px;
                height: 45px;

                &::before {
                    content: '';
                    position: absolute;
                    background-size: 100%;
                    background-repeat: no-repeat;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

        &#btn_bank_transfer {
            & label span::before {
                background-image: url(../image/icons/svg/holder.svg);
                width: 39px;
                height: 31px;
            }
        }
    }
}

.holderBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 36px;

    & p {
        margin-bottom: 0;
        font-weight: 500;
    }

    & a {
        color: var(--blue);
        text-decoration: underline;
    }
}

#payment-address {
    #payment-new {
        margin-bottom: 36px;

        & .form-floating {
            & input {
                border: none;
                border-radius: inherit;
                border-bottom: 2px solid var(--grey);
                font-size: 18px;
                padding-inline: 0;
            }

            & label {
                padding-inline: 0;
            }
        }
    }

    #payment-existing {
        margin-bottom: 12px;
    }

    & .form-check {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        & input[name="payment_address"] {
            width: 25px;
            height: 25px;
            margin-top: 0;
            border: 1px solid var(--dark-grey);

            &:checked {
                background-color: var(--blue);
                background-image: none;
            }
        }

        & label {
            line-height: 28px;
            margin-top: 0;
        }
    }
}

.quickcheckout-content {
    border: none;
    padding: 0;
    margin-bottom: 0;
    overflow: inherit;

    & select.selectCounterparty {
        margin-bottom: 36px;
    }
}

.totalBlock {
    padding: 36px 17px;
    border: 1px solid var(--grey3);
    border-radius: var(--border-radius);
    height: max-content;

    & table {
        & tr th {
            width: 50%;
            font-size: 16px;
            font-weight: 400;

            &:last-child {
                text-align: right;
                color: var(--dark-grey);
            }
        }

        & tr:last-child th:last-child {
            color: var(--black2);
            font-size: 18px;
            font-weight: 700;
        }

        & tr:last-child th:first-child {
            font-weight: 500;
        }
    }
}

.formHeader {
    font-size: 28px;
    font-weight: 700;
    line-height: 38.25px;
    margin-bottom: 24px;
}

.terms {
    & .form-check {
        display: flex;
        align-items: center;

        & input[type="checkbox"] {
            margin-right: 12px;
        }
    }

    & button {
        display: block;
        margin-top: 24px;
        margin-inline: auto;
        width: 100%;
        border-radius: var(--border-radius);
        background-color: var(--blue);
        font-weight: 600;
        line-height: 28px;
        padding-block: 5.5px;
    }
}

.accordion#accordionProductsQuickcheckout {
    & .accordion-item {
        margin-bottom: 36px;
        border: none;
        transition: 0.5s ease-in-out;

        &.hidden {
            display: none;
        }

        & .headerAccordion {
            border-radius: var(--border-radius);
            background-color: var(--light-grey);
            padding-inline: 24px;
            display: flex;
            align-items: center;
            position: relative;

            & .accordion-header {
                margin-bottom: 0;
                width: -webkit-fill-available;

                & button {
                    background-color: transparent;
                    padding: 0;
                    font-size: 28px;
                    font-weight: 700;
                    line-height: normal;
                    color: var(--black2);
                    box-shadow: none;

                    &::after {
                        content: none;
                    }
                }
            }

            & input[type="checkbox"] {
                background-color: transparent;
                margin-right: 24px;
            }

            &::after {
                flex-shrink: 0;
                width: var(--bs-accordion-btn-icon-width);
                height: var(--bs-accordion-btn-icon-width);
                margin-left: auto;
                content: "";
                background-image: var(--bs-accordion-btn-icon);
                background-repeat: no-repeat;
                background-size: var(--bs-accordion-btn-icon-width);
                transition: var(--bs-accordion-btn-icon-transition);
            }
        }

        & .accordion-body {
            padding-inline: 0;
            padding-bottom: 0;
            margin-top: 19px;
            border-top: 1px solid var(--grey3);
            overflow: hidden;

            & .tableProductList {
                margin-bottom: 0;
                padding-bottom: 0;

                & tbody {
                    display: flex;
                    flex-direction: column;
                    gap: 19px;
                    width: 100%;
                }

                & tr {
                    border-style: none;
                    border-color: var(--white);

                    &.productTr {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 20px;
                    }
                }

                & tr td {
                    padding: 0;
                }

                & td.cart_status input {
                    margin-inline: 24px;
                }

                & .caption {
                    width: 445px;
                    margin-right: auto;
                }

                & .productBtnBlock {
                    width: 200px;

                    & .btnsQuickCheckout {
                        display: flex;
                        align-items: center;
                        gap: 24px;

                        & .input-group {
                            position: relative;

                            & button {
                                background-color: transparent;
                                width: 14px;
                                padding: 0;
                                color: var(--black2);
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                font-size: 14px;

                                &.button-update[data-type="decrease"] {
                                    left: 0;
                                    margin-left: 24px;
                                }

                                &.button-update[data-type="increase"] {
                                    right: 0;
                                    margin-right: 24px;
                                }
                            }

                            & input {
                                width: 174px;
                                background-color: var(--light-grey);
                                border-radius: var(--border-radius);
                                padding-inline: 24px;
                            }
                        }

                        & .button-remove {
                            margin-top: 0;
                        }
                    }
                }
            }
        }
    }
}

/* EndCart */
/* Account */
#account-account #content {
    & h2 {
        margin-bottom: 24px;
    }

    & .accountProfileMenu {
        margin-bottom: 24px;
        border-bottom: 1px solid var(--grey3);
        padding-bottom: 24px;

        & ul {
            gap: 32px;
            border-bottom: none;

            & li button {
                border-radius: var(--border-radius);
                font-weight: 700;
                line-height: 21.86px;
                border: none;
                width: 163px;
                padding-block: 12px;

                &:not(active) {
                    background-color: var(--light-grey);
                    color: var(--grey);
                }

                &.active {
                    background-color: var(--black);
                    color: var(--white);
                }

                &#address-tab {
                    width: max-content;
                }
            }
        }

        & .tab-content {
            padding-top: 24px;

            & .tab-pane#user-tab-pane {
                & .userInfo {
                    & .userNameInfo {
                        margin-bottom: 24px;
                    }

                    & .userNameInfo, .userEmailInfo {
                        display: flex;
                        align-items: center;
                        gap: 20px;

                        & p {
                            line-height: 28px;
                            margin-bottom: 0;
                        }

                        & p.name {
                            position: relative;
                            font-size: 24px;
                            line-height: 28px;
                            padding-top: 30px;

                            &::before {
                                content: 'ФИО';
                                position: absolute;
                                top: 0;
                                left: 0;
                                font-size: 16px;
                                color: var(--grey);
                            }
                        }

                        & a {
                            margin-top: auto;
                            color: var(--blue);
                            text-decoration: underline;
                        }

                        & p.admimistrator {
                            margin-top: auto;
                            padding-left: 25px;
                            color: var(--green);
                            position: relative;

                            &::before {
                                content: '';
                                position: absolute;
                                top: 50%;
                                transform: translateY(-50%);
                                left: 0;
                                width: 17px;
                                height: 17px;
                                background-repeat: no-repeat;
                                background-size: 100%;
                                background-image: url(../image/icons/svg/adm.svg);
                            }
                        }

                        & p.phone, p.email {
                            font-size: 24px;
                            line-height: 28px;
                            position: relative;
                            padding-top: 28px;
                        }

                        & p.email::before {
                            content: 'Партнер';
                            position: absolute;
                            top: 0;
                            left: 0;
                            line-height: 28px;
                            color: var(--grey);
                            font-size: 16px;
                        }

                        & p.phone::before {
                            content: 'Телефон';
                            position: absolute;
                            top: 0;
                            left: 0;
                            line-height: 28px;
                            color: var(--grey);
                            font-size: 16px;
                        }
                    }
                }
            }

            & .tab-pane#kontragent-tab-pane, .tab-pane#address-tab-pane {
                & a.addKontrAgent, a.addAddress {
                    background-color: var(--blue);
                    color: var(--white);
                    font-weight: 700;
                    line-height: 21.86px;
                    padding: 14px 34.5px;
                    border-radius: var(--border-radius);
                }

                & .balance, .operation {
                    padding: 32px;
                    border-radius: var(--border-radius);
                    border: 1px solid var(--grey3);

                    &:not(.operation) {
                        margin-bottom: 24px;
                    }

                    & h3 {
                        font-weight: 400;
                    }
                }

                & .kontragentList {
                    margin-top: 24px;

                    & .kontrAgentBlock {
                        display: flex;
                        align-items: center;
                        margin-bottom: 24px;
                        padding-inline: 24px;
                        padding-block: 35px;
                        border-bottom: 1px solid var(--grey3);

                        & .kontrAgentBtnInfo {
                            width: 300px;
                            display: flex;
                            align-items: end;
                            justify-content: center;
                            flex-direction: column;

                            & a.infoContrAgent {
                                font-size: 18px;
                                line-height: 28px;
                                color: var(--blue);
                                text-decoration: underline;
                            }

                            & button.removeContragent {
                                color: var(--red);
                                font-size: 18px;
                                line-height: 28px;
                                margin-bottom: 12px;
                                background-color: transparent;
                            }
                        }

                        & p {
                            margin-bottom: 0;

                            &.contrName {
                                font-size: 24px;
                                width: 250px;
                                text-align: left;
                            }

                            &.contrBalance {
                                margin-inline: auto;
                                line-height: 28px;
                                text-align: center;

                                & span {
                                    display: block;
                                    font-size: 24px;
                                    font-weight: 600;
                                    line-height: normal;
                                }
                            }
                        }

                        & span.status {
                            display: block;
                            position: relative;
                            width: 17px;
                            height: 17px;
                            margin-right: 10px;

                            &::before {
                                content: '';
                                position: absolute;
                                width: 17px;
                                height: 17px;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background-repeat: no-repeat;
                                background-size: 100%;
                            }

                            &.statusGood::before {
                                background-image: url(../image/icons/svg/status419.svg);
                            }
                        }

                        &.fiz {
                            border: 1px solid var(--grey3);
                            border-radius: var(--border-radius);
                        }
                    }
                }
            }

            & .tab-pane#address-tab-pane {
                & .addressList {
                    margin-top: 24px;

                    & .resultAddress {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        border-radius: var(--border-radius);
                        border: 1px solid var(--grey3);
                        padding: 12px 32px;
                        margin-bottom: 16px;

                        & p {
                            white-space: nowrap;
                            margin-bottom: 0;
                            margin-right: auto;
                        }

                        & a {
                            background: none;
                            border: none;
                            position: relative;
                            width: 20.5px;
                            height: 22px;

                            &::before {
                                content: '';
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background-size: 100%;
                                background-repeat: no-repeat;
                                width: 20.5px;
                                height: 22px;
                            }

                            &.btnDelete::before {
                                background-image: url(../image/icons/svg/remove.svg);
                            }

                            &.btnEdit::before {
                                background-image: url(../image/icons/svg/edit.svg);
                            }
                        }
                    }
                }
            }
        }
    }

    & .logoutBlock {
        & a.logout {
            display: block;
            margin-bottom: 12px;
            color: var(--red);
        }

        & h3 {
            font-weight: 500;
            margin-bottom: 24px;
        }
    }
}

#account-addcontragent {
    & .editFormKontrAgent {
        margin-top: 24px;
    }

    & .addAgent, .editFormKontrAgent {
        & input[type=submit] {
            display: block;
            margin-top: 36px;
            background-color: var(--blue);
            border: none;
            color: var(--white);
            font-size: 18px;
            line-height: 28px;
            padding-block: 11px;
            border-radius: var(--border-radius);
            width: 484px;
        }

        & .twiceFormBlock {
            display: flex;
            align-items: center;
            gap: 16px;

            & p.typeKontragent {
                font-size: 24px;
                line-height: 28px;
                margin-bottom: 0;

                & span {
                    display: block;
                    font-size: 16px;
                    color: var(--grey);
                }
            }

            & .form-floating {
                width: 50%;
            }

            & .contrAgentStatys {
                width: calc(50% - 16px);

                & p.textGood {
                    margin-bottom: 0;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    color: var(--green);
                    margin-left: auto;
                    width: max-content;

                    & span.status {
                        position: relative;
                        width: 17px;
                        height: 17px;

                        &::before {
                            content: '';
                            position: absolute;
                            width: 17px;
                            height: 17px;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            background-repeat: no-repeat;
                            background-size: 100%;
                        }

                        &.statusGood::before {
                            background-image: url(../image/icons/svg/status419.svg);
                        }
                    }
                }
            }
        }
    }
}

#account-address, #account-edit {
    & #content {
        /* & select {
            border-radius: var(--border-radius);
        } */

        & .buttons {
            margin-top: 24px;

            & button, a {
                border-radius: var(--border-radius);
                padding-block: 12px;
                width: 180px;
                font-weight: 500;
            }

            & a {
                background-color: var(--black2);
                color: var(--white);
                margin-right: 16px;
            }
        }
    }
}

/* End Account */
/* Account Login */
.blurBlock {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: #59595991;
    backdrop-filter: blur(50px);
    z-index: 9999;
}

.authBlock {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20vh;
}

.auth-container {
    perspective: 1000px;
    width: 100%;
    max-width: 533px;
    margin-inline: auto;
}

.auth-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.auth-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.auth-card.flipped {
    transform: rotateY(180deg);
}

.loginBox,
.registerBox {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 533px;
    margin-inline: auto;
    & img {
        display: block;
        margin-bottom: 38px;
    }

    & h1 {
        font-size: 48px;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 32px;
        color: var(--dark-grey);
    }

    & form {
        width: 100%;

        & .form-floating {
            margin-bottom: 32px;

            & input {
                border-radius: var(--border-radius);
                border: 2px solid var(--grey2);
            }
        }

        & .form-check {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 32px;
        }

        & input[type="submit"] {
            display: block;
            width: 100%;
            background-color: var(--blue);
            color: var(--white);
            font-size: 24px;
            line-height: 28px;
            padding-block: 18.5px;
            border: none;
            margin-bottom: 32px;
        }
    }

    & button {
        display: block;
        margin-inline: auto;
        color: var(--blue);
        font-size: 18px;
        font-weight: 500;
        text-decoration: underline;
        line-height: normal;
        background: transparent;
    }
}

.auth-side {
    position: absolute;
    /* width: 100%;
    height: 100%; */
    backface-visibility: hidden;
    background-color: var(--light-grey3);
    padding: 36px 48.5px;
}

.auth-front {
    z-index: 2;
    /* Лицевая сторона видна изначально */
}

.auth-back {
    transform: rotateY(180deg);
    /* Обратная сторона изначально скрыта */
}

/* Плавное появление/исчезновение элементов внутри */
.auth-side form {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.auth-card.flipping .auth-side form {
    opacity: 0.5;
}

/* Login Modal */
.modal-3d {
    perspective: 1500px;
    max-width: 533px;
}

.modal-3d-container {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    min-height: 655px;
    & button.btn-close {
        position: absolute;
        top: 0;
        right: -46px;
        background: var(--light-grey3);
        opacity: 1;
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.modal-3d-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center center;
}

.modal-3d-card.flipped {
    transform: rotateY(180deg);
}

.modal-3d-side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--border-radius);
    background: var(--light-grey3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 36px 48.5px;
    & .modal-header {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0;
        border-bottom: none;
    }
    @media (width <= 1600px) {
        & .modal-header {
            & img {
                margin-bottom: 20px;
            }
            & h1 {
                font-size: 36px;
                margin-bottom: 20px;
            }
        }
    }
    & .modal-body {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        position: initial;
        padding: 0;
        & .captchaBlock {
            width: max-content;
            margin-inline: auto;
            margin-bottom: 32px;
        }
        @media (width <= 1600px) {
            & .form-floating {
                margin-bottom: 20px;
            }
            & .captchaBlock {
                margin-bottom: 20px;
            }
            & input[type="submit"] {
                margin-bottom: 20px;
            }
        }
    }
    @media (width <= 1600px) {
        padding: 30px 40px;
    }
}

.modal-3d-front {
    transform: rotateY(0deg);
    z-index: 2;
    height: max-content;
    @media (width <= 1600px) {
        height: 541px;
    }
}

.modal-3d-back {
    transform: rotateY(180deg);
    height: max-content;
    @media (width <= 1600px) {
        height: 679px;
    }
}

.modal-3d-side .modal-body > * {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeInUp 0.6s forwards;
}

.modal-3d-side .modal-body > *:nth-child(1) { animation-delay: 0.1s; }
.modal-3d-side .modal-body > *:nth-child(2) { animation-delay: 0.2s; }
.modal-3d-side .modal-body > *:nth-child(3) { animation-delay: 0.3s; }
.modal-3d-side .modal-body > *:nth-child(4) { animation-delay: 0.4s; }
.modal-3d-side .modal-body > *:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-3d-card {
    position: relative;
}

.modal-3d-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, 
        rgba(0, 123, 255, 0.1) 0%, 
        rgba(108, 99, 255, 0.1) 25%, 
        rgba(255, 0, 128, 0.1) 50%, 
        rgba(0, 123, 255, 0.1) 75%, 
        rgba(108, 99, 255, 0.1) 100%);
    border-radius: 20px;
    filter: blur(20px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.6s ease;
}

.modal-3d-card.flipping::before {
    opacity: 0.7;
}
/* End acc Login */
/* Balance */
& .balance, .operation {
    padding: 32px;
    border-radius: var(--border-radius);
    border: 1px solid var(--grey3);

    &:not(.operation) {
        margin-bottom: 24px;
    }

    & h3 {
        font-weight: 400;
        margin-bottom: 24px;
    }

    & h3.textBalance {
        font-weight: 600;
    }

    & button.addBalance {
        margin-inline: auto;
        background-color: transparent;
        font-size: 20px;
        line-height: 28px;
        width: max-content;
        display: block;
        margin-top: 8px;
        padding-left: 37px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            width: 22.64px;
            height: 20px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            background-size: 100%;
            background-repeat: no-repeat;
            background-image: url(../image/icons/svg/addbalance.svg);
        }
    }
}

/* End Balance */
/* Information */
#information-information {
    & p {
        margin-bottom: 0;
        font-size: 18px;
        line-height: 24.59px;
    }

    & .textContent {
        margin-bottom: 24px;

        & p.textMail {
            font-weight: 700;

            & a {
                font-weight: 400;
                color: var(--blue);
                margin-left: 4px;
            }
        }
    }

    & .listContent {
        margin-bottom: 24px;

        & ul {
            font-size: 18px;
            line-height: 24.59px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

/* End info */
/* Newsletter */
.contentBottom {
    background-color: var(--black3);
    padding-block: 79px;

    & .letterBox {
        display: flex;
        align-items: center;
        gap: 135px;

        & .letterDescription {
            color: var(--white);
            padding-left: 164.27px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                background-repeat: no-repeat;
                background-size: 100%;
                width: 138.33px;
                height: 128px;
                background-image: url(../image/icons/svg/letter.svg);
            }
        }

        & .newsletter_module {
            & .form-footer .input-group {
                position: relative;
                width: 585px;

                & input {
                    background: transparent;
                    color: var(--white);
                    width: 100%;
                    border: 2px solid var(--yellow);
                    border-top-right-radius: var(--border-radius) !important;
                    border-bottom-right-radius: var(--border-radius) !important;
                    border-radius: var(--border-radius);
                    padding-block: 18.5px;

                    &::placeholder {
                        color: var(--white);
                        font-size: 14px;
                        line-height: 19.12px;
                        font-weight: 700;
                    }
                }

                & #button-subscribe {
                    position: absolute;
                    top: 50%;
                    right: 7px;
                    transform: translateY(-50%);
                    font-weight: 700;
                    line-height: 19.12px;
                    padding-block: 12.5px;
                    width: 171px;
                    border-radius: var(--border-radius);
                }
            }
        }
    }
}

/* End newsletter */
/* Contacts */
#information-contact {
    & .mapBlock {
        margin-bottom: 36px;
        margin-top: 16px;
    }

    & form {
        width: 100%;

        & input, textarea {
            width: 100%;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--grey);
            padding-inline: 0;
        }

        & .form-floating label {
            padding-inline: 0;
        }

        & textarea, .captchaBlock {
            margin-bottom: 24px;
        }

        & button {
            border-radius: var(--border-radius);
            padding: 16px 32px;
            font-size: 18px;
            line-height: 28px;
            background-color: var(--blue);
            border: none;
        }
    }
}

/* End Contacts */
#common-success, #error-not-found {
    height: 39.6cqh;

    & .btnContinue {
        border-radius: var(--border-radius);
        padding: 16px 32px;
        background: var(--blue);
        font-size: 18px;
        line-height: 28px;
        border: none;
        color: var(--white);
        margin-top: 24px;
        display: block;
        width: 484px;
        text-align: center;
    }
}

#error-not-found {
    height: 42.55cqh;
}

/* Filter */
.accordion#accordionFilter {
    width: 100%;

    & .accordion-item {
        border: none;
        margin-bottom: 16px;
        & .accordion-header {
            border-bottom: 1px solid var(--grey3);
            font-size: 20px;
            font-weight: 700;
            line-height: normal;

            & button {
                padding: 11px 9px;
            }

            & button:not(.collapsed) {
                background-color: inherit;
                color: var(--black2);
                box-shadow: none;
            }
        }

        & .accordion-collapse {
            padding-block: 12px;
            transition: height 0.35s ease !important;
            
            & .accordion-body {
                padding-inline: 0;

                & .filterPrice {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    gap: 10px;

                    & input {
                        width: 50%;
                        padding: 5px 7px;
                        border: 1px solid var(--grey3);
                        border-radius: var(--border-radius);
                    }
                }

                & .form-check {
                    margin-bottom: 12px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    font-size: 18px;
                    line-height: 28px;
                    color: var(--black2);

                    & input {
                        width: 25px;
                        height: 25px;
                        border: 1px solid var(--dark-grey);
                        border-radius: 5px;
                        padding: 1px;
                    }
                }

                .form-check-input:checked[type=checkbox] {
                    background-color: transparent;
                    background-image: url(../image/icons/svg/checkmark.svg);
                    background-size: 80%;
                }
            }
        }
    }
}

button.ocf-btn {
    display: block;
    width: 100%;
    border-radius: var(--border-radius);
    padding-block: 14px;
    font-weight: 700;
    line-height: normal;

    &:not(:last-child) {
        margin-bottom: 12px;
    }

    &:first-child {
        background-color: var(--blue);
        color: var(--white);
    }

    &:last-child {
        color: var(--black2);
        background-color: transparent;
        border: 1px solid var(--blue);
    }

    &.ocf-disabled {
        color: var(--grey);

        &:first-child {
            background-color: var(--grey3);
        }

        &:last-child {
            background-color: transparent;
            border: 1px solid var(--grey3);
        }
    }
}

/* End filter */
/* Order_list */
#account-order {
    & h2 {
        margin-bottom: 24px;
    }
    /* & .tableProductList {
        align-items: initial;
    } */

    & .product-layout {
        align-items: initial;
        & .textOrder {
            color: var(--grey);
            margin-bottom: 0;
        }
        & .tableProductList {
            align-items: initial;
        }
        & .productLotInfo {
            flex-direction: column;
            align-items: flex-start;
            gap: 30px;
            & p {
                color: var(--grey);
            }

            & .model {
                padding-left: 0;
            }

            & .dataAdded::before {
                background-image: url(../image/icons/svg/solar_calendar-broken.svg);
                width: 20px;
                height: 20px;
            }
        }

        & .productBtnBlock {
            justify-content: inherit;
            height: initial;
            & .orderStatus {
                font-size: 18px;
                font-weight: 700;
                margin-bottom: 12px;
            }
        }
    }
}

/* End List */
/* Empty */
.emptyBlock {
    & h2 {
        margin-bottom: 24px;
    }

    & p {
        font-size: 24px;
        margin-bottom: 24px;
        line-height: normal;
    }

    & a {
        width: 201px;
    }
}

/* End empty */
/* Form Error */
.is-invalid {
    border: 1px solid red;
}

.invalid-feedback {
    color: red;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* End Form Error */