/* Mengatur kotak utama details */
details {
  background-color: #f5f5f5;
  padding: 5px;
  border-radius: 25px;
}

/* Mengatur bagian judul (summary) */
details summary {
    color: #4E626B;
    font-size: 18px;
    font-family: Arial, sans-serif;
    cursor: pointer;
}

/* Menghilangkan panah bawaan browser (opsional) */
details summary::-webkit-details-marker {
  display: none;
}


/*
################# CHECKLIST ######################
*/
/* ul & li checklist Dafault*/
ul.kb-checklist {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 20px;
}

ul.kb-checklist li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist li::before {
  content: "✓"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #6C6C6C; /* Warna default untuk centang */
  font-weight: bold;
}

/* ul & li checklist Warna Biru*/
ul.kb-checklist-blue {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 20px;
}

ul.kb-checklist-blue li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-blue li::before {
  content: "✓"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #8ce; /* Warna Biru untuk centang */
  font-weight: bold;
}

/* ul & li checklist Warna Hijau*/
ul.kb-checklist-green {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 20px;
}

ul.kb-checklist-green li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-green li::before {
  content: "✓"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #9ECC7C; /* Warna Hijau untuk centang */
  font-weight: bold;
}


/*
################# KOTAK ######################
*/
/* ul & li Kotak Warna Hitam */
ul.kb-checklist-k-black {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 22px;
}

ul.kb-checklist-k-black li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-k-black li::before {
  content: "☑"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #949494; /* Warna hitam untuk centang */
  font-weight: bold;
}

/* ul & li Kotak Warna Merah */
ul.kb-checklist-k-red {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 22px;
}

ul.kb-checklist-k-red li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-k-red li::before {
  content: "☑"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #ff0000; /* Warna merah untuk centang */
  font-weight: bold;
}

/* ul & li Kotak Orange */
ul.kb-checklist-k-orange {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 35px;
}

ul.kb-checklist-k-orange li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-k-orange li::before {
  content: "☑"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #FFAE63; /* Warna orange untuk centang */
  font-weight: bold;
}

/* ul & li Kotak Warna Biru */
ul.kb-checklist-k-blue {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 22px;
}

ul.kb-checklist-k-blue li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-k-blue li::before {
  content: "☑"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #8ce; /* Warna Biru untuk centang */
  font-weight: bold;
}

/* ul & li Kotak Warna Hijau */
ul.kb-checklist-k-green {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 22px;
}

ul.kb-checklist-k-green li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-k-green li::before {
  content: "☑"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #9ECC7C; /* Warna hijau untuk centang */
  font-weight: bold;
}


/*
################# BINTANG ######################
*/
/* ul & li Bintang Hitam */
ul.kb-checklist-b-black {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 35px;
}

ul.kb-checklist-b-black li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-b-black li::before {
  content: "✴"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #949494; /* Warna hitam untuk centang */
  font-weight: bold;
}

/* ul & li Bintang Merah */
ul.kb-checklist-b-red {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 35px;
}

ul.kb-checklist-b-red li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-b-red li::before {
  content: "✴"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #ff0000; /* Warna merah untuk centang */
  font-weight: bold;
}

/* ul & li Bintang Orange */
ul.kb-checklist-b-orange {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 35px;
}

ul.kb-checklist-b-orange li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-b-orange li::before {
  content: "✴"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #FFAE63; /* Warna orange untuk centang */
  font-weight: bold;
}

/* ul & li Bintang Biru */
ul.kb-checklist-b-blue {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 35px;
}

ul.kb-checklist-b-blue li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-b-blue li::before {
  content: "✴"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #8ce; /* Warna biru untuk centang */
  font-weight: bold;
}

/* ul & li Bintang Hijau */
ul.kb-checklist-b-green {
  list-style: none; /* Menghilangkan titik bawaan li */
  padding: 0;
  margin-left: 35px;
}

ul.kb-checklist-b-green li {
  position: relative;
  padding-left: 20px; /* Jarak antara teks dan centang */
  margin-bottom: 5px;
}

ul.kb-checklist-b-green li::before {
  content: "✴"; /* Simbol centang (bisa juga pakai '\2713' atau '\2714') */
  position: absolute;
  left: 0;
  top: 0;
  color: #9ECC7C; /* Warna hijau untuk centang */
  font-weight: bold;
}


/*
################# STAR FAS FA ######################
*/
.score {
  display: block;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 19px;
}

.score .stars-active {
  color: #EEBD01;
  position: relative;
  z-index: 10;
  display: inline-block;
}

.score .stars-inactive {
  color: grey;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  overflow: hidden;
}


/*
################# STAR FAS FA KUNING ######################
*/
.fa-star {
  color: #ffc107; /* Warna kuning emas */
  font-size: 24px;   /* Ukuran ikon opsional */
}