/* Tambahkan gaya CSS sesuai kebutuhan Anda */
   .chart-container {
       max-width: 1000px;
       height: auto;

   }

   .scrollable-chart {
       max-width: 1000px;
       overflow-x: auto;
       /* Membuat scroll horizontal */
       overflow-y: auto;
       /* Membuat scroll vertikal */
       white-space: nowrap;
       /* Mencegah teks wrap */
       height: auto;
   }

   canvas {
       max-height: 390px;
       width: 100%;
       height: 100%;
   }

   .button-container {
       margin-top: 30px;
       display: flex;

   }

   .button {
       padding: 10px 20px;
       font-size: 16px;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       transition: background-color 0.3s;
       color: #fff;
       margin-right: 10px;
       /* Tambahkan margin kanan di sini */
   }

   .download-chart-button {
       background-color: #007bff;
   }

   .download-csv-button {
       background-color: #28a745;
   }

   .expand-button {
       background-color: #ffc107;
   }

   .button:hover {
       background-color: #0056b3;
   }

   .button-icon {
       margin-right: 5px;
       font-size: 18px;
   }




   table {
       width: 100%;
       border-collapse: collapse;
   }

   table th {
       text-align: center;
       vertical-align: middle;
   }

   table th[rowspan="2"] {
       vertical-align: middle;
   }

   /* Gaya CSS yang berlaku untuk semua tampilan */
   #chart_klts_opt_utama_padi {
       display: block;
       box-sizing: border-box;
       height: 1040px;
       width: 270px;
   }

   /* Media query untuk perangkat seluler dengan lebar maksimum 768px */
   @media only screen and (max-width: 768px) {
       #chart_klts_opt_utama_padi {
           width: 100%;
           height: auto;
           /* Biarkan tinggi mengikuti lebar dengan rasio aspek yang benar */
           max-width: 100%;
           /* Jika Anda ingin membatasi lebar maksimum */
       }
   }