/* Table styling */
table {
    border-collapse: collapse; /* Collapse table borders into a single border */
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Full-width table */
    max-width: 1200px; /* Optional max width */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensure rounded corners are visible */
}

/* Table header styling */
th {
    background-color: black; /* Green background for header */
    color: white; /* White text */
    font-weight: bold; /* Bold text */
    padding: 12px 15px; /* Padding for header cells */
    text-align: center; /* Center align header text */
}

/* Table cells styling */
td {
    border-bottom: 1px solid #dddddd; /* Light grey border for cells */
    padding: 12px 15px; /* Padding for cells */
    text-align: center; /* Center align text */
}

/* Alternating row colors */
tr:nth-child(even) {
    background-color: #f9f9f9; /* Light grey background for even rows */
}

tr:nth-child(odd) {
    background-color: #ffffff; /* White background for odd rows */
}

/* Hover effect */
tr:hover {
    background-color: #f1f1f1; /* Light grey background on hover */
}

/* Table container styling */
.table-container {
    overflow-x: auto; /* Add horizontal scroll */
    max-width: 100%; /* Ensure the container doesn't exceed its parent's width */
    margin-left: auto;
    margin-right: auto;
    padding: 20px; /* Padding around the table container */
}

/* Additional table styling */
.table-container table {
    margin: 0; /* Remove default margin */
    border: none; /* Remove default border */
}

.table-container td, .table-container th {
    border: none; /* Remove default cell border */
}

/* Responsive table */
@media (max-width: 768px) {
    th, td {
        font-size: 14px; /* Smaller font size on smaller screens */
        padding: 10px; /* Adjust padding */
    }
}