/* ALL
======================================================================================================*/
.bg-dark {
  background-color: #171819 !important;
  color: #fff !important;
}
.text-dark {
  color: #171819 !important;
}
.text-white {
  color: #fff !important;
}
.text-green {
  color: #89db14 !important;
}
.text-primary {
  color: #89db14 !important;
}
.logout {
  position: relative;
  background-color: #f55555;
  border-radius: 50px;
  color: #fff;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 14px !important;
  font-weight: 600;
}
.logout-text {
  color: #171819 !important;
  margin-right: 5px;
  font-weight: 600;
}
.fs-60 {
  font-size: 60px;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #171819 !important;
  font-weight: 700;
}
.bg-success {
  background-color: #89db14 !important;
}
.text-success {
  color: #171819 !important;
}
.text-danger {
  color: #171819 !important;
}
.bg-danger {
  background-color: #f55555 !important;
}
.feedback {
  position: relative;
  display: block;
  padding: 20px 10px;
  font-weight: 600;
}
/* SIDEBAR
======================================================================================================*/
.sidebar-area {
  background-color: #111214;
}
.menu-vertical .menu-item .menu-link.menu-toggle::after {
  border-color: #89db14;
}
.menu-vertical .menu-item.open .menu-link.menu-toggle::after {
  border-color: #89db14;
}
.menu-vertical .menu-title .menu-title-text {
  color: #89db14;
}
.menu-vertical .menu-title::before {
  background: #89db14;
}
.menu-vertical .menu-item .menu-link .menu-icon {
  color: #89db14;
}
.menu-vertical .menu-item.open .menu-link.menu-toggle.active .menu-icon {
  color: #89db14;
}
.menu-vertical .menu-item .menu-link {
  color: #fff;
}
.menu-vertical .menu-item.open .menu-link.menu-toggle.active .title {
  color: #89db14;
}
.menu-vertical .menu-sub .menu-item .menu-link {
  padding: 9.5px 18px;
  padding-left: 32px;
  transition: all ease 0.5s;
  position: relative;
  font-size: 14px;
  color: #fff;
}
.menu-vertical .menu-sub .menu-item .menu-link::before {
  background-color: #89db14;
}
.menu-vertical .menu-sub .menu-item .menu-link.active {
  background-color: #171819;
  color: #89db14;
}
.menu-vertical .menu-sub .menu-item .menu-link.active::before {
  opacity: 1;
  background-color: #89db14;
}
.menu-vertical .menu-sub .menu-item .menu-link.active::after {
  border-color: #fff;
}
.menu-vertical .menu-sub .menu-item .menu-link:hover {
  background-color: #171819;
  color: #89db14;
}
.menu-vertical .menu-sub .menu-item .menu-link:hover::before {
  opacity: 1;
  background-color: #89db14;
}
.logo img {
  width: 45px !important;
}
.logo-text {
  color: #fff;
  display: inline-flex;
}
.logo-text small {
  font-size: 10px;
  margin-top: 18px;
  margin-left: 5px;
}
.menu-vertical .menu-sub .menu-item .menu-link {
  padding: 9.5px 18px;
  padding-left: 32px;
  transition: all ease 0.5s;
  position: relative;
  font-size: 14px;
  color: #fff;
}
.menu-level:hover {
  background-color: #171819 !important;
}
.menu-vertical .menu-sub .menu-item.after-sub-menu.open .menu-link {
  background-color: #171819;
}
.menu-vertical .menu-sub .menu-item.after-sub-menu.open .menu-link:hover {
  background-color: #171819;
  color: #fff;
}
/* DATA TABLE
======================================================================================================*/
.dataTable thead {
  background: #171819;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
/* 1. Padding antar card dan tabel */
.dt-container {
  padding: 20px !important;
}

/* 3. Baris putih dengan garis putus-putus */
#myTable.dataTable tbody tr {
  background-color: #fff !important;
}
#myTable.dataTable tbody td {
  border-bottom: 1px dashed #ddd !important;
}

/* 4. Hover tetap putih */
#myTable.dataTable tbody tr:hover {
  background-color: #fff !important;
}

.DataPeserta th.sorting_disabled::before,
.DataPeserta th.sorting_disabled::after {
  display: none !important;
  cursor: pointer;
}
.DataPeserta .sorting_1 {
  box-shadow: none !important;
}
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
  margin: 20px 0px;
  color: #171819 !important;
}
.dataTable tbody {
  font-size: 12px;
  color: #171819 !important;
}
.avatar-50 {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  object-fit: cover;
  border: 2px solid #f0f0f0;
}
table.dataTable th,
table.dataTable td {
  white-space: nowrap;
}
.dt-container {
  width: 100%;
  padding: 0px;
}
.dtfc-fixed-right {
  background-color: #171819;
  color: #fff;
}
.dtfc-fixed-right i {
  color: #fff;
}

/* Paging */
/* Previous & Next button */
/* Previous & Next button */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  background-color: #171819 !important; /* warna solid */
  background-image: none !important; /* hapus gradient bawaan */
  color: #fff !important;
  border-radius: 8px;
  border: 1px solid #171819 !important;
  padding: 6px 14px;
  margin: 0 4px;
}

/* Pastikan tetap hitam di semua state */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:focus {
  background-color: #171819 !important;
  background-image: none !important; /* buang gradient */
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Halaman aktif */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #89db14 !important; /* hijau terang */
  background-image: none !important;
  color: #fff !important;
  border-radius: 8px;
  border: 1px solid #89db14 !important;
  padding: 6px 12px;
  margin: 0 3px;
}

/* Halaman tidak aktif */
.dataTables_wrapper
  .dataTables_paginate
  .paginate_button:not(.current):not(.previous):not(.next) {
  background-color: #edfacc !important; /* hijau muda */
  background-image: none !important;
  color: #000 !important;
  border-radius: 8px;
  border: 1px solid #89db14 !important;
  padding: 6px 12px;
  margin: 0 3px;
}

/* Hover halaman lain tetap hijau muda */
.dataTables_wrapper
  .dataTables_paginate
  .paginate_button:not(.previous):not(.next):hover {
  background-color: #89db14 !important;
  background-image: none !important;
  color: #000 !important;
}

/* Hilangkan background bawaan thead */

/* BUTTON
======================================================================================================*/
.btn-primary {
  background-color: #171819 !important;
  border-color: #171819;
}
.btn-primary:hover {
  background-color: #171819 !important;
  border-color: #171819;
}
.btn-secondary {
  background-color: #89db14 !important;
  border-color: #89db14;
}

/* BUTTON ACTION
======================================================================================================*/
.btnActionEdit {
  position: relative;
  display: inline-block;
  background: #6fdcfa;
  text-align: center;
  border-radius: 4px;
  border: none;
  margin: 0px 2px;
}
.btnActionDel {
  position: relative;
  display: inline-block;
  background: #f55555;
  text-align: center;
  border-radius: 4px;
  border: none;
  margin: 0px 2px;
}
.btnActionChange {
  position: relative;
  display: inline-block;
  background: #ffcf67;
  text-align: center;
  border-radius: 4px;
  border: none;
  margin: 0px 2px;
}
.btnActionDetail {
  position: relative;
  display: inline-block;
  background: #6690ff;
  text-align: center;
  border-radius: 4px;
  border: none;
  margin: 0px 2px;
}
.btnActionEdit i,
.btnActionDel i,
.btnActionChange i,
.btnActionDetail i {
  color: #171819 !important;
}

/* =============================== */
/* FIX STYLE RADIO CUSTOM DI PREVIEW */
/* =============================== */
.box-ujian-soal-PG {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.radioCus {
  display: grid !important;
  grid-template-columns: 26px auto !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  border-radius: 10px !important;
  position: relative !important;
  width: fit-content !important;
  white-space: nowrap !important;
}

.radioCus input {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  accent-color: #441d73 !important;
}

.radioCus .text {
  display: inline !important;
  white-space: normal !important;
  color: #475569 !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}

.radioCus b {
  display: inline !important;
  margin-right: 6px !important;
}

.radioCus p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pastikan tidak ditimpa Bootstrap */
label.radioCus {
  all: unset !important;
  display: grid !important;
  grid-template-columns: 26px auto !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  border-radius: 10px !important;
}

.checkbox-group2 .custom-check {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 10px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  position: relative !important;
}

/* Hide default checkbox */
.checkbox-group2 .custom-check input {
  opacity: 0 !important;
  position: absolute !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Custom circle */
.checkbox-group2 .custom-check .checkmark {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid #9aa0a6 !important;
  border-radius: 50% !important;
  margin-right: 8px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Checked state */
.checkbox-group2 .custom-check input:checked + .checkmark {
  border-color: #4b0082 !important;
}

/* Inner dot saat dicentang */
.checkbox-group2 .custom-check input:checked + .checkmark::after {
  content: "";
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  background: #4b0082 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.checkbox-group2 .custom-check .checkmark {
  border: 2px solid #9aa0a6 !important;
}