/*.btn-primary {
    background-image: linear-gradient(45deg,#de9124,#f8e352)!important;
	background-size: 100%!important;
	-webkit-background-clip: text!important;
    -moz-background-clip: text!important;
    -webkit-text-fill-color: transparent!important; 
    -moz-text-fill-color: transparent!important;
    color: #FFFFFF !important;
	border:0;
	border-color:none!important;
}*/
/*html, body {
    max-width: 100%;
    overflow-x: hidden;
}*/
/*html {
  scroll-behavior: smooth;
}*/
p {
	margin-bottom: 3px!important;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.text-grey {
	color:#A3A3A3 !important;
}
.text-gold {
	color:#C6A56A !important;
}
.text-orange {
	color:#FFBB01 !important;
}
.border-gradient {
  border: 1px solid;
  border-image-slice: 1;
  border-width: 1px;
}
.border-gradient-gold {
  border-image-source: linear-gradient(45deg,#de9124,#f8e352);
}
.btn-outline-gold { border-color:#f8e352; color:#f8e352;  }
.flexbox {
	display: flex;
	flex-direction: column;
	height: auto;
}
.modal {
	z-index: 9999!important;
}
.align-btm {
	position: absolute;
	width: 90%;
	bottom:100px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
}
.bg-background {
    background: #000!important;
	border-bottom:none;
}
.bg-grey {
	background: #1B1A18!important;
	border-bottom:none;
}
.bg-gradient {
    /*background: -webkit-linear-gradient(45deg,#222,#121212)!important;*/
	background-image: linear-gradient(to right,#222,#121212)!important;
	border-bottom:none!important;
	border:0!important;
}
.btn-primary {
  border-radius: 30px; 
  background: #343434!important;
  border: 0;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background: #444 !important;
	border:0;
}
.btn-gold {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 10px;
  z-index: 99;
}
.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.btn-gold .btn {
  font-size:16px;
  font-weight: bold;
  background-image: linear-gradient(90deg,#de9124,#f8e352)!important;
  background-size: 100%!important;
  -webkit-background-clip: text!important;
  -moz-background-clip: text!important;
  -webkit-text-fill-color: transparent!important; 
  -moz-text-fill-color: transparent!important;
  color: #FFFFFF !important;
  border:0;
  border-color:none!important;
}

.btn-select {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 7px 20px!important;
  z-index: 99;
}
.btn-select::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#fff,#fff); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;	
  z-index: -1;
}
.btn-select2 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 7px 20px!important;
  z-index: 99;
}
.btn-select2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;	
  z-index: -1;
}
.btn-select2 {
  background-image: linear-gradient(90deg,#de9124,#f8e352)!important;
  background-size: 100%!important;
  -webkit-background-clip: text!important;
  -moz-background-clip: text!important;
  -webkit-text-fill-color: transparent!important; 
  -moz-text-fill-color: transparent!important;
}
/*.btn-select {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 6px 20px;
  z-index: 99;
  color:#ccc;
  border:solid 1px #ccc;
  border-radius:10px;
}*/
.btn-white {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 6px 20px;
  z-index: 99;
  color:#fff;
  border:solid 1px #fff;
  border-radius:10px;
}
.btn-grey {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 10px;
	z-index: 99;
}
.btn-grey::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px; 
  padding: 1px; 
  background:linear-gradient(45deg,#999,#666); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.btn-grey .btn {
  font-size:16px;
  font-weight: bold;
  background-image: linear-gradient(90deg,#999,#666)!important;
  background-size: 100%!important;
  -webkit-background-clip: text!important;
  -moz-background-clip: text!important;
  -webkit-text-fill-color: transparent!important; 
  -moz-text-fill-color: transparent!important;
  color: #FFFFFF !important;
  border:0;
  border-color:none!important;
}
.btm-bg-grey {
	background: #222222;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

h1 { font-size:24px; }
h2.title { 
	background-image: linear-gradient(45deg,#de9124,#f8e352);
	background-size: 100%;
	-webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}
h3.title { 
	font-size:18px!important;
	color:#BFAF91!important;
}
h4.title { 
  line-height: 100%;
  background-image: linear-gradient(45deg,#de9124,#f8e352);
  background-size: 100%;
  -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

body.dark-mode .appHeader {
    background: #161129;
    color: #fff;
    border-bottom-color:#222!important;
	z-index: 9999!important;
}
.appHeader .pageTitle {
    font-size: 20px;
    font-weight: 500;
    padding: 0 10px;
	background: -webkit-linear-gradient(45deg,#de9124,#f8e352);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.appHeader.header-white .pageTitle {
	-webkit-background-clip: text;
	-webkit-text-fill-color:#fff;
}

body.dark-mode {
    /*background: -webkit-linear-gradient(45deg,#222,#121212);*/
	background-image: linear-gradient(to right,#222,#121212)!important;
    /*color: #8e8e8e;*/
	color: #ccc;
}
[data-page="login"] {
    background-image: url("../img/bg-login.png")!important;
    background-position: center center!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
}
[data-page="login"].dark-mode {
	background-image: url("../img/bg-login.png")!important;
    background-position: center center!important;
	background-size: cover!important;
	background-repeat: no-repeat!important;
}
[data-page="login"] .section {
    padding: 0 24px;
}
[data-page="login"] .card {
   background: none!important;
}
[data-page="shop"] {
    background-image: url("../img/bg-gold-dust.png")!important;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background-attachment: fixed!important;
  height: 100vh;
}
[data-page="shop"].dark-mode {
    background-image: url("../img/bg-gold-dust.png")!important;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background-attachment: fixed!important;
  height: 100vh;
}

.headerButton img { width: 24px; height: 24px;}

/*Tabs*/

body.dark-mode .nav-tabs.lined .nav-item .nav-link.active {
    color: #FFBB01;
}
body.dark-mode .nav-tabs.lined .nav-item .nav-link {
    color: #ccc;
}
.nav-tabs.lined .nav-item .nav-link {
    font-size:18px!important;
}
.nav-tabs.lined .nav-item .nav-link.active {
    color: #6236FF;
    background: transparent;
    border-bottom-color: #FFBB01!important;
}

body.dark-mode .card {
    background: none;
}
body.dark-mode .appBottomMenu {
  background: #000;
}
.appBottomMenu .nav-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 0 auto;
    background-size: cover;	
	/*opacity: 0.5;*/
}
.appBottomMenu .item.active .icon, .appBottomMenu .item.active ion-icon, .appBottomMenu .item.active strong {
    color: #F5CD3C!important;
    font-weight: 500;
}

.icon-home {
  background-image: url("../img/svg/home.svg");
}
.appBottomMenu:hover .icon-home,
.appBottomMenu:focus .icon-home, .appBottomMenu a.active .icon-home {
  background-image: url("../img/svg/home-active.svg");
}
.icon-shop {
  background-image: url("../img/svg/shop.svg");
}
.appBottomMenu:hover .icon-shop,
.appBottomMenu:focus .icon-shop, .appBottomMenu a.active .icon-shop {
  background-image: url("../img/svg/shop-active.svg");
}
.icon-membership {
  background-image: url("../img/svg/membership.svg");
}
.appBottomMenu:hover .icon-membership,
.appBottomMenu:focus .icon-membership, .appBottomMenu a.active .icon-membership {
  background-image: url("../img/svg/membership-active.svg");
}
.icon-cart {
  background-image: url("../img/svg/cart.svg");
}
.appBottomMenu:hover .icon-cart,
.appBottomMenu:focus .icon-cart, .appBottomMenu a.active .icon-cart {
  background-image: url("../img/svg/cart-active.svg");
}
.icon-profile {
  background-image: url("../img/svg/profile.svg");
}
.appBottomMenu:hover .icon-profile,
.appBottomMenu:focus .icon-profile, .appBottomMenu a.active .icon-profile {
  background-image: url("../img/svg/profile-active.svg");
}

[data-page="home"] .blog-card .text {
    position: relative;
    bottom: 0;
    padding: 12px 12px;
}
[data-page="home"] .blog-card .title {
  font-size: 13px;
}

.home-main-box { 
	color:#fff;
	text-align: center;
	font-size: 12px;
	line-height: 12px;
	border-radius: 10px;
  cursor: pointer;
}
.home-main-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 10px;
}
.home-main-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; 
}
.home-main-box .icon {
  padding: 5px;
}
.home-main-box .icon img { max-width: 40px; max-height: 40px; }

body.dark-mode .home-feature-icon .icon-box {
  background: #363636;
}
.home-feature-icon { 
  color:#fff;
  text-align: center;
  font-size: 12px;
  line-height: 12px;
}
.home-feature-icon .icon-box {
  background: #ffffff;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 9%);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 8px;
}
.home-feature-icon .icon-box img { max-width: 48px; max-height: 48px; }

.home-feature-icon.disabled { 
  cursor:not-allowed;
  opacity: 0.4; /* Standard compliant browsers */
  -moz-opacity: 0.4; /* Firefox and Mozilla browsers */
  -webkit-opacity: 0.4; /* WebKit browser e.g. Safari */
  filter: alpha(opacity=40); /* For IE8 and earlier */
  pointer-events: none;
}

a .category-card { color:#fff; }
.category-card {
  position: relative;
  background: #000;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);
  display: table;
  text-align: center;
  border-radius: 10px;
  font-weight: bold;
  vertical-align: middle;
  height: 100%;
}
.category-card img { opacity:0.5; }
.category-card span {
  position: absolute;
  left: 0;
  right: 0;
/*  top: 0;
  bottom: 0;*/
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
.product-card {
  position: relative;
  background: #1B1A18;
  border-radius: 10px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 10!important;
}
.product-card .feature-product {
  position: relative;
  padding: 14px 14px 18px 14px; 
  background:linear-gradient(45deg,#4C483D,#695D51); 
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.product-card .feature-product h4 { font-size:14px; font-weight: 500; }
.product-card .feature-product .title { min-height: 25px; }
.product-card .feature-product .rating { font-size:15px; padding: 10px 0; color:#F3E1D5; }
@media only screen and (max-width: 768px) {
  .product-card .feature-product .rating { font-size:12px; padding: 10px 0; color:#F3E1D5; }
}
.product-card .feature-product .rating .checked {
  color: #FFBB01;
}
.product-card .feature-product .rating .pts {
  line-height: 100%;
  background-image: linear-gradient(45deg,#de9124,#f8e352);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
  font-weight: 500;
}
.product-card .feature-product .price sup { color:#FFBB01; font-size:14px; top:unset; }
.product-card .feature-product .price { 
	font-weight: 500; 
	font-size:18px; 
	color:#FCFBF7; 
}
.product-card .feature-product .add-fav {
  position: absolute;
  top:-10px;
  right:10px;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  background: #FCEBBF;
  transition: all 0.5s ease;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  z-index: 10!important;
}
.share-container, .wishlist-container{
  position: relative;
}
.share {
  position: absolute;
  top:-35px;
  right:10px;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  background: #FFBB01;
  transition: all 0.5s ease;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  z-index: 1000!important;
  color: white;
}
.wishlist-icon {
  position: absolute;
  top:-35px;
  right:60px;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  background: #FFBB01;
  transition: all 0.5s ease;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  z-index: 1000!important;
  color: white;
}
.product-card .feature-product .add-fav .icon-heart {
  font-size: 18px;
  color: #000;
  position: relative;
  transition: all 0.5s ease-in-out;
}
.product-card .feature-product .add-fav .icon-heart2 {
  font-size: 18px;
  color: #FF396F;
  position: relative;
}
.product-card .feature-product .add-fav input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.product-card .product {
  position: relative;
  padding: 14px 14px 18px 14px; 
  background:linear-gradient(45deg,#4C483D,#695D51); 
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.product-card .product h4 { font-size:14px; font-weight: 500; }
.product-card .product .title { min-height: 25px; }
.product-card .product .rating { font-size:15px; padding: 10px 0; color:#F3E1D5; }
.product-card .product .rating .checked {
  color: #FFBB01;
}
.product-card .product .price sup { color:#FFBB01; font-size:14px; top:-8px; }
.product-card .product .price { 
	font-weight: 500; 
	font-size:1.75rem; 
	color:#FCFBF7; 
}
.product-card .product .add-fav {
  position: absolute;
  top:-10px;
  right:10px;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  background: #FCEBBF;
  transition: all 0.5s ease;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  z-index: 10!important;
}
.product-card .product .add-fav .icon-heart {
  font-size: 18px;
  color: #000;
  position: relative;
  transition: all 0.5s ease-in-out;
}
.product-card .product .add-fav .icon-heart2 {
  font-size: 18px;
  color: #FF396F;
  position: relative;
}
.product-card .product .add-fav input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.wishlist .product-card .product {
  position:static;
}
.product-card .product .remove {
  position: absolute;
  top:10px;
  right:10px;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  background: #FCEBBF;
  transition: all 0.5s ease;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  z-index: 10!important;
}
.product-card .product .remove .icon-heart {
  font-size: 18px;
  color: #000;
  position: relative;
  transition: all 0.5s ease-in-out;
}
.product-card .product .remove .icon-heart2 {
  font-size: 18px;
  color: #FF396F;
  position: relative;
}
.product-card .product .remove input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.cart-card {
  position: relative;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.cart-card .product-img {
  flex: 2;
  width:100px;
  max-width:100px;
  height: 100px;
  position: relative;
  background: #1B1A18;
  border-radius: 10px;
}
.cart-card .product-img::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 10!important;
}
.cart-card .product {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.cart-card .product .delete-cart-btn{
  color: #f8e352;
  cursor: pointer;
}
.cart-card .product-txt {
  flex: 2;
  position: relative; 
  width:auto;
  padding: 10px 10px 10px 10px; 
}
.cart-card .product-txt h4 { font-size:14px; font-weight: 500; }
.cart-card .product-txt .title { }
.cart-card .product-txt .price { 
	font-size:16px;
	font-weight: 500;
  text-wrap:nowrap;
}
.cart-card .product-quantity { padding-top: 10px; display: flex;align-items: center;}
.cart-card .product-quantity button {
  margin: 2px;
  padding: 0px;
  width: 22px; height: 22px;
  background:linear-gradient(45deg,#de9124,#f8e352); 
  border-radius:6px;
  cursor: pointer;
  border: none;
}
.cart-card .product-quantity input {
  text-align: center;
  width: 40px;
  margin: 2px;
  color: #fff;
  font-weight: bold;
  background: none;
  border: none;
}
.cart-total {
	padding: 30px 0 20px;
	color:#CCCCCC;
}
.cart-total table { width: 95%; margin:0 auto; }
.cart-total tr td:first-child { text-align: left; }
.cart-total tr td:last-child { text-align: right; }
.cart-total tfoot tr td:first-child { color:#fff; font-size:20px; font-weight: bold;}
.cart-total tfood tr td:last-child { 
	font-weight: 600;
    font-size: 35px!important;
    color: #FCFBF7;
}
.cart-total sup {
    color: #FFBB01;
    font-size: 14px;
    top: -12px;
}
.coupon { margin: 20px 0; display: flex; }
.coupon img { width: 200px; } 
.coupon .info { display: flex; flex-direction: column; padding: 10px 0 10px 20px; }
.coupon .info .expiry { font-size:12px; }
.coupon .info .button {
	display: inline-flex;
    align-items: center;
    /*justify-content: center;*/
	font-size: 13px;
	font-weight: 500;
	margin: 10px 0;
}
.coupon-terms .modal-header {
	position: relative!important;
	background:url("../img/coupon-top.jpg")!important;
	background-image: url("../img/coupon-bg.jpg")!important;
	background-position: bottom center!important;
	background-size: contain;
	min-height: 200px!important;
	border:0!important;
}
.coupon-terms .modal-content { padding-top: 0!important; }

.coupon-terms table {
	width: 90%;
	margin: 0 auto;
	font-size:12px;
}
.coupon-terms table tr td:first-child {
	text-align: left;
}
.coupon-terms table tr td:last-child {
	text-align: right;
}

.checkout .active .card {
	border:solid 1px #999; 
}
.checkout .card { margin-top: 10px; }
.checkout p{color: white};
.checkout h3 { margin: 0; padding: 0; }
.payment-option { display:flex; justify-content: space-between;align-items: center; }
.payment-option img { width:24px; height: 24px; }

.progressbar { width: 100%; margin:30px auto 50px 0; padding: 0; }
.progressbar li img {
  width: 15px;
}
.progressbar li {
  list-style-type: none;
  width: 33%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 24px;
  height: 24px;
  content: '';
  line-height: 24px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color:#5A5A5A;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 12px;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: #FFBB01;
}
.progressbar li.active:before {
  border-color: #FFBB01;
	background-color: #FFBB01;	
}
.progressbar li.active+li:after {
  background-color: #FFBB01;
}



.phone-wrapper .form-control { padding: 0 0 0 60px!important; }
.phone-wrapper .phone-prefix { position: absolute; top:8px; left: 0; }
.checkbox-terms { margin-top: 20px; align-items: center;}
.checkbox-terms p { line-height: unset; margin: 0; padding: 0; margin-left: 8px;text-align: justify; margin-bottom: unset!important;}

.blog-card { position:relative; background: none!important; }
.blog-card img { position: relative;}
.blog-card.recipe:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, 0.4);*/
  /*background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.8) 100%
  );*/
}

.blog-card.recipe .text {
    position: absolute;
    bottom: 0;
    padding: 12px 20px;
	z-index: 999;
}
.blog-card.recipe p.date {
	font-size:12px;
    color:#B7B7B7;
	margin-bottom: 0!important;
}
.blog-card.shop { margin: 10px 0;}
.blog-card.shop:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius:10px!important;	
}
.blog-card.shop .title {
    position: absolute;
	z-index: 999;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align: center;
}

.blog-card.listing { margin: 10px 0;}
.blog-card.listing:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.6) 100%
  );
  border-radius:10px!important;	
}
.blog-card.listing .title {
    position: absolute;
	z-index: 999;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align: center;
}

#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

/*Wallet*/

.wallet-balance {
  background: #333;
  background: url("../img/balance-bg.jpg") no-repeat center center;
  background-size: cover;
  padding: 30px;
  border-radius:10px
}
.wallet-balance .amount {
    font-weight: 600;
    font-size: 35px;
    color: #FCFBF7;
}
.wallet-balance .amount sup {
    color: #FFBB01;
    font-size: 14px;
    top: -12px;
  margin-right: 5px;
}
.wallet .wallet-header { display: flex; align-items: center; justify-content: space-between; }
.transaction { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.transaction h4 { margin: 0; padding: 0; }
.transaction img { width: 20px; height: 20px; margin-right: 20px; }
.transaction span { font-size:12px; }
.transaction .details { display: flex; }
.transaction .amount {
  padding: 4px 2px;
  border-radius:20px; 
  color:#fff; 
  font-weight: bold;
  width: 70px;
  text-align: center;
}
.middle-button { 
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  font-size:16px;
  background:linear-gradient(45deg,#de9124,#f8e352); 
  color:#000;
  border-radius: 10px;
  flex-direction: column;
}
.middle-button img { width: 30px; height: 30px; display: block; text-align: center; margin: 0 auto; }
.middle-button span { font-size:12px; text-align: center; line-height: 14px; margin-top: 5px; }

/*Product Details*/

.product-image {
	position: relative;
	background: #1B1A18;
	border-bottom-left-radius: 40px; 
	border-bottom-right-radius: 40px;
}
.product-image::before {
  content: "";
  position: absolute;
  left: -2px!important;
  right:-2px!important;
  top:-1px!important;
  inset: 0;
  border-bottom-left-radius: 40px; 
  border-bottom-right-radius: 40px;
  padding: 0 1px 1px 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 99;
  max-width: 100%;
  overflow-x: hidden;
}
.product-details {
	padding: 10px;
	color:#BCBCBC;
}
.product-details table {
	width: 100%;
	color:#fff;
	font-size:18px;
	font-weight: 500;
}
.product-details table.details tr td:first-child {
	width: 120px;
}
.product-details table.branch tr td:first-child {
	text-align: left;
}
.product-details table.branch tr th:last-child {
	text-align: center;
}
.product-details table.branch tr td:last-child {
	text-align: center;
}
.product-details table.branch thead th { border-bottom: solix 1px #ccc!important; }

.product-details .product-title {
	font-size:26px;
	font-weight: 500;
	color:#FCEBBF;
}
.product-details .rating { font-size:15px; padding: 10px 0; color:#F3E1D5; }
.product-details .rating .checked {
  color: #FFBB01;
}
.product-details .rating .pts {
  line-height: 100%;
  background-image: linear-gradient(45deg,#de9124,#f8e352);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent;
  font-weight: 500;
}
.product-details .bottom { 
	display:flex; 
	justify-content: space-between; 
	text-align: center;
	font-size:32px;
	color:#fff;
}
.product-details .quantity { position: relative; width:30%; background: #1B1A18; border-radius: 20px; border-color: #FFBB01!important; border: 1px solid;}
.product-details .price { position: relative; width: 65%; background: #1B1A18; border-radius: 20px; border: 1px solid;border-color: #FFBB01!important;}
.product-details .price sup { font-size: 16px; margin-right: 5px; color:#FFBB01; }
.product-details .member-price { position: relative; width: 65%; background: #1B1A18; border-radius: 20px; border: 1px solid;border-color: #999!important;}
.product-details .member-price sup { font-size: 16px; margin-right: 5px; color:#999; }
.product-details .member-price img {height: 24px;}

/*referral*/
.rewards .top { display:flex; justify-content: space-between; align-items: center; }
.rewards .top h3 { margin: 0; padding: 0; }
.rewards .coins { display:flex; border: solid 1px #666; border-radius: 10px; padding: 5px 10px; justify-content: center; align-items: center; }
.rewards .coins img { width: 20px; height: 20px; margin-right: 5px; }
.rewards .check-in {
	text-align: center;
	background: #434343;
	border-radius:10px;
	padding: 12px 8px 8px;
	height: 100%;
}
.rewards .check-in.active {
	background:linear-gradient(0deg,#de9124,#f8e352);
	color:#000!important;
}
.rewards .check-in.active h3 { color:#000!important; }
.rewards .check-in.active img {
	filter: brightness(0)!important;
}
.rewards .check-in img {
	display: block;
	margin: 0 auto;
	width: 40px;
}
.rewards .check-in span { font-size:11px; }
.rewards .check-in.day7 {
	display:flex;
	justify-content: center;
}
.rewards .check-in.day7 h3 { margin: 0; padding: 0; }
.rewards .check-in.day7 img {
	display: block;
	margin: 20px auto 0;
	width: 70px;
}
.rewards hr { margin: 5px 0!important; }
.rewards h3.title { 
	line-height: 100%;
	background-image: linear-gradient(45deg,#de9124,#f8e352);
	background-size: 100%;
	-webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.task { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.task h4 { margin: 0; padding: 0; }
.task img { width: 20px; height: 20px; margin-right: 20px; }
.task span { font-size:12px; }
.task .details { display: flex; }
.task .earn-points {
	background:linear-gradient(45deg,#de9124,#f8e352);
	padding: 4px 10px;
	border-radius:20px; 
	color:#fff; 
	font-weight: bold;
	width: 70px;
	text-align: center;
}
/*Membership*/

.membership { 
  position: relative;
  display: inline-block;
  z-index: 999!important;
  padding: 0 10px;
  margin: 0 auto;
  left: 50%; 
    transform: translateX(-50%);
}
.membership-card { 
  position: absolute; 
  bottom: 23%; 
  width: 76%;
  margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
.membership-card { display: flex; justify-content: space-between; color:#fff; align-items:flex-end; }
.membership-card .id { font-size:13px; }
.membership-card h2.level {
  font-size:30px;
  font-weight: 400;
  color:#fff;
}

.membership-progress .level { display: flex; text-align: center; align-items: center; margin: 30px 0; justify-content: center; }
.membership-progress .level div img { width: 90%; opacity: 0.5; }
.membership-progress .level span { color:#666; } 
.membership-progress .level div.active img { width: 100%; opacity: 1; }
.membership-progress .level div.active span { color:#fff; }
.membership-progress .progress { margin: 10px 0 10px;}
.membership-progress .progress .bg-points {
    background:linear-gradient(45deg,#de9124,#f8e352);
    color: #FFF;
}
.membership-progress .progress {
  height: 7px;
  background: #5A5A5A!important;
  border-radius: 10px;
}
.membership-progress .points {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  color:#7e7e7e; 
  font-weight: bold; 
  font-size:13px; 
}
.membership-progress .points-history { font-size:14px; }

.membership-details .nav-tabs.lined .nav-item {
  width:25%;
}
.membership-details .nav-item .nav-link {
  display:flex;
  flex-direction: column;
  height: auto!important;
}
.membership-details .nav-item .nav-link ion-icon {
  font-size: 28px!important;
}
.membership-details .nav-item .nav-link:not(.active) img {
  width:30px; height: 30px;
  filter: brightness(0) invert(100);
  -webkit-filter: brightness(0) invert(100);  
  opacity: 0.7;
}
.membership-details .nav-item .nav-link span {
  font-size:12px!important;
  margin-top: 5px;
}
.membership-details .nav-item .nav-link.active img {
  width:30px; height: 30px;
  /*filter:brightness(100%);
  -webkit-filter: brightness(100%);*/
  opacity: 1;
}

.membership-details .card .card-top { padding: 20px;  }
.membership-details .card .card-top.blue { background: -webkit-linear-gradient(250deg,#FFFFFF,#C8D7F3,#748ACD); }
.membership-details .card .card-top.silver { background: -webkit-linear-gradient(250deg,#FFFFFF,#E3E3E3,#9A9A9A); }
.membership-details .card .card-top.gold { background: -webkit-linear-gradient(250deg,#FFFFFF,#FFF5DD,#F7AD5D); }
.membership-details .card .card-top.emerald { background: -webkit-linear-gradient(250deg,#C8FCE7,#6AC590); }
.membership-details .card .card-top { color:#fff; }
.membership-details .card-top h3 {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
}
.membership-details .card-body { padding: 10px; }

.membership-benefits .link { font-size:18px; font-weight: bold; color:#FFBB01; }
.membership-benefits .points { display:flex; justify-content: space-between; align-items:flex-end; }
.membership-benefits .points h2 { margin: 0; font-size:24px; font-weight: bold; color:#FFBB01!important; }
.platform {
  /*margin-top: -50px;*/
  margin-top:-10%;
}
.membership-benefits {
  background:#1B1A18;
  padding: 30px 20px 50px;
}
.benefits { 
  margin: 20px 0; 
  padding: 5px; 
  display:flex; 
  flex-wrap: wrap;
  order:2;
}
.benefits img { width:50px; height: 50px; display: block; margin: 0 auto 10px; }
.benefits span { display: block; font-size: 16px; font-weight: 300; color:#B4B4B4; line-height: 16px!important; }
.benefits li { 
  list-style: none; 
  margin: 10px 0 20px; 
  text-align: center; 
  width:50%;
}

.points-history .date { background: #2B2B2B; padding: 10px 30px; color:#fff; }
.points-history .time { color:#B4B4B4; }
.points-history .details { display:flex; justify-content: space-between; align-items: center; padding: 15px 30px; }
.points-history .title { color:#fff; font-size:16px; font-weight: bold; }
.points-history .points { color:#FFBB01; font-size:18px; font-weight: bold; }
.points-history .transaction { margin-top: 0; font-size:12px; color:#999; line-height: 12px; margin-bottom:10px; }
.points-history hr { margin:0; }

/*Profile*/

.avatar-section {
	display: flex;
	padding: 0 20px;
	justify-content: space-between;
	align-items: center;
}
.edit-profile .avatar-section {
	display:inline-flex;
}
.edit-profile .card { background:none!important; }

.avatar-section .imaged::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352)!important; 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 99!important;
}
.avatar-section .profile {
	display:flex;
	align-items: center;
}
.avatar-section .profile span { display:block; }
.avatar-section .profile .name {
	font-size:16px;
	color:#fff;
}
.avatar-section .button {
    background: #838383;
    color: #222222;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    position:relative!important;
}
.avatar-section .button:hover {
  background-color: #f8e352;
}
.edit-profile .avatar-section .button { 
	position: absolute!important;
	width: 32px;
	height: 32px;
	font-size:20px;
	right:10px;
}
body.dark-mode .listview {
    color: #fff;
    background: none;
    border-top-color: #2d1f3b;
    border-bottom-color: #2d1f3b;
}
.listview li { 
	background:#383838;
	border-radius: 10px;
	margin: 10px 0;
}
.listview li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 10!important;
}
body.dark-mode .image-listview > li a.item {
    color: #fff !important;
	z-index:999;
}
body.dark-mode .card {
    background: #2E2E2E;
}
/*referral*/
.referral-code { 
	position: relative; 
	text-align: center; 
	width: 220px; 
	margin: 0 auto; 
	padding: 4px 10px; 
	font-weight: bold; 
	color:#fff;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.referral-code::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.referral-code input { margin-left: 10px; color:#fff; font-weight: bold; width:100px; background: none!important; border:0!important; }
.referral-code .btn-copy {
    /*background-color: #999;*/
	background:linear-gradient(45deg,#de9124,#f8e352); 
    color: #000!important;
    width: 80px;
    font-size: 14px;
    padding: 2px 2px;
    margin: 0 -4px 0 10px;
	border-radius:20px;
    /*vertical-align: top;*/
}
button.btn-copy:active {
  box-shadow: 0 5px #666;
  transform: translateY(2px);
}

/*Order*/

.order-card {
  position: relative;
  display:flex;
  justify-content: space-between;
  margin: 10px 0;
}
.order-card .product-img {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .order-card .product-img {
    width: 150px;
  }
}
/*.order-card .product-img::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 999!important;
}*/
.order-card .product {
  position: relative;
  align-items: center;
  display: flex;
}
.order-card .product-txt {
  position: relative; 
  width:auto;
  padding: 10px 10px 10px 10px; 
}
.order-card .product-txt h4 { font-size:14px; font-weight: 500; }
.order-card .product-txt .title { }
.order-card .product-txt .price { 
	font-size:18px;
	font-weight: 500;
	color:#FFBB01; 
}
.order-card .product-quantity { padding-top: 10px; }
.order-card .product-quantity {
    text-align: center;
    width: 24px;
    margin: 2px;
    color: #fff;
	font-weight: bold;
	background: none;
	border: none;
}

.order-total {
	padding: 30px 20px;
	color:#CCCCCC;
}
.order-total table { width: 95%; margin:0 auto; }
.order-total tr td:first-child { text-align: left; }
.order-total tr td:last-child { text-align: right; }
.order-total tfoot tr td:first-child { color:#fff; font-size:20px; font-weight: bold;}
.order-total tfood tr td:last-child { 
	font-weight: 600;
    font-size: 35px!important;
    color: #FCFBF7;
}
.order-total sup {
    color: #FFBB01;
    font-size: 14px;
    top: -12px;
}

/*saved cards*/
.creditcard { 
	position: relative;
	display: inline-block;
	z-index: 999!important;
	padding: 0 10px;
	margin: 0 auto;
	left: 50%; 
    transform: translateX(-50%);
	font-size:30px; 
	color:#fff; 
	font-weight: bold;
}
/*.creditcard-info { 
	position: absolute; 
	top: 100px; 
	left: 40px;
	width: 80%;
}*/
.creditcard .number { 
	position: absolute; 
	margin-left: auto;
	margin-right: auto;
	top:40%;
	right: 10%;
}
.creditcard .name { 
	position: absolute; 
	margin-left: auto;
	margin-right: auto;
	bottom:25%;
	left: 10%;
}
.creditcard .expiry { 
	position: absolute; 
	margin-left: auto;
	margin-right: auto;
	bottom:8%;
	right: 20%;
}
.modal.creditcard-info .modal-dialog .modal-content .modal-header {
    border-bottom:0!important;
    background-image: linear-gradient(to right,#222,#121212)!important;
}
.modal .modal-content {
    background-image: linear-gradient(to right,#222,#121212)!important;
}
.modal-close-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 3px;
    color: #fff;
}
.modal-close-button:hover{
  color: #f8e352;
}
.creditcard-info .label { color:#ccc!important; font-size: 16px!important;}
.creditcard-info .form-group.basic .form-control {
    background: #4E4E4E!important;
    border: none;
    border-bottom: 0!important;
    padding: 5px 30px 5px 15px!important;
	margin: 5px 0;
    border-radius: 10px!important;
    height: 50px!important;
    color: #27173E;
    font-size: 15px;
}
.creditcard-info ::placeholder {
    color: #999!important;
}
.creditcard-info .form-group .input-wrapper.active label { color:#fff!important; }
.creditcard-info .form-group .clear-input {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc!important;
    height: 50px;
    font-size: 22px;
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 32px;
    opacity: 0.5;
    display: none;
}
.creditcard-info .form-control.single-number {
    display: inline-block!important;
    width: 50px!important;
    padding: 20px 30px!important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.creditcard-info .form-group.basic .form-control.single-number {
	padding: 20px 20px!important;
}
.creditcard-info .toggle {
	display:flex;
	justify-content: space-between;
	align-items: center;
}
body.dark-mode .form-switch .form-check-label:after {
    background: #999!important;
}
body.dark-mode .form-check .form-check-label:after {
    border-color: #333;
}
body.dark-mode .form-switch .form-check-input:checked ~ .form-check-label:after {
    background: #FFBB01!important;
}
body .form-check-input:checked ~ .form-check-label:after {
    border-color: #a07603!important;
}

/*faq*/
body.dark-mode .searchbox .form-control {
    background: transparent !important;
    border-color: #666!important;
}
.searchbox .form-control {
    box-shadow: none;
    border-radius: 20px;
    border: 1px solid #666!important;
    height: 40px;
    padding: 0 16px 0 20px;
}
body.dark-mode .searchbox .input-icon {
    color: #666!important;
}
.searchbox .input-icon {
    font-size: 26px;
    position: absolute;
	left:auto!important;
    right: 10px!important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A9ABAD;
    top: 0;
}
body.dark-mode .searchbox input {
    color: #fff;
}
.accordion {
    border-top: 1px solid #DCDCE9;
    border-bottom: 1px solid #DCDCE9;
	border:none!important;
    background: transparent !important;
    overflow: hidden;
}
body.dark-mode .accordion .accordion-header .accordion-button {
    background: #767676 !important;
    color: #fff;
	border-radius:10px!important;
	padding: 20px 50px 20px 20px;
}
.accordion .accordion-item {
    border: 0;
	background-color: transparent !important;
    margin: 10px 0;
	border-radius:10px!important;
}
body.dark-mode .accordion .accordion-body {
    background:none!important; 
}
.accordion .accordion-header .accordion-button:active {
    background: #767676!important;
}
body.dark-mode .accordion .accordion-header .btn.collapsed,
body.dark-mode .accordion .accordion-header .accordion-button.collapsed {
  	background: #383838 !important;
}
.shipping-information { position: relative; display:flex; justify-content: space-between; align-items: center; padding: 20px 30px; }
.shipping-information .name { color:#fff; font-weight:bold; }
.shipping-information address { margin-bottom:0; color:#f8e352;}
.shipping-information img.label { 
	background: url("../img/svg/label-default.svg") no-repeat; 
	width: 40px; height: 40px;
	position: absolute;
	top:-3px; left:-3px;
	display:none;
	
}
.shipping-information.active img.label { 
	display:block;
	
}
.shipping-address { padding-right:10px; }

.shipping-information .button{background-color: #f8e352;}
.shipping-information .button:hover{background-color: #f8e352;}
.shipping-information .shipping-edit-delete{display: flex;gap:1rem;}

.order {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}
.order-details h3 { margin-bottom:0!important; }
.order-details .date { font-size:12px!important; }

.order-card {
  position: relative;
  display:flex;
  justify-content: space-between;
  margin: 10px 0;
}
.order-card .product-img {
  position: relative;
}
/*.order-card .product-img::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 999!important;
}*/
.order-card .product {
  position: relative;
  display: flex;
}
.order-card .product-txt {
  position: relative; 
  width:auto;
  padding: 10px 10px 10px 10px; 
}
.order-card .product-txt h4 { font-size:14px; font-weight: 500; }
.order-card .product-txt .title { }
.order-card .product-txt .price { 
  font-size:18px;
  font-weight: 500;
  color:#FFBB01; 
}
.order-card .product-quantity { width:90px!important; padding-top: 10px; }
.order-card .product-quantity {
    text-align: center;
    width: 24px;
    margin: 2px;
    color: #fff;
  font-weight: bold;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.order-total {
  padding: 10px 0px 10px;
  color:#CCCCCC;
}
.order-total table { width: 100%; margin:0 auto; }
.order-total tr td:first-child { text-align: left; }
.order-total tr td:last-child { text-align: right; }
.order-total tfoot tr td:first-child { color:#fff; font-size:20px; font-weight: bold;}
.order-total tfood tr td:last-child { 
  font-weight: 600;
    font-size: 35px!important;
    color: #FCFBF7;
}
.order-total sup {
    color: #FFBB01;
    font-size: 14px;
    top: -12px;
}
.order-table table { width: 100%; }
.order-table table tr td:first-child { text-align: left; width: 50%; }
.order-table table tr td:last-child { text-align: right; width: 50%; }

/*saved cards*/
.creditcard { 
  position: relative;
  display: inline-block;
  z-index: 999!important;
  padding: 0 10px;
  margin: 0 auto;
  left: 50%; 
    transform: translateX(-50%);
  font-size:30px; 
  color:#fff; 
  font-weight: bold;
}
/*.creditcard-info { 
  position: absolute; 
  top: 100px; 
  left: 40px;
  width: 80%;
}*/
.creditcard .number { 
  position: absolute; 
  margin-left: auto;
  margin-right: auto;
  top:40%;
  right: 10%;
}
.creditcard .name { 
  position: absolute; 
  margin-left: auto;
  margin-right: auto;
  bottom:25%;
  left: 10%;
}
.creditcard .expiry { 
  position: absolute; 
  margin-left: auto;
  margin-right: auto;
  bottom:8%;
  right: 20%;
}
.modal.creditcard-info .modal-dialog .modal-content .modal-header {
    border-bottom:0!important;
    background-image: linear-gradient(to right,#222,#121212)!important;
}
.modal .modal-content {
    background-image: linear-gradient(to right,#222,#121212)!important;
}
.modal.popup .modal-content {
  background: #222!important;
}
.close-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    position: absolute;
    left: 10px;
    top: 5px;
    color: #fff;
}
.creditcard-info .label { color:#ccc!important; font-size: 16px!important;}
.creditcard-info .form-group.basic .form-control {
    background: #4E4E4E!important;
    border: none;
    border-bottom: 0!important;
    padding: 5px 30px 5px 15px!important;
  margin: 5px 0;
    border-radius: 10px!important;
    height: 50px!important;
    color: #27173E;
    font-size: 15px;
}
.creditcard-info ::placeholder {
    color: #999!important;
}
.creditcard-info .form-group .input-wrapper.active label { color:#fff!important; }
.creditcard-info .form-group .clear-input {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc!important;
    height: 50px;
    font-size: 22px;
    position: absolute;
    right: 0px;
    bottom: 0;
    width: 32px;
    opacity: 0.5;
    display: none;
}
.creditcard-info .form-control.single-number {
    display: inline-block!important;
    width: 50px!important;
    padding: 20px 30px!important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.creditcard-info .form-group.basic .form-control.single-number {
  padding: 20px 20px!important;
}
.creditcard-info .toggle {
  display:flex;
  justify-content: space-between;
  align-items: center;
}
body.dark-mode .form-switch .form-check-label:after {
    background: #999!important;
}
body.dark-mode .form-check .form-check-label:after {
    border-color: #333;
}
body.dark-mode .form-switch .form-check-input:checked ~ .form-check-label:after {
    background: #FFBB01!important;
}
body .form-check-input:checked ~ .form-check-label:after {
    border-color: #a07603!important;
}

/*faq*/
body.dark-mode .searchbox .form-control {
    background: transparent !important;
    border-color: #666!important;
}
.searchbox .form-control {
    box-shadow: none;
    border-radius: 20px;
    border: 1px solid #666!important;
    height: 40px;
    padding: 0 16px 0 20px;
}
body.dark-mode .searchbox .input-icon {
    color: #666!important;
}
.searchbox .input-icon {
    font-size: 26px;
    position: absolute;
  left:auto!important;
    right: 10px!important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A9ABAD;
    top: 0;
}
body.dark-mode .searchbox input {
    color: #fff;
}
.accordion {
    border-top: 1px solid #DCDCE9;
    border-bottom: 1px solid #DCDCE9;
  border:none!important;
    background: transparent !important;
    overflow: hidden;
}
body.dark-mode .accordion .accordion-header .accordion-button {
    background: #767676 !important;
    color: #fff;
  border-radius:10px!important;
  padding: 20px 50px 20px 20px;
}
.accordion .accordion-item {
    border: 0;
  background-color: transparent !important;
    margin: 10px 0;
  border-radius:10px!important;
}
body.dark-mode .accordion .accordion-body {
    background:none!important; 
}
.accordion .accordion-header .accordion-button:active {
    background: #767676!important;
}
body.dark-mode .accordion .accordion-header .btn.collapsed,
body.dark-mode .accordion .accordion-header .accordion-button.collapsed {
    background: #383838 !important;
}
.shipping-information { position: relative; display:flex; justify-content: space-between; align-items: center; padding: 20px 30px; }
.shipping-information .name { color:#fff; font-weight:bold; }
.shipping-information address { margin-bottom:0; }
.shipping-information img.label { 
  background: url("../img/svg/label-default.svg") no-repeat; 
  width: 40px; height: 40px;
  position: absolute;
  top:-3px; left:-3px;
  display:none;
  
}
.shipping-information.active img.label { 
  display:block;
  
}
.shipping-address { padding-right:10px; }

.self-collect-information { position: relative; display:flex; justify-content: space-between; align-items: center; padding: 20px 30px; }
.self-collect-information .name { color:#fff; font-weight:bold; }
.self-collect-information address { margin-bottom:0; }
.self-collect-information img.label { 
  background: url("../img/svg/label-default.svg") no-repeat; 
  width: 40px; height: 40px;
  position: absolute;
  top:-3px; left:-3px;
  display:none;
  
}
.self-collect-information.active img.label { 
  display:block;
  
}

/*-----Tabs-----*/

.nav-tabs .nav-item .nav-link {
  display:flex;
  flex-direction: column;
  height: auto!important;
}
.nav-tabs .nav-item .nav-link ion-icon {
  font-size: 28px!important;
}
.nav-tabs .nav-item .nav-link:not(.active) img {
  width:30px; height: 30px;
  filter: brightness(0) invert(100);
  -webkit-filter: brightness(0) invert(100);  
  opacity: 0.7;
}
.nav-tabs .nav-item .nav-link span {
  font-size:.9rem!important;
  margin-top: 5px;
}
.nav-tabs .nav-item .nav-link.active img {
  width:30px; height: 30px;
  opacity: 1;
}

/*-----Orders-----*/

.orders .list { padding: 10px; display:flex; justify-content: center; flex-direction: column; align-items: center; }
.orders .list img { width:35px; height:35px; }

/*.orders .nav-tabs.lined .nav-item {
  width:25%;
}
.orders .nav-item .nav-link {
  display:flex;
  flex-direction: column;
  height: auto!important;
}
.orders .nav-item .nav-link ion-icon {
  font-size: 28px!important;
}
.orders .nav-item .nav-link:not(.active) img {
  width:30px; height: 30px;
  filter: brightness(0) invert(100);
  -webkit-filter: brightness(0) invert(100);  
  opacity: 0.7;
}
.orders .nav-item .nav-link span {
  font-size:12px!important;
  margin-top: 5px;
}
.orders .nav-item .nav-link.active img {
  width:30px; height: 30px;
  opacity: 1;
}*/
.order {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
}
.order-details h3 { margin-bottom:0!important; }
.order-details .date { font-size:12px!important; }

.order-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:linear-gradient(45deg,#de9124,#f8e352); 
  padding: 20px;
}
/*.order-status.topay {
  background:linear-gradient(45deg,#4488BF,#70B3E0); 
}*/
.order-status h3 { color:#000!important; margin: 0!important; }
.order-status h4 { color:#000!important; margin: 0!important; }
.order-status .icon { width: 40px; height: 40px; }
.order-status .icon img { filter: brightness(0); }

.timeline.timed {
    padding-left: 60px;
}
.timeline {
    position: relative;
    padding: 10px 0;
}
body.dark-mode .timeline:before {
    background: #999;
}
.timeline.timed:before {
    left: 60px;
}
.timeline:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    left: 0;
    bottom: 0;
    top: 0;
    background: #DCDCE9;
    z-index: 1;
}
.timeline .dot.bg-gold {
    background: #FFBB01 !important;
    color: #FFF;
}
.timeline .dot.bg-light {
    background: #999!important;
}
.card-title { display: flex; justify-content: space-between; }
.card-btn { font-size:12px; color:#FFBB01; }
.card-icon { display: inline-block; }
.card-icon img { filter:invert(100); width: 24px; height: 24px; margin-right: 10px; }

/*search*/
#search {
    padding: 8px 16px 0 16px!important;
}
#search.appHeader { border:0; background:#000; }
.searchbox-top .input-icon {
    font-size: 26px;
    position: absolute;
  left:auto!important;
    right: 36px!important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A9ABAD;
    top: 2px;
}
.searchbox-top {
    width: 100%;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.searchbox-top .form-control {
    box-shadow: none;
    border-radius: 20px;
    border: 1px solid #666!important;
    height: 40px;
    padding: 0 16px 0 20px;
}
body.dark-mode .searchbox-top .form-control {
    background: transparent !important;
    border-color: #666!important;
  color:#ccc;
}
.searchbox-top .icon {
    font-size: 26px;
    line-height: 1em;
    margin: 0;
}
.search-card {
  position: relative;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.search-card .product-img { width:30%; border: solid 1px #666; border-radius:10px; }
.search-card .product-title { width:70%; padding-left:10px; }
.search-card .product-title h4 { color:#ccc!important; }

.search-form input.form-control { 
  background: none;
  border-color: #666;
  border-radius: 30px!important;
  padding-left:30px;
  color:#fff;
  height: 36px;
  margin-bottom: unset;
}
.search-form .form-control:focus {
  background-color:#000;
  border-color: #ccc!important;
  outline: 0;
  box-shadow: none;
  color:#ccc;
}
.search-form .input-icon {
  font-size: 26px;
  position: absolute;
  left: 10px!important;
  right: auto!important;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A9ABAD;
  top: 9px;
  z-index: 99;
}
.header-search-input { 
  background: none !important;
  border-color: #666 !important;
  border-radius: 30px!important;
  color:#fff !important;
  height: 36px !important;
  margin-bottom: unset !important;
}
.header-search-input:focus {
  background-color:#222222 !important;
  border-color: #ccc!important;
  outline: 0;
  box-shadow: none;
  color:#ccc !important;
}
.header-search-div .input-icon {
  font-size: 26px;
  position: absolute;
  right: 10px!important;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A9ABAD;
  top: 9px;
  z-index: 99;
}
.home-search-input { 
  background: none !important;
  border: unset !important;
  color:#fff !important;
  height: 36px !important;
  margin-bottom: unset !important;
  z-index: 1;
  text-align: center;
  font-weight: 500 !important;
}
.home-search-input:focus {
  border: unset !important;
  outline: 0;
  box-shadow: none!important;
}
.home-search-input::placeholder {
  color:#fff !important;
}
.search-form .search-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  z-index: 99;
}
.search-form .filter-btn {
  margin-left: 5px!important;   
  display: flex;
  align-items: center;
  justify-content: center;  
}
.search-form .filter-btn .btn {
  background: #363636;
  color:#ccc;
  border-radius: 30px!important;
}

.search-form .search-btn .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.search-form .search-btn .btn h2 {
  font-size:14px;
  font-weight: bold;
  margin: 0;
  background-image: linear-gradient(90deg,#de9124,#f8e352)!important;
  background-size: 100%!important;
  -webkit-background-clip: text!important;
  -moz-background-clip: text!important;
  -webkit-text-fill-color: transparent!important; 
  -moz-text-fill-color: transparent!important;
  color: #FFFFFF !important;
  border:0;
  border-color:none!important;
}
.search-form .search-btn i { margin-right: 4px; }
.search-form .clear-filter { display: flex; align-items: center; padding: 5px; color: #fff; gap:10px;}


/*swiper tabs*/

.tabs-content .swiper-container {
  width: 100%;
  height: 300px;
}
.tabs-content .swiper-slide {
  padding: 20px;
}
.tabs-buttons {
  height: auto;
  padding: 10px;
  text-align: center; 
  /*box-shadow: inset 0 -2px #e6e6e6;*/
}
.tabs-buttons .swiper-wrapper {
  display: flex;
  justify-content: space-between;
}
.tabs-buttons .swiper-slide {
  width: auto;
  height: auto;
  margin: 2px;
  padding: 10px 20px 4px;
  font-size:12px!important; 
  background: rgba(0,0,0,0.5);
  border-radius:10px; 
  cursor: pointer;
  /*border: 1px solid #333;*/
}
.tabs-buttons .swiper-slide img { 
  width:20px; 
  display: block; 
  margin: 0 auto; 
}
.tabs-buttons .swiper-slide:not(.active-tab) img { 
  filter: brightness(0) invert(100);
    -webkit-filter: brightness(0) invert(100);
}
.tabs-buttons .swiper-slide .active-tab img {
  filter:brightness(1);
  -webkit-filter: brightness(1);
}

.tabs-buttons .active-tab {
  opacity: 1;
  color:#F5CD3C!important;
  /*border-bottom-color: red;*/
  text-align: center;
}

.tabs-buttons .active-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;  
  z-index: 1;
}

footer { font-size: 12px; color:#999; margin: 50px 0 30px;  text-align: center; }

/*Notification*/

.notification .date { background: #2B2B2B; padding: 10px 30px; color:#fff; }
.notification .time { color:#B4B4B4; }
.notification .details { display:flex; align-items: center; padding: 20px 30px; }
.notification .title { color:#fff; font-size:16px; font-weight: 500; }
.notification .description { font-size:12px; line-height: 18px; }
.notification hr { margin:0; }

.greetings {
  font-weight: 600;
  font-size: 1.5rem;
  /*color: #FCFBF7;*/
  background-image: linear-gradient(45deg,#de9124,#f8e352);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  padding-top: 1rem;
}

.modal.popup-branch .modal-content {
  padding: 20px 0!important;
}
.modal.popup-branch .modal-header {
    border-bottom: none!important;
  align-items:flex-start!important;
  padding: 10px 20px 0!important;
}
.modal.popup-branch .btn-close { opacity: 1!important; top:0; right:0; width:20px; height:20px;}
.modal.popup-branch .card { margin-top: 10px; }
.modal.popup-branch .active .card {
    border: solid 1px #999;
}
.modal.popup-branch p { font-size:12px; line-height: 16px!important; }

/*filter*/

.filter { 
  position: fixed; 
  bottom:70px; 
  right:10px; 
  background: #333;
  padding: 10px;
  border-radius: 50%;
  z-index: 999;
}
.filter img { width: 24px; height: 24px; filter: invert(100%); }

.modalbox.modal-filter .modal-dialog {
  transform: translate(0, 10%) !important;
}

.modalbox.modal-filter .modal-header {
  background:linear-gradient(0deg,#835a20,#927646)!important;
  color:#fff!important;
}
.modalbox.modal-filter .title {
  display: inline-block;
    background: -webkit-linear-gradient(45deg,#de9124,#f8e352);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sort a img { width:40px; height: 40px; margin:15px; filter:brightness(100); opacity: 0.6; }

.sort-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 10px;
  z-index: 99;
}
.sort-btn.active {
  background-image: linear-gradient(45deg,#de9124,#f8e352);
  background-size: 100%;
  -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}
.sort-btn.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.sort-btn2 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  padding: 10px;
  z-index: 99;
}
.sort-btn2.active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
a.sort-btn2.active img { filter:brightness(1); opacity: 1; }

.sort-btn2.active {
  background-image: linear-gradient(45deg,#de9124,#f8e352);
  background-size: 100%;
  -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

.float{
  position:fixed;
  width:40px;
  height:40px;
  bottom:70px;
  right:13px;
  background-color:#fff;
  border-radius:50px;
  z-index:100;
}

.float-shop{
  position:fixed;
  width:40px;
  height:40px;
  bottom:130px;
  right:13px;
  background-color:#fff;
  border-radius:50px;
  z-index:999;
}

/*-----Calendar-----*/

.calendar, .calendar_weekdays, .calendar_content {
  max-width: 450px; }

.calendar {
  margin: auto;
  font-weight: 400; }

.calendar_content {
  background: transparent!important; }
  
.calendar_weekdays {
  background:linear-gradient(45deg,#de9124,#f8e352);
}

.calendar_header {
  padding: 10px 0; }

.calendar_content, .calendar_weekdays, .calendar_header {
  position: relative;
  overflow: hidden; 
}

.calendar_weekdays div {
  display: inline-block;
  vertical-align: top;
  color: #000 !important; }

.calendar_weekdays div, .calendar_content div {
  width: 14.28571%;
  overflow: hidden;
  text-align: center;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  padding: 15px 0; }

.calendar_content div {
  border: 1px solid transparent;
  float: left;
  position: relative;
  z-index: 0;
  cursor: pointer;
}
  
.calendar_content div.past-date {
  color: #d5d5d5;
  opacity: 0.5;
  pointer-events: none;
  cursor: none;
}
.calendar_content div.blank {
  pointer-events: none;
  cursor: none;
}
.calendar_content div.today {
  font-weight: bold;
  font-size: 16px;
  color: #000 !important;
  cursor: pointer;
}
.calendar_content div.selected {
  font-weight: bold;
  font-size: 16px;
  color: #000 !important;
}
.calendar_content div.today:after {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto;
    background:linear-gradient(0deg,#de9124,#f8e352);
    z-index: -1;
    -webkit-box-shadow: 0px 5px 11px -9px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 5px 11px -9px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 5px 11px -9px rgba(0, 0, 0, 0.48); 
}
.calendar_content div.selected:after {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto;
    background:linear-gradient(0deg,#de9124,#f8e352);
    z-index: -1;
    -webkit-box-shadow: 0px 5px 11px -9px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 0px 5px 11px -9px rgba(0, 0, 0, 0.48);
    box-shadow: 0px 5px 11px -9px rgba(0, 0, 0, 0.48);
}

.calendar_header {
  width: 100%;
  text-align: center; 
}
.calendar_header h2 {
  padding: 0 10px;
  font-weight: 500;
  font-size: 20px;
  color: #1089ff;
  float: left;
  width: 70%;
  margin: 0 0 10px; }

button.switch-month {
  background-color: transparent;
  padding: 0;
  outline: none;
  border: none;
  color: #dcdcdc;
  float: left;
  width: 15%;
  -webkit-transition: color .2s;
  -o-transition: color .2s;
  transition: color .2s; }

button.switch-month:hover {
  color: #1089ff; }

.event {
  padding: 20px;
  margin: 20px 0;
  color:#CCCCCC;
  background: #333;
  border-radius: 10px;
}
.event h3 {
  color:#fff;
}
#event-map {
  height: 200px;
  /* The height is 400 pixels */
  width: 100%;
  /* The width is the width of the web page */
}

.event-details table { margin-top: 10px; }
.event-details table tr td:first-child { width: 30px; padding-top: 5px; }
.event-details .card-body { padding: 30px; }

.product-card .product-label {
  position: absolute;
  top:-15px;
  left:-1px;
  display: inline-block;
  height: 150px;
  width: 150px;
  z-index: 999;
}
.product-label.sold-out {
  background-image:url("../img/sold-out.png");
  background-size: 100%;
}
.product-label.exclusive {
  background-image:url("../img/exclusive.png");
  background-size: 100%;
}
.product-label.pre-sale {
  background-image:url("../img/pre-sale.png");
  background-size: 100%;
}
.product-card .feature-product .discount { font-size: 12px; color: #FCEBBF; }
@media only screen and (max-width: 768px) {
  .product-card .feature-product .discount { font-size: 10px; color: #FCEBBF; }
}
.product-card .feature-product .discount-price { text-decoration: line-through; }
.product-card .product .discount { font-size: 12px; color: #FCEBBF; }
.product-card .product .discount-price { text-decoration: line-through; }
.cart-card .product-details .discount { font-size: 12px; color: #FCFBF7; }
.cart-card .product-details .discount-price { text-decoration: line-through; }
[data-page="shop"] .product-details .discount {
  color:#FCEBBF;
  font-size:16px;
}
[data-page="shop"] .product-details .discount .discount-price {
  text-decoration: line-through
}
[data-page="shop"] .related-products .product-card .feature-product .discount-price { text-decoration: line-through; font-size:12px; color: #FCEBBF; }

/*-----Mission-----*/
.mission-rewards .card { overflow: hidden; }
.mission-rewards .btn-gold { margin-top: 10px; padding: 5px; }
.mission-rewards .btn-grey { margin-top: 10px; padding: 5px; }
.mission-rewards .btn-gold a.btn { text-decoration: none!important; }
.mission-rewards a.btn { color:#999; padding: 5px; text-decoration: underline!important; }
.mission-rewards a{ color:#ccc; }
.mission-rewards a:hover{ color:#ccc; }

.mission {
  position: relative;
  padding: 14px 14px;
  font-size:12px;
}
.mission h2 { font-size:16px; margin-bottom:0!important; }
.mission p { font-size:13px; line-height: 13px; padding: 5px 0; }
.mission .date-time {
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.exclusive {
  position: absolute;
  width: 100%; height: 100%;
}
.exclusive img { opacity: 0.9; padding: 30px; }

#redeem-rewards .section-title { font-size:16px; font-weight: 600; margin:10px 0 0!important; padding: 0 0 0 10px; }
#redeem-rewards .faq { font-size:12px; line-height: 16px; }
#redeem-rewards .accordion .accordion-header .accordion-button { font-size:14px; font-weight: 500; }

div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 0 10px 0 0;
  text-decoration: none;
}

div.scrollmenu .card .redeem { padding:10px; text-align: left; }
div.scrollmenu .card .redeem span { color:#FFBB01; font-weight: bold; }
div.available-reward .card .redeem { padding:10px; text-align: left; }
div.available-reward .card .redeem span { color:#FFBB01; font-weight: bold; }

.rewards-balance {
  background: #333;
  /*background: url("../img/rewards-bg.jpg") no-repeat center center;*/
  background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url("../img/rewards-bg.jpg");
  background-size: cover;
  padding: 30px;
  border-radius:10px;
  display: flex;
  justify-content: space-between;
}
.rewards-balance .title {
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}
.rewards-balance .amount {
  font-weight: 600;
  font-size: 32px;
  color: #FFBB01;
}
.rewards-balance .amount sup {
  color: #FFBB01;
  font-size: 14px;
  top: -12px;
  margin-right: 5px;
}
.how-it-works {
  text-align: center;
  colior:#999;
  font-size:12px;
  line-height: 14px;
  padding: 20px;
}
.how-it-works img { display: block; width: 40px; margin: 0 auto 5px; }

.redeem-rewards-details .card-title { margin-bottom: 0; }
.redeem-rewards-details ol { padding-left: 15px; }
.redeem-rewards-details .card-icon img { width: 18px; height: 18px; }
.redeem-rewards-details table {
    width: 90%;
    margin: 0 auto;
    font-size: 14px;
  line-height: 20px;
}
.redeem-rewards-details table tr td { padding: 5px 0; vertical-align: top; }
.redeem-rewards-details table tr td:first-child {
    text-align: left;
  padding-right: 5px!important;
  font-weight: bold;
  color:#fff;
}
.redeem-rewards-details table tr td:last-child {
    text-align: right;
  padding-left: 5px!important;
}

.add-voucher {
    position: relative;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding: 4px 10px;
    font-weight: bold;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.add-voucher::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px; 
  padding: 1px; 
  background:linear-gradient(45deg,#de9124,#f8e352); 
  -webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.add-voucher input { padding-left: 20px; margin-left: 10px; color:#fff; font-weight: bold; width:80%; background: none!important; border:0!important; }
.add-voucher img { position: absolute; top:12px; left: 14px; width: 20px; height: 20px; filter: brightness(0) invert(100); opacity: 0.5; }
.add-voucher .btn-claim {
    /*background-color: #999;*/
  background:linear-gradient(45deg,#de9124,#f8e352); 
    color: #000!important;
    width: 100px;
    font-size: 14px;
    padding: 2px 2px;
    margin: 0 -4px 0 10px;
  border-radius:20px;
  z-index: 9;
    /*vertical-align: top;*/
}
button.btn-claim:active {
  box-shadow: 0 5px #666;
  transform: translateY(2px);
}
.add-voucher-bg { position: relative; background: #333; z-index: 0; padding: 30px; }
.add-voucher-bg h2 { margin: 0 auto!important; }

.my-coupon { background:rgba(255,255,255,0.1); }
.my-coupon .kanan {
    border-left: 1px dashed #666;
    width: 40% !important;
    position:relative;
}

.my-coupon .kanan .info::after, .my-coupon .kanan .info::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #171717;
    border-radius: 100%;
}
.my-coupon .kanan .info::before {
    top: -10px;
    left: -10px;
}

.my-coupon .kanan .info::after {
    bottom: -10px;
    left: -10px;
}
.my-coupon h3 {
    margin-bottom: 0;
}
.my-coupon p {
    font-size: 12px;
}

.cart-discount { font-size: 12px; color: #FCEBBF; }
.cart-discount-price { text-decoration: line-through; }

.processing-icon {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.5);
  z-index: 9999;
}
.loading-wheel {
  width: 40px;
  height: 40px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

.progress-outer{
    background: #fff;
    padding: 5px 60px 5px 5px;
    border: 5px solid #555;
    border-radius: 45px;
    margin-bottom: 20px;
    position: relative;
}
.progress-inner{
    background: #555!important;
    border-radius: 20px;
    margin: 0;
}
.progress-inner .progress-bar{
    border-radius: 20px;
    box-shadow: none;
    animation: animate-positive 2s;
}
.progress-inner .progress-value{
    font-size: 16px;
    font-weight: 700;
    color: #6b7880;
    position: absolute;
    top: 0px;
    right: 10px;
}
.progress-bar-warning {
    background-color: #f0ad4e;
}
@keyframes animate-positive{
    0%{ width: 0; }
}

.leftover-history{
  font-size: 1.8rem;
  background:linear-gradient(180deg,#de9124,#f8e352);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: right;
  padding: 1rem;
  cursor:pointer;
}

/*-----Reservation-----*/

.booking-form {
  padding: 10px 20px;
  border-radius: 4px;
}

.booking-form .form-group {
  position: relative;
  margin-bottom: 15px;
}

.booking-form .form-control {
  background-color: transparent;
  border: 1px solid #707070;
  height: 45px;
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: 400;
  color: #C6A56A;
  font-size: .75rem;
}

.booking-form .form-control:focus {
  background-color: transparent;
}

.booking-form .form-control::-webkit-input-placeholder {
  color: rgba(16, 17, 19, 0.3);
}

.booking-form .form-control:-ms-input-placeholder {
  color: rgba(16, 17, 19, 0.3);
}

.booking-form .form-control::placeholder {
  color: rgba(16, 17, 19, 0.3);
}

.booking-form input[type="date"].form-control:invalid {
  color: rgba(16, 17, 19, 0.3);
}

.booking-form select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.booking-form select.form-control+.select-arrow {
  position: absolute;
  right: 0px;
  bottom: 6px;
  width: 32px;
  line-height: 32px;
  height: 32px;
  text-align: center;
  pointer-events: none;
  color: #fff;
  font-size: .75rem;
}

.booking-form select.form-control+.select-arrow:after {
  content: '\279C';
  display: block;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.booking-form .form-label {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 5px;
  display: block;
  text-transform: uppercase;
}

.booking-form .submit-btn {
  color: #101113;
  background-color: #ffc001;
  font-weight: 700;
  height: 50px;
  border: none;
  width: 100%;
  display: block;
  border-radius: 3px;
  text-transform: uppercase;
}

.modal.booking-form .modal-dialog .modal-content .modal-header {
    border-bottom: 0!important;
    background-image: linear-gradient(to right,#222,#121212)!important;
}

.reservation-details { position: relative; display:flex; justify-content: space-between; align-items: center; }
.reservation-details table { }
.reservation-details table tr { line-height: 20px; }
.reservation-details table tr td:first-child { width: 30px; padding-top: 5px; }
.reservation-details .product-clear { cursor: pointer; }

.cell {
  border: 1px solid #666;
  margin: 2px;
  cursor: pointer;
  border-radius: 4px;
}

.cell:hover {
  border: 1px solid #fff;
}

.cell.select {
  border: 1px solid #FFBB01;
  background: -webkit-linear-gradient(45deg,#de9124,#f8e352);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background:linear-gradient(45deg,#de9124,#f8e352); 
}

.gold-link {
  color: #FFBB01;
  text-decoration: underline!important;
}

@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.promotion-title{
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: .5rem;
}

.promotion-title img{
  width: 175px;
}

@media only screen and (max-width: 768px) {
  .promotion-title img{
    width: 125px;
  }
}

.product-promotion-title{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.leaderboard-branch{
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
  align-items: center;
  justify-content: center;
}

.leaderboard-branch div{
  border-radius: 50px;
  font-weight: bold;
  padding: .75rem;
  color: #fff;
  border: 1px solid #FFBB01;
  cursor: pointer;
}

@media only screen and (max-width: 768px) {
  .leaderboard-branch div{
    border-radius: 50px;
    font-weight: bold;
    padding: .5rem;
    font-size: .75rem;
    color: #fff;
    border: 1px solid #FFBB01;
    cursor: pointer;
  }
}

.leaderboard-branch div.active{
  background: #FFBB01;
  color: #000;
}

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

.online-exclusive img{
  width: 160px;
}

@media only screen and (max-width: 768px) {
  .online-exclusive img{
    width: 125px;
  }
}

.country-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

.country-arrow {
  cursor: pointer;
  padding: 10px 15px;
  font-size: 18px;
  background:linear-gradient(90deg, #de9124, #f8e352);
  color: white;
  border: 1px solid #FFBB01;
  border-radius: 10px !important;
  margin: 0 5px;
  user-select: none;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.country-button {
  cursor: pointer;
  padding: 10px 20px;
  font-size: 16px;
  margin: 0 10px;
  background-color: transparent;
  border: 1px solid #FFBB01;
  border-radius: 5px!important;
  color: #fff;
  white-space: nowrap;
}

.country-button.selected {
  background:linear-gradient(90deg, #de9124, #f8e352);
}

.country-scroll-container {
  display: flex;
  overflow-x: auto;
  max-width: 70%; 
  scroll-behavior: smooth;
}

.country-scroll-container::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .country-scroll-container {
    max-width: 100%;
  }

  .country-button {
    padding: 8px 15px;
    font-size: 14px;
  }

  .country-arrow {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }
}

.overlay-reward {
  background-color: rgba(0, 0, 0, 0.5); /* Grey semi-transparent */
}

.reward-badge {
  font-size: 12px;
  line-height: 1em;
  border-radius: 100px;
  letter-spacing: 0;
  height: 22px;
  min-width: 22px;
  width: auto;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  background: #FF396F;
  margin: 0 10px;
}

.cart-reward-badge {
  font-size: 12px;
  line-height: 1em;
  border-radius: 100px;
  letter-spacing: 0;
  height: 8px;
  min-width: 8px;
  width: auto;
  font-weight: 400;
  background: #FF396F;
  position: absolute;
  top:-1px;
}

.recent-search-container {
  display: flex;
  align-items: center;
}

.recent-search-button {
  cursor: pointer;
  padding: 10px 20px;
  font-size: 20px;
  background-color: transparent;
  border: 1px solid #FFBB01;
  border-radius: 50px!important;
  color: #fff;
  white-space: nowrap;
}

.recent-search-scroll-container {
  display: flex;
  overflow-x: auto;
  max-width: 70%; 
  scroll-behavior: smooth;
  gap: 1rem;
}

.recent-search-scroll-container::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .recent-search-scroll-container {
    max-width: 100%;
  }

  .recent-search-button {
    padding: 8px 15px;
    font-size: 14px;
  }
}

.rating-stars .star {
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
}
.rating-stars .star.selected,
.rating-stars .star:hover {
    color: #FFBB01;
}