/* Reset gaya default browser */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif; /* Menggunakan font Arial atau font sans-serif sebagai fallback */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold; /* Menjadikan judul-judul menjadi tebal */
}

p {
    font-size: 12px; /* Ukuran font untuk paragraf */
    line-height: 1.5; /* Tinggi baris untuk memastikan kejelasan bacaan */
}

/* Gaya font untuk tabel */
table {
    font-family: Arial, sans-serif; /* Menggunakan font yang sama untuk tabel */
    font-size: 13px; /* Ukuran font untuk isi tabel */
    width: 100%;
}


/* Container flexbox */
.container {
    display: flex;
    flex-wrap: wrap; /* Memastikan item turun ke baris baru saat lebar layar kecil */
}

/* Gaya untuk kolom filter */
.filters {
    flex: 1; /* Menyesuaikan lebar kolom */
    max-width: 15%; /* Maksimum lebar div filters */
    margin: 10px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
}

/* Gaya untuk grup filter */
.filter-group {
    margin-bottom: 10px; /* Adjust margin between filter groups */
    font-size: 12px; /* Ukuran font untuk paragraf */
    line-height: 1.5; /* Tinggi baris untuk memastikan kejelasan bacaan */
}

/* Gaya untuk elemen fieldset */
.fieldset {
    width: 10em;
    margin: 0;
    margin-bottom: 0.5em;
}

/* Gaya untuk fieldset disclosures dan supported */
#disclosures, #supported, #externallink, #mediasocial, #shareto {
    font-weight: normal;
    margin-bottom: 10px; /* Atur margin bawah antara kedua fieldset */
    width: 100%; /* Pastikan fieldset memiliki lebar penuh */
}

/* Style untuk kolom tengah (tabel) */
.center-column {
    flex: 4; /* Memberikan prioritas tumbuh lebih besar untuk kolom tengah */
    max-width: 80%; /* Maksimum lebar div center-column */
    margin: 10px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
}

/* Gaya untuk table */
#dataTabel {
    width: 100%; /* Menyesuaikan lebar tabel */
}

/* Gaya untuk layar kecil */
@media screen and (max-width: 768px) {
    .filters, .center-column {
        flex-basis: 100%; /* Lebar div menjadi penuh */
        max-width: none; /* Hapus maksimum lebar untuk layar kecil */
    }
}
