* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}

.cari {
  margin-bottom: 20px;
}

.cari label {
  font-weight: bold;
}

.cari input {
  padding: 10px;
  width: 90%;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.tabel {
  margin-top: 20px;
}

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

th,
td {
  border-bottom: 1px solid #000000;
  white-space: nowrap;
}

th {
  background-color: #78ca83;
}

@media (max-width: 480px) {
  .cari {
    margin-bottom: 20px;
    width: 100%; /* Full width on small screens */
  }

  .cari label {
    font-weight: bold;
    color: #0011ff;
  }

  .cari input {
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #659cbb;
  }

  .container {
    width: 100vw; /* Full width viewport */
    height: 80vh; /* Full height viewport */
    overflow-y: auto; /* Scroll vertikal jika isi lebih besar */
    overflow-x: hidden; /* Hindari scroll horizontal */
    padding: 20px;
    box-sizing: border-box;
    background-color: #4240ac;
  }

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

  th,
  td {
    padding: 5px;
    border-bottom: 1px solid #5c5c5c;
    white-space: nowrap;
  }

  th {
    background-color: #fbff00;
  }

  /* Tambahkan aturan untuk membuat tabel striped */
  tr:nth-child(odd) {
    background-color: #cccccc; /* Warna untuk baris ganjil */
  }

  tr:nth-child(even) {
    background-color: #ffffff; /* Warna untuk baris genap */
  }
}