/* This file is reserved for overriding and extending the template styles. */

/* Add to your CSS file */
.page-item .page-link {
  min-width: 44px !important;
  text-align: center !important;
  padding: 0.5rem 0.75rem !important;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
}

.page-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  background-color: #fff;
  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;
}

.scrollable-table {
  overflow-x: auto;
  white-space: nowrap;
}

.scrollable-table-container {
  max-width: 100%;
  position: relative;
}

/* Optional: Fix the first column if you want */
.scrollable-table th:first-child,
.scrollable-table td:first-child {
  position: sticky;
  left: 0;
  background-color: white;
  z-index: 1 !important;
}

.scrollable-table-container {
  max-width: 100%;
  position: relative; /* Keep this if you need it for sticky headers/columns */
  overflow: hidden; /* Use 'hidden' or remove 'visible' */
}

.scrollable-table {
  overflow: visible !important;
  z-index: 1 !important;
}

.dropdown-menu {
  position: fixed !important; /* Force it to position relative to the viewport */
  z-index: 9999 !important; /* Make sure it appears above all other elements */
}