body {
    font-family: Arial, sans-serif;
    background-color: white;
    margin: 0;
    padding: 1px;
}
.full-height {
            height: 98vh; /* Ubah sesuai kebutuhan */
}
.xcontainer {
    max-width: 100*; /* Lebar maksimum untuk laptop */
    margin: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
}
.header-controls {
	margin-top:10px;
    display: flex; /* Menggunakan Flexbox untuk sejajarkan elemen */
    justify-content: space-between; /* Memastikan jarak antara elemen */
    align-items: center; /* Memastikan elemen di tengah secara vertikal */
    margin-bottom: 5px; /* Jarak antara kontrol dan tabel */
}

.search-controls {
    display: flex; /* Menyusun input dan tombol cari secara horizontal */
    align-items: center; /* Memastikan elemen di tengah secara vertikal */
	flex: 1; /* Memastikan container ini mengisi sisa ruang */
	 justify-content: flex-end; /* Menggeser semua elemen ke kanan */
}
/* Mengatur lebar input agar tetap responsif */
@media (max-width: 576px) {
    .search-controls {
        max-width: 100%; /* Memastikan input mengisi seluruh ruang di perangkat kecil */
    }
    #searchInput {
        width: auto; /* Membiarkan input mengatur lebar secara otomatis */
    }
}

 /* Responsivitas untuk tablet */
 @media (max-width: 768px) {
    .search-controls {
        max-width: 100%; /* Memastikan input mengisi seluruh ruang di tablet */
    }
    #searchInput {
        width: auto; /* Membiarkan input mengatur lebar secara otomatis */
    }
}

.search-input {
    padding: 5px; /* Padding untuk input */
    border: 1px solid #ccc; /* Border input */
    border-radius: 5px; /* Membuat sudut input melengkung */
    flex: 1; /* Membuat input mengisi sisa ruang */
    margin-right: 10px; /* Jarak antara input dan tombol */
    max-width: 400px; /* Atur lebar maksimum input */
}


.table-scroll {
    max-height: 500px; /* Atur tinggi maksimum */
    overflow-y: auto;  /* Menambahkan scroll vertikal */
    overflow-x: auto;
    margin-top: 0px;  /* Memberikan jarak dari tombol */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    height:fit-content;
}

thead th {
    position: sticky; /* Membuat header tetap */
    top: 0; /* Menetapkan posisi atas saat di scroll */
    background-color:rgba(128, 0, 0, 0.8); /* #800000 Merah marun rgba(128, 0, 0, 0.8);*/
	
    color: white;
    z-index: 10; /* Agar header tetap di atas konten */
}

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

tr:hover {
    /* background-color: #f1f1f1; */
   background-color: red;
   color: white;
}

tr {
    transition: background-color 0.3s;
}