/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0; 
  height: 100%; 
 
}  
body{    
  background-color:#fff;
  
  margin:0; 
  padding:0;  
 
  position: relative;
  overflow-x: hidden;

  overscroll-behavior: contain;
}

.modal-open{
  touch-action: none; 
  overscroll-behavior: contain;
}
 

.modal-backdrop{
  overscroll-behavior: contain;
  --bs-backdrop-opacity:.88;
}

.pc body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  image-rendering: -webkit-optimize-contrast;
}

 

@media (max-width:991.98px){}
 
a{
  color:inherit;
  text-decoration: none; 
  transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none; color:var(--brown);  }
 
.star{ color: #bc0000 }

.form-control,
.form-select{
  --input-h:45px;
 -webkit-appearance: none;
   
  padding:0 15px;

  color:#fff;
  font-weight:300; 
  font-family:inherit; 
  font-size:var(--fs-15);

  height:var(--input-h);
  line-height:calc(var(--input-h) - 2px);   
  background: #5C5C5C;
  border: 1px solid #818181;
  border-radius:7px; 
 
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
  
.form-control:disabled, 
.form-control[readonly] {
background: #e2e2e2;
border-color: #c7c7c7;
} 
 
.form-control.h-105{height: 105px;}

.form-control:focus{
  background: #5C5C5C;
  box-shadow: none !important;
  border-color: #818181;
  color: #fff;
}

.form-control.normal{
  background-color: transparent;
  border-color: #CBCBCB;
  color: #000;
}
.form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-size: 18px 15px;
  background-repeat: no-repeat;
}

textarea.form-control{
  height: 150px;
  line-height: normal;
  padding-top: 10px; 
}
textarea.form-control.h-85{
  height: 75px;
}
.form-control::-moz-placeholder {
  color: inherit !important;
  opacity: 0.4;
}
.form-control:-ms-input-placeholder {
  color: inherit !important;
  opacity: 0.4;
}
.form-control::-webkit-input-placeholder {
  color: inherit!important;
  opacity: 0.4;
}
 
.form-group{
  display: block;
  position: relative; 
}
.form-group label.title{
  text-align: left;
  display: block; 

  font-weight: 400;
  font-size: var(--fs-12); 
  margin-bottom:2px;
  padding: 0 0  5px 0;
  text-transform: uppercase;
} 

.form-group label.title span{
  color: #ADADAD;
}
  
.form-group label.title .star{
  color:#ED1C24;
  margin-right: 3px;
}

.form-group span.error{
  color:#ED1C24;
  font-size: 12px;
  padding-top: 5px;
  font-weight: 300;
  /* margin-top: -15px;  */
  display: block;
}
 
.form-group .group{
  position: relative;
  display: block;
} 
.form-group .group .icons{
  position: absolute;
  top: 0 !important;
  right: 15px;
  bottom: 0 !important;
  width: 18px; 
} 
.form-group .group .icons.left{
  left: 10px;
  right: auto;
}
.form-group .group .icons.left + .form-control{
  padding-left: 35px;
}
   
.form-group .icon-eye{background-image: url(../img/icons/icon-eye-red-slash.svg);}
.form-group .icon-true{background-image: url(../img/icons/icon-check.svg);}
.form-group input[type="text"] + .icon-eye, 
.form-group input[type="text"] + span.error + .icon-eye {
  background-image: url(../img/icons/icon-eye-red.svg);
}
.form-check {
  position: relative;
  padding-left:0;
  display: flex;
  gap: 10px;
}
.form-check .form-check-input{
  width: 15px;
  height: 15px;
  margin-right: 0; 
  border-width: 1px;
  position: relative;
  margin-left:0;
  border-radius: 2px; 
  flex-shrink: 0;
  border-color:#CBCBCB;
  box-shadow: none !important;
}
.form-check .form-check-input[type=radio]{
  border-radius: 50%;
}

.form-check .form-check-input[type=radio]:checked {
  background-color: transparent;
  border-color:#20BD6C;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2320BD6C'/%3e%3c/svg%3e");
}
.form-check label{
  margin-bottom:0;
  font-weight: 400;
  font-size: var(--fs-14); 
}
.form-check-input:checked[type=checkbox], 
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent; 
}

.form-check-input:checked[type=checkbox]{
  border-color:#20BD6C;
  
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); 
  background-color:#20BD6C ;
}
.btn{
  --btn-h:45px;
  position: relative; 
  padding:0 15px;    
  font-weight: 500;  
  height:var(--btn-h); 
  line-height:calc(var(--btn-h) - 2px);  
  border-radius:7px;   
  transition: all 0.25s ease-in-out;
  font-size: var(--fs-15); 
  text-transform: uppercase;
  overflow: hidden;

  --bs-btn-color:var(--black);
  --bs-btn-bg:var(--yellow);
  --bs-btn-active-color:var(--bs-btn-color);
  --bs-btn-active-bg:var(--bs-btn-bg); 
  --bs-btn-active-border-color:var(--bs-btn-bg);

  --bs-btn-hover-color:var(--bs-btn-active-color);
  --bs-btn-hover-bg:var(--bs-btn-active-bg);
  --bs-btn-hover-border-color:var(--bs-btn-active-border-color);
 
} 
 
.btn-black{
  background-color: var(--black);
  border-color: var(--black);
  color: #fff;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--black);
  --bs-btn-active-border-color:var(--black);
} 

.btn-gray{
  --bs-btn-border-width:0;
  --bs-btn-color:#C4C4C4; 
  --bs-btn-bg: #3C3C3C;  
}

.btn-link{
  border:0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
  background-color: transparent !important;
  color: #8F8F8F;
  text-decoration: none;
}
.btn[disabled]{
  border-color: #D4EAEA;
  background-color:#D4EAEA;
  color:#A1C9C9;
  line-height: 56px;
  pointer-events: none;
  opacity: 1;
} 
.btn.disabled, .btn:disabled{opacity: 0.35; pointer-events: none;}
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.rounded {border-radius: 50px !important;}
.btn.has-shadow{
  overflow: visible;
}
.btn.has-shadow > span{
  position: relative;
  z-index: 100;
}
.btn.has-shadow:before,
.btn.has-shadow:after{
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 100%;
  top: 10px;

  border-radius: 8px;
  background: rgba(253, 184, 36, 0.24); 
filter: blur(12px);
}
.btn.has-shadow + .btn-link{
  position: relative;
  z-index: 10;
}
.btn-xs{
  --btn-h:29px;
  font-size: 12px;
  border-radius: 50px;
  font-weight: 400;
}
.btn.h-52{
  --btn-h:52px;
  font-size: var(--fs-14);
}
.btn-link, 
.btn-link:hover, 
.btn-link:focus, 
.btn-link:active{
  background-color: transparent;
}
.btn:focus,.btn:active,
button:focus,button:active{}

.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important;
   box-shadow: none!important;
} 
.buttons{
  display: block; 
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
} 
 
.buttons.center .btn{
  margin: 0 auto;
}
.buttons.d-flex {
  -ms-flex-pack: center;
justify-content: center;
}
.buttons.d-flex .btn{
  margin: 0 7px; 
}
 
 
svg path,
svg rect,
svg line,
svg circle,
svg polygon{ 
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
} 


 
/*==================================================
    Icon Setup
==================================================*/  

.icons{
  display:inline-block;
  position:relative;
  vertical-align:middle; 
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
.icons.before:before,
.icons.before:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
.btn .icons.before:before{ opacity: 1; }
.btn .icons.before:after{ opacity: 0; }
.pc .btn:hover .icons.before:before{ opacity: 0; }
.pc .btn:hover .icons.before:after{ opacity: 1; }

.icon-fire{background-image: url(../img/icons/icon-fire.png);}
.icon-search{background-image: url(../img/icons/icon-search.svg); margin-right: 3px;}
.icon-plus{background-image: url(../img/icons/icon-plus.svg);}
.icon-discount{background-image: url(../img/icons/icon-discount.svg);}
.icon-receipt{background-image: url(../img/icons/icon-receipt.svg); top: -1px;}
.icons.w-18{
  width: 18px;
  height: 18px;
}
.icons.w-32{
  width: 32px;
  height: 32px;
}
/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
  height:5px;
  vertical-align:top;

  border-top: 1px solid #676767;
  border-left: 1px solid #676767;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}



.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

.arrow-right{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);  
}

.arrow-up{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.arrow-down{
   margin-left:1px; 
   -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  
}
 
 
.container-fluid{
  max-width:100%; 
  padding-left:15px;
  padding-right:15px; 
  position: relative;
  z-index: 9;  
}

.container{ 
  max-width:100%; 
  padding-left:15px;
  padding-right:15px; 
  position:relative;
  z-index:9; 
}

.section-target{
  position: absolute;
  top:0px;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.section{
  display: block;
  position: relative;
  padding: 8px 15px; 
}
.section.bg-white{
  background-color: #fff; 
}
   
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }


.fancybox-button--arrow_left > div,
.fancybox-button--arrow_right > div,
.fancybox-button--zoom,
.fancybox-button--play{opacity: 0 !important; pointer-events: none;} 
/*==================================================
    Header Setup
==================================================*/  
 
:root {    

  --bs-body-color:#fff;
  --bs-body-text-align:left;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.55;
  --bs-body-font-size:var(--fs-15);
  --bs-body-font-family:'Kanit', sans-serif;
     
  --black:#191919;   
  --yellow:#FDCD03;
  --orange:#FB912F;
 
  --fs-11:11px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-14:14px;
  --fs-15:15px;
  --fs-16:16px;
  --fs-17:17px;
  --fs-19:19px;
  --fs-20:20px;
  --fs-22:22px;  
  --fs-26:26px;  

  --page-width:992px;
  --header-height:110px;
  --animate-duration-2s: all 0.2s ease-in-out;
  --animate-duration-35s: all 0.35s ease-in-out;
  --animate-duration-40s: all 0.40s ease-in-out;
  --animate-duration-45s: all 0.45s ease-in-out;
   
  --fw-300:200;
  --fw-400:300;
  --fw-500:400;
  --fw-600:500; 
  --fw-700:600; 
 
} 

/*
font-family: 'Work Sans', sans-serif;
*/

b, strong{
  font-weight: bold; 
  font-family: inherit; 
}
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6{   
  margin:0;  
  color:inherit;  
  font-weight:500;
  font-style: normal; 
  line-height: 1.5;   
  position: relative; 
}   
.nowrap{ white-space: nowrap; }  
.white{color: #fff !important;} 
.gray{color: #CBCBCB;}
.fw-normal{font-weight: 400 !important;} 
.fw-300{font-weight: var(--fw-300);}
.fs-16{font-size: var(--fs-16);}
.fs-17{font-size: var(--fs-17);}
.fs-20{font-size: var(--fs-20);}
.fs-22{font-size: var(--fs-22);}
.fs-14{font-size: var(--fs-14);}

h2,.h2{
  font-size: var(--fs-26);
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
 
}  
@media (max-width:991.98px) {
  :root{
    --page-width:100%;
  }
}

@media (max-width:700px) {
  :root{
    --header-height:100px;
  }
}

@media (max-width:380px) {
  :root{}
}
 
.header{
  position: fixed;
  top: 0;
  left:50%;
  right: 0;
  padding:20px 0 0 0; 
  z-index: 1010;      
  display: flex;     
  color: #fff;
  border-radius:0; 
  height:var(--header-height);
  width: var(--page-width);
  margin-left: calc(-1 * var(--page-width) / 2); 
  background-color:var(--black);
  border-radius: 0 0 30px 30px;
}  

.header-trans{
  background-color: transparent;
  padding:20px 15px;
  height: auto;
  transition: all 0.35s;
  border-radius: 0;
}

.header h5,
.header h3{
  font-size: var(--fs-16); 
  text-align: center;
  font-weight: 500;
}
.header h3{
  font-size: var(--fs-22);
}
.header .title-center{
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: all 0.35s;
}
.header .btn-goback{
  margin: auto  0;
}
.header-trans .btn-goback{
  margin: 0;
}
.header-trans .title-center{
  top: 0;
}
.header-fixed .header {
  background-color: #fff;
  padding-top: 15px;
  padding-bottom: 15px;
}
.header-fixed .btn-goback{  
    --btn-h: 30px;
    width: var(--btn-h);
}
.header-fixed .title-center{
  opacity: 1 !important;
}
.black{color: #000;}
@media (max-width:450px) {
  .header{
    width: 100%;
    left: 0;
    margin: 0;
  }
}

.header .container,
.header .container-fluid{  
  display: flex;   
  align-items: center;
  justify-content: space-between;
} 
.page-title{
  text-align: center;
  margin: 0 auto;
}
.page-title h2{
  color: #ffffff;
  font-size: var(--fs-22);
  font-weight: 600;
  
} 
@media (max-width:450px) {}

@media (max-width:330px) {}
/*==================================================
   Section
==================================================*/  
 
.page{
  display: block;
  position: relative;
  overflow: hidden;   
  
}
.page-boxed{
  width: 100%;
  display: block;
  margin: 0 auto;
  max-width: var(--page-width); 
  position: relative;
  overflow: hidden;  
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100) !important;
  background-color: #FAFAFA;
  padding-top: calc(var(--header-height) + 8px);
  background-color: var(--black);

  display: flex;
  flex-direction: column;

 
}

.page-boxed.bg-white{
  background-color:#fff;
  color: #000;
}
.page-boxed.bg-light{
  color: #000;
}
.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1090; 
  display:flex;   
} 


.loader {
  width: 30px;
  height:30px;
  margin:  auto;
  display: block;
  border-top: 3px solid var(--yellow);
  border-right: 3px solid rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid rgba(0, 0, 0, 0.1);
  border-left: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  animation: spin 1s infinite linear;
}
 
 
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.section-full{
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100) !important;
  display: flex;
}
 
.background{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  pointer-events: none;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.device .background.parallaxie{
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (max-width:1199px) {
  .background.parallaxie{
    background-attachment: scroll !important;
    background-position: center center !important;
  }
}

.section.h-full{
  min-height: 100vh;
}

.section-title{ 
  display: block;
  position: relative; 
  padding:0
}    
 
.card{
  border:0;
  border-radius: 0;
  background-color: transparent;
  position: relative;
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block; 
 
}

.card-photo .photo{
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.35s ease 0s;  
}
.card-photo .photo img{
  width: 100%
}

.card-photo.rounded,
.card-photo.rounded .photo{
  border-radius: 10px;
}
.card-body{color: inherit;}
 
.card-link{
  position: absolute !important;
  top: 0;
  left: 0; 
  right: 0;
  height: 100%;
  z-index: 100;
}
.card h3,
.card p,
.card .card-body{transition: all 0.2s ease 0s;}

 
strong{font-weight: 500;}
 
/*==================================================
   Home
==================================================*/ 
 
.button-footer{
  position: relative;
  height: var(--header-height); 
}
.button-footer .container{
  position: fixed;
  left:50%;
  right: 0;
  bottom: 0;
  height: var(--header-height); 
  width: var(--page-width);
  margin-left: calc(-1 * var(--page-width) / 2); 
  box-shadow: 0px -4px 13px rgba(0, 0, 0, 0.11);
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-fullheight{
  display: block;
  height: calc((var(--vh, 1vh) * 100) - (var(--header-height) * 2));
  /* height: calc(var(--vh, 1vh) * 100) !important;  */
}
 
/*==================================================
   Address Bar
==================================================*/ 

@media (min-width:576px) {
  .section.flex-fill{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

.section.flex-fill{
  display: flex;
}
.address-bar{
  display: flex;
  color: #757575;
  height: 45px;
  align-items: center;
  background-color: var(--black);
}

.address-bar:empty{
  background-color: #161616 !important;
}

.address-bar .icons{
  width: 20px;
  height: 20px;
  display: flex;
}
.address-bar .icons svg,
.address-bar .icons img{
  width: 100%;
  height: auto;
  margin: auto;
}
.icons svg.white path{
  fill: #fff !important;
}
.address-bar .link{
  text-align: center;
  font-weight: 200;
  font-size: var(--fs-11);
  margin: 0 auto;
}

.bg-gray{
  background-color: #161616 !important;
}

.fullheight{
  flex: 1 1 auto;
}

.card-form {
  background-color:#212121;
  border-radius: 20px;

  padding:0 15px;
  color: #fff;
  margin-top: 55px;
}

.card-form .card-header{
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom:20px;
}
.card-form .card-header h5{
  font-size: var(--fs-17);
  font-weight: var(--fw-400);
  line-height: 1.5;
}
.card-form .card-header .icons{
  width: 90px;
  height: 90px;
  border-radius: 50%; 
  margin: 0 auto 15px;
  margin-top: -45px;
}
.card-form .card-header .icons.w-85{
  width:85px;
  height:85px;
}
.card-form .card-header .icons img{
  width: 100%;
}
.orange{color: var(--orange);}

.card-form .card-body{
  padding: 0 0;
}
.card-form hr{
  margin: 10px 0;
}

.img-promotion{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  flex-direction: column;
}
.img-promotion h6{
  font-size: var(--fs-14);
  text-align: center;
  font-weight:400;
  margin-top: -10px;
  position: relative;
  z-index: 10;
}

.img-promotion .img{
  width: 240px;
  margin: 0 auto;
  position: relative;
  right: -15px;
}

.img-promotion .img-50{
  width: 50px;
  right: auto;
  margin-bottom: 30px;
}

.apps-download{
  display: flex;
  gap:15px;
  justify-content: center;
}
.apps-download img{
  height: 44px;
}

.phone-group .form-control{
  padding-left:85px;
}
.phone-prefix{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap:10px;
  padding: 0 14px;

  font-size: var(--fs-13);
}
.phone-prefix:after{
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  border-right: 1px solid #FFEEA6;
}
.phone-prefix .flag{
  width: 15px;
  height: 15px;
  border:2px solid #fff;
  border-radius: 50%;
}

.link-orange{
  color: var(--orange);
  text-decoration: underline;
}

.btn-goback{
  --btn-h:37px;
  width: var(--btn-h);
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.btn-goback svg{
  width: 22px;
  height: auto;
  transform: rotate(90deg);
}
.btn-goback svg path{
  fill: var(--yellow);
}
.card-otp{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.card-otp .icon-email-otp{
  width: 100%;
  max-width: 222px;
  margin: 0 auto;
  display: block;
}
.card-otp .card-header{
  position: relative;
  padding:  15px 10px;

}
.card-otp .card-body{
  padding-top: 30px;
}
.form-digit{
  margin: 40px 0;
}

.form-digit .form-control{
  --input-h: 50px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #C9C9C9;
  border-radius: 0;
  width: 100%;
  background-color: transparent !important;
  text-align: center;
  font-size: 28px;
  color: var(--yellow);
  font-weight:600;
}
.form-digit .has-value .form-control{
  border-color: var(--yellow);
}

.request-otp{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap:10px;
  margin-bottom: 40px;
  padding-top: 10px;
}


.request-otp .btn{
  --btn-h:28px;

  --bs-btn-border-width:0;
  --bs-btn-color:#C4C4C4; 
  --bs-btn-bg: #3C3C3C;  
  font-weight: 300;
  margin: 0 auto;
  font-size: var(--fs-13); 
 
}
.request-otp p{
  margin: 0;
  font-size: 10px;
  color:#C4C4C4;
  font-weight: 300;
}

.loader-waiting{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: var(--fs-16);
  font-weight: 300;
  width: 100%;
}

.loader-waiting .spinner, .spinner{
  width:30px;
  height: auto;
  margin-top: -10px;
}
.spinner{ margin-top: 0;}
.loader-waiting.style-2{
  padding:20px 0;
}
.loader-waiting.style-2 .spinner{
  width: 45px;
  margin: 0;
}

.section-pincode{
  background-color:rgba(21, 21, 21, 0.86) ;
  position: relative;
  z-index: 100;
  display: flex;
  flex: 1 1 auto;
  text-align: center;

  padding: 0 50px;

  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.section-pincode h3{
  font-size: var(--fs-22);
}

.pin-number{
  display: flex; 
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
 position: relative;
}

.pin-number li{
  width: 33.333%;
  display: flex;
  padding: 15px 10px;
}

.pin-number li .btn{
  margin: auto;
  font-size: var(--fs-22);
  font-weight: var(--fw-500);
  padding: 0;
  --btn-h:72px;
  width: var(--btn-h);
  border-radius: 50%;

  --bs-btn-color:var(--yellow);
  --bs-btn-bg:transparent; 
  --bs-btn-border-color:#fff;
  --bs-btn-active-border-color:var(--bs-btn-border-color);
 
}
.pin-number li:last-child{
  position: absolute;
  position: absolute;
  right: -10px;
  bottom: 0;
}
.pin-number li .btn.btn-delete{
  width: 30px;
  border:0 !important;
  border-radius: 0;

 
}
.pin-number li .btn.btn-delete img{
  width: 100%;
}
.pin-disc{
  display: flex;
  padding:30px 0 25px;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap:25px;
}
.pin-disc li{
  padding: 0;
  margin: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border:1px solid #fff
  
}
.pin-disc li.active{
  background-color: var(--yellow);
  border-color: var(--yellow);
}
@media (min-width:576px) {
  .pin-number{
    max-width:320px;
  }
  .pin-number li{
    padding: 20px 10px;
  }
}
@media (max-width:380px) {
  .pin-number li .btn{
    --btn-h:68px;
  }
  .pin-number li{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/*==================================================
  Detail Restaurant
==================================================*/ 

.page-white{
  --bs-body-color:#000;
}
.section-banner.h-275{
  height:75vw; 
  max-height: 400px; 
}
.section-banner.h-340{
  height:90vw; 
  max-height: 400px; 
}
.section-banner.fixed .background{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height:75vw; 
  max-height: 400px;
}
.section-banner.fixed.h-340 .background{height:90vw; }
.section-body{
  background-color: #fff;
}
.section-body.rounded{
  --rounded:40px;
  border-radius: var(--rounded) var(--rounded) 0 0 !important;
  margin-top: calc(var(--rounded) * -1);;
}

hr.hr-7{
  border-width: 7px;
  border-color: #F8F8F8;
  opacity: 1;
  margin-left: -15px;
  margin-right: -15px;
}

hr{
  opacity: 1;
  border-color: #EFEFEF;
}

.menu-lists h5{
  font-weight:600;
}
.menu-lists hr{
  margin:10px 0;
}
.menu-lists small{
  color: #A1A1A1;
  font-size: 12px;
}



p + .card-menu{
  margin-top: -4px;
}
.card-menu{
  display: flex;
  padding: 16px 0;
}
.card-menu .card-photo{
  border-radius: 10px;
  width: 85px;
  height: 75px;
  background-color: #ccc;
  flex-shrink: 0;
  overflow: visible;
}
.card-menu .card-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 10px;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.04);
}
.card-menu .card-body{
  padding: 0 0 0 15px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.card-menu h5{
  font-size: 15px;
  font-weight: 500;
  color: #000;
}
.card-menu p{
  font-weight: 200;
  font-size: 12px;
  color: #7A7A7A;
  margin-bottom: 0;
}
.card-menu .price-wrap{
  text-align: right;
}
.card-menu .price-wrap .old-price{
  color:#D52E2F;
  font-size: 12px;
  text-decoration: line-through;
  margin: 0;
}

.card-menu .discount{
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.card-menu .discount > span{
  border-radius: 5px;
  background-color: #20BD6C;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  width: 49px;
  height: 19px;
display: flex;
align-items: center;
justify-content: center;
}

.card-menu .qty-item{
  margin-left: auto;
}
.qty-item{
  display: flex;
  gap:5px;
  align-items: center;
}
.qty-item .btn{ 
  --btn-h:26px;
  --bs-btn-border-width:0;
  width: 24px;
  padding: 0;
  border-radius: 5px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background-position: center center;
  background-repeat:no-repeat;
  background-size:9px;

  --bs-btn-bg:#F3F3F3;
  --bs-btn-hover-bg:var(--bs-btn-bg);
  --bs-btn-active-bg:var(--bs-btn-hover-bg);
}
 
.qty-item .btn.sub{   
  background-image: url(../img/icons/icon-sub.svg);
  
}
.qty-item .btn.add{ 
  background-image: url(../img/icons/icon-add.svg);

  --bs-btn-bg:#CEFFCD;
  --bs-btn-hover-bg:var(--bs-btn-bg); 
} 
.qty-item .btn.sub.disabled{
  opacity: 0.4;
  pointer-events: none;
  --bs-btn-disabled-bg:#F3F3F3;
}
.qty-item input{
   --input-h:28px;
   width: 30px;
  text-align: center;
  font-weight: 500;  
  padding: 0;  
  pointer-events: none;
  border-radius: 0;
  border: 0;
  font-size: 16px;
  background-color: transparent;
  color: #000;
}

.card-menu.main .card-body{
  padding-left: 0;
}
.card-menu.main h3{
  font-size: var(--fs-19);
  font-weight: 500;
}
.card-menu.main p{
  font-size: var(--fs-14);
}
.card-menu.main h5{
  font-size: var(--fs-17);
}
.card-menu.main .price-wrap .d-flex{
  align-items: center;
  gap:10px
}
.card-menu.main .price-wrap .discount{
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
}
.footer-app-download-height{
  height: 100px;
  display: block;
  background-color: #fff;
}
.footer-app-download-height.h-195{
  height: 195px;
}
.footer-app-download{ 
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #161616;
  color: #fff;

  display: flex;
  gap:15px;
  padding: 20px 15px; 
  z-index: 800;
}
.footer-app-download .btn-yellow{
  border-radius:11px;
  color: #fff;
  --btn-h:28px;
  font-weight: 300;
  padding: 0 10px;
  font-size: 11px;

  --bs-btn-bg:#E4B900;
}
.footer-app-download .logo{
  width: 43px;
  height: auto;
}
.footer-app-download h5{
  font-size: 11px;
  font-weight: 400;
}
.footer-app-download h5 .orange{
  color: #FF855E;
}
.footer-app-download .apps-download{
  justify-content: flex-start;
  margin-top: 6px;
}
.footer-app-download .apps-download img{
  height: 25px;
}

.card-restaurant{
  display: flex;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.05);
  margin-top: -50px;
  margin-bottom: 25px;

  padding: 20px;
  flex-direction: column;
}

.card-restaurant .card-header{
  padding: 0;
  display: flex;
  gap:15px;
  align-items: center;
  border-bottom: 1px solid #EFEFEF;
  padding-bottom: 20px;
}
.card-restaurant .logo{
  width: 46px;
  height: 46px;
  position: relative;
  flex-shrink: 0;
}
.card-restaurant .logo img.w-100{
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border:1px solid #EEEEEE;
}
.card-restaurant .logo .verified{
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: auto;
}
.card-restaurant .card-header h3{
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  color: #000;
}
.card-restaurant .card-header p{
  font-size: 12px;
  margin: 0;
  font-weight: 300;
  color: #4D4D4D;
}
.card-restaurant .card-body{
  padding-top:15px;
}
.card-restaurant h6{
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}
.card-restaurant p{
  margin: 0;
  color: #7A7A7A;
  font-size: 13px;
  font-weight: 200;
  line-height: 1.3;
}
@media (min-width:621px) {
  .section-banner.h-275{
    height:50vw; 
  }
  .footer-app-download {
    gap:25px
  }
  .footer-app-download h5{
    font-size: 14px;
  }
}

.modal{
  --bs-modal-zindex: 1065;
  --bs-modal-bg:#272727;
  --bs-modal-border-radius:30px;
}
.modal-backdrop {
  --bs-backdrop-zindex: 1060;
}
.modal-alert{
  --bs-modal-width: 278px;
  text-align: center;
}

.modal-alert .modal-dialog{
  width: var(--bs-modal-width);
  margin-left: auto;
  margin-right: auto;
}

.modal-alert h4,
.modal-alert h3{
  font-size: var(--fs-17);
  font-weight: 500;
  margin-bottom: 10px;
}
.modal-alert h3{
  font-size: var(--fs-20);
}
.modal-alert .modal-content{
  padding:25px 20px;
}
.modal-alert .img-promotion .img{
  right: -5px;
  width: 100%;
}
.modal-alert .btn{
  border-radius: 100px; 
  max-width: 180px;
  width: 100%;
  margin: 0 auto;
}
.modal-alert .icon-50{
  width:46px;
  height: auto;
  margin: 0 auto 10px;
}

.modal-light{
  --bs-modal-bg:#fff;
  --bs-modal-color:#7E7E7E;
}
.modal-light h4,
.modal-light h3{
  color: #000;
}
.modal-light .btn-link{ 
  color: #000;
}
.btn-close{
  position: absolute;
  top: -7px;
  right: -7px;
  padding: 0;
  width: 31px;
  height: 31px;
  opacity: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/icons/icon-close-circle.svg);
}

.btn.w-150{width: 150px;}

/*==================================================
  Share Location
==================================================*/ 

.map-height{
  height: 420px;
  /* height: 60vh */
}

.section-share-location .map{
  position: fixed;
  top: 0;
  left:0;
  right: 0;  
  bottom: 0; 
}
.section-share-location .map iframe{
  width: 100%;
  height: 100%;
}
@media (min-width:992px) {
  .section-share-location .map{
    width: var(--page-width);
    margin-left:-496px ;
    left: 50%;
  }
}
.boxed-location{
  position: relative;
  display: block; 
  padding-top: 1px;
}
.boxed-location .bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px 20px 0 0;
  filter: drop-shadow(0px -4px 8px rgba(0, 0, 0, 0.08));
  z-index: 10;

  background-position: top center;
  background-repeat:no-repeat;
  background-size:820px;
  background-image: url(../img/thumb/bg-share-location.png);
}
.boxed-location .bg:before,
.boxed-location .bg::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #fff;
  width: 30%;
  display: none;
}
.boxed-location .bg:before{
  left: 0;
  border-top-left-radius: 20px;
}
.boxed-location .bg::after{
  right: 0;
  border-top-right-radius: 20px;
}

.boxed-location .bg > span{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 200px;
  background-color: #fff;
}
.boxed-location > div:not(.bg){
  position: relative;
  z-index: 30;
}
.avatar-group{
  display: flex;
  width: 100%;
  position: relative;
  justify-content: center;
  margin-top:-41px;
}
.avatar-group .avatar{
  width: 98px;
  height: 98px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ccc;

  margin: 0 -20px;
}
@media (min-width:501px) {
  .boxed-location .bg:before,
   .boxed-location .bg::after{display:block ;}
}
.boxed-location .hgroup{
  text-align: center;
  padding:20px 0;
  margin-top:15px;
}
.boxed-location p small{
  font-size: 12px;
}
.boxed-location h3{
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
.label-info{
  border-radius: 10px;
  background-color: #CEFFCD;
  border: 1px solid #83D79B;
  color: #189B58;
  font-size: 11px;
  height: 25px; 
  line-height: 22px;
  padding: 0 10px;
}
.label-info span{
  border-bottom: 1px solid #83D79B;
  display: inline-block;
  line-height: 0.8;
}

.card-info{
  display: flex;
  padding: 0 15px;
}
.card-info .gray{
  color: #8E8E8E;
}
.card-info .gold{
  color: #D79920;
}
.card-info p{margin: 0;}
.card-info .d-flex{
  align-items: center;
}
.card-info .fw-200{
  font-weight: 300;
}
.card-info .avatar{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.card-info .ratting{
  display: flex;
  align-items: center;
  gap:4px;
  margin-left: auto;

}
.card-info .ratting .star{
  width: 16px;
  height: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-star.svg);
}
.card-info .card-body{
  padding:0 ;
  align-items: center;
}

.card-direction{
  display: flex;
  flex-direction: column;
}

.card-direction h6{
  color:#9D9E9B;
  font-size: var(--f-12);
  font-weight: 400;
  margin-bottom: 15px;
}
.card-direction h4{
  font-weight: 500;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 14px;
}
.card-direction hr{
  width: 100%;
  margin: 10px 0;
}
.card-direction ul{
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction: column;
  width: 100%;
}
.card-direction ul li{
  display: flex;
  position: relative;
}
.card-direction ul li.line{
  padding-left:52px;
}
.card-direction ul li.line:before,
.card-direction ul li.line:after{
  content: '';
  position: absolute;
  top: 4px;
  left: 12px;
  width: 3px;
  height: 3px; 
  background-color: var(--almost-black);
  border-radius: 50%;
}
.card-direction ul li.line:after{
  top: 12px;
}
.card-direction .icons{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(169, 169, 169, 0.2);
  margin-right:25px;
}
.card-direction .icons:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
}
.card-direction .icon-map-start:before{
  
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:#3CAE84;
  margin: -5px 0 0 -5px;

}

.card-direction .icon-map-end:before{ 
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  
  border-bottom: 10px solid #EC6E6F;

  margin: -6px 0 0 -5px;
}

/*==================================================
Open web in other app
==================================================*/ 

.header .d-flex{
  align-items: center;
}
img.img-40{
  width: 40px; 
  height: auto;
  flex-shrink: 0;
}
img.img-110{
  width: 100px;
  height: 100px;
  object-position: center;
  object-fit:contain;
}
img.img-110.rounded{
  object-fit: cover;
  border-radius: 50% !important;
}
.section.opening-food-menu{
  flex-direction: column;

  padding-top: 20px;
}
.section.opening-food-menu .food-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.bg-light{
  background-color: #F8F8F8 !important;
}

.page-header{
  background-color: #191919;
  border-radius: 0 0 20px 20px;
  display: flex;
  align-items: center;
}

.card-restaurant.normal{
  margin: 0;
  padding: 10px 0;
  box-shadow: none;
  color: #000;
  border: 0;
  position: relative;
}
.card-restaurant.normal .card-header{
  border: 0;
  padding: 0;
}
.card-restaurant.normal h4{
  font-size: var(--fs-17);
  font-weight: 500;
}
.card-restaurant .ratting{
  display: flex;
  align-items: center;
  gap:3px;
  font-size: 12px;
  margin-left: 10px !important;
  font-weight: 500 !important;
}
.card-restaurant .ratting .star{
  width: 14px;
  height: 14px;
  background-image: url(../img/icons/icon-star.svg);
  background-position: center center;
  background-repeat: no-repeat; 
  background-size: contain;
}

.card-food-order{
  display: flex;
  padding:15px;
  border-radius: 15px;
  background-color: #F8F8F8;
  align-items: center;
  color: #000;
  position: relative;
}
.card-food-order .card-icon{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: #EEEEEE;
  flex-shrink: 0;
  display: flex;
}
.card-food-order .card-icon img{
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin: auto;
  object-fit: contain;
  object-position: center;
}
.card-food-order .card-body{
  padding: 0 0 0 15px;
  flex-direction: column;
}
.card-food-order h4{
  font-size: var(--fs-15);
  font-weight: 500;
}
.card-food-order p{
  margin: 0;
  color: #9D9D9D;
  font-size: var(--fs-14);
  font-weight: 300;
}
.card-food-order:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 21px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image:url(../img/icons/icon-arrow-circle-1.svg);
}
.card-food-order.active{
  background-color:#FDCD03;
}
.card-food-order.active .card-icon{
  background-color: #FFEEA5;
}
.card-food-order.active p{
  color: #917604;
}
.card-food-order.active:before{
  background-image:url(../img/icons/icon-arrow-circle-2.svg);
}

.section-banner .btn-goback{
  position: absolute;
  top:30px;
}
.footer-button-fixed{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 113px;
  padding:20px 15px;
  filter: drop-shadow(0px -3px 11px rgba(0, 0, 0, 0.05));
  background-color: #fff;

  border-radius: 20px 20px 0 0;
}
.footer-button-fixed.bottom-0{
  bottom: 0;
}
.footer-button-fixed .btn{
  border-radius: 15px;
}

@media (max-width:991px) {
  .footer-button-fixed{
    bottom: 100px;
  }
}

.food-lists{
  display: flex;
  flex-direction: column;
  padding-top: 2px;
}
.food-lists .form-check{
  border-bottom: 1px solid #F1F1F1;
}
.food-lists .form-check:last-child{
  border-bottom: 0;
}
.food-lists .form-check-label{
  padding: 13px 0;
  font-weight: 300;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.food-lists .form-check-label .price{
  font-weight: 400;
  color: #808080;
}
.food-lists .form-check .form-check-input{
  margin: auto 0;
  flex-shrink: 0;
}

.footer-height{
  display: block;
 
}
.footer-height.h-90{
  height: 90px;
}

.food-summary{
  display: flex;
  gap:20px;
  bottom: 0 !important;
}
.food-summary .qty-item input{
  width:45px;
}
.food-summary .btn-price{
  --btn-h:50px;
  flex: 1 1 auto;
  justify-content: space-between;
  display: flex;
  text-transform: none;
}
.food-summary .btn-price .price{
  font-size: 24px;
}

.card-menu.infos{
  padding: 0 0 20px;
}
.card-menu.infos p{
  margin-bottom: 10px;
}
.card-menu.infos p:last-child{
  margin-bottom: 0;
}
.card-menu.infos .w-55{
  flex-shrink: 0;
  width: 50px;
}

.section-loader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  z-index: 1020;

  transition: all 0.35s;
  opacity: 1;

  font-size: var(--fs-17);
}
.section-loader .img-loader,
.modal-loader .img-loader{
  width: 60px;
  height: 60px;
  object-position:center;
  object-fit: contain;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  display: block;
} 
.modal-loader .modal-content{
  margin: 0;
  flex: 1 1 auto;
  display: flex;
}
.modal-loader .modal-dialog{
  height: 90vh;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-loader{
  --bs-modal-bg:transparent;
  --bs-modal-border-radius: 0;
}
 
.modal-loader .modal-content{ 
  align-items: center;
  justify-content: center;
  color: #fff; 
}
.modal.transform-none .modal-dialog {
  transform: none !important;
}


/*==================================================
2/12/2023
==================================================*/ 

.btn-refresh{
  --btn-h:32px;
  font-size: 12px;
  padding: 0 15px 0 10px;
}
.btn-refresh .icons{
  width: 16px;
  height: 16px;
  background-image: url(../img/icons/icon-refresh.svg);
}
.btn-refresh.refresh .icons{
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}
@keyframes rotate {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

.avatar-group .btn-refresh{
  position: absolute;
  top: -45px;
}

.card-menu.infos .card-photo{
  margin-left: 15px;
  margin-right: 12px;
  width: 51px;
  height: 45px;
  flex-shrink: 0;
}
.nav-tabs {
  gap:8px;
  flex-wrap: unset;
  --bs-nav-tabs-border-width:0;
}
.nav-tabs li{flex-shrink: 0;}
.nav-tabs .btn{
  --btn-h:34px;
  font-size: 12px;
  font-weight: 400;
  min-width: 69px;
  flex-shrink: 0;
  padding: 0 10px;
  --bs-btn-color:#4F4F4F;
  --bs-btn-bg: #DADADA; 
}
.nav-tabs .btn.active{
  --bs-btn-color:#fff;
  --bs-btn-bg: #189B58; 
}

.boxed-scrollbar.tabs{
  margin: 15px -15px;
  position: relative;
  overflow: hidden;
}
.boxed-scrollbar.tabs .nav-tabs{
  overflow: hidden;
  overflow-x: auto;
  padding-bottom: 15px;
  margin-bottom: -15px;
  padding-left: 15px;
}