.elementor-6187 .elementor-element.elementor-element-daa607d{--display:flex;}/* Start custom CSS for html, class: .elementor-element-f6b9736 *//* Style dasar tabel */

    #dataTable th:nth-child(1), #dataTable td:nth-child(1) { width: 5%; }  
    #dataTable th:nth-child(2), #dataTable td:nth-child(3) { width: 5%;}
    #dataTable th:nth-child(3), #dataTable td:nth-child(3) { width: 10%; }  
    #dataTable th:nth-child(4), #dataTable td:nth-child(4) { width: 20%; }  
    #dataTable th:nth-child(5), #dataTable td:nth-child(5) { width: 20%; }   
    #dataTable th:nth-child(6), #dataTable td:nth-child(5) { width: 30%; }   
    #dataTable th:nth-child(7), #dataTable td:nth-child(5) { width: 5%; }   



table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 8px;
}

thead {
    background-color: #273171;
    color: white;
}

thead th {
    padding: 12px;
    text-align: left;
}

tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

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

/* Hyperlink */
a {
    text-decoration: none;
    color: #273171;
}

a:hover {
    text-decoration: underline;
}

/* Responsivitas untuk tabel */
/* RESPONSIVE DESIGN UNTUK MOBILE */
@media screen and (max-width: 600px) {
    /* Buat tabel lebih compact */
    #dataTable th, #dataTable td {
        font-size: 12px;
        padding: 6px;
        word-wrap: break-word;
        white-space: normal;
    }

    /* Pastikan tabel tetap dalam container dan bisa di-scroll jika perlu */
    table {
        display: block;
        overflow-x: auto;
    }

    /* Kotak pencarian dan tombol lebih responsif */
    .search-container {
        flex-direction: column;
        width: 100%;
    }

    #searchBar {
        width: 100%;
    }

    .search-button, .reset-button {
        width: 100%;
    }

    /* Dropdown jumlah baris dipusatkan */
    #rowsPerPageContainer {
        width: 100%;
        justify-content: center;
        display: flex;
    }
}


/* Kolom pertama (No) lebih kecil */
td:nth-child(1),
th:nth-child(1) {
    text-align: center;
    width: 50px;
}

/* TOP BAR */
.top-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Kotak pencarian */
.search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

#searchBar {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Tombol pencarian dan reset */
.search-button,
.reset-button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.search-button {
    background-color: #273171;
    color: white;
}

.search-button:hover {
    background-color: #1a2152;
}

.reset-button {
    background-color: #a61937;
    color: white;
}

.reset-button:hover {
    background-color: #80172d;
}

/* Dropdown jumlah baris */
#rowsPerPageContainer {
    display: flex;
    align-items: center;
    gap: 5px;
}

#rowsPerPage {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Pagination */
#pagination {
    margin-top: 10px;
    text-align: center;
    color: #273171;
}

.pagination-button {
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid #ccc;
    cursor: pointer;
    background-color: #787c94;
    color: white;
    border-radius: 4px;
}

.pagination-button:hover {
    background-color: #273171;
}

.pagination-button.active {
    background-color: #273171;
}

/* RESPONSIVE DESIGN */
@media screen and (max-width: 600px) {
    .top-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-container {
        flex-direction: column;
        width: 100%;
    }

    #searchBar {
        width: 80%;
    }
        
        
    .search-button,
    .reset-button {
        width: 80%;
    }

    #rowsPerPageContainer {
        width: 100%;
        justify-content: center;
        display: flex;
    }
}/* End custom CSS */