.paito {
  max-width: 728px;
  margin: auto;
}
/* Styling Color Menu */
#colormenu {
  display: flex;
  align-items: center;
  padding: 5px;
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
}
#color-selector {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  /* Tidak ada flex-wrap agar tetap dalam satu baris */
}
/* Membuat setiap .color dan tombol RESET memiliki lebar yang sama */
#color-selector > * {
  flex: 1 1 0;
  box-sizing: border-box;
}
#btnSubmit {
  flex: 1 1 0;
  cursor: pointer;
  background-color: unset; /* Sesuaikan warna latar belakang jika diperlukan */
  border: 1px solid #6f6969;
  border-radius: 3px;
  text-align: center;
  font-size: 10px;
  color: #000;
}
.color {
  flex: 1 1 0;
  height: 20px;
  cursor: pointer;
  border: 1px solid #000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.color.eraser {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #000;
  background: #fff;
}
/* Header Table */
.table-header th {
  background-color: #f2f2f2;
}
.unique-th-style {
  /* Tambahkan gaya khusus jika diperlukan */
}
.text-center {
  text-align: center;
}
.asu {
  font-weight: bold;
}
/* Warna kelas */
.e1,
.e2,
.e3,
.e4,
.e5,
.e6,
.e7,
.e8,
.e9,
.e0 {
  background-color: #ff4d4d;
  color: white;
}
.k1,
.k2,
.k3,
.k4,
.k5,
.k6,
.k7,
.k8,
.k9,
.k0 {
  background-color: green;
  color: white;
}
.c1,
.c2,
.c3,
.c4,
.c5,
.c6,
.c7,
.c8,
.c9,
.c0 {
  background-color: blue;
  color: white;
}
.a1,
.a2,
.a3,
.a4,
.a5,
.a6,
.a7,
.a8,
.a9,
.a0 {
  background-color: orange;
  color: white;
}
.j1,
.j2,
.j3,
.j4,
.j5,
.j6,
.j7,
.j8,
.j9,
.j0 {
  background-color: #910303;
  color: white;
}

.highlight {
  padding: 1px 4px;
  margin: 0 -4px;
}

input.cari {
  width: 50px;
  text-align: center;
  font-weight: bold;
}

#myForm {
  margin: 10px 0px 10px 0px;
}

.list-group-item,
.list-group-item a {
  padding: 0 10px;
  text-decoration: none;
  font-weight: bold;
}

.single-view {
  background: #ffffff;
}
.entry-content th,
.entry-content td,
.comment-content th,
.comment-content td {
  padding: 0 !important;
}
textarea {
  width: 100%;
}
.asux {
  background: #ffffff;
  color: #d7d1d1;
  font-weight: normal;
}
tr:nth-last-child(5n + 1) {
  background: #e8e4e7 !important;
}

.fixed2 {
  position: fixed;
  top: 0;
}
.intro td {
  background: #ffffff !important;
}
table {
  background: white;
  margin: 10px -5px 10px -5px;
  min-width: 500px;
}
#drawing-table {
  border-collapse: collapse;
  width: auto;
  user-select: none;
  text-align: center;
  margin: 3px auto;
  width: 100%;
}
#drawing-table td {
  border: 1px solid #d9d9d9;
  text-align: center;
  padding: 0;
  width: 20px;
  font-weight: 600;
}
.head {
  background: #ddd;
  border: 1px solid #ddd;
}

#table-wrap {
  font-weight: bold;
  position: relative;
}
#table-wrap table {
  position: relative;
  z-index: 10;
}
#toggle-tracing-mode {
  display: none;
}

#html-wrap textarea {
  height: 50px;
  margin: 0 0 10px;
  overflow: auto;
  width: 100%;
}

/* Responsif: Untuk layar kecil */
@media (max-width: 768px) {
  #drawing-table {
    min-width: 100%;
  }
  #drawing-table td {
    font-weight: normal;
    font-size: 12px;
  }
  .head th {
    font-weight: normal;
  }
}