.close-modal,
.login-close-btn {
  cursor: pointer;
  font-size: 20px;
}
label.error {
  font-size: 11px;
  color: red;
}
.error,
.rating-stars ul > li.star {
  display: inline-block;
}
.errors label.error {
  font-size: 15px;
}
.require:after {
  content: "*";
  color: #ff4d4d;
}
.rating-stars ul {
  list-style-type: none;
  padding: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.rating-stars ul > li.star > i.fa {
  font-size: 1.5em;
  color: #ccc;
}
.rating-stars ul > li.star.hover > i.fa,
.rating-stars ul > li.star.selected > i.fa {
  color: #fcca19;
}
.hide-checkbox {
  opacity: 0;
  position: absolute;
  left: 9999px;
}
label.success {
  font-size: 11px;
  color: #328544;
}
.user-profile #address,
.user-profile #date,
.user-profile #select {
  outline: 0;
  position: relative;
  width: 100%;
  height: 42px;
}
.user-profile input[type="date"]::-webkit-calendar-picker-indicator {
  background: 0 0;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
.custom-modal-over,
.display-none {
  display: none;
}
.text-color-red {
  color: red;
}
.disable_a_href {
  pointer-events: none;
}
.custom-modal-overlay {
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
.close-modal {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 0 10px;
  border-radius: 20px;
  background: #7f0c0c4f;
  color: #918b8b;
  font-weight: 700;
  border: 1px solid #b9a5a58c;
}
.close-modal:hover {
  color: #eee;
}
.bg-custom-red {
  background-color: red;
}
.bg-custom-pinks {
  background-color: pink;
}
.bg-custom-yellow {
  background-color: #ff0;
}
.bg-custom-skies {
  background-color: #87ceeb;
}
.bg-custom-white {
  background-color: #fff;
}
.bg-custom-green {
  background-color: #093;
}
.bg-custom-gray {
  background-color: grey;
}
.bg-custom-orange {
  background-color: orange;
}
.bg-custom-blue {
  background-color: #00f;
}
.bg-custom-black {
  background-color: #000;
}
.bg-custom-purple {
  background-color: purple;
}
.bg-custom-maroon {
  background-color: maroon;
}
.bg-custom-beige {
  background-color: beige;
}
.login-close-btn {
  position: absolute;
  top: 5px;
  right: 14px;
  color: #777;
  transition: 0.5s;
}
.login-close-btn:hover {
  color: #222;
}
.text-color-black {
  color: #f7931a;
}
.ajax-loader {
  margin: 15px;
  padding: 0;
  height: auto;
  border-radius: 5px;
}
.skeleton-box {
  position: relative;
  overflow: hidden;
  background-color: #f3f3f3;
}
.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, rgba(255, 255, 255, 0)),
    color-stop(20%, rgba(255, 255, 255, 0.2)),
    color-stop(60%, rgba(255, 255, 255, 0.5)),
    to(rgba(255, 255, 255, 0))
  );
  background-image: -o-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  -webkit-animation: 3s infinite shimmer;
  animation: 3s infinite shimmer;
  content: "";
}
@-webkit-keyframes shimmer {
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
@keyframes shimmer {
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}
#res-loader {
  height: 50vh;
}
#loading-spinner,
.loading-spinner {
  display: block;
  margin: 0 auto;
  -webkit-animation: 2s linear infinite loading-spinner-spin;
  animation: 2s linear infinite loading-spinner-spin;
  will-change: transform;
}
@-webkit-keyframes loading-spinner-spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-spinner-spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
#loading-circle,
.loading-circle {
  stroke-dasharray: 105;
  stroke-dashoffset: 105;
  stroke-linecap: round;
  -webkit-animation: 1.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite
    loading-spinner-small;
  animation: 1.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite
    loading-spinner-small;
  transform: translateZ(0);
  transform-origin: center;
  will-change: stroke-dashoffset;
}
#loading-circle-large,
.loading-circle-large {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  stroke-linecap: round;
  -webkit-animation: 1.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite
    loading-spinner-large;
  animation: 1.7s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite
    loading-spinner-large;
  transform: translateZ(0);
  transform-origin: center;
  will-change: stroke-dashoffset;
}
@-webkit-keyframes loading-spinner-large {
  0% {
    stroke-dashoffset: 190;
    transform: scaleY(1);
  }
  49.99% {
    stroke-dashoffset: 0;
    transform: scaleY(1);
  }
  50% {
    stroke-dashoffset: 0;
    transform: scaleY(-1) rotate(25deg);
  }
  100% {
    stroke-dashoffset: 190;
    transform: scaleY(-1) rotate(-32deg);
  }
}
@keyframes loading-spinner-large {
  0% {
    stroke-dashoffset: 190;
    transform: scaleY(1);
  }
  49.99% {
    stroke-dashoffset: 0;
    transform: scaleY(1);
  }
  50% {
    stroke-dashoffset: 0;
    transform: scaleY(-1) rotate(25deg);
  }
  100% {
    stroke-dashoffset: 190;
    transform: scaleY(-1) rotate(-32deg);
  }
}
.placeholder-loader-animation [data-placeholder]::after {
  content: " ";
  box-shadow: 0 0 50px 9px rgba(254, 254, 254);
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  animation: 1s infinite load;
}
@keyframes load {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}
html[dir="rtl"] .placeholder-loader-animation [data-placeholder]::after {
  right: -100%;
  left: unset;
  animation: 1s infinite loads;
}
@keyframes loads {
  0% {
    right: -100%;
  }
  100% {
    right: 150%;
  }
}
.compareText.compare-remove svg path {
  fill: var(--primary-color);
}
.compare-bg.compare-remove {
  background: var(--primary-color);
}
.star-color {
  color: var(--primary-color);
}
.m-p-0 {
  margin: 0;
  padding: 0;
}
.m-p-bt-0 {
  margin-bottom: 0;
  padding-bottom: 0;
}
.m-p-top-0 {
  margin-top: 0;
  padding-top: 0;
}
.align-items-center {
  align-items: center;
}
.margin-bottom-3px {
  margin-bottom: 3px;
}


    /* =========================================================
       CATEGORY CUSTOM SLIDER
    ========================================================= */

    .ss-category-slider {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        padding: 0 45px;
    }


    /* =========================================================
       VIEWPORT
    ========================================================= */

    .ss-category-slider-viewport {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-y;
    }


    .ss-category-slider-viewport.ss-category-dragging {
        cursor: grabbing;
    }


    /* =========================================================
       TRACK
    ========================================================= */

    .ss-category-slider-track {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;

        gap: 25px;

        width: max-content;

        transform: translate3d(0, 0, 0);

        transition: transform 0.45s cubic-bezier(.22,.61,.36,1);

        will-change: transform;
    }


    .ss-category-slider-track.ss-category-no-animation {
        transition: none;
    }


    /* =========================================================
       CATEGORY ITEM
    ========================================================= */

    .ss-category-slide-item {
        flex: 0 0 calc(
            (1320px - 250px) / 6
        );

        width: calc(
            (1320px - 250px) / 6
        );

        min-width: 0;

        box-sizing: border-box;

        transition:
            transform .25s ease;
    }


    .ss-category-slide-item:hover {
        transform: translateY(-5px);
    }


    .ss-category-slide-item > div {
        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease,
            background-color .25s ease;
    }


    .ss-category-slide-item:hover > div {
        background: #fff7f3 !important;

        border-color: #e8a16d !important;

        box-shadow:
            0 8px 22px rgba(84,21,104,.10);
    }


    /* =========================================================
       NAVIGATION BUTTON
    ========================================================= */

    .ss-category-slider-btn {
        position: absolute;

        top: 50%;
        transform: translateY(-50%);

        width: 38px;
        height: 38px;

        padding: 0;
        margin: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 1px solid #ead8d1;
        border-radius: 50%;

        background: #fff;

        color: #541568;

        box-shadow:
            0 3px 12px rgba(0,0,0,.08);

        cursor: pointer;

        z-index: 20;

        transition:
            background-color .2s ease,
            color .2s ease,
            border-color .2s ease,
            box-shadow .2s ease,
            opacity .2s ease;
    }


    .ss-category-slider-prev {
        left: 0;
    }


    .ss-category-slider-next {
        right: 0;
    }


    .ss-category-slider-btn span {
        display: block;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 25px;
        font-weight: 400;

        line-height: 1;

        margin-top: -2px;
    }


    .ss-category-slider-btn:hover:not(:disabled) {
        background: #541568;

        color: #fff;

        border-color: #541568;

        box-shadow:
            0 5px 15px rgba(84,21,104,.20);
    }


    .ss-category-slider-btn:disabled {
        opacity: .25;
        cursor: default;
    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1199px) {

        .ss-category-slider-track {
            gap: 22px;
        }

        .ss-category-slide-item {
            flex-basis: calc(
                (100vw - 160px) / 5
            );

            width: calc(
                (100vw - 160px) / 5
            );
        }

    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 991px) {

        .ss-category-slider {
            padding-left: 42px;
            padding-right: 42px;
        }


        .ss-category-slider-track {
            gap: 20px;
        }


        .ss-category-slide-item {
            flex-basis: calc(
                (100vw - 130px) / 4
            );

            width: calc(
                (100vw - 130px) / 4
            );
        }

    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 767px) {

        .ss-category-slider {
            padding-left: 38px;
            padding-right: 38px;
        }


        .ss-category-slider-track {
            gap: 15px;
        }


        .ss-category-slide-item {
            flex-basis: calc(
                (100vw - 91px) / 3
            );

            width: calc(
                (100vw - 91px) / 3
            );
        }


        .ss-category-slider-btn {
            width: 32px;
            height: 32px;
        }


        .ss-category-slider-btn span {
            font-size: 21px;
        }


        .ss-category-slide-item > div {
            width: 95px !important;
            height: 95px !important;
        }


        .ss-category-slide-item svg {
            width: 58px !important;
            height: 58px !important;
        }


        .ss-category-slide-item h4 {
            font-size: 12.5px !important;
        }

    }


    /* =========================================================
       SMALL MOBILE
    ========================================================= */

    @media (max-width: 480px) {

        .ss-category-slider {
            padding-left: 34px;
            padding-right: 34px;
        }


        .ss-category-slider-track {
            gap: 12px;
        }


        .ss-category-slide-item {
            flex-basis: calc(
                (100vw - 80px) / 2
            );

            width: calc(
                (100vw - 80px) / 2
            );
        }


        .ss-category-slide-item > div {
            width: 88px !important;
            height: 88px !important;
        }


        .ss-category-slide-item svg {
            width: 53px !important;
            height: 53px !important;
        }


        .ss-category-slide-item h4 {
            font-size: 12px !important;
        }

    }