@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-display: block;
  font-weight: 400;
  src: url(../webfonts/fa-brands-400.woff2) format("woff2"),
    url(../webfonts/fa-brands-400.ttf) format("truetype");
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: inherit;
}

html,
body {
  min-height: 100% !important;
  font-family: "Roboto", "Segoe", "Segoe UI", Arial, Verdana, sans-serif !important;
  background-color: #f0f0f8;
  /* overflow-x: hidden; */
}

.box {
  border-radius: 0px;
  background: #e0e0e0;
  /*box-shadow: -5px -5px 13px #f0f0f8, 5px 5px 13px #f0f0f8 !important;*/
  padding: 2.5rem 1rem !important;
}



.body-bg {
  background: #e9e9e9 !important;
}

.cart-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

#select-tbl {
  margin-bottom: 2.5rem;
}

.payment-methods h6 {
  font-size: 15px;
  font-weight: bolder;
}

.error-alert {
  z-index: 1000;
  top: 50%;
  left: 25%;
  padding: 2rem !important;
}

.success-alert {
  z-index: 1000;
  right: 1%;
}

.receipts {

  width: 80mm !important;
  font-family: monospace !important;
}

.receipts .top {
  margin: 10px 0 !important;
}

.receipts h4 {
  border-top: 2px dotted black !important;
  border-bottom: 2px dotted black !important;
  padding: 2px 0 !important;
  text-align: center !important;
  margin-bottom: 0px !important;
}

.receipt-discount {
  padding: 0px !important;
  margin: 0px !important;
}

.receipt-total {
  border-bottom: 2px dotted black !important;
  padding: 0px !important;
  margin: 0px !important;
}

.receipt-total>div>span,
.receipt-discount>div>span {
  padding: 0px !important;
  margin: 0px !important;
  font-size: 12px !important;
}

.receipt-mid table tbody tr>td:nth-child(4) {
  text-align: right !important;

}

.receipt-mid table tbody tr>td:nth-child(3) {
  text-align: center !important;
}

.alert-deadly {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}

.alert-green {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

.graph {
  display: none;
}

.graph-active {
  display: block;
}

.progressbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 2rem 0;
}

.progressbar::before,
.progress {
  content: "";
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: #dcdcdc;
  counter-reset: step;

}

.progress {
  background-color: #0dcaf0;
  width: 0%;
}

.progress-step {
  width: 2rem;
  height: 2rem;
  background-color: #dcdcdc;
  border-radius: 50%;
  display: flex;
  color: #000 !important;
  justify-content: center;
  align-items: center;

}

.progress-step::before {
  counter-increment: step;
  content: counter(step);
}

.progress-step::after {
  content: attr(data-title);
  position: absolute;
  top: -1.5rem;
  white-space: nowrap;
  font-size: 0.85rem;
}

.progress-step-active {
  background-color: #0dcaf0;
  color: #fff;

}


.form-step {
  display: none;
  animation: animate .5s;
}

.form-step-active {
  display: block !important;
}

@keyframes animate {

  from {
    transform: scale(1, 0);
    opacity: 0;
  }

  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}


.search-result {
  cursor: pointer;
  transition: all .3s;
}

.search-result:hover {
  background-color: #f0f8ff;
}

.search-result-invoice {
  cursor: pointer;
  transition: all .3s;
}

.search-result-invoice:hover {
  background-color: #f0f8ff;
}

@media print {
  .receipts {
    display: block;
    width: 80mm !important;
    font-family: monospace !important;
  }

  .receipts .top {
    margin: 10px 0 !important;
  }

  .receipts h4 {
    border-top: 2px dotted black !important;
    border-bottom: 2px dotted black !important;
    padding: 2px 0 !important;
    text-align: center !important;
    margin-bottom: 0px !important;
  }

  .receipt-discount {
    padding: 0px !important;
    margin: 0px !important;
  }

  .receipt-total {
    border-bottom: 2px dotted black !important;
    padding: 0px !important;
    margin: 0px !important;
  }

  .receipt-total>div>span,
  .receipt-discount>div>span {
    padding: 0px !important;
    margin: 0px !important;
    font-size: 12px !important;
  }

  .receipt-mid table tbody tr>td:nth-child(4) {
    text-align: right !important;

  }

  .receipt-mid table tbody tr>td:nth-child(3) {
    text-align: center !important;
  }

}

.bg-cyan {
  background-color: #1ba1e2 !important;
  color: white !important;
}

.bg-green {
  background-color: #60a917 !important;
  color: white !important;
}

.bg-orange {
  background-color: #fa6800 !important;
  color: white !important;
}

.bg-red {
  background-color: #ce352c !important;
  color: white !important;
}

.bg-grey-white {
  background-color: #f5f5f5 !important;
  /*color: white !important;*/
}

.bg-lime {
  background-color: #A4C400 !important;
  color: white !important;
}

.tomselected {
  padding: 3em 1em !important;
  border-radius: 50px !important;
}

.tomselected  .ts-wrapper {
  padding: 3em 1em !important;
  border-radius: 50px !important;
}