/* Responsive table styles */
.table-container {
    max-width: 100%;
    overflow-x: auto; /* Add horizontal scrollbar when content exceeds the container width */
    overflow-y: hidden; /* Hide vertical scrollbar */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

/* Center avatar image in mobile view */
th:first-child, td:first-child {
    text-align: center;
}

th:first-child img, td:first-child img {
    display: block;
    margin: 0 auto;
}

/* Add media queries for responsiveness */
@media only screen and (max-width: 767px) {
    th, td {
        padding: 8px;
        display: block;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap; /* Prevent line breaks and encourage horizontal scrolling */
    }

    th, td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        padding-right: 10px; /* Add space between label and data */
    }

    /* Ensure the "Designation" field is not cut off */
    td:nth-child(5):before {
        content: "Designation";
    }

    
}
.pagination-container {
    margin-top: 20px;
    text-align: center;
}

.pagination-link {
    padding: 5px 10px;
    margin: 0 3px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}

.pagination-link.current {
    background-color: #0073aa;
    color: #fff;
}

.pagination-link:hover {
    background-color: #ddd;
    cursor: pointer;
}