@font-face {
  font-family: GillSans;
  src: url('../fonts/font-gill-sans.woff');
}
@font-face {
  font-family: LatoBlack;
  src: url('../fonts/Lato-Black.woff');
}
@font-face {
  font-family: LatoRegular;
  src: url('../fonts/Lato-Regular.woff');
}
*{
  font-family: LatoRegular;
}
.login-form>.form-group{
	position: relative;
}
.login-form>.form-group>i{
 	position: absolute;
	left: 13px;
	top: 11px;
	font-size: 18px;
}
.login-form>.form-group>input{
	padding-left: 40px;
}

.main-footer {
	background-color: rgba(255, 255, 255, 0);
	padding: 15px;
	border-top: 0px solid #cccccc;	
	z-index: 1;
	position: fixed;
	bottom: 0;
	right: 0;
}

.main-footer ul.nav{
  background: transparent !important;
}

.main-footer a{
  background: transparent !important;
}

.navbar{
	padding: 0 15px;
	font-size: 20px;
  font-weight: 500;
  width: 100%
}

.navbar li{
	border-radius: 10px;
	margin: 0 5px;
	padding: 0 15px;
}
.navbar li:hover{
	background: #bef9c394;
}
.navbar li.active{
	background: #bef9c3;
}

.navbar li.active a{
	color: black !important;
}

nav.flex-column .collapse,.collapsing .nav-item, ul.flex-column .collapse{
  font-size: 14px;
  margin-left: 14px;
  line-height: 30px;
}

.user-div{
	padding-right: 10px;
    border-right: double;
}
.background{
	background: url(../images/bg.jpg) center center fixed;
    background-size: cover;
    position: fixed;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .7;
    width: 100%;
    height: 100%;
}

.card{
    border: #006369 2px solid;
}
.card .card-header{
	background: #006369;
	color: white;
	border-bottom: solid 3px #bef9c3;
  display: flex;
  justify-content: space-between;
}

.card .card-header .input-group{
  /* max-width: 199px; */
}

.card .card-header .input-group input{
  height: 100%;
}

.card-header:first-child {
  border-radius: calc(-0.75rem - 1px) calc(-0.75rem - 1px) 0 0;
}

.card-header.card-header-small{
  padding: 5px 10px;
}

.card-header.card-header-small h4{
  margin: 0px;
}

.card .card-body{
  overflow: auto;
}

.custom-file-label::after {
   font-family: "Font Awesome 5 Free";
   content: "\f07c" !important;
   display: inline-block;
   padding-right: 12px;
   vertical-align: middle;
   font-weight: 900;
}

.acordion, .acordion-collapsed {
  position: relative;
}
  
.acordion::after {
  content: "-";
  color: white;
  right: 17px;
  bottom: 9px;
  position: absolute;
  font-size: 25px;
  font-weight: 700;
}

.acordion[aria-expanded="false"]::after {
  content: "+";
  bottom: 8px;
}

.acordion-collapsed::after{
  content: "+";
  color: white;
  right: 17px;
  bottom: 8px;
  position: absolute;
  font-size: 25px;
  font-weight: 700;
}

.acordion-collapsed[aria-expanded="true"]::after {
  content: "-";
  bottom: 8px;
}

.card-header-small.acordion-collapsed::after{
  content: "+";
  color: white;
  right: 17px;
  bottom: 4px;
  position: absolute;
  font-size: 25px;
  font-weight: 700;
}

.card-header-small.acordion-collapsed[aria-expanded="true"]::after {
  content: "-";
  bottom: 5px;
}

/*ul.nav{
  background: #3961A7;
}
ul.nav .nav-link.active{
  background: #3961A7;
  border-bottom: solid 3px #bef9c3;
  text-align: center;
  color:white;
}*/

ul.nav .nav-link.active{
  border-bottom: solid 3px #bef9c3;
}*/

.blue{
	color: #3961A7;
}
.login-logo{
  height: 169px;
  max-height: 169px;
  max-width: 100%;
}
.product_option_list{
  border: 1px solid;
  overflow: auto;
}

.product_option_list .badge{
  margin: auto 5px;
  padding: 5px;
}

.clickeable:hover{
  cursor: pointer;
}
.clickeable-background:hover{
  cursor: pointer;
  opacity: 0.5;
}
.main-container{
  min-height: 100vh;
  background-color: white;
  box-shadow: 3px 0px 20px #c1c1c1;
}
.custom-card{
  display: flex;
  align-items: center;
}
.custom-card .left{
  padding: 15px 0 15px 15px;
  width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: flex;
  align-items: center;
}
.custom-card .right{
  width: 25%;
}

.next{
  background-color: white;
  color: #57d7b1;
  padding: 2px 15px 2px 15px;
  float: right;
  margin-left: auto;
  box-shadow: 1px 2px 10px #c1c1c1;
  border-top-left-radius: 0.8em;
  border-bottom-left-radius: 0.8em;
  font-size: 14px;
  font-weight: 600;
}

.old-price{
  text-decoration: line-through;
  color: #00000059;
}

.bottom-border{
  border-bottom: 3px solid #e6e5e8;
}

.custom-card h5,p{
  margin: 0px;
  line-height: 17px;
}

.custom-card .address{
  font-size: 0.8em !important;
  font-weight: normal;
  margin-top: 5px;
}

.custom-card .deliveryType{
  font-size: 0.7em !important;
  font-weight: bold;
}

.custom-card .left .img{
  margin-right: 20px;
  height: 50px; 
  width: 50px;
  display: inline-block;
  border-radius: 10px;
}

.custom-card .left .img img{
  height: 50px; 
  width: 50px;
}

.custom-card .left .img-empty{
  margin-right: 0px;
  height: 50px; 
  width: 0px;
  display: inline-block;
  border-radius: 10px;
}

.custom-card .left .name{
  margin: 0px;
  line-height: 17px;
  display: inline-block;
  vertical-align: middle;
}

.custom-card .left .name small{
  line-height: 17px;
  font-size: 0.7em !important;
  font-weight: normal;
  color:#ed0c6e;
}

.custom-card .left .detail{
  display: inline-block;
  vertical-align: middle;
}
.product-name{
      /* bottom: 10px; */
    /* position: absolute; */
    /* left: 5%; */
    color: black;
    font-weight: 600;
    display: block;
    /* width: 90%; */
    padding: 5px 0px 0px 0px;
}

.product-name-overlap{
  bottom: 10px;
  position: absolute;
  left: 5%;
  color: black;
  font-weight: 600;
  display: block;
  width: 90%;
}

.option-header{
  padding: 2px 0px;
  background-color: #e6e5e8;
}

.option-header h5{
  margin: 0px;
}

.option-header .message{
  display: none;
}
.adition-checkbox{
  border-bottom: 1px solid #e0e0e0;
}

.aditional-price{
  color: black;
  float: right;
  font-size: 14px;
  font-weight: 600;
}

.custom-control-label:before{
  background-color: #eee;
}

.custom-footer{
  position: absolute;
  width: 100%;
  bottom: 5px;
}

.custom-footer .box{
  box-shadow: 1px 2px 10px #aaaaaa;
}

.custom-footer .box>.row{
  height: 42px;
}

.box-add{
  background-color: #57d7b1;
  margin: 0 10px;
  border-radius: 25px;
  padding: 7px 20px;
  box-shadow: 1px 2px 10px #aaaaaa;
  display: flex;
  position: relative;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
}

.box-add .product-total-price{
  padding: 0px 10px;
  background-color: white;
  border-radius: 25px;
  color: black !important;
  font-weight: 600;
}

.product-total-price>*{
  /* vertical-align: middle; */
}

.product-total-price>em{
  margin-top: -1px;
}

.section-button{
  font-size: 1.5em;
  cursor: pointer;
}

.transition{
  transition: all cubic-bezier(0.4,0,0.2,1)0.4s;
  -webkit-transition: all cubic-bezier(0.4,0,0.2,1)0.4s;
}

.section-button.active{
  padding: 0.2em 1em 0.2em 1em;
  font-size: 1.5em;
  border-radius: 10em;
  color: white !important;
  background: #ed0c6e;
  box-shadow: 1px 2px 10px #aaaaaa;
  cursor: pointer;
}

.custom-box{
  background-color: white;
  margin: 0 5px;
  border-radius: 25px;
  padding: 7px 20px;
  box-shadow: 1px 2px 10px #aaaaaa;
  display: flex;
  position: relative;
  justify-content: space-between;
  cursor: pointer;
}

.badge-option{
  padding: 15px;
  background-color: #aaaaaa;
  font-size: 16px;
  min-width: 49%;
  color: white;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.badge-option.active{
  background-color: #ed0c6e !important;
}

.badge-option:hover{
  opacity: 0.8;
}

.box-order{
  background-color: white;
  margin: 0 10px;
  border-radius: 25px;
  padding: 7px 20px;
  box-shadow: 1px 2px 10px #aaaaaa;
  display: flex;
  position: relative;
  justify-content: space-between;
  cursor: pointer;
}

.custom-footer .box-order .product-total-price{
  padding: 0px 10px;
  background-color: #57d7b1;
  border-radius: 25px;
  color: white;
}

.product-card{
  display: flex;
  /*align-items: center;*/
    /*width: 100%;*/
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 5px;
  padding-bottom: 5px;
}

.product-card .img-container{
  margin-right: 20px;
  height: 75px;
  width: 75px;
  align-items: center;
  justify-content: center;
  display: flex;
  min-width: 75px;
  align-self: center;
}

.product-card .product-container{
  border-radius: 10px;
  padding: 15px;
  display: flex;
  width: 100%;
}

.product-card img{
  border-radius: 10px;
  max-width: 100%;
  max-height: 100%;
}

.product-card .detail{
  display: inline-block;
  width: 100%;
  align-self: center;
}

.product-card .name{
  margin-bottom: 5px;
}

.product-card .description{
  line-height: 13px;
  font-size: 0.7em !important;
  font-weight: normal;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card .price{
  margin-bottom: 0px;
  /* position: absolute; */
  bottom: 18px;
}

.btn-add{
  float:right;
  border-radius: 7px;
  border: none;
  padding: 5px 15px;
  font-size: 15px;
  color: white;
  font-weight: bold;
  background-color: #57d7b1;
}
.span-out-of-stock{
  float:right;
  padding: 5px 15px;
  font-size: 15px;
  font-weight: bold;
}
.span-stock{
  float:right;
  padding: 5px 15px;
  font-size: 15px;
  font-weight: bold;
}
.body-div{
  overflow-y: auto;
}

.body-div::-webkit-scrollbar {
  display: none;
}

.popover.bs-popover-bottom .arrow {
    left:87% !important;
}

.popover.bs-popover-bottom {
    left: 4px !important;
}

.basket-item{
  overflow-y: auto;
  overflow-x: hidden;
}

.basket-item::-webkit-scrollbar {
  display: none;
}

.required-animation {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.required-message .message{
  display: inline-block !important;
  color: red;
  font-size: 15px;
}

.product-image:hover{
  opacity: 0.5;
}

.product-image em{
  position: absolute;
  font-weight: bold;
  opacity: 0;
  -webkit-text-stroke: 1px black;
  color: white;
}

.product-image:hover em{
  opacity: 1;
}

.category-card .right .next em{
  /* vertical-align: middle !important; */
}

.category-card>.right>.next>em:before{
  content: "\f056";
}

.category-card.collapsed>.right>.next>em:before{
  content: "\f055";
}
.subcategory-card{
  height: 63px !important;
}
.subcategory-card .name{
  font-size: 16px !important;
}

.input-group .dropdown.bootstrap-select{
  max-width: 75%;
}

.input-group .dropdown.bootstrap-select .dropdown-toggle{
  height: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.button-custom-success{
  background-color: #006369 !important;
  color: white !important;
}
.icon-size{
  width: 26px;
  height: 26px;
  margin-right: 10px;
  vertical-align: text-bottom;
}
.card-header .title{
  font-size: 28px;
  display: inline-block;
  margin-bottom: 0px;
}
@media (max-width: 767px) {
  .card-header .text-left { text-align:right !important}
  .icon-size{
    width: 22px;
    height: 22px;
  }
  .card-header{
    padding: 8px 16px;
  }
  .card-header .title{
    font-size: 24px;
    margin-bottom: 0px;
    display: inline-block;
  }
  
}
@media (max-width: 520px) {
  .resize-text{
    font-size: 3.8vw;
  }
  .resize-title{
    font-size: 5vw;
  }
  .resize-footer{
    font-size: 4vw;
  }
}

.modal { overflow: auto !important; }

.swal2-confirm.swal2-styled{
  background-color: #006369 !important;
  color: white !important;
}

form .btn-primary{
  background-color: #006369 !important;
  color: white !important;
}

.btn-true-primary{
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.custom-card.category-card.collapsed{
  background-color: white !important;
}

#items-container .custom-card .left{
  width: calc(100% - 78px);
  justify-content: space-between;
}

#items-container .custom-card .right{
  width: 78px !important;
}

.changeable{
  text-align: center;
  cursor: pointer;
}
.changeable:hover{
  background-color: #6b96e0 !important;
}
.changeable .input-group{
  width: 130px;
}
.changeable .input-group button{
  width: 35px;
}
.inside-basket .row:first-child{
  margin-top: 10px;
}
.inside-basket .row:last-child{
  margin-bottom: 35px;
}
.inside-basket .row{
  margin: 0px;
}

#quantityInput::-webkit-outer-spin-button,
#quantityInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#quantityInput[type=number] {
  -moz-appearance: textfield;
}

.drop-zone{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dee7f5;
  flex-direction: column;
  border-radius: 10px;
  border: dashed 2px #bdbcbc;
  padding: 20px;
}

.thumb{
  padding: 10px;
  border: solid 1px #dac7c7;
  border-radius: 5px;
  margin-top: 15px;
}
.thumb .thumb{
  text-align: center;
  height: 172px;
  min-height: 172px;
}

.thumb img{
  max-width: 100%;
  height: auto;
  max-height: 150px;
}

.thumb>h5{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.share-button{
  font-size: 22px;
  float: left;
  margin-bottom: 10px;
}

.input-readonly{
  background-color: white !important;
}

.simple-card{
  border: #ededed 1px solid !important;
  background-color: #e1e1e1 !important;
}

.booking-table .reserved button{
  background-color: red;
  padding: 2px !important;
  width: 60px;
  height: 30px;
}

.booking-table .pending button{
  background-color: rgb(255, 208, 0);
  padding: 2px !important;
  width: 60px;
  height: 30px;
}

.booking-table .free button{
  background-color: green;
  padding: 2px !important;
  width: 60px;
  height: 30px;
}

.pac-target-input{
  top:12px !important;
}

.hiden-input-div>input{
  display: none;
}

.blockUI.blockOverlay{
  z-index: 10000 !important;
}
.blockUI.blockMsg.blockPage{
  z-index: 10001 !important;
}

.map-search{
  top: 15px !important;
  left: 15px !important;
}

.map-search .input-group-prepend .input-group-text{
  background-color: white;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.map-search input{
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-left: none;
}

/* ---------------------- bulma calendar -----------------  */
.datetimepicker-wrapper .datetimepicker{
  max-width: 100% !important;
}

.datepicker-nav .button{
  background: none;
  border: none;
}
/* ---------------------- bulma calendar fin-----------------  */

.sale-span{
  margin-left: 7px;
  background-color: red;
  padding: 2px 10px;
  color: white;
  border-radius: 22px;
  font-size: 9px;
  vertical-align: middle;
}
.swal2-title{
  font-size: 1.675em !important;
}
.row-1{
  background-color: #d9ce4e; 
}
.row-2{
  background-color: #d9a84e; 
}
.row-3{
  background-color: #d2eb96; 
}
.row-4{
  background-color: #b9d4de; 
}
.row-5{
  background-color: #849fcd; 
}
.row-6{
  background-color: #849fcd; 
}
.row-7{
  background-color: #72b065; 
}