/* EMPLOYEE TABLE STYLE */
.employee-style {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    overflow-x: auto;
}

/* Header (th) styles */
.employee-style th {
    padding: 8px 8px;
    border: 1px solid #000000;
    text-align: left;
    text-transform: uppercase;
    background-color: #f3f3f3;
    color: black;
}



/* Data cell (td) styles */
.employee-style td {
    padding: 8px 8px;
    border: 1px solid #000000;
    text-align: left;
}

/* Thead styles */
.employee-style thead {
    background-color: #f3f3f3;
    font-size: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Scrollbar styles */
table.employee-style::-webkit-scrollbar {
    width: 10px;
}

table.employee-style::-webkit-scrollbar-thumb {
    background-color: #ccc;
}

/* Hover effect for table rows */
.employee-style tbody tr:hover {
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}

/* Anchor tag styles */
.employee-style a {
    text-decoration: none;
    color: #333;
}

.employee-style a:hover {
    color: #007BFF;
}

/* Icon styles */
.employee-style i.fas.fa-edit {
    font-size: 14px;
}

/* Table container styles */
.table-container {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    max-height: 500px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .employee-style {
        font-size: 10px;
    }

    .employee-style th, .employee-style td {
        padding: 6px 8px;
    }
}