/* Gaya yang sudah ada sebelumnya */
.bold{
  font-weight: bold !important;
}

.kuning{
  color: #fff32b !important;
}

.bg-kuning{
  background-color: #fff32b !important;
}

.bg-kuning:hover{
  font-weight: bold !important;
}

.bg-outline-kuning{
  border: 1px solid #fff32b !important;
}

.bg-outline-kuning:hover{
   background-color: #fff32b !important;
}

.bg-video{
  background-color: white !important;
}

.bg-video:hover{
  box-shadow: 2px 2px 10px #fff32b !important;
}

.previous{
  background-color: #fff32b !important;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 31%;
}

.previous:hover{
  background-color: #fff32b !important;
  box-shadow: 2px 2px 10px lightgray !important;
  font-weight: bold;
}

.control{
  background-color: #fff32b !important;
  width: 31%;
}

.control:hover{
  background-color: #fff32b !important;
  box-shadow: 2px 2px 10px lightgray !important;
  font-weight: bold;
}

.next{
  background-color: #fff32b !important;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 31%;
}

.next:hover{
  background-color: #fff32b !important;
  box-shadow: 2px 2px 10px lightgray !important;
  font-weight: bold;
}

/* === Penyesuaian Desain Sidebar yang Lebih Elegan === */

/* Latar belakang umum sidebar untuk skin6 */
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"],
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul {
  background-color: #f8f9fa; /* Warna abu-abu sangat terang, sedikit lebih lembut dari putih polos */
  /* box-shadow: 1px 0px 15px rgba(0,0,0,0.05); /* Bayangan yang lebih halus jika diinginkan */
}

/* Tautan Sidebar - Warna Teks dan Ikon Default */
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .sidebar-link {
  color: #5a6a7a; /* Abu-abu kebiruan yang lebih lembut */
  font-weight: 400; /* Sedikit lebih tebal dari default 300 di style.min.css untuk keterbacaan */
  padding: 14px 15px; /* Penyesuaian padding jika perlu */
  border-left: 3px solid transparent; /* Hilangkan border default, akan ditambahkan pada state active */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-left-color 0.2s ease-in-out;
}

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .sidebar-link i {
  color: #5a6a7a; /* Warna ikon senada dengan teks */
  font-size: 15px; /* Sedikit perbesar ikon default 14px jika perlu */
  width: 30px; /* Lebar ikon container */
  margin-right: 8px; /* Jarak ikon dan teks */
  transition: color 0.2s ease-in-out;
}

/* Tautan Sidebar - Efek Hover */
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item:not(.bg-primary):not(.bg-danger) .sidebar-link:hover {
  background-color: #eef2f7; /* Latar hover yang sangat halus */
  color: var(--bs-primary, #707cd2); /* Gunakan variabel Bootstrap atau fallback ke warna primary tema */
  border-left-color: transparent; /* Pastikan tidak ada border saat hover biasa */
}

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item:not(.bg-primary):not(.bg-danger) .sidebar-link:hover i {
  color: var(--bs-primary, #707cd2); /* Warna ikon saat hover */
}

/* Tautan Sidebar - State Aktif */
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .sidebar-link.active {
  font-weight: 500; /* Lebih tebal untuk menandakan aktif */
  color: var(--bs-primary, #707cd2);
  background-color: #e8eaf6; /* Latar yang sangat terang dari warna primary */
  border-left: 3px solid var(--bs-primary, #707cd2); /* Garis aksen di kiri */
}

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .sidebar-link.active i {
  color: var(--bs-primary, #707cd2); /* Warna ikon saat aktif */
}

/* Panah untuk Dropdown */
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav .has-arrow:after {
  border-color: #5a6a7a; /* Warna panah senada dengan teks default */
  right: 20px; /* Posisikan sedikit lebih ke dalam */
  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav li.active > .has-arrow:after,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav li > .has-arrow.active:after,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav .has-arrow[aria-expanded="true"]:after {
  border-color: var(--bs-primary, #707cd2); /* Warna panah saat aktif/expanded */
}

/* Submenu (first-level) */
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .first-level {
  background-color: rgba(0,0,0,0.015); /* Latar yang sangat-sangat halus untuk dropdown */
  padding: 8px 0;
}

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link {
  padding: 10px 15px 10px 45px; /* Indentasi untuk item submenu */
  font-size: 0.875rem; /* Ukuran font item submenu sedikit lebih kecil */
  color: #6c757d; /* Warna teks submenu sedikit lebih terang */
}

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link:hover,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link.active:hover {
  background-color: #dde7f0;
  color: var(--bs-primary, #707cd2);
}

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item .first-level .sidebar-item .sidebar-link.active {
  color: var(--bs-primary, #707cd2);
  background-color: #e0eaff;
  font-weight: 500;
  border-left-color: transparent; /* Biasanya submenu tidak memiliki border kiri */
}

/* Judul Kecil (Nav Small Cap) */
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .nav-small-cap {
  color: #6c757d; /* Warna yang lebih soft */
  opacity: 0.85;
  font-weight: 600; /* Sedikit lebih tebal */
  font-size: 11px; /* Sedikit lebih kecil */
  padding: 18px 15px 10px 18px;
  letter-spacing: 0.5px;
}

/* Penyesuaian untuk item "Ganti Akun" (bg-primary) dan "Logout" (bg-danger) */
/* Ini akan menimpa gaya .bg-primary dan .bg-danger HANYA di dalam sidebar dengan skin6 */

#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-primary {
  background-color: var(--bs-primary, #707cd2) !important; /* Gunakan warna dari variabel bootstrap */
  margin: 5px 10px; /* Tambahkan sedikit margin agar tidak terlalu menempel */
  border-radius: 4px; /* Tambahkan border-radius agar lebih smooth */
}
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-primary > .sidebar-link,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-primary > .sidebar-link i,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-primary .has-arrow:after {
  color: #ffffff !important;
  border-left-color: transparent !important; /* Hapus border kiri */
  background-color: transparent !important; /* Latar linknya transparan karena li sudah berwarna */
}
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-primary:hover {
  background-color: #5c6ac4 !important; /* Warna sedikit lebih gelap saat hover */
}


#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-danger {
  background-color: var(--bs-danger, #f33155) !important; /* Gunakan warna dari variabel bootstrap */
  margin: 5px 10px;
  border-radius: 4px;
}
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-danger > .sidebar-link,
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-danger > .sidebar-link i {
  color: #ffffff !important;
  border-left-color: transparent !important;
  background-color: transparent !important;
}
#main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg="skin6"] .sidebar-nav ul .sidebar-item.bg-danger:hover {
  background-color: #dc2a45 !important; /* Warna sedikit lebih gelap saat hover */
}