@charset "UTF-8";
@import url(/css/global/meyer-reset/reset.css);
@import url(/css/global/fontawesome4.5/css/font-awesome4-5-0.min.css);

/*======================================

[  Custom Components ]

  01. Slick Products Carousel
  02. Ranking Star
  03. Best Seller Product List 
  04. Product List Style 01
  05. Product List Style 02
  06. Categories Box
  07. Side Menu
  08. Custom Pop Up Modal
  09. Checkout
  10. Custom Checkbox
  11. Custom Radio Button
  13. Custom Banking Radio Button
  14. Custom Small Radio Button
  15. Price Slider Filter
  17. Notification Page
  18. Address Container
  19. My Order Page 
  20. Wallet Page
  21. Product Details Swiper
  22. Color Radio Button
  23. Custom Product Details & Review Tab
  24. Banner Offer Ribbon Box
  25. Filter Box
  26. Custom Check Box Slider
  27. Custom Account Setting Vertical Tab
  28. Rebate Summary - Pie chart
  29. Rebate Tab - Progress Bar
  30. Merchant Upgrade - Merchant Tab Navigate
  31. Company info _ Address Container
  32. My Follower
  33. Create Payment Page - Wallet
  34. Otp Modal
  35. Product Item
  36. Mobile Prefix
  37. Multi Select
  38. Custom Message
  39. Swal Design
  40. Merchant Design
  41. Review Modal

[ End Custom Components ]
======================================*/
.account-setting-profile-pic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid var(--goldColor);
}

/*------------------
  01. Slick Carousel
--------------------*/
.slick-carousel .slick-prev, .slick-carousel .slick-next{
    -webkit-transform: translate(0, -50%) scale(0.6);
    -ms-transform: translate(0, -50%) scale(0.6);
    transform: translate(0, -50%) scale(0.6);
}

.slick-carousel {
    width: 90%;
    margin: 0px auto;
}

.slick-carousel-same-store{
    width: 100%;
    margin: 0px auto;
}

.slick-carousel-related-product{
    width: 100%;
    margin: 0px auto;
}

.slick-slide {
    margin-bottom: 18px;
}

.product-content {
    overflow: hidden;
    position: relative;
    border-radius: 5px;
}

.slick-img-container:hover .slick-middle {
    opacity: 1;
}

.slick-middle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: rgb(180, 149, 107, 0.5);
    transition: 0.5s ease;
    width: 228px;
    height: 206px;
    overflow: hidden;
    z-index: 3;
}

.slick-hover-zoom-icon {
    position: absolute;
    top: 33%;
    left: 33%;
    width: 80px;
}

.slick-img img {
    width: 228px;
    height: 206px;
    object-fit: contain;
}

.slick-img .offer {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 15px;
    font-weight: 300;
    background: #ffd846;
    border-radius: 5px;
}

/* Slick Wallet Carousel */

.slick-wallet-items {
    width: 100%;
    margin: 0px auto;
}

.slick-sidemenu-wallet-items {
    width: 100%;
    margin: 0px auto;
}

/* Custom Slick dot */

.slick-dots li button:before {
    font-size: 30px !important;
}

.slick-dots li.slick-active button:before {
    color: var(--goldColor) !important;
}

/*------------------
  02. Ranking Star
--------------------*/

.stars li::before,
.stars li.active::before,
.stars li.active ~ li::before,
.stars li:hover::before,
.stars li:hover ~ li::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    vertical-align: middle;
}

.stars {
    unicode-bidi: bidi-override;
    direction: rtl;
    display: inline-block;
    text-align: left;
}

.stars li {
    /* cursor: pointer; */
    display: block;
    padding: 0 0.09rem;
    display: inline-block;
    font-size: 20px;
    color: var(--goldColor);
}

.stars li::before {
    content: "";
}

.stars li.active,
.stars li.active ~ li {
    color: var(--goldColor);
}

.stars li.active::before,
.stars li.active ~ li::before {
    content: "";
}

/*------------------
  03. Best Seller Product List 
--------------------*/

.product-img-container:hover .middle {
    opacity: 1;
}

.home-middle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: rgb(180, 149, 107, 0.5);
    transition: 0.5s ease;
    height: 170px;
    overflow: hidden;
    z-index: 3;
}

.home-hover-zoom-icon {
    position: absolute;
    top: 35%;
    left: 36%;
}

.home-product-img img {
    width: 255px;
    height: 170px;
    object-fit: contain;
}

.home-hover-zoom-icon img {
    width: 50px;
}


.product-img-container:hover .home-middle {
    opacity: 1;
}

.middle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: rgb(180, 149, 107, 0.5);
    transition: 0.5s ease;
    width: 255px;
    height: 265px;
    overflow: hidden;
    z-index: 3;
}

.product-img img {
    width: 255px;
    height: 265px;
    object-fit:contain;
}

.product-img .offer {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 15px;
    font-weight: 300;
    background: #ffd846;
    border-radius: 5px;
}

.product-info-container{
    /* min-height: 114px; */
    min-height: 70px;
}

.hover-zoom-icon {
    position: absolute;
    top: 33%;
    left: 33%;
    width: 100px;
}

.product-price-content {
    /*display: flex;*/
    justify-content: center;
    margin-top: 6px;
}

.price-dc {
    text-decoration: line-through;
    color: #b3b3b3;
}

/*------------------
  04. Product List Style 01
--------------------*/

.pd-list-middle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: rgb(180, 149, 107, 0.5);
    transition: 0.5s ease;
    width: 184px;
    height: 184px;
    overflow: hidden;
    z-index: 3;
}

.product-img-container:hover .pd-list-middle {
    opacity: 1;
}

.product-list-img .offer {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    font-weight: 300;
    background: #ffd846;
    border-radius: 5px;
}

.hover-list-zoom-icon {
    position: absolute;
    top: 28%;
    left: 30%;
    width: 80px;
}

/*------------------
  05. Product List Style 02
--------------------*/

.product-list-style2 {
    border-radius: 5px;
}

.pd-img-container:hover .pd-middle {
    opacity: 1;
}

.pd-middle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    right: 0;
    opacity: 0;
    background-color: rgb(180, 149, 107, 0.5);
    transition: 0.5s ease;
    width: 155px;
    height: 200px;
    overflow: hidden;
    z-index: 3;
    border-radius: 5px 0 0 5px;
}

.product-list-thumb img {
    width: 155px;
    height: 200px;
    border-radius: 5px 0 0 5px;
}

.product-list-details {
    padding: 20px 5px 0 20px;
    width: 195px;
}

.product-list-details span {
    font-size: 1.2rem;
}

.product-list-thumb .offer {
    position: absolute;
    top: 10px;
    left: 15px;
    padding: 3px 15px;
    font-weight: 300;
    background: #ffd846;
}

.pd-hover-zoom-icon {
    position: absolute;
    top: 33%;
    left: 28%;
    width: 70px;
}

/*------------------
  06. Categories Box
--------------------*/

.ctg-box {
    padding: 10px;
    width: 140px;
    height: 140px;
    border-radius: 10px;
}

.ctg-box:hover {
    background: var(--lightGold) !important;
}

.ctg-img-container {
    margin: 0 auto;
    width: 80px;
    height: 80px;
}

.ctg-name {
    text-align: center;
    margin-top: 6px;
}

.ctg-name div {
    /* margin: 8px 12px 0; */
    font-size: 12px;
    height: 40px;
    overflow: hidden;
}

/*------------------
  07. Side Menu
--------------------*/

.main-wrapper .sr-cover {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
}

.sr-contact-side-menu-opened .main-wrapper .sr-cover {
    z-index: 500;
}

.sr-contact-side-menu-opened .sr-side-menu {
    right: 0;
    visibility: visible;
}

.sr-side-menu {
    position: fixed;
    top: 0;
    right: -460px;
    width: 460px;
    height: 100%;
    min-height: 100%;
    background: var(--whiteColor);
    overflow: hidden;
    visibility: hidden;
    z-index: 1000;
    backface-visibility: hidden;
    box-sizing: border-box;
    box-shadow: -3px 0 3px rgba(0, 0, 0, 0.04);
    -webkit-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    text-align: center;
}

.side-menu-header {
    background-image: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/bg-header-menu.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    padding: 20px;
    height: 250px;
}

.sr-side-menu .sr-side-area-inner {
    height: 100%;
    min-height: 100%;
    outline: 0;
    overflow-y: scroll !important;
}

.sr-side-menu a.sr-contact-side-menu-closer {
    display: block;
    color: #fff;
    font-size: 24px;
    z-index: 500;
}

.sr-side-menu a.sr-contact-side-menu-closer span,
.sr-side-menu a.sr-contact-side-menu-closer span:before {
    display: block;
    line-height: inherit;
}

.side-menu-content {
    position: relative;
    max-height: 100vh;
    height: 560px;
}

.profile-pic {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--goldColor);
}

.wallet-container {
    background: var(--lighGreyDColor);
    border-radius: 5px;
}

.merchant-wallet-box {
    background-image: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/bg-merchant-wallet.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 160px;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}

.menu-slt img {
    max-width: 25px;
    width: 100%;
}

.menu-slt:hover {
    background: var(--lightGold);
}

.title-menu {
    background: var(--lighGreyDColor);
    padding: 10px 2.8rem;
    margin: 30px -15px 10px;
}

/*------------------
  08. Custom Pop Up Modal
--------------------*/

/* 1) Barcode Modal */
.barcode-big {
    max-width: 200px;
    width: 100%;
}

.barcode-modal-dialog {
    max-width: 350px !important;
}

/* 2) Write Review Modal */
.review-product-img {
    width: 150px;
}

.upload-img-container {
    display: flex;
    justify-content: center;
    min-height: 150px;
    min-width: 150px;
    height: 100%;
    width: 100%;
    border: 1px solid var(--lighGreyCColor);
    border-radius: 5px;
}

.addEdit-modal-dialog {
    max-width: 750px !important;
}

.review-modal-dialog {
    max-width: 750px !important;
}

/* 3) Lucky Draw Modal */
.luckydraw-modal .meta-logo {
    max-width: 300px;
    width: 100%;
}

.wheel {
    width: 400px;
    height: 400px;
    box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    margin: auto;
    background: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/spin-wheel-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.wheel__inner {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: cubic-bezier(0.19, 1, 0.22, 1) 5s;
    z-index: 20;
    margin: auto;
    top: 50px;
}

.wheel__sec {
    position: absolute;
    top: 0;
    left: 100px;
    width: 0;
    height: 0;
    border: solid;
    border-width: 150px 50px 0;
    border-color: transparent;
    transform-origin: 50% 100%;
}

.wheel__sec .slice p {
    border: 50%;
    border-radius: 50%;
    width: 30px;
    height: 35px;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    position: absolute;
    top: -100px;
    left: -15px;
    text-align: left;
    transform: rotate(-90deg);
    margin: 0 !important;
}

.wheel__sec:nth-child(1) {
    border-top-color: #16a085;
}

.wheel__sec:nth-child(2) {
    border-top-color: #2980b9;
    transform: rotate(36deg);
}

.wheel__sec:nth-child(3) {
    border-top-color: #34495e;
    transform: rotate(72deg);
}

.wheel__sec:nth-child(4) {
    border-top-color: #f39c12;
    transform: rotate(108deg);
}

.wheel__sec:nth-child(5) {
    border-top-color: #d35400;
    transform: rotate(144deg);
}

.wheel__sec:nth-child(6) {
    border-top-color: #c0392b;
    transform: rotate(180deg);
}

.wheel__sec:nth-child(7) {
    border-top-color: #2bc02b;
    transform: rotate(216deg);
}

.wheel__sec:nth-child(8) {
    border-top-color: #2baac0;
    transform: rotate(252deg);
}

.wheel__sec:nth-child(9) {
    border-top-color: #2b2dc0;
    transform: rotate(288deg);
}

.wheel__sec:nth-child(10) {
    border-top-color: #c02ba7;
    transform: rotate(324deg);
}

.wheel__arrow {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 74px;
    height: 110px;
    top: 120px;
    left: 160px;
    background: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/spin-wheel_arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 30;
}

.wheel__button {
    position: relative;
    top: 25px;
    cursor: pointer;
    border: none;
    width: 70px;
    height: 70px;
    background: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/spin-wheel_pointer.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    transition: 0.2s;
}

.wheel__button:active {
    width: 65px;
    height: 65px;
}

.luckydraw-congrat-modal {
    position: fixed;
    top: 0;
    left: 0%;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    margin: auto;
    display: none;
    z-index: 1100;
}

.congratulation__container {
    width: 30vw;
    padding: 30px;
    background: rgb(240, 220, 193);
    background: linear-gradient(
        180deg,
        rgba(240, 220, 193, 1) 0%,
        rgba(208, 174, 128, 1) 100%
    );
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.congratulation__close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--goldColor);
    cursor: pointer;
}

.congratulation__emotion {
    color: #f39c12;
    text-align: center;
    margin: 0 0 20px 0;
}

.congratulation__note {
    font-size: 1.8rem;
    font-weight: 900;
}

/*------------------
  09. Checkout 
--------------------*/

.page__subtitle {
    color: var(--greyColor) !important;
    text-transform: capitalize;
}

hr.subtitle {
    border: 1px solid var(--greyColor);
}

.checkbox-all-container {
    background: var(--lighGreyAColor) !important;
    padding: 1rem;
}

.border-container {
    border: 1px solid var(--lighGreyCColor);
    border-radius: 5px;
    padding: 1.1rem;
}

.border-container:hover {
    background: var(--lightGold) !important;
}

.disable-payment{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background: rgba(255,255,255,0.8);
    z-index: 3;
    border-radius: 5px;
    cursor: not-allowed;
}

.border-container.payment-selected{
    border: 3px solid var(--goldColor);
}

.bank-container {
    background: var(--lighGreyCColor) !important;
    border-radius: 5px;
    padding: 3rem;
}

.payment-icons-1 {
    width: 100px;
}

.payment-icons-2 {
    width: 72px;
}

.payment-icons-3 {
    width: 150px;
}

.success-checkout-icons img {
    width: 300px;
}

.product_name {
    font-weight: 500;
    color: var(--blackColor);
}

.product_option {
    color: var(--greyColor);
}

.offer_price {
    font-weight: 500;
    color: var(--goldColor);
}

.unit_price {
    color: var(--blackColor);
}

.custom-qty {
    width: 70%;
    background-color: #f0f0f0;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 0.6rem;
    text-align: center;
}

input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: checkbox;
}

/*------------------
  10. Custom Checkbox
--------------------*/

.checkbox {
    background-color: #fff;
    display: inline-flex;
    height: 20px;
    margin: 0.4em;
    width: 20px;
    border: 2px solid #707070;
}

.checkbox.checked {
    border: 2px solid var(--font-color);
}

.checkbox span {
    display: block;
    height: 6.98px;
    position: relative;
    width: 9.76px;
    padding: 0;
}

.checkbox span:after {
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -webkit-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: "";
    display: block;
    height: 9px;
    left: 2px;
    position: absolute;
    top: 8px;
    width: 6px;
}

.checkbox span:hover:after {
    border-color: #999;
}

.checkbox input {
    display: none;
}

.checkbox input:checked + span:after {
    -webkit-animation: check 0.8s;
    -moz-animation: check 0.8s;
    -o-animation: check 0.8s;
    animation: check 0.8s;
    border-color: #555;
}

.checkbox input:checked + .default:after {
    border-color: var(--font-color);
}

@keyframes check {
    0% {
        height: 0;
        width: 0;
    }

    25% {
        height: 0;
        width: 6px;
    }

    50% {
        height: 9px;
        width: 6px;
    }
}

/*------------------
  11. Custom Radio Button
--------------------*/

.custom-radio {
    border: 1px solid var(--lighGreyCColor);
    border-radius: 5px;
    padding: 0.5rem;
}

.custom-radio p {
    padding: 0 0 0 40px;
    margin-bottom: 0;
}

.radio-input {
    opacity: 0;
    position: absolute;
}

.radio-input-label {
    position: relative;
    height: 38px;
    display: inline-block;
    cursor: pointer;
}

.radio-input + .radio-input-label:before {
    content: "";
    border: 2px solid var(--goldColor);
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding: 2px;
    margin-right: 10px;
    border-radius: 50%;
}

.radio-input:checked + .radio-input-label:after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    position: absolute;
    top: calc(50% - 13px);
    left: 6px;
    background: var(--goldColor);
    border-radius: 50%;
}

.radio-input:checked + .radio-input-label:before {
    border: 2px solid var(--goldColor);
}

/*------------------
  13. Custom Banking Radio Button
--------------------*/

.banking-radio {
    border: 1px solid var(--lighGreyCColor);
    padding: 1.5rem;
    transition: all 0.2s ease-out;
}

.banking-radio:hover {
    background: var(--lightGold);
    opacity: 0.8;
}

.banking-radio img {
    width: 50px;
}

.banking-radio-label {
    position: relative;
    height: 41px;
    display: inline-block;
    cursor: pointer;
}

.radio-input + .banking-radio-label:before {
    content: "";
    border: 2px solid #bbbcbc;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding: 2px;
    margin-right: 10px;
    border-radius: 50%;
}

.radio-input:checked + .banking-radio-label:after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    position: absolute;
    top: calc(50% - 13px);
    left: 6px;
    background: var(--goldColor);
    border-radius: 50%;
}

.radio-input:checked + .banking-radio-label:before {
    border: 2px solid var(--goldColor);
}

/*------------------
  14. Custom Small Radio Button
--------------------*/

.sm-radio-input {
    opacity: 0;
    position: absolute;
}

.sm-radio-input-label {
    position: relative;
    height: 15px;
    display: inline-block;
    cursor: pointer;
}

.sm-radio-input + .sm-radio-input-label:before {
    content: "";
    border: 2px solid var(--goldColor);
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    padding: 2px;
    margin-right: 10px;
    border-radius: 50%;
}

.sm-radio-input:checked + .sm-radio-input-label:after {
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
    position: absolute;
    top: calc(50% - 3px);
    left: 5px;
    background: var(--goldColor);
    border-radius: 50%;
}

.sm-radio-input:checked + .sm-radio-input-label:before {
    border: 2px solid var(--goldColor);
}

/*------------------
  15. Price Slider Filter
--------------------*/

.ui-slider-horizontal {
    height: 0.3em;
}

.ui-slider {
    position: relative;
    width: 80%;
    left: 2%;
    border: 0;
    text-align: left;
    background: var(--lightGold);
}

.ui-slider-horizontal .ui-slider-handle {
    top: unset !important;
}

.ui-slider .ui-slider-handle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white !important;
    border: 11px solid var(--goldColor) !important;
    outline: none;
    margin: -5px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: box-shadow 150ms linear, background-color 150ms linear,
        transform 150ms linear;
}

.ui-slider .ui-slider-range {
    font-size: 0.7em;
    border: 0;
    background: var(--goldColor);
}

.ui-slider-handle:hover {
    transform: scale(0.92);
    background-color: var(--goldColor), 10%;
    box-shadow: 6px 8px 8px -6px var(--lightGold);
}

.ui-slider .ui-slider-handle:active {
    transform: scale(0.9);
    box-shadow: 1px 1px 1px 1px var(--lightGold);
}

.ui-widget-content {
    border: none !important;
    background: var(--lightGold) 50% 50% repeat-x !important;
    color: var(--goldColor);
}

.pslider {
    color: black;
}

/*------------------
  16. Rating Filter
--------------------*/

.rating span {
    line-height: 35px;
}

.rating-stars ul {
    list-style-type: none;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.rating-stars ul > li.star {
    display: inline-block;
}

/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
    font-size: 2em;
    /* Change the size of the stars */
    color: #ccc;
    /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
    color: var(--goldColor);
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
    color: var(--goldColor) !important;
}

.stars-filter li.active::before,
.stars-filter li.active ~ li::before {
    content: "";
}

/*------------------
  17. Notification Page
--------------------*/

.notification-item-box {
    height: 6rem;
    width: 6rem;
    border-radius: 10px;
}

.notidication-container:hover {
    background: var(--lighGreyAColor) !important;
}

/*------------------
  18. Address Container
--------------------*/

.ship-bill-container {
    background: var(--lighGreyAColor) !important;
    border: 1px solid var(--lighGreyCColor);
    border-radius: 5px;
    padding: 1.8rem;
}

.address-item-body {
    /*max-height: 0;*/
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    display: none;
}

/*------------------
  19. My Order Page 
--------------------*/

.order-item-header {
    padding: 0.2rem 0 0.8rem 0;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.order-item-header::after {
    content: "\002B";
    font-size: 1.8rem;
    font-weight: bold;
    position: absolute;
    right: 1rem;
}

.order-item-header.active::after {
    content: "\2212";
}

.order-item-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.order-item-body-content {
    padding: 1rem;
    line-height: 1.5;
    border-top: 1px solid #34495e;
}

.status-delivery {
    /* background: var(--greenColor); */
    /* padding: 0.5rem 1rem; */
    border-radius: 20px;
    /* color: #fff; */
    /* margin-right: 4rem; */
    text-align: center;
    width: 92px;
    background: #eff0f5;
    color:black;
}

.quanlity-item {
    position: absolute;
    top: -10px;
    right: 0px;
    width: 30px;
    height: 30px;
    line-height: 31px;
    background: #000;
    color: #fff;
    text-align: center;
    font-style: normal;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 0.8rem;
}

.contact-seller {
    background: var(--lighGreyCColor);
    padding: 0.5rem;
    max-width: 135px;
    width: 100%;
    border-radius: 20px;
    color: #fff;
    margin-right: 4rem;
}

/* Tab Bar */
.nav-order-status {
    padding: 1rem !important;
}

#orderStatusNavTab .nav-link.active {
    background: var(--goldColor);
    border-radius: 5px 5px 0 0;
    color: var(--whiteColor) !important;
}

#orderStatusNavTab .nav-link {
    color: var(--goldColor) !important;
    font-weight: bold;
}

#orderStatusNavTab nav {
    border-bottom: 2px solid var(--goldColor);
}

/*------------------
  20. Wallet Page
--------------------*/

.bg-wallet-box {
    background: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/bg-wallet-active.svg);
    opacity: 0.5;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2.3rem !important;
    border-radius: 10px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
    /* max-width: 500px !important;
    width: 100% !important; */
}

.bg-topupWallet-box {
    background: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/bg-wallet-big.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}

.bg-wallet-box.active {
    opacity: 1;
}

.bg-wallet-box:hover {
    opacity: 1;
}

.wallet-input-content {
    padding-top: 50px;
}

.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-wrapper input {
    background: transparent;
}

.input-wrapper .line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--goldColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.2s ease-out;
}

.input-wrapper input {
    font-size: 1.5rem;
    color: #fff;
    border: none;
    border-bottom: 2px solid #fff;
    width: 100%;
}

.input-wrapper input:focus {
    outline: none;
}

.input-wrapper input:focus ~ .line {
    transform: scaleX(1);
}

.input-wrapper input:focus ~ label {
    -webkit-animation: anim-1 0.3s forwards;
    animation: anim-1 0.3s forwards;
}

@-webkit-keyframes anim-1 {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(1em, 0, 0);
        transform: translate3d(1em, 0, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(-1em, 0, 0);
        transform: translate3d(-1em, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anim-1 {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(1em, 0, 0);
        transform: translate3d(1em, 0, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(-1em, 0, 0);
        transform: translate3d(-1em, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 40, 0);
    }
}

/*------------------
  21. Product Details Swiper
--------------------*/

.swiper-container {
    width: 100%;
    height: 500px;
}

.product-carousel {
    box-sizing: border-box;
    height: 127px;
    padding: 10px 0;
}

.product-carousel .swiper-slide-thumb-active {
    opacity: 1 !important;
}

.product-carousel .swiper-slide {
    opacity: 0.4;
}

.swiper-slide {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.opt-header {
    width: 100px;
}

.custom-border {
    /* cursor: pointer;
    border: 2px solid #000;
    border-radius: 5px;
    padding: 8px 32px;
    min-width: 200px;
    text-align: center; */
    padding: 8px 32px;
    border-radius: 5px;
    border: 2px solid #000;
    cursor: pointer;
}

.border-color{

}

.custom-border:hover {
    color: #fff !important;
    background-color: var(--goldColor);
}

.custom-border__selected {
    color: #fff !important;
    background-color: var(--goldColor);
}

.qty-input {
    width: 80px;
}

/*------------------
  22. Color Radio Button
--------------------*/

.choice-1 {
    background-color: #837fff;
}

.choice-2 {
    background-color: #ff4949;
}

.choice-3 {
    background-color: #399d89;
}

.color-choices {
    /* width: 100%; */
    float: left;
    position: relative;
}

.color-choices div {
    padding: 0 5px;
    width: 33%;
    height: 35px;
    float: left;
    text-align: center;
}

.color-choices div input {
    width: 0px;
    height: 0px;
    position: absolute;
    top: -99999px;
    left: -99999px;
}

.color-choices div input:checked ~ label:after {
    width: 49px;
    height: 49px;
    margin-top: -32.5px;
    margin-left: -32.5px;
}

.color-choices div:nth-of-type(1) label:before {
    background-color: #837fff;
}

.color-choices div:nth-of-type(1) label:after {
    background-color: #cdccff;
}

.color-choices div:nth-of-type(2) label:before {
    background-color: #ff4949;
}

.color-choices div:nth-of-type(2) label:after {
    background-color: #ff9696;
}

.color-choices div:nth-of-type(3) label:before {
    background-color: #399d89;
}

.color-choices div:nth-of-type(3) label:after {
    background-color: #5ec5b0;
}

.color-choices div label {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    z-index: 20;
}

.color-choices div label:before {
    content: "";
    width: 37px;
    height: 37px;
    display: inline-block;
    background: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -26px;
    margin-left: -26px;
    border-radius: 50%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 10;
}

.color-choices div label:after {
    content: "";
    width: 37px;
    height: 37px;
    background-color: rgba(0, 0, 0, 0.3);
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -26px;
    margin-left: -26px;
    border-radius: 50%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 9;
}

.color-choices div label:hover {
    cursor: pointer;
}

/*------------------
  23. Custom Product Details & Review Tab
--------------------*/

#desc-nav-tab.nav-tabs {
    border-bottom: 0px;
}

#desc-nav-tab .nav-item.show .nav-link,
#desc-nav-tab .nav-link.active {
    color: var(--goldColor) !important;
    background-color: transparent;
    border: 0px;
    border-bottom: 4px solid !important;
}

#desc-nav-tab .nav-link:hover,
#desc-nav-tab .nav-link:focus {
    border: 0px;
}

#desc-nav-tab .nav-link {
    color: var(--greyColor) !important;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    border: 0px;
}

.desc-info-txt p {
    line-height: 2rem;
    font-size: 1rem;
    color: var(--greyColor);
}

/*------------------
    24. Banner Offer Ribbon Box
--------------------*/

.offer-ribbon {
    padding: 0.5rem;
    background-color: var(--yellowColor);
    border-radius: 5px;
}

.ribbon-container {
    position: relative;
}
/*------------------
    25. Filter Box
--------------------*/

.filter-box {
    border: 1px solid var(--goldColor) !important;
    padding: 10px 15px;
    margin: 5px;
    font-size: 1rem !important;
    border: none;
}

/*------------------
    26. Custom Check Box Slider
--------------------*/

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    vertical-align: middle;
}

.toggle-switch input {
    display: none;
}

.toggle-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 34px;
}

.toggle-switch-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .toggle-switch-slider {
    background-color: var(--goldColor);
}

input:focus + .toggle-switch-slider {
    box-shadow: 0 0 1px var(--goldColor);
}

input:checked + .toggle-switch-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/*------------------
  27. Custom Account Setting Vertical Tab
--------------------*/

#v-acc-setting-tab a {
    color: var(--lighGreyBColor) !important;
}

#v-acc-setting-tab .nav-link.active,
#v-acc-setting-tab .nav-link.active h6,
#v-acc-setting-tab .show > .nav-link {
    color: var(--goldColor) !important;
    background: transparent;
}

#v-acc-setting-tab .nav-link {
    display: block;
    padding: 0.4rem 0rem;
}

.upgrade-merchant-status {
    display: flex;
    align-items: center;
}

.upgrade-merchant-icon {
    max-width: 12px;
    width: 100%;
}

.id-upload-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    height: 100%;
    border: 1px solid var(--lighGreyCColor);
    background: var(--lighGreyAColor);
    border-radius: 5px;
}

.id-upload-container img {
    max-width: 90px;
    width: 100%;
}

#editBankInfoContent {
    display: none;
}

#addNewAddressBookContent {
    display: none;
}

/*------------------
  29. Rebate Tab - Progress Bar
--------------------*/

.progress {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    height: 2rem !important;
    background-color: #e9ecef;
    align-items: center;
    text-align: right;
    justify-content: space-between;
}

.progress .progress-bar {
    transition: unset;
    text-align: left !important;
    padding: 10px;
}

.pg-linear-orange {
    background: linear-gradient(#ffc107, #ff7907) !important;
}

.pg-linear-green {
    background: linear-gradient(#15ff02, #0c9301) !important;
}

.rebate-box {
    border-radius: 5px;
    padding: 2px;
    text-align: center;
    color: var(--whiteColor);
}

.rebate-header-num {
    position: absolute;
    left: 50%;
    top: 50%;
    color: var(--whiteColor);
    font-size: 1.5rem;
    transform: translate(-50%, -50%);

}

.rebate-header-text-1 {
    position: absolute;
    left: 22%;
    top: 32px;
    font-size: 1.2rem;
    color: var(--goldColor);
}

.rebate-header-text-2 {
    position: absolute;
    right: 22%;
    top: 32px;
    font-size: 1.2rem;
    color: var(--goldColor);
}

/* .pg-linner-dark-orange {
    background: linear-gradient(#D19D01, #D95300) !important;
} */

/* .progress-title-holder {
    display: flex;
    padding-bottom: 7px;
    margin: 2px 0 4px 0;
    font-size: 15px;
    line-height: 15px;
    color: #2e2e2e;
    align-items: center;
    justify-content: space-between;
}

.progress-number-container {
    display: flex;
    justify-content: space-between;
}

 */

/*------------------
  30. Merchant Upgrade - Merchant Tab Navigate
--------------------*/

.s-point-box {
    padding: 10px;
    border-radius: 5px;
}

.s-point-box h6 {
    color: #edd9be;
}

.upload-img-box img {
    max-width: 180px;
    width: 100%;
}

#mechant-nav-Tab .nav-link {
    padding: 0.5rem 2rem;
}

#mechant-nav-Tab .nav-link.active {
    background-color: var(--lightGold);
}

.bank-info-container {
    border-radius: 5px;
}

.bank-info-header {
    border-radius: 5px 5px 0 0;
}

/*------------------
  31. Company info _ Address Container
--------------------*/

.company-address-container {
    border-radius: 5px;
}

/*------------------
  32. My Follower
--------------------*/
.follower-img-container {
    border-radius: 50%;
    max-width: 55px;
    width: 100%;
}

.follower-font-size {
   font-size: 15px;
}

.follower-data-font-size{
    font-size: 13px;
}

.nav-Follower {
    padding: 1rem 3rem !important;
}

/*------------------
  33. Create Payment Page - Wallet
--------------------*/
.bg-wallet-payment {
    background: url(https://cdn-metarewards.securevws.com/medias/MR_DEV/GB1/IMAGE/bg-wallet-active.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--whiteColor);
    padding: 2rem !important;
    border-radius: 10px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
}

.bg-wallet-payment .wallet-balance-section span {
    font-size: 1.5rem;
}

/*------------------
    34. Otp Modal
--------------------*/

.digit-group input {
    width: 35px;
    height: 40px;
    border: 1px solid var(--orangeColor);
    /*line-height: 50px;*/
    text-align: center;
    font-weight: 400;
    color: var(--orangeColor);
    margin: 3px 3px;
    border-radius: 3px;
}

.digit-group input[type="number"]::-webkit-outer-spin-button,
.digit-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.can-click {
    cursor: pointer;
}

#submit-otp-btn:disabled {
    opacity: 0.5;
}

/*------------------
  35. Produc Item
--------------------*/

.long-title-truncate {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-size: 13px !important;
    height: 20px;
}

.mg-10 {
    margin: 10px;
}

.mg-9 {
    margin: 9px;
}

.title-height {
    height: 45px !important;
}

/* .swiper-title-height{
    height: 25px !important;
} */

.mgb-10 {
    margin-bottom: 10px;
}

/*------------------
  36. Mobile Prefix
--------------------*/

#prefix-group .dropdown-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

#prefix-group .dropdown-item {
    display: flex;
    height: 40px;
    min-width: max-content;
}

#prefix-group .dropdown-item:hover {
    background-color: aliceblue;
    cursor: pointer;
}

#prefix-group .dropdown-item.selected {
    background-color: aliceblue;
}

#prefix-group .dropdown-item img {
    margin-right: 10px;
    height: 20px;
    width: 20px;
}

#prefix-group .dropdown-item .dropdown-item--group {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*------------------
  37. Multi Select
--------------------*/
.dropdown.bootstrap-select.show-tick{
    width: 100%!important;
}
.dropdown.bootstrap-select .dropdown-toggle{
    padding: .85rem 0.75rem;
    width: 100%;
}
ul.dropdown-menu li a.dropdown-item{
    color: #495057!important;
}

/*------------------
  38. Custom Message
--------------------*/
.incomplete-msg{
    color: #555;
    font-size: 1.125rem;
    text-align: center;
    width: 100%;
}

.short_link{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*------------------
  39. Swal Design
--------------------*/
.swal2-cancel{
    margin: 0 0.5rem!important;
}

.swal2-confirm{
    margin: 0 0.5rem!important;
}

.swal2-popup{
    width: 24em !important;

}

.swal2-cart-popup{
    width: 32em !important;
}

.view_more{
    color:black!important
}

/*------------------
  40. Merchant Design
--------------------*/
.merchant_portlet{
    height: 8rem;
    padding: 1.5625rem;
}

.merchant-box{
    width: 440px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 1px solid rgba(0,0,0,.05);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
}

.merchant-details{
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex;
}

.light_font{
    font-size:.875rem; 
    color: rgba(0,0,0,.54); 
    text-transform: capitalize;
}

.merchant-image {
	width: 5rem;
    height: 5rem;
    border: none;
    display: inline-block;
    /* width: 1.875rem;
    height: 1.875rem; */
    position: relative;
    border-radius: 50%;
    /* border: .0625rem solid rgba(0,0,0,.09); */
    /* -moz-box-sizing: border-box; */
    box-sizing: border-box;
}  

.merchant-logo{
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/*--------------------
    41. Review Modal
---------------------*/

.star-container {
    text-align: center;
    display: flex;
    flex-direction: column;
}
.inner-content input[type="radio"] {
    display: none;
}
.inner-content i {
    color: #dddddd;
    font-size: 25px;
    cursor: pointer;
}
.inner-content input[type="radio"]:checked ~ label i {
    color: #e7a532;
}
.inner-content {
    direction: rtl;
    width: 100%;
}
.inner-content h3 {
    margin: 0 0 15px 0;
    font-size: 24px;
}

.icon-close {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: 2.5rem;
    height: 1.560rem;
    width: 1.560rem;
    /* display: -webkit-box; */
    /* display: -webkit-flex; */
    /* display: -moz-box; */
    /* display: -ms-flexbox; */
    display: flex;
    -webkit-box-align: center;
    /* -webkit-align-items: center; */
    /* -moz-box-align: center; */
    /* -ms-flex-align: center; */
    align-items: center;
    -webkit-box-pack: center;
    /* -webkit-justify-content: center; */
    /* -moz-box-pack: center; */
    /* -ms-flex-pack: center; */
    justify-content: center;
    position: absolute;
    /* -moz-box-sizing: border-box; */
    box-sizing: border-box;
    background-color: #ffffff;
    top: -.625rem;
    right: -.625rem;
    border-radius: 50%;
    border: 1px solid #fff;
}

.cursor-pointer{
    cursor:pointer;
}

.btn-xs-claim{
    padding: 2px 5px!important;
}

.bg-response{
    background: #ececea;
}

.same-store-slick-middle {
    width: 160px;
    height: 160px;
}

.same-store-slick-img img {
    width: 160px;
    height: 160px;
}

.same-store-slick-hover-zoom-icon {
    top: 37%;
    left: 33%;
    width: 60px;
}

.same-store-hover-list-zoom-icon{
    top: 38%;
}

.same-store-hover-list-zoom-icon img{
    width: 60px;
    height: 60px;
}

.related-product-slick-middle{
    width: 160px;
    height: 160px;
}

.related-product-slick-img img {
    width: 160px;
    height: 160px;
}

.related-product-hover-zoom-icon {
    top: 37%;
    left: 33%;
    width: 60px;
}

.related-product-hover-zoom-icon{
    top: 38%;
}