body {
  background-color: #e5e5e5;
}

.text-3 {
  color: #333333;
}

.text-7 {
  color: #777777;
}

.text-9 {
  color: #999999;
}

.text-f0 {
  color: #ff0000;
}

.text-61 {
  color: #616161;
}

.text-f5 {
  color: #f58e85;
}

.text-blue {
  color: blue !important;
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.fs-18 {
  font-size: 18px;
}

.fs-20 {
  font-size: 20px;
}

.fs-22 {
  font-size: 22px;
}

.fs-24 {
  font-size: 24px;
}

.fs-26 {
  font-size: 26px;
}

.fs-28 {
  font-size: 28px;
}

.tracking-header {
  width: 100%;
  background: #ffffff;
  /* padding-top: 61px; */
  /* padding-bottom: 5px; */
}

.nav {
  flex-wrap: unset;
}

.scrollable-nav {
  overflow-x: auto;
  /* Enable horizontal scrolling */
  white-space: nowrap;
  /* Prevent items from wrapping to the next line */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}

.scrollable-nav::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

.scrollable-nav ul {
  display: inline-flex;
  /* Align items in a row */
}

.scrollable-nav li {
  flex: none;
  /* Ensure list items do not grow to fill container */
}

.button-newtab {
  border: 1px solid #6c757d;
  border-radius: 10px;
  background-color: #6c757d;
  color: #ffffff;
}

.uppercus {
  text-transform: uppercase;
}

.card-order {
  width: 100%;
  background: #ffffff;
}

.card-tab {
  width: 100%;
  background: #ffffff;
}

.img-product {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.nav {
  --bs-nav-link-padding-y: 0.2rem;
}

.nav-tabs {
  --bs-nav-tabs-border-width: none;
}

.nav-link {
  color: #8c8c8c;
}

.nav-link.active {
  /* color: #8C8C8C; */
  /* padding: .25rem !important; */
  border: none;
}

.nav-tabs .nav-link.active {
  border-bottom: 4px solid var(--primary-color);
  color: #8c8c8c;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: unset;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

.badge-point {
  color: #fff;
  background-color: var(--primary-color);
}

.badge-completed {
  background-color: #21bd67;
  color: #fff;
}

.badge-cancel {
  background-color: #bd2130;
  color: #fff;
}

.badge-wait {
  color: #212529;
  background-color: #ffc107;
}

.badge-prepare {
  color: #fff;
  /* background-color: var(--primary-color); */
  background-color: #819cff;
}

.badge-delivery {
  color: #fff;
  /* background-color: var(--primary-color); */
  background-color: #ffaf81;
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}

.btn-detail {
  color: white !important;
  font-size: 10px;
  width: 90px;
  background-color: #9e9e9e;
  border-color: #9e9e9e;
}

.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  color: var(--bs-btn-hover-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-qr {
  color: white !important;
  font-size: 10px;
  width: 90px;
  background-color: #03a9f4;
  border-color: #03a9f4;
}

.btn-outline-primary {
  --bs-btn-border-color: var(--primary-color);
  color: var(--primary-color);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--primary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-gradient: none;
}

.product-container {
  flex: 1;
  overflow: hidden;
}

.product-container {
  height: fit-content;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.sub_description {
  height: fit-content;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.point_get {
  display: block;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.point-star {
  /* point */

  box-sizing: border-box;

  /* Auto layout */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2px;

  /* width: 64px; */
  height: 20px;

  background: #ffffff;
  border: 1px solid #f58e85;
  color: #f58e85;
  box-shadow: 0px 1px 2px rgba(245, 142, 133, 0.22);
  border-radius: 20px;
}

#link_qr_code {
  color: #4a90e2;
  text-decoration: underline;
}