/* Style untuk box-container yang menampung semua box */
.box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 20px 0;
}

/* Style untuk setiap box */
.box {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    width: calc(33.333% - 20px); /* Mengurangi 20px untuk jarak antara box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
	justify-content: center;
    /* Menambahkan gaya transisi untuk efek hover */
    /* transition: transform 0.3s, box-shadow 0.3s; */
}

/* Style untuk gambar di dalam box */
.box img {
    width: 100px; /* Sesuaikan ukuran ini sesuai kebutuhan */
    height: 100px; /* Menetapkan tinggi yang sama untuk semua gambar */
    object-fit: cover; /* Mengatur agar gambar memenuhi area dan mempertahankan aspek rasio */
    border-radius: 5px; /* Jika ingin sudut gambar sedikit melengkung */
    margin-bottom: 15px; /* Menambahkan ruang di bawah gambar */
    margin-right: 15px; /* Menambahkan ruang di samping gambar */
}

/* Style untuk konten di dalam box */
.box-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Membuat konten teks mengisi ruang yang tersisa */
}

/* Style untuk judul di dalam box */
.box-title {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    font-size: 17px;
}

/* Style untuk konten utama di dalam box */
.box-content {
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
}

/* Style untuk footer di dalam box */
.box-footer {
    font-size: 15px;
    color: #888;
}

/* Style untuk list keterangan di dalam box */
ul.keterangan-list {
    display: flex;
    gap: 15px;
    list-style-type: none;
	padding-left: 0;
}

/* Style untuk item list keterangan di dalam box */
ul.keterangan-list li {
    display: flex;
    align-items: center;
}

/* Style untuk input pencarian */
.form-control {
    width: 40%;
    margin-top: 15px;
}

/* Style untuk filter container */
#filterContainer {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Style untuk input pencarian di filter container */
#searchInput {
    padding: 10px;
    min-width: 50px;
}

/* Style untuk tombol pencarian */
#searchButton {
    background-color: #6c757d;
    border-radius: 5px;
    color: white;
    padding: 10px;
    margin-top: 15px;
    cursor: pointer;
}

/* Style untuk dropdown filter pasar dan kondisi harga */
#selectPasar, #filterDropdown {
    padding: 10px;
    border-radius: 5px;
    width: 220px;
}

/* Style khusus untuk dropdown pasar */
#selectPasar {
    width: 170px;
}

/* Style khusus untuk dropdown filter kondisi harga */
#filterDropdown {
    width: 170px;
}

/* Style untuk responsif pada perangkat kecil */
@media (max-width: 768px) {
    .box {
        width: 100%;
    }
	#selectPasar, #filterDropdown {
        width: 100%;
    }
}

/* Style untuk responsif pada perangkat sangat kecil */
@media (max-width: 576px) {
    .box {
        width: 100%;
    }

    #searchInput {
        width: calc(100% - 20px);
        /* margin-right: 0; */
    }

    #filterContainer {
		width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    #searchButton {
        margin-left: 0;
        margin-right: 0;
    }

    #selectPasar, #filterDropdown {
        width: 100%;
    }

}

/* Style untuk Sparkline */
.sparkline {
    width: 100px;
    height: 30px;
}

/* Style untuk tooltip Sparkline */
.sparkline-tooltip {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000; /* Memastikan tooltip muncul di atas elemen lainnya */
}