:root {
  --primary: #E16F28;
}

#app {
  height: 100vh;
  width: 100%;
}

.main-container {
  height: calc(100vh - var(--header-height));
}

.kt-table tr:hover {
  background-color: var(--color-gray-50);
  cursor: pointer;
}

.dark .kt-table tr:hover {
  background-color: var(--color-gray-900);
}

.word-break {
  word-break: break-all;
}

.max-content {
  width: max-content;
}

.w-fit {
  width: fit-content;
}

.overflow-hidden-x {
  overflow-x: hidden;
}

.select2 {
  width: 100% !important;
}

.select2-selection--single {
  display: flex !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0 !important;
}

.select2-container .select2-selection--single .select2-selection__clear {
  cursor: pointer !important;
}

.dark .select2-container .select2-selection--single {
  background-color: #000 !important;
}

.dark .select2-container--default .select2-selection--single .select2-selection__clear {
  color: #fff !important;
}

.dark .select2-dropdown {
  background-color: #000 !important;
}

.col-span-full {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

.pos-cart-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  overflow: hidden;
}

.pos-cart-scrollable {
  flex: 1;
  overflow-y: auto;
}

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