.gallery img {
    height: 100%;
    border: 1px solid #00000017;
}

.el-button {
    border-radius: 20px;
    font-size: var(--el-font-size-base);
}

.rounded-0 {
    border-radius: 20px !important;
}

.el-checkbox.is-bordered.el-checkbox--large .el-checkbox__label {
    font-size: var(--el-font-size-base);
    color: #fff;
    font-weight: 900;
    border-radius: 20px;
}

.el-checkbox.is-bordered.el-checkbox--large {
    border-radius: 20px;
    padding: 0 19px 0 11px;
    border: 2px solid #fff;
    right: 15px;
}


@media (min-width:768px) {
    .el-card {
        --el-card-border-color: var(--el-border-color-light);
        --el-card-border-radius: 4px;
        --el-card-padding: 20px;
        --el-card-bg-color: var(--el-fill-color-blank);
        background-color: var(--el-card-bg-color);
        border: 1px solid var(--el-card-border-color);
        border-radius: 20px;
        color: #fff;
        overflow: hidden;
        transition: var(--el-transition-duration);
        margin-right: 0px !important;
    }

}

.el-link {
    --el-link-font-size: var(--el-font-size-base);
    --el-link-font-weight: var(--el-font-weight-primary);
    --el-link-text-color: var(--el-text-color-regular);
    --el-link-hover-text-color: var(--el-color-primary);
    --el-link-disabled-text-color: var(--el-text-color-placeholder);
    align-items: center;
    color: var(--el-link-text-color);
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    font-size: var(--el-link-font-size);
    font-weight: var(--el-link-font-weight);
    justify-content: center;
    outline: none;
    padding: 5px;
    position: relative;
    text-decoration: none;
    vertical-align: middle;
}

.custom-select,
.el-radio-button__inner {
    -webkit-appearance: none;
    vertical-align: middle
}

.el-radio-button__inner {
    background: #e0d5ff;
    border: 2px solid #8357ff;
    border-radius: 20px !important;
    box-sizing: border-box;
    color: #8357ff;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: var(--el-button-font-weight, var(--el-font-weight-primary));
    line-height: 1;
    margin: 1px;
    padding: 8px 15px;
    text-align: center;
    transition: var(--el-transition-all);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
    font-weight: 900;
}

.el-radio-button--large .el-radio-button__inner {
    border-radius: 0;
    font-size: var(--el-font-size-base);
    padding: 8px 10px
}

@media (min-width:320px) {
    .hamburger {
        padding: 0;
        margin-right: 15px
    }
}

.el-button--large {
    border-radius: 0 20px 20px 0;
    font-size: var(--el-font-size-base);
    padding: 12px 19px
}

.modal-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 20px;
    outline: 0
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {

    .back-arrow,
    .btn-green,
    .chevron-section,
    .form-control-text,
    .form-label-group>label,
    .social-login a,
    a.btn {
        font-size: 12px !important
    }
}

.mr-2,
.mx-2 {
    margin-right: .1rem !important
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0
}

@media (min-width:768px) {
    .el-input__inner {
        -webkit-appearance: none;
        background: 0 0;
        border: none;
        box-sizing: border-box;
        color: var(--el-input-text-color, var(--el-text-color-regular));
        flex-grow: 1;
        font-size: 13px !important;
        height: var(--el-input-inner-height);
        line-height: var(--el-input-inner-height);
        outline: 0;
        padding: 0;
        width: 100%
    }

    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .container-fluid {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto
    }
}

.form-label-group>label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0;
    line-height: 1.5;
    color: #495057;
    cursor: text;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: .1s ease-in-out
}

.make-grey h6 {
    color: #a78bfa !important;
    z-index: 9339999 !important;
    background: #f6f3ff;
    border-radius: 5px;
    padding: 3px;
    position: absolute;
    margin-top: -20px !important
}

.el-button>span {
    align-items: center;
    display: inline-flex;
    color: #ffffff;
}

@media (max-width:768px) {
    .d-flex {
        display: flex !important;
        font-size: 12px;
        margin-right: 0px !important;
        margin-left: 0px !important
    }

    #mobile-logo.clicked {
        animation: .3s pulseLogo
    }

    @keyframes pulseLogo {

        0%,
        100% {
            transform: scale(1)
        }

        50% {
            transform: scale(1.15)
        }
    }

    .font14,
    .menu-category a,
    h6 {
        font-size: 8px !important
    }

    .truncate {
        white-space: nowrap;
        overflow: hidden
    }
}

@media (max-width:767px) {
    .featured-item-price {
        font-size: 13px !important;
        font-weight: 500;
        line-height: 1.75rem
    }

    .col,
    .col-1,
    .col-10,
    .col-11,
    .col-12,
    .col-2,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-auto,
    .col-lg,
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-auto,
    .col-md,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-auto,
    .col-sm,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-auto,
    .col-xl,
    .col-xl-1,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-auto {
        position: relative;
        width: 100%;
        padding-right: 5px;
        padding-left: 5px
    }

    .mb-4,
    .my-4 {
        padding-left: 5px !important;
        margin-bottom: 1.5rem !important;
        margin-top: 20px;
        padding-right: 5px
    }

    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        margin-right: -5px;
        margin-left: -5px
    }

    .category-carousel {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .swiper {
        padding-left: 0 !important;
        margin-left: 10 !important
    }

    .swiper-slide,
    .swiper-wrapper {
        margin-left: 0 !important
    }

    .swiper-wrapper {
        padding-left: 10px !important
    }

    button,
    input,
    select,
    textarea {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }
}

.swiper-button-next,
.swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto;
    display: none;
    background: #000 !important
}

.quantity-parent {
    margin-right: 10px !important
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem 1.75rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e) right .75rem center/8px 10px no-repeat #fff;
    border: 1px solid #ced4da;
    border-radius: 20px;
    -moz-appearance: none;
    appearance: none
}

#search-form.width-auto label,
.container {
    padding-left: 10x
}

.el-button {
    background-color: #a88bfa;
    border: 1px solid #a88bfa
}

.container {
    width: 100%;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto
}

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

    .sub-footer,
    .sub-footer-nav,
    footer {
        padding-right: 15px;
        padding-left: 15px
    }

    .sub-footer,
    .sub-footer-nav {
        padding-top: 30px;
        border-top: 1px solid #e5e5e5
    }

    .container {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto
    }

    .swiper-button-next,
    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 10px);
        right: auto;
        display: none
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        background: #000 !important
    }

    .mb-3,
    .my-3 {
        margin-bottom: 1rem !important;
        margin-right: 10px
    }

    body,
    html {
        overflow-x: hidden;
        max-width: 100vw
    }

    input,
    select,
    textarea {
        font-size: 16px !important
    }

    .swiper-container,
    .swiper-slide,
    .swiper-wrapper {
        touch-action: pan-y;
        -ms-touch-action: pan-y
    }

    .el-button.is-circle {
        border-radius: 50%;
        padding: 8px;
        width: 32px
    }

    .swiperOutsideContainer {
        margin-inline: auto;
        padding-left: 0;
        padding-right: 0
    }

    @media screen and (max-width:1024px) {
        .container {
            padding-left: 1px;
            padding-right: 0;
            max-width: 100%
        }
    }

    @media screen and (max-width:768px) {
        .swiper-container {
            padding-left: 0;
            padding-right: 0;
            max-width: 100%
        }
    }
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 20px
}

.swiper-slide .position-relative {
    width: 100% !important;
    padding-top: 100% !important;
    position: relative !important;
    overflow: hidden !important
}

.swiper-slide .position-relative img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important
}

.mapboxgl-map {
    font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
    overflow: hidden;
    position: relative;
    -webkit-tap-highlight-color: rgb(0 0 0 / 0);
    border-radius: 20px
}

.mb-4,
.my-4 {
    padding-left: 10px;
    margin-bottom: 1.5rem !important;
    margin-top: 20px
}

.el-dialog {
    --el-dialog-width: 50%;
    --el-dialog-margin-top: 15vh;
    --el-dialog-bg-color: var(--el-bg-color);
    --el-dialog-box-shadow: var(--el-box-shadow);
    --el-dialog-title-font-size: var(--el-font-size-large);
    --el-dialog-content-font-size: 14px;
    --el-dialog-font-line-height: var(--el-font-line-height-primary);
    --el-dialog-padding-primary: 16px;
    --el-dialog-border-radius: 20px;
    background: var(--el-dialog-bg-color);
    border-radius: var(--el-dialog-border-radius);
    box-shadow: var(--el-dialog-box-shadow);
    box-sizing: border-box;
    margin: var(--el-dialog-margin-top, 15vh) auto 50px;
    overflow-wrap: break-word;
    padding: var(--el-dialog-padding-primary);
    position: relative;
    width: var(--el-dialog-width, 50%)
}

@media (min-width:992px) {
    .d-lg-block {
        display: block !important;
        top: 10px
    }
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 20px
}

.items .skeleton-placeholder,
.items img {
    border: 1px solid #dcdfe6;
    border-radius: 10px
}

.gallery-more {
    border-radius: 20px
}

.el-button.is-disabled,
.el-button.is-disabled:hover {
    background-color: #c9b9f8;
    background-image: none;
    border-color: #c9b9f8;
    color: #fff;
    cursor: not-allowed;
    border-radius: 20px
}

.el-select__wrapper {
    align-items: center;
    background-color: var(--el-fill-color-blank);
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--el-border-color) inset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 6px;
    line-height: 24px;
    min-height: 32px;
    padding: 4px 12px;
    position: relative;
    text-align: left;
    transform: translateZ(0);
    transition: var(--el-transition-duration)
}

.el-input__wrapper {
    align-items: center;
    background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    background-image: none;
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    cursor: text;
    display: inline-flex;
    flex-grow: 1;
    justify-content: center;
    padding: 1px 11px;
    transform: translateZ(0);
    transition: var(--el-transition-box-shadow)
}

.text-center {
    text-align: center !important;
    border: 0 solid #00000012;
    padding: 10px;
    border-radius: 0
}

.rounded {
    border-radius: 20px !important
}

.modal-body,
html {
    scroll-behavior: smooth
}

body,
html {
    font-family: 'Open Sans', sans-serif
}

.btn-white-parent,
ul.top-menu .userprofile {
    display: inline-block
}

.search-geocomplete input,
.siderbar-menu a,
ul.top-menu .dropdown-menu a {
    text-indent: 20px
}

#item-suggestion-list .text-truncate,
.img-120,
.widget-dropdown button span.text-truncate {
    max-width: 100%
}

body {
    background: #fff;
    font-size: 13px
}

#cmaps,
.grey-bg,
.page-grey,
body.column2-layout {
    background: #f6f7f8
}

img {
    object-fit: cover
}

img.contain {
    object-fit: contain
}

.filter-row h5 a:hover,
.light strong,
a {
    color: #000
}

.btn-white-parent .btn-link:focus,
.btn-white-parent .btn-link:hover,
a:hover {
    text-decoration: none
}

.a-12,
.card,
.cart-summary,
.dataTables_info,
p,
table {
    font-size: 12px !important
}

.bold,
h5,
h6 {
    font-weight: 600
}

.font11,
.font14,
.menu-category a,
h6 {
    font-size: 11px !important
}

h5 {
    font-size: 16px
}

.font13 {
    font-size: 13px !important
}

.font16 {
    font-size: 16px !important
}

.font20 {
    font-size: 20px !important
}

.card {
    border: none
}

.custom-range::-moz-range-thumb {
    background-color: #a78bfa
}

.btn {
    font-size: 15px !important;
    font-weight: 500;
    border-radius: 20px;
    padding: 6px
}

.btn.small {
    padding: 8px;
    font-size: 14px
}

.badge-light {
    color: #737373;
    background-color: #f5f5f5
}

.badge.badge-green,
.btn-green,
.btn-green-line:hover,
.btn-grey:hover,
.custom-control-input:checked~.custom-control-label::before {
    background: #a78bfa;
    color: #fff !important
}

.big-new-button p,
.btn-green:focus,
.btn-green:hover,
.frm_search button:hover,
.layer-content,
.section-promo,
.update-photo a,
.white-color,
ul.sub-menu li.active a:hover {
    color: #fff !important
}

.btn-black,
.btn-group .btn.active,
.quantity a.rounded-pill:hover,
.rounded-button-icon:hover {
    background: #000;
    color: #fff
}

.btn-black:focus,
.btn-black:hover {
    color: rgba(255, 255, 255, .7) !important
}

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857
}

.btn-circle i,
.list-inline.social-list a,
.social-list a {
    font-size: 18px
}

.btn-grey {
    background: #b2b2b2;
    color: #fff
}

.btn-white {
    background: #fff;
    color: #a78bfa
}

.btn-white span,
.chevron-section i,
.font20 {
    font-size: 20px
}

.font25,
i.icon-25 {
    font-size: 25px
}

.border-green,
.btn-green-line {
    border: 1px solid #a78bfa;
    border-radius: 20px
}

.btn.link {
    padding: 0;
    font-size: 12px;
    line-height: inherit
}

.btn.link.focus,
.btn.link:focus {
    outline: 0;
    box-shadow: none
}

.input-group-small .btn {
    font-size: 12px;
    padding: 8px 20px
}

.input-group-small .form-control-text {
    min-height: 35px;
    font-size: 12px
}

.custom-switch.custom-switch-md .custom-control-label {
    padding-left: 1.5rem;
    line-height: 30px;
    margin-bottom: .5rem
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + .75rem);
    border-radius: 3rem
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2))
}

.custom-switch.custom-switch-md .custom-control-input:checked~.custom-control-label::after {
    transform: translateX(calc(1.5rem - .25rem))
}

.w25 {
    width: 157px
}

.btn-white-parent {
    background-color: rgba(255, 255, 255, .5);
    border-radius: 20px
}

.btn-white-parent.non-trasparent {
    background-color: #fff
}

.btn-white-parent .btn-link {
    color: #fff;
    font-size: 13px;
    padding: 5px 10px
}

.btn-white-parent.non-trasparent .btn-link {
    color: #000;
    font-size: 14px;
    padding: 12px;
    width: 280px
}

.img-15 {
    width: 15px !important;
    height: 15px !important
}

.discount-icon.small,
.img-20 {
    width: 20px;
    height: 20px
}

.img-30 {
    width: 30px !important;
    height: 30px !important
}

.img-30-flag {
    width: 30px;
    height: 20px;
    border-radius: 5px
}

.img-35 {
    width: 35px;
    height: 35px
}

.img-40,
[data-loader=circle-side].medium,
[data-loader=circle].medium {
    width: 40px;
    height: 40px
}

.img-50 {
    width: 50px !important;
    height: 50px !important
}

.img-60 {
    width: 60px;
    height: 60px;
    border: 1px solid #0000000f
}

.width-100 {
    width: 100px !important
}

.img-120 {
    min-height: 100px;
    min-width: 100px;
    max-height: 100px
}

.form-control-select,
.form-control-text {
    font-size: 15px;
    padding-left: 15px !important;
    min-height: 55px;
    font-weight: 500
}

.img-200 {
    max-width: 180px;
    max-height: 50px
}

.img-230 {
    max-width: 230px
}

.img-350 {
    max-width: 350px
}

#top-navigation {
    border-bottom: 1px solid #e5e5e5;
    padding-top: 8px;
    padding-bottom: 8px
}

body.front-page #top-navigation {
    border-bottom: 0
}

ul.top-menu,
ul.top-menu li {
    margin-top: 1px;
    padding: 0
}

.drawer-preview-cart a,
.list-inline a,
.menu-carousel a,
.siderbar-menu a,
ul.top-menu a {
    color: #000;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 20px
}

.menu-carousel a {
    padding: 3px 8px
}

ul.top-menu .dropdown-menu a.with-icon-orders {
    background: url("../images/orders-icon.png") 10px center/18px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-account {
    background: url("../images/account.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-logout {
    background: url("../images/log-out.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-addresses {
    background: url("../images/location.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-payments {
    background: url("../images/payments-icon.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-savedstore {
    background: url("../images/favorites-icon.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-gift {
    background: url("../images/gift.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-bookings {
    background: url("../images/reserved-table.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-wallet {
    background: url("../images/wallet-2.png") 10px center/20px no-repeat
}

ul.top-menu .dropdown-menu a.with-icon-livechat {
    background: url("../images/live-chat2.png") 10px center/20px no-repeat
}

#languageSelectionList,
.list-inline a,
.notification-dropdown .btn,
.payments .card-body {
    padding: 0
}

.social-list a {
    display: block;
    padding: 0 2px
}

#menu-category .col a.active,
.btn.normal:hover,
.list-inline a:hover,
.menu-carousel a.active,
.menu-carousel a:hover,
.menu-category a:hover,
.siderbar-menu li.active a,
.text-green,
a:hover,
ul.top-menu a:hover {
    color: #a78bfa !important
}

.section-benefits .benefits,
.section-join-us {
    color: #fff;
    border-radius: .45rem;
    position: relative
}

a.no-hover:hover {
    color: inherit !important
}

ul.top-menu li.active {
    padding: 14px 0;
    border-bottom: 2px solid #000
}

.cart-handle img {
    height: 23px;
    width: 23px
}

a.cart-handle {
    position: relative;
    padding: 0 !important
}

.cart-handle span.badge {
    position: absolute;
    right: 0;
    bottom: -8px
}

.line-left {
    border-left: 1px solid #cecece
}

#main-search-banner,
.mobile-home-banner {
    height: 420px;
    background: url("../images/store-near.png") center center/cover;
    position: relative;
    border-bottom: 1px solid #e5e5e5
}

#main-search-banner .bg-placeholder {
    position: absolute;
    width: 97%;
    margin: auto;
    left: 0;
    right: 0;
    height: 100%;
    background: url("../images/banner-lady-left.png") left bottom/contain no-repeat, url("../images/banner-lady-right.png") right bottom/contain no-repeat
}

#main-search-banner .banner-left {
    background: url("../images/banner-lady-left.png") left bottom/95% no-repeat
}

#main-search-banner .banner-right {
    background: url("../images/banner-lady-right.png") left bottom/105% no-repeat
}

#main-search-banner .banner-center {
    width: 630px;
    z-index: 9
}

.home-search-wrap {
    width: 500px;
    display: block;
    margin: auto
}

#vue-home-search .search-geocomplete-results,
.auto-complete .search-geocomplete-results {
    position: absolute;
    background: #fff;
    width: 100%;
    z-index: 999
}

.form-control-text {
    border-radius: .45rem;
    background: #f6f7f9;
    border: none
}

.form-control-select {
    background-color: #f6f7f9;
    border-radius: .45rem;
    border: none
}

.badge.badge-white,
.category-carousel,
.form-control-text.form-control-text-white,
.kmrs-row {
    border: 1px solid #0000000a;
    background: #fff
}

.pin_placeholder {
    background: url("../images/placeholder.svg") 0 0/contain no-repeat
}

.search_placeholder {
    background: url("../images/magnifiying-glass.svg") 0 0/contain no-repeat
}

.filter_placeholder {
    background: url("../images/filter.png") 0 0/contain no-repeat
}

#search-form input {
    text-indent: 35px
}

#search-form label {
    padding-left: 50px;
    line-height: 2
}

#search-form .icon-left {
    height: 55px;
    width: 50px;
    position: absolute;
    top: 0
}

#search-form .filter {
    height: 55px;
    width: 250px;
    position: absolute;
    top: 0;
    right: 0
}

#search-form.width-auto .filter {
    width: auto
}

#search-form.width-auto input {
    text-indent: 1px
}

#search-form .filter .bootstrap-select {
    width: 170px
}

.search-geocomplete {
    background: #f6f7f9;
    border-radius: 20px
}

.inputs-box-wrap .icon,
.inputs-box-wrap .search_placeholder,
.search-geocomplete .icon {
    position: absolute;
    top: 30%;
    left: 10px
}

.inputs-box-wrap .icon-remove,
.search-geocomplete .icon-remove {
    position: absolute;
    right: 15px;
    top: 30%;
    cursor: pointer
}

.inputs-box-wrap .btn.icon-remove {
    font-size: 12px;
    top: 1px
}

.search-geocomplete .pos-right.search_placeholder {
    position: absolute;
    top: 30%;
    right: 10px;
    left: auto
}

.search-geocomplete-results a {
    display: block;
    padding: 15px 50px;
    clear: both;
    color: #333;
    text-decoration: none;
    background: url("../images/pinb.png") 15px center/19px no-repeat
}

.inputs-box-wrap .results a:hover,
.list-with-icon-button li:hover,
.search-geocomplete-results a:hover {
    background-color: #f6f6f6
}

.change-address-wrap,
.grey-section,
footer {
    background: #f6f7f9;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 30px
}

.app-store-wrap img {
    max-width: 8em
}

.sub-footer,
.sub-footer-nav {
    padding-top: 30px;
    border-top: 1px solid #e5e5e5
}

.sub-footer-nav {
    border-top: 0
}

.sub-footer-nav a {
    font-size: 13px;
    padding: 3px 0;
    display: inline-block
}

.sub-footer-nav h6 {
    margin-bottom: 15px
}

.change-address-wrap a,
.section-title span {
    color: #ea9895
}

.other-promo-wrap .position-relative,
.owl-carousel-parent img.rounded-circle {
    width: 120px;
    height: 120px;
    margin: auto
}

.owl-carousel-parent .owl_link {
    display: block;
    position: relative;
    cursor: pointer
}

.btn-group-toggle label,
.cursor-pointer,
.item-moda-details a,
.link,
.no-contact-section,
.pointer,
a {
    cursor: pointer
}

.owl-carousel-nav {
    height: 13px;
    width: 40px
}

.owl-carousel-nav.next {
    background: url("../images/arrow-right@2x.png") 0 0/cover
}

.owl-carousel-nav.prev {
    background: url("../images/arrow-left@2x.png") 0 0/cover
}

.owl-carousel.rounded-circle img {
    width: 120px;
    height: 120px
}

.el-button--success {
    --el-button-bg-color: #a78bfa;
    --el-button-border-color: #a78bfa
}

.owl-carousel .top-right {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 9
}

.owl-carousel .top-left {
    position: absolute;
    top: 13px;
    left: 5px;
    z-index: 9
}

.owl-carousel .other-promo-wrap .top-right {
    top: -10px
}

.section-addons .addons {
    height: 350px;
    background: #f6f7f8;
    position: relative
}

.section-addons .addons .inner {
    width: 200px;
    position: absolute;
    bottom: 20px;
    left: 30px
}

.section-addons .addons-1 {
    background: url("../images/addons-1.png") bottom right/contain no-repeat #f6f7f8
}

.section-addons .addons-2 {
    background: url("../images/addons-2.png") bottom right/contain no-repeat #f6f7f8
}

.section-addons .addons-3 {
    background: url("../images/addons-3.png") bottom right/contain no-repeat #f6f7f8
}

.section-addons h1 {
    font-weight: 300
}

.partner-section .col,
.section-benefits .benefits,
.section-promo .d-flex {
    height: 320px
}

.crop-images-wrap,
.section-benefits .d-flex {
    height: 250px
}

.section-benefits .inner,
.section-promo .inner {
    padding: 30px !important
}

.section-benefits .benefits-1 {
    background: url("../images/benefits-1.png") 0 0/cover no-repeat #f6f7f8
}

.section-benefits .benefits-2 {
    background: url("../images/benefits-2.png") 0 0/cover no-repeat #f6f7f8
}

.section-benefits .benefits-3 {
    background: url("../images/benefits-3.png") 0 0/cover no-repeat #f6f7f8
}

.section-benefits .benefits-4 {
    background: url("../images/benefits-4.png") 0 0/cover no-repeat #f6f7f8
}

.section-join-us {
    height: auto !important;
    background: url(../images/new-restaurant.png) 0 0/cover no-repeat #f6f7f8 !important;
    z-index: 2
}

.full-width .section-join-us {
    border-radius: 0
}

.section-join-us.section-join-us2 {
    background: url("../images/join-us.png") no-repeat #f6f7f8;
    height: 450px
}

.section-join-us .d-flex {
    height: 390px
}

.section-mobileapp {
    padding-top: 250px;
    margin-top: -200px;
    background: #f6f7f9
}

.section-newmobileapp {
    padding-top: 30px !important;
    margin-top: 0 !important
}

.tree-columns-center {
    padding-bottom: 30px;
    z-index: 1
}

.tree-columns-center .d-flex {
    height: 400px
}

.tree-columns-center img.mobileapp {
    max-height: 400px
}

.tree-columns-center img.rider {
    max-height: 300px
}

img.mirror {
    transform: scaleX(-1)
}

.list-items img,
.skeleton-height {
    display: block;
    width: 100%;
    height: 170px
}

.list-items .position-top,
.section-promo .inner {
    position: absolute;
    width: 100%;
    top: 0;
    padding: 10px
}

.list-items a:hover,
.section-menu a:hover,
a.a_hover_normal:hover {
    color: inherit
}

.lazy,
.mfp-fade.mfp-bg.mfp-removing,
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0
}

.image-loaded .lazy {
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    opacity: 1
}

.skeleton-placeholder {
    height: 170px;
    width: 100%;
    background: #eef0f5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden
}

.apply-points-form .el-tabs__active-bar,
.apply-points-form .el-tabs__nav-wrap::after,
.image-loaded .skeleton-placeholder,
.update-photo .layer-black,
.update-photo a.handle {
    display: none !important
}

.title .skeleton-placeholder {
    width: 250px;
    height: 30px;
    margin-left: 15px;
    display: none
}

.el-card {
    --el-card-border-color: var(--el-border-color-light);
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-fill-color-blank);
    background-color: var(--el-card-bg-color);
    border: 1px solid var(--el-card-border-color);
    border-radius: 20px;
    color: var(--el-text-color-primary);
    overflow: hidden;
    transition: var(--el-transition-duration)
}

.border {
    border: 0 solid #dee2e6 !important
}

.badge.badge-yellow,
.top-merchant-details {
    background: #fedc79
}

.merchant-details {
    min-height: 170px
}

#main-container,
.full-page-sections {
    min-height: 100vh
}

.mobile-merchant-details {
    height: 160px
}

.mobile-merchant-details .sub {
    position: absolute;
    z-index: 9;
    top: 0;
    width: 100%;
    height: 100%
}

.badge.rounded-pill {
    width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0
}

.list-item-rows .skeleton-placeholder,
.list-item-rows img {
    height: 140px;
    width: 100%
}

.badge.big.rounded-pill {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 14px
}

.badge.small.rounded-pill {
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 10px
}

.color-yellow {
    color: #fedc79
}

.menu-category a {
    font-weight: 400;
    color: #a3a3a3;
    padding: 5px 0;
    display: block
}

.light {
    color: #757575
}

.badge-grey {
    background: #a3a3a3;
    color: #fff
}

.menu-category li a.active,
.menu-category li.active a {
    color: #000;
    font-weight: 600
}

.menu-category li a.active:after,
.menu-category li.active a:after {
    content: " ";
    position: absolute;
    border-left: 2px solid #000;
    right: -1px;
    height: 10px;
    margin-top: 5px;
    margin-bottom: auto
}

.section-menu h5 {
    margin-bottom: 20px
}

.section-menu .menu-left {
    border-right: 1px solid #e5e5e5
}

.address-section,
.list-item-rows {
    border: 1px solid #e5e5e5;
    padding: 5px;
    margin-bottom: 15px
}

.list-item-rows img {
    display: block
}

.gallery .skeleton-placeholder,
.gallery img {
    height: 90px;
    width: 100%
}

.list-item-rows .fixed-height {
    min-height: 120px
}

@media only screen and (max-width: 768px) {
    .list-item-rows .fixed-height {
        min-height: 70px;
    }

    .list-item-rows img {
        height: 77.7px;
        width: 100%;
    }

    .category-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px !important;
        max-width: 100%;
    }

    .section-menu h5 {
        margin-bottom: 10px;
        margin-top: 20px;
    }

    hr {
        margin-top: 1rem;
        border: 0;
        border-top: 0px solid rgba(0, 0, 0, .1);
        margin-bottom: 0px;
    }

    .mb-3, .my-3 {
        margin-bottom: 1rem !important;
        margin-right: 10px;
        margin-left: 10px;
    }

    .list-item-rows img {
        display: block;
        object-fit: cover !important;
    }
}

.list-item-rows.small .flex-column,
.list-item-rows.small .skeleton-placeholder,
.list-item-rows.small img {
    height: 115px
}

.list-item-rows.hover01 figure {
    height: 140px
}

.gallery img,
.sticky-wrapper.is-sticky .cart-min-info {
    display: block
}

.gallery-more {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 1.625rem
}

.gallery .remove {
    position: absolute;
    top: -10px;
    left: -10px
}

.skeleton-placeholder::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: 2s infinite shimmer;
    animation: 2s infinite shimmer;
    content: ""
}

@-webkit-keyframes shimmer {
    100% {
        transform: translateX(100%)
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%)
    }
}

.quantity {
    width: 90px
}

.quantity a.rounded-pill,
.rounded-button-icon {
    width: 25px;
    height: 25px;
    display: block;
    background: #b2b2b2;
    color: #fff;
    line-height: 25px;
    text-align: center;
    padding: 0
}

.items .skeleton-placeholder,
.items img {
    display: block;
    width: 50px;
    height: 50px
}

#skeleton-loader,
.cart-min-info,
.circle-loader,
.display-none,
.loading .show-more,
.loading span.label,
.sidenav-loader,
.typeahead__container .typeahead__result,
.typeahead__container.loading .pin_placeholder,
.widget-search,
[v-cloak] {
    display: none
}

.divider,
.section-cart .items {
    border-bottom: 1px solid #e5e5e5;
    padding-top: 10px;
    padding-bottom: 5px
}

.btn-group label {
    background: #f6f7f9;
    font-size: 12px
}

.btn-group.big .btn {
    font-size: 15px;
    font-weight: 500;
    padding: 12px
}

.page-grey {
    padding-top: 20px;
    padding-bottom: 20px
}

input.hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none
}

.change_field_password,
.chevron-section,
.filter-row h5,
.register-section,
.swiper-container,
.track-map-div,
ul.sub-menu li a {
    position: relative
}

.address-section.active {
    border: 1px solid #a78bfa;
    background: #f6f7f9
}

.address-section .dropdown-menu {
    z-index: 999
}

.dropdown-menu.dropdown-actions a {
    font-size: 12px
}

.dropdown-toggle.no-arrow::after,
.dropleft .dropdown-toggle.no-arrow::before {
    border-top: 0;
    content: none
}

.dropdown-toggle.no-arrow {
    font-size: 20px;
    padding: 0 10px
}

.big-new-button {
    background: #000;
    border-radius: .45rem
}

.big-new-button:after {
    content: " ";
    position: absolute;
    right: 40%;
    bottom: -8px;
    border-top: 15px solid #000;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: none
}

.receipt-section img {
    max-width: 700px;
    margin: auto;
    display: block
}

.full-page-sections .left-side {
    background-image: url("../images/admin-login-banner@2x.png");
    background-size: cover;
    background-color: #94c6c3
}

.login-container {
    width: 350px
}

.change_field_password a {
    position: absolute;
    right: 15px;
    bottom: 10px;
    display: block;
    padding: 5px;
    color: #000
}

.custom-control-label {
    font-size: 12px;
    line-height: 23px
}

.section-filter .custom-control-label {
    line-height: normal
}

.other-promo-wrap {
    background: #f3f7fa;
    padding: 20px 30px;
    border-radius: .45rem
}

.register-section {
    min-height: 420px;
    background: #fff
}

.register-bg {
    min-height: 420px;
    background: url("../images/register.png") center bottom/contain no-repeat
}

.partner-section .section img {
    width: 50px;
    height: 50px;
    margin-bottom: 0
}

.partner-section .section {
    background: #fff;
    padding: 30px;
    width: 100%;
    height: 310px
}

#sidebar {
    position: fixed;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 3;
    width: 260px;
    background: #fff;
    box-shadow: 3px 0 5px 0 rgba(246, 247, 248, .75);
    left: 0;
    top: 0;
    padding: 20px
}

#top-nav,
.category-nav .container {
    padding-top: 8px;
    padding-bottom: 8px
}

#top-nav {
    padding-right: 15px
}

#main-container {
    padding-left: 260px;
    padding-top: 70px;
    width: 100%
}

.siderbar-menu a {
    display: block;
    padding: 13px 20px
}

.siderbar-menu .account a,
.with-icon-account {
    background: url("../images/account.png") left center/22px no-repeat
}

.siderbar-menu .orders a,
.with-icon-orders {
    background: url("../images/orders-icon.png") left center/20px no-repeat
}

.siderbar-menu .booking a,
.with-icon-booking {
    background: url("../images/booking-icon.png") left center/22px no-repeat
}

.siderbar-menu .offers a,
.with-icon-vouchers {
    background: url("../images/offers-icon.png") left center/20px no-repeat
}

.siderbar-menu .favourites a,
.with-icon-savedstore {
    background: url("../images/favorites-icon.png") left center/20px no-repeat
}

.siderbar-menu .payments a,
.with-icon-payments {
    background: url("../images/payments-icon.png") left center/20px no-repeat
}

.siderbar-menu .addresses a,
.with-icon-addresses {
    background: url("../images/location.png") left center/17px no-repeat
}

.siderbar-menu .points a,
.with-icon-points {
    background: url("../images/points-icon.png") left center/17px no-repeat
}

.siderbar-menu .logout a,
.with-icon-logout {
    background: url("../images/log-out.png") left center/20px no-repeat
}

.siderbar-menu .gift a,
.with-icon-gift {
    background: url("../images/gift.png") left center/20px no-repeat
}

.siderbar-menu .bookings a,
.with-icon-bookings {
    background: url("../images/reserved-table.png") left center/20px no-repeat
}

.siderbar-menu .wallet a,
.with-icon-wallet {
    background: url("../images/wallet-2.png") left center/20px no-repeat
}

.siderbar-menu .livechat a,
.with-icon-livechat {
    background: url("../images/live-chat2.png") left center/20px no-repeat
}

.top-menu .drawer-menu ul.with-icons li a,
.with-icon,
html[dir=rtl] .search-geocomplete input {
    text-indent: 30px
}

.balance-height {
    min-height: 440px
}

ul.sub-menu li a {
    color: #000;
    font-weight: 600;
    font-size: 13px;
    display: block;
    padding: 10px
}

ul.sub-menu li i {
    margin-right: 15px;
    font-size: 18px
}

ul.sub-menu li.active a {
    background: #a78bfa;
    color: #fff;
    border-radius: .45rem
}

.filter-row h5 a:after {
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    font: 1.625rem/1 Material-Design-Iconic-Font;
    position: absolute;
    right: 0;
    top: -3px;
    content: '\f2fc'
}

.filter-row h5 a.closed:after,
.filter-row h5 a.collapsed:after {
    transform: rotate(180deg)
}

.hover01 figure {
    overflow: hidden;
    height: 170px;
    width: 100%;
    background: #fff
}

.cover-loader,
.map-fullscreen,
.modal-header img {
    width: 100%;
    height: 100%
}

.hover01 figure img.lazy {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

.hover01 figure:hover img.lazy {
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}

.hover13 figure:hover img {
    opacity: 1;
    -webkit-animation: 1.5s flash;
    animation: 1.5s flash
}

@-webkit-keyframes flash {
    0% {
        opacity: .4
    }

    100% {
        opacity: 1
    }
}

@keyframes flash {
    0% {
        opacity: .4
    }

    100% {
        opacity: 1
    }
}

.mfp-fade.mfp-bg,
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: .15s ease-out;
    -moz-transition: .15s ease-out;
    transition: .15s ease-out
}

.chevron::after,
.widget-dropdown button:after,
a.chevron-section::after {
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: .8
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1
}

.category-nav {
    background: #fff;
    z-index: 9 !important
}

.category-nav .container,
.inputs-box-wrap .results.with-border a,
.sticky-wrapper.is-sticky .category-nav {
    border-bottom: 1px solid #e5e5e5
}

.sticky-wrapper.is-sticky .category-nav .container {
    border-bottom: none
}

.modal-full .modal-body,
.sticky-wrapper.is-sticky .category-nav {
    padding: 10px
}

.section-menu a.highlight:hover,
a.chevron-section:hover {
    box-shadow: 0 2px 4px 0 rgba(15, 37, 148, .2)
}

.chevron-section.selected {
    border-left: 3px solid #a78bfa
}

.quantity-add-cart-view .total-price {
    position: absolute;
    right: 10px
}

.chevron-section {
    padding: 10px 20px;
    font-size: 14px;
    border: 1px solid #e5e5e5;
    min-height: 70px
}

.chevron-section.medium {
    min-height: 50px
}

.chevron-section .payment-logo-wrap {
    width: 40px
}

.chevron::after,
a.chevron-section::after {
    transition: .3s ease-in-out;
    font: 2rem/1 Material-Design-Iconic-Font;
    position: absolute;
    right: 20px
}

.chevron:after {
    right: -12px;
    top: 3px;
    font-size: 1rem
}

.chevron.center:after {
    right: 10px;
    top: 30%;
    font-size: 1.5rem
}

.chevron:after,
a.chevron-section:after {
    content: '\f2fb'
}

.widget-dropdown button.no-icons:after,
a.chevron-section.no-arrow:after {
    content: ''
}

.list-selection li {
    padding: 20px 0
}

.list-selection li:hover {
    background: #f6f7f9
}

.list-selection.no-hover li {
    padding: 10px 0
}

#footer-none-bg1 footer,
.list-selection.no-hover li:hover {
    background: 0 0
}

.typeahead__result {
    border: 1px solid #e5e5e5;
    position: absolute;
    left: 0;
    z-index: 99;
    width: 100%;
    min-width: 160px;
    background-color: #fff
}

#skeleton-loader.loading,
.action-menu .widget-search,
.loading .circle-loader,
.loading .fixed-loader,
.sidenav-loader.loading,
.title.loading .skeleton-placeholder,
.typeahead__container.loading .small_preloader,
.typeahead__container.result .typeahead__result {
    display: block
}

.typeahead__list {
    display: block;
    margin: 0
}

.typeahead__list .typeahead__item>a {
    display: block;
    padding: 15px 50px;
    clear: both;
    color: #333;
    text-decoration: none;
    background: url("../images/pinb.png") 15px center/19px no-repeat
}

.typeahead__container.auto-suggestion .typeahead__list .typeahead__item>a {
    background: 0 0;
    padding-left: 15px
}

.typeahead__list .typeahead__item:hover {
    background: #f6f6f6
}

.typeahead__cancel-button {
    position: absolute;
    right: 0;
    cursor: pointer;
    line-height: 2.5;
    padding: .5rem .75rem;
    visibility: hidden
}

.typeahead__container.cancel .typeahead__cancel-button {
    visibility: visible
}

.typeahead__container .typeahead__cancel-button {
    z-index: 99;
    right: 10px
}

.typeahead__container.fixed_cancel .typeahead__cancel-button {
    left: 340px
}

.typeahead__empty {
    padding: 20px
}

.btn.disabled,
.loading {
    cursor: wait;
    pointer-events: none
}

.btn:disabled,
.loading.btn,
a[disabled=true] {
    background: #b2b2b2
}

.fixed-loader {
    position: absolute;
    width: 100%;
    display: none;
    left: 0
}

.cover-loader {
    position: absolute;
    z-index: 9;
    background-color: rgba(255, 255, 255, .7);
    top: 0
}

.dropdown a[disabled=true] {
    background: #f5f5f5 !important;
    color: #737373
}

a[disabled=true],
button[disabled] {
    cursor: none;
    pointer-events: none
}

[data-loader=circle] {
    width: 20px;
    height: 20px;
    -webkit-animation: .75s linear infinite circle;
    -moz-animation: .75s linear infinite circle;
    -o-animation: .75s linear infinite circle;
    animation: .75s linear infinite circle;
    border: 2px solid #000;
    border-top-color: transparent;
    border-radius: 100%
}

[data-loader=circle-side] {
    position: relative;
    width: 25px;
    height: 25px;
    -webkit-animation: .75s linear infinite circle;
    -moz-animation: .75s linear infinite circle;
    -o-animation: .75s linear infinite circle;
    animation: .75s linear infinite circle;
    border: 2px solid #fff;
    border-top-color: rgba(0, 0, 0, .2);
    border-right-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
    border-radius: 100%
}

@-webkit-keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes circle {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.change-address-modal .modal-body {
    max-height: inherit !important
}

.modal-content.opened {
    height: 470px
}

.change-address-modal .typeahead__container.clear-custom .typeahead__cancel-button {
    right: 0;
    left: auto
}

.w-30 {
    width: 30% !important
}

.w-45 {
    width: 45% !important
}

.w-75 {
    width: 75% !important
}

.readmore {
    line-height: 1.4
}

.readmore #collapse-content.collapse:not(.show) {
    display: block;
    height: 3rem;
    overflow: hidden
}

.readmore #collapse-content.collapsing {
    height: 3rem
}

.readmore a {
    font: 20px/1 Material-Design-Iconic-Font
}

.readmore a.collapsed::after {
    content: '\f2f9'
}

.readmore a:not(.collapsed)::after {
    content: '\f2fc'
}

.addon-rows .heads {
    background: #f6f7f9;
    padding: 8px
}

.custom-control-label h6 {
    display: inherit;
    min-width: 200px;
    cursor: pointer
}

.addon-required {
    background: #feff58;
    padding: 4px;
    font-weight: 400
}

.no-results {
    background: url("../images/orders-icon.png") 0 0/cover no-repeat;
    width: 36px;
    height: 40px
}

.dropzone_container {
    border: 2px dashed #ccc;
    color: #ccc;
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer
}

.dropzone_container i {
    font-size: 50px;
    color: #ccc
}

.bg-lighter {
    background: #e8e8e8;
    color: #828282
}

.social-login a {
    border: 1px solid #000;
    padding: 12px;
    width: 100%;
    display: block;
    border-radius: 15px
}

.social-login .s-google {
    background: url("../images/social-login-google.png") 15px/30px no-repeat
}

.social-login .s-facebook {
    background: url("../images/social-login-facebook.png") 15px/32px no-repeat
}

.alert-success {
    background-color: transparent;
    border-color: #a78bfa
}

.map-small {
    height: 130px;
    width: 100%
}

.map-medium {
    height: 200px;
    width: 100%
}

.map-large {
    height: 280px;
    width: 100%
}

.map-lg-large {
    height: 360px;
    width: 100%
}

.list-with-icon-button li {
    padding-top: 15px;
    padding-bottom: 15px;
    cursor: pointer;
    border-bottom: 1px solid #e5e5e5
}

#progressbar {
    color: #455a64;
    padding-left: 0;
    margin-left: -20px
}

#progressbar li {
    list-style-type: none;
    font-size: 13px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 400
}

#progressbar.three-column li {
    width: 33%
}

#progressbar .step-order:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f2ee";
    color: #fff
}

#progressbar .step-home:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f175";
    color: #fff
}

#progressbar.three-column .step-home:before {
    content: '\f1c9'
}

#progressbar .step-merchant:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f153";
    color: #fff
}

#progressbar .step-car:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f125";
    color: #fff
}

#progressbar li:before {
    width: 20px;
    height: 20px;
    line-height: 21px;
    display: block;
    font-size: 14px;
    background: #b2b2b2;
    border-radius: 50%;
    margin: auto;
    padding: 0
}

#progressbar li:after {
    content: '';
    width: 100%;
    height: 5px;
    background: #b2b2b2;
    position: absolute;
    left: 0;
    top: 8px;
    z-index: -2
}

#progressbar li:last-child:after {
    position: absolute;
    left: -50%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px
}

#progressbar li:nth-child(2):after,
#progressbar li:nth-child(3):after {
    left: -50%
}

#progressbar li:first-child:after {
    position: absolute;
    left: 50%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px
}

#progressbar li.active:after,
#progressbar li.active:before {
    background: #a78bfa
}

#progressbar li.progressing:before {
    animation: 2s infinite pulse-green
}

@keyframes pulse-green {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, .7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0)
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0)
    }
}

#progressbar li.order_failed:after,
#progressbar li.order_failed:before {
    background: #ff5252;
    box-shadow: 0 0 0 0 #ff5252
}

.progressing .progress-value {
    background: #a78bfa;
    width: 50%;
    height: 5px;
    animation: 1s linear infinite borealisBar;
    position: absolute;
    left: 50%;
    top: 8px;
    z-index: -1;
    margin-left: 50%
}

@keyframes borealisBar {
    0% {
        left: 0;
        right: 100%;
        width: 0%
    }

    10% {
        left: 0;
        right: 75%;
        width: 40%
    }

    90% {
        right: 0;
        left: 75%;
        width: 40%
    }

    100% {
        left: 100%;
        right: 0;
        width: 0%
    }
}

.order-details-panel,
.sidebar-panel {
    transform: translate(360px, 0);
    position: fixed;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 99;
    width: 340px;
    background: #fff;
    box-shadow: rgba(0, 0, 0, .2) 0 8px 24px;
    right: 0;
    top: 0;
    padding: 20px 25px 20px 20px
}

.ssm-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .2);
    display: none;
    z-index: 1
}

.layer-black,
.layer-grey,
.overlay-loader {
    z-index: 9;
    height: 100%
}

.close-panel i {
    font-size: 23px
}

.order-details-panel.open {
    transform: translate(0, 0)
}

form .errorMessage {
    text-align: initial;
    font-size: 12px;
    color: #dc3545;
    padding: 5px 0 0
}

.yellow-bg {
    background: #f9e8b5
}

.header_icon._icons {
    width: 65px;
    height: 65px;
    background-size: cover
}

.bag {
    background: url("../images/shopping-bag.svg")
}

.location {
    background: url("../images/location.svg")
}

.credit_card {
    background: url("../images/credit-card.svg")
}

.favourite {
    background: url("../images/favourite-heart.svg")
}

.points {
    background: url("../images/gift@2x.png")
}

.digital-wallet {
    background: url("../images/wallet-1.png") no-repeat
}

.header_icon .rounded-button-icon {
    background: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px
}

.header_icon .rounded-button-icon i {
    color: #000;
    font-size: 30px
}

.headroom.headroom--pinned {
    background: #fff;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5
}

.headroom.headroom--top {
    background: 0 0;
    border-bottom: 0
}

.headroom {
    will-change: transform;
    transition: transform .2s linear
}

.headroom--pinned {
    transform: translateY(0)
}

.headroom--unpinned {
    transform: translateY(-100%)
}

.card.fixed-height {
    height: 155px
}

.truncate-overflow {
    --max-lines: 3;
    position: relative;
    max-height: calc(var(--lh) * var(--max-lines));
    overflow: hidden;
    padding-right: 1rem
}

.truncate-overflow::before {
    position: absolute;
    content: "...";
    inset-block-end: 0;
    inset-inline-end: 0
}

.truncate-overflow::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    width: 1rem;
    height: 1rem;
    background: #fff
}

.overlay-loader {
    position: absolute;
    width: 100%
}

.card-listing a[disabled=true] {
    color: #e2e6e9;
    background: 0 0
}

.slide-fade-enter-active {
    transition: .3s ease-out
}

.slide-fade-leave-active {
    transition: .4s cubic-bezier(1, .5, .8, 1)
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0
}

.layer-grey {
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #fff;
    opacity: .5
}

.layer-black {
    position: absolute;
    width: 0%;
    top: 0;
    background-color: #000;
    opacity: .2
}

.layer-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10
}

.make-grey,
.make-grey span {
    color: #b2b2b2
}

.make-grey h5 {
    color: #767676
}

.bg-soft-primary i,
.footer-dropdown a {
    color: #3bafda !important
}

.widget-dropdown a {
    display: block;
    font-size: 14px;
    padding: 8px 20px;
    font-weight: 600
}

.widget-dropdown a:hover {
    background: #dbdbdb;
    color: #000
}

.widget-dropdown button {
    background: #eee;
    border: none;
    font-weight: 600;
    padding: 8px 40px 8px 20px;
    border-radius: 20px;
    font-size: 13px
}

.inputs-box-grey:focus,
.inputs-with-dropdown button:focus,
.inputs-with-dropdown input:focus,
.widget-dropdown button:focus {
    outline: 0
}

.widget-dropdown button:after {
    transition: .3s ease-in-out;
    font: 1.625rem/1 Material-Design-Iconic-Font;
    position: absolute;
    right: 12px;
    top: 4px;
    content: '\f2f9'
}

.widget-dropdown button.no-icons {
    padding-right: 20px
}

.widget-dropdown .dropdown-menu {
    background: #eee;
    padding: 0;
    border-radius: 15px;
    overflow: hidden;
    border: none
}

.inputs-box-grey {
    background: #f6f6f6;
    border: none;
    padding: 8px 20px 8px 35px;
    box-shadow: inset 0 -1px 0 #e2e2e2;
    width: 250px
}

.inputs-box-grey:focus {
    box-shadow: inset 0 -1px 0 #000
}

.inputs-box-wrap .results {
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 99
}

.inputs-box-grey.rounded {
    border-radius: 20px !important;
    box-shadow: none !important
}

.inputs-box-wrap .results a {
    display: block;
    padding: 15px;
    clear: both;
    color: #333;
    text-decoration: none
}

.inputs-box-wrap .results.with-border {
    border: 1px solid #e5e5e5
}

.btn-group.btn-group-rounded .btn {
    border-radius: 50px !important;
    padding: 2px 30px
}

.btn-group.btn-group-rounded {
    background: #f6f7f9;
    border-radius: 50px !important;
    min-height: 45px
}

.inputs-with-dropdown {
    background: #f6f7f9;
    min-height: 55px;
    border-radius: .45rem;
    padding-left: 15px !important
}

.inputs-with-dropdown input {
    border: none;
    background: #f6f7f9;
    min-height: 55px;
    width: 100%
}

.inputs-with-dropdown button {
    background: 0 0;
    border: none;
    min-height: 55px
}

.inputs-with-dropdown .dropdown-menu a {
    font-size: 14px;
    padding: 9px
}

.inputs-with-dropdown img {
    width: 28px;
    height: 20px;
    border-radius: 5px
}

.inputs-with-dropdown .dropdown-menu {
    max-height: 217px;
    overflow-y: auto;
    overflow-x: hidden
}

.border-vertical-green {
    border-left: 10px solid #a78bfa !important
}

.update-photo .d-flex {
    position: absolute;
    top: 0;
    z-index: 9
}

.el-links span.el-link__inner,
.el-radio-group.block,
.el-radio-group.block label,
.update-photo:hover .layer-black,
.update-photo:hover a.handle {
    display: block !important
}

.back-arrow {
    display: block;
    padding-left: 30px
}

.back-arrow:after {
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -ms-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    font: 20px/1 Material-Design-Iconic-Font;
    position: absolute;
    left: 20px;
    content: '\f2ea'
}

.modal-loadingbox {
    max-width: 200px;
    margin: auto
}

.notification-dropdown .dropdown-menu {
    width: 350px;
    height: 320px;
    overflow: none;
    padding: 0
}

.notification-dropdown .text-heading {
    word-wrap: break-word;
    max-width: 250px
}

.notification-dropdown .btn:focus {
    outline: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none
}

.notification-dropdown a {
    font-weight: 400 !important;
    text-indent: 0 !important
}

.notification-dropdown a.active,
.notification-dropdown ul li a:hover {
    background: #f1f5f7
}

.dropdown-header,
.footer-dropdown {
    padding: 15px 20px
}

.notification-dropdown ul {
    height: 210px;
    overflow: auto
}

.notification-dropdown ul.normal {
    height: auto
}

.notification-dropdown ul li {
    border-bottom: 1px solid #f4f4f4
}

.notification-dropdown ul li a {
    padding: 15px 20px;
    display: block
}

.dropdown-text-light {
    font-weight: 200
}

.badge-green {
    background-color: #21b7b7;
    color: #fff
}

.notification-dropdown .badge-25 {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    padding: 0
}

.notify-icon {
    height: 36px;
    width: 36px;
    line-height: 38px;
    text-align: center
}

.bg-soft-primary {
    background: rgba(59, 175, 218, .25) !important
}

.bg-soft-primary i {
    font-size: 19px
}

.notification-dropdown .count {
    position: absolute !important;
    right: -6px
}

.none-notification {
    padding: 30px 0
}

.image-notification {
    background: url("../images/notification.png") 0 0/cover;
    width: 80px;
    height: 80px
}

.lozad.loaded {
    background-size: cover !important
}

.fixed-height15 {
    height: calc(15vh);
    overflow-y: auto
}

.cuisine_carousel a {
    padding: 2px 10px;
    font-size: 13px
}

.cuisine_carousel a.active {
    background: #000 !important;
    color: #fff
}

.btn-text {
    background: 0 0;
    border: none;
    padding: 0;
    margin: 0;
    font-weight: 600
}

.btn-text span {
    max-width: 200px;
    display: inline-block
}

.btn-text.dropdown-toggle::after {
    vertical-align: .2rem
}

.btn-search {
    width: 28px;
    height: 28px;
    padding: 0
}

.btn-search i,
.el-dialog.modal-allergens .el-dialog__title {
    font-weight: 700
}

.section-fast-delivery-mobile {
    height: 300px;
    background-image: url("../images/rider-left.png"), url("../images/rider-right.png");
    background-position: left bottom, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 25%, 25%;
    background-color: #f6f7f8
}

.inputs-box-wrap .filter_wrap {
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px 20px
}

.inputs-box-wrap .separator {
    position: absolute;
    top: 10%;
    right: 50px;
    background: #e2e2e2;
    width: 1px;
    height: 30px
}

.modal-full {
    min-width: 100%;
    margin: 0
}

.modal-full .modal-content {
    min-height: 100vh;
    border: none;
    border-radius: 0
}

.modal-content.modal-mobile {
    border: 1px solid red;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border: none;
    border-radius: 0
}

.suggestion-tab li {
    padding: 12px 16px !important;
    border-bottom: 5px solid #f6f6f6;
    font-weight: 700;
    cursor: pointer
}

.suggestion-tab li.active {
    border-bottom: 5px solid #000
}

.category-carousel a.btn {
    padding: 0 8px 0 9px;
    line-height: 1;
    font-size: 20px
}

.category-carousel .nav-link {
    padding: 5px;
    height: 35px
}

.category-carousel .nav-link.active:after,
.category-owlcarousel .nav-link.active:after {
    content: '';
    border-bottom: 3px solid #000;
    width: 85%;
    display: block;
    position: absolute;
    bottom: 0
}

.list-group.list-group-modified .list-group-item {
    border: none;
    padding: 5px;
    font-weight: 500;
    color: #767676;
    font-size: 13px
}

.el-drawer__header span {
    font-weight: 700;
    color: #767676
}

.floating-cart button {
    border-radius: 500px !important
}

.floating-cart p {
    font-size: 10px !important;
    letter-spacing: 1px
}

.floating-cart h5 {
    font-size: 12px;
    letter-spacing: 1px
}

.floating-cart count {
    position: absolute;
    right: 6%;
    top: 25%;
    font-weight: 700
}

.top-menu .drawer-menu li {
    margin-bottom: 5px
}

.top-menu .drawer-menu ul li a {
    display: block;
    padding: 5px 5px 5px 0
}

.drawer-menu #el-drawer__title {
    margin: 0;
    padding: 10px 10px 10px 15px;
    display: block
}

.language-bar .dropdown-menu a {
    text-indent: 0 !important;
    font-weight: 400
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #f8f9fa !important;
    color: #000
}

.dropdown-toggle::after {
    font: 900 20px/1 Material-Design-Iconic-Font;
    content: '\f2f9';
    border: none;
    margin-left: .3rem;
    vertical-align: -.2rem
}

.el-drawer__header {
    margin-bottom: 0 !important
}

.fullwidth-child iframe {
    margin: auto !important
}

.fullwidth-child.fb-login-button {
    display: table !important;
    margin: auto !important
}

.marker_icon_destination,
.marker_icon_merchant,
.marker_icon_rider {
    background-image: url("../images/restaurant-icon.svg");
    background-size: cover;
    width: 45px;
    height: 45px;
    cursor: pointer
}

.marker_icon_destination {
    background-image: url("../images/home-icon.svg")
}

.marker_icon_rider {
    background-image: url("../images/rider-icon.svg");
    width: 30px;
    height: 30px
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: .6s cubic-bezier(.65, 0, .45, 1) forwards stroke
}

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 2% auto;
    box-shadow: inset 0 0 0 #7ac142;
    animation: .4s ease-in-out .4s forwards fill, .3s ease-in-out .9s both scale
}

.text-truncate-lines,
.text-truncate-lines-2 {
    display: none;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: .3s cubic-bezier(.65, 0, .45, 1) .8s forwards stroke
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0 0 0 30px #7ac142
    }
}

#vue-my-order span.badge {
    text-transform: capitalize
}

.button-fixed-buttom {
    bottom: 0;
    right: 0;
    z-index: 999
}

.button-fixed-buttom a.btn {
    padding: .375rem .75rem
}

.el-radio__label,
span.el-tag {
    white-space: normal !important
}

#feed-locations .el-checkbox.el-checkbox--large,
.el-radio.el-radio--large,
.v3-infinite-loading {
    height: auto !important
}

.width_87 {
    width: 87% !important
}

.map-buttons-wrap {
    bottom: 20px;
    z-index: 99;
    width: 50px !important;
    right: 10px
}

.el-dialog.modal-allergens {
    border-radius: 5px !important
}

.el-dialog.modal-allergens ul {
    padding-left: inherit
}

.el-dialog.modal-allergens ul li {
    font-size: 13px
}

.search-banner {
    height: 230px;
    background: url("/images/store-near.png") center center/cover;
    position: relative;
    border-bottom: 1px solid #e5e5e5
}

.search-banner .sub-header {
    height: 230px
}

.ellipsis-3-lines,
.text-truncate-lines {
    -webkit-line-clamp: 3
}

.ellipsis-2-lines,
.text-truncate-lines-2 {
    -webkit-line-clamp: 2
}

.btn-green-circle,
.btn-green-circle:hover {
    background: #409eff;
    color: #fff !important;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    box-shadow: none;
    padding: 0
}

.owl-carousel .prev-slide {
    right: 0
}

.owl-carousel .next-slide {
    left: 0
}

.owl-carousel .next-slide,
.owl-carousel .prev-slide {
    position: absolute;
    top: 28%
}

html[dir=rtl] .change_field_password a {
    left: 15px;
    right: auto
}

html[dir=rtl] .map-buttons-wrap {
    right: auto;
    left: 10px
}

html[dir=rtl] .el-dialog__headerbtn,
html[dir=rtl] .filter-row h5 a::after {
    right: auto;
    left: 0
}

html[dir=rtl] ul.top-menu .dropdown-menu a {
    background-position: 155px center
}

html[dir=rtl] #sidebar {
    left: auto;
    right: 0
}

html[dir=rtl] .column2-layout #main-container {
    padding-left: 0;
    padding-right: 260px
}

html[dir=rtl] ul.sub-menu li i {
    margin-right: 0;
    margin-left: 10px
}

html[dir=rtl] .siderbar-menu a,
html[dir=rtl] h6.with-icon {
    background-position: right center
}

html[dir=rtl] .chevron::after,
html[dir=rtl] a.chevron-section::after {
    right: auto;
    left: 20px
}

html[dir=rtl] .el-drawer .chevron::after {
    left: -20px
}

html[dir=rtl] .chevron:after,
html[dir=rtl] a.chevron-section:after {
    content: '\f2fa'
}

.merchant-top-header ul li {
    display: inline;
    font-size: 12px
}

.info-items-dot-separator {
    background-color: #767676;
    border-radius: 50%;
    height: 2px;
    margin-left: 8px;
    margin-right: 8px;
    width: 2px;
    display: inline-block;
    vertical-align: middle
}

.merchant-top-header .fav-wrap {
    position: absolute;
    top: 10px;
    right: 20px
}

.rounded-small {
    height: 30px;
    width: 30px
}

.text-grey {
    color: #9e9e9e !important
}

.gradient-yellow-bg {
    background: linear-gradient(110deg, #a78bfa 60%, #9578e9 60%);
}

.modified-modal .el-dialog__body {
    padding: 10px 20px !important
}

.modified-modal .el-dialog {
    border-radius: 10px !important
}

.responsive-iframe {
    min-height: 100vh;
    width: 100%;
    background: #fff
}

.apply-points-form .el-tabs__item {
    height: 100px !important
}

.apply-points-form .el-progress-bar__inner {
    text-align: center !important
}

.drawer-footer-center .el-drawer__footer,
.result,
.swiperCuisine .swiperSlide {
    text-align: center
}

.apply-points-form .disabled-class {
    position: absolute;
    top: 0;
    background: rgba(255, 255, 255, .6);
    width: 100%;
    height: 100%;
    z-index: 999999;
    cursor: not-allowed
}

.search-geocomplete .el-input--large .el-input__wrapper {
    padding: 3px 15px
}

.esubscription .butoon-wrap {
    position: absolute;
    top: 0;
    right: 0
}

.ellipsis-2-lines,
.ellipsis-3-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.pricing-plans .icon,
.wrap-radio-selection {
    display: inline-block;
    background-color: #a78bfa
}

.wrap-radio-selection {
    padding: 10px 10px 0;
    border-radius: 50px
}

.wrap-radio-selection span.el-radio-button__inner {
    background-color: #a78bfa;
    color: #fff;
    border: none
}

.wrap-radio-selection .el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: #fff;
    border-color: #fff;
    box-shadow: none;
    color: #a78bfa;
    border-radius: 50px
}

.wrap-radio-selection .el-radio-button:first-child .el-radio-button__inner {
    border: none !important
}

.pricing-plans {
    min-height: 350px
}

.pricing-plans .plans {
    border: 2px solid #a78bfa;
    border-radius: 10px;
    padding: 10px;
    min-width: 250px;
    max-width: 250px
}

.pricing-plans .icon {
    padding: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%
}

.pricing-plans .icon i {
    font-size: 25px;
    color: #fff
}

.pricing-plans ul,
.suggestion-search-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.pricing-plans ul li {
    line-height: 25px
}

.q-gutter-md {
    margin-left: -16px
}

.q-gutter-md>* {
    margin-left: 16px
}

.opacity-60 {
    opacity: .6
}

.shadow-card {
    box-shadow: 0 0 #000, 0 0 #0000, 0 0 #000, 0 0 #0000, 0 0 10px rgba(0, 0, 0, .04);
    border-radius: 1rem
}

.shadow-xs {
    box-shadow: 0 0 #000, 0 0 #0000, 0 0 #000, 0 0 #0000, 0 6px 32px rgba(0, 0, 0, .04);
    border-radius: .5rem
}

.h-6 {
    height: 1.5rem
}

.font-medium {
    font-weight: 500
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.bordered-box {
    border: 1px solid #ebecf1;
    border-radius: 5px
}

.bordered-box.selected {
    border: 2px solid #a78bfa
}

.bordered-box.selected .text-xs {
    color: #a78bfa
}

.text-red {
    color: #c00000
}

.min-filter {
    max-height: 290px;
    overflow: hidden
}

.el-image__inner,
.rounded .el-input__wrapper {
    border-radius: 20px;
    object-fit: cover;
    border: 1px solid #e9ecef;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    content: '' !important
}

.rounded-box,
.swiperResto .swiperSlide {
    min-height: 230px !important;
    border: 1px solid #ebebebf5;
    border-radius: 20px
}

.rounded-box img,
.swiperResto .swiperSlide img {
    width: 100%;
    min-height: 9rem;
    max-height: 100%;
    border-radius: 20px
}

.rounded-box .close-overlay,
.rounded-box .layer-black {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-height: 200px;
    max-height: 200px
}

.rounded-box .el-image {
    width: 100%
}

@media (max-width: 767px) {
    img {
        object-fit: cover !important;
    }

    .rounded-box img {
        height: 190px !important;
    }
}

.rounded-box img {
    min-height: 100%;
    max-height: 100%;
    height: 177.33px;
    object-fit: fill !important;
}

.rounded-box img {
    min-height: 270px;
    max-height: 270px
}

.swiperOutsideContainer {
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0
}

:root {
    --swiper-navigation-sides-offset: -1rem
}

.swiperCuisine .swiperSlide {
    min-height: 100px !important
}

.swiperCuisine .swiperSlide img {
    width: 70px;
    height: 70px;
    border: 1px solid #00000008
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip
}

.gold-color {
    color: #f7c942
}

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

.swiperBanner .swiperSlide {
    min-height: 200px !important
}

.swiperBanner .swiperSlide .el-image {
    width: 100%;
    height: 180px
}

.swiperBanner .swiper-pagination {
    bottom: -1px !important
}

.el-button.is-rounded,
.radius10 {
    border-radius: 10px
}

.offers-container {
    background: #fad9e7;
    min-height: 280px
}

.search-suggestions-overlay {
    background-color: rgba(0, 0, 0, .08);
    bottom: 0;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999
}

.bds-c-modal__backdrop {
    background-color: #333333a3;
    inset: 0;
    position: fixed
}

.suggestion-results {
    border: 1px solid #ebebeb;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    z-index: 9;
    top: 45px;
    width: 100%;
    padding-bottom: 10px
}

.search-show {
    z-index: 9999
}

.suggestion-search-list li {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px
}

.suggestion-search-list li:hover {
    background-color: #f7f7f7
}

.warm-pink {
    color: #000 !important
}

img.none {
    object-fit: none
}

.close-overlay {
    background-color: #333333a3;
    z-index: 9;
    color: #fff;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: absolute
}

.rotate-180 {
    transform: rotate(280deg)
}

.typing_loader {
    width: 30px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
    background: var(--_g) 0 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: 1s linear infinite l3
}

@keyframes l3 {
    20% {
        background-position: 0 0, 50% 50%, 100% 50%
    }

    40% {
        background-position: 0 100%, 50% 0, 100% 50%
    }

    60% {
        background-position: 0 50%, 50% 100%, 100% 0
    }

    80% {
        background-position: 0 50%, 50% 50%, 100% 100%
    }
}

.infinite-list {
    height: 300px;
    padding: 0;
    margin: 0;
    list-style: none
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary)
}

.infinite-list .infinite-list-item+.list-item {
    margin-top: 10px
}

.result {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-weight: 300;
    padding: 10px;
    margin: 0 auto 10px;
    background: #eceef0;
    border-radius: 10px
}

.discount-icon,
.with-promo-icon {
    background-repeat: no-repeat;
    background-size: contain
}

.justify-center {
    justify-content: center;
    display: flex
}

.el-button.disabled {
    cursor: not-allowed
}

.location-estimation .el-button--large,
.text-descriptions p {
    margin: 0 !important
}

.location-estimation .el-button.is-text {
    padding: 12px
}

.discount-icon {
    background-image: url('../images/discount.svg');
    background-position: center;
    color: #a78bfa;
    filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(500%) hue-rotate(90deg)
}

.custom-element-radio .el-radio {
    margin-right: 0 !important;
    padding: 10px !important
}

.join-sections img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-height: 170px
}

.join-sections .content {
    padding: 10px;
    border: 1px solid #ebebeb;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 5px
}

.scrollbar-flex-content {
    display: flex
}

.scrollbar-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px
}

.flex-content {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 1rem;
    flex-wrap: wrap
}

.flex-content-item {
    display: flex;
    -moz-box-align: center;
    align-items: center;
    -moz-box-pack: center;
    justify-content: center
}

.border-top-bottom-grey {
    border-top: 1px solid #e6ebf1;
    border-bottom: 1px solid #e6ebf1
}

.avatar-uploader .el-upload {
    border: 3px solid #e6ebf1;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.avatar-uploader .el-upload:hover {
    border-color: #a78bfa
}

.el-icon.avatar-uploader-icon {
    font-size: 16px;
    color: #8c939d;
    width: 70px;
    height: 60px;
    text-align: center
}

.avatar-uploader .avatar {
    max-width: 70px;
    max-height: 60px
}

.drawer-menu-mobile li a {
    display: block;
    text-indent: 10px
}

.position-bottom {
    position: absolute;
    bottom: 40px;
    z-index: 9;
    right: 20px
}

.fav-floating,
.with-promo {
    position: absolute;
    top: 10px;
    z-index: 99
}

#footer-none-bg footer {
    background: 0 0;
    border-top: 1px solid #ddd
}

.with-promo {
    left: 10px;
    width: 70px;
    height: 20px;
    border-radius: 7px;
    background-color: #a78bfa;
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.with-promo-icon {
    display: inline-block;
    background-position: center center;
    background-image: url("../icons/icon-promo-tag.svg");
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-right: 8px
}

.fav-floating {
    right: 5px
}

.featured-item-price {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75rem
}

.featured-item-price-previous {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem
}

.read-more {
    color: #a78bfa;
    cursor: pointer;
    text-decoration: underline
}

/* Item card UX overrides */
@import url('./_item-card-ux.css');