@import url('https://fonts.googleapis.com/css2?family=Open Sans'); *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins' sans-serif;

    
}
:root{
  --primary-cariton-color: #13131A;
  --transparent-primary-cariton-color: #13131a17;
  --secondary-cariton-color:#D3AD7F;
  --light-cariton-color: #FBFCFF;
  --dark-cariton-color: #211F1F;

  --secondary-dark-cariton-color: #515151;
  --success-cariton-color: #008000;
  
  --page-bg-cariton-color: #F8F8F8;
}
*{
    font-family: 'Poppins', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: inherit;
    /* transition:all .2s linear; */
}
.modal-open .modal{
  background: none !important;
}
#main{
  min-height: 100vh;
  background-color: var(--page-bg-cariton-color) !important;
}

body{
    font-size: 14px;
    background-color: var(--light-cariton-color);
}
:root{
    --orange:#FFD07F;
    --text-color-1:#201d1d;
    --text-color-2:#201d1d;
    --bg-color-1:var(--light-cariton-color);
    --bg-color-2:#eee;
    --box-shadow:0 .5rem 1.5rem var(--dark-cariton-color);
}
@media (max-width: 768px) {
  #main, .store_container, .dashboard_waitlist, .store_section2, .store_section, .dashboard_favorites, .dashboard_cart, .dashboard_shared_order, .emercado_background_color_3{
    background-color: #ffffff!important;
  }
  .mobile-m-0{
    margin: 0 !important;
  }

  .mobile-p-0{
    padding: 0 !important;
  }

  .mobile-d-none{
    display: none;
  }
}

.emercado_landing_page_background {
  position: relative;
  background: var(--light-cariton-color);
  background-size: cover;
}

.required{
  color: #FE294D !important;
  font-weight: 800;
}

.validation-message {
  color: #FE294D;
  font-size: 0.8em;
  margin-top: 0.5em;
}

.form-control{
    font-size: 14px;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

.emercado_text_overflow{
  /* overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;*/
  line-height: 1.5; 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: capitalize;
  font-weight: 500;
}
.justify-content-around {
  justify-content: space-around;
}

.text_overflow{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emercado_color_1{
    color: var(--primary-cariton-color) !important;
}
.swal_notif_store_message{
  color: #212121;
  text-align: start;
  font-family: Poppins;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.18px;
}
.swal_notif_sub_store_message{
  color: var(--Gray-600, #535862);
  text-align: start;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
}
.notify_message_swal_reason{
  color: #DC6803;
  text-align: center;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.14px;
  padding-bottom: 12px;
}
.emercado_color_2{
  color: var(--dark-cariton-color) !important;
}

.emercado_price{
    color: var(--dark-cariton-color) !important;
}

.emercado_add_to_cart_btn,
.emercado_add_to_cart_btn1{
  color: var(--light-cariton-color) !important;
  background-color: var(--dark-cariton-color) !important;
}
.emercado_add_to_cart_btn:hover,
.emercado_add_to_cart_btn1:hover{
    background-color: var(--primary-cariton-color) !important;

}

/* .emercado_marker_address{
    position: absolute;
    top:3.5rem;
    left:2.3rem;
    color:var(--light-cariton-color);
    background: rgba(0,0,0,.5);
    border-radius: .5rem;
    font-weight: lighter;
    padding:.5rem 1.5rem;
  } */

.login_header {
    min-height: 7vh;
    padding: 0px 20px !important
}

a {
    color: var(--dark-cariton-color);
    text-decoration: none !important;
}

a:hover {
    color: var(--dark-cariton-color);
    text-decoration: underline;
}

.login-heading, .sign_up-heading {
font-weight: 300;
}

h1.error-404 {
    font-size: 100px;
    font-weight: 700;
    color: var(--dark-cariton-color);
    margin-bottom: 0;
    line-height: 150px;
}

.btn-orange{
    background-color: var(--dark-cariton-color);
}

.btn-orange:hover{
    background-color: var(--primary-cariton-color);
}

.btn-red{
    background-color: var(--dark-cariton-color);
}

.btn-red:hover{
    background-color: var(--dark-cariton-color);
}


/* Button Color */
/* violet */
.checkout_btn_color_1{
    background-color: var(--dark-cariton-color)!important;
    color: var(--light-cariton-color) !important;
  }
  .checkout_btn_color_1:hover{
    background-color: var(--primary-cariton-color) !important;
    color: var(--light-cariton-color) !important;
  }
  
  /* red */
  .checkout_btn_color_2{
    background-color: var(--primary-cariton-color) !important;
    color: var(--light-cariton-color) !important;
  }
  /* .checkout_btn_color_2:hover{
    background-color: #c82333 !important;
    color: var(--light-cariton-color) !important;
  } */
  
  /* gray */
  .checkout_btn_color_3{
    background-color: #6c757d !important;
    color: var(--light-cariton-color);
  }
  .checkout_btn_color_3:hover{
    background-color: #5a6268 !important;
    color: var(--light-cariton-color);
  }
  
  /* green */
  .checkout_btn_color_4{
    background-color: #28a745 !important;
    color: var(--light-cariton-color);
  }
  .checkout_btn_color_4:hover{
    background-color: #218838 !important;
    color: var(--light-cariton-color);
  }
  
  /* bluegreen */
  .checkout_btn_color_5{
    background-color: #17a2b8 !important;
    color: var(--light-cariton-color);
  }
  .checkout_btn_color_5:hover{
    background-color: #138496 !important;
    color: var(--light-cariton-color);
  }
/* orange */
.checkout_btn_color_6{
  background-color: #e6c42f !important;
  color: var(--light-cariton-color);
}
.checkout_btn_color_6:hover{
  background-color: #ffb703 !important;
  color: var(--light-cariton-color);
}


.checkout_btn_color_7{
  background-color: #2fcad9 !important;
  color: var(--light-cariton-color);
}
.checkout_btn_color_7:hover{
  background-color: #22a7b3 !important;
  color: var(--light-cariton-color);
}


  /* End Button Color */

  .button#login-btn {
    width: 100%;
  }


.checkout_default_submit_btn{
  color: #FBFCFF;
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px !important;
  letter-spacing: 0.76px;
  padding: 5px;
  border-radius: 3px;
  background: var(--primary-cariton-color);
  cursor:  pointer !important;
  transition: background 100ms ease-in 0s; 
}
/* button.checkout_default_submit_btn:hover {
  background: #AE0115;
} */


/* swal color gray */
.swal2-styled.swal2-deny:focus {
  box-shadow: none !important;
}

.swal2-styled.swal2-deny {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: var(--dark-cariton-color);
  color: var(--light-cariton-color);
  font-size: 1em;
}

.swal2-deny:hover {
  background-color: #5a6268 !important;
  color: white !important;
}
/* end of swal color gray */


i#show_eye, i#hide_eye, i#show_eyes, i#hide_eyes  {
    float: right;
    margin-right: 10px;
    margin-top: -24px;
    position: relative;
    z-index: 2;
    color: #545050;
    cursor: pointer;
    font-size: 16px;
}

button{
  line-height: normal !important;
}

button.btn.btn-primary.dropdown-toggle {
    width: 100%;
    padding: 1rem 0.75rem;
    background-color:#EAE7E7;
    border:none;
    border-radius:10px;
    color: #545050;
}

.consumer_background_color_1 {
    background: linear-gradient(-180deg,#7a68ff,#9688FE) !important;
}

.dropdown-menu-profile{
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: var(--light-cariton-color);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.rounded-circle {
    border-radius: 50% !important;
  }


.forget {
    position: relative;
    float: right;
    right: auto;
}

.infinity-social-btn ul{
    display: flex;
}

.infinity-social-btn ul li{
    position: relative;
    list-style: none;
    width: 50px;
    height: 50px;
    top: 10px;
    align-items: center;
    margin-right: 20px;
    background: transparent;
    text-align: center;
    border: 4px solid transparent;
    box-sizing: border-box;
    border-radius: 50%;
    transition: .5s;
    overflow: hidden;
    margin-bottom: 10px;
}

.infinity-social-btn  ul li .facebook .fa {
    color: #3b5999;
}

.infinity-social-btn  ul li .google .fa {
    color: #dd4b39;
}

.infinity-social-btn  ul li .twitter .fa {
    color: #33ccff;
}

.infinity-social-btn  ul li:hover:nth-child(1) {
    background-color: #3b5999
}

.infinity-social-btn ul li:hover:nth-child(2) {
    background-color: #dd4b39;
}

.infinity-social-btn ul li:hover:nth-child(3) {
    background-color: #55acee;
}

.infinity-social-btn  ul li .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #2196f3;
    transition: .5s;
}

.infinity-social-btn  ul li .fa:nth-child(1) {
    left: -50%;
    opacity: 0;
}

.infinity-social-btn ul li:hover .fa:nth-child(1) {
    left: 50%;
    opacity: 1;
    color: var(--light-cariton-color);
}

.infinity-social-btn ul li:hover .fa:nth-child(2) {
    left: 150%;
    opacity: 0;
}

.emercado_search_btn{
    height: 75% !important;
    border: none;
    width: 40px;
    position: absolute;
    right: 0 !important;
    margin: 5px !important;
    border-radius: 5px !important;
}

.emercado_logo {
    max-width: 50%;
    height: auto;
    border: 2px solid #d0011b;
    border-radius: 15px;
}

.emercado_logo_store {
    max-width: 50%;
    height: auto;
    border: 2px solid #d0011b;
    border-radius: 15px;
}

.order-container .box{
    background: var(--bg-color-1);
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
    
}

.login_instead{
    color: #545050; text-decoration: none;
    font-weight: 400;

}

.login_instead:hover{
    text-decoration: underline;
    color: #545050;
}

input.form-control.text-center {
    color: #545050;
}

ul.social_icons.p-0 {
    justify-content: space-evenly;
}

.title {
    font-size: 33px;
    font-weight: 700;
    line-height: 3;
    color: #9688FE;
    white-space: nowrap;
}

/* .row {
    margin-bottom: 2rem;
} */

.sider {
    margin-left: -5px;
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
#suggestions {
  position: absolute;
  z-index: 1;
  width: 75rem;
  margin: 192px 0 0 0;
  padding: 0;
  list-style: none;
  background-color: var(--light-cariton-color);
  border: 1px solid #ccc;
  border-top: none;
}

#suggestions li {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.store-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  object-fit: cover;
}

#suggestions li:hover {
  background-color: #eee;
}

.ratings{
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(270deg,#4F2EDC -22.87%,#947ADA);
    height: 100%
}

.percentage{
    display: inline-flex;
    border-radius: 1.625rem;
    position: relative; 
    height: 5px;
    width: 100%;
    background-color: rgba(0,0,0,.06);
}
.gap-5 {
  gap: 5px!important;
}
.gap-10 {
  gap: 10px!important;
}

.coin{
    width: 28px;
}
.login, .sign_up {
  min-height: 100vh;
}

img.img-fluid.border.mb-2.emercado_border_1{
  width: 140px;
  height: 90px;
  object-fit: cover;
  border-radius: 3px;
}

.form-check-input {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  padding: 2.7px !important;
  border-radius: 5.4px !important;
  border: 0.9px solid #D8DADF !important;
}

.form-check-input:checked {
  border-radius: 5.4px;
  border-color: #2F88FF !important;
  background: #2F88FF;
  box-shadow: none !important;
  outline: 0 !important;
}

.form-check-input:focus {
  border-color: #D8DADF;
  outline: 0 !important;
  box-shadow: none !important;
}

@media ( min-width: 0px ) {

    .border_radius_sm{
        border-radius: 0 !important;
    }
  }
@media ( min-width: 576px ) {

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

}

  a.footer_text.text-black {
    font-size: 12px;
  }

  a.footer_text.text-black:hover {
    color:#260bec !important;
  }

  a.iconImg.text-black{
    font-size: 12px;
  }

  a.iconImg.text-black:hover {
    font-size: 12px;
    color:#9688FE!important;
  }

  .code-container {
    display: flex;
    justify-content: center;
  }
  
  .code {
    width: 40px;
    height: 5rem;
    font-size: 2rem;
    text-align: center;
    margin: 1rem;
    border: none;
    border-bottom: 2px solid #ccc;
    background-color: transparent;
  }
  
  .code:focus {
    border-bottom: 2px solid var(--dark-cariton-color);
    outline: none;
  }

  .header_logo{
    width: 50px;
    height: 40px;
  }

  .side_header_logo{
    height: 35px;
  
  }

  .invoice_logo{
    height: 60px;
    width: 65px;
  }
  .text_checkout{
    font-family: 'Poppins', sans-serif; 
    margin-left: -3px; 
    font-size: 25px;
    font-weight: 600;
  }

  .navbar-brand{
    margin: 0 !important;
    padding-left: 5px !important;
  }


  .profile_account{
    width: 35px; 
    height: 35px;  
    border: 3px solid var(--light-cariton-color);
    object-fit: cover;
  }

  /* LOADING SPINNER */
:root {
	--hue: 255; /* Base hue for the purple color. */
	--bg: hsl(var(--hue), 10%, 90%);
	--fg: hsl(var(--hue), 10%, 10%);
	--primary-spinner: hsl(var(--hue), 41%, 56%); /* #7E60BF in HSL */
	--trans-dur: 0.3s;
}

.preloader {
	position: fixed;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 75%); 
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%) translateZ(0);
}
.cart-spinner {
	display: block;
	margin: 0 auto 1.5em auto;
	width: 8em;
	height: 8em;
}
.cart__lines,
.cart__top,
.cart__wheel1,
.cart__wheel2,
.cart__wheel-stroke {
	animation: cartLines 2s ease-in-out infinite;
}
.cart__lines {
	stroke: var(--primary-spinner);
}
.cart__top {
	animation-name: cartTop;
}
.cart__wheel1 {
	animation-name: cartWheel1;
	transform: rotate(-0.25turn);
	transform-origin: 43px 111px;
}
.cart__wheel2 {
	animation-name: cartWheel2;
	transform: rotate(0.25turn);
	transform-origin: 102px 111px;
}
.cart__wheel-stroke {
	animation-name: cartWheelStroke
}
.cart__track {
	stroke: hsla(var(--hue),10%,10%,0.1);
	transition: stroke var(--trans-dur);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.cart__track {
		stroke: hsla(var(--hue),10%,90%,0.1);
	}
}

/* Animations */
@keyframes msg {
	from {
		opacity: 1;
		visibility: visible;
	}
	99.9% {
		opacity: 0;
		visibility: visible;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}
@keyframes cartLines {
	from,
	to {
		opacity: 0;
	}
	8%,
	92% {
		opacity: 1;
	}
}
@keyframes cartTop {
	from {
		stroke-dashoffset: -338;
	}
	50% {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 338;
	}
}
@keyframes cartWheel1 {
	from {
		transform: rotate(-0.25turn);
	}
	to {
		transform: rotate(2.75turn);
	}
}
@keyframes cartWheel2 {
	from {
		transform: rotate(0.25turn);
	}
	to {
		transform: rotate(3.25turn);
	}
}
@keyframes cartWheelStroke {
	from,
	to {
		stroke-dashoffset: 81.68;
	}
	50% {
		stroke-dashoffset: 40.84;
	}
}

  /* @keyframes wave {
    0% { opacity: 0; transform: translateY(15px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-15px); }
  }
  
  .loading-spinner {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); 
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%) translateZ(0);
  }

  .loader {
    position: relative;
  }
  
  .loader ul {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    width: 60px;
    text-align: center;
    animation: wave 2.5s infinite linear;
  }
  
  .loader li {
    display: inline-block;
    background: #FAF1D9;
    height: 30px;
    width: 9px;
    border-radius: 0 100%;
    transform: rotate(12deg);
  }
  
  .cup {
    background: var(--light-cariton-color);
    width: 60px;
    height: 54px;
    border-radius: 0 0 50% 50%;
    position: relative;
    margin-top: 20px; 
  }
  
  .cup:before {
    content: "";
    position: absolute;
    width: 66px;
    height: 20px;
    border-radius: 50%;
    background: inherit;
    left: -3px;
    top: -10px;
  }
  
  .cup:after {
    content: "";
    position: absolute;
    width: 56px;
    height: 12px;
    border-radius: 50%;
    background: #3A2F28;
    left: 2px;
    top: -6px;
  }
  
  .loader span {
    background: var(--light-cariton-color);
    width: 13px;
    height: 20px;
    position: absolute;
    right: -13px;
    top: 10px;
    border-radius: 0 50% 50% 0;
  }
  
  .loader span:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    background: rgb(0 0 0 / 76%);
    width: 10px;
    height: 12px;
    border-radius: 0 50% 50% 0;
  }
  
  .loader span:after {
    content: "";
    position: absolute;
    top: 40px;
    left: -50px;
    background: var(--light-cariton-color);
    width: 40px;
    height: 8px;
    border-radius: 50%;
  }
  
  .steam {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 8px;
    height: 25px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: wave 1.5s infinite ease-in-out;
    transform: translateX(-50%);
  } */

.footer_icon{
  display: flex;
  margin-top: 100px;
}


  @media (min-width: 0) {
    .category_xs {
      overflow: auto;
      display: -webkit-box;
    }
    .cheqout_landing_category_xs{
      overflow: auto;
      display: -webkit-box;
    }
    
    .border-xs-0{
      border: 0 !important;
    }
    .border-xs-1{
      border: 1px solid #dee2e6!important;
    }
    .bg-white-xs{
      background-color: var(--light-cariton-color);
    }
    .bg-dark-white-xs{
      background-color: #f5f5f5 !important;
    }
    .w-xs-5 {
      width: 5% !important;
    }
    .w-xs-10 {
      width: 10% !important;
    }
    .w-xs-15 {
      width: 15% !important;
    }
    .w-xs-20 {
      width: 20% !important;
    }
    .w-xs-25 {
      width: 25% !important;
    }
    .w-xs-30 {
      width: 30% !important;
    }
    .w-xs-35 {
      width: 35% !important;
    }
    .w-xs-40 {
      width: 40% !important;
    }
    .w-xs-45 {
      width: 45% !important;
    }
    .w-xs-50 {
      width: 50% !important;
    }
    .w-xs-55 {
      width: 55% !important;
    }
    .w-xs-60 {
      width: 60% !important;
    }
    .w-xs-65 {
      width: 65% !important;
    }
    .w-xs-70 {
      width: 70% !important;
    }
    .w-xs-75 {
      width: 75% !important;
    }
    .w-xs-80 {
      width: 80% !important;
    }
    .w-xs-85 {
      width: 85% !important;
    }
    .w-xs-90 {
      width: 90% !important;
    }
    .w-xs-95 {
      width: 95% !important;
    }
    .w-xs-100 {
      width: 100% !important;
    }
    .w-xs-max{
      width: max-content !important;
    }

    .h-xs-5 {
      height: 5% !important;
    }
    .h-xs-10 {
      height: 10% !important;
    }
    .h-xs-15 {
      height: 15% !important;
    }
    .h-xs-20 {
      height: 20% !important;
    }
    .h-xs-25 {
      height: 25% !important;
    }
    .h-xs-30 {
      height: 30% !important;
    }
    .h-xs-35 {
      height: 35% !important;
    }
    .h-xs-40 {
      height: 40% !important;
    }
    .h-xs-45 {
      height: 45% !important;
    }
    .h-xs-50 {
      height: 50% !important;
    }
    .h-xs-55 {
      height: 55% !important;
    }
    .h-xs-60 {
      height: 60% !important;
    }
    .h-xs-65 {
      height: 65% !important;
    }
    .h-xs-70 {
      height: 70% !important;
    }
    .h-xs-75 {
      height: 75% !important;
    }
    .h-xs-80 {
      height: 80% !important;
    }
    .h-xs-85 {
      height: 85% !important;
    }
    .h-xs-90 {
      height: 90% !important;
    }
    .h-xs-95 {
      height: 95% !important;
    }
    .h-xs-100 {
      height: 100% !important;
    }

    /* Bootstrap Carousel customization */
    .m-xs-0 {
      margin: 0 !important;
    }
    
    .m-xs-2 {
      margin: 0.5rem !important;
    }
    
    .m-xs-3 {
      margin: 1rem !important;
    }
    
    .m-xs-4 {
      margin: 1.5rem !important;
    }
    
    .m-xs-5 {
      margin: 3rem !important;
    }
    
    .m-xs-auto {
      margin: auto !important;
    }
    
    .mx-xs-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
    
    .mx-xs-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
    
    .mx-xs-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
    
    .mx-xs-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
    
    .mx-xs-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
    
    .mx-xs-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
    
    .mx-xs-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
    
    .my-xs-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
    
    .my-xs-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
    
    .my-xs-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
    
    .my-xs-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
    
    .my-xs-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
    
    .my-xs-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
    
    .my-xs-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
    
    .mt-xs-0 {
      margin-top: 0 !important;
    }
    
    .mt-xs-1 {
      margin-top: 0.25rem !important;
    }
    
    .mt-xs-2 {
      margin-top: 0.5rem !important;
    }
    
    .mt-xs-3 {
      margin-top: 1rem !important;
    }
    
    .mt-xs-4 {
      margin-top: 1.5rem !important;
    }
    
    .mt-xs-5 {
      margin-top: 3rem !important;
    }
    
    .mt-xs-auto {
      margin-top: auto !important;
    }
    
    .me-xs-0 {
      margin-right: 0 !important;
    }
    
    .me-xs-1 {
      margin-right: 0.25rem !important;
    }
    
    .me-xs-2 {
      margin-right: 0.5rem !important;
    }
    
    .me-xs-3 {
      margin-right: 1rem !important;
    }
    
    .me-xs-4 {
      margin-right: 1.5rem !important;
    }
    
    .me-xs-5 {
      margin-right: 3rem !important;
    }
    
    .me-xs-auto {
      margin-right: auto !important;
    }
    
    .mb-xs-0 {
      margin-bottom: 0 !important;
    }
    
    .mb-xs-1 {
      margin-bottom: 0.25rem !important;
    }
    
    .mb-xs-2 {
      margin-bottom: 0.5rem !important;
    }
    
    .mb-xs-3 {
      margin-bottom: 1rem !important;
    }
    
    .mb-xs-4 {
      margin-bottom: 1.5rem !important;
    }
    
    .mb-xs-5 {
      margin-bottom: 3rem !important;
    }
    
    .mb-xs-auto {
      margin-bottom: auto !important;
    }
    
    .ms-xs-0 {
      margin-left: 0 !important;
    }
    
    .ms-xs-1 {
      margin-left: 0.25rem !important;
    }
    
    .ms-xs-2 {
      margin-left: 0.5rem !important;
    }
    
    .ms-xs-3 {
      margin-left: 1rem !important;
    }
    
    .ms-xs-4 {
      margin-left: 1.5rem !important;
    }
    
    .ms-xs-5 {
      margin-left: 3rem !important;
    }
    
    .ms-xs-auto {
      margin-left: auto !important;
    }
    
    .p-xs-0 {
      padding: 0 !important;
    }
    
    .p-xs-1 {
      padding: 0.25rem !important;
    }
    
    .p-xs-2 {
      padding: 0.5rem !important;
    }
    
    .p-xs-3 {
      padding: 1rem !important;
    }
    
    .p-xs-4 {
      padding: 1.5rem !important;
    }
    
    .p-xs-5 {
      padding: 3rem !important;
    }
    
    .px-xs-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
    
    .px-xs-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
    
    .px-xs-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
    
    .px-xs-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
    
    .px-xs-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
    
    .px-xs-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
    
    .py-xs-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    
    .py-xs-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
    
    .py-xs-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
    
    .py-xs-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
    
    .py-xs-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
    
    .py-xs-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
    
    .pt-xs-0 {
      padding-top: 0 !important;
    }
    
    .pt-xs-1 {
      padding-top: 0.25rem !important;
    }
    
    .pt-xs-2 {
      padding-top: 0.5rem !important;
    }
    
    .pt-xs-3 {
      padding-top: 1rem !important;
    }
    
    .pt-xs-4 {
      padding-top: 1.5rem !important;
    }
    
    .pt-xs-5 {
      padding-top: 3rem !important;
    }
    
    .pe-xs-0 {
      padding-right: 0 !important;
    }
    
    .pe-xs-1 {
      padding-right: 0.25rem !important;
    }
    
    .pe-xs-2 {
      padding-right: 0.5rem !important;
    }
    
    .pe-xs-3 {
      padding-right: 1rem !important;
    }
    
    .pe-xs-4 {
      padding-right: 1.5rem !important;
    }
    
    .pe-xs-5 {
      padding-right: 3rem !important;
    }
    
    .pb-xs-0 {
      padding-bottom: 0 !important;
    }
    
    .pb-xs-1 {
      padding-bottom: 0.25rem !important;
    }
    
    .pb-xs-2 {
      padding-bottom: 0.5rem !important;
    }
    
    .pb-xs-3 {
      padding-bottom: 1rem !important;
    }
    
    .pb-xs-4 {
      padding-bottom: 1.5rem !important;
    }
    
    .pb-xs-5 {
      padding-bottom: 3rem !important;
    }
    
    .ps-xs-0 {
      padding-left: 0 !important;
    }
    
    .ps-xs-1 {
      padding-left: 0.25rem !important;
    }
    
    .ps-xs-2 {
      padding-left: 0.5rem !important;
    }
    
    .ps-xs-3 {
      padding-left: 1rem !important;
    }
    
    .ps-xs-4 {
      padding-left: 1.5rem !important;
    }
    
    .ps-xs-5 {
      padding-left: 3rem !important;
    }
  }

  @media (max-width: 769px) {
    .banner_mobile_sticky{
      position: sticky;
      top: 50px;
      z-index: 999;
      width: 100%;
    }
    .bg-dark-white-sm{
      background-image: url("/static/img/first_interface/day-bg-sm.png") !important;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
  

/* sm - small*/
  @media (min-width: 576px) {
    .bg-dark-white-sm{
      background-image: url("/static/img/first_interface/day-bg.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    }
    .category_sm {
      overflow: auto;
      display: -webkit-box;
    }
    .cheqout_landing_category_sm{
      overflow-x: auto !important;
      overflow-y: hidden !important;
      display: flex;
      justify-content: center;
    }
    .border-sm-0{
      border: 0 !important;
    }
    .border-sm-1{
      border: 1px solid #dee2e6!important;
    }
    .bg-white-sm{
      background-color: var(--light-cariton-color);
    }
    .w-sm-5 {
      width: 5% !important;
    }
    .w-sm-10 {
      width: 10% !important;
    }
    .w-sm-15 {
      width: 15% !important;
    }
    .w-sm-20 {
      width: 20% !important;
    }
    .w-sm-25 {
      width: 25% !important;
    }
    .w-sm-30 {
      width: 30% !important;
    }
    .w-sm-35 {
      width: 35% !important;
    }
    .w-sm-40 {
      width: 40% !important;
    }
    .w-sm-45 {
      width: 45% !important;
    }
    .w-sm-50 {
      width: 50% !important;
    }
    .w-sm-55 {
      width: 55% !important;
    }
    .w-sm-60 {
      width: 60% !important;
    }
    .w-sm-65 {
      width: 65% !important;
    }
    .w-sm-70 {
      width: 70% !important;
    }
    .w-sm-75 {
      width: 75% !important;
    }
    .w-sm-80 {
      width: 80% !important;
    }
    .w-sm-85 {
      width: 85% !important;
    }
    .w-sm-90 {
      width: 90% !important;
    }
    .w-sm-95 {
      width: 95% !important;
    }
    .w-sm-100 {
      width: 100% !important;
    }
    .w-sm-max{
      width: max-content !important;
    }

    .h-sm-5 {
      height: 5% !important;
    }
    .h-sm-10 {
      height: 10% !important;
    }
    .h-sm-15 {
      height: 15% !important;
    }
    .h-sm-20 {
      height: 20% !important;
    }
    .h-sm-25 {
      height: 25% !important;
    }
    .h-sm-30 {
      height: 30% !important;
    }
    .h-sm-35 {
      height: 35% !important;
    }
    .h-sm-40 {
      height: 40% !important;
    }
    .h-sm-45 {
      height: 45% !important;
    }
    .h-sm-50 {
      height: 50% !important;
    }
    .h-sm-55 {
      height: 55% !important;
    }
    .h-sm-60 {
      height: 60% !important;
    }
    .h-sm-65 {
      height: 65% !important;
    }
    .h-sm-70 {
      height: 70% !important;
    }
    .h-sm-75 {
      height: 75% !important;
    }
    .h-sm-80 {
      height: 80% !important;
    }
    .h-sm-85 {
      height: 85% !important;
    }
    .h-sm-90 {
      height: 90% !important;
    }
    .h-sm-95 {
      height: 95% !important;
    }
    .h-sm-100 {
      height: 100% !important;
    }

    /* Bootstrap Carousel customization */
    .m-sm-0 {
      margin: 0 !important;
    }
   
    .m-sm-1 {
      margin: 0.25rem !important;
    }
   
    .m-sm-2 {
      margin: 0.5rem !important;
    }
   
    .m-sm-3 {
      margin: 1rem !important;
    }
   
    .m-sm-4 {
      margin: 1.5rem !important;
    }
   
    .m-sm-5 {
      margin: 3rem !important;
    }
   
    .m-sm-auto {
      margin: auto !important;
    }
   
    .mx-sm-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
   
    .mx-sm-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
   
    .mx-sm-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
   
    .mx-sm-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
   
    .mx-sm-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
   
    .mx-sm-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
   
    .mx-sm-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
   
    .my-sm-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
   
    .my-sm-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
   
    .my-sm-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
   
    .my-sm-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
   
    .my-sm-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
   
    .my-sm-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
   
    .my-sm-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
   
    .mt-sm-0 {
      margin-top: 0 !important;
    }
   
    .mt-sm-1 {
      margin-top: 0.25rem !important;
    }
   
    .mt-sm-2 {
      margin-top: 0.5rem !important;
    }
   
    .mt-sm-3 {
      margin-top: 1rem !important;
    }
   
    .mt-sm-4 {
      margin-top: 1.5rem !important;
    }
   
    .mt-sm-5 {
      margin-top: 3rem !important;
    }
   
    .mt-sm-auto {
      margin-top: auto !important;
    }
   
    .me-sm-0 {
      margin-right: 0 !important;
    }
   
    .me-sm-1 {
      margin-right: 0.25rem !important;
    }
   
    .me-sm-2 {
      margin-right: 0.5rem !important;
    }
   
    .me-sm-3 {
      margin-right: 1rem !important;
    }
   
    .me-sm-4 {
      margin-right: 1.5rem !important;
    }
   
    .me-sm-5 {
      margin-right: 3rem !important;
    }
   
    .me-sm-auto {
      margin-right: auto !important;
    }
   
    .mb-sm-0 {
      margin-bottom: 0 !important;
    }
   
    .mb-sm-1 {
      margin-bottom: 0.25rem !important;
    }
   
    .mb-sm-2 {
      margin-bottom: 0.5rem !important;
    }
   
    .mb-sm-3 {
      margin-bottom: 1rem !important;
    }
   
    .mb-sm-4 {
      margin-bottom: 1.5rem !important;
    }
   
    .mb-sm-5 {
      margin-bottom: 3rem !important;
    }
   
    .mb-sm-auto {
      margin-bottom: auto !important;
    }
   
    .ms-sm-0 {
      margin-left: 0 !important;
    }
   
    .ms-sm-1 {
      margin-left: 0.25rem !important;
    }
   
    .ms-sm-2 {
      margin-left: 0.5rem !important;
    }
   
    .ms-sm-3 {
      margin-left: 1rem !important;
    }
   
    .ms-sm-4 {
      margin-left: 1.5rem !important;
    }
   
    .ms-sm-5 {
      margin-left: 3rem !important;
    }
   
    .ms-sm-auto {
      margin-left: auto !important;
    }
   
    .p-sm-0 {
      padding: 0 !important;
    }
   
    .p-sm-1 {
      padding: 0.25rem !important;
    }
   
    .p-sm-2 {
      padding: 0.5rem !important;
    }
   
    .p-sm-3 {
      padding: 1rem !important;
    }
   
    .p-sm-4 {
      padding: 1.5rem !important;
    }
   
    .p-sm-5 {
      padding: 3rem !important;
    }
   
    .px-sm-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
   
    .px-sm-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
   
    .px-sm-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
   
    .px-sm-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
   
    .px-sm-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
   
    .px-sm-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
   
    .py-sm-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
   
    .py-sm-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
   
    .py-sm-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
   
    .py-sm-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
   
    .py-sm-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
   
    .py-sm-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
   
    .pt-sm-0 {
      padding-top: 0 !important;
    }
   
    .pt-sm-1 {
      padding-top: 0.25rem !important;
    }
   
    .pt-sm-2 {
      padding-top: 0.5rem !important;
    }
   
    .pt-sm-3 {
      padding-top: 1rem !important;
    }
   
    .pt-sm-4 {
      padding-top: 1.5rem !important;
    }
   
    .pt-sm-5 {
      padding-top: 3rem !important;
    }
   
    .pe-sm-0 {
      padding-right: 0 !important;
    }
   
    .pe-sm-1 {
      padding-right: 0.25rem !important;
    }
   
    .pe-sm-2 {
      padding-right: 0.5rem !important;
    }
   
    .pe-sm-3 {
      padding-right: 1rem !important;
    }
   
    .pe-sm-4 {
      padding-right: 1.5rem !important;
    }
   
    .pe-sm-5 {
      padding-right: 3rem !important;
    }
   
    .pb-sm-0 {
      padding-bottom: 0 !important;
    }
   
    .pb-sm-1 {
      padding-bottom: 0.25rem !important;
    }
   
    .pb-sm-2 {
      padding-bottom: 0.5rem !important;
    }
   
    .pb-sm-3 {
      padding-bottom: 1rem !important;
    }
   
    .pb-sm-4 {
      padding-bottom: 1.5rem !important;
    }
   
    .pb-sm-5 {
      padding-bottom: 3rem !important;
    }
   
    .ps-sm-0 {
      padding-left: 0 !important;
    }
   
    .ps-sm-1 {
      padding-left: 0.25rem !important;
    }
   
    .ps-sm-2 {
      padding-left: 0.5rem !important;
    }
   
    .ps-sm-3 {
      padding-left: 1rem !important;
    }
   
    .ps-sm-4 {
      padding-left: 1.5rem !important;
    }
   
    .ps-sm-5 {
      padding-left: 3rem !important;
    }

  }
  /* md - medium*/
  @media (min-width: 768px) {
    .category_md {
      overflow-x: auto !important;
      overflow-y: hidden !important;
      display: flex;
      justify-content: center;
    }
    .cheqout_landing_category_md{
      overflow-x: auto !important;
      overflow-y: hidden !important;
      display: flex;
      justify-content: center;
      position: relative;
    }
    .store_name{
      width: 100% !important;
    }

    .border-md-0{
      border: 0 !important;
    }
    .border-md-1{
      border: 1px solid #dee2e6!important;
    }
    .bg-white-md{
      background-color: var(--light-cariton-color);
    }
    .bg-dark-white-md{
      background-color: #f5f5f5 !important;
    }
    .w-md-5 {
      width: 5% !important;
    }
    .w-md-10 {
      width: 10% !important;
    }
    .w-md-15 {
      width: 15% !important;
    }
    .w-md-20 {
      width: 20% !important;
    }
    .w-md-25 {
      width: 25% !important;
    }
    .w-md-30 {
      width: 30% !important;
    }
    .w-md-35 {
      width: 35% !important;
    }
    .w-md-40 {
      width: 40% !important;
    }
    .w-md-45 {
      width: 45% !important;
    }
    .w-md-50 {
      width: 50% !important;
    }
    .w-md-55 {
      width: 55% !important;
    }
    .w-md-60 {
      width: 60% !important;
    }
    .w-md-65 {
      width: 65% !important;
    }
    .w-md-70 {
      width: 70% !important;
    }
    .w-md-75 {
      width: 75% !important;
    }
    .w-md-80 {
      width: 80% !important;
    }
    .w-md-85 {
      width: 85% !important;
    }
    .w-md-90 {
      width: 90% !important;
    }
    .w-md-95 {
      width: 95% !important;
    }
    .w-md-100 {
      width: 100% !important;
    }
    .w-md-max{
      width: max-content !important;
    }

    .h-md-5 {
      height: 5% !important;
    }
    .h-md-10 {
      height: 10% !important;
    }
    .h-md-15 {
      height: 15% !important;
    }
    .h-md-20 {
      height: 20% !important;
    }
    .h-md-25 {
      height: 25% !important;
    }
    .h-md-30 {
      height: 30% !important;
    }
    .h-md-35 {
      height: 35% !important;
    }
    .h-md-40 {
      height: 40% !important;
    }
    .h-md-45 {
      height: 45% !important;
    }
    .h-md-50 {
      height: 50% !important;
    }
    .h-md-55 {
      height: 55% !important;
    }
    .h-md-60 {
      height: 60% !important;
    }
    .h-md-65 {
      height: 65% !important;
    }
    .h-md-70 {
      height: 70% !important;
    }
    .h-md-75 {
      height: 75% !important;
    }
    .h-md-80 {
      height: 80% !important;
    }
    .h-md-85 {
      height: 85% !important;
    }
    .h-md-90 {
      height: 90% !important;
    }
    .h-md-95 {
      height: 95% !important;
    }
    .h-md-100 {
      height: 100% !important;
    }
    .m-md-0 {
      margin: 0 !important;
    }
   
    .m-md-1 {
      margin: 0.25rem !important;
    }
   
    .m-md-2 {
      margin: 0.5rem !important;
    }
   
    .m-md-3 {
      margin: 1rem !important;
    }
   
    .m-md-4 {
      margin: 1.5rem !important;
    }
   
    .m-md-5 {
      margin: 3rem !important;
    }
   
    .m-md-auto {
      margin: auto !important;
    }
   
    .mx-md-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
   
    .mx-md-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
   
    .mx-md-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
   
    .mx-md-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
   
    .mx-md-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
   
    .mx-md-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
   
    .mx-md-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
   
    .my-md-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
   
    .my-md-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
   
    .my-md-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
   
    .my-md-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
   
    .my-md-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
   
    .my-md-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
   
    .my-md-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
   
    .mt-md-0 {
      margin-top: 0 !important;
    }
   
    .mt-md-1 {
      margin-top: 0.25rem !important;
    }
   
    .mt-md-2 {
      margin-top: 0.5rem !important;
    }
   
    .mt-md-3 {
      margin-top: 1rem !important;
    }
   
    .mt-md-4 {
      margin-top: 1.5rem !important;
    }
   
    .mt-md-5 {
      margin-top: 3rem !important;
    }
   
    .mt-md-auto {
      margin-top: auto !important;
    }
   
    .me-md-0 {
      margin-right: 0 !important;
    }
   
    .me-md-1 {
      margin-right: 0.25rem !important;
    }
   
    .me-md-2 {
      margin-right: 0.5rem !important;
    }
   
    .me-md-3 {
      margin-right: 1rem !important;
    }
   
    .me-md-4 {
      margin-right: 1.5rem !important;
    }
   
    .me-md-5 {
      margin-right: 3rem !important;
    }
   
    .me-md-auto {
      margin-right: auto !important;
    }
   
    .mb-md-0 {
      margin-bottom: 0 !important;
    }
   
    .mb-md-1 {
      margin-bottom: 0.25rem !important;
    }
   
    .mb-md-2 {
      margin-bottom: 0.5rem !important;
    }
   
    .mb-md-3 {
      margin-bottom: 1rem !important;
    }
   
    .mb-md-4 {
      margin-bottom: 1.5rem !important;
    }
   
    .mb-md-5 {
      margin-bottom: 3rem !important;
    }
   
    .mb-md-auto {
      margin-bottom: auto !important;
    }
   
    .ms-md-0 {
      margin-left: 0 !important;
    }
   
    .ms-md-1 {
      margin-left: 0.25rem !important;
    }
   
    .ms-md-2 {
      margin-left: 0.5rem !important;
    }
   
    .ms-md-3 {
      margin-left: 1rem !important;
    }
   
    .ms-md-4 {
      margin-left: 1.5rem !important;
    }
   
    .ms-md-5 {
      margin-left: 3rem !important;
    }
   
    .ms-md-auto {
      margin-left: auto !important;
    }
   
    .p-md-0 {
      padding: 0 !important;
    }
   
    .p-md-1 {
      padding: 0.25rem !important;
    }
   
    .p-md-2 {
      padding: 0.5rem !important;
    }
   
    .p-md-3 {
      padding: 1rem !important;
    }
   
    .p-md-4 {
      padding: 1.5rem !important;
    }
   
    .p-md-5 {
      padding: 3rem !important;
    }
   
    .px-md-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
   
    .px-md-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
   
    .px-md-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
   
    .px-md-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
   
    .px-md-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
   
    .px-md-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
   
    .py-md-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
   
    .py-md-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
   
    .py-md-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
   
    .py-md-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
   
    .py-md-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
   
    .py-md-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
   
    .pt-md-0 {
      padding-top: 0 !important;
    }
   
    .pt-md-1 {
      padding-top: 0.25rem !important;
    }
   
    .pt-md-2 {
      padding-top: 0.5rem !important;
    }
   
    .pt-md-3 {
      padding-top: 1rem !important;
    }
   
    .pt-md-4 {
      padding-top: 1.5rem !important;
    }
   
    .pt-md-5 {
      padding-top: 3rem !important;
    }
   
    .pe-md-0 {
      padding-right: 0 !important;
    }
   
    .pe-md-1 {
      padding-right: 0.25rem !important;
    }
   
    .pe-md-2 {
      padding-right: 0.5rem !important;
    }
   
    .pe-md-3 {
      padding-right: 1rem !important;
    }
   
    .pe-md-4 {
      padding-right: 1.5rem !important;
    }
   
    .pe-md-5 {
      padding-right: 3rem !important;
    }
   
    .pb-md-0 {
      padding-bottom: 0 !important;
    }
   
    .pb-md-1 {
      padding-bottom: 0.25rem !important;
    }
   
    .pb-md-2 {
      padding-bottom: 0.5rem !important;
    }
   
    .pb-md-3 {
      padding-bottom: 1rem !important;
    }
   
    .pb-md-4 {
      padding-bottom: 1.5rem !important;
    }
   
    .pb-md-5 {
      padding-bottom: 3rem !important;
    }
   
    .ps-md-0 {
      padding-left: 0 !important;
    }
   
    .ps-md-1 {
      padding-left: 0.25rem !important;
    }
   
    .ps-md-2 {
      padding-left: 0.5rem !important;
    }
   
    .ps-md-3 {
      padding-left: 1rem !important;
    }
   
    .ps-md-4 {
      padding-left: 1.5rem !important;
    }
   
    .ps-md-5 {
      padding-left: 3rem !important;
    }

  }
  /* lg- large*/
  @media (min-width: 992px) {
    .cheqout_landing_category_lg{
      overflow-x: auto !important;
      overflow-y: hidden !important;
      display: flex;
      justify-content: center;
      position: relative;
    }
    .store_name{
      width: 100% !important;
    }

    .border-lg-0{
      border: 0 !important;
    }
    .border-lg-1{
      border: 1px solid #dee2e6!important;
    }
    .bg-white-lg{
      background-color: var(--light-cariton-color);
    }
    .bg-dark-white-lg{
      background-color: #f5f5f5 !important;
    }
    .w-lg-5 {
      width: 5% !important;
    }
    .w-lg-10 {
      width: 10% !important;
    }
    .w-lg-15 {
      width: 15% !important;
    }
    .w-lg-20 {
      width: 20% !important;
    }
    .w-lg-25 {
      width: 25% !important;
    }
    .w-lg-30 {
      width: 30% !important;
    }
    .w-lg-35 {
      width: 35% !important;
    }
    .w-lg-40 {
      width: 40% !important;
    }
    .w-lg-45 {
      width: 45% !important;
    }
    .w-lg-50 {
      width: 50% !important;
    }
    .w-lg-55 {
      width: 55% !important;
    }
    .w-lg-60 {
      width: 60% !important;
    }
    .w-lg-65 {
      width: 65% !important;
    }
    .w-lg-70 {
      width: 70% !important;
    }
    .w-lg-75 {
      width: 75% !important;
    }
    .w-lg-80 {
      width: 80% !important;
    }
    .w-lg-85 {
      width: 85% !important;
    }
    .w-lg-90 {
      width: 90% !important;
    }
    .w-lg-95 {
      width: 95% !important;
    }
    .w-lg-100 {
      width: 100% !important;
    }
    .w-lg-max{
      width: max-content !important;
    }

    .h-lg-5 {
      height: 5% !important;
    }
    .h-lg-10 {
      height: 10% !important;
    }
    .h-lg-15 {
      height: 15% !important;
    }
    .h-lg-20 {
      height: 20% !important;
    }
    .h-lg-25 {
      height: 25% !important;
    }
    .h-lg-30 {
      height: 30% !important;
    }
    .h-lg-35 {
      height: 35% !important;
    }
    .h-lg-40 {
      height: 40% !important;
    }
    .h-lg-45 {
      height: 45% !important;
    }
    .h-lg-50 {
      height: 50% !important;
    }
    .h-lg-55 {
      height: 55% !important;
    }
    .h-lg-60 {
      height: 60% !important;
    }
    .h-lg-65 {
      height: 65% !important;
    }
    .h-lg-70 {
      height: 70% !important;
    }
    .h-lg-75 {
      height: 75% !important;
    }
    .h-lg-80 {
      height: 80% !important;
    }
    .h-lg-85 {
      height: 85% !important;
    }
    .h-lg-90 {
      height: 90% !important;
    }
    .h-lg-95 {
      height: 95% !important;
    }
    .h-lg-100 {
      height: 100% !important;
    }

    .m-lg-0 {
      margin: 0 !important;
    }
   
    .m-lg-1 {
      margin: 0.25rem !important;
    }
   
    .m-lg-2 {
      margin: 0.5rem !important;
    }
   
    .m-lg-3 {
      margin: 1rem !important;
    }
   
    .m-lg-4 {
      margin: 1.5rem !important;
    }
   
    .m-lg-5 {
      margin: 3rem !important;
    }
   
    .m-lg-auto {
      margin: auto !important;
    }
   
    .mx-lg-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
   
    .mx-lg-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
   
    .mx-lg-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
   
    .mx-lg-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
   
    .mx-lg-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
   
    .mx-lg-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
   
    .mx-lg-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
   
    .my-lg-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
   
    .my-lg-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
   
    .my-lg-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
   
    .my-lg-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
   
    .my-lg-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
   
    .my-lg-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
   
    .my-lg-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
   
    .mt-lg-0 {
      margin-top: 0 !important;
    }
   
    .mt-lg-1 {
      margin-top: 0.25rem !important;
    }
   
    .mt-lg-2 {
      margin-top: 0.5rem !important;
    }
   
    .mt-lg-3 {
      margin-top: 1rem !important;
    }
   
    .mt-lg-4 {
      margin-top: 1.5rem !important;
    }
   
    .mt-lg-5 {
      margin-top: 3rem !important;
    }
   
    .mt-lg-auto {
      margin-top: auto !important;
    }
   
    .me-lg-0 {
      margin-right: 0 !important;
    }
   
    .me-lg-1 {
      margin-right: 0.25rem !important;
    }
   
    .me-lg-2 {
      margin-right: 0.5rem !important;
    }
   
    .me-lg-3 {
      margin-right: 1rem !important;
    }
   
    .me-lg-4 {
      margin-right: 1.5rem !important;
    }
   
    .me-lg-5 {
      margin-right: 3rem !important;
    }
   
    .me-lg-auto {
      margin-right: auto !important;
    }
   
    .mb-lg-0 {
      margin-bottom: 0 !important;
    }
   
    .mb-lg-1 {
      margin-bottom: 0.25rem !important;
    }
   
    .mb-lg-2 {
      margin-bottom: 0.5rem !important;
    }
   
    .mb-lg-3 {
      margin-bottom: 1rem !important;
    }
   
    .mb-lg-4 {
      margin-bottom: 1.5rem !important;
    }
   
    .mb-lg-5 {
      margin-bottom: 3rem !important;
    }
   
    .mb-lg-auto {
      margin-bottom: auto !important;
    }
   
    .ms-lg-0 {
      margin-left: 0 !important;
    }
   
    .ms-lg-1 {
      margin-left: 0.25rem !important;
    }
   
    .ms-lg-2 {
      margin-left: 0.5rem !important;
    }
   
    .ms-lg-3 {
      margin-left: 1rem !important;
    }
   
    .ms-lg-4 {
      margin-left: 1.5rem !important;
    }
   
    .ms-lg-5 {
      margin-left: 3rem !important;
    }
   
    .ms-lg-auto {
      margin-left: auto !important;
    }
   
    .p-lg-0 {
      padding: 0 !important;
    }
   
    .p-lg-1 {
      padding: 0.25rem !important;
    }
   
    .p-lg-2 {
      padding: 0.5rem !important;
    }
   
    .p-lg-3 {
      padding: 1rem !important;
    }
   
    .p-lg-4 {
      padding: 1.5rem !important;
    }
   
    .p-lg-5 {
      padding: 3rem !important;
    }
   
    .px-lg-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
   
    .px-lg-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
   
    .px-lg-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
   
    .px-lg-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
   
    .px-lg-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
   
    .px-lg-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
   
    .py-lg-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
   
    .py-lg-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
   
    .py-lg-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
   
    .py-lg-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
   
    .py-lg-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
   
    .py-lg-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
   
    .pt-lg-0 {
      padding-top: 0 !important;
    }
   
    .pt-lg-1 {
      padding-top: 0.25rem !important;
    }
   
    .pt-lg-2 {
      padding-top: 0.5rem !important;
    }
   
    .pt-lg-3 {
      padding-top: 1rem !important;
    }
   
    .pt-lg-4 {
      padding-top: 1.5rem !important;
    }
   
    .pt-lg-5 {
      padding-top: 3rem !important;
    }
   
    .pe-lg-0 {
      padding-right: 0 !important;
    }
   
    .pe-lg-1 {
      padding-right: 0.25rem !important;
    }
   
    .pe-lg-2 {
      padding-right: 0.5rem !important;
    }
   
    .pe-lg-3 {
      padding-right: 1rem !important;
    }
   
    .pe-lg-4 {
      padding-right: 1.5rem !important;
    }
   
    .pe-lg-5 {
      padding-right: 3rem !important;
    }
   
    .pb-lg-0 {
      padding-bottom: 0 !important;
    }
   
    .pb-lg-1 {
      padding-bottom: 0.25rem !important;
    }
   
    .pb-lg-2 {
      padding-bottom: 0.5rem !important;
    }
   
    .pb-lg-3 {
      padding-bottom: 1rem !important;
    }
   
    .pb-lg-4 {
      padding-bottom: 1.5rem !important;
    }
   
    .pb-lg-5 {
      padding-bottom: 3rem !important;
    }
   
    .ps-lg-0 {
      padding-left: 0 !important;
    }
   
    .ps-lg-1 {
      padding-left: 0.25rem !important;
    }
   
    .ps-lg-2 {
      padding-left: 0.5rem !important;
    }
   
    .ps-lg-3 {
      padding-left: 1rem !important;
    }
   
    .ps-lg-4 {
      padding-left: 1.5rem !important;
    }
   
    .ps-lg-5 {
      padding-left: 3rem !important;
    }
  }
  /* xl - extra large*/
  @media (min-width: 1200px) {
    .cheqout_landing_category_xl{
      overflow-x: auto !important;
      overflow-y: hidden !important;
      display: flex;
      justify-content: center;
      position: relative;
    }
    .store_name{
      width: 100% !important;
    }
    .border-xl-0{
      border: 0 !important;
    }
    .border-xl-1{
      border: 1px solid #dee2e6!important;
    }
    .bg-white-xl{
      background-color: var(--light-cariton-color);
    }
    .bg-dark-white-xl{
      background-color: #f5f5f5 !important;
    }
    .w-xl-5 {
      width: 5% !important;
    }
    .w-xl-10 {
      width: 10% !important;
    }
    .w-xl-15 {
      width: 15% !important;
    }
    .w-xl-20 {
      width: 20% !important;
    }
    .w-xl-25 {
      width: 25% !important;
    }
    .w-xl-30 {
      width: 30% !important;
    }
    .w-xl-35 {
      width: 35% !important;
    }
    .w-xl-40 {
      width: 40% !important;
    }
    .w-xl-45 {
      width: 45% !important;
    }
    .w-xl-50 {
      width: 50% !important;
    }
    .w-xl-55 {
      width: 55% !important;
    }
    .w-xl-60 {
      width: 60% !important;
    }
    .w-xl-65 {
      width: 65% !important;
    }
    .w-xl-70 {
      width: 70% !important;
    }
    .w-xl-75 {
      width: 75% !important;
    }
    .w-xl-80 {
      width: 80% !important;
    }
    .w-xl-85 {
      width: 85% !important;
    }
    .w-xl-90 {
      width: 90% !important;
    }
    .w-xl-95 {
      width: 95% !important;
    }
    .w-xl-100 {
      width: 100% !important;
    }
    .w-xl-max{
      width: max-content !important;
    }

    .h-xl-5 {
      height: 5% !important;
    }
    .h-xl-10 {
      height: 10% !important;
    }
    .h-xl-15 {
      height: 15% !important;
    }
    .h-xl-20 {
      height: 20% !important;
    }
    .h-xl-25 {
      height: 25% !important;
    }
    .h-xl-30 {
      height: 30% !important;
    }
    .h-xl-35 {
      height: 35% !important;
    }
    .h-xl-40 {
      height: 40% !important;
    }
    .h-xl-45 {
      height: 45% !important;
    }
    .h-xl-50 {
      height: 50% !important;
    }
    .h-xl-55 {
      height: 55% !important;
    }
    .h-xl-60 {
      height: 60% !important;
    }
    .h-xl-65 {
      height: 65% !important;
    }
    .h-xl-70 {
      height: 70% !important;
    }
    .h-xl-75 {
      height: 75% !important;
    }
    .h-xl-80 {
      height: 80% !important;
    }
    .h-xl-85 {
      height: 85% !important;
    }
    .h-xl-90 {
      height: 90% !important;
    }
    .h-xl-95 {
      height: 95% !important;
    }
    .h-xl-100 {
      height: 100% !important;
    }

    .m-xl-0 {
      margin: 0 !important;
    }
   
    .m-xl-1 {
      margin: 0.25rem !important;
    }
   
    .m-xl-2 {
      margin: 0.5rem !important;
    }
   
    .m-xl-3 {
      margin: 1rem !important;
    }
   
    .m-xl-4 {
      margin: 1.5rem !important;
    }
   
    .m-xl-5 {
      margin: 3rem !important;
    }
   
    .m-xl-auto {
      margin: auto !important;
    }
   
    .mx-xl-0 {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
   
    .mx-xl-1 {
      margin-right: 0.25rem !important;
      margin-left: 0.25rem !important;
    }
   
    .mx-xl-2 {
      margin-right: 0.5rem !important;
      margin-left: 0.5rem !important;
    }
   
    .mx-xl-3 {
      margin-right: 1rem !important;
      margin-left: 1rem !important;
    }
   
    .mx-xl-4 {
      margin-right: 1.5rem !important;
      margin-left: 1.5rem !important;
    }
   
    .mx-xl-5 {
      margin-right: 3rem !important;
      margin-left: 3rem !important;
    }
   
    .mx-xl-auto {
      margin-right: auto !important;
      margin-left: auto !important;
    }
   
    .my-xl-0 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
   
    .my-xl-1 {
      margin-top: 0.25rem !important;
      margin-bottom: 0.25rem !important;
    }
   
    .my-xl-2 {
      margin-top: 0.5rem !important;
      margin-bottom: 0.5rem !important;
    }
   
    .my-xl-3 {
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
   
    .my-xl-4 {
      margin-top: 1.5rem !important;
      margin-bottom: 1.5rem !important;
    }
   
    .my-xl-5 {
      margin-top: 3rem !important;
      margin-bottom: 3rem !important;
    }
   
    .my-xl-auto {
      margin-top: auto !important;
      margin-bottom: auto !important;
    }
   
    .mt-xl-0 {
      margin-top: 0 !important;
    }
   
    .mt-xl-1 {
      margin-top: 0.25rem !important;
    }
   
    .mt-xl-2 {
      margin-top: 0.5rem !important;
    }
   
    .mt-xl-3 {
      margin-top: 1rem !important;
    }
   
    .mt-xl-4 {
      margin-top: 1.5rem !important;
    }
   
    .mt-xl-5 {
      margin-top: 3rem !important;
    }
   
    .mt-xl-auto {
      margin-top: auto !important;
    }
   
    .me-xl-0 {
      margin-right: 0 !important;
    }
   
    .me-xl-1 {
      margin-right: 0.25rem !important;
    }
   
    .me-xl-2 {
      margin-right: 0.5rem !important;
    }
   
    .me-xl-3 {
      margin-right: 1rem !important;
    }
   
    .me-xl-4 {
      margin-right: 1.5rem !important;
    }
   
    .me-xl-5 {
      margin-right: 3rem !important;
    }
   
    .me-xl-auto {
      margin-right: auto !important;
    }
   
    .mb-xl-0 {
      margin-bottom: 0 !important;
    }
   
    .mb-xl-1 {
      margin-bottom: 0.25rem !important;
    }
   
    .mb-xl-2 {
      margin-bottom: 0.5rem !important;
    }
   
    .mb-xl-3 {
      margin-bottom: 1rem !important;
    }
   
    .mb-xl-4 {
      margin-bottom: 1.5rem !important;
    }
   
    .mb-xl-5 {
      margin-bottom: 3rem !important;
    }
   
    .mb-xl-auto {
      margin-bottom: auto !important;
    }
   
    .ms-xl-0 {
      margin-left: 0 !important;
    }
   
    .ms-xl-1 {
      margin-left: 0.25rem !important;
    }
   
    .ms-xl-2 {
      margin-left: 0.5rem !important;
    }
   
    .ms-xl-3 {
      margin-left: 1rem !important;
    }
   
    .ms-xl-4 {
      margin-left: 1.5rem !important;
    }
   
    .ms-xl-5 {
      margin-left: 3rem !important;
    }
   
    .ms-xl-auto {
      margin-left: auto !important;
    }
   
    .p-xl-0 {
      padding: 0 !important;
    }
   
    .p-xl-1 {
      padding: 0.25rem !important;
    }
   
    .p-xl-2 {
      padding: 0.5rem !important;
    }
   
    .p-xl-3 {
      padding: 1rem !important;
    }
   
    .p-xl-4 {
      padding: 1.5rem !important;
    }
   
    .p-xl-5 {
      padding: 3rem !important;
    }
   
    .px-xl-0 {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
   
    .px-xl-1 {
      padding-right: 0.25rem !important;
      padding-left: 0.25rem !important;
    }
   
    .px-xl-2 {
      padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;
    }
   
    .px-xl-3 {
      padding-right: 1rem !important;
      padding-left: 1rem !important;
    }
   
    .px-xl-4 {
      padding-right: 1.5rem !important;
      padding-left: 1.5rem !important;
    }
   
    .px-xl-5 {
      padding-right: 3rem !important;
      padding-left: 3rem !important;
    }
   
    .py-xl-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
   
    .py-xl-1 {
      padding-top: 0.25rem !important;
      padding-bottom: 0.25rem !important;
    }
   
    .py-xl-2 {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
    }
   
    .py-xl-3 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }
   
    .py-xl-4 {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
    }
   
    .py-xl-5 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }
   
    .pt-xl-0 {
      padding-top: 0 !important;
    }
   
    .pt-xl-1 {
      padding-top: 0.25rem !important;
    }
   
    .pt-xl-2 {
      padding-top: 0.5rem !important;
    }
   
    .pt-xl-3 {
      padding-top: 1rem !important;
    }
   
    .pt-xl-4 {
      padding-top: 1.5rem !important;
    }
   
    .pt-xl-5 {
      padding-top: 3rem !important;
    }
   
    .pe-xl-0 {
      padding-right: 0 !important;
    }
   
    .pe-xl-1 {
      padding-right: 0.25rem !important;
    }
   
    .pe-xl-2 {
      padding-right: 0.5rem !important;
    }
   
    .pe-xl-3 {
      padding-right: 1rem !important;
    }
   
    .pe-xl-4 {
      padding-right: 1.5rem !important;
    }
   
    .pe-xl-5 {
      padding-right: 3rem !important;
    }
   
    .pb-xl-0 {
      padding-bottom: 0 !important;
    }
   
    .pb-xl-1 {
      padding-bottom: 0.25rem !important;
    }
   
    .pb-xl-2 {
      padding-bottom: 0.5rem !important;
    }
   
    .pb-xl-3 {
      padding-bottom: 1rem !important;
    }
   
    .pb-xl-4 {
      padding-bottom: 1.5rem !important;
    }
   
    .pb-xl-5 {
      padding-bottom: 3rem !important;
    }
   
    .ps-xl-0 {
      padding-left: 0 !important;
    }
   
    .ps-xl-1 {
      padding-left: 0.25rem !important;
    }
   
    .ps-xl-2 {
      padding-left: 0.5rem !important;
    }
   
    .ps-xl-3 {
      padding-left: 1rem !important;
    }
   
    .ps-xl-4 {
      padding-left: 1.5rem !important;
    }
   
    .ps-xl-5 {
      padding-left: 3rem !important;
    }

  }
  
  @media (max-width: 576px){
    .login_form{
      padding-top: 0 !important;
    }
    button.emercado_background_color_1.text-white.close{
      margin-right: 4px !important;
      margin-top: 4px !important;
      position: absolute;
      right: 0 !important;
      z-index: 1;
      top: 0 !important;
    }
    .footer_icon{
      display: none !important;
    }
    button.emercado_background_color_1.text-white.px-2.py-1.close {
      font-size: 20px;
      background-color: transparent !important;
      color: black !important;
      margin-top: 0 !important;
    }
  }

  @media (max-width: 480px){
    #example_paginate{
      margin: 0;
      white-space: nowrap;
      overflow-x: scroll !important;
      overflow-y: hidden !important;
    }
  }
  select.form-select {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }