/*****************globals*************/
body {
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden; 
  overflow-y: auto !important;
}
: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;
}
  
img {
  max-width: 100%; 
}

@media screen and (max-width: 996px) {
  .preview {
    margin-bottom: 20px; 
  }
  .no_items_yet{
    position:  relative !important;
    bottom: calc(100vw * 100/1906) !important;
  }
}
  
.tab-content {
  overflow: hidden; 
}

.tab-content img {
  height: 250px;
  width: 100%;
  object-fit: contain; 
}

.tab-content img.item_img {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 100px !important;
  border-radius: 10.714px !important;
  object-fit: cover;
}

 
.card {
  margin-top: 15px;
  background: #eee;
  padding: 3em;
  line-height: 1.5em; 
}
  
@media screen and (min-width: 997px) {
  .wrapper {
    display: flex; 
  } 
}
  
.product-title, .price, .sizes, .colors {
  text-transform: UPPERCASE;
  font-weight: bold; 
}
  
.checked, .price span {
  color: #ff9f1a; 
}
  
.product-title, .rating, .product-description, .price, .vote, .sizes {
  margin-bottom: 15px; 
}
  
.product-title {
  margin-top: 0; 
}
  
.size {
  margin-right: 10px; 
}
.size:first-of-type {
  margin-left: 40px; 
}
  
.color {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 2em;
  width: 2em;
  border-radius: 2px; 
}
.color:first-of-type {
  margin-left: 20px; 
}
  
.add-to-cart, .like {
  background: #ff9f1a;
  padding: 1.2em 1.5em;
  border: none;
  text-transform: UPPERCASE;
  font-weight: bold;
  color: var(--light-cariton-color);
}
.add-to-cart:hover, .like:hover {
  background: #b36800;
  color: var(--light-cariton-color); 
}
  
.not-available {
  text-align: center;
  line-height: 2em; 
}

.not-available:before {
  font-family: 'Poppins', sans-serif;
  content: "\f00d";
  color: var(--light-cariton-color); 
}
  
.orange {
  background: #ff9f1a; 
}

.green {
  background: #85ad00; 
}

.blue {
  background: #0076ad; 
}

.tooltip-inner {
  padding: 1.3em; 
}

.tab-content>.active {
  display: block;
  visibility: visible;
  text-align: center;
}

.vertical {
  border-left: 1px solid rgb(80, 80, 80);
  height: 200px;
  position:absolute;
  left: 50%;
}

.header__navbar-user-item--separate {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

button.product-variation {
  border: 1px solid var(--primary-cariton-color);
  background: #FBFCFF;
  border-radius: 5px;
  width: -webkit-fill-available;
  height: auto;
  padding: 5px 10px;
  font-size: 12px;
}

/* button.product-variation:hover {
  color: var(--primary-cariton-color);
  border-color: var(--primary-cariton-color);
  cursor: pointer;
}

button.product-variation:focus {
  color: var(--primary-cariton-color);
  border-color: var(--primary-cariton-color);
}

button.product-variation:active {
  color: var(--primary-cariton-color);
  border-color: var(--primary-cariton-color);
} */

i.bi.bi-truck {
  font-size: x-large;
  color: var(--primary-cariton-color);
}

i.bi.bi-ticket {
  font-size: 30px;
  display: block;
  background-color: #ff6a207c;
}

span.off {
  position: absolute;
  margin-top: 9px;
  color: var(--dark-cariton-color);
}

.mini-vouchers__mask {
  height: 100%;
  width: calc(100% + 1px);
  background: linear-gradient(90deg,hsla(0,0%,100%,.001) 80%,var(--light-cariton-color));
  z-index: 1;
}

.voucher-ticket--seller-mini-solid {
  cursor: default;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background: var(--primary-cariton-color);
  padding: 9px 1px;
  border: 0;
  white-space: nowrap;
  font-size: 10px;
  color: var(--light-cariton-color) !important;
}

.voucher-ticket--seller-mini-solid:after {
  right: -3px;
}
.voucher-ticket--seller-mini-solid:after, .voucher-ticket--seller-mini-solid:before {
  content: "";
  width: 6px;
  height: calc(100% - 5px);
  position: absolute;
  top: 2.5px;
  background-image: radial-gradient(var(--light-cariton-color) 2px,transparent 0);
  background-size: 6px 6px;
  background-position-x: -6px;
}

.voucher-ticket--seller-mini-solid:before {
  left: -3px;
}
.voucher-ticket--seller-mini-solid:after, .voucher-ticket--seller-mini-solid:before {
  content: "";
  width: 6px;
  height: calc(100% - 5px);
  position: absolute;
  top: 2.5px;
  background-image: radial-gradient(var(--light-cariton-color) 2px,transparent 0);
  background-size: 6px 6px;
  background-position-x: -6px;
}

/* carousel */
.multi-item-carousel .carousel-inner > .item {
  transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
  left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
  left: 33%;
}
.multi-item-carousel .carousel-inner .next {
  left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
  left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
    transition: 500ms ease-in-out all;
    -webkit-backface-visibility: visible;
            backface-visibility: visible;
    transform: none!important;
  }
}
.multi-item-carousel .carouse-control.left,
.multi-item-carousel .carouse-control.right {
  background-image: none;
}

.table-wrap {
  overflow-x: auto; 
}

.table {
  min-width: 1000px !important;
  width: 100%;
  background: var(--light-cariton-color);
  -webkit-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
  -moz-box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29);
  box-shadow: 0px 5px 12px -12px rgba(0, 0, 0, 0.29); }
  .table thead.thead-primary {
    background: var(--primary-cariton-color); 
  }
  .table thead th {
    border: none;
    padding: 30px;
    font-size: 13px;
    font-weight: 500;
    color: var(--light-cariton-color); }
  .table tbody tr {
    margin-bottom: 10px; }
  .table tbody th, .table tbody td {
    border: none;
    padding: 30px;
    font-size: 14px;
    background: var(--light-cariton-color);
    border-bottom: 4px solid #f8f9fd;
    vertical-align: middle; }
  .table tbody td.quantity {
    width: 10%; }
  /* .table tbody td .img {
    width: 50px;
    height: 30px; } */
  div .email span {
    display: block; 
    text-transform: capitalize;
  }

    div .email span:last-child {
      font-size: 12px;
      color: rgba(0,0,0,.54);
      text-transform: uppercase;
    }
    
  .table tbody td .close span {
    font-size: 12px;
    color: #dc3545; }

select{
  border: 1px solid var(--primary-cariton-color);;
}


/*** nav ***/
.nav li {  
  display: inline-block;
  position: relative;
  color: var(--light-cariton-color);
  /* background: var(--primary-cariton-color); */
  /* padding: 10px 0px; */
  text-align: center;
  /* width: 70px; */
  border-radius: 3px; 
}

.nav li:hover {
  cursor: pointer;
}

/*** main content ***/

/* .content {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;
  text-align: center;
} */

/*** hide content and show on click ***/

.content-pick-up , .content-dine-in, .content-deliver { display: none; }
.show { display: block; }


.pick-up, .dine-in, .deliver {
  width: 30%;
  /* height: 50px; */
  margin-bottom: 4px;
  background: var(--primary-cariton-color);
}

.cart_voucher{
  display: flex;
  align-items: center;
}

.dropdown-menu-arrow_voucher::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--light-cariton-color);
  position: absolute;
  top: -6px;
  left: 30px;
  transform: rotate(45deg);
  border-top: 1px solid #eaedf1;
  border-left: 1px solid #eaedf1;
}

/* .vchr {
  margin: 0;
  padding: 0 0 2.75rem;
} */

/* .see-voucher {
  width: 28rem;
} */
.see-voucher {
  position: relative;
}

.see-voucher_left {
  background: linear-gradient(180deg,var(--vc-card-left-border-color,var(--primary-cariton-colors)) var(--vc-card-sawtooth-margin,.25rem),transparent 0,transparent calc(100% - var(--vc-card-sawtooth-margin, .25rem)),var(--vc-card-left-border-color,var(--primary-cariton-colors)) calc(100% - var(--vc-card-sawtooth-margin, .25rem))) 0 0 /0.0625rem 100% no-repeat,linear-gradient(180deg,var(--vc-card-left-fill-color,var(--light-cariton-color)) var(--vc-card-sawtooth-margin,.25rem),transparent 0,transparent calc(100% - var(--vc-card-sawtooth-margin, .25rem)),var(--vc-card-left-fill-color,var(--light-cariton-color)) calc(100% - var(--vc-card-sawtooth-margin, .25rem))) 0 0/100% 100% no-repeat;
  box-sizing: border-box;
  height: 100%;
  left: 30;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: var(--vc-card-height,7.375rem);
}
.see-voucher_sawtooth {
  background: linear-gradient(180deg,transparent calc(var(--vc-card-radius, .25rem)*2),var(--vc-card-left-border-color,var(--primary-cariton-colors)) 0) 0 0.0625rem /0.0625rem calc(var(--vc-card-radius, .25rem)*2 + var(--vc-card-gap, .125rem)) repeat-y,radial-gradient(circle at 0 var(--vc-card-radius,.25rem),transparent 0,transparent calc(var(--vc-card-radius, .25rem) - 0.0625rem),var(--vc-card-left-border-color,var(--primary-cariton-colors)) 0,var(--vc-card-left-border-color,var(--primary-cariton-colors)) var(--vc-card-radius,.25rem),var(--vc-card-left-fill-color,var(--light-cariton-color)) 0) 0 0.0625rem /100% calc(var(--vc-card-radius, .25rem)*2 + var(--vc-card-gap, .125rem)) repeat-y;
  bottom: calc(var(--vc-card-sawtooth-margin, .25rem) - 0.0625rem);
  position: absolute;
  top: calc(var(--vc-card-sawtooth-margin, .25rem) - 0.0625rem);
  width: 100%;
}

.see-voucher_right {
  background-color: var(--vc-card-background-color,var(--light-cariton-color));
  border-left: none;
  border-top-right-radius: 0.125rem;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - var(--vc-card-height, 7.375rem));
}

.see-voucherright_s {
  border: 0.0625rem solid transparent;
  border-radius: 0.125rem;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.see-voucher_template {
  border: 0.0625rem solid transparent;
  border-left: none;
  box-shadow: .125rem .125rem .3125rem rgba(0,0,0,.07);
  box-sizing: border-box;
  display: flex;
  position: relative;
  transition: background 1s ease;
  padding: 5px;
}

.see-voucher_template_left {
  align-items: center;
  border-right: 0.0625rem dashed var(--primary-cariton-color);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 7rem;
}

.vchr_logo {
  align-items: center;
  display: flex;
  justify-content: center;
}

.vchr_round {
  border: 0.0625rem solid #efefef;
  border-radius: 50%;
}

.vchr_logs {
  display: block;
  height: 5rem;
  width: 5rem;
}

.see-voucher_template_middle {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.sv-title-text {
  color: var(--dark-cariton-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv_subtitle {
  -webkit-line-clamp: 2;
}

.sv_subtitle {
  color: var(--dark-cariton-color);
  font-size: 11px;
  font-weight: 600;
  line-height: 1rem;
  text-align: unset;
  white-space: unset;
  word-break: break-word;
}

.sv-label {
  display: flex;
  margin: .3125rem 0 .25rem 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

span.sv-ends {
  font-size: 10px;
  color: #FE294D;
  font-weight: 500;
}

.vhr {
  position: absolute;
  bottom: 40px;
  background: var(--light-cariton-color);
  left: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border-top: 1px solid rgba(0,0,0,.09);
}

/* .radio, .checkbox {
  position: relative;
  display: block;
  margin-top: 20px !important;
  margin-bottom: 10px;
} */

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

.checkbox label,
.radio label {
  margin-top: 5px;
  margin-bottom: 5px;
}

.checkbox .indicator,
.checkbox-inline .indicator,
.radio .indicator,
.radio-inline .indicator {
  position: relative;
}

.checkbox .indicator:before,
.checkbox-inline .indicator:before,
.radio .indicator:before,
.radio-inline .indicator:before {
  content: '';
  border: 2px solid #888;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-top: -5px;
  margin-right: 10px;
  text-align: center;
}

.checkbox input:checked + .indicator:before,
.checkbox-inline input:checked + .indicator:before {
  border-color:var(--primary-cariton-colors);
  background-color: var(--primary-cariton-color);
}

.checkbox input:disabled + .indicator:before,
.checkbox-inline input:disabled + .indicator:before {
  border-color: var(--primary-cariton-color);
  box-shadow: inset 0px 0px 0px 4px var(--light-cariton-color);
}

.radio input + .indicator:before,
.radio-inline input + .indicator:before {
  border-radius: 50%;
}

.radio input:checked + .indicator:before,
.radio-inline input:checked + .indicator:before {
  border-color: var(--primary-cariton-color);
  background: var(--primary-cariton-color);
  box-shadow: inset 0px 0px 0px 5px var(--light-cariton-color);
}

.checkbox input:focus + .indicator,
.checkbox-inline input:focus + .indicator,
.radio input:focus + .indicator,
.radio-inline input:focus + .indicator {
  outline: 0px solid #ddd;
  /* focus style */
}