.table-responsive {
  max-height: 500px;
  overflow-y: auto;
}

.table-bordered {
  border: 1px solid #ddd;
}

.sticky-top-table table thead tr {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  color: #555;
  font-weight: bold;
  z-index: 10;
}

.dataframe {
  font-family: Arial, sans-serif;
  font-size: 0.9em;

  thead tr {
    text-align: left;
    font-weight: bold;
  }

  th,
  td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
  }

  tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }

  tbody tr:hover {
    background-color: #e8e5f9;
  }
}

.scrollit {
  overflow-y: auto;

  overflow-x: auto;

  max-height: max-content;

  border-radius: 5px;

  border: 1px solid #ddd;

  background-color: #f8f9fa;

  padding: 10px;
}

.scrollit::-webkit-scrollbar {
  width: 6px; /* Thinner scrollbar for a minimalist look */

  height: 6px; /* Thinner horizontal scrollbar */
}

.scrollit::-webkit-scrollbar-thumb {
  background-color: #bbb; /* Neutral color for the scrollbar thumb */

  border-radius: 4px; /* Rounded edges for a smoother feel */

  transition: background-color 0.3s; /* Smooth transition effect */
}

.scrollit::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* Darker color when hovered for better UX */
}

.scrollit::-webkit-scrollbar-track {
  background: #f4f4f4; /* Light background for the scrollbar track */

  border-radius: 4px; /* Matching rounded edges */
}

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