:root {
  --bs-gray-100: #f3f4f6;
  --bs-gray-200: #e5e7eb;
  --bs-gray-300: #d1d5db;
  --bs-gray-400: #9ca3af;
  --bs-gray-500: #6b7280;
  --bs-gray-600: #4b5563;
  --bs-gray-700: #374151;
  --bs-gray-800: #1f2937;
  --bs-gray-900: #111827;

  --bs-indigo-500: #6610f2;

  --bs-green-500: #198754;

  --bs-orange-500: #fd7e14;
  --Pink-500: #d63384;
  --theme-primary: #0d6efd;
  --theme-dark: #111827;

  --blue-900: #031633;

  --yellow-500: #ffc107;
  --teal-500: #20c997;
  --red-500: #dc3545;
}
.bg-teal-500 {
  background-color: var(--teal-500) !important;
}
.bg-red-500 {
  background-color: var(--red-500) !important;
}
.bg-yellow-500 {
  background-color: var(--yellow-500) !important;
}
.bg-theme-dark {
  background-color: var(--theme-dark) !important;
}

.bg-blue-900 {
  background-color: var(--bs-gray-900) !important;
}

.bg-gray-300 {
  background-color: var(--bs-gray-300) !important;
}

.bg-gray-400 {
  background-color: var(--bs-gray-400) !important;
}

.bg-gray-500 {
  background-color: var(--bs-gray-500) !important;
}

.bg-gray-700 {
  background-color: var(--bs-gray-700) !important;
}

.bg-gray-800 {
  background-color: var(--bs-gray-800) !important;
}

.bg-gray-900 {
  background-color: var(--bs-gray-900) !important;
}

.border-gray-600 {
  border-color: var(--bs-gray-600) !important;
}

.bg-indigo-500 {
  background-color: var(--bs-indigo-500) !important;
}

.bg-green-500 {
  background-color: var(--bs-green-500) !important;
}

.bg-orange-500 {
  background-color: var(--bs-orange-500) !important;
}

.bg-pink-500 {
  background-color: var(--Pink-500) !important;
}

.bg-blue-600 {
  background-color: var(--theme-primary) !important;
}

.h-40 {
  height: 40px !important;
}

.border-gray-700 {
  border-color: var(--bs-gray-700) !important;
}

.border-gray-800 {
  border-color: var(--bs-gray-800) !important;
}
.border-x {
  border-left: 1px solid;
  border-right: 1px solid;
}
.border-gray-500 {
  border-color: var(--bs-gray-500) !important;
}
.border-gray-400 {
  border-color: var(--bs-gray-400) !important;
}
.text-gray-100 {
  color: var(--bs-gray-100) !important;
}

.text-gray-200 {
  color: var(--bs-gray-200) !important;
}

.text-gray-300 {
  color: var(--bs-gray-300) !important;
}

.text-gray-400 {
  color: var(--bs-gray-400) !important;
}

.text-gray-500 {
  color: var(--bs-gray-500) !important;
}

.text-gray-600 {
  color: var(--bs-gray-600) !important;
}

.text-gray-700 {
  color: var(--bs-gray-700) !important;
}
.text-light {
  color: #fff !important;
}
.text-tomato {
  color: #f44343b5;
}
.text-darkgreen {
  color: #33931f;
}
.text-14 {
  font-size: 14px !important;
}

.text-18 {
  font-size: 18px !important;
}

.mb-half {
  margin-bottom: 2px;
}

.font-600 {
  font-weight: 600 !important;
}

.h-55 {
  height: 55px !important;
}

.end-10 {
  right: 10px;
}

.end-5 {
  right: 5px;
}

.h-230 {
  height: 230px !important;
}

.dotted-bottom-border {
  border-bottom: 1px dotted var(--bs-gray-700);
}

.text-xs {
  font-size: 12px !important;
}

.text-icon-large {
  font-size: 20px;
}

.table-dark tbody tr {
  background-color: var(--bs-gray-800) !important;
}

.table-dark {
  --bs-table-bg: transparent;
}

.min-w-160 {
  min-width: 160px !important;
}

.min-w-320 {
  min-width: 320px !important;
}

.cursor-pointer {
  cursor: pointer;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 20px padding */
.p-20 {
  padding: 20px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.px-20 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.py-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

/* 12px padding */
.py-12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.px-12 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

/* 18px padding */
.py-18 {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.table-padding > thead > tr > th {
  padding: 12px 20px !important;
}

/* select tag placeholder */
select {
  color: var(--bs-gray-400) !important;
}

/* font size */
.tx-14 {
  font-size: 14px !important;
}

/* margin */

.mt-40 {
  margin-top: 40px !important;
}
.ml-40 {
  margin-left: 40px;
}

.mt-20 {
  margin-top: 20px !important;
}
.mt-6 {
  margin-top: 6px !important;
}
.mr-20 {
  margin-right: 20px !important;
}

.my-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.mx-20 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

/* width */

.min-w-220 {
  min-width: 220px !important;
}

.wd-100 {
  width: 100px !important;
}

.gy-20 {
  row-gap: 20px !important;
}

.gy-16 {
  row-gap: 16px !important;
}

.mh-screen {
  max-height: 100vh;
}

input[type="checkbox"]:disabled {
  border-color: var(--bs-gray-500) !important;
}

input[type="checkbox"]:disabled + label {
  color: var(--bs-gray-500) !important;
}

.text-link {
  color: #2591de !important;
}

.py-6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

.gap-x-3 {
  column-gap: 16px;
}

.py-80 {
  padding: 80px 0px;
}

.pt-80 {
  padding-top: 80px;
}

.mb-48 {
  margin-bottom: 48px;
}

.mb-28 {
  margin-bottom: 28px;
}

.mt-28 {
  margin-top: 28px;
}
.mt-32 {
  margin-top: 32px;
}

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

.mt-35 {
  margin-top: 35px;
}

.gap-32 {
  gap: 32px;
}

.text-xl {
  font-size: 20px;
}

.font-300 {
  font-weight: 300;
}

.br-t-2 {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.br-b-2 {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.br-2 {
  border-radius: 8px;
}

.row-gap-3 {
  row-gap: 16px;
}

.border-x-none {
  border-left: none !important;
  border-right: none !important;
}

.border-l-none {
  border-left: none !important;
}

.border-r-none {
  border-right: none !important;
}

.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.opacity-5 {
  opacity: 50%;
}

.bg-black-8 {
  background-color: rgb(0, 0, 0, 0.8);
}

.font-500 {
  font-weight: 500;
}

.pt-60 {
  padding-top: 60px;
}

.pt-6 {
  padding-top: 6px;
}

.mt-60 {
  padding-top: 60px;
}

.me-20 {
  margin-right: 20px !important;
}

.rounded-lt-sm {
  border-top-left-radius: 6px;
}

.rounded-rt-sm {
  border-top-right-radius: 6px;
}

.min-w-300 {
  min-width: 300px !important;
}

.min-w-330 {
  min-width: 330px !important;
}

.min-w-350 {
  min-width: 350px !important;
}

.gap-12 {
  gap: 12px;
}

.h-61 {
  height: 61px;
}

.h-216 {
  height: 216px;
}

.max-h-500 {
  max-height: 500px;
}

.max-h-435 {
  max-height: 435px;
}

.max-min-h-435 {
  max-height: 435px;
  min-height: 435px;
}

.max-w-275 {
  max-width: 275px;
}
.gap-20 {
  gap: 20px;
}
.text-20 {
  font-size: 20px;
}
.mt-n2 {
  margin-top: -2px;
}
.w-140 {
  width: 140px;
}
.my-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.flex-nowrap-md {
  flex-wrap: nowrap;
}
.rounded-4 {
  border-radius: 12px;
}
.w-inherit {
  width: inherit !important;
}
.justify-content-normal {
  justify-content: normal !important;
}
.mt-n5 {
  margin-top: -5px;
}
.object-fit-cover {
  object-fit: cover;
}

.gutter-x-3 {
  --bs-gutter-x: 16px;
}
.w-210 {
  width: 210px;
}

.min-w-400 {
  min-width: 400px !important;
}

.font-400 {
  font-weight: 400 !important;
}

.h-content {
  height: max-content;
}

.w-content {
  width: max-content;
}
/* .gy-3 {
  row-gap: 16px;
} */
.gy-1 {
  row-gap: 4px;
}
.min-w-200 {
  min-width: 200px;
}

.min-w-250 {
  min-width: 250px !important;
}
.min-h-screen-end {
  min-height: calc(100vh - 60px);
}
.dashed {
  border-style: dashed !important;
}
.min-w-210 {
  min-width: 210px;
}
.max-w-763 {
  max-width: 763px;
}
.w-200 {
  width: 200px;
}
.max-w-530 {
  max-width: 530px !important;
}
.min-w-250 {
  min-width: 250px;
}
.max-w-690 {
  max-width: 690px;
}
.w-30 {
  width: 30%;
}
.rounded-t-lg {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-b-lg {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.w-xl-75 {
  width: 75%;
}
.row-gap-2 {
  row-gap: 8px;
}
.text-12 {
  font-size: 12px;
}
.g-3-5 {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.px-10 {
  padding-inline: 10px;
}
.text-through {
  text-decoration: line-through;
}
.rounded-r-0 {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.rounded-l-0 {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.btn-outlined-primary {
  border: 1px solid #0d6efd;
  color: #0d6efd;
  background: transparent;
}
.btn-outlined-primary:hover {
  color: #0d6efd;
}
.text-24 {
  font-size: 24px;
}
.text-32 {
  font-size: 32px;
}

.disabled {
  color: gray;
  cursor: not-allowed;
  pointer-events: none;
}

.disable {
  color: gray;
  cursor: not-allowed;
  pointer-events: none;
}
.badge-pink {
  border-radius: 4px;
  background: var(--Pink-100, #f7d6e6);
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--Pink-500, #d63384);
  font-size: 12px;
}
.badge-cyan {
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
  background: var(--Cyan-100, #cff4fc);
  color: var(--Cyan-500, #0dcaf0);
  font-size: 12px;
}
.badge-red {
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
  background: var(--Red-100, #f8d7da);
  color: var(--Red-500, #dc3545);
  font-size: 12px;
}
.badge-dailyDealEvent {
  background-color: #cc9a06;
  font-size: 12px;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
}
.badge-dealEvent {
  background-color: #ca6510;
  font-size: 12px;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
}
.badge-simpleEvent {
  background-color: #0a58ca;
  font-size: 12px;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
}
.badge-lcEvent {
  background-color: #6f42c1;
  font-size: 12px;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
}

.border-sm {
  border-width: 0.5px;
  border-style: solid;
}
.no-hover:hover {
  background-color: inherit !important;
}
.m-20 {
  margin: 20px;
}
.p-32 {
  padding: 32px;
}
.border-dashed {
  border-style: dashed;
}
.rounded-5 {
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.space-y-2 > *:not(:last-child) {
  margin-bottom: 8px;
}
@media (max-width: 500px) {
  .w-sm-60 {
    width: 60%;
  }
  .my-sm-2 {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .flex-nowrap-sm {
    flex-wrap: wrap;
  }
}
@media (max-width: 576px) {
  .w-sm-60 {
    width: 60%;
  }
  .my-sm-2 {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
@media (max-width: 767px) {
  .flex-nowrap-md {
    flex-wrap: wrap;
  }
  .mob-w-auto {
    width: auto !important;
  }
  .mob-w-100 {
    width: 100% !important;
  }
  .mob-max-w-auto {
    max-width: 100% !important;
  }
}

@media (max-width: 1320px) {
  .ml-40 {
    margin-left: 20px;
  }
}
@media (max-width: 1200px) {
  .mx-auto-xl {
    margin-left: auto;
    margin-right: auto;
  }
  .ml-40 {
    margin-left: 10px;
  }
  .w-xl-75 {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .px-md-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}