/*!***************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/App.css ***!
  \***************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap);
/*!*******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/App.css (1) ***!
  \*******************************************************************/
html {
  font-family: 'Bebas Neue Pro Normal', sans-serif;
  --Linear: linear-gradient(300deg, #55FFE9 5.61%, #66FDE3 10.22%, #93F9D6 19.46%, #DBF3C0 32.24%, #FFF1B6 38.1%, #FCE8B7 41.21%, #F6D0BA 46.09%, #ECAABE 56.66%, #DF75C5 66.87%, #CD31CD 76.19%, rgba(188, 0, 211, 0.80) 81.52%, rgba(176, 0, 208, 0.80) 84.16%, rgba(156, 0, 204, 0.80) 86.4%, rgba(127, 0, 199, 0.70) 89.51%, rgba(83, 0, 191, 0.70) 94.39%);
  --Linear2: linear-gradient(290deg, #55FFE9 5.61%, #66FDE3 10.22%, #93F9D6 19.46%, #DBF3C0 32.24%, #FFF1B6 38.1%, #FCE8B7 41.21%, #F6D0BA 46.09%, #ECAABE 56.66%, #DF75C5 66.87%, #CD31CD 76.19%, rgba(188, 0, 211, 0.80) 81.52%, rgba(176, 0, 208, 0.80) 84.16%, rgba(156, 0, 204, 0.80) 86.4%, rgba(127, 0, 199, 0.70) 89.51%, rgba(83, 0, 191, 0.70) 94.39%);
  --LinearLeftHalf: linear-gradient(300deg, #DF75C5 16.87%, #CD31CD 36.19%, rgba(188, 0, 211, 0.80) 51.52%, rgba(176, 0, 208, 0.80) 59.16%, rgba(156, 0, 204, 0.80) 70.4%, rgba(127, 0, 199, 0.70) 80.51%, rgba(83, 0, 191, 0.70) 90.39%);
  --LinearRightHalf: linear-gradient(300deg, #55FFE9 10.61%, #66FDE3 20.22%, #93F9D6 39.46%, #DBF3C0 62.24%, #FFF1B6 76.1%, #FCE8B7 81.21%, #F6D0BA 90.09%, #ECAABE 95.66%);
  --Linear-blue: linear-gradient(179deg, #82FFD9 8.34%, #183F7D 91.66%);
}

body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  overflow-x: hidden;

  --bs-body-font-family: 'Bebas Neue Pro Normal';
}

button, table, tr, td, th {
  font-family: 'Bebas Neue Pro Normal', sans-serif;
}
button{
  font-size: 14px;
}

svg,
img {
  vertical-align: baseline;
}

.no-scroll {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.gradientBorder {
  background:
    linear-gradient(white, white) padding-box,
    var(--Linear2) border-box;
  border: 10px solid transparent;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99;
}

/* Templates to be copied over to other pages: DO NOT DELETE */

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}
/*!*****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/assets/Font/fonts.css ***!
  \*****************************************************************************/
@font-face {
    font-family: 'Bebas Neue Pro Normal';
    src: url(/fonts/BebasNeuePro-ExpandedRegular.ttf) format('opentype');
    font-weight: lighter;
    font-style: normal;
}
@font-face {
    font-family: 'Bebas Neue Pro Light';
    src: url(/fonts/BebasNeuePro-ExpandedMedium.ttf) format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bebas Neue Pro Bold';
    src: url(/fonts/BebasNeuePro-ExpandedBold.ttf) format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Bebas Neue Pro Light Italic';
    src: url(/fonts/BebasNeuePro-ExpandedItalic.ttf) format('opentype');
    font-weight: bold;
    font-style: normal;
}

/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Utils/AnimattedNumber/DigitAnimation.scss ***!
  \**************************************************************************************************************************************************/
.price-container {
  margin: 0;
  padding: 0;
  display: inline-flex;
  position: relative;
  align-items: baseline;
  margin-right: 5px;
}
.price-container .digit {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.price-container .digit::after {
  content: attr(data-previous);
  position: absolute;
  width: 0.6em;
  height: 1em;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
  transform: translateY(0);
}
.price-container .digit.animate::after {
  animation: spinDigit 0.5s ease-in-out forwards;
}

@keyframes spinDigit {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.blinking {
  animation: blinkEffect 0.75s step-start infinite;
}

@keyframes blinkEffect {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/HeaderComponent/ExitCurrentPrice.scss ***!
  \*****************************************************************************************************************************************************/
.exitPrice {
  padding-right: 20px;
  position: relative;
}
.exitPrice .currentTokenPriceBTN.hint-mode {
  transition: transform 0.3s ease;
  animation: pulse-animation 2s infinite;
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1019607843);
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px #b3bbc8;
  }
  100% {
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
  }
}
.exitPrice .currentTokenPriceBTN {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  background-color: #e9eef6;
  border: 0.5px solid #d4d9e1;
  border-radius: 24px;
  margin-bottom: 0;
  height: 45px;
  padding: 0px 12px;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.exitPrice .currentTokenPriceBTN:hover {
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
  transform: scale(1.015);
}
.exitPrice .currentTokenPriceBTN .selectedTokenSymbol {
  display: flex;
  align-items: center;
}
.exitPrice .currentTokenPriceBTN .selectedTokenSymbol p {
  margin-left: 3px;
  font-size: 12px;
}
.exitPrice .currentTokenPriceBTN .img-heartbeat {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}
.exitPrice .currentTokenPriceBTN #chevron-icon.wiggle {
  margin-left: 3px;
  animation: wiggle 2s infinite ease-in-out;
  transform-origin: center;
}
@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(-10deg);
  }
  45% {
    transform: rotate(5deg);
  }
  60% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.exitPrice .hover-text {
  display: none;
  cursor: default;
  position: absolute;
  left: 100%;
  transform: translateX(-110%);
  white-space: nowrap;
  font-size: 14px;
  border: 0.25px solid #eee;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
  width: 200px;
  max-width: 300px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.exitPrice .hover-text .tooltip-title {
  text-wrap: wrap;
  margin-top: 5px;
}
.exitPrice .hover-text .tooltip-button {
  padding: 7px;
  color: #fff;
  background: #000;
  width: fit-content;
  margin: 10px 0 0;
  text-align: right;
  border-radius: 10px;
  cursor: pointer;
}
.exitPrice .hover-text.show {
  display: block;
  bottom: -255%;
  left: 100%;
}
.exitPrice .hover-text.show-payment {
  display: block;
  bottom: -168%;
  left: 100%;
}
.exitPrice .hover-text-fresh-price {
  cursor: default;
  position: absolute;
  bottom: -198%;
  left: 100%;
  transform: translateX(-110%);
  white-space: nowrap;
  font-size: 14px;
  border: 0.25px solid #eee;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
  width: 200px;
  max-width: 300px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.exitPrice .hover-text-fresh-price .tooltip-title {
  text-wrap: wrap;
  margin-top: 5px;
}
.exitPrice .hover-text-fresh-price .tooltip-button {
  padding: 7px;
  color: #fff;
  background: #000;
  width: fit-content;
  margin: 10px 0 0;
  text-align: right;
  border-radius: 10px;
  cursor: pointer;
}
.exitPrice .hover-text-fresh-price .tooltip-button svg {
  fill: #fff;
  height: 10px;
  width: 10px;
}
.exitPrice .tooltip.active {
  display: block;
}
.exitPrice .tooltip {
  display: none;
  position: absolute;
  left: -100px;
  top: 100%;
  background-color: #fff;
  border-radius: 10px;
  white-space: nowrap;
  border-top: 5px solid #10161c;
  border-left: 0.5px solid #10161c;
  border-right: 0.5px solid #10161c;
  border-bottom: 0.5px solid #10161c;
  z-index: 999;
  box-sizing: border-box;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}
.exitPrice .tooltip .priceTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: "Bebas Neue Pro Light";
}
.exitPrice .tooltip .priceTable th,
.exitPrice .tooltip .priceTable td {
  padding: 7px 20px;
  text-align: left;
  vertical-align: center;
  color: #777;
  position: relative;
}
.exitPrice .tooltip .priceTable th .tokenIcon,
.exitPrice .tooltip .priceTable td .tokenIcon {
  height: 25px;
}
.exitPrice .tooltip .priceTable th .networkTokenCamp,
.exitPrice .tooltip .priceTable td .networkTokenCamp {
  position: absolute;
  bottom: 1px;
  right: 15px;
}
.exitPrice .tooltip .priceTable th .networkTokenCamp .networkToken,
.exitPrice .tooltip .priceTable td .networkTokenCamp .networkToken {
  background-color: #fff;
  z-index: 10;
  height: 15px;
  border: 1.5px solid #eee;
  border-radius: 50%;
}
.exitPrice .tooltip .priceTable th {
  color: #fff;
  background-color: #10161c;
  font-family: "Bebas Neue Pro Bold";
  font-size: 14.5px;
}
.exitPrice .tooltip .priceTable tbody {
  border-radius: 10px;
}
.exitPrice .tooltip .priceTable tbody .eachTokenRow.active {
  background-color: #eeeeee;
}
.exitPrice .tooltip .priceTable tbody .eachTokenRow.active td {
  font-weight: bold;
  color: #000;
}
.exitPrice .tooltip .priceTable tbody .eachTokenRow:hover {
  background-color: #dddddd;
  cursor: pointer;
}
.exitPrice .tooltip .priceTable th,
.exitPrice .tooltip .priceTable td,
.exitPrice .tooltip .priceTable table {
  border: none;
}
.exitPrice .tooltip .priceTable tfoot {
  font-family: "Bebas Neue Pro Bold";
  border-top: 0.75px solid #999;
}
.exitPrice .tooltip .priceTable tfoot td {
  vertical-align: middle;
}
.exitPrice .tooltip .priceTable tfoot td img {
  padding: 0;
  margin: 0;
}
.exitPrice .tooltip .timer {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  color: #fff;
  background-color: #10161c;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-family: "Bebas Neue Pro Bold";
}
.exitPrice .tooltip .timer div {
  margin: 0 2px;
  font-size: 14px;
}
.exitPrice .tooltip.error {
  border: none;
  top: 50%;
  max-width: 200px;
  text-wrap: wrap;
}
.exitPrice .tooltip.error::before, .exitPrice .tooltip.error::after {
  display: none;
}
.exitPrice .img-heartbeat {
  height: 20px;
  width: 20px;
}

@media (max-width: 840px) {
  .exitPrice {
    padding-right: 10px;
  }
  .exitPrice .currentTokenPriceBTN #chevron-icon {
    margin-left: 0;
  }
  .exitPrice .currentTokenPriceBTN .tokenPrice {
    display: none;
  }
  .exitPrice .tooltip {
    display: none;
    position: absolute;
    left: -176px;
    top: 100%;
  }
  .exitPrice .tooltip::before, .exitPrice .tooltip::after {
    left: 75%;
  }
  .exitPrice .tooltip .priceTable th,
  .exitPrice .tooltip .priceTable td {
    padding: 10px 10px;
  }
}
.exitPrice.notAllowed {
  cursor: no-drop;
}
/*!***********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/HeaderComponent/RightIcons.scss ***!
  \***********************************************************************************************************************************************/
.rightIcon {
  position: relative;
}
.rightIcon img {
  height: 20px;
}

.userIcon, .rewardsIcon {
  position: relative;
  cursor: pointer;
}
.userIcon .red-dot, .rewardsIcon .red-dot {
  position: absolute;
  top: -10px;
  right: -7px;
  width: 9px;
  height: 9px;
  background-color: #f14444;
  border-radius: 50%;
  border: 2px solid white;
}

.hover-text {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-110%);
  white-space: nowrap;
  font-size: 12px;
  border: 0.25px solid #ccc;
  border-radius: 5px;
  padding: 2px 5px;
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.rewardsIcon svg {
  width: auto;
  height: 20px;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14%, 42% {
    transform: scale(1.3);
  }
  28%, 70% {
    transform: scale(1);
  }
}
@media (max-width: 690px) {
  .rightMenu .exitPrice {
    display: none;
  }
}
/*!**********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/Utils/Loading/SmallBarLoader/Loading.css ***!
  \**********************************************************************************************************/
.spinner {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
  }
  
  .spinner .spinner-blade {
    position: absolute;
    left: 0.4629em;
    bottom: 0;
    width: 0.074em;
    height: 0.2777em;
    border-radius: 0.0555em;
    background-color: #999;
    -webkit-transform-origin: center -0.2222em;
    -ms-transform-origin: center -0.2222em;
    transform-origin: center -0.2222em;
    animation: spinner-fade9234 1s infinite linear;
  }
  
  .spinner .spinner-blade:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  
  .spinner .spinner-blade:nth-child(2) {
    -webkit-animation-delay: 0.083s;
    animation-delay: 0.083s;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  
  .spinner .spinner-blade:nth-child(3) {
    -webkit-animation-delay: 0.166s;
    animation-delay: 0.166s;
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  
  .spinner .spinner-blade:nth-child(4) {
    -webkit-animation-delay: 0.249s;
    animation-delay: 0.249s;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .spinner .spinner-blade:nth-child(5) {
    -webkit-animation-delay: 0.332s;
    animation-delay: 0.332s;
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
  }
  
  .spinner .spinner-blade:nth-child(6) {
    -webkit-animation-delay: 0.415s;
    animation-delay: 0.415s;
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
  }
  
  .spinner .spinner-blade:nth-child(7) {
    -webkit-animation-delay: 0.498s;
    animation-delay: 0.498s;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  
  .spinner .spinner-blade:nth-child(8) {
    -webkit-animation-delay: 0.581s;
    animation-delay: 0.581s;
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
  }
  
  .spinner .spinner-blade:nth-child(9) {
    -webkit-animation-delay: 0.664s;
    animation-delay: 0.664s;
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
  }
  
  .spinner .spinner-blade:nth-child(10) {
    -webkit-animation-delay: 0.747s;
    animation-delay: 0.747s;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  
  .spinner .spinner-blade:nth-child(11) {
    -webkit-animation-delay: 0.83s;
    animation-delay: 0.83s;
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
  }
  
  .spinner .spinner-blade:nth-child(12) {
    -webkit-animation-delay: 0.913s;
    animation-delay: 0.913s;
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
  }
  
  @keyframes spinner-fade9234 {
    0% {
      background-color: #69717d;
    }
  
    100% {
      background-color: transparent;
    }
  }
/*!**********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/Modals/sharedModalStyles.css ***!
  \**********************************************************************************************/
.customAlertWrapperBox {
    position: relative;
    text-align: center;
}

#closeModalBtn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2rem;
    color: black;
    cursor: pointer;
    background: none;
    border: none;
}

#close-competition-end-modal-button {
    position: absolute;
    top: -1.3rem;
    right: -1.3rem;
    font-size: 1.2rem;
    color: black;
    cursor: pointer;
    background: none;
    border: none;
}

.textOverGradientBorder {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40%);

    font-size: 2.5rem;
    font-family: "Bebas Neue Pro Bold";
    font-weight: 700;
    background-color: #fff;
    text-wrap: nowrap;
    padding: 0 1rem;
    color: var(--black, #000);
}

.alertContent {
    margin-top: 1rem;
    padding: 3vh 5vh;
}

#blackBGButton {
    padding: 0.5rem 2rem;
    background: black;
    color: white;
    border: 0;
    font-family: "Bebas Neue Pro Bold";
}

.alertSubText {
    font-family: 'Bebas Neue Pro Light';
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: uppercase;
}

#circleBg {
    width: 10rem;
    height: 10rem;
    background-color: black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

#circleBg>b {
    font-weight: 700;
    font-size: 7rem;
    font-family: "Bebas Neue Pro Bold";
    color: #FFF;
}

.play-competition-modal-popup {
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
}

.play-competition-modal-popup .swal2-html-container {
    position: relative;
    margin-bottom: 1rem;
}

#play-competition-modal-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);

    background: #57FFE8;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
    border: 0;
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: "Bebas Neue";
    font-weight: 700;
    font-size: 1.5rem;
    width: 15.5em;
    cursor: pointer;
}

#close-play-competition-modal-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #fff;
    cursor: pointer;
    background: none;
    border: none;
}

.rainbowButtonForGame.cancel-btn {
    color: black;
    background-color: #d33;
}

.rainbowButtonForGame.play-btn {
    color: black;
}

.centerText {
    text-align: center;
}

.bigText {
    font-size: 2rem;
    font-weight: 700;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* // XXX-Large devices (xlarger desktops, 2000px and up) */
@media (min-width: 2000px) {
    .competition-end-popup {
        width: "28vw",
    }
}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .textOverGradientBorder {
        font-size: 2rem;
    }
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .competition-end-popup {
        width: "95vw",
    }

    .textOverGradientBorder {
        font-size: 1.1rem;
    }

    #play-competition-modal-button {
        width: 14em;
        font-size: 1.2rem;
    }
}

/* alert model code */
.alert-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.alert-modal {
    background-color: #fff;
    color: #000;
    padding: 3rem;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;

    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #000;
        cursor: pointer;
        text-decoration: underline;
    }
}

.alert-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.alert-message {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.alert-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.alert-button {
    font-family: 'Bebas Neue Pro Normal';
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;

    &.confirm {
        background-color: #000;
        color: #fff;

        &:hover {
            background-color: #333;
        }
    }

    &.cancel {
        background-color: #ccc;
        color: #000;

        &:hover {
            background-color: #bbb;
        }
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/Shared/AffiliateLevelDetailsComponent.module.css ***!
  \******************************************************************************************************************/
.BP3f_kGuY5i5JSp0C8td {
    display: flex;
    align-items: center;
    gap: 1rem;
    align-self: stretch;

    ul {
        line-height: 1.5;
    }
}

.k_QJrPhxjo4V7CxVX75p {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.5rem;
}

.ZofBwQ8SvkzbAAdJu1g8 {
    border-radius: 12px;
    color: white;
    width: fit-content;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 600;
    height: fit-content;
    justify-self: center;
}

.XijqWUI5FZNDNnCM6tPw>li {
    text-align: left;
}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .BP3f_kGuY5i5JSp0C8td {
        flex-direction: column;
        gap: 0;
    }
}
/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/HeaderComponent/Menu.scss ***!
  \*****************************************************************************************************************************************/
.sliderComponent {
  position: relative;
  overflow: scroll;
  z-index: 1001;
  height: 100vh;
}
.sliderComponent::-webkit-scrollbar {
  display: none;
}
.sliderComponent .logo-close {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}
.sliderComponent .logo-close .logo img {
  height: 40px;
}
.sliderComponent .logo-close .close {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.sliderComponent .logo-close .close span {
  font-weight: 300;
  font-size: 18px;
  margin: 0px 3px;
}
.sliderComponent .logo-close .close span:nth-child(2) {
  margin-top: 7px;
}
.sliderComponent .listOfMenus {
  padding: 0px 40px 20px;
}
.sliderComponent .listOfMenus .eachMenuItem {
  font-family: "Bebas Neue Pro Normal";
  text-transform: uppercase;
  font-size: 16px;
  margin: 1.5rem 0;
  cursor: pointer;
  width: fit-content;
  position: relative;
}
.sliderComponent .listOfMenus .eachMenuItem::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #999;
  transition: width 0.3s ease;
}
.sliderComponent .listOfMenus .eachMenuItem:hover::after {
  width: 100%;
}
.sliderComponent .menuDivider {
  height: 0.5px;
  width: 100%;
  background-color: #aaa;
  margin: 10px 0;
}
.sliderComponent .cross-line-right {
  display: table;
  white-space: nowrap;
}
.sliderComponent .cross-line-right::before, .sliderComponent .cross-line-right::after {
  border-top: 0.75px solid #999;
  content: "";
  display: table-cell;
  position: relative;
  top: 1rem;
}
.sliderComponent .cross-line-right::before {
  width: 3%;
}
.sliderComponent .cross-line-right::after {
  width: 97%;
}
.sliderComponent .cross-line-right span {
  padding: 0 10px 0 10px;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal";
  line-height: 30px;
  color: #000;
  text-transform: uppercase;
}
.sliderComponent .rightMenu {
  display: flex;
  align-items: center;
  padding: 20px 0 60px 40px;
  opacity: 0;
}
.sliderComponent .rightMenu .rightIcon {
  display: none;
  margin: 0 8px;
  cursor: pointer;
}
.sliderComponent .rightMenu .rightIcon img {
  height: 20px;
}
.sliderComponent .rightMenu .bell {
  font-size: 20px;
}
.sliderComponent .rightMenu .img-heartbeat {
  height: 30px;
  width: 30px;
}
.sliderComponent .metamask {
  position: relative;
  display: inline-block;
  /* or 'block' depending on your layout */
  cursor: pointer;
}
.sliderComponent .metamask img {
  width: 25px;
}
.sliderComponent .metamask .hover-text {
  position: absolute;
  bottom: -100%;
  left: 50%;
  transform: translateX(-110%);
  white-space: nowrap;
  font-size: 12px;
  border: 0.25px solid #ccc;
  border-radius: 5px;
  padding: 2px 5px;
}
.sliderComponent .metamask .status-indicator {
  position: absolute;
  top: -8px;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f16565;
  animation: pulse-green 2s infinite;
}
.sliderComponent .metamask .status-indicator.connected {
  background-color: green;
  animation: pulse-green 2s infinite;
}
.sliderComponent .metamask .status-indicator.disconnected {
  background-color: #f16565;
  animation: pulse-red 2s infinite;
}
@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(144, 238, 144, 0.9);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(144, 238, 144, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(144, 238, 144, 0);
  }
}
@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

@media (max-width: 690px) {
  .sliderComponent .rightMenu {
    opacity: 1;
  }
  .sliderComponent .rightMenu .rightIcon {
    display: inline-block;
    padding-bottom: 1.5rem;
  }
}
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/HeaderComponent/Search.scss ***!
  \*******************************************************************************************************************************************/
.searchingArea {
  padding: 10px 20px;
}
.searchingArea .headerSearch {
  margin: 0.75rem 0;
  color: #000;
  font-family: "Bebas Neue Pro Bold";
}
.searchingArea .searchInput {
  position: relative;
  display: flex;
  align-items: center;
}
.searchingArea .searchInput input[type=text] {
  width: 100%;
  padding: 8px 40px 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  font-family: "Bebas Neue Pro Normal", sans-serif;
}
.searchingArea .searchInput input[type=text]:focus {
  outline: none;
  border-color: #000;
}
.searchingArea .searchInput input[type=text]::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.searchingArea .searchInput span {
  position: absolute;
  right: 10px;
  cursor: pointer;
}
.searchingArea .searchOutput {
  margin: 1rem 0;
}
.searchingArea .searchOutput .searchRes {
  text-align: center;
  margin: 15px 0;
  color: #555;
}
.searchingArea .searchOutput .outputHeader {
  color: #000;
  font-size: 15px;
  font-family: "Bebas Neue Pro Bold";
}
.searchingArea .searchOutput .suggestedProduct {
  position: relative;
}
.searchingArea .searchOutput .suggestedProduct .loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.744);
}
.searchingArea .searchOutput .suggestedProduct .recentSearched .recentHeader {
  display: flex;
  justify-content: space-between;
}
.searchingArea .searchOutput .suggestedProduct .recentSearched .recentHeader .clearAllRecent {
  color: #000;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}
.searchingArea .searchOutput .suggestedProduct .recentSearched .listOfRecentSearch {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.searchingArea .searchOutput .suggestedProduct .recentSearched .eachRecent {
  border: 1px solid #000;
  padding: 5px 8px;
  border-radius: 50px;
  transition: all 0.2s ease-in-out;
  text-transform: capitalize;
  font-size: 12px;
  margin: 3px;
}
.searchingArea .searchOutput .suggestedProduct .recentSearched .eachRecent:hover {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
}
.searchingArea .searchOutput .suggestedProduct .eachSugProduct {
  padding: 3px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 5px;
}
.searchingArea .searchOutput .suggestedProduct .eachSugProduct:hover {
  background-color: #eeeeee;
}
.searchingArea .searchOutput .suggestedProduct .eachSugProduct .category_search {
  color: #555;
}
.searchingArea .searchOutput .suggestedProduct .eachSugProduct .searchOutputString {
  color: #555;
  margin: 0px;
}
.searchingArea .searchOutput .suggestedProduct .eachSugProduct .searchOutputString .boldText {
  color: #000;
  font-family: "Bebas Neue Pro Bold";
}
.searchingArea .searchOutput .allSearchBtn {
  margin-top: 1rem;
  text-decoration: underline;
  cursor: pointer;
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/Cart/Cart.scss ***!
  \******************************************************************************************************************************/
.product-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.342);
  transition: 0.3s;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  user-select: none;
}
.product-card .product-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  will-change: transform;
  transition: transform 0.3s ease-out;
}
.product-card .product-content .product-image {
  width: 80px;
  height: 80px;
}
.product-card .product-content .product-image img {
  max-width: 100%;
  height: auto;
}
.product-card .product-content .product-info {
  flex: 1;
  margin: 0 12px;
  margin-top: 0;
}
.product-card .product-content .product-info .product-name {
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 4px;
  position: relative;
  display: inline-block;
  font-family: "Bebas Neue Pro Bold";
}
.product-card .product-content .product-info .product-price {
  font-size: 15px;
  color: #333;
  margin: 5px 0;
  font-family: "Bebas Neue Pro Bold";
}
.product-card .product-content .product-info .productId {
  font-size: 13px;
  color: #333;
  margin: 5px 0;
  font-family: "Bebas Neue Pro Normal";
}
.product-card .product-content .product-info .product_sizes_select {
  display: flex;
}
.product-card .product-content .product-info .product_sizes_select select {
  font-size: 12px;
  border: 0.75px solid #aaa;
  font-family: "Bebas Neue Pro Normal";
  margin-left: 10px;
  border-radius: 5px;
}
.product-card .quanty_stocks .stock_warning {
  color: #f14444;
  font-size: 14px;
  margin-top: 7px;
  text-align: center;
}
.product-card .quanty_stocks .remove_btn {
  text-decoration: underline;
  cursor: pointer;
  color: #f14444;
  margin: 10px 0;
}
.product-card .qty-input {
  color: #000;
  background: rgba(238, 238, 238, 0.6156862745);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: fit-content;
  height: 30px;
  padding: 5px;
}
.product-card .qty-input .product-qty,
.product-card .qty-input .qty-count {
  background: transparent;
  color: inherit;
  font-weight: bold;
  font-size: 14px;
  border: none;
  display: inline-block;
  min-width: 0;
}
.product-card .qty-input .product-qty:focus,
.product-card .qty-input .qty-count:focus {
  outline: none;
}
.product-card .qty-input .product-qty {
  width: 30px;
  min-width: 0;
  display: inline-block;
  text-align: center;
  appearance: textfield;
}
.product-card .qty-input .product-qty::-webkit-outer-spin-button, .product-card .qty-input .product-qty::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.product-card .qty-input .qty-count {
  cursor: pointer;
  width: 1rem;
  text-indent: -100px;
  overflow: hidden;
  position: relative;
}
.product-card .qty-input .qty-count:before, .product-card .qty-input .qty-count:after {
  content: "";
  height: 1.5px;
  width: 9px;
  position: absolute;
  display: block;
  background: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.product-card .qty-input .qty-count--minus {
  cursor: pointer;
}
.product-card .qty-input .qty-count--add {
  cursor: pointer;
}
.product-card .qty-input .qty-count--add:after {
  transform: rotate(90deg);
}
.product-card .qty-input .qty-count:disabled {
  color: #ccc;
  background: #f2f2f2;
  cursor: not-allowed;
  border-color: transparent;
}
.product-card .qty-input .qty-count:disabled:before, .product-card .qty-input .qty-count:disabled:after {
  background: #ccc;
}
.product-card .delete-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  cursor: pointer;
  font-size: 22px;
}
.product-card .delete-button .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
}
.product-card .delete-button .icon-container.delete {
  background: #f14444;
}
.product-card .delete-button .icon-container.delete .trashcan {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.product-card .delete-button .icon-container.delete .trashcan .trashcan-open {
  display: none;
}
.product-card .delete-button .icon-container.delete:hover .trashcan-open {
  display: inline;
}
.product-card .delete-button .icon-container.delete:hover .trashcan-closed {
  display: none;
}
.product-card .delete-button .icon-container.favorite {
  background: rgba(0, 0, 0, 0.5);
}
.product-card .delete-button .icon-container.favorite svg {
  height: 20px;
  width: 20px;
}
.product-card .delete-button .icon-container:hover {
  opacity: 0.8;
}
.product-card.is-swiped .product-content {
  transform: translateX(-100px);
}
.product-card.is-swiped .delete-button {
  transform: translateX(0);
}
.product-card .loadingContainer {
  background-color: rgba(238, 238, 238, 0.337254902);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.summary-section {
  padding: 16px;
  background-color: #f5f5f5;
  margin-bottom: 16px;
}
.summary-section .discount,
.summary-section .redeem,
.summary-section .subtotal,
.summary-section .shipping,
.summary-section .total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.summary-section #shipping-qualifier-text {
  color: rgb(225, 154, 67);
  text-align: center;
}
.summary-section .menuDivider {
  height: 0.5px;
  width: 100%;
  background-color: #aaa;
  margin: 10px 0;
}

.referral-code-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  margin-bottom: 16px;
}
.referral-code-section input {
  flex: 1;
  padding: 8px;
  margin-right: 8px;
  border: 1px solid #ccc;
}
.referral-code-section button {
  padding: 8px 16px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}
.referral-code-section button:hover {
  background-color: #555;
}

.checkout-button button {
  width: 100%;
  padding: 16px;
  background-color: #000;
  border: 1px soldi #000;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.checkout-button button:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}
.checkout-button .disable {
  background-color: #333;
  cursor: not-allowed;
}

.emptyimg {
  width: 80%;
  margin: 0 auto;
}
.emptyimg img {
  width: 100%;
  height: auto;
}
.emptyimg .shoppingBTN {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  transition: all 0.2s ease;
  margin: 10px 0;
  cursor: pointer;
}
.emptyimg .shoppingBTN:hover {
  background-color: #fff;
  color: #000;
}

.cartCardLoading {
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listOfMenus .cartHeader {
  position: sticky;
  top: 40px;
  z-index: 100;
  background-color: #fff;
}
.listOfMenus .cartHeader .subHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.listOfMenus .cartHeader .subHeader .message {
  color: green;
  font-size: 14px;
}
.listOfMenus .cartHeader .subHeader .error {
  color: #f14444;
  font-size: 14px;
}

@media (max-width: 768px) {
  .cart-Menu .emptyimg img {
    width: 200px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
}
@media (max-width: 500px) {
  .cart-Menu .listOfMenus {
    padding: 10px;
  }
}
/*!********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/HeaderComponent/Account.scss ***!
  \********************************************************************************************************************************************/
.accountSec {
  padding: 40px;
}
.accountSec .aboutUser {
  margin: 1rem 0;
}
.accountSec .aboutUser h2 {
  margin: 0;
  padding: 0;
}
.accountSec .aboutUser .userNameSec {
  display: flex;
  align-items: center;
  color: #333;
  margin: 10px 0;
}
.accountSec .aboutUser .userNameSec small {
  color: #333;
}
.accountSec .aboutUser .userNameSec span {
  margin-right: 5px;
}
.accountSec .aboutUser .userNameSec .userName {
  margin: 0;
}
.accountSec .aboutUser .userNameSec .copy-icon {
  margin-left: 5px;
  cursor: pointer;
}
.accountSec .aboutUser .userNameSec .copy-icon svg {
  height: 18px;
  width: 18px;
}
.accountSec .aboutUser .sponsorLink {
  width: 380px;
}
.accountSec .aboutUser small {
  color: green;
  margin-bottom: 1rem;
}
.accountSec .signInBtn {
  padding: 10px 20px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border: 1px solid #000;
  transition: all 0.2s ease;
  cursor: pointer;
}
.accountSec .signInBtn:hover {
  background-color: #fff;
  color: #000;
}
.accountSec .listOfAccountSettings {
  margin: 20px 0;
}
.accountSec .listOfAccountSettings .eachRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
  transition: all 0.2s ease-in-out;
  padding: 10px 5px;
  cursor: pointer;
  color: #333;
}
.accountSec .listOfAccountSettings .eachRow:hover {
  transition: all 0.2s ease-in-out;
  border-radius: 5px;
  animation: loading 1.5s infinite;
}
.accountSec .listOfAccountSettings .eachRow .eachRowTitle {
  display: flex;
  align-items: center;
}
.accountSec .listOfAccountSettings .eachRow .eachRowTitle span {
  display: inline-block;
  margin-right: 3px;
}
.accountSec .listOfAccountSettings .eachRow .manageAccount small {
  color: #fff;
  background-color: #fe4d13;
  padding: 5px 10px;
  border-radius: 30px;
  font-size: 10px;
  margin-left: 5px;
}
.accountSec .sponsorLink {
  display: flex;
  align-items: center;
  color: #333;
  margin: 10px 0;
}
.accountSec .sponsorLink small {
  color: #333;
  border: 0.75px solid #999;
  padding: 5px;
  border-radius: 3px;
}
.accountSec .sponsorLink span {
  margin-right: 5px;
}
.accountSec .sponsorLink .userName {
  margin: 0;
}
.accountSec .sponsorLink .copy-icon {
  margin-left: 5px;
  cursor: pointer;
}
.accountSec .sponsorLink .copy-icon svg {
  height: 18px;
  width: 18px;
}
.accountSec .createAccount {
  color: #333;
}
.accountSec .createAccount span {
  color: #000;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.designerHelpTerms {
  margin: 40px;
  transition: all 0.2s ease-in-out;
  padding: 10px 0px;
  cursor: pointer;
  color: #333;
}
.designerHelpTerms .eachRow {
  padding: 10px 0px;
}
.designerHelpTerms .eachRow:hover {
  background-color: #f7f7f7;
}

.socialMediaRow {
  padding: 1rem 0 2rem 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 40px auto;
}
.socialMediaRow .eachSocialMedia {
  cursor: pointer;
}
.socialMediaRow .eachSocialMedia img {
  min-width: 30px;
  height: 30px;
  padding: 5px;
}

.opuFooterText {
  position: absolute;
  bottom: 0px;
  text-align: center;
  width: 100%;
  right: 50%;
  transform: translateX(50%);
  font-size: 14px;
  background: #fff;
  padding: 10px 0;
  z-index: 10000;
}
.opuFooterText .loginCompInCart {
  margin: 20px;
}

@media (max-width: 500px) {
  .accountSec {
    padding: 10px;
  }
}
@keyframes loading {
  0% {
    background-color: #eeeeee;
  }
  50% {
    background-color: rgba(238, 238, 238, 0.7019607843);
  }
  100% {
    background-color: #eeeeee;
  }
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Utils/Toast/ProductUpdateToast/ProductUpdateToast.scss ***!
  \***************************************************************************************************************************************************************/
.toast {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 10px;
  z-index: 1000;
  border-radius: 5px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
@media (min-width: 501px) {
  .toast {
    top: 90px;
    right: 10px;
    min-width: 200px;
    max-width: 250px;
    animation: slideInRight 0.5s ease-in-out forwards;
  }
}
@media (max-width: 500px) {
  .toast {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    animation: slideInTop 0.5s ease-in-out forwards;
  }
}
.toast .close {
  position: absolute;
  top: 5px;
  right: 10px;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
}
.toast .toastSec {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast .toastSec img {
  max-width: 60px;
  height: 60px;
  object-fit: cover;
}
.toast .toastSec .name-Product {
  font-size: 14px;
}
.toast .toastSec > div:nth-child(2) {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast .toastSec:last-child {
  flex-shrink: 0;
  margin-left: auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 30px;
  cursor: pointer;
}
.toast .checkNow {
  text-align: center;
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
}

@keyframes slideInRight {
  from {
    right: -100%;
    opacity: 0;
  }
  to {
    right: 10px;
    opacity: 1;
  }
}
@keyframes slideInTop {
  from {
    top: -100%;
    opacity: 0;
  }
  to {
    top: 10px;
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    right: 20px;
    opacity: 1;
  }
  to {
    right: -100%;
    opacity: 0;
  }
}
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/GlobalComponent/StickyNotes/StickyNote.module.scss ***!
  \***********************************************************************************************************************************************************/
.kbQ2qXg0TQbiJ_DHazau {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 60px;
  background: #F1F1F1;
  color: #000;
  padding: 12px 24px;
  z-index: 9999;
  font-size: 16px;
  animation: dYIfUEvjvIVBRFVCsRRQ 0.3s ease-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.WP8RZlUnITZzyEoLmxQX {
  text-align: center;
  max-width: 850px;
  width: 100%;
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.NitYXO8nmeA2g3B3mQPO {
  flex: 1;
}

.QLbCmdh1KIkKEh4doxfr {
  border: 1px solid #000;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 26px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #000;
  color: #FFF;
}
.QLbCmdh1KIkKEh4doxfr:hover {
  background: #FFF;
  color: #000;
}
.QLbCmdh1KIkKEh4doxfr:focus {
  outline: none;
}
.QLbCmdh1KIkKEh4doxfr, .QLbCmdh1KIkKEh4doxfr:visited {
  text-decoration: none;
  display: inline-block;
}

.sZn89NYD8pExj8CcTenI {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.sZn89NYD8pExj8CcTenI:hover {
  color: #000;
}

@keyframes dYIfUEvjvIVBRFVCsRRQ {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media screen and (max-width: 840px) {
  .kbQ2qXg0TQbiJ_DHazau {
    font-size: 12px;
  }
}
/*!**********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/Header/header.scss ***!
  \**********************************************************************************************************************************/
.header {
  position: sticky;
  top: 0px;
  transition: top 0.3s;
  z-index: 99;
}
.header .headerContent {
  padding: 15px 0px;
  background-color: #fff;
  box-shadow: 0 4px 6px -6px #aaa;
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.header .headerContent .leftMenu {
  flex: 0 2 auto;
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
}
.header .headerContent .leftMenu .menu {
  display: flex;
  align-items: center;
  margin: 5px 10px;
  cursor: pointer;
}
.header .headerContent .leftMenu .menu span {
  margin-right: 3px;
}
.header .headerContent .leftMenu .menu span svg {
  height: 22px;
  width: 20px;
}
.header .headerContent .leftMenu .menu div {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 5px;
}
.header .headerContent .leftMenu .search,
.header .headerContent .leftMenu .earnFreeExit {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.header .headerContent .leftMenu .search span,
.header .headerContent .leftMenu .earnFreeExit span {
  margin-right: 3px;
}
.header .headerContent .leftMenu .search span svg,
.header .headerContent .leftMenu .earnFreeExit span svg {
  height: 22px;
  width: 20px;
}
.header .headerContent .leftMenu .search div,
.header .headerContent .leftMenu .earnFreeExit div {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 5px;
}
.header .headerContent .leftMenu .earnFreeExit {
  margin-left: 0.5rem;
  margin-right: 1rem;
}
.header .headerContent .logo {
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.header .headerContent .logo img {
  width: 100px;
}
.header .headerContent .logo small {
  position: absolute;
  top: -4px;
  left: -28px;
  color: #000;
  padding: 3px;
  border-radius: 2px;
  font-size: 10px;
}
.header .headerContent .rightMenu_smallScreen {
  display: none;
}
.header .headerContent .rightMenu_smallScreen .rightIcon {
  cursor: pointer;
}
.header .headerContent .rightMenu_smallScreen .rightIcon img {
  height: 20px;
}
.header .headerContent .rightMenu_smallScreen .userIcon {
  position: relative;
  cursor: pointer;
  padding-right: 16px;
}
.header .headerContent .rightMenu_smallScreen .userIcon .red-dot {
  position: absolute;
  top: -10px;
  right: -7px;
  width: 9px;
  height: 9px;
  background-color: #f14444;
  border-radius: 50%;
  border: 2px solid white;
}
.header .headerContent .rightMenu {
  flex: 0 2 auto;
  display: flex;
  align-items: center;
  padding-right: 1rem;
}
.header .headerContent .rightMenu .rightIcon {
  margin: 0 8px;
  cursor: pointer;
}
.header .headerContent .rightMenu .rightIcon img {
  height: 20px;
}
.header .headerContent .rightMenu .userIcon {
  position: relative;
  cursor: pointer;
}
.header .headerContent .rightMenu .userIcon .red-dot {
  position: absolute;
  top: -10px;
  right: -7px;
  width: 9px;
  height: 9px;
  background-color: #f14444;
  border-radius: 50%;
  border: 2px solid white;
}
.header .headerContent .rightMenu .bell {
  font-size: 20px;
}
.header .headerContent .rightMenu .metamask {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.header .headerContent .rightMenu .metamask img {
  width: 25px;
}
.header .headerContent .rightMenu .metamask .status-indicator {
  position: absolute;
  top: -8px;
  left: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f16565;
  animation: pulse-green 2s infinite;
}
.header .headerContent .rightMenu .metamask .status-indicator.connected {
  background-color: green;
  animation: pulse-green 2s infinite;
}
.header .headerContent .rightMenu .metamask .status-indicator.disconnected {
  background-color: #f16565;
  animation: pulse-red 2s infinite;
}
@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(144, 238, 144, 0.9);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(144, 238, 144, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(144, 238, 144, 0);
  }
}
@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

@media (max-width: 840px) {
  .header {
    padding: 0px 0px;
  }
  .header .headerContent .rightMenu {
    opacity: 0;
    display: none;
  }
  .header .headerContent .leftMenu {
    padding-left: 1rem;
  }
  .header .headerContent .rightMenu_smallScreen {
    display: flex;
    align-items: center;
  }
  .header .headerContent .logo img {
    height: 30px;
    cursor: pointer;
  }
  .header .headerContent .logo small {
    left: -10px;
  }
  .header .headerContent .accountImage {
    display: block;
  }
  .header .headerContent .exit img {
    height: 30px;
    width: 25px;
    object-fit: contain;
  }
  .header .headerContent .emptyimg img {
    height: 300px;
    margin-left: 2rem;
  }
  .header .headerContent .leftMenu .search .searchInWords,
  .header .headerContent .leftMenu .search .menuInWords,
  .header .headerContent .leftMenu .search .earnFreeExitInWords,
  .header .headerContent .leftMenu .menu .searchInWords,
  .header .headerContent .leftMenu .menu .menuInWords,
  .header .headerContent .leftMenu .menu .earnFreeExitInWords,
  .header .headerContent .leftMenu .earnFreeExit .searchInWords,
  .header .headerContent .leftMenu .earnFreeExit .menuInWords,
  .header .headerContent .leftMenu .earnFreeExit .earnFreeExitInWords {
    display: none;
  }
}
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: 0.3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
}
/*!*******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/ShopaholicCompetition/ShopaholicFlyout.module.css ***!
  \*******************************************************************************************************************/
#xwibcSW6Pqr7dQGXhhtE{
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation: X2gv10RvzDiqHd2iPc3R 1s ease-out forwards;
    z-index: 10;
}

#xwibcSW6Pqr7dQGXhhtE>div {
    position: absolute;
    top: 60%;
    left: 16.5%;
    width: 59%;
    height: 13%;

    a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.BRO7Pj56hllsFjK99zQ0{
    cursor: pointer;
}

.PedPfIKCW5YSmHMgf26K{

}

/* Backdrop style */
.CibwlpgmkdAot1JLLH2x {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    cursor: pointer;
}

/* Animation keyframes */
@keyframes X2gv10RvzDiqHd2iPc3R {
    0% {
        left: -100%;
        /* Off-screen */
    }

    100% {
        left: 0;
        /* Fully visible on the screen */
    }
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    #xwibcSW6Pqr7dQGXhhtE {
        height: 18rem;
    }
}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #xwibcSW6Pqr7dQGXhhtE {
        height: 12rem;
    }
}
/*!*********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Utils/Loading/FullLoading/FullScreenLoading.scss ***!
  \*********************************************************************************************************************************************************/
.fullScreenLoading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  z-index: 999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to right, #fff, #fff);
}
.fullScreenLoading img {
  max-width: 120px;
}
.fullScreenLoading .loadingText {
  margin-top: 20px;
  color: #000;
  font-size: 24px;
}

.darksoul-layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.733);
  z-index: 9999;
  color: #fff;
}
.darksoul-layout .darksoul-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  margin-right: 1px;
  width: 50px;
  height: 50px;
  display: grid;
  gap: 0px;
  grid-template-columns: auto auto;
  animation: rotate 2s linear 0s infinite;
}
.darksoul-layout .darksoul-grid .item1 {
  margin: auto;
  width: 15px;
  height: 15px;
  border-radius: 0%;
  background-color: #fff;
}
.darksoul-layout .darksoul-grid .item2 {
  margin: auto;
  width: 15px;
  height: 15px;
  border-radius: 0%;
  background-color: #fff;
}
.darksoul-layout .darksoul-grid .item3 {
  margin: auto;
  width: 15px;
  height: 15px;
  border-radius: 0%;
  background-color: #fff;
}
.darksoul-layout .darksoul-grid .item4 {
  margin: auto;
  width: 15px;
  height: 15px;
  border-radius: 0%;
  background-color: #fff;
}
@keyframes rotate {
  0% {
    rotate: 0deg;
    transform: scale(0.6);
  }
  50% {
    rotate: 100deg;
    transform: scale(0.4);
  }
  100% {
    rotate: 360deg;
    transform: scale(0.6);
  }
}
.darksoul-layout .darksoul-loader-h {
  text-align: center;
  width: 450px;
  line-height: 1.5;
  font-size: 20px;
  margin: auto;
  margin-left: 25px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 500px) {
  .darksoul-layout .darksoul-loader-h {
    width: 300px;
    font-size: 16px;
  }
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Auth/Register/RegisterComponent/EmailVerification.scss ***!
  \***************************************************************************************************************************************************************/

/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Auth/Register/Register.scss ***!
  \************************************************************************************************************************************/
.register {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.register .form {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 20px;
  width: 70%;
}
.register .form .promotion {
  display: flex;
  margin: 1rem 0;
}
.register .form .promotion span {
  margin-left: 1rem;
  color: #333;
  font-size: 14px;
}
.register .form h1,
.register .form h2,
.register .form .input-div {
  position: relative;
  margin-bottom: 25px;
}
.register .form h1 small,
.register .form h2 small,
.register .form .input-div small {
  color: #555;
  display: inline-block;
  margin-bottom: 5px;
  padding-left: 40px;
}
.register .form h1 small span,
.register .form h2 small span,
.register .form .input-div small span {
  color: red;
}
.register .form .input-div .passwordInput {
  position: relative;
  margin: 1rem auto;
  z-index: 1;
  background: transparent;
}
.register .form .input-div .passwordInput .togglePassword {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  z-index: 2;
  cursor: pointer;
}
.register .form .input-div .passwordInput .togglePassword svg {
  width: 1rem;
  height: 1rem;
}
.register .form .input-div .passwordInput .REFERRER_INPUT {
  cursor: not-allowed;
}
.register .mobileNumber {
  margin-bottom: 30px;
}
.register input[type=text],
.register input[type=email],
.register input[type=password] {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border: 0.75px solid #ccc;
  margin-bottom: 5px;
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 10px;
  color: #333;
  border-radius: 5px;
}
.register input[type=text]::placeholder,
.register input[type=email]::placeholder,
.register input[type=password]::placeholder {
  color: #777;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.register input[type=text]:focus,
.register input[type=email]:focus,
.register input[type=password]:focus {
  border-color: #000;
}
.register input[type=text]:focus + label,
.register input[type=email]:focus + label,
.register input[type=password]:focus + label {
  color: #555;
  font-size: 13px;
  top: -14px;
  left: 7px;
  background: #fff;
  padding: 5px;
  z-index: 2;
}
.register input[type=text]:focus + label span,
.register input[type=email]:focus + label span,
.register input[type=password]:focus + label span {
  color: red;
}
.register input[type=text]:not(:placeholder-shown) + label,
.register input[type=email]:not(:placeholder-shown) + label,
.register input[type=password]:not(:placeholder-shown) + label {
  font-size: 13px;
  top: -14px;
  left: 7px;
  color: #000;
  background: #fff;
  padding: 5px;
  z-index: 2;
}
.register input[type=text]:not(:placeholder-shown) + label span,
.register input[type=email]:not(:placeholder-shown) + label span,
.register input[type=password]:not(:placeholder-shown) + label span {
  color: red;
}
.register label {
  position: absolute;
  cursor: text;
  z-index: -1;
  top: 10px;
  left: 0px;
  font-size: 14px;
  font-weight: bold;
  background: #fff;
  padding: 0 10px;
  color: #999;
  transition: all 0.3s ease;
}
.register label span {
  color: #999;
}
.register input[readonly] {
  color: #999;
  border: 1px solid #ccc;
  cursor: not-allowed;
}
.register select:first-child {
  color: #000;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 16px;
  font-weight: normal;
}
.register .submitBtn {
  width: 100%;
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  transition: all 0.2s ease-in;
  text-align: center;
  cursor: pointer;
  padding: 10px 0;
  margin: 20px 0;
}
.register .submitBtn:hover {
  background-color: #fff;
  color: #000;
}
.register .ifLogin {
  border-bottom: 1px solid #000;
  width: fit-content;
  margin: 1rem auto;
  cursor: pointer;
}
.register .reg-error {
  color: #f16565;
  font-size: 14px;
  margin-left: 3px;
}
.register .already-account a {
  color: #000;
}
.register .already-created-account {
  margin: 1rem 0;
}
.register .already-created-account a {
  color: #000;
}
.register .backBTN {
  display: flex;
  margin-top: 2rem;
  cursor: pointer;
}
.register .backBTN div {
  margin-right: 10px;
}
.register .backBTN div a {
  text-decoration: none;
  color: #000;
}

.passed-condition {
  color: green;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.failed-condition {
  color: #f16565;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 690px) {
  .register .form {
    width: 90%;
  }
}
@media (max-width: 500px) {
  .register .form {
    width: 90%;
  }
  .register .form .NamesInput {
    flex-direction: column;
    margin-bottom: 0px;
  }
  .register .form .NamesInput > div {
    width: 100%;
    margin-bottom: 30px;
  }
  .register .form .NamesInput > div input {
    margin-bottom: 10px;
  }
}
.PhoneInputCountrySelect {
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductBanner/ProductBanner.scss ***!
  \*************************************************************************************************************************************************/
.ProductBanner {
  width: 100%;
  overflow: hidden;
}
.ProductBanner .whiteBackground {
  background-size: cover;
  flex-direction: column;
  background-position: center;
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}
.ProductBanner .whiteBackground > div:first-child {
  margin-bottom: 20px;
  font-size: 2rem;
  color: #FFFFFF;
  text-align: center;
  font-weight: 500;
}
.ProductBanner .whiteBackground .animatedLink {
  position: relative;
  padding: 10px 30px;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  cursor: pointer;
}
.ProductBanner .whiteBackground .animatedLink span {
  position: absolute;
  background: linear-gradient(90deg, #555, #fff);
  animation: animate 3s linear infinite;
}
.ProductBanner .whiteBackground .animatedLink span:nth-child(1) {
  top: 0;
  right: 0;
  width: 100%;
  height: 1px;
  animation-name: animate-horizontal;
}
.ProductBanner .whiteBackground .animatedLink span:nth-child(2), .ProductBanner .whiteBackground .animatedLink span:nth-child(4) {
  right: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(180deg, #555, #fff);
  animation-name: animate-vertical;
  animation-delay: 2s;
}
.ProductBanner .whiteBackground .animatedLink span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  animation-name: animate-horizontal;
}
.ProductBanner .whiteBackground .animatedLink span:nth-child(4) {
  top: 0;
  left: 0;
}
.ProductBanner .whiteBackground .dark {
  color: #fff;
  box-shadow: 0 0 10px 5px rgba(255, 254, 254, 0.4);
}
@keyframes animate-horizontal {
  0% {
    transform: translateX(-100%);
  }
  50%, 100% {
    transform: translateX(100%);
  }
}
@keyframes animate-vertical {
  0% {
    transform: translateY(-100%);
  }
  50%, 100% {
    transform: translateY(100%);
  }
}
.ProductBanner .whiteBackground {
  background-image: url("https://designermall.nyc3.cdn.digitaloceanspaces.com/Images/products/ProductBanner.webp");
}

@media (max-width: 768px) {
  .ProductBanner .whiteBackground {
    height: 30vh;
  }
}
@media (max-width: 480px) {
  .ProductBanner .whiteBackground {
    height: 20vh;
  }
}
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductCollections/ProductCollections.scss ***!
  \***********************************************************************************************************************************************************/
.ProductCollections {
  width: 100%;
  max-width: 1600px; /* Adjusted maximum width */
  margin: 0 auto;
}
.ProductCollections .ProductCollectionsHeader {
  font-family: "FrederickatheGreat Normal", sans-serif;
  text-transform: uppercase;
  text-align: center;
}
.ProductCollections .productCollectionsRow {
  display: flex;
  flex-wrap: wrap; /* Allow products to wrap to the next line */
  justify-content: center;
  margin-bottom: 1rem;
}
.ProductCollections .productCollectionsRow .eachProduct {
  width: calc(33.333% - 1rem); /* Adjusted width to accommodate three products with margins */
  margin: 0.5rem; /* Added margin between products */
  display: flex;
  flex-direction: column;
}
.ProductCollections .productCollectionsRow .eachProduct h2 {
  margin: 1rem 0 0 0;
  text-align: left;
}
.ProductCollections .productCollectionsRow .eachProduct .productImage {
  position: relative;
}
.ProductCollections .productCollectionsRow .eachProduct .productImage img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.ProductCollections .productCollectionsRow .eachProduct .productImage .freeCollection {
  position: absolute;
  bottom: 0%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: black;
  color: white;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 0.5rem 0;
}
.ProductCollections .productCollectionsRow .eachProduct .productImage .freeCollection > div {
  padding: 0.5em;
  text-align: center;
}
.ProductCollections .productCollectionsRow .eachProduct .productImage:hover .freeCollection {
  opacity: 1;
}
.ProductCollections .productCollectionsRow .eachProduct div {
  margin-top: 0.5rem;
}
.ProductCollections .productCollectionsRow .eachProduct .link {
  text-align: center;
  cursor: pointer;
}
@media (max-width: 992px) {
  .ProductCollections .productCollectionsRow .eachProduct {
    width: calc(50% - 1rem); /* Adjusted width for medium screens */
  }
}
@media (max-width: 768px) {
  .ProductCollections .productCollectionsRow .eachProduct {
    width: calc(100% - 1rem); /* Full width for small screens */
  }
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductsFilter/SmallDeviceFilter/SmallDeviceProductsFilter.scss ***!
  \********************************************************************************************************************************************************************************/
.smallDeviceProductsFilter .listofFilters {
  display: flex;
  align-items: center;
}
.smallDeviceProductsFilter .listofFilters .reset_filters,
.smallDeviceProductsFilter .listofFilters .filters,
.smallDeviceProductsFilter .listofFilters .sortBy {
  position: relative;
}
.smallDeviceProductsFilter .listofFilters .reset_filters .header_reset,
.smallDeviceProductsFilter .listofFilters .reset_filters .sortsBy_header,
.smallDeviceProductsFilter .listofFilters .reset_filters .filters_header,
.smallDeviceProductsFilter .listofFilters .filters .header_reset,
.smallDeviceProductsFilter .listofFilters .filters .sortsBy_header,
.smallDeviceProductsFilter .listofFilters .filters .filters_header,
.smallDeviceProductsFilter .listofFilters .sortBy .header_reset,
.smallDeviceProductsFilter .listofFilters .sortBy .sortsBy_header,
.smallDeviceProductsFilter .listofFilters .sortBy .filters_header {
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.smallDeviceProductsFilter .listofFilters .reset_filters .header_reset div,
.smallDeviceProductsFilter .listofFilters .reset_filters .sortsBy_header div,
.smallDeviceProductsFilter .listofFilters .reset_filters .filters_header div,
.smallDeviceProductsFilter .listofFilters .filters .header_reset div,
.smallDeviceProductsFilter .listofFilters .filters .sortsBy_header div,
.smallDeviceProductsFilter .listofFilters .filters .filters_header div,
.smallDeviceProductsFilter .listofFilters .sortBy .header_reset div,
.smallDeviceProductsFilter .listofFilters .sortBy .sortsBy_header div,
.smallDeviceProductsFilter .listofFilters .sortBy .filters_header div {
  margin: 0 2px;
}
.smallDeviceProductsFilter .listofFilters .reset_filters .header_reset div:last-child,
.smallDeviceProductsFilter .listofFilters .reset_filters .sortsBy_header div:last-child,
.smallDeviceProductsFilter .listofFilters .reset_filters .filters_header div:last-child,
.smallDeviceProductsFilter .listofFilters .filters .header_reset div:last-child,
.smallDeviceProductsFilter .listofFilters .filters .sortsBy_header div:last-child,
.smallDeviceProductsFilter .listofFilters .filters .filters_header div:last-child,
.smallDeviceProductsFilter .listofFilters .sortBy .header_reset div:last-child,
.smallDeviceProductsFilter .listofFilters .sortBy .sortsBy_header div:last-child,
.smallDeviceProductsFilter .listofFilters .sortBy .filters_header div:last-child {
  font-size: 20px;
  margin-top: 5px;
  margin-left: 20px;
}
.smallDeviceProductsFilter .listofFilters .reset_filters .header_reset {
  color: #000;
  transition: all 0.2s ease-in-out;
  border: 0.5px solid #cecece;
  border-radius: 5px;
  font-size: 13px;
  background-color: #cecece;
}
.smallDeviceProductsFilter .listofFilters .reset_filters .header_reset.noBack {
  background-color: transparent;
  border: none;
}
.smallDeviceProductsFilter .listofFilters .filters {
  display: none;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer {
  display: block;
  list-style: none;
  margin: 0;
  padding: 10px;
  top: -9px;
  position: absolute;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #333;
  left: -126px;
  width: 250px;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .filterSubHeader {
  margin: 5px 0 5px 15px;
  font-family: "Bebas Neue Pro Bold";
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .filterSubHeader:first-of-type {
  border-top: none;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container {
  clear: both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5px 0 0 15px;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container .option,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container .option {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  font-size: 1rem;
  color: #000;
  user-select: none;
  padding: 7px 5px 7px 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Light";
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container .option input,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container .option input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 50px;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container .option input:focus-visible ~ .checkbox,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container .option input:focus-visible ~ .checkbox {
  border: 2px solid #000;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container .option input:checked ~ .checkbox1:after,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container .option input:checked ~ .checkbox1:after {
  opacity: 1;
  width: 5px;
  height: 12px;
  border-color: #000;
  transition: width 0.1s ease, height 0.08s ease 0.1s, border-color 0.3s ease, border-width 0.1s ease;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container .option:hover input ~ .checkbox,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container .option:hover input ~ .checkbox {
  border: 1px solid #000;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container .option .checkbox,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container .option .checkbox {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #000;
  transition: all 0.15s;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container .option .checkbox1:after,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container .option .checkbox1:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 0;
  height: 0;
  border: solid #000;
  border-width: 2px 2px 0 0;
  opacity: 0;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  transition: width 0.08s ease 0.1s, height 0.1s ease, border-color 0.3s ease, opacity 0.1s ease 0.2s, border-width 0.1s ease;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container.category,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container.category {
  overflow: scroll;
  max-height: 100vh;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .genderContainers .checkboxes-container.category::-webkit-scrollbar,
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .productSubCategoriesContainer .checkboxes-container.category::-webkit-scrollbar {
  display: none;
}
.smallDeviceProductsFilter .listofFilters .filters .filtersContainer .apply-btn {
  border: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 7px 20px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}
.smallDeviceProductsFilter .listofFilters .sortBy .sortContent .listOfSortContent {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 35px;
  position: absolute;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #333;
  left: 16px;
  width: 175px;
}
.smallDeviceProductsFilter .listofFilters .sortBy .sortContent .listOfSortContent li {
  padding: 7px 25px 7px 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Light";
}
.smallDeviceProductsFilter .listofFilters .sortBy .sortContent .listOfSortContent li:hover {
  background: #eeeeee;
}

.loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.744);
}

@media (max-width: 1100px) {
  .smallDeviceProductsFilter .listofFilters .filters {
    display: block;
  }
}
@media (max-width: 560px) {
  .smallDeviceProductsFilter .listofFilters .filters {
    font-size: 14px;
  }
  .smallDeviceProductsFilter .listofFilters .filters .filtersContainer {
    left: 0px;
  }
  .smallDeviceProductsFilter .listofFilters .sortBy {
    font-size: 14px;
  }
}
/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductsFilter/RegularFilter/ProductsFilter_v2.module.scss ***!
  \***************************************************************************************************************************************************************************/
.DPvLPNb8L7FupTECPgUv {
  margin-top: 24px;
  margin-right: 10px;
  min-width: 240px;
  position: sticky;
  top: 70px;
}
.DPvLPNb8L7FupTECPgUv .Eg00D8tEtTud7tntyTDG {
  height: 0.75px;
  width: 100%;
  background: #999;
  margin: 17px auto;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 {
  padding: 10px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .mHhqFoiBzfDJHB_8uNsR,
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .dgs2N6Iy4h78U3oIvhZD,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .mHhqFoiBzfDJHB_8uNsR,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .dgs2N6Iy4h78U3oIvhZD {
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: max-height 0.3s ease-in-out;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .mHhqFoiBzfDJHB_8uNsR div,
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .dgs2N6Iy4h78U3oIvhZD div,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .mHhqFoiBzfDJHB_8uNsR div,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .dgs2N6Iy4h78U3oIvhZD div {
  font-size: 1.35rem;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  display: block;
  list-style: none;
  margin: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #333;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V {
  position: relative;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .WCbyJidGgV0k393aROYK,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .WCbyJidGgV0k393aROYK {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: rgba(204, 204, 204, 0.3647058824);
  cursor: not-allowed;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 0 0;
  text-transform: uppercase;
  cursor: pointer;
  color: #555;
  font-size: 0.9rem;
  border-radius: 3px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6:hover,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6:hover {
  background-color: rgba(204, 204, 204, 0.3647058824);
  transition: all 0.2s ease-in-out;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6 div,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6 div {
  padding: 10px;
  flex: 3;
  font-weight: 500;
  font-size: 1rem;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6 .KyvsRUxvCc2ICn00rzQp,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6 .KyvsRUxvCc2ICn00rzQp {
  padding: 10px;
  flex: 1;
  text-align: right;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6.QY6cRgG07ZkPQk1bDOD6,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V ._fdPE52BtHHu7fwP3yE6.QY6cRgG07ZkPQk1bDOD6 {
  cursor: not-allowed;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0 10px;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #333;
  position: relative;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .O4MmweA7akGicYt9RCd5,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .O4MmweA7akGicYt9RCd5 {
  margin: 0.5rem 0;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .O4MmweA7akGicYt9RCd5 .v3GVnxXZNDSlOWk3jChC,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .O4MmweA7akGicYt9RCd5 .v3GVnxXZNDSlOWk3jChC {
  height: 0.75px;
  width: 100%;
  margin: 5px auto;
  background-color: #ccc;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .O4MmweA7akGicYt9RCd5 .lO0i2S7_SykXUISLq5Uk,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .O4MmweA7akGicYt9RCd5 .lO0i2S7_SykXUISLq5Uk {
  font-family: "Bebas Neue Pro Bold";
  margin-left: 5px;
  font-size: 0.95rem;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ {
  margin: 5px 0 5px 1px;
  clear: both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5px 0 0 5px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #000;
  user-select: none;
  padding: 3.5px 5px 3.5px 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Light";
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 50px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:focus-visible ~ .bywmalj1Z9rQtlkDMG4D,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:focus-visible ~ .bywmalj1Z9rQtlkDMG4D {
  border: 2px solid #000;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:checked ~ .eP8Yy_N0KAJ2RshLJmjh:after,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:checked ~ .eP8Yy_N0KAJ2RshLJmjh:after {
  opacity: 1;
  width: 5px;
  height: 12px;
  border-color: #000;
  transition: width 0.1s ease, height 0.08s ease 0.1s, border-color 0.3s ease, border-width 0.1s ease;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg:hover input ~ .bywmalj1Z9rQtlkDMG4D,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg:hover input ~ .bywmalj1Z9rQtlkDMG4D {
  border: 1px solid #000;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .bywmalj1Z9rQtlkDMG4D,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .bywmalj1Z9rQtlkDMG4D {
  position: relative;
  height: 18px;
  width: 18px;
  border-radius: 2px;
  background-color: #fff;
  border: 1.2px solid #000;
  transition: all 0.15s;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .eP8Yy_N0KAJ2RshLJmjh:after,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .eP8Yy_N0KAJ2RshLJmjh:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 0;
  height: 0;
  border: solid #000;
  border-width: 2px 2px 0 0;
  opacity: 0;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  transition: width 0.08s ease 0.1s, height 0.1s ease, border-color 0.3s ease, opacity 0.1s ease 0.2s, border-width 0.1s ease;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0 {
  overflow: scroll;
  max-height: 100vh;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0::-webkit-scrollbar,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0::-webkit-scrollbar {
  display: none;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .VrAN8QXV14iPeip1FlHL,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7 .VrAN8QXV14iPeip1FlHL {
  border: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 7px 20px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7.L65wDZFO2lUxfUj1IuC_,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V .v5ZLemCbEN6ulhQh1II7.L65wDZFO2lUxfUj1IuC_ {
  max-height: 1000px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V.L65wDZFO2lUxfUj1IuC_,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V.L65wDZFO2lUxfUj1IuC_ {
  background-color: rgba(204, 204, 204, 0.3647058824);
  border-radius: 3px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V.L65wDZFO2lUxfUj1IuC_ ._fdPE52BtHHu7fwP3yE6:hover,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .gpoMCWqHjKvzc8JcEO3V.L65wDZFO2lUxfUj1IuC_ ._fdPE52BtHHu7fwP3yE6:hover {
  background-color: transparent;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .O4MmweA7akGicYt9RCd5,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .O4MmweA7akGicYt9RCd5 {
  margin-top: 0.5rem;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .O4MmweA7akGicYt9RCd5 .v3GVnxXZNDSlOWk3jChC,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .O4MmweA7akGicYt9RCd5 .v3GVnxXZNDSlOWk3jChC {
  height: 0.75px;
  width: 100%;
  margin: 5px auto;
  background-color: #ccc;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .O4MmweA7akGicYt9RCd5 .lO0i2S7_SykXUISLq5Uk,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .O4MmweA7akGicYt9RCd5 .lO0i2S7_SykXUISLq5Uk {
  font-family: "Bebas Neue Pro Bold";
  margin-left: 5px;
  font-size: 0.95rem;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ {
  margin: 5px 0 5px 1px;
  clear: both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5px 0 0 5px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #000;
  user-select: none;
  padding: 7px 5px 0px 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Light";
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 50px;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:focus-visible ~ .bywmalj1Z9rQtlkDMG4D,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:focus-visible ~ .bywmalj1Z9rQtlkDMG4D {
  border: 2px solid #000;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:checked ~ .eP8Yy_N0KAJ2RshLJmjh:after,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg input:checked ~ .eP8Yy_N0KAJ2RshLJmjh:after {
  opacity: 1;
  width: 5px;
  height: 12px;
  border-color: #000;
  transition: width 0.1s ease, height 0.08s ease 0.1s, border-color 0.3s ease, border-width 0.1s ease;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg:hover input ~ .bywmalj1Z9rQtlkDMG4D,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg:hover input ~ .bywmalj1Z9rQtlkDMG4D {
  border: 1px solid #000;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .bywmalj1Z9rQtlkDMG4D,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .bywmalj1Z9rQtlkDMG4D {
  position: relative;
  height: 18px;
  width: 18px;
  border-radius: 2px;
  background-color: #fff;
  border: 1.2px solid #000;
  transition: all 0.15s;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .eP8Yy_N0KAJ2RshLJmjh:after,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ .xEYDq2uhHCZxddopK1Kg .eP8Yy_N0KAJ2RshLJmjh:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 0;
  height: 0;
  border: solid #000;
  border-width: 2px 2px 0 0;
  opacity: 0;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  transition: width 0.08s ease 0.1s, height 0.1s ease, border-color 0.3s ease, opacity 0.1s ease 0.2s, border-width 0.1s ease;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0 {
  overflow: scroll;
  max-height: 100vh;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0::-webkit-scrollbar,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .NcnD0gimE3FqUf4rmwkE .y3pyBOPsHv51quMYOXrQ.ZJpRQycAndiKSXpBNTc0::-webkit-scrollbar {
  display: none;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu .WCbyJidGgV0k393aROYK,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu .WCbyJidGgV0k393aROYK {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: rgba(204, 204, 204, 0.3647058824);
  cursor: not-allowed;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .sXWv2yoEJ_ofV5JJvdtu.L65wDZFO2lUxfUj1IuC_,
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg .v5ZLemCbEN6ulhQh1II7.L65wDZFO2lUxfUj1IuC_,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .sXWv2yoEJ_ofV5JJvdtu.L65wDZFO2lUxfUj1IuC_,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 .v5ZLemCbEN6ulhQh1II7.L65wDZFO2lUxfUj1IuC_ {
  max-height: 100vh;
}
.DPvLPNb8L7FupTECPgUv .jp_ugVsUYq7eG8rkS5lg svg,
.DPvLPNb8L7FupTECPgUv .czu7964q4brz3VzrHeM0 svg {
  height: 10px;
  color: #999;
}

@media (max-width: 1100px) {
  .DPvLPNb8L7FupTECPgUv {
    display: none;
  }
}
/*!******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductsFilter/CarouselFilter/CarouselFilter.scss ***!
  \******************************************************************************************************************************************************************/
.listOfFilter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
}
.listOfFilter .eachFilter {
  border: 1px solid #999;
  border-radius: 30px;
  padding: 7px 15px;
  margin: 20px 5px;
  font-size: 12px;
  color: #555;
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Utils/ShareComponent/ShareComponent.scss ***!
  \*************************************************************************************************************************************************/
.ShareModal {
  cursor: pointer;
}
.ShareModal .share-label-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ShareModal .share-label-icon div {
  margin: 0;
  padding: 0;
}
.ShareModal .share-label-icon .label {
  margin-right: 5px;
}
.ShareModal .ShareOpenedModal {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 3px 5px 0px #B1B1B1;
  max-width: 330px;
  width: 100%;
  background: #fff;
  overflow-y: auto;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 999999;
  top: 50%;
  left: 50%;
}
.ShareModal .ShareOpenedModal .socialMediaSec h4 {
  text-align: center;
}
.ShareModal .ShareOpenedModal .socialMediaSec .listOfSocialMedia {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ShareModal .ShareOpenedModal .socialMediaSec .listOfSocialMedia .each_socialmedia {
  margin: 10px;
  flex: 1 1 18%;
  max-width: 18%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ShareModal .ShareOpenedModal .socialMediaSec .listOfSocialMedia .each_socialmedia .each_icon {
  border-radius: 50%;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  padding: 0.5rem;
}
.ShareModal .ShareOpenedModal .socialMediaSec .listOfSocialMedia .each_socialmedia .each_icon svg {
  height: 15px;
  width: 15px;
}
.ShareModal .ShareOpenedModal .socialMediaSec .listOfSocialMedia .each_socialmedia .each_icon:hover {
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}
.ShareModal .ShareOpenedModal .close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.ShareModal .ShareOpenedModal .copySec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ShareModal .ShareOpenedModal .copySec p {
  max-width: 83%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease-in-out;
  padding: 8px;
  margin: 0;
  border: 1px solid #555;
  border-radius: 10px;
  font-size: 14px;
}
.ShareModal .ShareOpenedModal .copySec .copyBTn {
  cursor: pointer;
}
.ShareModal .ShareOpenedModal .copySec .copyBTn svg {
  height: 25px;
  width: 25px;
}
/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Utils/Pagination/pagination.scss ***!
  \*****************************************************************************************************************************************/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
}
.pagination li {
  padding: 10px;
  margin: 5px;
  cursor: pointer;
}
.pagination li span {
  text-decoration: none;
  color: #000;
}
.pagination li.active {
  background-color: #eee;
}
.pagination li.btn {
  border-radius: 10px;
  padding: 10px 15px;
  background-color: rgba(132, 143, 164, 0.1019607843);
}
.pagination li.disable span {
  color: #999;
}
/*!**********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/Product/ProductCategoryCard/WishListIcon/Component/wishlistFillAnimation.css ***!
  \**********************************************************************************************************************************************/
#heart-main {
    animation: main 800ms forwards;
    -webkit-animation: main 800ms forwards;
}

#heart-fill {
    animation: fill 800ms forwards;
    transform-origin: 50% 50%;
    animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
    -webkit-animation: fill 800ms forwards;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
}

#heart-sm-group {
    animation: group 100ms forwards;
    animation-delay: 450ms;
    -webkit-animation: group 100ms forwards;
    -webkit-animation-delay: 450ms;
}

#heart-sm-1 {
    animation: heart-sm-1 1.5s forwards;
    animation-delay: 350ms;
    -webkit-animation: heart-sm-1 1.5s forwards;
    -webkit-animation-delay: 350ms;
}

#heart-sm-2 {
    animation: heart-sm-2 1.2s forwards;
    animation-delay: 300ms;
    -webkit-animation: heart-sm-2 1.2s forwards;
    -webkit-animation-delay: 300ms;
}

#heart-sm-3 {
    animation: heart-sm-3 1.2s forwards;
    animation-delay: 300ms;
    -webkit-animation: heart-sm-3 1.2s forwards;
    -webkit-animation-delay: 300ms;
}

#heart-sm-4 {
    animation: heart-sm-4 1.2s forwards;
    animation-delay: 300ms;
    -webkit-animation: heart-sm-4 1.2s forwards;
    -webkit-animation-delay: 300ms;
}

#heart-sm-5 {
    animation: heart-sm-5 1.2s forwards;
    animation-delay: 300ms;
    -webkit-animation: heart-sm-5 1.2s forwards;
    -webkit-animation-delay: 300ms;
}

#heart-sm-6 {
    animation: heart-sm-6 1.2s forwards;
    animation-delay: 300ms;
    -webkit-animation: heart-sm-6 1.2s forwards;
    -webkit-animation-delay: 300ms;
}

#heart-sm-7 {
    animation: heart-sm-7 1.2s forwards;
    animation-delay: 300ms;
    -webkit-animation: heart-sm-7 1.2s forwards;
    -webkit-animation-delay: 300ms;
}

@keyframes main {
    0% {
        fill: '#000000';
    }

    100% {
        fill: currentColor;
    }
}

@keyframes fill {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    80% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@keyframes group {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.8;
    }
}

@keyframes heart-sm-1 {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }

    50% {
        transform: translate(40px, -45px);
        -webkit-transform: translate(40px, -45px);
    }

    80% {
        transform: translate(110px, -60px) scale(0);
        -webkit-transform: translate(110px, -60px) scale(0);
    }

    100% {
        transform: translate(110px, -60px) scale(0);
        -webkit-transform: translate(110px, -60px) scale(0);
    }
}

@keyframes heart-sm-2 {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }

    50% {
        transform: translate(40px, 15px);
        -webkit-transform: translate(40px, 15px);
    }

    85% {
        transform: translate(140px, -10px) scale(0);
        -webkit-transform: translate(140px, -10px) scale(0);
    }

    100% {
        transform: translate(140px, -10px) scale(0);
        -webkit-transform: translate(140px, -10px) scale(0);
    }
}

@keyframes heart-sm-3 {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }

    50% {
        transform:translate(20px, 45px);
        -webkit-transform: translate(20px, 45px);
    }

    100% {
        transform: translate(130px, 65px) scale(0);
        -webkit-transform: translate(130px, 65px) scale(0);
    }
}

@keyframes heart-sm-4 {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }

    50% {
        transform: translate(-20px, 55px);
        -webkit-transform: translate(-20px, 55px);
    }

    85% {
        transform: translate(-10px, 65px) scale(0);
        -webkit-transform: translate(-10px, 65px) scale(0);
    }

    100% {
        transform: translate(-10px, 65px) scale(0);
        -webkit-transform: translate(-10px, 65px) scale(0);
    }
}

@keyframes heart-sm-5 {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }

    50% {
        transform: translate(-50px, 40px);
        -webkit-transform: translate(-50px, 40px);
    }

    95% {
        transform: translate(-50px, 5px) scale(0);
        -webkit-transform: translate(-50px, 5px) scale(0);
    }

    100% {
        transform: translate(-50px, 5px) scale(0);
        -webkit-transform: translate(-50px, 5px) scale(0);
    }
}

@keyframes heart-sm-6 {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }

    50% {
        transform: translate(-45px, 0);
        -webkit-transform: translate(-45px, 0);
    }

    85% {
        transform: translate(-15px, -50px) scale(0);
        -webkit-transform: translate(-15px, -50px) scale(0);
    }

    100% {
        transform: translate(-15px, -50px) scale(0);
        -webkit-transform: translate(-15px, -50px) scale(0);
    }
}

@keyframes heart-sm-7 {
    0% {
        transform: translate(0);
        -webkit-transform: translate(0);
    }

    50% {
        transform: translate(-10px, -45px);
        -webkit-transform: translate(-10px, -45px);
    }

    95% {
        transform: translate(40px, -70px) scale(0);
        -webkit-transform: translate(40px, -70px) scale(0);
    }

    100% {
        transform: translate(40px, -70px) scale(0);
        -webkit-transform: translate(40px, -70px) scale(0);
    }
}
/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductCategoryCard/ProductCategoryCard.scss ***!
  \*************************************************************************************************************************************************************/
.productListScreen {
  max-width: 1300px;
  width: 93%;
  margin: 2rem auto;
  position: relative;
}
.productListScreen .filter-productList {
  display: flex;
  align-items: flex-start;
}
.productListScreen .filter-productList .smallScreenFilterSection .filterCompTotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 67px;
  background: #fff;
  z-index: 10;
}
.productListScreen .filter-productList .filterSection {
  position: sticky;
  top: 50px;
}
.productListScreen .filter-productList .productlistmainsection {
  width: 100%;
}
.productListScreen .filter-productList .productlistmainsection h2 {
  text-transform: uppercase;
  font-size: 1.8em;
}
.productListScreen .filter-productList .productlistmainsection .filter-totals {
  position: sticky;
  top: 68px;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 10;
  padding: 20px 0;
}
.productListScreen .filter-productList .productlistmainsection .filter-totals .showTotal {
  font-family: "Bebas Neue Pro Light";
  margin: 1rem 0;
}
.productListScreen .filter-productList .productlistmainsection .productListSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct {
  position: relative;
  flex: 1 1 30%;
  max-width: 30%;
  transition: box-shadow 0.3s ease-in-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  margin-bottom: 30px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct:hover .addToCartButton {
  opacity: 1;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 280px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .wish-heart_loading {
  position: absolute;
  right: 7px;
  top: 0px;
  width: 35px;
  height: 35px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 9;
  border: 1px dotted rgba(238, 238, 238, 0.7058823529);
  border-radius: 50%;
  background-color: rgba(238, 238, 238, 0.7058823529);
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .wish-heart {
  position: absolute;
  right: 7px;
  top: 0px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 9;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border: 0.75px dotted rgba(238, 238, 238, 0.7058823529);
  border-radius: 50%;
  background-color: rgba(238, 238, 238, 0.7058823529);
  display: flex;
  align-items: center;
  justify-content: center;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .wish-heart:hover {
  border: 0.75px solid #eee;
  background-color: #eee;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .wish-heart .wishlistIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .share {
  position: absolute;
  top: 50px;
  right: 7px;
  padding: 10px;
  border: 1px dotted rgba(238, 238, 238, 0.9294117647);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(221, 221, 221, 0.7058823529);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  cursor: pointer;
  padding: 10px;
  background-color: #eeeeee;
  border-radius: 5px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog span:first-child {
  left: 10px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog span:last-child {
  right: 10px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog:hover span {
  display: block;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .productImg {
  max-width: 70%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .totalImageBullet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .totalImageBullet .eachImageBullet {
  width: 10px;
  transform: scaleX(1);
  height: 4px;
  background-color: #ccc;
  border-radius: 1px;
  transition: all 0.3s;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .totalImageBullet .eachImageBullet.active {
  background-color: #000;
  transform: scaleX(1.5);
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog:hover .totalImageBullet {
  opacity: 1;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton_small {
  display: none;
  padding: 10px 5px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #000;
  margin: 10px 5px;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton_small:hover {
  background-color: #000;
  color: #fff;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton {
  position: relative;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  background-color: #000;
  color: white;
  margin: 20px 15px;
  transition: opacity 0.3s ease-in-out;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton div {
  cursor: pointer;
  width: fit-content;
  position: relative;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton div:hover::after {
  width: 100%;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton_small.productsDuringGame {
  display: block;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton.productsDuringGame {
  display: none;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productName,
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productPrice {
  text-align: left;
  padding: 10px 0 0 15px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productName p,
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productPrice p {
  margin: 0;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productPrice {
  font-family: "Bebas Neue Pro Bold";
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container {
  clear: both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 10px 0 0 15px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container .option {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  font-size: 1rem;
  color: #000;
  user-select: none;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container .option input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container .option input:focus-visible ~ .checkbox {
  border: 2px solid #000;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container .option input:checked ~ .checkbox1:after {
  opacity: 1;
  width: 5px;
  height: 12px;
  border-color: #000;
  transition: width 0.1s ease, height 0.08s ease 0.1s, border-color 0.3s ease, border-width 0.1s ease;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container .option:hover input ~ .checkbox {
  border: 1px solid #000;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container .option .checkbox {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #000;
  transition: all 0.15s;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .checkboxes-container .option .checkbox1:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 0;
  height: 0;
  border: solid #000;
  border-width: 2px 2px 0 0;
  opacity: 0;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  transition: width 0.08s ease 0.1s, height 0.1s ease, border-color 0.3s ease, opacity 0.1s ease 0.2s, border-width 0.1s ease;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .no-product {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .no-product img {
  height: 100px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .no-product div {
  font-size: 20px;
  margin: 1rem 0;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  margin-bottom: 30px;
  flex: 1 1 30%;
  max-width: 30%;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .skeleton {
  margin: 15px;
  border-radius: 4px;
  background-color: #f7f7f7;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .skeleton-image {
  height: 280px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .skeleton-text {
  height: 20px;
  width: 70%;
  margin-top: 10px;
}
.productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .skeleton-button {
  height: 40px;
  width: 60%;
  margin-top: 20px;
}
@keyframes loading {
  0% {
    background-color: #eeeeee;
  }
  50% {
    background-color: rgba(238, 238, 238, 0.7019607843);
  }
  100% {
    background-color: #eeeeee;
  }
}
.productListScreen .filter-productList .productlistmainsection .productListSection .skeleton {
  animation: loading 1.5s infinite;
}
.productListScreen .filter-productList .productlistmainsection .compareProduct {
  position: fixed;
  left: 50%;
  bottom: 0;
  max-width: 1200px;
  width: 90%;
  background-color: #f8f9fa;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 5px 0 5px rgba(0, 0, 0, 0.1), -5px 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  z-index: 1000;
  margin: 0 auto;
  background-color: #fff;
  transform: translate(-50%);
}
.productListScreen .filter-productList .productlistmainsection .compareProduct .buttonClearCompare {
  display: flex;
  align-items: center;
}
.productListScreen .filter-productList .productlistmainsection .compareProduct .buttonClearCompare .clearBTN {
  text-decoration: underline;
  font-family: "Bebas Neue Pro Light";
  cursor: pointer;
}
.productListScreen .filter-productList .productlistmainsection .compareProduct .buttonClearCompare .compareBTN {
  margin-left: 20px;
  font-family: "Bebas Neue Pro Bold";
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}
.productListScreen .filter-productList .productlistmainsection .button_loadmore {
  border: 1px solid #000;
  background: #000;
  padding: 20px;
  color: #fff;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.productListScreen .filter-productList .productlistmainsection .button_loadmore:hover {
  background: #fff;
  color: #000;
  border: 1px solid #000;
}

@media (max-width: 1100px) {
  .productListScreen {
    width: 97%;
  }
  .productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct,
  .productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper {
    flex: 1 1 30%;
    max-width: 30%;
  }
  .productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton,
  .productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .addToCartButton {
    display: none;
  }
  .productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .addToCartButton_small,
  .productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .addToCartButton_small {
    display: block;
  }
}
@media (max-width: 820px) {
  .productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct,
  .productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper {
    flex: 1 1 45%;
    max-width: 45%;
  }
  .productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .productImg,
  .productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .productImgCatalog .productImg {
    max-width: 100%;
  }
  .productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .wish-heart,
  .productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .productImgCatalog .wish-heart {
    right: 2px;
    top: 2px;
  }
  .productListScreen .filter-productList .productlistmainsection .productListSection .eachProduct .productImgCatalog .share,
  .productListScreen .filter-productList .productlistmainsection .productListSection .skeletonWrapper .productImgCatalog .share {
    display: none;
    top: 0px;
    left: 0px;
  }
  .productListScreen .filter-productList .productlistmainsection .filter-totals {
    top: 57px;
    padding: 0px 0px;
  }
}
@media (max-width: 560px) {
  .productListScreen .filterCompTotal {
    flex-direction: column;
    top: 55px;
  }
  .productListScreen .filter-productList .productlistmainsection .filter-totals {
    flex-direction: column;
    align-items: center;
  }
  .productListScreen .filter-productList .productlistmainsection .filter-totals .showTotal {
    margin: 10px auto;
  }
}
/*!**********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Layout/Footer/footer.scss ***!
  \**********************************************************************************************************************************/
.footer {
  width: 1200px;
  max-width: 85%;
  margin: 0 auto;
}
.footer .listOfColumn {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px 0px 0px;
  justify-content: space-between;
  color: #000;
  margin: 0 auto;
}
.footer .listOfColumn .eachColumn {
  flex: 1;
  min-width: 200px;
  margin: 10px 0px;
}
.footer .listOfColumn .eachColumn .footerMenu {
  cursor: pointer;
  width: fit-content;
}
.footer .listOfColumn .eachColumn div {
  font-family: "Bebas Neue Pro Light";
}
.footer .listOfColumn .eachColumn .footerHeader {
  margin-bottom: 15px;
  font-family: "Bebas Neue Pro Bold";
}
.footer .listOfColumn .eachColumn div:not(.footerHeader) {
  margin-bottom: 10px;
}
.footer .listOfColumn .eachColumn .socialMediaRow {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.footer .listOfColumn .eachColumn .socialMediaRow svg {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.footer .listOfColumn .eachColumn .socialMediaRow svg:hover {
  transform: scale(1.2);
}
.footer .listOfColumn .eachColumn .emailSubscription {
  display: flex;
  position: relative;
  z-index: 1;
}
.footer .listOfColumn .eachColumn .emailSubscription input[type=email] {
  flex-grow: 1;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #000;
  background-color: transparent;
  color: #000;
}
.footer .listOfColumn .eachColumn .emailSubscription input[type=email]::placeholder {
  color: #666;
}
.footer .listOfColumn .eachColumn .emailSubscription input[type=email]:focus {
  outline: none;
}
.footer .listOfColumn .eachColumn .emailSubscription div {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
  cursor: pointer;
  background-color: #000;
  color: #fff;
  border: none;
}
.footer .listOfColumn .eachColumn span {
  display: block;
  margin-top: 20px;
  font-size: smaller;
}
.footer .thin_divider {
  height: 0.75px;
  background: #eeeeee;
  margin: 0.5rem 0;
}
.footer .copyRight {
  padding: 10px 0px;
}
.footer .copyRight small {
  display: block;
  margin: 5px 0px;
}
/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Auth/LoginComponent/LoginOTP/LoginOTP.scss ***!
  \***************************************************************************************************************************************************/
.loginOTP {
  width: 1000px;
  max-width: 70%;
  margin: 0 auto;
  height: auto;
  background-color: #fff;
  padding: 100px 5px;
  position: relative;
}
.loginOTP h1 {
  text-align: center;
}
.loginOTP .logo {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.loginOTP .logo img {
  width: 100px;
}
.loginOTP .loginBox {
  width: 70%;
  margin: 0 auto;
}
.loginOTP .loginBox .otpInfo {
  text-align: center;
  margin: 20px auto;
  color: #555;
}
.loginOTP .loginBox .verificationInput {
  width: 50%;
  margin: 2rem auto 0;
}
.loginOTP .loginBox .verificationInput .error {
  color: #f16565;
  padding: 5px 0;
}
.loginOTP .loginBox .verificationInput .submit-btn {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 20px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal";
}
.loginOTP .loginBox .verificationInput div {
  font-weight: 700;
  text-align: center;
}
.loginOTP .loginBox .verificationInput input {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 20px 0;
  box-sizing: border-box;
  width: 100%;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px 0;
  font-size: 20px;
  text-align: center;
}
.loginOTP .loginBox .verificationInput input:focus {
  outline: none;
  border-bottom-color: #000;
}
.loginOTP .loginBox .verificationInput input::placeholder {
  font-size: 20px;
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-weight: normal;
}
.loginOTP .loginBox .resend {
  margin-top: 20px;
  text-align: center;
}
.loginOTP .loginBox .resend p {
  color: #777;
  margin: 5px 0;
}
.loginOTP .loginBox .resend .resent-tbn {
  color: #007ea8;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  width: fit-content;
  margin: 10px auto;
}
.loginOTP .loginBox .resend .resent-tbn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1.5px;
  background: #007ea8;
  transition: width 0.3s ease;
}
.loginOTP .loginBox .resend .resent-tbn:hover::after {
  width: 100%;
}
.loginOTP .close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 508px) {
  .loginOTP {
    max-width: 95%;
  }
  .loginOTP .loginBox {
    width: 80%;
  }
  .loginOTP .loginBox .verificationInput {
    width: 80%;
  }
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Auth/LoginComponent/ForgetPassword/ForgetPassword.scss ***!
  \***************************************************************************************************************************************************************/
.forgetPassword {
  width: 1000px;
  max-width: 70%;
  margin: 0 auto;
  height: auto;
  background-color: #fff;
  padding: 50px 5px;
  position: relative;
}
.forgetPassword h1 {
  text-align: center;
}
.forgetPassword .logo {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.forgetPassword .logo img {
  width: 100px;
}
.forgetPassword .emailForm {
  width: 50%;
  margin: 2rem auto 0;
}
.forgetPassword .emailForm p {
  text-align: center;
}
.forgetPassword .emailForm input {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 20px 0;
  box-sizing: border-box;
  width: 100%;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px 0;
  font-size: 16px;
  text-align: center;
}
.forgetPassword .emailForm input:focus {
  outline: none;
  border-bottom-color: #000;
}
.forgetPassword .emailForm input::placeholder {
  font-size: 16px;
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-weight: normal;
}
.forgetPassword .emailForm .sendBtn {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 20px;
  width: 100%;
  font-family: "Bebas Neue Pro Normal";
}
.forgetPassword .emailForm .error {
  color: #f16565;
  text-align: center;
  margin-top: 1rem;
}
.forgetPassword .emailForm .Message {
  color: #007ea8;
  text-align: center;
  margin-top: 1rem;
}
.forgetPassword .privacyPolicy {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin: 1rem auto;
}
.forgetPassword .privacyPolicy small {
  text-decoration: underline;
}
.forgetPassword .close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 508px) {
  .forgetPassword {
    max-width: 95%;
  }
  .forgetPassword .emailForm {
    width: 80%;
  }
  .forgetPassword .emailForm input {
    width: 100%;
  }
  .forgetPassword .privacyPolicy {
    width: 80%;
  }
}
/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Auth/LoginComponent/ResetPassword/ResetPassword.scss ***!
  \*************************************************************************************************************************************************************/
.resetPassword {
  width: fit-content;
  margin: 10px;
  height: auto;
  background-color: #fff;
  padding: 100px 100px;
  position: relative;
  overflow: scroll;
}
.resetPassword::-webkit-scrollbar {
  display: none;
}
.resetPassword h1 {
  text-align: center;
}
.resetPassword .logo {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.resetPassword .logo img {
  width: 100px;
}
.resetPassword .resetPasswordForm {
  width: 100%;
  margin: 2rem auto 0;
}
.resetPassword .resetPasswordForm p {
  text-align: center;
}
.resetPassword .resetPasswordForm .passwordInput {
  position: relative;
  width: 100%;
  margin: 2rem auto;
}
.resetPassword .resetPasswordForm .passwordInput input {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 20px auto;
  box-sizing: border-box;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px 0;
  font-size: 16px;
  text-align: left;
  display: block;
  width: 300px;
  padding-right: 30px;
}
.resetPassword .resetPasswordForm .passwordInput input:focus {
  outline: none;
  border-bottom-color: #000;
}
.resetPassword .resetPasswordForm .passwordInput input::placeholder {
  font-size: 16px;
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-weight: normal;
  text-align: left;
}
.resetPassword .resetPasswordForm .passwordInput .togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.resetPassword .resetPasswordForm .Message {
  color: #007ea8;
  text-align: center;
  margin-top: 1rem;
}
.resetPassword .resetPasswordForm .passwordBTN {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 20px;
  font-family: "Bebas Neue Pro Normal";
}
.resetPassword .resetPasswordForm .condtionForPassword {
  margin-top: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.resetPassword .resetPasswordForm .condtionForPassword p {
  text-align: left;
  font-size: 12px;
}
.resetPassword .resetPasswordForm .condtionForPassword.show {
  opacity: 1;
  transform: translateY(0);
}
.resetPassword .close {
  position: absolute;
  right: 20px;
  top: 50px;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .resetPassword {
    padding: 50px 20px;
  }
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Auth/Login/Login.scss ***!
  \******************************************************************************************************************************/
.login {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login .loginScreen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.login .loginScreen .loginForm {
  flex: 1;
}
.login .loginScreen .loginForm .form {
  margin: 1rem 0;
}
.login .loginScreen .loginForm .form .input,
.login .loginScreen .loginForm .form .passwordInput {
  margin-bottom: 0;
  width: 100%;
}
.login .loginScreen .loginForm .form .input input,
.login .loginScreen .loginForm .form .passwordInput input {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  width: 100%;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px;
  padding-right: 2.5rem;
  font-size: 16px;
}
.login .loginScreen .loginForm .form .input input:focus,
.login .loginScreen .loginForm .form .passwordInput input:focus {
  outline: none;
  border-bottom-color: #000;
}
.login .loginScreen .loginForm .form .input input::placeholder,
.login .loginScreen .loginForm .form .passwordInput input::placeholder {
  color: #888;
  font-size: 14px;
  font-weight: normal;
}
.login .loginScreen .loginForm .form .input .loginError,
.login .loginScreen .loginForm .form .passwordInput .loginError {
  color: #f16565;
  font-size: 14px;
  padding-left: 5px;
}
.login .loginScreen .loginForm .form .passwordInput {
  position: relative;
  margin: 1rem auto;
  z-index: 1;
  background: transparent;
}
.login .loginScreen .loginForm .form .passwordInput .togglePassword {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  z-index: 2;
  cursor: pointer;
}
.login .loginScreen .loginForm .form .passwordInput .togglePassword svg {
  width: 1rem;
  height: 1rem;
}
.login .loginScreen .login-btn-disable {
  cursor: not-allowed;
  border: 1px solid #555;
  background-color: #555;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  transition: all 0.1s ease-in-out;
}
.login .loginScreen .keep-me-in {
  display: flex;
  margin: 1.5rem 0;
  align-items: flex-start;
}
.login .loginScreen .keep-me-in input[type=checkbox] {
  background-color: #f16565;
  color: white;
}
.login .loginScreen .keep-me-in div p {
  margin: 0;
  margin-left: 0.5rem;
  line-height: 1.2;
  color: #000;
}
.login .loginScreen .keep-me-in div p:last-of-type {
  color: #777;
  font-size: 14px;
}
.login .loginScreen .forget-password {
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}
.login .loginScreen .divider-register {
  width: 1px;
  height: 400px;
  background-color: #000;
  margin: 0 20px;
}
.login .signupSec {
  flex: 1;
}
.login .signupSec p {
  color: #555;
  margin: 2rem 0;
}

.loginError {
  color: #f16565;
  padding-left: 5px;
}

.login-btn {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal";
}
.login-btn:hover {
  background-color: #444;
  border: 1px solid #444;
}

.modal-overlay {
  position: fixed;
  /* Overlay takes the whole screen */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 730px) {
  .login {
    height: auto;
  }
  .login .loginScreen {
    flex-direction: column;
    margin: 20px 0;
    align-items: flex-start;
  }
  .login .loginScreen .divider-register {
    width: 100%;
    height: 1px;
    background-color: #000;
    margin: 20px 0px;
  }
}
.login_comp {
  background-color: #fff;
  padding: 20px 5px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}
.login_comp::-webkit-scrollbar {
  display: none;
}

.error {
  color: #f16565;
  text-align: center;
  margin: 1rem 0;
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/404/PageNotFound.scss ***!
  \******************************************************************************************************************************/
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70vh;
  font-family: "Bebas Neue Pro Normal";
  color: #000;
  border-bottom: 0.5px solid #000;
}
.flex-container .text-center {
  text-align: center;
}
.flex-container .text-center h1,
.flex-container .text-center h3 {
  margin: 10px;
  cursor: default;
}
.flex-container .text-center h1 .fade-in,
.flex-container .text-center h3 .fade-in {
  animation: fadeIn 2s ease infinite;
}
.flex-container .text-center h1 {
  font-size: 8em;
  transition: font-size 200ms ease-in-out;
  border-bottom: 1px dashed #000;
}
.flex-container .text-center h1 span#digit1 {
  animation-delay: 200ms;
}
.flex-container .text-center h1 span#digit2 {
  animation-delay: 300ms;
}
.flex-container .text-center h1 span#digit3 {
  animation-delay: 400ms;
}
.flex-container .text-center button {
  border: 1px solid #000;
  background: transparent;
  outline: none;
  padding: 10px 20px;
  font-size: 1.1rem;
  font-weight: bold;
  font-family: "Bebas Neue Pro Normal";
  color: #000;
  text-transform: uppercase;
  transition: background-color 200ms ease-in;
  margin: 20px 0;
}
.flex-container .text-center button:hover {
  background-color: white;
  color: #555;
  cursor: pointer;
}

@keyframes colorSlide {
  0% {
    background-color: #152a68;
  }
  25% {
    background-color: royalblue;
  }
  50% {
    background-color: seagreen;
  }
  75% {
    background-color: tomato;
  }
  100% {
    background-color: #152a68;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/RelatedProducts/ProductModel/ProductModel.scss ***!
  \***************************************************************************************************************************************************************/
.productSizeModel {
  background-color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  width: 90%;
  position: relative;
  max-width: 1000px;
}
.productSizeModel .productImagesSec {
  padding: 1rem 0;
  width: 50%;
  gap: 20px;
  flex: 1;
  position: sticky;
  top: 10px;
}
.productSizeModel .productImagesSec .productImage img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.productSizeModel .productsDe {
  margin: 1rem 0;
  width: 50%;
  max-height: 500px;
  overflow-y: auto;
}
.productSizeModel .productsDe::-webkit-scrollbar {
  display: none;
}
.productSizeModel .productsDe h1 {
  text-transform: uppercase;
}
.productSizeModel .productsDe .price {
  font-size: 1.3rem;
  margin: 20px 0 0 0;
}
.productSizeModel .productsDe .descriptionDivider {
  position: relative;
  height: 1px;
  margin: 1rem auto;
}
.productSizeModel .productsDe .descriptionDivider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(48, 49, 51), transparent);
}
.productSizeModel .productsDe .product-size {
  width: 100%;
}
.productSizeModel .productsDe .product-size .sizeTitle {
  width: 100%;
  margin: 15px 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.productSizeModel .productsDe .product-size .sizeError {
  color: #f16565;
  margin: 10px 0;
  animation: shake 700ms ease-out;
}
.productSizeModel .productsDe .product-size .allSizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px 10px;
}
.productSizeModel .productsDe .product-size .allSizes .eachSize {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #999;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.productSizeModel .productsDe .product-size .allSizes .eachSize:hover {
  border: 1px solid #000;
}
.productSizeModel .productsDe .product-size .allSizes .eachSize.disabled {
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: not-allowed;
  color: #666666;
}
.productSizeModel .productsDe .product-size .allSizes .eachSize .sizeNumber {
  font-size: 14px;
  color: #333;
}
.productSizeModel .productsDe .product-size .allSizes .eachSize .sizeNumber.disabled {
  color: #999;
}
.productSizeModel .productsDe .product-size .eachSize.selected {
  background-color: #000;
}
.productSizeModel .productsDe .product-size .eachSize.selected .sizeNumber {
  color: #fff;
}
.productSizeModel .productsDe .addToCartButton {
  position: relative;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  background-color: #000;
  color: white;
  margin: 20px 0px;
  transition: opacity 0.3s ease-in-out;
  width: auto;
}
.productSizeModel .productsDe .addToCartButton div {
  cursor: pointer;
  width: fit-content;
  position: relative;
}
.productSizeModel .productsDe .addToCartButton div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}
.productSizeModel .productsDe .addToCartButton div:hover::after {
  width: 100%;
}
.productSizeModel .productsDe .productsDescription div {
  font-weight: 800;
  font-size: 20px;
}
.productSizeModel .productsDe .productsDescription p {
  color: #555;
  font-family: "Bebas Neue Pro Light";
}
.productSizeModel .productsDe .getFullInfo {
  border-radius: 50px;
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.productSizeModel .productsDe .getFullInfo:hover {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
}

.close-Size_model {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
}

@media screen and (max-width: 650px) {
  .productSizeModel {
    flex-direction: column;
    width: 80%;
    max-height: 95%;
    overflow-y: scroll;
  }
  .productSizeModel .productImagesSec {
    width: 100%/2;
    margin: 0 auto;
    position: relative;
  }
  .productSizeModel .productImagesSec .productImage {
    width: 70%;
  }
  .productSizeModel .productsDe {
    width: 80%;
    margin: 0 auto;
  }
}
@media (max-width: 500px) {
  .productSizeModel {
    width: 90%;
  }
  .productSizeModel .productImagesSec {
    width: 100%/2;
  }
  .productSizeModel .productImagesSec .productImage {
    width: 100%;
  }
  .productSizeModel .productsDe {
    width: 100%;
    margin: 0 auto;
  }
  .productSizeModel .productsDe .product-size,
  .productSizeModel .productsDe .addToCartButton {
    width: 90%;
  }
}
/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/RelatedProducts/RelatedProducts.scss ***!
  \*****************************************************************************************************************************************************/
.relatedProducts {
  width: 1500px;
  max-width: 90%;
  margin: 3rem auto;
  user-select: none;
}
.relatedProducts swiper-slide img {
  height: 200px;
  width: auto;
  object-fit: cover;
  background: #eee;
}
.relatedProducts .swiper-pagination {
  display: none;
}
.relatedProducts .swiper-button-next,
.relatedProducts .swiper-button-prev {
  display: none;
}
.relatedProducts .each_product {
  cursor: pointer;
}
.relatedProducts .each_product p {
  font-size: 14px;
}
.dividerr {
  text-align: center;
  width: 1500px;
  max-width: 90%;
  margin: 40px auto;
  color: #000;
  overflow: hidden;
}
.dividerr:before, .dividerr:after {
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
  max-width: 50%;
  z-index: -1;
}
.dividerr:before {
  background: linear-gradient(to right, transparent, #555);
  right: 0.5em;
  margin-left: -50%;
}
.dividerr:after {
  background: linear-gradient(to right, #555, transparent);
  left: 0.5em;
  margin-right: -50%;
}
/*!***********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/Review/Review.scss ***!
  \***********************************************************************************************************************************/
.ratings_comp {
  margin: 1rem 0;
}
.ratings_comp .ratingsHeader {
  display: flex;
  align-items: center;
}
.ratings_comp .ratingsHeader div {
  font-weight: 800;
  font-size: 20px;
}
.ratings_comp .ratingsHeader img {
  height: 50px;
  margin-left: 10px;
}
.ratings_comp .ratingWidge {
  display: flex;
  align-items: center;
}
.ratings_comp .ratingWidge .averageCom .ratingsHeader_avg {
  display: flex;
  align-items: center;
}
.ratings_comp .ratingWidge .averageCom .ratingsHeader_avg .rates {
  font-weight: 800;
  font-size: 30px;
}
.ratings_comp .ratingWidge .averageCom .ratingsHeader_avg img {
  height: 20px;
  margin-left: 5px;
}
.ratings_comp .ratingWidge .averageCom small {
  color: #555;
  margin-top: 10px;
  display: inline-block;
}
.ratings_comp .ratingWidge .averageCom small span {
  color: #000;
}
.ratings_comp .ratingWidge .divider_Vertical {
  width: 0.75px;
  height: 100px;
  background-color: #999;
  margin: 0 50px;
}
.ratings_comp .ratingWidge .rateListAllocation .rateAllocation .eachBar {
  display: flex;
  align-items: center;
  margin: 7px 0;
}
.ratings_comp .ratingWidge .rateListAllocation .rateAllocation .eachBar .rate {
  width: 10px;
  font-size: 14px;
  color: #999;
}
.ratings_comp .ratingWidge .rateListAllocation .rateAllocation .eachBar img {
  height: 10px;
}
.ratings_comp .ratingWidge .rateListAllocation .rateAllocation .eachBar .progress-bar-container {
  width: 120px;
  height: 4px;
  background-color: #ccc;
  border-radius: 10px;
  overflow: hidden;
  margin-left: 5px;
}
.ratings_comp .ratingWidge .rateListAllocation .rateAllocation .eachBar .progress-bar-container .progress-bar {
  height: 100%;
  background-color: #10b7ea;
  transition: width 0.5s ease-in-out;
}
.ratings_comp .ratingWidge .rateListAllocation .rateAllocation .eachBar .totalRatesCount {
  font-size: 12px;
  color: #555;
  margin-left: 5px;
}

.each_review {
  padding: 10px 10px;
  border-top: 0.75px solid #999;
  border-bottom: 0.75px solid #999;
  display: flex;
  width: 90%;
}
.each_review:first-of-type {
  border-top: none;
}
.each_review .ratedByuser {
  display: flex;
  align-items: center;
  padding: 5px;
  background-color: #000;
  color: #fff;
  width: fit-content;
  font-size: 10px;
  height: fit-content;
  margin: 15px 5px;
}
.each_review .ratedByuser div {
  margin-right: 2px;
}
.each_review .comment_user .comment {
  font-size: 15px;
  color: #333;
  margin: 15px 0;
}
.each_review .comment_user .header_reaview {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.each_review .comment_user .header_reaview .reviewer {
  display: flex;
  align-items: center;
}
.each_review .comment_user .header_reaview .reviewer img {
  height: 15px;
  margin-left: 2px;
}
.each_review .comment_user .header_reaview div {
  color: #555;
  font-size: 13px;
}
.each_review .comment_user .header_reaview div:last-of-type {
  color: #777;
  font-size: 11px;
}
/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductDetails/ProductDetail.scss ***!
  \**************************************************************************************************************************************************/
.productDetailSection {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  width: 1500px;
  max-width: 90%;
  margin: 40px auto;
}
.productDetailSection .path {
  text-transform: uppercase;
}
.productDetailSection .path .linkOnProduct {
  cursor: pointer;
}
.productDetailSection .productImagesSec {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex: 1;
  align-self: flex-start;
  position: sticky;
  top: 100px;
}
.productDetailSection .productImagesSec .showInSmallScreenListOfProduct {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.productDetailSection .productImagesSec .showInSmallScreenListOfProduct .smallProductImage {
  position: relative;
  width: 65px;
  overflow: hidden;
  padding: 3px;
}
.productDetailSection .productImagesSec .showInSmallScreenListOfProduct .smallProductImage img {
  width: 65px;
  height: 65px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.productDetailSection .productImagesSec .showInSmallScreenListOfProduct .smallProductImage:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}
.productDetailSection .productImagesSec .productImage {
  flex: 3;
}
.productDetailSection .productImagesSec .productImage img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.productDetailSection .productDetails {
  flex: 1;
  position: sticky;
  align-self: flex-start;
  top: 100px;
}
.productDetailSection .productDetails .productsDe h1 {
  text-transform: uppercase;
}
.productDetailSection .productDetails .productsDe .price {
  font-size: 1.3rem;
  margin: 20px 0 0 0;
}
.productDetailSection .productDetails .productsDe .share {
  cursor: pointer;
}
.productDetailSection .productDetails .productsDe .share-quantity {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.productDetailSection .productDetails .productsDe .qty-input {
  margin: 1.2rem 0;
  color: #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #ccc;
  width: fit-content;
  font-family: "Bebas Neue Pro Normal";
}
.productDetailSection .productDetails .productsDe .qty-input .product-qty,
.productDetailSection .productDetails .productsDe .qty-input .qty-count {
  background: transparent;
  color: inherit;
  font-weight: bold;
  font-size: inherit;
  border: none;
  display: inline-block;
  min-width: 0;
  height: 2rem;
  line-height: 1;
}
.productDetailSection .productDetails .productsDe .qty-input .product-qty:focus,
.productDetailSection .productDetails .productsDe .qty-input .qty-count:focus {
  outline: none;
}
.productDetailSection .productDetails .productsDe .qty-input .product-qty {
  width: 50px;
  min-width: 0;
  display: inline-block;
  text-align: center;
  appearance: textfield;
}
.productDetailSection .productDetails .productsDe .qty-input .product-qty::-webkit-outer-spin-button, .productDetailSection .productDetails .productsDe .qty-input .product-qty::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.productDetailSection .productDetails .productsDe .qty-input .qty-count {
  padding: 0;
  cursor: pointer;
  width: 2.5rem;
  font-size: 1.25em;
  text-indent: -100px;
  overflow: hidden;
  position: relative;
}
.productDetailSection .productDetails .productsDe .qty-input .qty-count:before, .productDetailSection .productDetails .productsDe .qty-input .qty-count:after {
  content: "";
  height: 2px;
  width: 10px;
  position: absolute;
  display: block;
  background: #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.productDetailSection .productDetails .productsDe .qty-input .qty-count--minus {
  border-right: 1px solid #e2e2e2;
}
.productDetailSection .productDetails .productsDe .qty-input .qty-count--add {
  border-left: 1px solid #e2e2e2;
}
.productDetailSection .productDetails .productsDe .qty-input .qty-count--add:after {
  transform: rotate(90deg);
}
.productDetailSection .productDetails .productsDe .qty-input .qty-count:disabled {
  color: #ccc;
  background: #f2f2f2;
  cursor: not-allowed;
  border-color: transparent;
}
.productDetailSection .productDetails .productsDe .qty-input .qty-count:disabled:before, .productDetailSection .productDetails .productsDe .qty-input .qty-count:disabled:after {
  background: #ccc;
}
.productDetailSection .productDetails .productsDe .descriptionDivider {
  position: relative;
  height: 1px;
  margin: 1.5rem auto;
}
.productDetailSection .productDetails .productsDe .descriptionDivider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  right: 5%;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(48, 49, 51), transparent);
}
.productDetailSection .productDetails .productsDe .smaller {
  margin: 1rem auto;
}
.productDetailSection .productDetails .productsDe .sizeError {
  color: #f16565;
  margin: 10px 0;
  animation: shake 700ms ease-out;
}
.productDetailSection .productDetails .productsDe .product-size {
  width: 80%;
}
.productDetailSection .productDetails .productsDe .product-size .sizeTitle {
  width: 100%;
  margin: 15px 0;
  font-size: 1.1rem;
  font-weight: 800;
}
.productDetailSection .productDetails .productsDe .product-size .sizeError {
  color: #f16565;
  margin: 10px 0;
  animation: shake 700ms ease-out;
}
.productDetailSection .productDetails .productsDe .product-size .allSizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: felx-start;
  gap: 20px 10px;
}
.productDetailSection .productDetails .productsDe .product-size .allSizes .eachSize {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #999;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.productDetailSection .productDetails .productsDe .product-size .allSizes .eachSize:hover {
  border: 1px solid #000;
}
.productDetailSection .productDetails .productsDe .product-size .allSizes .eachSize.disabled {
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: not-allowed;
  color: #666666;
}
.productDetailSection .productDetails .productsDe .product-size .allSizes .eachSize .sizeNumber {
  font-size: 16px;
  color: #333;
}
.productDetailSection .productDetails .productsDe .product-size .allSizes .eachSize .sizeNumber.disabled {
  color: #999;
}
.productDetailSection .productDetails .productsDe .product-size .eachSize.selected {
  background-color: #000;
}
.productDetailSection .productDetails .productsDe .product-size .eachSize.selected .sizeNumber {
  color: #fff;
}
.productDetailSection .productDetails .productsDe .addToWish {
  padding: 15px 0px;
  text-align: center;
  margin: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  width: fit-content;
}
.productDetailSection .productDetails .productsDe .addToWish span {
  display: block;
  margin: 0;
  margin-left: 5px;
  font-size: 18px;
  width: fit-content;
  position: relative;
}
.productDetailSection .productDetails .productsDe .addToWish span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 0.5px;
  background: #000;
  transition: width 0.3s ease;
}
.productDetailSection .productDetails .productsDe .addToWish span:hover::after {
  width: 100%;
}
.productDetailSection .productDetails .productsDe .addToCartButton {
  position: relative;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  background-color: #000;
  color: white;
  margin: 20px 0px;
  transition: opacity 0.3s ease-in-out;
  width: 70%;
}
.productDetailSection .productDetails .productsDe .addToCartButton div {
  cursor: pointer;
  width: fit-content;
  position: relative;
}
.productDetailSection .productDetails .productsDe .addToCartButton div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}
.productDetailSection .productDetails .productsDe .addToCartButton div:hover::after {
  width: 100%;
}
.productDetailSection .productDetails .productsDe .productsDescription div {
  font-weight: 800;
  font-size: 20px;
}
.productDetailSection .productDetails .productsDe .productsDescription .descrptHeader {
  display: flex;
  align-items: center;
}
.productDetailSection .productDetails .productsDe .productsDescription .descrptHeader svg {
  color: #555;
  margin-left: 5px;
  height: 20px;
  width: 20px;
}
.productDetailSection .productDetails .productsDe .productsDescription p {
  color: #555;
  font-family: "Bebas Neue Pro Light";
}

@media (max-width: 1000px) {
  .productDetailSection .productImagesSec {
    flex-direction: column-reverse;
  }
  .productDetailSection .productImagesSec .showInSmallScreenListOfProduct {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 8rem;
  }
  .productDetailSection .productImagesSec .productImage {
    min-height: 400px;
    max-height: 400px;
    width: 400px;
  }
  .productDetailSection .productImagesSec .productImage img {
    height: 100%;
  }
  .productDetailSection .productDetails .productsDe .addToCartButton {
    width: 90%;
  }
  .productDetailSection .productDetails .productsDe .product-size {
    width: 100%;
  }
  .productDetailSection .productDetails .productsDe .product-size .eachSize {
    height: 30px;
    width: 30px;
  }
}
@media (max-width: 720px) {
  .productDetailSection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0px auto;
    margin-bottom: 104px;
  }
  .productDetailSection .productImagesSec {
    position: relative;
    margin: 0 auto;
  }
  .productDetailSection .productImagesSec .showInSmallScreenListOfProduct {
    margin-top: 0rem;
  }
  .productDetailSection .productImagesSec .productImage {
    max-height: 300px;
    width: 300px;
  }
  .productDetailSection .productImagesSec .productImage img {
    height: 100%;
    width: 100%;
  }
  .productDetailSection .productDetails {
    position: relative;
    margin: 20px 0px;
  }
  .productDetailSection .productDetails .productsDe .addToCartButton {
    width: 85%;
  }
  .productDetailSection .productDetails .productsDe .product-size .eachSize {
    height: 30px;
    width: 30px;
  }
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(-4px);
  }
  15% {
    transform: translateX(4px);
  }
  25% {
    transform: translateX(-4px);
  }
  35% {
    transform: translateX(4px);
  }
  45% {
    transform: translateX(-4px);
  }
  55% {
    transform: translateX(4px);
  }
  65% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(3px);
  }
  85% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}
/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductCompare/ProductCompare.scss ***!
  \***************************************************************************************************************************************************/
.comparionScreen {
  width: 1500px;
  max-width: 90%;
  margin: 40px auto;
}
.comparionScreen .product-headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comparionScreen .product-headers h2 {
  position: relative;
  right: 50%;
  transform: translate(50%, 0%);
}
.comparionScreen .product-headers .backButton {
  cursor: pointer;
}
.comparionScreen .product-headers .backButton span {
  text-decoration: underline;
}
.comparionScreen .listOfComparingProducts {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
}
.comparionScreen .listOfComparingProducts .each-image-column {
  display: flex;
  padding: 20px;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
.comparionScreen .listOfComparingProducts .each-image-column .emptyContent {
  text-align: center;
  padding: 2rem;
  cursor: pointer;
}
.comparionScreen .listOfComparingProducts .each-image-column .emptyContent .plus {
  font-size: 25px;
  margin-bottom: 1rem;
}
.comparionScreen .listOfComparingProducts .each-image-column img {
  width: 50%;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .price {
  font-size: 1.3rem;
  margin: 20px 0 0 0;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .descriptionDivider {
  position: relative;
  height: 1px;
  margin: 1.5rem auto;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .descriptionDivider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  right: 0%;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(48, 49, 51), transparent);
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .sizeError {
  color: #f16565;
  margin: 10px 0;
  animation: shake 700ms ease-out;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size {
  width: 100%;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .sizeTitle {
  width: 100%;
  margin: 15px 0;
  font-size: 1.1rem;
  font-weight: 800;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .sizeError {
  color: #f16565;
  margin: 10px 0;
  animation: shake 700ms ease-out;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .allSizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: felx-start;
  gap: 10px 10px;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .allSizes .eachSize {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #999;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .allSizes .eachSize:hover {
  border: 1px solid #000;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .allSizes .eachSize.disabled {
  background-color: #fff;
  border: 1px solid #bbb;
  cursor: not-allowed;
  color: #666666;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .allSizes .eachSize .sizeNumber {
  font-size: 14px;
  color: #333;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .allSizes .eachSize .sizeNumber.disabled {
  color: #999;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .eachSize.selected {
  background-color: #000;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .product-size .eachSize.selected .sizeNumber {
  color: #fff;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .addToWish {
  padding: 15px 0px;
  text-align: center;
  margin: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  width: fit-content;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .addToWish span {
  display: block;
  margin: 0;
  margin-left: 5px;
  font-size: 18px;
  width: fit-content;
  position: relative;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .addToWish span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #000;
  transition: width 0.3s ease;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .addToWish span:hover::after {
  width: 100%;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .addToCartButton {
  opacity: 1;
  padding: 20px 20px;
  background-color: #000;
  color: white;
  margin: 20px 0px;
  transition: opacity 0.3s ease-in-out;
  text-align: center;
  cursor: pointer;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .productsDescription div {
  font-weight: 800;
  font-size: 20px;
}
.comparionScreen .listOfComparingProducts .each-image-column .productsDe .productsDescription p {
  color: #555;
  font-family: "Bebas Neue Pro Light";
}
.comparionScreen .listOfComparingProducts .empty {
  border: 0.75px dotted rgba(238, 238, 238, 0.7058823529);
  background-color: rgba(238, 238, 238, 0.7058823529);
  transition: all 0.2s ease-in-out;
  border-radius: 5px;
}
/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/WishStore/WishStore.scss ***!
  \*********************************************************************************************************************************/
.wishListComp {
  max-width: 1500px;
  width: 85%;
  margin: 2rem auto;
}
.wishListComp .wishLiftHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 30px;
}
.wishListComp .emptyWish {
  margin: 0 auto;
  width: 300px;
  text-align: center;
}
.wishListComp .emptyWish small {
  color: #555;
  text-decoration: underline;
}
.wishListComp .emptyWish div:first-of-type {
  font-family: "Bebas Neue Pro Bold";
}
.wishListComp .emptyWish div:nth-of-type(2) {
  font-family: "Bebas Neue Pro Light";
  margin: 10px 0;
}
.wishListComp .emptyWish div:last-of-type {
  border: 1px solid #000;
  padding: 10px;
  margin: 20px 40px;
  cursor: pointer;
}
.wishListComp .productListSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  margin: 2rem auto;
}
.wishListComp .productListSection .eachProduct {
  position: relative;
  flex: 1 1 calc(33.33% - 30px);
  max-width: calc(33.33% - 30px);
  transition: box-shadow 0.3s ease-in-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  margin-bottom: 30px;
}
.wishListComp .productListSection .eachProduct:hover .addToCartButton {
  opacity: 1;
}
.wishListComp .productListSection .eachProduct .productImgCatalog {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 280px;
}
.wishListComp .productListSection .eachProduct .productImgCatalog span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  cursor: pointer;
  padding: 10px;
  background-color: #eeeeee;
  border-radius: 5px;
}
.wishListComp .productListSection .eachProduct .productImgCatalog span:first-child {
  left: 10px;
}
.wishListComp .productListSection .eachProduct .productImgCatalog span:last-child {
  right: 10px;
}
.wishListComp .productListSection .eachProduct .productImgCatalog:hover span {
  display: block;
}
.wishListComp .productListSection .eachProduct .productImgCatalog .productImg {
  max-width: 70%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
}
.wishListComp .productListSection .eachProduct .productImgCatalog .totalImageBullet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.wishListComp .productListSection .eachProduct .productImgCatalog .totalImageBullet .eachImageBullet {
  width: 10px;
  transform: scaleX(1);
  height: 4px;
  background-color: #ccc;
  border-radius: 1px;
  transition: all 0.3s;
}
.wishListComp .productListSection .eachProduct .productImgCatalog .totalImageBullet .eachImageBullet.active {
  background-color: #000;
  transform: scaleX(1.5);
}
.wishListComp .productListSection .eachProduct .productImgCatalog:hover .totalImageBullet {
  opacity: 1;
}
.wishListComp .productListSection .eachProduct .addToCartButton_small {
  display: none;
  padding: 10px 5px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #000;
  margin: 10px 5px;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.wishListComp .productListSection .eachProduct .addToCartButton_small:hover {
  background-color: #000;
  color: #fff;
}
.wishListComp .productListSection .eachProduct .addToCartButton {
  position: relative;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  background-color: #000;
  color: white;
  margin: 20px 15px;
  transition: opacity 0.3s ease-in-out;
}
.wishListComp .productListSection .eachProduct .addToCartButton div {
  cursor: pointer;
  width: fit-content;
  position: relative;
}
.wishListComp .productListSection .eachProduct .addToCartButton div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}
.wishListComp .productListSection .eachProduct .addToCartButton div:hover::after {
  width: 100%;
}
.wishListComp .productListSection .eachProduct .addToCartButton_small.wishlistDuringGame {
  display: none;
}
.wishListComp .productListSection .eachProduct .addToCartButton.wishlistDuringGame {
  display: none;
}
.wishListComp .productListSection .eachProduct .productName,
.wishListComp .productListSection .eachProduct .productPric {
  text-align: left;
  padding: 5px 0 0 15px;
}
.wishListComp .productListSection .eachProduct .productName p,
.wishListComp .productListSection .eachProduct .productPric p {
  margin: 0;
}
.wishListComp .productListSection .eachProduct .productPrice {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wishListComp .productListSection .eachProduct .productPrice .wish-share {
  margin-right: 22px;
  font-size: 23px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(238, 238, 238, 0.7058823529);
  transition: all 0.2s ease-in-out;
  background-color: rgba(238, 238, 238, 0.4);
}
.wishListComp .productListSection .eachProduct .productPrice .wish-share:hover {
  border: 1px solid #eee;
  background-color: #eee;
}
.wishListComp .productListSection .eachProduct .productPrice .wish-share .trashcan {
  width: 20px;
  height: 20px;
  fill: #000;
}
.wishListComp .productListSection .eachProduct .productPrice .wish-share .trashcan .trashcan-open {
  display: none;
}
.wishListComp .productListSection .eachProduct .productPrice .wish-share:hover .trashcan-open {
  display: inline;
}
.wishListComp .productListSection .eachProduct .productPrice .wish-share:hover .trashcan-closed {
  display: none;
}
.wishListComp .productListSection .eachProduct .productPrice p {
  font-family: "Bebas Neue Pro Bold";
  padding: 5px 0 0 15px;
}
.wishListComp .productListSection .eachProduct .checkboxes-container {
  clear: both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5px 0 0 15px;
}
.wishListComp .productListSection .eachProduct .checkboxes-container .option {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  font-size: 1rem;
  color: #000;
  user-select: none;
}
.wishListComp .productListSection .eachProduct .checkboxes-container .option input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.wishListComp .productListSection .eachProduct .checkboxes-container .option input:focus-visible ~ .checkbox {
  border: 2px solid #000;
}
.wishListComp .productListSection .eachProduct .checkboxes-container .option input:checked ~ .checkbox1:after {
  opacity: 1;
  width: 5px;
  height: 12px;
  border-color: #000;
  transition: width 0.1s ease, height 0.08s ease 0.1s, border-color 0.3s ease, border-width 0.1s ease;
}
.wishListComp .productListSection .eachProduct .checkboxes-container .option:hover input ~ .checkbox {
  border: 1px solid #000;
}
.wishListComp .productListSection .eachProduct .checkboxes-container .option .checkbox {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #000;
  transition: all 0.15s;
}
.wishListComp .productListSection .eachProduct .checkboxes-container .option .checkbox1:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 0;
  height: 0;
  border: solid #000;
  border-width: 2px 2px 0 0;
  opacity: 0;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  transition: width 0.08s ease 0.1s, height 0.1s ease, border-color 0.3s ease, opacity 0.1s ease 0.2s, border-width 0.1s ease;
}
.wishListComp .productListSection .skeletonWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  margin-bottom: 30px;
  flex: 1 1 calc(33.33% - 30px);
  max-width: calc(33.33% - 30px);
}
.wishListComp .productListSection .skeletonWrapper .skeleton {
  margin: 15px;
  border-radius: 4px;
  background-color: #f7f7f7;
}
.wishListComp .productListSection .skeletonWrapper .skeleton-image {
  height: 280px;
}
.wishListComp .productListSection .skeletonWrapper .skeleton-text {
  height: 20px;
  width: 70%;
  margin-top: 10px;
}
.wishListComp .productListSection .skeletonWrapper .skeleton-button {
  height: 40px;
  width: 60%;
  margin-top: 20px;
}
@keyframes loading {
  0% {
    background-color: #eeeeee;
  }
  50% {
    background-color: rgba(238, 238, 238, 0.7019607843);
  }
  100% {
    background-color: #eeeeee;
  }
}
.wishListComp .productListSection .skeleton {
  animation: loading 1.5s infinite;
}
.wishListComp .productListSection .noProductFound {
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin-top: 20px;
}

@media (max-width: 1100px) {
  .wishListComp .productListSection .eachProduct,
  .wishListComp .productListSection .skeletonWrapper {
    flex: 1 1 calc(50% - 30px);
    max-width: calc(50% - 30px);
  }
  .wishListComp .productListSection .eachProduct .addToCartButton,
  .wishListComp .productListSection .skeletonWrapper .addToCartButton {
    display: none;
  }
  .wishListComp .productListSection .eachProduct .addToCartButton_small,
  .wishListComp .productListSection .skeletonWrapper .addToCartButton_small {
    display: block;
  }
}
@media (max-width: 500px) {
  .wishListComp .wishLiftHeader {
    flex-direction: column;
  }
  .wishListComp .productListSection .eachProduct,
  .wishListComp .productListSection .skeletonWrapper {
    flex: 1 1 calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
}
/*!****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderDetails/NonAuthOrder/NonAuthOrder.scss ***!
  \****************************************************************************************************************************************************/
.nonAuthOrder {
  padding: 2rem 0;
  position: sticky;
  align-self: flex-start;
  top: 150px;
  flex: 1;
  width: 100%;
}
.nonAuthOrder .fullWidth {
  width: 100%;
}
.nonAuthOrder .guest-login-auth p {
  color: #555;
  margin: 2rem 0;
}
.nonAuthOrder .guest-login-auth div {
  color: #555;
  font-size: 15px;
}
.nonAuthOrder .guest-login-auth div .navigate_link {
  color: #000;
  font-weight: 500;
  font-size: 17px;
  text-decoration: underline;
  cursor: pointer;
}
.nonAuthOrder .guest-login-auth div .navigate_link:hover {
  font-weight: 600;
}
.nonAuthOrder .guest-login-auth #optionsFlexBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media screen and (max-width: 600px) {
  .nonAuthOrder .guest-login-auth #optionsFlexBox {
    flex-direction: column;
    gap: 0;
  }
}
.nonAuthOrder .guest-login-auth .login_btn,
.nonAuthOrder .guest-login-auth .guest_btn {
  padding: 10px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  text-align: center;
  margin: 2rem 0;
  cursor: pointer;
}
.nonAuthOrder .guest-login-auth .guest_btn {
  background: #fff;
  color: #000;
}
.nonAuthOrder .guest-login-auth input {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-bottom: 5px;
  box-sizing: border-box;
  width: 100%;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px;
  font-size: 16px;
}
.nonAuthOrder .guest-login-auth input:focus {
  outline: none;
  border-bottom-color: #000;
}
.nonAuthOrder .guest-login-auth input::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.nonAuthOrder .login_form .form .backBTN {
  display: flex;
  margin: 2rem 0;
  cursor: pointer;
}
.nonAuthOrder .login_form .form .backBTN div {
  margin-right: 10px;
  text-decoration: underline;
}
.nonAuthOrder .login_form .form .keep-me-in {
  display: flex;
  margin: 1.5rem 0;
  align-items: flex-start;
}
.nonAuthOrder .login_form .form .keep-me-in input[type=checkbox] {
  background-color: #f16565;
  color: white;
}
.nonAuthOrder .login_form .form .keep-me-in div p {
  margin: 0;
  margin-left: 0.5rem;
  line-height: 1.2;
  color: #000;
}
.nonAuthOrder .login_form .form .keep-me-in div p:last-of-type {
  color: #777;
  font-size: 14px;
}
.nonAuthOrder .login_form .form input[type=email],
.nonAuthOrder .login_form .form input[type=password] {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-bottom: 15px;
  box-sizing: border-box;
  width: 100%;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px;
  font-size: 16px;
}
.nonAuthOrder .login_form .form input[type=email]:focus,
.nonAuthOrder .login_form .form input[type=password]:focus {
  outline: none;
  border-bottom-color: #000;
}
.nonAuthOrder .login_form .form input[type=email]::placeholder,
.nonAuthOrder .login_form .form input[type=password]::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.nonAuthOrder .login_form .form .forget-password {
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}
.nonAuthOrder .login_form .form .login_btn {
  padding: 10px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  text-align: center;
  margin: 2rem 0;
  cursor: pointer;
}
.nonAuthOrder .login_form .form .resend {
  color: #007ea8;
}
.nonAuthOrder .login_form .form .resend p {
  color: #555;
  font-size: 14px;
}
.nonAuthOrder .login_form .form .resend .resent-tbn {
  width: fit-content;
  position: relative;
}
.nonAuthOrder .login_form .form .resend .resent-tbn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #007ea8;
  transition: width 0.3s ease;
}
.nonAuthOrder .login_form .form .resend .resent-tbn:hover::after {
  width: 100%;
}
/*!*************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderDetails/UserProductDetails/OrderProducts/OrderProducts.scss ***!
  \*************************************************************************************************************************************************************************/
.OrderProducts {
  padding: 2rem 0;
  flex-basis: 50%;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}
.OrderProducts .divider-order-products {
  max-width: 500px;
  background-color: #ccc;
  height: 0.75px;
  margin: 20px 0;
}
.OrderProducts .summary-section {
  max-width: 500px;
}
.OrderProducts .mobile-verification-error-box {
  display: flex;
  align-items: flex-start;
  max-width: 500px;
}
.OrderProducts .mobile-verification-error-box .mobile-verification-error {
  color: #e61000;
  margin-left: 2px;
}
.OrderProducts .redeem_sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  margin: 20px 0px;
  border-radius: 5px;
  position: relative;
  max-width: 500px;
}
.OrderProducts .redeem_sec .disabledLayer {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(5, 5, 5, 0.0784313725);
  cursor: not-allowed;
  border-radius: 5px;
  left: 0;
  top: 0;
}
.OrderProducts .redeem_sec .redeem_text .redeem_header {
  font-size: 18px;
}
.OrderProducts .redeem_sec .redeem_text .redeem_option {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  margin: 10px 0;
  max-width: 100%;
  box-sizing: border-box;
}
.OrderProducts .redeem_sec .redeem_text .redeem_option .eachOption {
  margin: 5px;
  padding: 5px 10px;
  font-size: 14px;
  border: 0.5px solid #555;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.OrderProducts .redeem_sec .redeem_text .redeem_option .active {
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
}
.OrderProducts .redeem_sec .redeem_text .custom_input .custom_input_header {
  font-size: 14px;
  margin: 10px 0;
  color: #555;
  text-decoration: underline;
}
.OrderProducts .redeem_sec .redeem_text .custom_input .inputFiledBox {
  display: flex;
  align-items: center;
}
.OrderProducts .redeem_sec .redeem_text .custom_input input {
  border: 0.5px solid #555;
  border-radius: 3px;
  padding: 5px 10px;
  width: 100px;
}
.OrderProducts .redeem_sec .redeem_text .custom_input .remove_btn {
  border: 0.5px solid #555;
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
  background: #000;
  margin: 5px;
  padding: 5px 10px;
}
.OrderProducts .redeem_sec .redeem_text .redeem_notes_error {
  color: #B75301;
  margin: 10px 0px;
}
.OrderProducts .redeem_sec .redeem_text .redeem_notes_warning {
  color: #2d60ba;
  margin: 10px 0px;
}
.OrderProducts .redeem_sec .redeem_text .shopping_credit_text {
  color: #555;
  font-size: 14px;
  margin: 7px 0px;
  text-wrap: wrap;
}
.OrderProducts .redeem_sec .redeem_text .shopping_credit_text span {
  font-size: 15px;
  color: green;
  font-weight: 600;
}
.OrderProducts .redeem_sec .redeem_text .shopping_credit_text .used {
  font-size: 15px;
  color: red;
  font-weight: 600;
}
.OrderProducts .redeem_notes_error {
  color: #B75301;
  margin: 10px 5px;
}
.OrderProducts .orderProductList .eachOrderProduct {
  display: flex;
  padding: 16px;
  margin-bottom: 16px;
  transition: 0.3s;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  position: relative;
  user-select: none;
}
.OrderProducts .orderProductList .eachOrderProduct .product-image {
  width: 100px;
  height: 100px;
}
.OrderProducts .orderProductList .eachOrderProduct .product-image img {
  max-width: 100%;
  height: auto;
}
.OrderProducts .orderProductList .eachOrderProduct .product-info {
  flex: 1;
  margin: 0 12px;
  margin-top: 0;
}
.OrderProducts .orderProductList .eachOrderProduct .product-info .product-name {
  font-size: 14px;
  margin-bottom: 4px;
  position: relative;
  display: inline-block;
  font-family: "Bebas Neue Pro Bold";
}
.OrderProducts .orderProductList .eachOrderProduct .product-info .product-price {
  font-size: 15px;
  color: #333;
  margin: 5px 0;
  font-family: "Bebas Neue Pro Bold";
}
.OrderProducts .orderProductList .eachOrderProduct .product-info .productId {
  font-size: 13px;
  color: #333;
  margin: 5px 0;
  font-family: "Bebas Neue Pro Normal";
}

#getNowBtn {
  margin: 5px;
  padding: 5px 10px;
  font-size: 14px;
  background-color: black;
  color: white;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .OrderProducts {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }
}
/*!******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/screen/OrderDetails/OrderDetailsScreen.scss ***!
  \******************************************************************************************************************************************/
.orderDetailScreen {
  width: 1500px;
  max-width: 85%;
  margin: 0 auto;
}
.orderDetailScreen .orderDetailsSec {
  display: flex;
}
.orderDetailScreen .orderDetailsSec .divider-light {
  width: 0.75px;
  height: auto;
  background-color: #aaa;
  margin: 2rem 2rem;
}

@media (max-width: 1080px) {
  .orderDetailsSec {
    flex-direction: column-reverse;
    justify-content: flex-start;
  }
}
/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderDetails/UserProductDetails/UserDetails/userDetails.scss ***!
  \*********************************************************************************************************************************************************************/
.userDetailsOrders {
  padding: 2rem 0;
  position: sticky;
  align-self: flex-start;
  top: 50px;
  z-index: 10;
  flex-basis: 50%;
}
.userDetailsOrders .addressSec .form {
  margin-top: 4rem;
}
.userDetailsOrders .addressSec .form h2 small {
  font-size: 14px;
  color: #555;
  text-justify: auto;
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch {
  display: inline-block;
  margin: 0;
  position: relative;
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch > label.btn-deliver-mode-switch-inner {
  margin: 0;
  width: 150px;
  height: 30px;
  background: linear-gradient(0deg, #a5a5a5, rgba(113, 113, 113, 0.7411764706));
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  display: block;
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch > label.btn-deliver-mode-switch-inner:before {
  content: attr(data-on);
  position: absolute;
  font-size: 14px;
  font-family: "Bebas Neue Pro Bold";
  top: 7px;
  right: 20px;
  color: #fff;
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch > label.btn-deliver-mode-switch-inner:after {
  content: attr(data-off);
  width: 75px;
  height: 16px;
  background: #fff;
  border-radius: 26px;
  position: absolute;
  left: 2px;
  top: 2px;
  text-align: center;
  transition: all 0.3s ease;
  padding: 5px 0;
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch input[type=checkbox] {
  cursor: pointer;
  width: 50px;
  height: 25px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0;
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch input[type=checkbox]:checked + label.btn-deliver-mode-switch-inner {
  background: linear-gradient(0deg, #a5a5a5, rgba(113, 113, 113, 0.7411764706));
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch input[type=checkbox]:checked + label.btn-deliver-mode-switch-inner:after {
  content: attr(data-on);
  left: 73px;
}
.userDetailsOrders .addressSec .form .pickupShipping .btn-deliver-mode-switch input[type=checkbox]:checked + label.btn-deliver-mode-switch-inner:before {
  content: attr(data-off);
  right: auto;
  left: 20px;
  color: #fff;
}
.userDetailsOrders .addressSec .form .input-div {
  margin-bottom: 30px;
}
.userDetailsOrders .addressSec .form .input-div .reg-error {
  color: #f16565;
}
.userDetailsOrders .addressSec .form .input-div .cities-small {
  padding: 0;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}
.userDetailsOrders .addressSec .form .input-div small {
  color: #555;
  display: inline-block;
  margin-bottom: 5px;
  padding-left: 40px;
}
.userDetailsOrders .addressSec .form .input-div .passwordInput {
  position: relative;
}
.userDetailsOrders .addressSec .form .input-div .passwordInput .togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-100%);
  cursor: pointer;
}
.userDetailsOrders .addressSec .form .mobileNumber {
  margin-bottom: 20px;
}
.userDetailsOrders .addressSec .form select,
.userDetailsOrders .addressSec .form input[type=tel],
.userDetailsOrders .addressSec .form input[type=text],
.userDetailsOrders .addressSec .form input[type=email],
.userDetailsOrders .addressSec .form input[type=password] {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal", sans-serif;
}
.userDetailsOrders .addressSec .form select:focus,
.userDetailsOrders .addressSec .form input[type=tel]:focus,
.userDetailsOrders .addressSec .form input[type=text]:focus,
.userDetailsOrders .addressSec .form input[type=email]:focus,
.userDetailsOrders .addressSec .form input[type=password]:focus {
  outline: none;
  border-bottom-color: #000;
}
.userDetailsOrders .addressSec .form select::placeholder,
.userDetailsOrders .addressSec .form input[type=tel]::placeholder,
.userDetailsOrders .addressSec .form input[type=text]::placeholder,
.userDetailsOrders .addressSec .form input[type=email]::placeholder,
.userDetailsOrders .addressSec .form input[type=password]::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 16px;
  font-weight: normal;
}
.userDetailsOrders .addressSec .form select:first-child {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 16px;
  font-weight: normal;
}
.userDetailsOrders .addressSec .form .submitBtn {
  width: 100%;
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  text-align: center;
  cursor: pointer;
  padding: 10px 0;
  margin: 20px 0;
  transition: all 0.2s ease-in;
}
.userDetailsOrders .addressSec .form .submitBtn:hover {
  background-color: #fff;
  color: #000;
}
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .email-input,
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .mobile-input,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .email-input,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .mobile-input {
  flex: 1;
  margin: 1.5rem 0;
}
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .email-input span,
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .mobile-input span,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .email-input span,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .mobile-input span {
  display: inline-block;
  margin: 10px 0;
  font-weight: 600;
}
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .email-input input,
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .mobile-input input,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .email-input input,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .mobile-input input {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  flex: 1;
  font-size: 14px;
}
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .email-input input:focus,
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .mobile-input input:focus,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .email-input input:focus,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .mobile-input input:focus {
  outline: none;
  border-bottom-color: #000;
}
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .email-input input::placeholder,
.userDetailsOrders .non-auth-user-info .user-contact-info .user-contact-info-form .mobile-input input::placeholder,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .email-input input::placeholder,
.userDetailsOrders .authUserInfo .user-contact-info .user-contact-info-form .mobile-input input::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.userDetailsOrders .non-auth-user-info .user-contact-info .addNotes_btn,
.userDetailsOrders .authUserInfo .user-contact-info .addNotes_btn {
  margin-top: 10px;
  border: 1px solid #000;
  padding: 5px 10px;
  width: fit-content;
  background: #000;
  color: #fff;
  transition: all 0.2s ease-in;
  font-size: 14px;
  cursor: pointer;
}
.userDetailsOrders .non-auth-user-info .user-contact-info .addNotes_btn:hover,
.userDetailsOrders .authUserInfo .user-contact-info .addNotes_btn:hover {
  background-color: #fff;
  color: #000;
}
.userDetailsOrders .non-auth-user-info .addressSec .Header_address_sec,
.userDetailsOrders .authUserInfo .addressSec .Header_address_sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.userDetailsOrders .non-auth-user-info .addressSec .Header_address_sec div,
.userDetailsOrders .authUserInfo .addressSec .Header_address_sec div {
  text-decoration: underline;
  cursor: pointer;
  color: #555;
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress div,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress div {
  margin: 5px 0;
  color: #333;
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress .shipping_info,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress .shipping_info {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress .shipping_info:first,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress .shipping_info:first {
  margin-top: 0px;
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress .shipping_info svg,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress .shipping_info svg {
  color: #000;
  height: 18px;
  width: 20px;
  margin-right: 5px;
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress .shipping_info div,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress .shipping_info div {
  font-family: "Bebas Neue Pro Normal";
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress .shipping_info.sec,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress .shipping_info.sec {
  margin-top: 0px;
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress .first_lastName,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress .first_lastName {
  color: #000;
  font-family: "Bebas Neue Pro Bold";
}
.userDetailsOrders .non-auth-user-info .addressSec .defaultAddress .first_lastName small,
.userDetailsOrders .authUserInfo .addressSec .defaultAddress .first_lastName small {
  color: #777;
  font-family: "Bebas Neue Pro Normal";
}

@media (max-width: 1130px) {
  .userDetailsOrders {
    flex-basis: 50%;
  }
}
@media (max-width: 1080px) {
  .userDetailsOrders {
    position: relative;
    margin: 0px auto 2rem;
    width: 100%;
  }
}
.address_comp {
  background-color: #fff;
  padding: 50px;
  position: relative;
  overflow-y: auto;
  margin-top: 5rem;
  max-height: 80vh;
}
.address_comp::-webkit-scrollbar {
  display: none;
}
.address_comp .close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 550px) {
  .address_comp {
    padding: 15px;
  }
}
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderDetails/UserProductDetails/UserDetails/AddressComponent/AddressComponent.scss ***!
  \*******************************************************************************************************************************************************************************************/
form .input-div {
  margin-bottom: 30px;
}
form .input-div .reg-error {
  color: #f16565;
}
form .input-div .cities-small {
  padding: 0;
  color: #fe4d13;
  text-decoration: underline;
  cursor: pointer;
}
form .input-div small {
  color: #555;
  display: inline-block;
  margin-bottom: 5px;
  padding-left: 40px;
}
form .input-div .passwordInput {
  position: relative;
}
form .input-div .passwordInput .togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-100%);
  cursor: pointer;
}
form .NamesInput {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-direction: column;
  margin-bottom: 0px;
}
form .NamesInput > div {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 30px;
}
form .NamesInput > div input {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  flex: 1;
  font-size: 16px;
  margin-bottom: 10px;
}
form .NamesInput > div input:focus {
  outline: none;
  border-bottom-color: #000;
}
form .NamesInput > div input::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 16px;
  font-weight: normal;
}
form .NamesInput > div .reg-error {
  color: #f16565;
}
form .mobileNumber {
  margin-bottom: 20px;
}
form select,
form input[type=tel],
form input[type=text],
form input[type=email],
form input[type=password] {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal", sans-serif;
}
form select:focus,
form input[type=tel]:focus,
form input[type=text]:focus,
form input[type=email]:focus,
form input[type=password]:focus {
  outline: none;
  border-bottom-color: #000;
}
form select::placeholder,
form input[type=tel]::placeholder,
form input[type=text]::placeholder,
form input[type=email]::placeholder,
form input[type=password]::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 16px;
  font-weight: normal;
}
form select:first-child {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 16px;
  font-weight: normal;
}
form .submitBtn {
  width: 100%;
  background-color: #000;
  color: #fff;
  border: 1px solid #000;
  transition: all 0.2s ease-in;
  text-align: center;
  cursor: pointer;
  padding: 10px 0;
  margin: 20px 0;
}
form .submitBtn:hover {
  background-color: #fff;
  color: #000;
}
form .savedBTN {
  width: 100%;
  border: 1px solid #cccccc;
  color: #b3b3b3;
  transition: all 0.2s ease-in;
  text-align: center;
  cursor: not-allowed;
  padding: 10px 0;
  margin: 20px 0;
  background-color: #f0f0f0;
  opacity: 0.6;
}
form .close-btn {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
form .default-address-checkbox {
  display: flex;
  align-items: center;
  margin: 1rem 0;
}
form .default-address-checkbox input[type=checkbox] {
  margin-right: 1rem;
}
form .default-address-checkbox p {
  padding: 0;
  margin: 0;
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Payment/PayByQRCodeModel/QRCodeModel/QRCodeModel.scss ***!
  \**************************************************************************************************************************************************************/
.qr_model {
  background-color: #fff;
  padding: 40px;
  max-width: 500px;
  width: 95%;
  border-radius: 10px;
}
.qr_model h3 {
  text-align: center;
}
.qr_model .qr_model_Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qr_model .qr_model_Header img {
  height: 50px;
}
.qr_model .qr_model_Header .close {
  cursor: pointer;
  padding: 5px;
}
.qr_model .regenerateButton,
.qr_model .ExitWalletDeeplinkBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  padding: 5px 10px;
  margin: 2rem auto;
  background-color: #000;
  color: #fff;
  width: fit-content;
  border-radius: 30px;
  cursor: pointer;
}
.qr_model .regenerateButton svg,
.qr_model .ExitWalletDeeplinkBtn svg {
  fill: #fff;
  height: 15px;
  width: 15px;
}
.qr_model .regenerateButton .regenerateText,
.qr_model .ExitWalletDeeplinkBtn .regenerateText {
  margin-left: 5px;
}
.qr_model .ExitWalletDeeplinkBtn {
  text-decoration: none;
}
.qr_model .qr_code_image_box .qr_note {
  color: #555;
  font-size: 14px;
  margin: 10px auto;
  text-align: center;
}
.qr_model .qr_code_image_box .qrCode {
  display: flex;
  justify-content: center;
  align-items: center;
}
.qr_model .qr_code_image_box .loadingQr {
  height: 220px;
  width: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.qr_model .qr_code_image_box .account-details {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid gray;
  background-color: whitesmoke;
  border-radius: 20px;
  cursor: pointer;
  transition-duration: 0.4s;
  width: fit-content;
  margin: 10px auto;
}
.qr_model .qr_code_image_box .account-details .account-value {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  color: #000;
  margin: 3px;
  font-style: bold;
}
.qr_model .qr_code_image_box .account-details .copy-icon {
  margin-left: 20px;
  cursor: pointer;
}
.qr_model .qr_code_image_box .account-details .copy-icon svg {
  height: 18px;
  width: 18px;
}

@media screen and (max-width: 600px) {
  .qr_model {
    padding: 20px;
    max-height: 85%;
    overflow-y: scroll;
    position: relative;
    top: 30px;
  }
}
@media screen and (max-height: 800px) {
  .qr_model {
    padding: 20px;
    max-height: 85%;
    overflow-y: scroll;
    position: relative;
    top: 30px;
  }
}
/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Wallet/WalletComponent.scss ***!
  \************************************************************************************************************************************/
.walletInfo {
  background-color: #ffeecc;
  color: #000;
  padding: 15px;
  border: none;
  box-shadow: 0 8px 16px 0 #352402 0, 0, 0, 0.9;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.walletInfo div {
  margin-left: 3px;
  font-size: 15px;
}

.account-info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  margin: 2rem 0;
}
.account-info-container select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  font-family: "Bebas Neue Pro Normal";
}
.account-info-container .listOfAccounts {
  width: 100%;
  position: relative;
}
.account-info-container .listOfAccounts .switch-network-button {
  display: flex;
  align-items: center;
  background: #eee;
  color: #333;
  border-radius: 20px;
  padding: 7px 20px;
  border: 1px solid #999;
  text-align: center;
  position: relative;
  width: fit-content;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}
.account-info-container .listOfAccounts .switch-network-button p {
  margin: 0;
  margin-right: 5px;
  padding: 0;
  font-size: 14px;
}
.account-info-container .account-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
  background-color: #fff;
  border-radius: 8px;
}
.account-info-container .account-block h2 {
  text-transform: uppercase;
}
.account-info-container .account-block .account-icon {
  width: 60px;
  margin-bottom: 10px;
}
.account-info-container .account-block .token-details {
  text-align: center;
  width: 100%;
  margin: 3rem 0 0 0;
  font-family: "Bebas Neue Pro Normal";
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.account-info-container .account-block .token-details .token-container img {
  height: 50px;
  margin-right: 50px;
}
.account-info-container .account-block .token-details .token-label {
  font-weight: bold;
  color: #333;
}
.account-info-container .account-block .token-details .token-value {
  margin: 2px;
  color: #999;
  font-size: 19px;
}
.account-info-container .account-block .token-details .token-value span {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
.account-info-container .account-block .account-details {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid gray;
  background-color: whitesmoke;
  border-radius: 20px;
  cursor: pointer;
  transition-duration: 0.4s;
}
.account-info-container .account-block .account-details .account-value {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  color: #000;
  margin: 3px;
  font-style: bold;
}
.account-info-container .account-block .account-details .copy-icon {
  margin-left: 20px;
  cursor: pointer;
}
.account-info-container .account-block .account-details .copy-icon svg {
  height: 18px;
  width: 18px;
}

.paymentSec {
  margin-top: 2rem;
  display: flex;
  gap: 2vw;
  /* Center horizontally */
  align-items: center;
  margin: 2rem 0;
}
.paymentSec .btn_after_connection {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.paymentSec .btn_after_connection .disconnect_switch_pay_btn {
  background: #eee;
  color: #333;
  border-radius: 5px;
  padding: 10px 10px;
  border: 1px solid #eee;
  text-align: center;
  position: relative;
  width: fit-content;
  cursor: pointer;
  font-size: 18px;
}
.paymentSec .btn_after_connection .disconnect_switch_pay_btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  transition: 0.5s;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #aaa;
  border-radius: 8px;
}
.paymentSec .btn_after_connection .disconnect_switch_pay_btn:hover {
  background: linear-gradient(to left, #eee, #cfe4f6);
}
.paymentSec .btn_after_connection .disconnect_switch_pay_btn:hover::before {
  width: calc(100% + 5px);
  height: calc(100% + 5px);
}

.connect_wallet_w3m_button {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Connect_switch_pay_btn {
  background: #000;
  color: #fff;
  border-radius: 5px;
  padding: 10px 10px;
  border: 1px solid #242938;
  text-align: center;
  position: relative;
  width: fit-content;
  cursor: pointer;
  font-size: 18px;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.Connect_switch_pay_btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  transition: 0.5s;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #000;
  border-radius: 8px;
}
.Connect_switch_pay_btn:hover {
  background: linear-gradient(to left, #000, #024174);
}
.Connect_switch_pay_btn:hover::before {
  width: calc(100% + 5px);
  height: calc(100% + 5px);
}

.rainbowButtonForGame {
  background: var(--Linear);
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
  border: 0;
  text-align: center;
  padding: 1rem clamp(1.5rem, 7vw, 85px);
  font-family: "Bebas Neue";
  font-weight: 700;
  font-size: 1.5rem;
  cursor: pointer;
}

#endGameButton {
  padding: 1rem clamp(1.5rem, 13vw, 140px);
  width: fit-content;
  margin: 0 auto;
}

.connectWalletButton {
  position: relative;
  width: fit-content;
  height: fit-content;
}
.connectWalletButton::before {
  content: "";
  position: absolute;
  z-index: -1;
  transition: 0.5s;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  left: 50%;
  top: 50%;
}

.Connect_switch_pay_btn.not-allowed {
  background-color: #555;
  cursor: not-allowed;
}

.Connect_switch_pay_btn.exit-wallet-not-allowed {
  background-color: #555;
  cursor: not-allowed;
}

.Connect_switch_pay_btn.center-btn,
.rainbowButtonForGame.center-btn {
  margin: 0 auto;
}

.rainbowButtonForGame.not-allowed,
.rainbowButtonForGame.exit-wallet-not-allowed {
  cursor: progress;
}

.buttonIcon {
  display: inline-block;
  vertical-align: middle;
  width: 2.5rem;
  margin-right: 0.5rem;
}

/* Min Width queries */
/* // Small devices (landscape phones, 576px and up) */
/* // Medium devices (tablets, 768px and up) */
/* // Large devices (desktops, 992px and up) */
/* // X-Large devices (large desktops, 1200px and up) */
/* // XX-Large devices (larger desktops, 1400px and up) */
/* Max Width queries */
/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
/* // `xl` applies to large devices (desktops, less than 1200px) */
/* // `lg` applies to medium devices (tablets, less than 992px) */
/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .paymentSec {
    width: 90vw;
    min-width: 300px;
    flex-direction: column;
    align-items: flex-start;
  }
  .Connect_switch_pay_btn.center-btn,
  .rainbowButtonForGame.center-btn {
    margin: 0;
  }
}
/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .rainbowButtonForGame {
    width: 100%;
  }
  #endGameButton {
    width: auto;
  }
  .account-info-container {
    padding: 0;
  }
  .account-info-container .account-details {
    max-width: 300px;
  }
}
/*!*****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Payment/Payment.scss ***!
  \*****************************************************************************************************************************/
.payment-container {
  display: flex;
  flex-direction: column;
}
.payment-container h2 {
  margin-bottom: 20px;
}
.payment-container .payment-methods p {
  margin-bottom: 25px;
  font-size: 20px;
}
.payment-container .payment-methods .method {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.payment-container .payment-methods .method label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 2rem 1rem 0;
}
.payment-container .payment-methods .method label img {
  height: 50px;
}
.payment-container .payment-methods .method label input[type=radio] {
  margin-top: 10px;
  cursor: pointer;
}
.payment-container .payment-methods .method label:hover {
  opacity: 0.8;
}
.payment-container .payment-methods .method:not(:last-child) {
  margin-right: 30px;
}
/*!***********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderDetails/UserProductDetails/UserDetails/EditAddModel/EditAddModel.scss ***!
  \***********************************************************************************************************************************************************************************/
.edit_add_model {
  background-color: #fff;
  padding: 0px 50px 50px 50px;
  min-width: 575px;
  position: absolute;
  max-height: 80vh;
  overflow-y: auto;
  margin-top: 5rem;
}
.edit_add_model::-webkit-scrollbar {
  display: none;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox {
  border-bottom: 0.5px solid #000;
  margin-top: 2rem;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox:last-of-type {
  border: none;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox div {
  margin: 2px;
  color: #555;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox div:first-of-type {
  color: #000;
  font-family: "Bebas Neue Pro Bold";
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox div:first-of-type .edit {
  text-decoration: underline;
  cursor: pointer;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .shipping_info {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .shipping_info:first {
  margin-top: 0px;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .shipping_info svg {
  color: #000;
  height: 18px;
  width: 20px;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .shipping_info div {
  font-family: "Bebas Neue Pro Normal";
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .shipping_info.sec {
  margin-top: 0px;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .Remove_btn {
  cursor: pointer;
  text-decoration: underline;
  text-align: center;
  margin: 1rem auto;
  color: #000;
  width: fit-content;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .defaultAddressBTN {
  border: 1px solid #000;
  padding: 10px;
  border-radius: 30px;
  text-align: center;
  margin: 1rem 0;
  color: #000;
  cursor: not-allowed;
}
.edit_add_model .listOfAddressFromDB .eachAddressBox .make {
  color: #fff;
  background-color: #000;
  cursor: pointer;
}
.edit_add_model .descriptionDivider {
  position: relative;
  height: 2px;
  margin: 1rem auto;
  width: 50%;
}
.edit_add_model .descriptionDivider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 2px;
  background-image: linear-gradient(to right, transparent, rgb(48, 49, 51), transparent);
}
.edit_add_model .close-btn,
.edit_add_model .add_address_btn {
  border: 1px dashed #000;
  padding: 10px;
  border-radius: 3px;
  text-align: center;
  margin: 1rem 0;
  color: #000;
  cursor: pointer;
}
.edit_add_model .close-btn:hover,
.edit_add_model .add_address_btn:hover {
  border: 1px solid #000;
}
.edit_add_model .close-btn {
  border: 1px solid #000;
}
.edit_add_model .close {
  background-color: #fff;
  padding: 20px 0px 0px 0px;
  position: sticky;
  top: 0px;
  width: 100%;
  text-align: right;
  cursor: pointer;
}

@media (max-width: 750px) {
  .edit_add_model {
    max-height: 75vh;
    overflow-y: auto;
    margin-top: 5rem;
  }
}
@media (max-width: 550px) {
  .edit_add_model {
    min-width: 375px;
    padding: 15px;
    min-width: 345px;
  }
}
/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Search/SearchComponent.scss ***!
  \************************************************************************************************************************************/
.searchComponent {
  width: 90%;
  margin: 2rem auto;
  position: relative;
  max-width: 1600px;
  display: flex;
  align-items: flex-start;
}
.searchComponent .filterSection {
  position: sticky;
  top: 50px;
}
.searchComponent .allSearchedProduct {
  width: 100%;
}
.searchComponent .allSearchedProduct .smalldeviceFilter {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.searchComponent .allSearchedProduct .searchProductList .searchProductList_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 30px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct {
  position: relative;
  flex: 1 1 30%;
  max-width: 30%;
  transition: box-shadow 0.3s ease-in-out;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  margin-bottom: 30px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct:hover .addToCartButton {
  opacity: 1;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 280px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .wish-heart_loading {
  position: absolute;
  right: 7px;
  top: 0px;
  width: 35px;
  height: 35px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 9;
  border: 1px dotted rgba(238, 238, 238, 0.7058823529);
  border-radius: 50%;
  background-color: rgba(238, 238, 238, 0.7058823529);
  box-sizing: border-box;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .wish-heart {
  position: absolute;
  right: 7px;
  top: 0px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  z-index: 9;
  width: 35px;
  height: 35px;
  cursor: pointer;
  border: 0.75px dotted rgba(238, 238, 238, 0.7058823529);
  border-radius: 50%;
  background-color: rgba(238, 238, 238, 0.7058823529);
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .wish-heart:hover {
  border: 0.75px solid #eee;
  background-color: #eee;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .wish-heart .wishlistIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  cursor: pointer;
  padding: 10px;
  background-color: #eeeeee;
  border-radius: 5px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog span:first-child {
  left: 10px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog span:last-child {
  right: 10px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog:hover span {
  display: block;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .productImg {
  max-width: 70%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .totalImageBullet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .totalImageBullet .eachImageBullet {
  width: 10px;
  transform: scaleX(1);
  height: 4px;
  background-color: #ccc;
  border-radius: 1px;
  transition: all 0.3s;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .totalImageBullet .eachImageBullet.active {
  background-color: #000;
  transform: scaleX(1.5);
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog:hover .totalImageBullet {
  opacity: 1;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .addToCartButton_small {
  display: none;
  padding: 10px 5px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #000;
  margin: 10px 5px;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .addToCartButton {
  position: relative;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px;
  background-color: #000;
  color: white;
  margin: 20px 15px;
  transition: opacity 0.3s ease-in-out;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .addToCartButton div {
  cursor: pointer;
  width: fit-content;
  position: relative;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .addToCartButton div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .addToCartButton div:hover::after {
  width: 100%;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productName,
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productPrice {
  text-align: left;
  padding: 10px 0 0 15px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productName p,
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productPrice p {
  margin: 0;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productPrice {
  font-family: "Bebas Neue Pro Bold";
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container {
  clear: both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 10px 0 0 15px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container .option {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  font-size: 1rem;
  color: #000;
  user-select: none;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container .option input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container .option input:focus-visible ~ .checkbox {
  border: 2px solid #000;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container .option input:checked ~ .checkbox1:after {
  opacity: 1;
  width: 5px;
  height: 12px;
  border-color: #000;
  transition: width 0.1s ease, height 0.08s ease 0.1s, border-color 0.3s ease, border-width 0.1s ease;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container .option:hover input ~ .checkbox {
  border: 1px solid #000;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container .option .checkbox {
  position: relative;
  height: 18px;
  width: 18px;
  background-color: #fff;
  border: 1px solid #000;
  transition: all 0.15s;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .checkboxes-container .option .checkbox1:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 0;
  height: 0;
  border: solid #000;
  border-width: 2px 2px 0 0;
  opacity: 0;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  transition: width 0.08s ease 0.1s, height 0.1s ease, border-color 0.3s ease, opacity 0.1s ease 0.2s, border-width 0.1s ease;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .no-product {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .no-product img {
  height: 100px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .no-product div {
  font-size: 20px;
  margin: 1rem 0;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  margin-bottom: 30px;
  flex: 1 1 30%;
  max-width: 30%;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .skeleton {
  margin: 15px;
  border-radius: 4px;
  background-color: #f7f7f7;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .skeleton-image {
  height: 280px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .skeleton-text {
  height: 20px;
  width: 70%;
  margin-top: 10px;
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .skeleton-button {
  height: 40px;
  width: 60%;
  margin-top: 20px;
}
@keyframes loading {
  0% {
    background-color: #eeeeee;
  }
  50% {
    background-color: rgba(238, 238, 238, 0.7019607843);
  }
  100% {
    background-color: #eeeeee;
  }
}
.searchComponent .allSearchedProduct .searchProductList .productListSection .skeleton {
  animation: loading 1.5s infinite;
}

@media (max-width: 1100px) {
  .searchComponent .allSearchedProduct .searchProductList .searchProductList_header .smallScreen {
    display: block;
  }
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct {
    flex: 1 1 45%;
    max-width: 45%;
  }
}
@media (max-width: 760px) {
  .searchComponent .allSearchedProduct .searchProductList .searchProductList_header {
    flex-direction: column;
  }
}
@media (max-width: 560px) {
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct {
    flex: 1 1 calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
}
@media (max-width: 1100px) {
  .searchComponent {
    width: 97%;
  }
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct,
  .searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper {
    flex: 1 1 30%;
    max-width: 30%;
  }
}
@media (max-width: 820px) {
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct,
  .searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper {
    flex: 1 1 45%;
    max-width: 45%;
  }
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .productImg,
  .searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .productImgCatalog .productImg {
    max-width: 100%;
  }
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .productImgCatalog .wish-heart,
  .searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .productImgCatalog .wish-heart {
    right: 2px;
    top: 2px;
  }
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .addToCartButton,
  .searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .addToCartButton {
    display: none;
  }
  .searchComponent .allSearchedProduct .searchProductList .productListSection .eachProduct .addToCartButton_small,
  .searchComponent .allSearchedProduct .searchProductList .productListSection .skeletonWrapper .addToCartButton_small {
    display: block;
  }
}
/*!************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Product/ProductsFilter/RegularFilter/ProductsFilter.module.scss ***!
  \************************************************************************************************************************************************************************/
.CDjG0OxcR8_J86UxQil5 {
  margin-top: 24px;
  margin-right: 10px;
  min-width: 240px;
  position: sticky;
  top: 70px;
}
.CDjG0OxcR8_J86UxQil5 .jYquzUoUzJ8NweW1ELEV {
  height: 0.75px;
  width: 100%;
  background: #999;
  margin: 17px auto;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O {
  padding: 10px;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O .LAOW9KP08AXt4sEvwPeq {
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: max-height 0.3s ease-in-out;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O .LAOW9KP08AXt4sEvwPeq div {
  font-size: 1.1rem;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O .XRX8vnizIqBMIEN6szAk {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O .XRX8vnizIqBMIEN6szAk.JEeWJPYeBhAhb5lbqR7T {
  max-height: 600px;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O svg {
  height: 10px;
  color: #999;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O .DYyPp9OaBgHXYF3mWYPi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  text-transform: uppercase;
  cursor: pointer;
  color: #555;
  padding: 7px;
  font-size: 0.9rem;
  border-radius: 3px;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O .DYyPp9OaBgHXYF3mWYPi:hover {
  background-color: rgba(204, 204, 204, 0.3647058824);
  transition: all 0.2s ease-in-out;
}
.CDjG0OxcR8_J86UxQil5 .PdVHOaCq2vtQNYAH85_O .DYyPp9OaBgHXYF3mWYPi.G239yR0Sl7CdIQeIjtmq {
  cursor: not-allowed;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF {
  background: rgba(238, 238, 238, 0.569);
  padding: 10px;
  position: relative;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MWZcpYsY5SIITVHbS7NH {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  background-color: rgba(204, 204, 204, 0.4941176471);
  cursor: not-allowed;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .wIL8y3jURaIPJ6A0ltPX,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .wIL8y3jURaIPJ6A0ltPX {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .wIL8y3jURaIPJ6A0ltPX .FXa9A48X29Tjf7z6ljYV,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .wIL8y3jURaIPJ6A0ltPX .FXa9A48X29Tjf7z6ljYV {
  font-size: 1.1rem;
  font-family: "Bebas Neue Pro Bold";
  cursor: pointer;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .wIL8y3jURaIPJ6A0ltPX div svg,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .wIL8y3jURaIPJ6A0ltPX div svg {
  height: 15px;
  width: 15px;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #333;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .v9ZNojeEyeGYECiZc9w8,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .v9ZNojeEyeGYECiZc9w8,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .v9ZNojeEyeGYECiZc9w8,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .v9ZNojeEyeGYECiZc9w8 {
  margin-top: 0.5rem;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .v9ZNojeEyeGYECiZc9w8 .jO2Fsm3S1Js1MJ8lHDRl,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .v9ZNojeEyeGYECiZc9w8 .jO2Fsm3S1Js1MJ8lHDRl,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .v9ZNojeEyeGYECiZc9w8 .jO2Fsm3S1Js1MJ8lHDRl,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .v9ZNojeEyeGYECiZc9w8 .jO2Fsm3S1Js1MJ8lHDRl {
  height: 0.75px;
  width: 100%;
  margin: 5px auto;
  background-color: #ccc;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .v9ZNojeEyeGYECiZc9w8 .Az_sLgEQg8hEqGmmdHhw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .v9ZNojeEyeGYECiZc9w8 .Az_sLgEQg8hEqGmmdHhw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .v9ZNojeEyeGYECiZc9w8 .Az_sLgEQg8hEqGmmdHhw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .v9ZNojeEyeGYECiZc9w8 .Az_sLgEQg8hEqGmmdHhw {
  font-family: "Bebas Neue Pro Bold";
  margin-left: 5px;
  font-size: 0.95rem;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX {
  margin: 5px 0 5px 1px;
  clear: both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 5px 0 0 5px;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #000;
  user-select: none;
  padding: 7px 5px 0px 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Light";
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 50px;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:focus-visible ~ .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:focus-visible ~ .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:focus-visible ~ .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:focus-visible ~ .H5GImIodjD1c5mY1IhOw {
  border: 2px solid #000;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:checked ~ .dEicVuwtEMYGQ23pCDpZ:after,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:checked ~ .dEicVuwtEMYGQ23pCDpZ:after,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:checked ~ .dEicVuwtEMYGQ23pCDpZ:after,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 input:checked ~ .dEicVuwtEMYGQ23pCDpZ:after {
  opacity: 1;
  width: 5px;
  height: 12px;
  border-color: #000;
  transition: width 0.1s ease, height 0.08s ease 0.1s, border-color 0.3s ease, border-width 0.1s ease;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7:hover input ~ .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7:hover input ~ .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7:hover input ~ .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7:hover input ~ .H5GImIodjD1c5mY1IhOw {
  border: 1px solid #000;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .H5GImIodjD1c5mY1IhOw,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .H5GImIodjD1c5mY1IhOw {
  position: relative;
  height: 18px;
  width: 18px;
  border-radius: 2px;
  background-color: #fff;
  border: 1.2px solid #000;
  transition: all 0.15s;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .dEicVuwtEMYGQ23pCDpZ:after,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .dEicVuwtEMYGQ23pCDpZ:after,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .dEicVuwtEMYGQ23pCDpZ:after,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX .PjBQ6jScae8GMoETJxS7 .dEicVuwtEMYGQ23pCDpZ:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 0;
  height: 0;
  border: solid #000;
  border-width: 2px 2px 0 0;
  opacity: 0;
  transform-origin: left top;
  transform: scaleX(-1) rotate(135deg);
  transition: width 0.08s ease 0.1s, height 0.1s ease, border-color 0.3s ease, opacity 0.1s ease 0.2s, border-width 0.1s ease;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE {
  overflow: scroll;
  max-height: 100vh;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE::-webkit-scrollbar,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE::-webkit-scrollbar,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .oN6NZdATJSQgsI3sRh9l .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE::-webkit-scrollbar,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .x9XA3BLlaryVYPQ8pLpc .QvnCjX4Ufm_C14nGkayX.hshccVMSQeKrlow60zPE::-webkit-scrollbar {
  display: none;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU .KfeMGD6scCTFU9eIUlUR,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU .KfeMGD6scCTFU9eIUlUR {
  border: 1px solid #000;
  background: #000;
  color: #fff;
  padding: 7px 20px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
}
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .MGsxI8r24uLJ_8ntwe4B .c_f2gg8fLzbtHlPCmJdU.JEeWJPYeBhAhb5lbqR7T,
.CDjG0OxcR8_J86UxQil5 .LFQ_n3nbZMcpinVoqeZF .Aphq39uVL1l3I937BOLp .c_f2gg8fLzbtHlPCmJdU.JEeWJPYeBhAhb5lbqR7T {
  max-height: 1000px;
}

@media (max-width: 1100px) {
  .CDjG0OxcR8_J86UxQil5 {
    display: none;
  }
}
/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderHistory/Component/OrderHistoryCard/OrderHistoryCard.scss ***!
  \**********************************************************************************************************************************************************************/
.orderHistoryCard {
  cursor: e-resize;
  margin: 40px;
  border: 1px solid #999999;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.orderHistoryCard .orderHistoryCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent {
  margin: 5px 1rem;
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent div:first-of-type {
  font-family: "Bebas Neue Pro Bold";
  font-size: 14px;
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent div:nth-of-type(2) {
  font-family: "Bebas Neue Pro Light";
  margin: 10px 0;
  font-size: 14px;
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent.total_tokal div:nth-of-type(2) {
  font-family: "Bebas Neue Pro Bold";
  font-size: 15px;
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent .left_footer {
  display: flex;
  align-items: center;
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent .left_footer div {
  margin: 0px 2px;
  color: #333;
  font-family: "Bebas Neue Pro Normal";
}
.orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent .rightHeaderBtn {
  padding: 8px 16px;
  border: 0.75px solid #d17023;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  color: #d17023;
}
.orderHistoryCard .eachProductItem {
  padding: 20px 40px;
  border-top: 0.5px solid #999;
}
.orderHistoryCard .eachProductItem .img-info-price {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.orderHistoryCard .eachProductItem .img-info-price .img-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.orderHistoryCard .eachProductItem .img-info-price .img-info .smallProductImage {
  position: relative;
  width: 65px;
  overflow: hidden;
  padding: 3px;
}
.orderHistoryCard .eachProductItem .img-info-price .img-info .smallProductImage img {
  width: 65px;
  height: 65px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.orderHistoryCard .eachProductItem .img-info-price .img-info .smallProductImage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  background: linear-gradient(180deg, rgba(180, 180, 180, 0.1) 0%, rgba(180, 180, 180, 0.1) 100%);
  pointer-events: none;
}
.orderHistoryCard .eachProductItem .img-info-price .img-info .product-info {
  flex: 1;
  margin: 0 12px;
  margin-top: 0;
}
.orderHistoryCard .eachProductItem .img-info-price .img-info .product-info .product-name {
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 4px;
  position: relative;
  display: inline-block;
  font-family: "Bebas Neue Pro Bold";
}
.orderHistoryCard .eachProductItem .img-info-price .img-info .product-info .productId {
  font-size: 13px;
  color: #333;
  margin: 5px 0;
  font-family: "Bebas Neue Pro Normal";
}
.orderHistoryCard .eachProductItem .img-info-price .img-info .product-info .small_screen {
  display: none;
}
.orderHistoryCard .orderHistoryFooter {
  margin: 20px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orderHistoryCard .orderHistoryFooter .right_footer {
  display: flex;
  align-items: center;
}
.orderHistoryCard .orderHistoryFooter .right_footer div {
  color: #d17023;
}
.orderHistoryCard .orderHistoryFooter .right_footer .stars .numberOfStars img {
  height: 25px;
}
.orderHistoryCard .orderHistoryFooter .right_footer .underline {
  margin: 0px 2px;
  color: #d17023;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Bold";
  position: relative;
}
.orderHistoryCard .orderHistoryFooter .right_footer .underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1px;
  background: #d17023;
  transition: width 0.3s ease;
}
.orderHistoryCard .orderHistoryFooter .right_footer .underline:hover::after {
  width: 100%;
}
.orderHistoryCard .orderHistoryFooter .right_footer .writeReview_btn {
  background-color: #000;
  padding: 10px;
  border: 1px solid #000;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.noOrders {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  padding: 5rem;
  border-radius: 10px;
  margin: 40px;
}

@media (max-width: 880px) {
  .orderHistoryCard .orderHistoryCardHeader {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 700px) {
  .orderHistoryCard {
    margin: 40px 10px;
  }
  .orderHistoryCard .orderHistoryCardHeader .listOfHeaderContent:first-of-type {
    flex-direction: column;
    align-items: flex-start;
  }
  .orderHistoryCard .eachProductItem {
    padding: 20px;
  }
  .orderHistoryCard .eachProductItem .img-info-price .img-info .product-info .small_screen {
    display: block;
  }
  .orderHistoryCard .eachProductItem .img-info-price .big_screen {
    display: none;
  }
  .orderHistoryCard .orderHistoryFooter {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .orderHistoryCard .orderHistoryFooter .right_footer div {
    margin: 10px 0;
  }
}
/*!********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderHistory/AuthUserOrders/AuthUserOrders.scss ***!
  \********************************************************************************************************************************************************/
.authUserOrders {
  max-width: 1500px;
  width: 90%;
  margin: 2rem auto;
  min-height: 50vh;
}
.authUserOrders .ordersContent .filter_sort {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 40px;
}
.authUserOrders .ordersContent .filter_sort select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  font-family: "Bebas Neue Pro Normal";
}
.authUserOrders .ordersContent .filter_sort .sortBy {
  position: relative;
}
.authUserOrders .ordersContent .filter_sort .sortBy .sortsBy_header {
  padding: 7px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.authUserOrders .ordersContent .filter_sort .sortBy .sortsBy_header div {
  margin: 0 2px;
}
.authUserOrders .ordersContent .filter_sort .sortBy .sortsBy_header div:last-child {
  font-size: 20px;
  margin-top: 5px;
  margin-left: 20px;
}
.authUserOrders .ordersContent .filter_sort .sortBy .sortContent .listOfSortContent {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 35px;
  position: absolute;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #333;
  left: 16px;
  width: 175px;
}
.authUserOrders .ordersContent .filter_sort .sortBy .sortContent .listOfSortContent li {
  padding: 7px 25px 7px 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Light";
}
.authUserOrders .ordersContent .filter_sort .sortBy .sortContent .listOfSortContent li:hover {
  background: #eeeeee;
}
.authUserOrders .ordersContent .loading_comp {
  display: flex;
  justify-content: center;
  align-items: center;
}
.authUserOrders .emptyOrder {
  margin: 2rem 0 1rem 0;
  border: 0.75px solid #555;
  padding: 2rem;
  border-radius: 20px;
}
.authUserOrders .emptyOrder .info {
  text-align: center;
  color: #555;
}
.authUserOrders .emptyOrder .btn_expolore {
  border: 1px solid #000;
  padding: 10px 20px;
  cursor: pointer;
  width: fit-content;
  margin: 20px auto;
}

@media (max-width: 600px) {
  .authUserOrders .ordersContent .filter_sort {
    flex-direction: column;
  }
}
/*!******************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderHistory/ProductReview/ProductReview.scss ***!
  \******************************************************************************************************************************************************/
.productReviewModel {
  background-color: #fff;
  padding: 2rem;
  position: relative;
}
.productReviewModel .productData {
  display: flex;
  align-items: center;
}
.productReviewModel .productData img {
  height: 100px;
  width: 100px;
}
.productReviewModel .descriptionDivider {
  position: relative;
  height: 1px;
  margin: 1.5rem auto;
}
.productReviewModel .descriptionDivider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0%;
  right: 5%;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(48, 49, 51), transparent);
}
.productReviewModel .star-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.productReviewModel .star-rating .all_star {
  display: flex;
  align-items: center;
  justify-content: center;
}
.productReviewModel .star-rating .all_star .eachStar {
  display: flex;
  align-items: center;
  color: #eee;
}
.productReviewModel .star-rating .all_star .eachStar:last-child span {
  display: none;
}
.productReviewModel .star-rating .all_star button.star {
  background-color: #dddddd;
  border: none;
  cursor: pointer;
  border-radius: 7px;
  padding: 11px;
  margin: 2px;
  font-size: 1.1rem;
  box-shadow: rgba(233, 233, 233, 0.25) 0px 50px 100px -20px, rgba(255, 255, 255, 0.3) 0px 30px 60px -30px, rgba(169, 169, 169, 0.35) 0px -2px 6px 0px inset;
}
.productReviewModel .star-rating .all_star button.star:focus {
  outline: none;
}
.productReviewModel .star-rating .all_star button.star:hover svg {
  color: transparent;
}
.productReviewModel .star-rating .review-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}
.productReviewModel .star-rating .review-form textarea {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: "Bebas Neue Pro Normal", sans-serif;
}
.productReviewModel .star-rating .review-form textarea::placeholder {
  color: #555;
  font-family: "Bebas Neue Pro Normal", sans-serif;
}
.productReviewModel .star-rating .review-form textarea:focus {
  border-color: #000;
  outline: none;
}
.productReviewModel .star-rating .review-form small {
  text-align: right;
  color: #999;
  margin: 15px 0;
}
.productReviewModel .star-rating .review-form .loginError {
  margin: 10px 0;
  font-size: 14px;
}
.productReviewModel .star-rating .review-form button {
  padding: 10px 15px;
  background-color: #000;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Bebas Neue Pro Normal", sans-serif;
}
.productReviewModel .star-rating .review-form button:hover {
  background-color: #fff;
  color: #000;
  border: 0.75px solid #000;
}
.productReviewModel .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
/*!******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderHistory/OrderHistoryDetails/OrderHistoryDetails.scss ***!
  \******************************************************************************************************************************************************************/
.orderDetailsHistory {
  max-width: 1200px;
  width: 90%;
  margin: 2rem auto;
}
.orderDetailsHistory .orderDetailHistroyHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.orderDetailsHistory .orderDetailHistroyHeader .backBTN {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}
.orderDetailsHistory .orderDetailHistroyHeader .backBTN:hover {
  background-color: rgba(238, 238, 238, 0.4156862745);
  transition: all 0.2s ease-in-out;
}
.orderDetailsHistory .orderDetailHistroyHeader .backBTN div {
  margin: 0 5px;
}
.orderDetailsHistory h2 {
  padding: 10px;
}
.orderDetailsHistory .orderHistoryDetailCard {
  max-width: 1200px;
  width: 100%;
  margin: 2rem auto;
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader {
  justify-content: space-between;
  padding: 20px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.161) 0px 3px 8px;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .left_header {
  display: flex;
  align-items: center;
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .left_header div {
  margin: 0px 2px;
  color: #333;
  font-family: "Bebas Neue Pro Normal";
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .listOfHeaderContent {
  display: flex;
  align-items: center;
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent {
  margin: 5px 1rem;
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent div:first-of-type {
  font-family: "Bebas Neue Pro Bold";
  font-size: 14px;
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent div:nth-of-type(2) {
  font-family: "Bebas Neue Pro Light";
  margin: 10px 0;
  font-size: 14px;
}
.orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .listOfHeaderContent .headerLeftContent.total_tokal div:nth-of-type(2) {
  font-family: "Bebas Neue Pro Bold";
  font-size: 15px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail {
  display: flex;
  justify-content: space-between;
  flex-direction: column-reverse;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail {
  flex: 1.75;
  padding: 20px;
  width: 100%;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem {
  border: 0.75px solid #999;
  border-radius: 10px;
  margin: 1rem 0;
  display: flex;
  align-items: center;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .smallProductImage {
  position: relative;
  height: 100px;
  overflow: hidden;
  padding: 3px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .smallProductImage img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .product-info {
  flex: 1;
  margin: 0 12px;
  margin-top: 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .product-info .product-name {
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 4px;
  position: relative;
  display: inline-block;
  font-family: "Bebas Neue Pro Bold";
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .product-info .product-name:hover {
  color: #c45500;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .product-info .productId {
  font-size: 14px;
  color: #555;
  margin: 7px 0;
  font-family: "Bebas Neue Pro Normal";
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .product-info .product-price {
  font-size: 16px;
  color: #000;
  margin: 7px 0;
  font-family: "Bebas Neue Pro Bold";
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .buyAgain-viewProduct {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .buyAgain-viewProduct .buyAgain {
  padding: 5px 10px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .buyAgain-viewProduct .viewProduct {
  border: 1px solid #000;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .divider_orderHistroy {
  height: 0.75px;
  margin: 1.5rem auto;
  background-color: #ccc;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom {
  flex: 1;
  padding: 15px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom .eachReview {
  display: flex;
  flex-direction: column;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom .eachReview .reviewHeader {
  display: flex;
  align-items: center;
  margin: 5px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom .eachReview .review_comment {
  font-size: 14px;
  color: #555555;
  padding: 10px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom .eachReview .numberOfStars {
  display: flex;
  align-items: center;
  margin-left: 2rem;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom .eachReview .numberOfStars div:first-of-type {
  margin-right: 10px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom .eachReview .update_btn {
  background-color: #fff;
  padding: 5px 10px;
  border: 1px solid #000;
  color: #000;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  width: fit-content;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .productReviewCom .writeReview {
  background-color: #000;
  padding: 10px;
  border: 1px solid #000;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  width: fit-content;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo {
  flex: 1;
  margin: 20px 0 20px 20px;
  padding: 20px 0;
  color: #333333;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo .transactionInfoBox {
  width: 100%;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo .transactionInfoBox .transactionInfo_row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  padding: 5px 0;
  border-radius: 5px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo .transactionInfoBox .transactionInfo_row .transactionInfo_label {
  flex: 1;
  text-align: left;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo .transactionInfoBox .transactionInfo_row .transactionInfo_price {
  flex: 1;
  text-align: left;
  text-align: right;
  font-weight: bold;
  color: #000;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo .transactionInfoBox .divider_order {
  height: 0.75px;
  width: 100%;
  background-color: #999;
  margin: 1px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo .transactionInfoBox .transactionInfo_row.grand_total {
  color: #000;
  font-family: "Bebas Neue Pro Bold";
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo .transactionInfoBox .transactionInfo_header {
  font-family: "Bebas Neue Pro Bold";
  font-size: 16px;
  text-decoration: underline;
  text-transform: uppercase;
  margin: 10px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user {
  border-radius: 10px;
  background: #fff;
  margin: 10px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo {
  border-radius: 10px;
  padding: 40px 30px 30px 30px;
  box-shadow: rgba(0, 0, 0, 0.161) 0px 3px 8px;
  margin: 10px;
  flex: 1;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .boughtAt,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo .boughtAt,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo .boughtAt {
  display: flex;
  align-items: center;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .boughtAt .symbol,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo .boughtAt .symbol,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo .boughtAt .symbol {
  margin-left: 3px;
  margin-right: 1px;
  display: inline-block;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .boughtAt img,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo .boughtAt img,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo .boughtAt img {
  height: 20px;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo div,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo div,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo div {
  font-family: "Bebas Neue Pro Normal";
  font-size: 15px;
  text-transform: capitalize;
  color: #333333;
  margin: 5px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo div span,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo div span,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo div span {
  width: fit-content;
  margin-right: 10px;
  display: inline-block;
  font-family: "Bebas Neue Pro Bold";
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .email,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo .email,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo .email {
  text-transform: lowercase;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .email span,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo .email span,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo .email span {
  text-transform: capitalize;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .customerInfo_header,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo .customerInfo_header,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo .customerInfo_header {
  font-family: "Bebas Neue Pro Bold";
  font-size: 16px;
  text-decoration: underline;
  text-transform: uppercase;
  margin: 5px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .OrderNote,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo .OrderNote,
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo .OrderNote {
  margin: 10px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .transactionHash_link {
  cursor: pointer;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .transactionHash_link span {
  color: #000;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .transactionHash_link .transaction_hash {
  color: blue;
  text-decoration: underline;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo div {
  font-family: "Bebas Neue Pro Normal";
  font-size: 15px;
  text-transform: capitalize;
  color: #333333;
  margin: 5px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo div span {
  width: fit-content;
  margin-right: 10px;
  display: inline-block;
  font-family: "Bebas Neue Pro Bold";
}
.orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo .customerInfo_header {
  font-family: "Bebas Neue Pro Bold";
  font-size: 16px;
  text-decoration: underline;
  text-transform: uppercase;
  margin: 5px 0;
}
.orderDetailsHistory .orderHistoryDetailCard .placeOrderContainer .orderMessage {
  text-align: center;
  font-size: 14px;
}
.orderDetailsHistory .orderHistoryDetailCard .placeOrderContainer .placeOrderAgain {
  width: fit-content;
  margin: 0 auto;
  color: #fff;
  background-color: #000;
  border: 1px solid #000;
  padding: 10px 26px;
  cursor: pointer;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal";
  transition: all 0.2s ease-in-out;
}

@media (max-width: 1300px) {
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail {
    flex-direction: column-reverse;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderProductsDetail {
    flex: 1;
    padding: 40px 20px;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderProductsDetail .eachProductItem {
    padding: 20px 10px;
    min-width: 230px;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderProductsDetail .eachProductItem .img-info-price .img-info .product-info {
    margin: 0 22px;
  }
}
@media (max-width: 1000px) {
  .orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader {
    flex-direction: column;
    align-items: flex-start;
  }
  .orderDetailsHistory .orderHistoryDetailCard .orderHistoryCardHeader .listOfHeaderContent:first-of-type {
    flex-direction: column;
    align-items: flex-start;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary {
    flex-direction: column;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .transactionInfo {
    width: 100%;
    margin: 0;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo,
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo,
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo {
    min-width: 297px;
    margin: 10px;
    padding: 20px;
  }
}
@media (max-width: 550px) {
  .orderDetailsHistory .orderHistoryDetailCard .listOfHeaderContent {
    flex-direction: column;
    align-items: flex-start;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail {
    flex-direction: column-reverse;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail {
    flex: 1;
    padding: 5px;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 10px;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price {
    padding: 10px;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .orderAndProductSummary .orderProductsDetail .eachProductItem .img-info-price .img-info .product-info {
    margin: 0 22px;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping {
    flex-direction: column;
  }
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .paymentInfo,
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .shippingInfo,
  .orderDetailsHistory .orderHistoryDetailCard .product_detail_order_detail .order_detail_user .user_shipping .customerInfo {
    margin: 15px 0;
  }
}
/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/OrderHistory/OrderPlaced/OrderPlaced.scss ***!
  \**************************************************************************************************************************************************/
.orderSuccessComponent {
  max-width: 1500px;
  width: 90%;
  margin: 2rem auto;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.orderSuccessComponent .backBTN {
  display: flex;
  margin: 2rem 0px;
  cursor: pointer;
}
.orderSuccessComponent .backBTN div {
  margin-right: 10px;
}
.orderSuccessComponent .backBTN div a {
  text-decoration: none;
  color: #000;
}
.orderSuccessComponent .orderSuccessBox {
  width: 80%;
}
.orderSuccessComponent .orderSuccessBox .orderId {
  text-align: center;
  color: #c45500;
  text-decoration: underline;
}
.orderSuccessComponent .orderSuccessBox .orderId span {
  color: #000;
  display: inline-block;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo {
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
  padding: 70px 0px 20px 0px;
  border-radius: 15px;
  position: relative;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .imageContainer {
  height: 150px;
  margin: 0 auto;
  position: absolute;
  border-radius: 50%;
  top: -15%;
  left: 50%;
  transform: translate(-50%);
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .imageContainer img {
  height: 100%;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .confirmationStatus {
  text-align: center;
  width: 70%;
  margin: 0 auto;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .confirmationStatus div a {
  color: #1480fc;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .confirmationStatus .failed {
  color: #c45500;
  font-size: 15px;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox {
  margin: 0 auto;
  padding: 20px 40px;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailsBox_header,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailsBox_header {
  font-size: 17px;
  font-family: "Bebas Neue Pro Bold";
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0.5rem 0;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn {
  flex: 1 1 calc(33.33% - 0px);
  max-width: calc(33.33% - 0px);
  align-items: center;
  font-family: "Bebas Neue Pro Bold";
  margin: 1rem 0;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn .orderedTokenPrice,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn .orderedTokenPrice {
  display: flex;
  align-items: center;
  position: relative;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn .orderedTokenPrice .infoTooltip,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn .orderedTokenPrice .infoTooltip {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 250px;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn .tokenPrice,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn .tokenPrice {
  display: flex;
  align-items: center;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn .tokenPrice img,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn .tokenPrice img {
  height: 25px;
  margin-left: 5px;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn .orderDetailLabel,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn .orderDetailLabel {
  color: #999;
  font-size: 14px;
  margin: 5px 0;
  font-family: "Bebas Neue Pro Normal";
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn .hash,
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn .hash {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .grp_btn {
  display: flex;
  align-items: center;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .grp_btn .btn_order {
  padding: 10px 10px;
  border: 1px solid #000;
  border-radius: 5px;
  cursor: pointer;
  width: fit-content;
  margin: 10px auto;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .descriptionDivider {
  position: relative;
  height: 0.75px;
  margin: 0.5rem auto;
  width: 100%;
}
.orderSuccessComponent .orderSuccessBox .orderPaymentInfo .descriptionDivider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 2px;
  background-image: linear-gradient(to right, transparent, rgba(165, 165, 165, 0.44), transparent);
}

@media (max-width: 1000px) {
  .orderSuccessComponent .orderSuccessBox {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .orderSuccessComponent {
    height: auto;
    margin-top: 7rem;
  }
  .orderSuccessComponent .orderSuccessBox .orderPaymentInfo .imageContainer {
    top: -10%;
  }
  .orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn,
  .orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn {
    flex: calc(50% - 0px);
    max-width: calc(50% - 0px);
  }
}
@media (max-width: 500px) {
  .orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderPaymentBox .orderDetailRow .eachColumn,
  .orderSuccessComponent .orderSuccessBox .orderPaymentInfo .orderDetailsBox .orderDetailRow .eachColumn {
    flex: calc(100% - 0px);
    max-width: calc(100% - 0px);
  }
}
/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Payment/PayByQRCodeModel/PaymentProcess.scss ***!
  \*****************************************************************************************************************************************************/
.paymentProcessModel {
  background-color: #fff;
  padding: 40px;
  overflow-y: auto;
  max-width: 700px;
  margin: 2rem auto;
}
.paymentProcessModel .note {
  max-width: 700px;
  margin: 1rem auto;
  background: rgb(244, 249, 246);
  color: #000;
  padding: 20px;
  border: 1px solid rgb(10, 166, 83);
  font-size: 15px;
  text-align: center;
}
.paymentProcessModel .animationIcon {
  display: flex;
  justify-content: center;
}
.paymentProcessModel .animationIcon img {
  height: 100px;
  width: 100px;
}
.paymentProcessModel .currentStateText .currentState {
  font-size: 18px;
  text-align: center;
}
.paymentProcessModel .currentStateText .listOfState {
  margin: 2rem auto;
  width: 80%;
}
.paymentProcessModel .currentStateText .listOfState .eachState {
  display: flex;
  margin: 1.5rem 0;
}
.paymentProcessModel .currentStateText .listOfState .eachState .stateIcon {
  margin-right: 1rem;
}
.paymentProcessModel .currentStateText .listOfState .eachState .stateIcon img {
  height: 50px;
  width: 50px;
}
.paymentProcessModel .currentStateText .listOfState .eachState .stateInfo div:first-of-type {
  font-size: 18px;
  margin-bottom: 0.5rem;
}
.paymentProcessModel .currentStateText .listOfState .eachState .stateInfo div:last-of-type {
  font-size: 14px;
  color: #555;
}
.paymentProcessModel .transaction_info {
  max-width: 700px;
  margin: 2rem 0;
  background: rgba(238, 238, 238, 0.462745098);
  color: #000;
  padding: 20px;
  border: 1px solid #ccc;
  font-size: 15px;
}
.paymentProcessModel .transaction_info .info_hader {
  font-size: 18px;
  color: #000;
}
.paymentProcessModel .transaction_info .transaction_summary_detail {
  margin-top: 1rem;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .transactionWalletData {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .transactionWalletData .eachDetail:first-of-type {
  flex: 1;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .transactionWalletData .eachDetail:last-of-type {
  flex: 2;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail {
  flex-wrap: wrap;
  margin: 0.5rem 0px;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail .data_title {
  margin: 10px;
  font-weight: 600;
  font-size: 18px;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail .transactionToken {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail .transactionToken .copy-icon {
  margin-left: 5px;
  cursor: pointer;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail .transactionToken .copy-icon svg {
  height: 18px;
  width: 18px;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail .data {
  color: #555;
  margin: 10px;
}
.paymentProcessModel .transaction_info .transaction_summary_detail .divider {
  border: 0.5px solid #ccc;
  width: 100%;
}
.paymentProcessModel .transaction_info_footer .grp_btn {
  display: flex;
  align-items: center;
}
.paymentProcessModel .transaction_info_footer .grp_btn .btn_order {
  padding: 10px 10px;
  border: 1px solid #000;
  border-radius: 5px;
  cursor: pointer;
  width: fit-content;
  margin: 10px auto;
  color: #fff;
  background: #000;
}

@media (max-width: 768px) {
  .paymentProcessModel {
    padding: 10px;
  }
  .paymentProcessModel .currentStateText .listOfState {
    width: 100%;
  }
  .paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail .data_title {
    text-align: center;
    min-width: 100%;
  }
  .paymentProcessModel .transaction_info .transaction_summary_detail .eachDetail .data {
    text-align: center;
    min-width: 100%;
  }
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Utils/Loading/Skeleton/Skeleton.scss ***!
  \*********************************************************************************************************************************************/
.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.skeleton-line {
  width: 100%;
  background-color: #e0e0e0;
  animation: pulse 1.5s infinite ease-in-out;
  border-radius: 4px;
  margin: 5px 0;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/Components/Reward/RewardComponent/ExitToken/exitToken.scss ***!
  \*********************************************************************************************************************************************************************************/
.withdrawRequest {
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.withdrawRequest .header_exit_token {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.withdrawRequest .header_exit_token .withdrawRequestHeader {
  font-size: 22px;
}
.withdrawRequest .reuqestBox {
  display: none;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  margin: 20px 0;
  width: 100%;
}
.withdrawRequest .reuqestBox .reuqestForm {
  width: 70%;
  margin: 0 auto;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine {
  display: flex;
  justify-content: space-between;
  margin: 20px 0px;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine .exit_number {
  display: flex;
  align-items: center;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine .exit_number span {
  display: inline-block;
  margin-left: 5px;
  width: 50px;
  text-align: center;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine.av {
  font-size: 20px;
  font-weight: 600;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine.pd {
  font-size: 18px;
  font-weight: 400;
  color: #555;
  cursor: not-allowed;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine.req {
  font-size: 20px;
  font-weight: 600;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine.req .exit_number input {
  width: 100px;
  padding: 5px;
  font-size: 20px;
  border-radius: 5px;
  border: 0.75px solid #555;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  text-align: right;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine.wallet {
  font-size: 20px;
  font-weight: 600;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine.wallet .walletaddress input {
  width: 500px;
  padding: 5px;
  font-size: 20px;
  border-radius: 5px;
  border: 0.75px solid #555;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  text-align: center;
}
.withdrawRequest .reuqestBox .reuqestForm .eachLine.wallet .walletaddress .notes {
  width: 500px;
  font-size: 14px;
  color: #555;
  margin-top: 5px;
}
.withdrawRequest .reuqestBox .reuqestForm .portions {
  display: flex;
  align-items: center;
  margin: 20px 0px;
}
.withdrawRequest .reuqestBox .reuqestForm .portions .portion {
  margin: 5px;
  padding: 10px;
  border-radius: 5px;
  border: 0.75px solid #555;
  cursor: pointer;
}
.withdrawRequest .reuqestBox .reuqestReview {
  width: 70%;
  margin: 0 auto;
}
.withdrawRequest .reuqestBox .reuqestReview .reuqestReviewHeader {
  font-size: 20px;
  font-weight: 600px;
}
.withdrawRequest .reuqestBox .reuqestReview .reviewBox .eachLine {
  display: flex;
  justify-content: space-between;
  margin: 20px 0px;
  font-size: 18px;
  font-weight: 600;
}
.withdrawRequest .reuqestBox .reuqestReview .reviewBox .eachLine .exit_number {
  display: flex;
  align-items: center;
}
.withdrawRequest .reuqestBox .reuqestReview .reviewBox .eachLine .exit_number span {
  display: inline-block;
  margin-left: 5px;
  width: 50px;
  text-align: center;
}
.withdrawRequest .reuqestBox.show {
  display: block;
}

.exitToken {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.exitToken .exitTokenInterest,
.exitToken .exitTokenBalance {
  flex: 1;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  margin: 5px;
}
.exitToken .exitTokenInterest .exitBox,
.exitToken .exitTokenBalance .exitBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0;
}
.exitToken .exitTokenInterest .exitBox div,
.exitToken .exitTokenBalance .exitBox div {
  font-size: 22px;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget,
.exitToken .exitTokenBalance .exitBox .totalExitWidget {
  display: flex;
  align-items: center;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-family: "Bebas Neue Pro Normal", sans-serif;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .infoIcon,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .infoIcon {
  font-size: 10px;
  margin-left: 15px;
  text-decoration: underline;
  color: #fe4d13;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget {
  visibility: hidden;
  width: 350px;
  color: #000;
  padding: 10px;
  position: absolute;
  bottom: 200%;
  left: 90%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
  pointer-events: none;
  background-color: #fff;
  border-radius: 5px;
  white-space: nowrap;
  border: 0.5px solid #10161c;
  z-index: 99999;
  box-sizing: border-box;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow {
  display: flex;
  align-items: flex-start;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow div,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow div {
  font-size: 14px;
  margin: 3px 0;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow div:first-of-type,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow div:first-of-type {
  width: 100%;
  text-wrap: wrap;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow div:first-of-type small,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .toolEachRow div:first-of-type small {
  color: #555;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo {
  margin: 0;
  padding: 10px;
  width: 100%;
  text-wrap: wrap;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo span,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo span {
  text-decoration: underline;
  font-size: 15px;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo li,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo li {
  margin: 3px;
  font-size: 14px;
  color: #555;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo li span,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .lisOfInfo li span {
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: #000;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .divider,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget .divider {
  background-color: #999;
  height: 0.75px;
  width: 100%;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget::after,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper .tooltipWidget::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.exitToken .exitTokenInterest .exitBox .totalExitWidget .infoIconWrapper:hover .tooltipWidget,
.exitToken .exitTokenBalance .exitBox .totalExitWidget .infoIconWrapper:hover .tooltipWidget {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out, visibility 0s;
}
.exitToken .exitTokenInterest .exitBox.sub,
.exitToken .exitTokenBalance .exitBox.sub {
  color: #555;
  font-size: 16px;
}
.exitToken .exitTokenInterest .exitBox.sub div,
.exitToken .exitTokenBalance .exitBox.sub div {
  font-size: 16px;
}
.exitToken .exitTokenInterest .exitBox.sub .interest,
.exitToken .exitTokenBalance .exitBox.sub .interest {
  color: #fff;
  background-color: #fe4d13;
  padding: 5px 10px;
  border-radius: 30px;
  font-size: 12px;
}

.skeletonWrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.skeletonWrapper .skeleton_box {
  padding: 20px;
  background-color: #fff;
  flex: 1;
  margin: 5px;
  border-radius: 5px;
}

.history_exit_token {
  margin: 10px 5px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.history_exit_token .header_exit_token {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history_exit_token .header_exit_token .reward_history_header {
  padding: 10px;
  font-size: 22px;
}
.history_exit_token .header_exit_token .exitTokenFilter {
  position: relative;
}
.history_exit_token .header_exit_token .exitTokenFilter .sortsBy_header {
  padding: 7px 15px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.history_exit_token .header_exit_token .exitTokenFilter .sortsBy_header div {
  margin: 0 2px;
}
.history_exit_token .header_exit_token .exitTokenFilter .sortsBy_header div:last-child {
  font-size: 20px;
  margin-top: 5px;
  margin-left: 20px;
}
.history_exit_token .header_exit_token .exitTokenFilter .sortContent .listOfSortContent {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 35px;
  position: absolute;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #333;
  left: 16px;
  width: 175px;
}
.history_exit_token .header_exit_token .exitTokenFilter .sortContent .listOfSortContent li {
  padding: 7px 25px 7px 15px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-family: "Bebas Neue Pro Light";
}
.history_exit_token .header_exit_token .exitTokenFilter .sortContent .listOfSortContent li:hover {
  background: #eeeeee;
}
.history_exit_token .listOfRewards {
  padding: 10px 20px;
}
.history_exit_token .listOfRewards .eachTransaction {
  margin: 20px 30px;
  display: flex;
}
.history_exit_token .listOfRewards .eachTransaction .transaction_amount {
  flex: 1;
  font-size: 14px;
  color: #333;
  font-weight: 700;
  text-align: right;
}
.history_exit_token .listOfRewards .eachTransaction .transaction_amount span {
  font-size: 18px;
}
.history_exit_token .listOfRewards .eachTransaction .transaction_details {
  flex: 1;
  display: flex;
  align-items: center;
}
.history_exit_token .listOfRewards .eachTransaction .transaction_details .transaction_date {
  flex: 1;
}
.history_exit_token .listOfRewards .eachTransaction .transaction_details .transaction_info {
  flex: 1;
  width: 100%;
  margin-left: 10px;
}
.history_exit_token .listOfRewards .eachTransaction .transaction_details .transaction_info .transaction_type_source {
  color: #777;
  font-size: 14px;
  text-transform: uppercase;
  margin-right: 50px;
}
.history_exit_token .listOfRewards .eachTransaction .transaction_details .transaction_info .transaction_type_source .type {
  font-size: 15px;
  color: #000;
}

.submit-btn {
  margin: 0 auto;
  background-color: #000;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 950px) {
  .exitToken {
    flex-direction: column;
  }
}
@media (max-width: 735px) {
  .exitToken .exitTokenBalance .exitBox div,
  .exitToken .exitTokenInterest .exitBox div {
    flex: 1;
    font-size: 18px;
  }
  .exitToken .exitTokenBalance .exitBox.sub,
  .exitToken .exitTokenInterest .exitBox.sub {
    width: fit-content;
  }
  .history_exit_token .listOfRewards {
    padding: 10px 10px;
  }
  .history_exit_token .listOfRewards .eachTransaction {
    border-bottom: 1px solid #999;
    margin: 20px 15px;
  }
  .history_exit_token .listOfRewards .eachTransaction .transaction_details {
    flex-direction: column;
    align-items: flex-start;
  }
  .history_exit_token .listOfRewards .eachTransaction .transaction_details .transaction_info {
    margin: 5px 0;
  }
}
/*!****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/Components/Reward/Reward.scss ***!
  \****************************************************************************************************************************************************/
.RewardsComponent {
  max-width: 1300px;
  width: 85%;
  margin: 2rem auto;
  padding: 10px;
}
.RewardsComponent .title {
  margin-bottom: 1rem;
  margin-left: 3rem;
}
.RewardsComponent .title h2 {
  margin: 0;
  padding: 0;
}
.RewardsComponent .title div {
  margin: 5px 0;
  color: #e61000;
}
.RewardsComponent .sponsorLink {
  padding: 1rem 0 1rem 3rem;
  display: flex;
  align-items: center;
  color: #333;
  margin: 10px 0;
}
.RewardsComponent .sponsorLink span {
  margin-right: 5px;
  font-size: 22px;
}
.RewardsComponent .sponsorLink .referalLink {
  margin: 0;
  font-size: 15px;
  color: #333;
}
.RewardsComponent .sponsorLink .copy-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #333;
}
.RewardsComponent .sponsorLink .copy-icon svg {
  height: 18px;
  width: 18px;
}
.RewardsComponent .allRewardsBtn .eachRowSectionButton {
  display: flex;
  margin-left: 1rem;
}
.RewardsComponent .allRewardsBtn .eachRowSectionButton .eachSecButton {
  padding: 10px 15px;
  background: #fff;
  margin: 0 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  color: #555;
  cursor: pointer;
}
.RewardsComponent .allRewardsBtn .eachRowSectionButton .eachSecButton.active {
  background-color: #f3f3f3;
  color: #000;
  font-weight: bold;
}
.RewardsComponent .allRewardsBtn .eachSection {
  background-color: #f3f3f3;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.RewardsComponent .allRewardsBtn .eachSection .sectionAccordingButton {
  margin-left: 10px;
  width: 100%;
}

@media (max-width: 850px) {
  .RewardsComponent {
    width: 90%;
  }
  .RewardsComponent .title {
    margin-left: 0.5rem;
  }
  .RewardsComponent .sponsorLink {
    padding: 1rem 0 1rem 0.5rem;
  }
  .RewardsComponent .allRewardsBtn .eachRowSectionButton {
    margin-left: 0rem;
  }
  .RewardsComponent .allRewardsBtn .eachRowSectionButton .eachSecButton {
    font-size: 14px;
  }
  .RewardsComponent .allRewardsBtn .eachSection {
    flex-direction: column;
    padding: 10px;
  }
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/Components/PersonalInfo/PersonalInfo.scss ***!
  \****************************************************************************************************************************************************************/
.manageUserAccountComponent .PersonalInfoSection form {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 20px;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item {
  position: relative;
  margin-bottom: 20px;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .inputFieldMobile input,
.manageUserAccountComponent .PersonalInfoSection form .form-item .country,
.manageUserAccountComponent .PersonalInfoSection form .form-item input {
  margin: 0 auto;
  background: transparent;
  border: 0.75px solid #ccc;
  margin-bottom: 5px;
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 11px;
  color: #333;
  border-radius: 5px;
  z-index: 3;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .inputFieldMobile input::placeholder,
.manageUserAccountComponent .PersonalInfoSection form .form-item .country::placeholder,
.manageUserAccountComponent .PersonalInfoSection form .form-item input::placeholder {
  color: #777;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .inputFieldMobile input:focus,
.manageUserAccountComponent .PersonalInfoSection form .form-item .country:focus,
.manageUserAccountComponent .PersonalInfoSection form .form-item input:focus {
  border: 0.85px solid #000;
  transition: all 0.3s ease;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .inputFieldMobile input:focus + label,
.manageUserAccountComponent .PersonalInfoSection form .form-item .country:focus + label,
.manageUserAccountComponent .PersonalInfoSection form .form-item input:focus + label {
  color: #555;
  font-size: 13px;
  top: -14px;
  left: 7px;
  background: #fff;
  padding: 5px;
  z-index: 4;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .inputFieldMobile input:focus + label span,
.manageUserAccountComponent .PersonalInfoSection form .form-item .country:focus + label span,
.manageUserAccountComponent .PersonalInfoSection form .form-item input:focus + label span {
  color: red;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .inputFieldMobile input:not(:placeholder-shown) + label,
.manageUserAccountComponent .PersonalInfoSection form .form-item .country:not(:placeholder-shown) + label,
.manageUserAccountComponent .PersonalInfoSection form .form-item input:not(:placeholder-shown) + label {
  font-size: 13px;
  top: -14px;
  left: 7px;
  color: #999;
  background: #fff;
  padding: 5px;
  z-index: 4;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .inputFieldMobile input:not(:placeholder-shown) + label span,
.manageUserAccountComponent .PersonalInfoSection form .form-item .country:not(:placeholder-shown) + label span,
.manageUserAccountComponent .PersonalInfoSection form .form-item input:not(:placeholder-shown) + label span {
  color: red;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .reg-error {
  color: #e61000;
  font-size: 14px;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item label {
  position: absolute;
  cursor: text;
  font-size: 13px;
  top: -14px;
  left: 7px;
  background: #fff;
  padding: 5px;
  font-weight: bold;
  color: #555;
  transition: all 0.3s ease;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item label span {
  color: #999;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item input[readonly] {
  color: #999;
  border: 1px solid #ccc;
  cursor: not-allowed;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item input[readonly]:not(:placeholder-shown) + label {
  color: #999;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item input[readonly]:not(:placeholder-shown) + label span {
  color: #999;
}
.manageUserAccountComponent .PersonalInfoSection form .form-item .verifyPhoneNote {
  color: #e61000;
  display: block;
  margin: 5px 0;
}
.manageUserAccountComponent .PersonalInfoSection form .Message {
  color: #007ea8;
  text-align: left;
  margin-top: 1rem;
}
.manageUserAccountComponent .PersonalInfoSection form .mobileNumber {
  display: flex;
  align-items: flex-start;
}
.manageUserAccountComponent .PersonalInfoSection form .mobileNumber .verificationSec .loginError {
  text-align: left;
  margin: 10px 0;
}
.manageUserAccountComponent .PersonalInfoSection form .mobileNumber .verificationSec .notVerified {
  display: flex;
}
.manageUserAccountComponent .PersonalInfoSection form .mobileNumber .verificationSec .notVerified .changeNUmber,
.manageUserAccountComponent .PersonalInfoSection form .mobileNumber .verificationSec .notVerified .verifyBTN {
  border: 0.75px solid #e61000;
  background: #e61000;
  color: #fff;
  padding: 10px 20px;
  width: fit-content;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
}
.manageUserAccountComponent .PersonalInfoSection form .mobileNumber .verificationSec .notVerified .changeNUmber {
  border: 0.75px solid #000;
  background: #000;
}
.manageUserAccountComponent .PersonalInfoSection form .cancel-button {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 10px 0px;
  cursor: pointer;
  text-align: center;
}

.PhoneInputInput {
  background-color: #fff;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/Components/ShippingInfo/ShippingInfo.scss ***!
  \****************************************************************************************************************************************************************/
.authUserInfo .user-contact-info .user-contact-info-form .email-input,
.authUserInfo .user-contact-info .user-contact-info-form .mobile-input {
  margin: 1.5rem 0;
}
.authUserInfo .user-contact-info .user-contact-info-form .email-input span,
.authUserInfo .user-contact-info .user-contact-info-form .mobile-input span {
  display: inline-block;
  margin: 10px 0;
  font-weight: 600;
}
.authUserInfo .user-contact-info .user-contact-info-form .email-input input,
.authUserInfo .user-contact-info .user-contact-info-form .mobile-input input {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  flex: 1;
  font-size: 14px;
}
.authUserInfo .user-contact-info .user-contact-info-form .email-input input:focus,
.authUserInfo .user-contact-info .user-contact-info-form .mobile-input input:focus {
  outline: none;
  border-bottom-color: #000;
}
.authUserInfo .user-contact-info .user-contact-info-form .email-input input::placeholder,
.authUserInfo .user-contact-info .user-contact-info-form .mobile-input input::placeholder {
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-size: 14px;
  font-weight: normal;
}
.authUserInfo .user-contact-info .user-contact-info-form .email-input .addNotes_btn,
.authUserInfo .user-contact-info .user-contact-info-form .mobile-input .addNotes_btn {
  margin-top: 10px;
  border: 1px solid #000;
  padding: 5px 10px;
  width: fit-content;
  background: #000;
  color: #fff;
  transition: all 0.2s ease-in;
  font-size: 14px;
  cursor: pointer;
}
.authUserInfo .user-contact-info .user-contact-info-form .email-input .addNotes_btn:hover,
.authUserInfo .user-contact-info .user-contact-info-form .mobile-input .addNotes_btn:hover {
  background-color: #fff;
  color: #000;
}
.authUserInfo .addressSec .Header_address_sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.authUserInfo .addressSec .Header_address_sec div {
  text-decoration: underline;
  cursor: pointer;
  color: #555;
}
.authUserInfo .addressSec .defaultAddress div {
  margin: 5px 0;
  color: #333;
}
.authUserInfo .addressSec .defaultAddress .first_lastName {
  color: #000;
  font-family: "Bebas Neue Pro Bold";
}
.authUserInfo .addressSec .defaultAddress .first_lastName small {
  color: #777;
  font-family: "Bebas Neue Pro Normal";
}
/*!***********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/Components/UpdatePassword.js/UpdatePassword.scss ***!
  \***********************************************************************************************************************************************************************/
.updatePassword .updatePasswordForm {
  width: 100%;
  margin: 2rem auto 0;
}
.updatePassword .updatePasswordForm .passwordInput {
  position: relative;
  width: 100%;
  margin: 2rem 0px;
}
.updatePassword .updatePasswordForm .passwordInput input {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 20px 0px;
  box-sizing: border-box;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px 0;
  font-size: 16px;
  text-align: left;
  display: block;
  width: 300px;
  padding-right: 30px;
}
.updatePassword .updatePasswordForm .passwordInput input:focus {
  outline: none;
  border-bottom-color: #000;
}
.updatePassword .updatePasswordForm .passwordInput input::placeholder {
  font-size: 16px;
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-weight: normal;
  text-align: left;
}
.updatePassword .updatePasswordForm .passwordInput .togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.updatePassword .updatePasswordForm .Message {
  color: #007ea8;
  text-align: center;
  margin-top: 1rem;
}
.updatePassword .updatePasswordForm .passwordBTN {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal";
}
.updatePassword .updatePasswordForm .condtionForPassword {
  margin-top: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.updatePassword .updatePasswordForm .condtionForPassword p {
  text-align: left;
  font-size: 12px;
}
.updatePassword .updatePasswordForm .condtionForPassword.show {
  opacity: 1;
  transform: translateY(0);
}
.updatePassword .close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .updatePassword {
    padding: 50px 20px;
  }
}
/*!********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/Components/Referral/Referral.scss ***!
  \********************************************************************************************************************************************************/
* {
  box-sizing: border-box;
}

#firstGrid {
  gap: 5vw;
}
#firstGrid #totalReferredUsers {
  border-radius: 20px;
  background: #102b3f;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #fff;
  min-width: 180px;
  max-width: 300px;
}
#firstGrid #totalReferredUsers span {
  font-size: 2rem;
}
#firstGrid #totalReferredUsers .whiteBG {
  background-color: white;
  aspect-ratio: 1/1;
  padding: 1rem 0.8rem 0.6rem;
  border-radius: 0.8rem;
}

#referralLinkCopyFlexBox {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#referralLinkCopyFlexBox #referralLinkText {
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #fafafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem 2rem;
  width: 100%;
  box-sizing: border-box;
}
#referralLinkCopyFlexBox .copy-link-icon {
  margin-left: 5px;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
  background: #718198;
  padding: 0.5rem 2rem;
}
#referralLinkCopyFlexBox .copy-link-icon svg {
  height: 18px;
  width: 18px;
}

.lightDividerHR {
  border: none;
  border-top: 1px solid #eeeef0;
  margin: 1rem 0;
}

#flex-title-with-sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#flex-title-with-sort div {
  display: flex;
  align-items: center;
}
#flex-title-with-sort div svg {
  height: 2.2rem;
  width: 2.2rem;
}
#flex-title-with-sort select {
  border: none;
  font-weight: 600;
}
#flex-title-with-sort .title-icon {
  margin-left: 0.5rem;
  height: 1rem;
}

#referredUsersTableContainer {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  max-height: 80vh;
}
#referredUsersTableContainer #referredUsersTable {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#referredUsersTableContainer #referredUsersTable thead {
  background: #fafafc;
}
#referredUsersTableContainer #referredUsersTable tr {
  border: 1px solid rgba(0, 0, 0, 0.05);
}
#referredUsersTableContainer #referredUsersTable td,
#referredUsersTableContainer #referredUsersTable th {
  text-wrap: nowrap;
  text-align: left;
  padding: 1rem;
}
#referredUsersTableContainer #referredUsersTable .boldText {
  font-weight: 600;
}
#referredUsersTableContainer #referredUsersTable .affiliateLevel {
  border-radius: 25px;
  padding: 0.3rem 0.75rem;
  width: fit-content;
}
#referredUsersTableContainer #referredUsersTable .BASIC {
  background: #e5f7ff;
}
#referredUsersTableContainer #referredUsersTable .GOLD {
  background: #fff5c0;
}
#referredUsersTableContainer #referredUsersTable .PLATINUM {
  background: #efefef;
}
#referredUsersTableContainer #referredUsersTable .BLACK {
  background: #000;
  color: #fff;
}

@media screen and (max-width: 567px) {
  #firstGrid {
    grid-template-columns: 1fr;
  }
  #referralLinkCopyFlexBox {
    flex-direction: column;
    width: 100%;
  }
  #flex-title-with-sort {
    flex-direction: column;
  }
}
/*!******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/Components/PasswordModel/PasswordModel.scss ***!
  \******************************************************************************************************************************************************************/
.passwordModel {
  background-color: #fff;
  padding: 40px;
  max-width: 575px;
  position: relative;
}
.passwordModel .passwordFormDiv .passwordForm {
  margin: 2rem auto 0;
}
.passwordModel .passwordFormDiv .passwordForm .error {
  color: #f16565;
  padding: 5px 0;
}
.passwordModel .passwordFormDiv .passwordForm .message {
  color: #07a1e3;
  padding: 5px 0;
}
.passwordModel .passwordFormDiv .passwordForm .submit-btn {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 20px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  font-family: "Bebas Neue Pro Normal";
}
.passwordModel .passwordFormDiv .passwordForm div {
  font-weight: 700;
  width: 100%;
  margin: 1rem auto;
}
.passwordModel .passwordFormDiv .passwordForm input {
  margin: 0 auto;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  margin: 20px 0;
  box-sizing: border-box;
  width: 100%;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  padding: 5px 0;
  font-size: 20px;
  text-align: center;
}
.passwordModel .passwordFormDiv .passwordForm input:focus {
  outline: none;
  border-bottom-color: #000;
}
.passwordModel .passwordFormDiv .passwordForm input::placeholder {
  font-size: 20px;
  color: #888;
  font-family: "Bebas Neue Pro Normal", sans-serif;
  font-weight: normal;
}
.passwordModel .close_btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
/*!*********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/ShopaholicCompetition/TermsAndConditions.module.css ***!
  \*********************************************************************************************************************/
.u64PMZorbTTcqPO5okDQ {
    font-family: "Roboto Condensed";
    font-weight: 300;
    margin: 10vh 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #FCFCFC;
    padding: 1.5rem;
    line-height: 150%;
}

.ySwZu5SXCd8ZnjklhC2_ {
    border-radius: 20px;
}

.u64PMZorbTTcqPO5okDQ>strong{
    font-size: 1.25rem;
    display: block;
}
/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/Modals/BuyPackageModal.css ***!
  \********************************************************************************************/
#buyPackageModalMainWrapper {
    max-width: 1000px;
    width: 80%;
    border: 0;
    border-radius: 20px;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
    /* position: relative; */

    &>div {
        padding: 5vh 5vw;
    }
}

.loadingModalWrapper {
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#crossIcon {
    position: absolute;
    top: 4vh;
    right: 2vw;
    font-size: 1.2rem;
    color: black;
    cursor: pointer;
    background: none;
    border: none;
}

.firstHeading,
.secondHeading {
    font-weight: 700;
    text-align: center;
    font-family: "Roboto Condensed";
}

.firstHeading {
    font-size: 1.5rem;
}

.secondHeading {
    font-size: 1.25rem;
}


.levelAndSummaryFlex {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
}

.levelImgContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.1rem;
}

.greyBG {
    border-radius: 15px;
    background: #EDEDED;
    padding: 1rem;

    b {
        text-align: center;
        display: block;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    tr>td:nth-child(2) {
        text-align: end;
        padding-left: 1rem;
        font-weight: 600;
    }
}

.qrCodeGradientWrapper {
    padding: 0.5rem;
    max-width: 300px;
    margin: 5vh auto;

    img {
        border-radius: 1rem;
    }
}

#walletSideImgFlexBox {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-direction: row-reverse;
    justify-content: space-between;

    .imgWrapper {
        max-width: 200px;
    }
}

#walletAddressCopyFlexBox {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-wrap: nowrap;
    margin: 2rem auto;

    #referralLink {
        border-radius: 0.5rem;
        border: 1px solid rgba(0, 0, 0, 0.05);
        background: #FAFAFC;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0.5rem 2rem;
        width: 100%;
    }

    svg {
        height: 1.5rem;
        width: 1.5rem;

    }
}

#walletNavbarSideImgFlexBox {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#buyPackageWithoutPaymentBtn {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: #EDEDED;
    padding: 0.5rem 1rem;
    cursor: pointer;
    margin-top: 1rem;
}

@media screen and (max-width: 767px) {
    #buyPackageModalMainWrapper {
        width: 95%;
    }

    .levelAndSummaryFlex,
    #walletNavbarSideImgFlexBox,
    #walletSideImgFlexBox {
        flex-direction: column;
    }

}
/*!*****************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/ManageAccount/ManageAccount.scss ***!
  \*****************************************************************************************************************************************/
.manageUserAccountComponent {
  max-width: 1300px;
  width: 85%;
  margin: 2rem auto;
  padding: 10px;
}
.manageUserAccountComponent .userName {
  margin-bottom: 3rem;
}
.manageUserAccountComponent .userName h2 {
  margin: 0;
  padding: 0;
}
.manageUserAccountComponent .userName div {
  margin: 5px 0;
  color: #e61000;
}
.manageUserAccountComponent .userName .sponsorLink {
  display: flex;
  align-items: center;
  color: #333;
  margin: 10px 0;
}
.manageUserAccountComponent .userName .sponsorLink span {
  margin-right: 5px;
}
.manageUserAccountComponent .userName .sponsorLink .referalLink {
  margin: 0;
  font-size: 14px;
  color: #333;
}
.manageUserAccountComponent .copy-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #333;
}
.manageUserAccountComponent .copy-icon svg {
  height: 18px;
  width: 18px;
}
.manageUserAccountComponent .backBTN {
  display: flex;
  margin-bottom: 2rem;
  cursor: pointer;
}
.manageUserAccountComponent .backBTN div {
  margin-right: 10px;
}
.manageUserAccountComponent .backBTN div a {
  text-decoration: none;
  color: #000;
}
.manageUserAccountComponent .userAllSectionForUser .topRowButtonSec {
  display: flex;
  position: relative;
  padding-right: 60px;
}
.manageUserAccountComponent .userAllSectionForUser .topRowButtonSec .eachRowSectionButton {
  overflow: scroll;
  display: flex;
  align-items: center;
}
.manageUserAccountComponent .userAllSectionForUser .topRowButtonSec .eachRowSectionButton::-webkit-scrollbar {
  display: none;
}
.manageUserAccountComponent .userAllSectionForUser .topRowButtonSec .eachRowSectionButton .eachSecButton {
  padding: 10px 15px;
  background: #fff;
  color: #555;
  cursor: pointer;
  width: fit-content;
  text-wrap: nowrap;
}
.manageUserAccountComponent .userAllSectionForUser .topRowButtonSec .eachRowSectionButton .eachSecButton.active {
  background-color: #f3f3f3;
  color: #000;
  font-weight: bold;
}
.manageUserAccountComponent .userAllSectionForUser .topRowButtonSec .scrollButton {
  position: absolute;
  right: 0px;
  background-color: #f3f3f3;
  font-weight: bold;
  padding: 10px 15px;
  border-top-right-radius: 8px;
  color: #000;
  cursor: pointer;
  width: fit-content;
  text-wrap: nowrap;
}
.manageUserAccountComponent .userAllSectionForUser .topRowButtonSec .left {
  left: 0px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection {
  background-color: #f3f3f3;
  padding: 20px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser {
  width: calc(33% - 5px);
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .profileName {
  text-align: center;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .profileName .userProfile {
  height: 80px;
  width: 80px;
  margin: 0 auto;
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  background-color: #f3f3f3;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .profileName .userProfile img {
  height: 100%;
  width: 100%;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .profileName h2 {
  margin: 10px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .profileName .userNameSamll {
  color: #555;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .profileName .joinDate {
  color: green;
  font-size: 14px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .thin_divider {
  height: 0.75px;
  background: #eeeeee;
  margin: 1rem 0;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageLevel {
  flex-grow: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails .reduceOpacity {
  opacity: 0.25;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageDetails {
  flex-grow: 2;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageDetails .redText {
  color: #e61000;
  font-size: 0.9rem;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageDetails #buttonsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageDetails #buttonsGrid .whiteBG, .manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageDetails #buttonsGrid .blackBG {
  border: 1px solid black;
  padding: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: "Bebas Neue Pro Bold";
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageDetails #buttonsGrid .whiteBG {
  background-color: #fff;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #affiliatePackageDetails #packageDetails #buttonsGrid .blackBG {
  background-color: #000;
  color: #fff;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #referralLinkFlexBox {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #referralLinkFlexBox #referralLink {
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #FAFAFC;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem 2rem;
  width: 100%;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #referralLinkFlexBox svg {
  height: 1.5rem;
  width: 1.5rem;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #valueHoldingBoxesGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #valueHoldingBoxesGrid .valueHoldingBoxes {
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #FAFAFC;
  text-align: center;
  padding: 0.5rem;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #valueHoldingBoxesGrid .valueHoldingBoxes .amount {
  font-size: 2rem;
  font-weight: 600;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser #valueHoldingBoxesGrid .valueHoldingBoxes .text {
  font-size: 0.8rem;
  color: var(--Mid-Gray, #7D7D7D);
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .userContact {
  display: flex;
  align-items: center;
  margin: 0.75rem 0;
  color: #555;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .userContact span {
  width: 20px;
  display: inline-block;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .userContact div {
  margin: 0 5px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .userContact .delete_btn {
  color: #e61000;
  font-weight: 600;
  cursor: pointer;
  margin-left: 25px;
  text-decoration: underline;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .userContact svg {
  height: 18px;
  width: 18px;
  fill: #555;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .userContact .notVerified {
  color: #e61000;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .completeProfileWidget .completeProfile .ListOfProfile {
  list-style: none;
  padding: 0 10px;
  margin: 0;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .completeProfileWidget .completeProfile .ListOfProfile .eachProfileInfo {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 10px 0;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .completeProfileWidget .completeProfile .ListOfProfile .eachProfileInfo div:first-of-type {
  margin-right: 10px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .completeProfileWidget .completeProfile .ListOfProfile .eachProfileInfo div:first-of-type svg {
  height: 13px;
  color: green;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .completeProfileWidget .completeProfile .ListOfProfile .notProvided {
  color: #e61000;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .completeProfileWidget .completeProfile .ListOfProfile .notProvided div:first-of-type {
  margin-right: 10px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser .completeProfileWidget .completeProfile .ListOfProfile .notProvided div:first-of-type svg {
  height: 13px;
  color: #e61000;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .sectionAccordingButton {
  width: calc(66% - 5px);
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  margin-left: 10px;
  height: 100%;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .sectionAccordingButton .shipping_info {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .sectionAccordingButton .shipping_info:first {
  margin-top: 0px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .sectionAccordingButton .shipping_info svg {
  color: #000;
  height: 18px;
  width: 20px;
  margin-right: 5px;
}
.manageUserAccountComponent .userAllSectionForUser .eachSection .sectionAccordingButton .shipping_info div {
  font-family: "Bebas Neue Pro Normal";
}

.disabledBtn {
  background: #E5E7EB;
  color: #6B7280;
  cursor: not-allowed;
}

@media (max-width: 1024px) {
  #affiliatePackageDetails {
    flex-direction: column;
  }
}
@media (max-width: 850px) {
  .manageUserAccountComponent {
    width: 90%;
  }
  .manageUserAccountComponent .userAllSectionForUser .eachRowSectionButton {
    margin-left: 0rem;
  }
  .manageUserAccountComponent .userAllSectionForUser .eachRowSectionButton .eachSecButton {
    font-size: 14px;
  }
  .manageUserAccountComponent .userAllSectionForUser .eachSection {
    flex-direction: column-reverse;
    padding: 10px;
  }
  .manageUserAccountComponent .userAllSectionForUser .eachSection .sectionAccordingButton,
  .manageUserAccountComponent .userAllSectionForUser .eachSection .aboutUser {
    width: 100%;
    margin: 20px 0;
  }
}
/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/screen/ContactUs/ContcatUs.scss ***!
  \******************************************************************************************************************************/
.contactScreen .contactUsBackground {
  background-size: cover;
  flex-direction: column;
  background-position: center;
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
  background-image: url("https://designermall.nyc3.cdn.digitaloceanspaces.com/Images/contact-us/contact_Banner.jpeg");
}
.contactScreen .heading_contact_use {
  text-align: center;
  max-width: 700px;
  margin: 3rem auto;
}
.contactScreen .heading_contact_use div {
  font-family: "Bebas Neue Pro Light";
}
.contactScreen .allContent {
  width: 1500px;
  max-width: 85%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.contactScreen .allContent .contactEmailContentBlock, .contactScreen .allContent .contactEmailImage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1rem 0;
}
.contactScreen .allContent .contactEmailContent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.contactScreen .allContent .contactEmailContent .contactEmailContentBlock {
  width: 50%;
  padding: 20px;
}
.contactScreen .allContent .contactEmailContent .contactEmailContentBlock .eachTopic {
  margin: 10px 0;
  font-weight: 400;
  font-family: "Bebas Neue Pro Light";
}
.contactScreen .allContent .contactEmailContent .contactEmailContentBlock .eachTopic span {
  font-family: "Bebas Neue Pro Bold";
  display: inline-block;
  font-weight: 600;
  margin-right: 2px;
}
.contactScreen .allContent .contactEmailContent .contactEmailContentBlock .eachTopic.email {
  text-decoration: underline;
}
.contactScreen .allContent .contactEmailContent .contactEmailImage {
  width: 50%;
  height: 100%;
}
.contactScreen .allContent .contactEmailContent .contactEmailImage img {
  width: 100%;
  height: auto;
  display: block;
}
.contactScreen .contactFooter_text {
  text-align: center;
  font-family: "Bebas Neue Pro Light";
  margin: 2rem 0;
}

@media (max-width: 1100px) {
  .contactScreen .heading_contact_use {
    padding: 10px;
  }
  .contactScreen .allContent .contactEmailContent {
    flex-direction: column;
  }
  .contactScreen .allContent .contactEmailContent .contactEmailImage,
  .contactScreen .allContent .contactEmailContent .contactEmailContentBlock {
    width: 100%;
    padding: 10px;
  }
  .contactScreen .allContent .contactEmailContent.reverse {
    flex-direction: column-reverse;
  }
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Utils/Toast/GlobalToast/GlobalToast.scss ***!
  \*************************************************************************************************************************************************/
.globalToast {
  border-radius: 10px;
  position: fixed;
  background-color: #262626;
  font-size: 14px;
  padding: 20px 10px;
  z-index: 10001;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.globalToast .toast_close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.globalToast .toast_close svg {
  height: 15px;
}
.globalToast .message_icon {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.globalToast .message_icon svg {
  height: 20px;
}
.globalToast .message_icon .message {
  margin-left: 10px;
  width: 90%;
}
.globalToast .message_icon .message .header_toast {
  color: #fff;
  font-size: 16px;
  margin-bottom: 10px;
}
.globalToast .message_icon .message .message_toast {
  color: #eee;
  font-size: 14px;
  margin: 0;
}
@media (min-width: 501px) {
  .globalToast {
    top: 70px;
    right: -10px;
    min-width: 250px;
    max-width: 400px;
    animation: slideInRight 0.5s ease-in-out forwards;
  }
}
@media (max-width: 500px) {
  .globalToast {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    animation: slideInTop 0.5s ease-in-out forwards;
  }
}

@keyframes slideInRight {
  from {
    right: -100%;
    opacity: 0;
  }
  to {
    right: 10px;
    opacity: 1;
  }
}
@keyframes slideInTop {
  from {
    top: -100%;
    opacity: 0;
  }
  to {
    top: 50px;
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    right: 20px;
    opacity: 1;
  }
  to {
    right: -100%;
    opacity: 0;
  }
}
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/ShopaholicCompetition/TimerComponent.module.css ***!
  \*****************************************************************************************************************/
#GqYQcsqOGuLBlaHvwASR {
    position: fixed;
    /* top: 75px; */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1010;

    background: var(--Linear);
    border-radius: 0px 0px 25px 25px;
    box-shadow: 4px 4px 30px 0px rgba(0, 0, 0, 0.25);
    padding: 1rem 3rem;

    font-family: "Bebas Neue Pro Bold";
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;

    span {
        display: block;
        font-size: 3rem;
    }
}

@media (max-width: 840px) {
    #GqYQcsqOGuLBlaHvwASR {
        border-radius: 0px 0px 15px 15px;

        font-size: 0.9rem;
        padding: 0.5rem 1.5rem;

        span {
            display: block;
            font-size: 1.5rem;
        }
    }    
}
/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/ShopaholicCompetition/InstructionsScreen.module.css ***!
  \******************************************************************************************************************/
#tqrA3xEm9XoLij7TZZLz {
    max-width: 1500px;
    width: 85%;
    margin: 2rem auto;
}

#hDpey5802zZYIeIi6uzi {
    text-align: center;
    color: black;
    font-size: 3.2rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    word-wrap: break-word;
    margin-top: 8vh;
}

h1,
h2 {
    line-height: 100%;
}

#lZOMbvULEG1noAVpX4eH {
    text-align: center;
    margin: 8vh 0;
    font-size: 1.2rem;
    font-family: "Roboto Condensed";

    #X9tjjJ8z8BUJrSMgPq77 {
        font-weight: 600;

        #QotITzMMjild7BvxHS4C {
            font-size: 1.75rem;
        }

        #jc7AnZSw8CdE7ybxZx6b {
            font-size: 2rem;
        }
    }

    #wxlQ5JnnR3fxtbLfyY2Q {
        margin: 5vh 0 0;
        font-weight: 600;
        font-size: 1.2rem;
        text-transform: uppercase;
    }

    #W05pf9CHteRgO6pYwkFR {
        margin: 0 0 4vh;
        font-weight: 600;
        font-size: 4rem;
        height: fit-content;
        color: var(--Purple, #A400CE);
    }
}

#VD6HZ0iPPauNE3OfeM_D {
    text-align: center;
    font-family: "Roboto Condensed";
    font-size: 1.5rem;

    #MbQ0gqA3GfHYKVcWIRyx {
        margin: 0 auto;
        background: var(--Linear);
        padding: 5px;
        width: fit-content;

        #lYbCERx1Onb4UHBV2zJM {
            padding: 3vh 5vh;
            background: white;
            font-family: "Bebas Neue";
            font-size: 2.5rem;
            font-weight: 500;
            border: 5px solid var(--Linear);
        }
    }
}

.pRxyJtR4kzi8fmOZ4ZTc {
    margin: 3vh 0;
    font-size: 1.5rem;
}

#IY0Gw6hx6INwtBUQ2mpg {
    margin: 0 auto;
    max-width: 600px;

    &>div {
        display: flex;
        align-items: center;
        gap: 1rem;

        &>p {
            font-family: "Roboto Condensed";
            font-size: 1.8rem;
            font-weight: 600;
            text-align: left;
        }
    }
}

#Q7zwPepMj7xwi82fdplp {
    background: var(--Linear);
    border: none;
    border-radius: 10px;
    height: 10px;
}

#DxYrdLa_xyB_WiScF7X1 {
    margin: 1rem auto;
    max-width: 600px;
    display: flex;
    justify-content: center;
    gap: 1rem;

    &>div {
        display: flex;
        align-items: center;
        gap: 1rem;

        &>div {
            font-family: "Roboto Condensed";
            font-size: 1.8rem;
            font-weight: 600;
            text-align: left;
        }
    }
}

#MpydcKsrsHZsdPd6S8uc {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem auto;
    text-align: left;

    & span {
        font-size: 2rem;
    }
}

#vi7SPwl9qMCJXbCN6ew_ {
    font-size: 1.5rem;
    font-family: "Roboto Condensed";
    font-weight: 400;
    text-align: center;
    margin: 0 auto 2rem;
    display: block;
}

#KQLzrXUb8T93QbfO19LR {
    display: flex;
    gap: 1rem;
    text-align: left;
    align-items: center;
    font-size: 1.2rem;
    line-height: 150%;
    margin: 10vh 0;

    &>div {
        width: 50%;
    }
}

sup {
    font-size: 0.6em;
}

.kB8hf7Vebss4Wixjsqw3 {
    font-size: 1.15rem;
    font-family: "Roboto Condensed";
    font-weight: 400;
}

.zgE9iPRVTanYxDqde8jt {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.zgE9iPRVTanYxDqde8jt>img {
    width: 5rem;
}

.VBFpbvutzNzfk8FEi0wI {
    font-size: 2.5rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    margin: 0;
}

._X4iaI8bOtrnj8piMIeU {
    font-family: "Roboto Condensed";
    font-weight: 900;
}

.Fgicwjr6zWpCUsKPBgCy {
    color: var(--Purple, #A400CE);
}

.ym7qJYckRp6ZyEllKO5Z {
    font-family: "Roboto Condensed";
    font-style: italic;
    font-weight: 400;
}

.NgKnxZ1QfRYkfPIv6ev2 {
    --circle-url: "";
    list-style-image: var(--circle-url);
}

.z5shmUyV2t8zeIbhDmNz {
    list-style-image: none;
    list-style-type: disc;
    font-weight: 400;
}

.NgKnxZ1QfRYkfPIv6ev2>li {
    margin: 1rem 0;
    padding-left: 0.5rem;
}

#SXUMRvrPP6X6ZLXXcBjL {
    background: var(--Linear);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
    border: 0;
    text-align: center;
    padding: 1rem clamp(1.5rem, 10vw, 140px);
    margin: 0 auto;
    font-family: "Bebas Neue";
    font-weight: 700;
    font-size: 1.5rem;
    width: fit-content;
    cursor: pointer;
}

#QCReoD5eGakD6dC8oY29 {
    margin: 5vh 5vw;
    display: flex;
    gap: 2rem;
    align-items: center;

    hr {
        width: 100%;
        background-color: black;
        border: none;
        height: 1px;
    }

    h6 {
        padding: 0;
        margin: 0;
    }
}

h6 {
    font-size: 1.2rem;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #kB8hf7Vebss4Wixjsqw3 {
        display: grid;
        grid-template-columns: 2.5fr 5fr;
        column-gap: 5vw;
        row-gap: 5vh;
        margin-left: 8vw;
        margin-bottom: 10vh;
    }

    #kB8hf7Vebss4Wixjsqw3>img {
        width: 80%;
        justify-content: end;
        justify-self: end;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #SXUMRvrPP6X6ZLXXcBjL {
        width: auto;
        display: block;
    }

    #IY0Gw6hx6INwtBUQ2mpg>div {
        display: block;
    }

    #DxYrdLa_xyB_WiScF7X1 {
        display: block;
    }

    #MpydcKsrsHZsdPd6S8uc {
        display: block;
    }
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    #tqrA3xEm9XoLij7TZZLz {
        width: 90vw;
    }

    #kB8hf7Vebss4Wixjsqw3 {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        justify-content: center;
        margin-bottom: 10vh;
    }

    .DYjOUDQ0Ia6UvjaTXf1g {
        display: block;
        width: 80%;
        max-width: 300px;
        margin: 5vh auto;
    }

    #KQLzrXUb8T93QbfO19LR {
        display: block;

        &>div {
            width: 100%;
        }
    }
}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/ShopaholicCompetition/TitleComponent.module.css ***!
  \*****************************************************************************************************************/
#ypyIL8KkyAUKkB4xtPUg {
    margin-top: 10vh;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.ya_qHo1GvhERYf2NO_Fu {
    border: none;
    height: 10px;
    width: 100%;
    min-width: 20px;
}

#S1ZstgTY9LgikB3C4njr {
    background: var(--LinearLeftHalf);
}

#zQzaBRhrcGUBmDSrNisv {
    background: var(--LinearRightHalf);
}

#tmWJwtgP0kDbNXhPyIKG {
    font-size: 3rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    word-wrap: break-word;
    text-align: center;
}

@media (max-width: 767.98px) {
    #tmWJwtgP0kDbNXhPyIKG {
        width: min-content;
    }
}
/*!**********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/ShopaholicCompetition/CompetitionRoundBox.module.css ***!
  \**********************************************************************************************************************/
#XxuMQqP8U1TAd3Syp0PE {
    margin-top: 8vh;
    position: relative;
}

#yNne5_6se0IwHBdSW8Hx {
    box-shadow: 0px 11px 24px 0px rgba(0, 0, 0, 0.10);
    padding: 3vh 3vw;
}

#YMnBC0qiGHl8TSryCAbL {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40%);

    border-radius: 35px;
    background: var(--Linear);
    padding: 0.3rem 2rem;

    font-family: "Bebas Neue";
    font-size: 2rem;
    font-weight: 700;
}

#hNrODMsYUTthGjXE6_Db {
    margin: 5vh 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-content: center;
    gap: 3vw;
}

#hNrODMsYUTthGjXE6_Db>.eeizeZgNpv9N_NV89TPW:nth-child(odd) {
    justify-self: end;
}

.eeizeZgNpv9N_NV89TPW {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    padding: 1rem;
    width: fit-content;
    text-decoration: none;
    color: black;

    font-family: "Bebas Neue Pro Light";
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
}

.eeizeZgNpv9N_NV89TPW>.Kk7bsg_VXnRnEW2oJTCN {
    font-family: "Bebas Neue Pro Bold";
    font-size: 3.5rem;
}

.eeizeZgNpv9N_NV89TPW .mfSWHNe2wvJd1CmcPiiX {
    font-size: 2.5rem;
    font-weight: 700;
}

#tfhOXPpZ5awjjQj3RM22 {
    display: grid;
    grid-template-columns: 2.5fr 3.5fr 4fr 2fr;
    gap: 1rem;
    margin: 7vh 0;
}

#tfhOXPpZ5awjjQj3RM22>div {
    border-left: 2px solid rgba(0, 0, 0, 0.1);
    width: fit-content;
    padding: 4px 0 4px 1rem;

    font-size: 1.1rem;
    font-family: "Bebas Neue Pro Light";
    font-weight: 400;
    text-transform: uppercase;
}

#tfhOXPpZ5awjjQj3RM22 .bRRpVAXc_SjFZ7pYZh3z {
    font-family: "Bebas Neue Pro Bold";
    display: block;
    padding-top: 5px;
}

#F6OqPj5lo3NYRlpTFf9k {
    border: none;
    height: 3px;
    background-color: black;
}

#d8NZNnJFa7neZALsy2bm {
    font-family: "Bebas Neue Pro Bold";
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 5vh;
}

#_zq0uJRpnCghS1Qie4ux {
    margin: 5vh 2vw;
}

#_zq0uJRpnCghS1Qie4ux>div {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;

    font-family: "Bebas Neue Pro Bold";
    font-size: 1.1rem;
    margin: 1rem 0;
}

#_zq0uJRpnCghS1Qie4ux .dvFXuL5hpiGFaaAP74cD {
    cursor: pointer;
    width: stretch;
}

#_zq0uJRpnCghS1Qie4ux img {
    max-width: 150px;
    height: auto;
}

.r1QfY3gHRfsna7huqzyl {
    font-family: "Bebas Neue Pro Light";
    font-weight: 400;
    font-size: 1rem;
}

.Kvq1AOy5PzfmDwqduSn2 {
    background: var(--black, #000);
    padding: 0.4rem 2rem;
    border: none;
    font-family: "Bebas Neue Pro Light";
    color: white;
    text-transform: uppercase;
    width: fit-content;
    cursor: pointer;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    #tfhOXPpZ5awjjQj3RM22 {
        display: grid;
        grid-template-columns: 5fr 5fr;
        gap: 1rem;
        margin: 7vh 0;
    }
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    #_zq0uJRpnCghS1Qie4ux {
        margin: 4vh 0;
    }

    #_zq0uJRpnCghS1Qie4ux>div {
        display: grid;
        /* grid-template-columns:repeat(4, 1fr) ; */
        align-items: center;
        gap: 0.4rem;

        font-family: "Bebas Neue Pro Bold";
        font-size: 1rem;
    }

    #_zq0uJRpnCghS1Qie4ux .dvFXuL5hpiGFaaAP74cD {
        cursor: pointer;
        width: stretch;
    }

    #_zq0uJRpnCghS1Qie4ux img {
        width: 50px;
        height: auto;
    }

    .r1QfY3gHRfsna7huqzyl {
        font-family: "Bebas Neue Pro Light";
        font-weight: 400;
        font-size: 0.75rem;
    }

    .Kvq1AOy5PzfmDwqduSn2 {
        padding: 0.4rem 0.4rem;
    }

    .eeizeZgNpv9N_NV89TPW {
        padding: 0.2rem;
        font-size: 1.3rem;
        text-align: center;

        &>.Kk7bsg_VXnRnEW2oJTCN {
            font-size: 2rem;
        }

        & .mfSWHNe2wvJd1CmcPiiX {
            font-size: 1.5rem;
        }
    }
}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #XxuMQqP8U1TAd3Syp0PE {
        margin-top: 12vh;
    }

    #tfhOXPpZ5awjjQj3RM22 {
        display: block;
        gap: 1rem;
        margin: 7vh 0 7vh 5vw;
    }

    #tfhOXPpZ5awjjQj3RM22>div {
        margin-bottom: 1rem;
    }
}
/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/ShopaholicCompetition/SummaryScreen.module.css ***!
  \*************************************************************************************************************/
#IboAaZ3h0_vC1K8WWxvh {
    max-width: 1500px;
    width: 80vw;
    margin: 2rem auto;
}

#LqAPlzJpgsmVOVfsyJhW {
    max-width: 1500px;
    width: 80vw;
    margin: 2rem auto;
    min-height: 50vh;
}

#dIQRS3omWzH_5MQCobyB {
    margin: 2rem 0 1rem 0;
    border: 0.75px solid #555;
    padding: 2rem;
    border-radius: 20px;

    .j9R_UmYt0td8kkIhIoHd {
        text-align: center;
        color: #555;
    }

    .fcATUEu0qqyGneY87eI7 {
        border: 1px solid #000;
        padding: 10px 20px;
        cursor: pointer;
        width: fit-content;
        margin: 20px auto;

    }
}

#O9URigERWGLF77zszI9b {
    text-align: center;
    color: black;
    font-size: 3rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    word-wrap: break-word;
    margin: 8vh 0;
}

.FsLzLxNSY_GTRyaNcyyi {
    font-size: 2rem;
    font-family: "Bebas Neue";
    margin: 0;
}

.XzMn78ge1Vic5_bSr8l7 {
    font-family: "Roboto Condensed";
    font-weight: 900;
}

.KWxa2zZie3esqLXfwr5G {
    color: var(--Purple, #A400CE);
}

.Q7_Xm6M5V6SPBx1MFiag {
    font-family: "Roboto Condensed";
    font-style: italic;
    font-weight: 400;
}

#oVMorgHpVN9wHgcU0rLI {
    text-align: center;
    font-family: "Roboto Condensed";
    font-style: italic;
    font-weight: 300;
    margin: 7vh 0;
}

.hxyQWSBD4HCq7qkWPkom {
    --circle-url: "";
    list-style-image: var(--circle-url);
}

.cayoMQcDDjW_J1QIGZHr {
    list-style-image: none;
    list-style-type: disc;
    font-weight: 400;
}

.hxyQWSBD4HCq7qkWPkom>li {
    margin: 1rem 0;
    padding-left: 0.5rem;
}

.qkUCvcP8w_N6C2eLcYo1 {
    background: var(--Linear);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
    border: 0;
    text-align: center;
    padding: 1rem;
    font-family: "Bebas Neue";
    font-weight: 700;
    font-size: 1.5rem;
    width: 28vw;
    cursor: pointer;
    margin: 5vh auto;
    display: block;
}

._6N6OhjU40scxmBmH3PQ {
    text-align: center;
    font-size: 1.25rem;
    font-family: "Roboto Condensed";
    font-weight: 300;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #GJ03nqTVHfXJKR3wq2fV {
        display: grid;
        grid-template-columns: 3fr 5fr;
        column-gap: 2vw;
        row-gap: 5vh;
        margin-left: 10vw;
    }

    #GJ03nqTVHfXJKR3wq2fV>img {
        width: 80%;
        justify-content: end;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .qkUCvcP8w_N6C2eLcYo1 {
        width: 100%;
    }
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    #IboAaZ3h0_vC1K8WWxvh {
        width: 90vw;
    }

    #LqAPlzJpgsmVOVfsyJhW {
        width: 100vw;
        margin: 2rem auto;
        min-height: 50vh;
    }

    #GJ03nqTVHfXJKR3wq2fV {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        justify-content: center;
    }
}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/ShopaholicCompetition/LeaderboardScreen.module.css ***!
  \*****************************************************************************************************************/
#mBxpMiR9Xik2EILBo5rT {
    position: relative;
    margin: 12vh auto;
    max-width: 1500px;
    width: 80vw;
    min-height: 50vh;
}

#gNaJg1ssZoF0ytPEkEqQ {
    box-shadow: 0px 11px 24px 0px rgba(0, 0, 0, 0.10);
    padding: 3vh 3vw;
    font-family: "Bebas Neue Pro Bold";
}

#bLoSdpqs9BULKga2ynbu {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -40%);

    border-radius: 50px;
    background: var(--Linear);
    padding: 1rem 4rem;

    font-family: "Bebas Neue";
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
}

.JaBkpsBhr2TPwwjwBzkZ {
    display: grid;
    grid-template-columns: 1fr 5fr 2fr 4fr;
    gap: 1rem;
    font-size: 1.1rem;
}

.zk9kofdW_wBknDVPeYKn {
    border-left: 2px solid rgba(0, 0, 0, 0.1);
    padding: 4px 1rem 4px 0.5rem;
    margin: 8vh 0 4vh;
    text-transform: uppercase;
}

#hrZBIgtHkvo2wbi9JORt {
    border: none;
    height: 3px;
    background-color: black;
}

.m8R_SQAUDTi44p3icDaj {
    margin: 1.5rem 0;
    padding-left: 1rem;
    align-items: center;
}

.m8R_SQAUDTi44p3icDaj:nth-of-type(-n+4) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background: var(--Smoky, #F5F5F5);
}

.HE6ZTo53I9QVxc0imlc2 {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.FW53ybEeNi9LTr3GRqLp {
    width: 1.5rem;
    margin-left: -0.5rem;
}

.qwFGrnY6hhNSkpCHczN5 {
    width: 1rem;
}

#IIJLlEl3mVzncnN1Z65v {
    display: flex;
    justify-content: center;
    gap: 3vw;
    margin: 7vh auto;

    button {
        padding: 0.5rem 5.5rem;
        font-family: "Bebas Neue";
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 0.125rem;
        border-radius: 0;
        border: 2px solid black;
        cursor: pointer;
    }

    button:nth-of-type(1) {
        background: white;
    }

    button:nth-of-type(2) {
        background: black;
        color: white;
    }
}

/* Templates to be copied over to other pages: DO NOT DELETE */

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    #bLoSdpqs9BULKga2ynbu {
        padding: 0.5rem 2rem;
        font-size: 1.5rem;
    }

    #IIJLlEl3mVzncnN1Z65v {
        display: block;

        button {
            display: block;
            margin: 1.5rem auto;
        }
    }
}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #mBxpMiR9Xik2EILBo5rT {
        width: 100vw;
    }
}
/*!*********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/Shared/StartEarningComponent.module.css ***!
  \*********************************************************************************************************/
#mwXRHgbJL5VEMiBnVAlE {
    font-family: "Roboto Condensed";
    background: rgba(245, 245, 245, 0.50);
    padding: 3rem 10vw;
    text-align: center;
    margin: 10vh 0;

    h4 {
        font-family: "Bebas Neue Pro Bold";
        font-size: 1.7rem;
        text-transform: uppercase;
        margin: 0;
    }

    p {
        font-size: 1.2rem;
        font-weight: 400;
    }

    button {
        background-color: black;
        padding: 0.7rem 2rem;
        color: white;
        border: 0;
    }
}
/*!*********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/EarnFreeExit/EarnFreeExitScreen.module.css ***!
  \*********************************************************************************************************/
.z_5L1_JR87TNrlaR3wkn {
    max-width: 1500px;
    width: 80vw;
    margin: 2rem auto;
}

button {
    cursor: pointer;
}

#jWSqp0vvOnbvPLJlrNvZ {
    font-family: "Bebas Neue Pro Bold";
    font-size: 3rem;

    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    justify-content: center;
    gap: 1rem;

    width: fit-content;
    margin: 8vh auto;
}

#KXHNkIS187W2O0MNft9Q {
    font-size: 14rem;
    line-height: 90%;
}

#BwOSZ7DfygeIbTGAawrg {
    font-size: 4.4rem;
    width: min-content;

    div {
        font-size: 6rem;
    }
}

#e04hj3icpbUK8S2GGZsZ {
    grid-area: 2 / 1 / 3 / 5;
    text-align: center;
}

#_tMESHL28Dxjyez0dTYw {
    width: 55rem;
    max-width: 100%;
    height: auto;
    margin: 10vh auto;
    text-align: center;

    position: relative;
}

#_tMESHL28Dxjyez0dTYw>div {
    position: absolute;
    top: 33.5%;
    left: 7%;
    width: 22%;
    height: 2.5%;

    a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.f5ZiZY5pDqcj6clDQ_Ew {
    display: flex;
    align-items: center;
    margin: 2rem 0;

    font-family: "Bebas Neue Pro Bold";

    .ffNIvJ82mBMbql2wf_AQ {
        font-size: 2.5rem;
        padding: 1rem;
        background: var(--black, #000);
        color: var(--white, #fff);
        height: fit-content;
    }

    .S87U2MtgBoNd8O7Kt7rY span:nth-child(1) {
        font-size: 1.7rem;
        display: block;
    }

    .S87U2MtgBoNd8O7Kt7rY span:nth-child(2) {
        font-family: "Roboto Condensed";
        font-size: 1.2rem;
        font-style: italic;
        font-weight: 400;
    }
}

.IsdZRqdsqNW13cqCIrKI {
    border-radius: 12px;
    color: white;
    width: fit-content;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    height: fit-content;
    justify-self: end;
}

#gqTLOfVVF5ZRVSXSmxBI {
    width: fit-content;
    margin: 0 auto;
}

#cbPbEJ2hpPmfR_psgUjc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.OE2oHg8viZ5qUOjHT56_ {
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #FFF;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.10);
    padding: 1rem 1rem 4rem;
    position: relative;

    hr {
        background: rgba(0, 0, 0, 0.10);
        border: 0;
        height: 1px;
    }

    h5 {
        font-size: 1.5rem;
        margin: 0.5rem 0 0.5rem 0.5rem;
    }

    li {
        margin-bottom: 0.5rem;
    }

    button {
        position: absolute;
        bottom: 1.5rem;
        width: calc(100% - 2rem);
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        background: #EDEDED;
        padding: 0.5rem 0.3rem;
    }

    .kKYSsmPYFbrOUmB2ES30 {
        background: var(--black, #000);
        color: white;
    }
}

.WGtHUbwFow4BuXKn1HJ_ {
    background: linear-gradient(3deg, rgba(85, 255, 233, 0.05) 24.7%, rgba(102, 253, 227, 0.05) 27.33%, rgba(147, 249, 214, 0.05) 32.59%, rgba(219, 243, 192, 0.05) 39.88%, rgba(255, 241, 182, 0.05) 43.22%, rgba(252, 232, 183, 0.05) 44.99%, rgba(246, 208, 186, 0.05) 47.77%, rgba(236, 170, 190, 0.05) 53.79%, rgba(223, 117, 197, 0.05) 59.61%, rgba(205, 49, 205, 0.05) 64.93%, rgba(188, 0, 211, 0.04) 67.96%, rgba(176, 0, 208, 0.04) 69.47%, rgba(156, 0, 204, 0.04) 72.26%, rgba(127, 0, 199, 0.04) 74.29%);
}

.UULv4JkUwMzN5XiLkLBd {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    #cbPbEJ2hpPmfR_psgUjc {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    #jWSqp0vvOnbvPLJlrNvZ {
        font-size: 2rem;
    }

    #KXHNkIS187W2O0MNft9Q {
        font-size: 9rem;
    }

    #BwOSZ7DfygeIbTGAawrg {
        font-size: 2.9rem;

        div {
            font-size: 4rem;
        }
    }
}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #z_5L1_JR87TNrlaR3wkn {
        width: 90vw;
    }

    .UCBkoEFP2rjjEoRBnEBj {
        display: block;
        width: 70%;
        height: auto;
        margin: 0 auto;
    }

    .V2NBwWfpoQetmZjcAY_O {
        font-family: "Roboto Condensed";
        font-size: 1.1rem;
        font-weight: 300;
        line-height: 120%
    }

    .KPY8ywMZPEhQpjACZ5wA {
        border: none;
        height: 3px;
        background-color: #000;
        border-radius: 5px;
        margin: 5rem 0;
    }

    .NkCGZJqKU4TRJQV8P0UV {
        background: var(--Linear);
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
        border: 0;
        text-align: center;
        padding: 0.5rem;
        font-family: "Bebas Neue";
        font-size: 1.5rem;
        width: 70vw;
        margin: 2rem 0 0 10vw;
        cursor: pointer;
    }

    #cbPbEJ2hpPmfR_psgUjc {
        grid-template-columns: 1fr;
    }
}
/*!*****************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/AboutUs/AboutUs.module.css ***!
  \*****************************************************************************************/
#vQOWeVHBnwdhBLCkL1Uv {
    margin: 10vh 0 13vh;

    h1{
        font-family: "Bebas Neue Pro Bold";
    }
}

.SKC57oJxdOs7JriUF8e7 {
    margin: 5vw;

    h3 {
        font-size: 1.8rem;
        text-transform: uppercase;
        text-align: start;
        font-family: "Bebas Neue Pro Bold";
    }
    p {
        font-size: 1rem;
        font-weight: 300;
        font-family: "Bebas Neue Pro Light";
    }

    /* To vertically center the text */
    display: flex;
    flex-direction: column;
}

b {
    font-family: "Bebas Neue Pro Bold";
}

#YP_QwKkV3ZcjQzVEiR48 {
    margin: 10vh 8vw;
    font-family: "Bebas Neue Pro Normal";
    font-size: 2rem;
    text-transform: uppercase;
    text-align: center;

    span {
        color: #328BA1;
    }
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}
/*!*************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/component/Shared/HeightAdjustableSideMedia.module.css ***!
  \*************************************************************************************************************/
.tjrG_6APfs0Ra_DfhfHS {
    flex: 3 0 0;
    width: 100%;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.qUNfpnP4gsxMZKYyNWdJ {
    box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.1);
}

.Jy5ESssVZ4Y_5yNCT4xm {
    flex: 3 0 0;
    align-self: center;
}

#Mrko8Vo023GTADtdWfhj {
    display: block;
    align-self: stretch;
    justify-content: flex-start;
    height: 100%;
    align-items: stretch;
    min-height: 40vh;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .tjrG_6APfs0Ra_DfhfHS {
        margin: 0;
    }

    #Mrko8Vo023GTADtdWfhj {
        display: flex;
    }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}
/*!*******************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/Policies/Policies.module.css ***!
  \*******************************************************************************************/
#YIC8Ku9iKTceBfkd6id4 {
    background-repeat: no-repeat; /* Prevents repeating */
    background-position: right top; /* Aligns to the right side */
    background-size: 100%; /* Keeps the original size of the image */
}

#SHpFMsFH7j7KLo3D15x9 {
    max-width: 1500px;
    width: 85%;
    margin: 10vh auto;
    line-height: 150%;
}

h2.iXopsBaUhM2XVzA15dxn {
    font-family: "Bebas Neue Pro Bold";
    text-transform: uppercase;
    font-size: 2rem;
    margin: 5rem 0 0.5rem;
}

h6.QNOzx099bMQ1TX6COjtm {
    margin: 0;
    font-family: "Roboto Condensed";
    font-weight: 300;
    font-size: 0.8rem;
}

h5 {
    font-family: "Roboto Condensed";
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 0rem;
}

div.Xeroxr0meSVwLXqnPVdn {
    margin: 2rem 0 2rem 4vw;
    border-bottom: 0.8px solid rgba(31, 31, 31, 0.30);

    div.HDsZgXklwxnKtUCZTAOv {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
    }

    button {
        border: none;
        background-color: transparent;
        height: fit-content;
        align-self: flex-end;
        padding-bottom: 0.5rem;
    }
}

.ldosgKJ1o9UZFJyd4Mui {
    margin: 1rem;
}

b {
    font-family: "Bebas Neue Pro Bold";
}

#bzjMojozPdivE7pjfEP0 {
    margin: 7vh 0;
    text-align: center;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #SHpFMsFH7j7KLo3D15x9 {
        width: 95%;
    }
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/component/Home/FollowUsOnSocialMedia/FollowUsOnSocialMedia.scss ***!
  \**************************************************************************************************************************************************************/
.followUsOnSocialMedia {
  text-align: center;
  background-color: #eee;
  padding: 2rem 0;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent {
  width: 1500px;
  max-width: 90vw;
  margin: 0 auto;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .listOfListOfMedia {
  padding: 0.5rem 0 0.5rem 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .listOfListOfMedia .eachSocialMedia {
  cursor: pointer;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .listOfListOfMedia .eachSocialMedia img {
  min-width: 30px;
  height: 30px;
  padding: 5px;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent small {
  display: block;
  margin: 5px 0px;
  color: #555;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .subscribeToTheNewsLetter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 90%;
  margin: 0px 10px;
  padding: 0.5rem 0 0.5rem 0;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .subscribeToTheNewsLetter input[type=email] {
  background-color: #fff;
  border: 1px solid #aaa;
  color: #000;
  padding: 8px 3px;
  width: 400px;
  border-radius: 3px;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .subscribeToTheNewsLetter input[type=email]::placeholder {
  color: #aaa;
  font-family: "Bebas Neue Pro Normal";
  text-transform: uppercase;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .subscribeToTheNewsLetter input[type=email]:focus {
  outline: none;
  border-bottom-color: #000;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .subscribeToTheNewsLetter div {
  cursor: pointer;
  padding: 8px 16px;
  background-color: #000;
  color: #fff;
  border-radius: 3px;
}
.followUsOnSocialMedia .followUsOnSocialMediaContent .subscribeToTheNewsLetter div:hover::after {
  background-color: #000;
}
/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/PerksAndBonuses/PerksAndBonusesScreen.module.css ***!
  \***************************************************************************************************************/
#oxMgJj6SR1LbDn0iq28n {
    max-width: 1500px;
    width: 85%;
    margin: 2rem auto;
}

._U8JxO9eM_RNk9jySwzg {
    text-align: center;
    color: black;
    font-size: 2.7rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    word-wrap: break-word;
    margin-top: 8vh;
}

.aFAru1vlVZorESvYGIhw {
    margin: 3vh 0;
    padding: 25px 50px;
    border: 1px solid #000;

    .EMvVn9cn7SczlgLBVhZO {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
    }

    .bB1XtrWwISNvHwBQaex5 {
        display: flex;
        padding: 0px 10px;
        justify-content: space-between;
        align-items: center;
        flex: 1 0 0;
    }

    .U5XylX01iAGCu7rDaTb_ {
        margin: 0;
        display: block;
        font-weight: bold;
        font-size: 1.2rem;
    }

    .YKGkNj5qkrStUGu4wt6O {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 1.1rem;
    }

    .VrZjgydwSi7r8g3xu80Z>svg {
        cursor: pointer;
        width: 20px;
        height: 20px;
    }

    .VrZjgydwSi7r8g3xu80Z,
    .HcJaHF_KX7etRl94ly5P,
    .HcJaHF_KX7etRl94ly5P>div,
    .HcJaHF_KX7etRl94ly5P>div>div,
    .HcJaHF_KX7etRl94ly5P>div>div>div {
        display: inline;
    }

    .VrZjgydwSi7r8g3xu80Z,
    .HcJaHF_KX7etRl94ly5P {
        margin-left: 10px;
    }
}

#tyWo_bKHRucPTMz8N7vg {
    background: var(--Linear);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Roboto Condensed";
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 900;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
}

#CcMOx4m9_BXkkYJvtOUY {
    display: flex;
    gap: 3vw;
}

#CcMOx4m9_BXkkYJvtOUY>div {
    border: 3px solid var(--black, #000);
    text-align: center;
    width: 100%;
}

#CcMOx4m9_BXkkYJvtOUY>div>h6 {
    font-family: "Roboto Condensed";
    font-size: 1.1rem;
    margin: 3vh 0 0;
}

#CcMOx4m9_BXkkYJvtOUY>div>p {
    margin: 1vh 0 3vh;
    font-size: 2.2rem;
    font-weight: 700;
    background: var(--Linear-blue);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#LpjlAq6hBaa1VflUWNBD {
    text-align: center;
    margin: 8vh 0 7vh;
}

/* Styles to display custom progress bar */
#FlmR_XoxKz2XDWqdIyQF {
    position: relative;
}

progress {
    width: 100%;
    appearance: none;
}

progress::-webkit-progress-bar {
    background-color: #eee;
    height: 26px;
    border-radius: 50px;
}

progress::-webkit-progress-value {
    background: var(--Linear-blue);
    height: 26px;
    border-radius: 50px;
}

#amNcox8WkA5U9pDV7wfa {
    padding: 5px;
    background: var(--Linear-blue);
    border-radius: 50%;

    position: absolute;
    top: 60%;
    left: 0;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease;
}

#amNcox8WkA5U9pDV7wfa>div {
    border: 5px solid #fff;
    width: 90px;
    height: 90px;
    background: var(--Linear-blue);
    border-radius: 50%;

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

    font-family: "Roboto Condensed";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

#uX_pkIoV7VmsFyUbKW7m {
    display: flex;
    justify-content: space-between;
    margin: 3vh 0 12vh;
    font-size: 1.2rem;
}

/* Min Width queries */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* Max Width queries */

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    #oxMgJj6SR1LbDn0iq28n {
        width: 92%;
    }

    .aFAru1vlVZorESvYGIhw {
        padding: 10px;

        .U5XylX01iAGCu7rDaTb_ {
            font-size: 1.1rem;
        }

        .YKGkNj5qkrStUGu4wt6O {
            font-size: 1rem;
        }

        .U5XylX01iAGCu7rDaTb_ {
            margin: 3vh 0 0;
        }
    }

    #CcMOx4m9_BXkkYJvtOUY {
        display: block;

        &>div {
            margin: 3vh 0;
        }
    }

    progress::-webkit-progress-bar,
    progress::-webkit-progress-value {
        height: 16px;
    }

    #amNcox8WkA5U9pDV7wfa {
        padding: 3px;
    }

    #amNcox8WkA5U9pDV7wfa>div {
        border: 3px solid #fff;
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}
/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/MillionDollarOpportunity/MillionDollarOpportunityScreen.module.css ***!
  \*********************************************************************************************************************************/
#vOq0sODROdLDTL5Y600g {
    max-width: 1500px;
    width: 85%;
    margin: 2rem auto;
}

.PrlRE2a_GEDRan120AOy {
    text-align: center;
    color: black;
    font-size: 2.7rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    word-wrap: break-word;
    margin-top: 8vh;
}

.DBEo5_myUdzXduj4K1zk {
    text-align: center;
    margin-bottom: 10vh;
}
/*!*****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/AffiliateProgram/AffiliateProgramScreen.module.css ***!
  \*****************************************************************************************************************/
#GdiYVngcO7DPB6UVgmrz {
    max-width: 1500px;
    width: 85%;
    margin: 7vh auto;
}

.Gav6jcTYjaCllGcdwTW8 {
    color: black;
    font-size: 2.7rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    word-wrap: break-word;
    margin-top: 8vh;
}

.RwKJbh6dmUblV_Rf0fvZ {
    text-align: center;
    margin-bottom: 10vh;
}

._NLVqhxfnCLRqgW7wnF7 {
    display: flex;
    align-items: center;
    gap: 50px;
    align-self: stretch;
    margin-left: 5vw;

    div:nth-child(1) {
        max-width: 250px;
    }

    h5 {
        font-size: 1.3rem;
    }

    ul {
        line-height: 1.7;
    }
}

/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    ._NLVqhxfnCLRqgW7wnF7 {
        flex-direction: column;
        gap: 0;
    }
}
/*!***********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/screen/Rewards/RewardsScreen.module.css ***!
  \***********************************************************************************************/
#hPH5JxzQd6b4uk6hl1Y_ {
    min-height: 50vh;
    max-height: 75vh;
    overflow: hidden;
}

#h6lTLHjQBB5yNDRqhRVg {
    max-width: 1500px;
    width: 85%;
    margin: 2rem auto;
}

#gnjPis7X1mC8L2s13w3m {
    text-align: center;
    color: black;
    font-size: 3.2rem;
    font-family: "Bebas Neue";
    font-weight: 500;
    word-wrap: break-word;
    margin-top: 8vh;
}

h1,
h2 {
    line-height: 100%;
}

.n2zI_VCiwdE2aoSar8eQ {
    color: #676B77;
    text-align: center;
    font-family: "Roboto Condensed";
    font-weight: 400;
}

#RLt8unK34czvkF7OtMcG {
    max-width: 800px;
    margin: 8vh auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;

    .HzP_fpXF94bQ2Ez0HQKf {
        border-radius: 20px;
        background: #102b3f;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        color: #fff;

        .O26VXqBS77hMPWpSwtS4 {
            padding: 0.8rem;
            border-radius: 0.8rem;
            background-color: white;
            aspect-ratio: 1/1;
        }

        span {
            font-size: 2rem;
        }
    }
}


#SkUdcXywFj9ing0eW5IE {
    display: flex;
    align-items: center;
    justify-content: space-between;

    div {
        display: flex;
        align-items: center;
    }

    select {
        border: none;
        font-weight: 600;
    }
}

#_v43V20birFqpulcj4lb {
    overflow-x: scroll;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    max-height: 80vh;

    #Vgp3ejApJSDpxWQw4_b2 {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;

        thead {
            background: #fafafc;
        }

        tr {
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        td,
        th {
            text-wrap: nowrap;
            text-align: left;
            padding: 1rem;
        }

        .q56MIbfW5yH0WvjT5soA {
            font-weight: 600;
        }

        .iFOAeqKWBmGGotZNRwpR {
            border-radius: 25px;
            padding: 0.3rem 0.75rem;
            width: fit-content;
        }

        .uSA34iOzSJ9k1EtGoEvA,
        .pXxBYehgv1UNZRgw4C8Y,
        .oPzM5DtWepse9bM_XUae,
        .zkG_P2MqPmhUoOOfNSGD {
            border-radius: 25px;
            padding: 0.3rem 0.75rem;
            width: fit-content;
            height: fit-content;
            font-size: 0.9rem;
        }

        .uSA34iOzSJ9k1EtGoEvA {
            background: #EEFBF2;
            color: #4D9C5A;
        }

        .pXxBYehgv1UNZRgw4C8Y {
            background: #efefef;
            color: #555555;
        }

        .oPzM5DtWepse9bM_XUae {
            background: #EEF3FB;
            color: #1F7BC5;
        }

        .zkG_P2MqPmhUoOOfNSGD {
            background: #FBF6EE;
            color: #723702;
        }
    }

    button {
        padding: 0.3rem 1.5rem;
        font-size: 0.8rem;
        border: 0;
    }

    .oulwdYfquAoNYjl_ua6A {
        color: white;
        background: var(--Dark-Dark, #111928);
        cursor: pointer;
    }

    .dFg0hdmRO6Q1IMCo3WQc {
        background: #E5E7EB;
        color: #6B7280;
        cursor: not-allowed;
    }
}

hr {
    background: rgba(0, 0, 0, 0.10);
    border: 0;
    height: 1px;
    margin: 7vh 0;
}

@media screen and (max-width: 768px) {
    #RLt8unK34czvkF7OtMcG {
        grid-template-columns: repeat(1, 1fr);
    }

}