html {min-height: 100%;}
body{ background: #f1f1f1; font-family: 'Roboto', sans-serif; padding-bottom: 38px; position: relative; }

.cursor-pointer { cursor: pointer; }

a { text-decoration: none; }
img { max-width: 100%; }

.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-17 { font-size: 17px; }
.fs-18 { font-size: 18px; }
.fs-19 { font-size: 19px; }
.fs-20 { font-size: 20px; }
.fs-21 { font-size: 21px; }
.fs-22 { font-size: 22px; }
.fs-23 { font-size: 23px; }
.fs-24 { font-size: 24px; }
.fs-25 { font-size: 25px; }
.fs-26 { font-size: 26px; }
.fs-27 { font-size: 27px; }
.fs-28 { font-size: 28px; }
.fs-29 { font-size: 29px; }
.fs-30 { font-size: 30px; }

.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

.text-dark-2 { color: #696969; }

.bg-1 { background: #7d8eff; }
.bg-2 { background: #f88584; }
.bg-3 { background: #ffc068; }
.bg-4 { background: #bb66ec; }
.bg-5 { background: #53d9ce;}
.bg-6 { background: #eb7359; }

select { appearance: none; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ""; position: relative; }
select { background: #fff url("../images/down_arr.png") no-repeat 98% center !important; }


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }

header #nav-icon1 { width: 24px; transform: rotate(0deg); transition: 0.2s ease-in-out; cursor: pointer; padding: 1px 0 0 0; height: 20px; }
header #nav-icon1 span { display: block; position: absolute; height: 2px; width: 100%; background: #000; border-radius: 9px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.2s ease-in-out; }

header #nav-icon1 span:nth-child(1) {
top: 2px;
}
header #nav-icon1 span:nth-child(2) {
top: 50%;
margin-top: -1px !important;
}
header #nav-icon1 span:nth-child(3) {
bottom: 2px;
}
header #nav-icon1:hover span:nth-child(2) {
width: 70%;
}


.bg-light-2{
background: #EEEEEE;
}


.main_outer{
  max-width: 768px;
  margin: auto;
  background: #fff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  min-height: 100vh;
}

.bg-primary{
  background: #021446 !important;
}

.text-primary{
  color: #021446 !important;
}

.btn-primary{
  background: #021446 !important;
  border-color: #021446 !important;
}


.wallet_balance{
  border-radius: 18px;
  padding: 20px 20px 10px;
}

.balane_dv{
  display: flex;
}
.form-select{
  color: #727272 !important;
}

.inner_list { overflow: hidden; text-decoration: none; border-radius: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.inner_list img { transition: all 0.5s; }
.inner_list:hover img { transform: scale(1.1); }

.listining_deamination {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listining_deamination div {
  min-width: 33%;
}

.listining_deamination div span {
  display: inline-block;
  width: 90px;
  text-align: right;
}

.add_voucher .form-control {
  border: 0; 
  border-radius: 0;
  padding-left: 6px;
}

.logo_dv {
background: #D6EDFF;
padding-bottom: 26px;
}

.logo_dv img {
margin-top: -40px;
}

.cart_dv span {
background: #EC2625;
color: #fff;
width: 22px;
height: 22px;
position: absolute;
top: -8px;
right: -11px;
text-align: center;
font-size: 12px;
border-radius: 50%;
line-height: 24px;
}

/* brand page */

.logo_brand {
background: #EEEEEE;
border-radius: 20px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}

.brand_des{
padding-top: 70px;
}



.qtySelector {
display: inline-block; 
height: 28px;
width: 70px; 
position: relative;
}
.qtySelector div {
position: absolute;
cursor: pointer;
left: 0;
top: 0;
width: 24px;
height: 100%;
}
.qtySelector .qtyValue {
border: none;
width: 100%;
text-align: center;
pointer-events: none; 
border: 0; 
height: 28px;
color: #6c757d;
}
.increaseQty {
left: initial !important;
right: 0;
}
.qtySelector .decreaseQty:before {
content: "";
position: absolute;
left: 50%;
width: 14px;
height: 2px;
background: #6c757d;
top: 50%;
transform: translate(-50%, -50%);
}
.qtySelector .increaseQty:before, .qtySelector .increaseQty:after {
content: "";
position: absolute;
background: #6c757d;
top: 50%;
transform: translate(-50%, -50%);
}
.qtySelector .increaseQty:before {
left: 50%;
width: 14px;
height: 2px;
}
.qtySelector .increaseQty:after {
left: 50%;
width: 2px;
height: 14px;
}

.show_qty .qtySelector{
display: inline-block;
}

.cart_list_brand{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
color: #6c757d;
border-bottom: 1px solid #6c757d;
margin-bottom: 16px;
padding-bottom: 16px;
font-weight: 500;
}



.slider_progress .value {
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -10%);
font-size: 30px;
color: #ae3033;
  /* display: none; */
}
.slider_progress .progress_outer{
position: relative;
display: flex;
align-items: center;
justify-content: center; 
width: 100%; 
}

/* .slider_progress .progress_outer:after{
 content: "";
 position: absolute;
 right: 0;
 top: 0;
 width: 25%;
 height: 100%;
 background: #f2d3d5;
} */

.slider_progress input[type=range] {
/*removes default webkit styles*/
appearance: none;
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
/*required for proper track sizing in FF*/
width: 100%;
height: 14px;
padding: 0;
border-radius: 16px;
border: solid 1px #dfe4ec;
}

.slider_progress input[type='range'] + label {
 background-color: #b02418;
 position: absolute;
 top: -32px;
 /* left: 140px; */
 width: auto;
 padding: 0px 10px;
 text-align: center;
 border-radius: 4px;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
 color: #fff;
 font-size: 12px;
 z-index: 1;
}

.slider_progress input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 9px;
border-radius: 5.5px;
border: 0;
}
.slider_progress input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border: 4px solid #EC2625 ;
border-radius: 50%;
background: #EC2625;
margin-top: -6px;
cursor: pointer;
box-shadow: 0 2px 4px 10px rgba(69, 155, 86, .0);
  position: relative;
}
.slider_progress input[type=range]:focus {
outline: none;
}
.slider_progress input[type=range]:focus::-webkit-slider-runnable-track {
cursor: pointer;
}
.slider_progress  input[type=range]::-moz-range-track {
width: 100%;
height: 9px;
border-radius: 5.5px;
background-color: transparent;
border: none;
cursor: pointer;
}
.slider_progress  input[type=range]::-moz-range-thumb {
height: 12px;
width: 12px;
border: 4px solid #fff;
border-radius: 50%;
background: #ae3033;
cursor: pointer;
box-shadow: 0 2px 4px 0 rgba(0, 0, 44, .5);
}
/*hide the outline behind the border*/
.slider_progress input[type=range]:-moz-focusring {
outline: none;
}
.slider_progress input[type=range]::-moz-focus-outer {
border: 0;
}
.slider_progress input[type=range]::-ms-track {
width: 100%;
height: 5px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
cursor: pointer;
}
.slider_progress input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
.slider_progress input[type=range]::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
.slider_progress input[type=range]::-ms-thumb {
height: 20px;
width: 20px;
border: 4px solid #fff;
border-radius: 50%;
background: #ae3033;
cursor: pointer;
box-shadow: 0 2px 4px 0 rgba(0, 0, 44, .5);
}
.slider_progress input[type=range]:focus::-ms-fill-lower {
background: #888;
}
.slider_progress input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}

.impInstructions ul{
  list-style-type: none;
margin: 0;
padding: 0;
}

.impInstructions li {
padding-left: 30px !important;
margin-bottom: 10px !important;
position: relative;
}
.impInstructions li strong {
color: #002B74;
}
.impInstructions li.not strong {
color: #c00;
}
.impInstructions li::after {
content: "\f046";
font-family: FontAwesome;
font-style: normal;
font-weight: 300;
position: absolute;
color: #002B74;
font-size: 20px;
top: -5px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 36px;
left: 0;
z-index: 1;
}
.impInstructions li.not::after {
content: "\f00d";
top: -8px;
color: #c00;
}

.tc_modl, .tc_modl p, .tc_modl ul, .tc_modl li{
font-size: 14px;
}

.tc_modl h3, .tc_modl h4, .tc_modl h5, .tc_modl h6{
font-size: 18px;
}


.howToUse .owl-nav button {
position: absolute;
top: 50%;
background-color: #000;
color: #fff;
margin: 0;
transition: all 0.3s ease-in-out;
}
.howToUse h6 span {
padding: 3px;
border-radius: 50%;
border: 1px solid #ddd;
width: 60px;
height: 60px;
line-height: 46px;
font-size: 11px;
font-weight: 500;
}
.howToUse h6::before {
content: "";
position: absolute;
left: 0px;
top: 44%;
width: 100%;
height: 1px;
background: #979797;
z-index: -99999;
}
.howToUse figcaption {
border-top: 1px solid #979797;
min-height: 96px;
}
.howToUse figcaption p {
font-size: 13px;
}
.howToUse .owl-nav button.owl-prev {
left: -16px;
color: #343a40;
font-size: 50px;
background: transparent !important;
}
.howToUse .owl-nav button.owl-next {
right: -16px;
color: #343a40;
font-size: 50px;
background: transparent !important;
}

.howToUse .owl-nav button.disabled {
opacity: .4;
}

.address_outer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
.address_outer button {
font-size: 14px;
white-space: nowrap;
}

.locator_brand{
display: flex;
justify-content: space-between;
}

.locator_brand button{
font-size: 14px;
padding: 10px 2px;
}

.otp-form .otp-field {
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  outline: none;
  margin: 0 5px;
  font-weight: bold;
  border: 1px solid #CDCDCD;
}


.otp-form .otp-field:last-child { 
margin-right: 0px;
}

.otp-form .otp-field:focus { 
color: #021446;
/* transform: scale(1.2); */
transition: all .3s;
border-color: #021446;
}

.otp-form .otp-field:not(:placeholder-shown) {
color: #fff;  
background: #021446;  
border-color: #021446;  
} 

/* brand page end */


/* transaction page */

.list_succes{
display: flex;
justify-content: space-between;
}

.list_succes ul li:first-child{
font-size: 12px;
font-weight: 400;
}

.list_succes ul li{
font-size: 14px;
font-weight: 500;
}

.search_box{
background: url('../images/src_ic.png') no-repeat 10px 50%;
padding-left: 25px;
}

.search_box .form-control{
color: #6b6b6b;
}

.search_box .form-control:focus{
  box-shadow: none
  }

.success_outer{
border: 1px solid #F2F2F2;
}

.date_dv{
background: #F2F2F2;
cursor: pointer;
}
.list_transaction_drop{
background: #F2F2F2;
display: none;
}

.show_drop_succes .list_transaction_drop{
display: block;
}

.show_drop_succes .date_dv img{
transform: rotate(-180deg);
}

.success_outer {
margin-bottom: 20px;
}

/* transaction page end */
.navigationSlide ul {
padding-left: 0;
}
.navigationSlide ul li{
list-style: none;
}

.navigationSlide ul li.callBtn,
.navigationSlide ul li a {
  display: block;
  color: #404040;
  text-decoration: none;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 16px;
  font-size: 13px;
}

.lh-1{
line-height: 1;
}
.del_details  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}


.del_details span img{
transform: rotate(-90deg);
}

.image_rot span img {
  transform: rotate(90deg);
}

button.btn-close.btn-close-white.mt-2.me-2 {
  position: absolute;
  right: -40px;
  top: 0;
}

.add_btn {
  background: #f5f4f4;
  padding: 6px 10px;
  border-radius: 4px;
}
.CoinBox {background: url(../images/noto_coin.svg) no-repeat left center; padding-left: 30px;}
.CoinBox .fs-18 {font-size: 16px;}
.form-check-input:checked { background-color: #ec1d23; border-color: #ec1d23; }
.form-check-input:focus {border-color:rgba(236,29,35,0.5); outline: 0; box-shadow: 0 0 0 .25rem rgba(236,29,35,0.25);}
@media(max-width: 500px){
.locator_brand button {
    font-size: 10px;
    padding: 10px 2px;
}
.navigationSlide {
  width: 90% !important;
}
}

@media(max-width: 425px){
  .listining_deamination span.fs-18{
      font-size: 16px;
  }
  .listining_deamination{
      font-size: 14px;
  }
  .locator_brand {
    font-size: 14px;
  }
  .success_outer.fs-14 {
    font-size: 12px;
}
.otp-form .otp-field { 
  width: 42px;
  height: 42px; 
}

}

@media(max-width: 375px){
.locator_brand {
  font-size: 12px;
}
.list_succes ul li {
  font-size: 12px; 
}
.list_transaction_drop .fs-17 {
  font-size: 14px;
}
.otp-form .otp-field {
  width: 40px;
  height: 40px;
  margin-right: 2px;
}
}

.customModal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; padding: 10px; }
.customModalInner { width: 500px; max-width: 100%; margin: 0 auto; }
.impLink { width: 100%; white-space: nowrap; overflow-y: hidden; overflow-x: auto; }
.impLink li {width: 25%; margin: 0 !important; padding: 0 5px;}
.impLink li .btn {width:100%;}
.btn-danger {background-color: #ed1d25; border-color: #ed1d25; }
.footerBottom {position: absolute; left: 0; bottom: 0; right: 0;}
.footerBottom>div {margin: 0 auto; max-width: 768px;}

.navigationSlide { max-width: 240px; }
.btn-close.btn-close-white { background-color: #09c3b1; opacity: 1; background-size: 44%; border-radius: 50%; filter: invert(1); right: 0px;  }

.textoverflow {white-space: nowrap; overflow: auto;}

.stepsBox {display: flex;}
.stepsBox li {vertical-align: top; }
.stepsBox .item {width: 250px; white-space:normal;min-height: 100%;}
.stepsBox .item figure { padding:0 2px;}
.stepsBox .item figcaption {padding:10px; border-top: 2px solid #021446;}
.stepsBox .item figcaption p {margin: 0;}

@media(max-width: 550px){
  .impLink li { width: 175px; }
  .p-logo { max-height: 35px; }
}

.faq_section .accordion-item {background: #F9FAFF; margin-bottom: 16px; border: 1px solid #F9FAFF; color: #323539;}
.faq_section .accordion-button {background: #F9FAFF; border: 1px solid #F9FAFF; border-radius: 6px !important; padding-right: 36px !important;}
.faq_section .accordion-button:focus {box-shadow: none;}
.faq_section .accordion-button:not(.collapsed) {background: #F9FAFF; color: #323539; box-shadow: none;}
.faq_section .accordion-button::after {background: none; width: 16px; height: 2px; background: #707070; transform: none; position: absolute; right: 14px; top: 24px;}
.faq_section .accordion-button::before {content: ""; position: absolute; right: 20px; top: 17px; background: none; height: 16px; width: 2px; background: #707070;}
.faq_section .accordion-button:not(.collapsed):before {display: none;}
.faq_section .accordion-button:not(.collapsed):after {background: #323539;}
.faq_section .accordion-item:has(.show) {border: 1px solid #C3CBF5; border-radius: 6px; box-shadow: 0px 4px 14px rgba(0,0,0,.09);}
.faq_section .accordion-body {font-size: 14px;}
.back {position: absolute; top: 15px; cursor: pointer;}

.summery .card-header {background: #222337; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}

.outer_cart_list .qtySelector { display: block; width: 100%; height: auto; }
.outer_cart_list .qtyValue { border: 1px solid #ec1c24; background: transparent; height: 40px; color: #ec1c24; border-radius: 7px; }
.outer_cart_list .qtySelector div { width: 33%; }
.outer_cart_list .qtySelector div:first-child { border-right: 1px solid #ec1c24; }
.outer_cart_list .qtySelector div:last-child { border-left: 1px solid #ec1c24; }
.outer_cart_list .qtySelector .increaseQty:before, .outer_cart_list .qtySelector .increaseQty:after, .outer_cart_list .qtySelector .decreaseQty:before { background: #ec1c24; }
.outer_cart_list { margin-bottom: 18px; }
.outer_cart_list:last-child { margin-bottom: 0px; }

/* ************************ Autocomplete Start ************************ */
.react-autosuggest__container--open .react-autosuggest__suggestions-container { display: block; position: absolute; max-height: 360px; width: 100%; border: 1px solid #aaa; background-color: #fff; font-family: Helvetica, sans-serif; font-weight: 300; font-size: 16px; border-radius: 0px; z-index: 6; overflow: auto; }
.react-autosuggest__input { width: 240px; height: 30px; padding: 10px 20px; font-family: Helvetica, sans-serif; font-weight: 300; font-size: 16px; border: 1px solid #aaa; border-radius: 4px; }
.react-autosuggest__container--open .react-autosuggest__input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.react-autosuggest__container--open a { text-decoration: none; color: #212529; }
.react-autosuggest__container { position: relative; }
.react-autosuggest__input:focus { outline: none; }
.react-autosuggest__suggestions-container { display: none; }
.react-autosuggest__suggestions-list::before { content: ''; }
.react-autosuggest__suggestions-list { margin: 0; padding: 0; list-style-type: none; }
.react-autosuggest__suggestions-list li a:hover { text-decoration: none; }
.react-autosuggest__suggestion { cursor: pointer; }
.react-autosuggest__suggestion:not(:first-child) { border-top: 1px solid #ddd; }
.react-autosuggest__suggestion:hover { background-color: #ec1c24; color: #fff; }
.react-autosuggest__suggestion--highlighted { background-color: #ec1c24; color: #fff; }
.react-autosuggest__suggestion--focused .highlight { color: #120000; }
.suggestion-content { display: flex; align-items: center; background-repeat: no-repeat; }
.suggestion-content:hover { color: #FFFFFF; }
.suggestion-content:hover .suggestion-highlight { color: #FFFFFF; }
.suggestion-name { margin-left: 10px; line-height: 34px; font-size: 14px; }
.suggestion-highlight { font-weight: bold; }
/* ************************ Autocomplete End ************************ */

/* ************************ spin the wheel ************************ */
.spinThankMod .modal-content, .spinWheelModal .modal-content {
  max-width: 360px;
  margin: auto;
}
.spinThankMod .modal-body{
  background: #db0046 url(../images/spin/thnak_bg.png) no-repeat center top/100% 100% !important;
} 
.spinWheelModal .modal-body{background: #950b25 !important; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,217,26,1);} 
.btn-spin{ 
  color: #B70925 !important;
  text-align: center;
  font-family: Poppins;
  font-weight: 700;
  background: rgb(255,217,26);
  background: linear-gradient(94deg, rgba(255,217,26,1) 0%, rgba(255,167,0,1) 100%);
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
} 
.spin_section{
  background: #950b25 url(../images/spin/bg_spin2.png) no-repeat top center/100% 100%;
  padding-bottom: 100px;
} 
.spin_game_compo .pinIcon {
  position: absolute;
  right: 50%;
  top: 50%;
  content: "";
  width: 64px;
  height: 93px;
  margin: -58px -37px 0 0;
  background: url(../images/spin/spin_pin_icon.svg) no-repeat center center/cover;
  z-index: 5;
  font-size: 0;
}
.spin_game_compo .spin_canva_bg{
  background: url(../images/spin/outer_canva_spin.svg) no-repeat center center/cover;
  width: 470px;
  height: 470px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  position: relative;
} 

.spin_game_compo .bhdLno {
  width: 386px !important;
  height: 386px !important;
}
.spin_game_compo .gTLZXx {
  display: none;
}
.spin_game_compo .fixpinpoint .hmocIu{ transform: rotate(-37deg); }
.win_logo::after{
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 2px;
  border-right: 2px dashed #000;
}
.win_logo img{
  max-height: 60px;
}
.thaknsLogoDV {
  border: 2px solid #021446;
  position: relative;
  overflow: hidden;
}
.thaknsLogoDV:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #021446;
  transform: rotate(45deg);
  margin-left: -4px;
}
.whillSpinDes{
  border: 1px solid rgba(255,255,255,.3);
}
.whillSpinDes .fs-33{
  font-size: 33px;
  color: #FFDC23;
  font-weight: 600;
}
@media (max-width: 575px) {
  .spin_game_compo .spin_canva_bg{
      width: 354px;
      height: 354px;
  }
  .spin_game_compo .bhdLno {
      width: 290px !important;
      height: 292px !important;
  }
  .thaknsLogoDV .fs-24 {
      font-size: 18px;
  }
  
  .thaknsLogoDV .fs-14 {
      font-size: 13px;
  }
  .spin_section{
      padding-bottom: 0px;
  } 
}
@media (max-width: 400px){
  .spin_game_compo .spin_canva_bg{
      width: 290px;
      height:290px;
  }
  .spin_game_compo .bhdLno {
      width: 240px !important;
      height: 240px !important;
  }
}
/* ************************ spin the wheel End ************************ */