html,body {
  font-family: 'Roboto Condensed', sans-serif;
  position:relative;
}

#cover-spin {
  position:fixed;
  width:100%;
  left:0;right:0;top:0;bottom:0;
  background-color: rgba(255,255,255,0.7);
  z-index:9999;
  display:none;
}



.cover-spin {
  position:fixed;
  width:100%;
  left:0;right:0;top:0;bottom:0;
  background-color: rgba(255,255,255,0.7);
  z-index:9999;
}

.cover-spin::after {
  content:'';
  display:block;
  position:absolute;
  left:48%;top:40%;
  width:40px;height:40px;
  border-style:solid;
  border-color:black;
  border-top-color:transparent;
  border-width: 4px;
  border-radius:50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}
@-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

#cover-spin::after {
  content:'';
  display:block;
  position:absolute;
  left:48%;top:40%;
  width:40px;height:40px;
  border-style:solid;
  border-color:black;
  border-top-color:transparent;
  border-width: 4px;
  border-radius:50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}
  .iframeoverlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index:99;
  }


.body {
/* background-color: var(--bgcolor); */
background-color: #d7d8dd;
color: var(--fontcolor);
border-left: 20px solid transparent;
border-right: 20px solid transparent;

}

img {

margin-left: auto;
margin-right: auto;
}

.btn-block {
letter-spacing: 1px;
line-height: 15px;
border-radius: 40px;
background: transparent;
transition: all 0.3s ease 0s;
margin-bottom: 5px;
}
.btn-block:hover {
  background: var(--buttonbgcolor);
  color: var(--bgfontcolor) !important;
  border: 2px solid rgba(108, 89, 179, 0.75);
  }
.btn-block-ordermethod {
  letter-spacing: 1px;
  line-height: 15px;
  border-radius: 40px;
  background: transparent;
  transition: all 0.3s ease 0s;
  margin-bottom: 5px;
  /* max-width: 200px; */
  min-width: 200px;
  }
  
.btn-block-ordermethod:hover {
  background: var(--buttonbgcolor);
  color: #fff !important;
  border: 2px solid rgba(108, 89, 179, 0.75);
  }
    
.btn-block-250 {
  letter-spacing: 1px;
  line-height: 15px;
  border-radius: 40px;
  background: transparent;
  transition: all 0.3s ease 0s;
  margin-bottom: 5px;
  /* max-width: 250px; */
  min-width: 200px;
  }

.btn-block-250:hover {
  background: var(--buttonbgcolor);
  color: var(--bgfontcolor) !important;
  border: 2px solid rgba(108, 89, 179, 0.75);
  }


.btn-block2 {
  display: block;
  width: 100%;
}
.pac-container {
z-index: 1051 !important;
}

.receipt_modal {

color: var(--fontcolor);
}
.aboutmodal {
  margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: 40%;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.welcomemodal {
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: 40%;
text-align: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

}

/*Zoom In*/
.img-hover-zoom {
height: 120px; /* [1.1] Set it as per your need */
overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
transform: scale(1.5);
}

.addon-modal{
background-color: var(--addonsbgcolor);
}


/* navbar */
.navbar-default {
background-color: var(--headerbgcolor);
border-color: var(--headerfontcolor);
border: none;
border-radius: 0;
}

.navbar-brand {
float: none;
}
/* Title */
.navbar-default .navbar-brand {
color: var(--headerfontcolor);
float:none;
}
.navbar-header {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  width: 100%;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: var(--headerfontcolor);
}

/* Link */
.navbar-default .navbar-nav > li > a {
color: var(--headerfontcolor);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: var(--bgcolor);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: var(--headerfontcolor);
background-color: var(--bgcolor);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: var(--headerfontcolor);
background-color: var(--bgcolor);
}

/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: var(--bgcolor);
border-bottom-color: var(--bgcolor);
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: var(--bgcolor);
border-bottom-color: var(--bgcolor);
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: var(--headerbgcolor);
border-bottom-color: var(--headerbgcolor);

}

/* Mobile version */
.navbar-default .navbar-toggle {
background-color: var(--bgcolor);

}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: var(--bgcolor);

}

.navbar-default .navbar-toggle .icon-bar {
background-color: var(--headerbgcolor);
}

@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: var(--headerfontcolor);
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: var(--bgcolor);
}
}

.navbar-right {
float: right;
}


.padded {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.nopadding {
padding:0px !important;
}
.table-no-margin{
margin-bottom: 0px !important;
}


.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 114px;
}
.menu {
  padding-bottom: 120px;
}

.container {
border-bottom: 20px solid transparent;
}

.styled {
border: 1px solid #00703c;
overflow: hidden;
border-radius: 25px;
margin-bottom: 10px;
}

.styled select {
background: transparent;
border: 1px solid #00703c;
border-radius: 25px;
}

.overflowhidden {
overflow: hidden;
}



.hidden {
visibility: hidden
}


/*
.btn.btn-primary {
color: white;
background-color: #d03137;
border: 1px solid #d03137;
border: 1px solid #a7252a
}

.btn.btn-primary:hover {
background-color: #bd2b31
}
*/

.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s
}

.fade-enter, .fade-leave-to {
opacity: 0
}

.app-title {
font-size: 1.5rem;
margin-left: 15px
}



.modal.item_modal.in {
background-color: rgba(0, 0, 0, 0.8);
}

.modal.receipt_modal.in {
background-color: rgba(0, 0, 0, 0.8);
}

.modal.map_modal.in {
background-color: rgba(0, 0, 0, 0.8);
}


.item_modal {

color: var(--fontcolor);
overflow-y: scroll;
}

p {
line-height: 1.2em;
color: var(--fontcolor);
}

h2 {
color: var(--fontcolor);
}

#top, #mid, #bot {
border-bottom: 1px solid #EEE;
color: var(--fontcolor);
}

#top {
min-height: 100px;
}

#bot {
min-height: 50px;
}

#top .logo {
height: 60px;
width: 60px;
background-size: 60px 60px;
}

.info {
display: block;
margin-left: 0;
}

.title {
float: right;
color: var(--fontcolor);
}

.title p {
text-align: right;
}

table {
color: var(--fontcolor);
overflow-y: auto;
display: inline;

}

tbody {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 100%;
display: table;
}

.tbody-no-margin{
  border-left: 0px solid transparent;
border-right: 0px solid transparent;
width: 100%;
display: table;
}
/* 
td {
/ / padding: 5 px 0 5 px 15 px;
/ / border: 1 px solid #EEE color: var(--fontcolor);
} */

.tdend {
border-top: 1px solid var(--bordercolor);
}

.tabletitle {
padding: 5px;
}

.tabletitle2 {
padding: 5px;
background: #000000 !important;
color: #ffffff !important;
align-items: center;
}

.items {
border-top: 1px solid var(--bordercolor);

color: var(--fontcolor);
}

#carousel {
margin-top: 5mm;
}

.alignright {
float: right;
}

.aligncenter {
float: center;
}

p {
line-height: 1.2em;
color: var(--fontcolor);
}

.tdend {
border-top: 1px solid var(--bordercolor);
}

.items {
border-top: 1px solid var(--bordercolor);
color: var(--fontcolor);
}


.table-fixed {
width: 100%;
margin: auto;
height: 300px;
}

.tbodyScroll tbody {

overflow-y: scroll;
width: 100%;
}


.tableBodyScroll tbody {
display: block;
max-height: 300px;
overflow-y: scroll;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}

.tableBodyScroll thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}

.tableBodyScroll thead {

color: var(--bgcolor);
height: 30px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}

.tableBodyScroll td:nth-child(3) {
width: 25%;
}

.tableBodyScroll td:nth-child(2) {
width: 10%;
}

.tableBodyScroll td:nth-child(1) {
width: 65%;
}

div.scrollmenu {
background-color: transparent;
/* overflow: auto; */
white-space: nowrap;
position: fixed;
bottom: 10;
}

div.scrollmenu button {
display: inline-block;
text-align: center;
text-decoration: none;
border-radius: 40px;
 background-color: var(--keybgcolor);
color: var(--keytxtcolor);
/*height: 30px; */
}

div.scrollmenu a {
display: inline-block;
color: var(--keytxtcolor);
text-align: center;
padding: 14px;
text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: var(--keybgcolor);
}


.suboption-selector input{
  margin:0;padding:0;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
}



.center{
text-align:center;
margin:5px auto;}


.center figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}

/* HIDE RADIO */
/* [type=radio] { 
position: absolute;
opacity: 0;
width: 0;
height: 0;
} */

/* IMAGE STYLES */
[type=radio] + label > img {
cursor: pointer;
}


[type=radio]:checked + label > img {
outline: 3px solid #10F608;
}

figcaption {
  font-size:1.50rem;
  font-weight: 500;
  line-height: 1.2;
}

.centernumber {
width: 150px !important;
padding: 5px !important;
border: 0px solid #eee !important;
border-radius: 5px !important;
margin: auto !important;
margin-bottom: 10px !important;
text-align: center !important;
font-size: 0.75rem !important;
position: relative !important;
cursor: pointer !important;
}


.checkout-alert{
  position: fixed;
  bottom: 114px;
  left:2%;
  width: 96%;
}

@media only screen and (max-width: 351px) {
  .new-checkout-alert{
    position: fixed !important;
    bottom: 104px;
    width: 100%;
  }
}
@media only screen and (min-width: 352px) {
  .new-checkout-alert{
    position: fixed !important;
    bottom: 54px;
    width: 100%;
  }
}



.alert-custom {
  color: #383d41;
  background-color: #FFF;
  border-color: #000;
}

.alert2 {
  position: relative;
  padding: .5rem;
  /* margin-bottom: .80rem; */
  border-top: 1px solid rgba(0,0,0,.125);
  border-bottom: 1px solid rgba(0,0,0,.125);
  
}


.fa-home,.fa-tags,.fa-shopping-cart,.fa-list-alt {
  color: white;
}


.stroke-transparent {
  -webkit-text-stroke: 1px #383d41;
  -webkit-text-fill-color: transparent;
 }

 .stroke-fill {
  -webkit-text-stroke: 1px #383d41;
  -webkit-text-fill-color: #383d41;
 }



.header-no-padding{
padding: 0.5rem;
display:flex;
}

.addon-body-modal{
padding: 0;
}
.navbar-addons{
padding: 0;
}
.container-no-padding{
padding-right:5px;
padding-left:5px;
}


body.modal-open {
  height: 100vh;
  overflow-y: hidden;
}

.bottom-caption {
  top: 0;
  
}





#trackorder_body_modal .card {
  z-index: 0;
  background-color: #ECEFF1;
  padding-bottom: 20px;
  /* margin-top: 90px;
  margin-bottom: 90px; */
  border-radius: 10px
}

#trackorder_body_modal .top {
  padding-top: 40px;
  padding-left: 50px !important;
  padding-right: 50px !important
}

#trackorder_progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  color: #455A64;
  padding-left: 0px;
  margin-top: 30px
}

#trackorder_progressbar li {
  list-style-type: none;
  font-size: 13px;
  width: 25%;
  float: left;position: relative;
  font-weight: 400
}

#trackorder_progressbar .step0:before {
  font-family: FontAwesome;
  content: "\f10c";
  color: #fff
}

#trackorder_progressbar li:before {
  width: 40px;
  height: 40px;
  line-height: 45px;
  display: block;
  font-size: 20px;
  background:#d7d8dd;
  border-radius: 50%;
  margin: auto;
  padding: 0px
}

#trackorder_progressbar li:after {
  content: '';
  width: 100%;
  height: 12px;
  background: #d7d8dd;
  position: absolute;
  left: 0;
  top: 16px;
  z-index: -1
}

#trackorder_progressbar li:last-child:after {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: absolute;
  left: -50%
}

#trackorder_progressbar li:nth-child(2):after,
#trackorder_progressbar li:nth-child(3):after {
  left: -50%
}

#trackorder_progressbar li:first-child:after {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  position: absolute;
  left: 50%
}

#trackorder_progressbar li:last-child:after {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px
}

#trackorder_progressbar li:first-child:after {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px
}

#trackorder_progressbar li.active:before,
#trackorder_progressbar li.active:after {
  background:#c7c7c7
}

#trackorder_progressbar li.active:before {
  font-family: FontAwesome;
  content: "\f00c"
}

#trackorder_body_modal .icon {
  width: 60px;
  height: 60px;
  margin-right: 15px
}

#trackorder_body_modal .icon-content {
  padding-bottom: 20px
}

@media screen and (max-width: 992px) {
  #trackorder_body_modal .icon-content {
      width: 50%
  }
}


@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 276px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
      position: absolute;
      top: 0;
      right: -50%;  /*change this with javascript in the future*/
      z-index: -1;
      display: block;
      visibility: visible;
  }

  .carousel-inner .active.col-6.carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -50%;  /*change this with javascript in the future*/
    z-index: -1;
    display: block;
    visibility: visible;
}
}
/* @media (min-width: 576px) { */
  @media (min-width: 276px) {
    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* LG */
@media (min-width: 991px) {
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}

/* 

* { box-sizing: border-box; margin: 0; padding: 0; }
div.menuwrap {
    background-color:#fff;
    position: relative;
    height: 48px; overflow: visible;
}
ul.menu {
    height: 48px; max-width: 80%;
    overflow: hidden; 
}
ul.menu > li {
    display: block; float: left; 
    height: auto; white-space: nowrap;
    padding: 4px 8px; 
}
ul.collect {
    position: absolute;
    right: 0; top: 0;
    padding: 5px 8px; 
    overflow: visible;
} */


.slick-dotted.slick-slider {
  margin-bottom: 5px
}
#slider_carousel {
  max-height: 140px;
}
.nextArrowBtn{
  cursor: pointer;
  position: absolute;
  z-index: 1000;
  top: 42px;
  right: 0;
  color: #000000;
}
.prevArrowBtn{
  cursor: pointer;
  position: absolute;
  z-index: 1000;
  top: 42px;
  left: 0;
  color: #000000;
}

.slick-slide {
  height:140px;
}

.badge-notify{
  position:relative;
  top: -12px;
  left: -8px;
 }

 .btn-checkout {
  padding: .5rem 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  border-radius: .3rem;
}

.fa-checkout-cart {
  font-size: 1.73333333em;
  line-height: .75em;
  vertical-align: -15%;
}


.checkbox-1x {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
}
.checkbox-2x {
    transform: scale(2);
    -webkit-transform: scale(2);
}

.cursor-hand{
  cursor: pointer;
}


#bottom_navbar{
  padding:0.1rem;
}

.navbar-padding {
  padding-top: .3125rem;
  padding-bottom: 0rem;
}

/* 
.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background-repeat: no-repeat, repeat;
  padding: 10px;
  padding-right: 0px;
  padding-left: 0px;
}

.formContent {
  margin-top: 20px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  padding: 30px;
  position: relative;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  text-align: center;
} */



  .card-horizontal {
    border-radius: .5rem;
    display: flex;
    flex: 1 1 auto;
  }

  .cardimg-center{
    min-height: 80px;
    max-height: 100px;
    max-width: 120px;
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    margin: 4px;
    /* float: right !important; */
  }

.cardimg-margin{
  position:relative; 
  margin-left:130px;
  padding: 1.1rem;
  margin-top:-95px;
}
/* .item-card-desc{
  max-width: 60%;
  word-break: break-word;
}
.item-card-title{
  max-width: 70%;
  word-break: break-word;
} */



  /*track order */
.progressContainer {
  width:340px;
  margin: 0 auto;
  padding-left:50px;
}
.btn-block-250 {
  width: 200px;
}
.btn-block-200 {
  width: 200px;
}
.btn-block-80 {
  min-width: 80px;
}

.progress2 {
  position: relative;
  padding: 0 1rem 0 3.5rem;
  margin: 2rem 0 0;
  list-style: none;
}

.progress__item {
  position: relative;
  min-height: 100px;
  counter-increment: list;
  padding-left: 0.5rem;
}
.progress__item:before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: -60px;
  height: 80%;
  width: 1px;
  border-left: 5px solid var(--trackicon-var);
}
.progress__item:after {
  content: counter(list);
  position: absolute;
  top: 0;
  left: -2.7rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background:var(--trackicon-var);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6rem;
  text-align: center;
  border: 8px solid var(--trackicon-var);
  
}


.progress__item:first-child:before {
  border: none;
}

/* circle */
.progress__item.progress__item--notcompleted:after {
  font-family: FontAwesome;
  content: "\f10c";
  color: #ffffff;
}

/* Check */
.progress__item.progress__item--active:after {
  font-family: FontAwesome;
  content: "\f00c";
  color: #ffffff;
}

.progress__title {
  padding: 0.4rem 0 0.5rem;
  margin: 0;
  font-size: 1.2rem;
}


.category-icon-left{
  height:52px;
  padding-top:17px;
  padding-right:5px;
  padding-left:5px;
  cursor:pointer;
  background-color:#ffffff;
  border-radius:5px 0px 0px 5px;
}
.category-icon-right{
  height:52px;
  padding-top:17px;
  padding-right:5px;
  padding-left:5px;
  cursor:pointer;
  background-color:#ffffff;
  border-radius:0px 5px 5px 0px;

}

div.category_scrollmenu {
  
  margin-bottom:5px;
  background-color: #ffffff;
  white-space: nowrap;
}

div.category_scrollmenu a {
  display: inline-block;
  color: #333;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.category_scrollmenu a:hover {
  background-color:rgb(228, 228, 228);
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 10px;
}


.category-icon-left a:hover {
  background-color:rgb(228, 228, 228);
}
.category-icon-right a:hover {
  background-color:rgb(228, 228, 228);
}



/* 
div.category_scrollmenu a.active {
  background-color: (--bgcolor);
  color: (--textcolor)
} */


.modal-bottom .modal-dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* max-width: 100% !important; */
  margin: 0;
}
.modal-bottom .modal-dialog .modal-content {
  border-radius: 0.3rem 0.3rem 0 0;
}

.modal-p-bottom .modal-dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100% !important;
  margin: 0;
  transform: translateY(100%) !important;
}


.modal-p-bottom .modal-dialog .modal-content {
  border-radius: 0.3rem 0.3rem 0 0;
}
.modal-p-bottom.show {
  overflow: hidden;
}
.modal-p-bottom.show .modal-dialog {
  transform: translateY(0%) !important;
  min-height: 80px;
}


.animate-bottom {
  position: relative;
  animation: animatebottom 0.4s;
}

@keyframes animatebottom {
  from {
    bottom: -300px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

.font-weight-bold-500 {
  font-weight: 500 !important;
}

.round-border-40 {
  border-radius: 40px !important;
}



@media (max-width: 575.98px) {
  .modal-fullscreen {
    padding: 0 !important;
  }
  .modal-fullscreen .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-sm {
    padding: 0 !important;
  }
  .modal-fullscreen-sm .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-md {
    padding: 0 !important;
  }
  .modal-fullscreen-md .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-lg {
    padding: 0 !important;
  }
  .modal-fullscreen-lg .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg .modal-body {
    overflow-y: auto;
  }
}
.modal-fullscreen-xl {
  padding: 0 !important;
}
.modal-fullscreen-xl .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen-xl .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen-xl .modal-body {
  overflow-y: auto;
}



#full-image-200h {
  margin-top:10px;  
  height: 200px;
  /* width: 100%; 
  object-fit: cover;
  object-position: center; */
}


.icon-thinner{
  -webkit-text-stroke: 01px white;
}




@media (min-width: 576px) {
  .card-deck .card {
     min-width: 33.4% !important;  /* 2 Columns */
  }
}

@media (min-width: 768px) {
  .card-deck .card {
      min-width: 33.4%;  /* 2 Columns */
  }
}


button:focus{outline:0px dotted;outline:0px auto -webkit-focus-ring-color}
.cursorhand{
  cursor: pointer;
}
.fontsize-20{
  font-size:20px
}
.qty-box{
  background-color: #e2e2e275;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:8px;
  padding-left:8px
}


.card-img-top {
  border-top-left-radius: calc(.5rem - 1px);
  border-top-right-radius: calc(.5rem - 1px);
}
.itemlistcard{
  padding:.5rem
}

.text-gray{
  color: #695f5f!important;
}




.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  background-color: #6c757d;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
  text-align:center;
}

.sidenav a {
  /* padding: 8px 8px 8px 32px; */
  text-decoration: none;
  font-size: 18px;
  color: #f1f1f1;
  display: block;
  transition: 0.3s;
}

/* .sidenav a:hover {
  color: #818181;
} */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 14px;}
}


.side-smaller{
  font-size: 14px !important; 
}

.truncated { 
  display:inline-block; 
  max-width:320px; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap; 
}

.overlayed {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  background-color: rgba(66, 66, 66, 0.5);
  overflow-x: hidden;
}

a.anchor-big {
  display: block;
  position: relative;
  top: -120px;
  visibility: hidden;
}
a.anchor {
  display: block;
  position: relative;
  top: 12px;
  visibility: hidden;
}


#mapv2 {  min-height: 250px; min-width:400px; width: 100%;  }