.container.mt-4{
      font-family: 'Roboto', sans-serif;
      font-size:13px;
      }

        .table > tbody > tr > td {
             vertical-align: middle;
             line-height: 50 px;
     }
     
     
     


/* Gaya CSS untuk tabel curah hujan */
table {
    border-collapse: collapse;
    width: 100%;
}

table, th, td {
    border: 1px solid #ccc; /* Menambahkan garis pada tabel */
    border-bottom: 1px solid #ccc;
}

th, td {
    padding: 8px;

}

  a {
    text-decoration: none;
    
  }
    .table-container {

      margin-top: 10px;
      max-height: 500px;
   }
   
  th {
   position: sticky;
   top: 0; /* Stick to the top of the container */
   z-index: 2;
           
        }
 
 /* CSS untuk mengatur tinggi maksimum pada tabel */

.table-striped tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Warna latar belakang untuk baris ganjil */
}

.table-striped tbody tr:nth-child(even) {
    background-color: #ffffff; /* Warna latar belakang untuk baris genap */
}

.table-striped tbody tr:hover {
    background-color: #d9edf7; /* Warna latar belakang saat dihover */
}  
  
     
 /* CSS untuk mengatur tinggi elemen canvas agar responsif */
.chart-container {
  position: relative;
  width: 90%;
  height: 65vh; /* Sesuaikan tinggi sesuai kebutuhan Anda, misalnya 50% dari tinggi viewport */
}


canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

  
   /* Media query untuk menerapkan aturan CSS hanya pada layar ponsel */
   @media (max-width: 767px) {
   .table-container {
      max-height: 400px; /* Sesuaikan tinggi maksimum yang Anda inginkan */
      overflow: auto; /* Aktifkan scrolling pada layar ponsel */
     }
   }
    

/* Gaya CSS untuk tabel curah hujan */
table {
    border-collapse: collapse;
    width: 100%;
}


th {
    padding: 8px;
  
}

td {
    border: 1px solid #ccc;
  
}


  .table-row {
    height: 25px; /* Sesuaikan tinggi yang diinginkan */
  }
  
  
/* Gaya CSS untuk informasi di atas tabel */

  a {
    text-decoration: none;
    
  }
  

   /* CSS untuk mengatur tinggi maksimum pada tabel */
   .table-container {
       /* overflow: auto;  Aktifkan bilah gulir jika diperlukan */
      margin-top: 10px;
      max-height: 500px;
       width: 100%; 
      
   }


    th {
            position: sticky;
            top: 0; /* Stick to the top of the container */
            z-index: 2;
           
        }
        
    .header-border {
            position: sticky;
            width: 100%;
            height: 100%;
            z-index: 2;
            box-sizing: border-box;
        }