body,
html {
  font-family: "Arial";
  background-color: #f5f5f5 !important;
}

/* Webkit (Chrome, Safari) */
::-webkit-scrollbar {
  width: 6px; /* Vertical scrollbar width */
  height: 6px; /* Horizontal scrollbar height */
}

::-webkit-scrollbar-thumb {
  background: #888; /* Scrollbar color */
  border-radius: 3px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* Darker on hover */
}

/* Firefox */
* {
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: #888 #f1f1f1; /* Thumb and track color */
}

/* Edge, IE (Limited support) */
html {
  -ms-overflow-style: none; /* Hide default scrollbar */
}

body {
  overflow: overlay; /* Show overlay scrollbar */
}

.full-width-container {
  width: 100%;
  padding: 15px 15px 60px 15px;
}

.table-container {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
}

.table-row {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.table-header {
  background-color: #f8f9fa;
  font-weight: bold;
}

.table-row > div {
  flex: 1; /* Makes each column equally spaced */
  padding: 5px;
  text-align: left;
}

/* Optional: Add specific widths for each column */
.table-header > div:nth-child(1),
.table-row > div:nth-child(1) {
  flex: 0.5; /* For the number column */
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-pending {
  color: rgb(218, 218, 30) !important;
  font-weight: bold;
}

.status-processing {
  color: green !important;
  font-weight: bold;
}

.status-available {
  color: green !important;
  font-weight: bold;
}

.invalid-feedback {
  display: block;
  color: red;
}

.red-text {
  color: red;
  font-weight: bold;
}

.green-text {
  color: green;
  font-weight: bold;
}