#example1 {
          background-color: #808080;
          color : white;
          border: 2px;
          padding: 0,1px;
          border-radius: 25px;
      }

      #example2 {
          background-color: #32CD32;
          color : white;
          border: 2px;
          padding: 0,1px;
          border-radius: 25px;
      }

      #example5 {
        background-color: #FF0000;
          color : white;
          border: 2px;
          padding: 0,1px;
          border-radius: 25px;
      }

       #example3 {
        background-color: #FFFF00;
          color : black;
          border: 2px;
          padding: 0,1px;
          border-radius: 25px;
      }
       #example4 {
        background-color: #ffa500;
          color : white;
          border: 2px;
          padding: 0,1px;
          border-radius: 25px;
      
       }
       #example6 {
        background-color: #bf00ff;
          color : white;
          border: 2px;
          padding: 0,1px;
          border-radius: 25px;
      }


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

        .table > tbody > tr > td {
             vertical-align: middle;
             line-height: 50 px;
     }
     
     
     
/* Gaya untuk keterangan dibawah tabel */    
  .keterangan-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 5vh;
        }

        .keterangan-baris {
            display: flex;
            flex-direction: row;
        }

        .keterangan {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .kotak {
            width: 12px;
            height: 12px;
            margin-right: 10px;
        }

        .hijau {
            background-color: #00FF00;
        }

        .kuning {
            background-color: yellow;
        }

        .orange {
            background-color: orange;
        }
        
        .merah {
            background-color: red;
        }
        
        .ungu {
            background-color: purple;
        }        


/* Gaya untuk gambar dalam modal */
    #uploadedImage {
        max-width: 100%;
        height: auto; /* Menjaga aspek rasio gambar */
    }
    
    iframe {
        border: none;
    }
    
    .modal-class {
    max-width: 90%; /* Maksimum lebar modal 90% dari lebar layar */
}


/* 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;
    text-align: center;
}

  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;
        }    
  

   /* Media query untuk menerapkan aturan CSS hanya pada layar ponsel */


/* Gaya untuk keterangan */    
  .keterangan-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 5vh;
        }

        .keterangan-baris {
            display: flex;
            flex-direction: row;
        }

        .keterangan {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .kotak {
            width: 12px;
            height: 12px;
            margin-right: 10px;
        }

        .hijau {
            background-color: #00FF00;
        }

        .kuning {
            background-color: yellow;
        }

        .orange {
            background-color: orange;
        }
        
        .merah {
            background-color: red;
        }
        
        .ungu {
            background-color: purple;
        }