/* Define a container for the table */
.table-container {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid #333;
  /* border-radius: 8px; */
  /* margin: 10px auto; */
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
  font-family: 'Helvetica Neue', sans-serif; /* Modern font */
  /* display: flex;
  justify-content: center;
  align-items: center; */

}

/* Center the contents of the whole table */
.table-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;

}

.table-container th, .table-container td {
  padding: 6px; /* Adjust padding as needed */
  text-align: left;
  border-bottom: 1px solid #333; /* Dark border */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis; /* Show ellipsis for overflowing content */
}

/* Style the table header */
.table-container th {
  background: linear-gradient(to bottom, #de3535, #000); /* Red to black gradient for table header */
  color: #fff; /* Text color for table header */
  cursor: auto;
}

/* Update background colors for table rows with reduced opacity */
.table-container tbody tr:nth-child(even) {
  background-color: rgba(18, 18, 18, 0.8); /* Semi-transparent dark background for even rows */
  color: #fff; /* Text color for better readability */
}

.table-container tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background for odd rows */
  color: #fff; /* Text color for better readability */
}

/* Add modern mouseover effect to table rows */
.table-container tbody tr:hover {
  background-color: rgba(162, 39, 39, 0.8); /* Semi-transparent darker red background color for hover */
  color: #fff; /* Text color for better readability */
  cursor: pointer;
}

/* Apply responsive design */
@media screen and (max-width: 768px) {
  .table-container {
    overflow-x: scroll;
  }
}

/* Vertically center the content of table cells */
.table-container th, .table-container td {
  text-align: left;
  vertical-align: middle; /* Vertically center the content */
  padding: 8px; /* Adjust padding as needed */
  border-bottom: 1px solid #333; /* Dark border */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden;
  text-overflow: ellipsis; /* Show ellipsis for overflowing content */
}

/* Add borders between specific columns */
.table-container td:nth-child(1),
.table-container td:nth-child(2),
.table-container td:nth-child(4),
.table-container td:nth-child(6),
.table-container td:nth-child(8),
.table-container td:nth-child(10),
.table-container td:nth-child(11),
.table-container td:nth-child(12),
.table-container td:nth-child(13),
.table-container td:nth-child(14) {
  border-right: 1px solid #333;
}
