:root {
    --primary-color: #aa33ff;
    
  }
#scrollable-container {
    overflow-x: auto;
    overflow-y: auto; /* Allow vertical scroll */
    position: relative;
}

/* Ensure the buttons move with the horizontal scrollbar but fixed vertically */
.dt-action-buttons, .add-new, #DataTables_Table_0_filter {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px;
}

/* Ensure table headers are bold, centered, and text is justified */
table th {
    font-weight: bold;
    text-align: center;
    color: #000;
}

table td {
    color: #000;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10px;
    vertical-align: middle;
    font-weight: bold;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: auto; /* Allow vertical scroll */
    max-height: 400px; /* Limit the height to 400px to make the table scrollable vertically */
}

/* Custom scrollbar styling */
.table-responsive::-webkit-scrollbar {
    width: 2px; /* Adjust width for vertical scrollbar */
    height: 4px; /* Adjust height for horizontal scrollbar */
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--primary-color); /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded edges for the thumb */
}

.table-responsive::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color of the scrollbar track */
}

/* Hover effect */
.table-hover tbody tr {
    transition: background-color 0.3s;
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}

/* Detail row styles */
.detail-row {
    background-color: #f8f9fa;
    border: none;
}

.detail-row-content {
    padding: 10px;
}

.detail-row table {
    width: 100%;
    border-collapse: collapse;
}

.detail-row th,
.detail-row td {
    font-weight: normal;
    color: #000;
    text-align: center;
    padding: 10px;
    border: none;
}

/* Collapse behavior */
.collapse {
    display: none;
}

.collapse.show {
    display: table-row;
}
.card-footer {
    background-color: #f8f9fa; /* Light background for the footer */
    border-top: 1px solid #dee2e6; /* Subtle border on top */
}

.pagination {
    display: flex;
    justify-content: center; /* Center pagination items */
}

.pagination .page-link {
    color: var(--primary-color); /* Bootstrap primary color */
    background-color: #fff; /* White background for links */
    border: 1px solid #dee2e6; /* Border for links */
    border-radius: 0.25rem; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition effect */
}

.pagination .page-link:hover {
    background-color: #e9ecef; /* Light grey on hover */
}

.pagination .page-item.active .page-link {
    z-index: 1;
    color: #fff; /* White text for active page */
    background-color: var(--primary-color); /* Primary color for active page */
    border-color: var(--primary-color); /* Match border with active background */
}

.pagination .page-item.disabled .page-link {
    z-index: 1;
    color: #6c757d; /* Grey text for disabled links */
    background-color: #fff; /* White background for disabled links */
    border-color: var(--primary-color); /* Match border with active background */
}

.pagination .page-item {
    margin: 0 5px; /* Space between pagination items */
}

.hover-link {
    color: #8a8d93; /* Default color */
    text-decoration: none; /* Remove underline */
  }

  .hover-link:hover {
    color: var(--primary-color); /* Change to your desired hover color, e.g., red */
  }

  tr:hover {
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
  transition: all 0.3s ease-in-out;
  position: relative; /* Required for transform to work properly on table rows */
  z-index: 1; /* Ensure it's above other rows when elevated */
}