body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   overflow-y: auto;
}

html {
   overflow-y: auto;
}

main {
   flex: 1;
}

footer {
   background-color: #004200;
}

table {
   width: 100%;
   border-collapse: collapse;
   background-color: #ffffff;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

thead {
   background-color: rgb(26, 119, 3) !important;
   color: white !important;
   text-align: center !important;
}

th {
   padding: 5px;
   text-align: center;
   border: 1px solid #ddd;
}

td {
   padding: 2px;
   text-align: center;
   border: 1px solid #ddd;
}

tr:nth-child(even) {
   background-color: rgb(224, 247, 213) !important;
}

h4 {
   color: #333;
   text-align: left;
   margin-top: 40px;
}

/* Centering form and ensuring label and select are inline */
.centered-form {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.form-group {
   display: flex;
   align-items: center;
   justify-content: center;
}

.form-group label {
   margin-right: 10px;
   white-space: nowrap;
   /* Prevent label from wrapping into 2 lines */
}

.form-group select {
   max-width: 250px;
   /* Limit the width of the select box */
}

@media screen and (min-width: 768px) {
   .responsive-text {
      font-size: 23px;
      font-weight: bold;
   }

   h1 {
      font-size: 37px !important;
      font-weight: bold !important;
   }
}

@media screen and (max-width: 767px) {
   .responsive-text {
      font-size: 14px;
      font-weight: bold;
   }

   h1 {
      font-size: 22px !important;
      font-weight: bold !important;
   }

   table,
   th,
   td {
      font-size: 12px;
      /* Mengecilkan font agar tabel muat */
      padding: 0.12rem;
      /* Mengurangi padding agar lebih compact */
   }

   .arabic-text {
      font-family: 'Scheherazade', serif;
      /* Menggunakan font kaligrafi */
      font-size: 2.5rem;
      direction: rtl;
      /* Mengatur arah teks ke kanan */
      text-align: center;
   }

   .swal2-popup {
      font-size: 0.8rem !important;
      width: 300px !important;
  }

  .swal2-title {
      font-size: 1.1rem !important;
      padding: 0.5rem 1rem !important;
  }

  .swal2-html-container {
      font-size: 0.9rem !important;
      margin: 0.5rem !important;
  }

  .swal2-confirm,
  .swal2-cancel {
      font-size: 0.8rem !important;
      padding: 0.4rem 1rem !important;
  }
}