/* Sidebar Styles */
.sidebar {
  height: calc(100vh - 65px);
  width: 280px;
  background-color: #FBFBFB;
  color: black;
  position: fixed;
  left: -280px;
  top: 65px;
  overflow-y: auto; /* Pastikan sidebar bisa digulir */
  max-height: 100vh; /* Batasi tinggi sidebar agar bisa di-scroll */
  scrollbar-width: thin;
  scrollbar-color:#E0E0E0 #f1f1f1;
  padding-right: 12px;
  /* padding-left: 10px; */
  transition: none !important;
}


/* Custom Scrollbar */
.sidebar::-webkit-scrollbar {
  width: 6px;  /* Lebar scrollbar */
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #888;  /* Warna scrollbar */
  border-radius: 10px;  /* Sudut melengkung */
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #555;  /* Warna scrollbar saat hover */
}

.sidebar::-webkit-scrollbar-track {
  background-color: #f1f1f1;  /* Warna track scrollbar */
  border-radius: 10px;
}

.sidebar.open {
  left: 0;
}

.toggle-btn {
  top: 15px;
  left: 15px;
  color: white; /* Hanya warna ikon */
  padding: 0; /* Hilangkan padding */
  margin-right: 10px;
  border: none; /* Hilangkan border */
  font-size: 24px; /* Sesuaikan ukuran ikon */
  cursor: pointer;
  background: none; /* Hilangkan background */
  z-index: 1000; /* Tetap di atas elemen lain */   
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar ul li {
  padding: 15px 20px;
  cursor: pointer;
}

/* .sidebar ul li:hover {
  background-color: #FBDCC4;
  border-radius: 9px;
} */

.sidebar ul li i {
  margin-right: 10px;
}

/* Judul Besar */
.main-title-container {
  text-align: center;
  padding: 20px 10px;
  background-color: #FBFBFB;
}

.main-title-container i {
  font-size: 50px; /* Ukuran ikon */
  margin-bottom: 10px;
  display: block;
}

.main-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  cursor: default; /* Tidak bisa diklik */
}

/* Dropdown */
.sidebar ul .dropdown {
  display: none;
  background-color: #FBFBFB; 
  padding-left: 20px;
}

.sidebar ul .dropdown li {
  padding: 10px 20px;
  font-size: 14px;
  display: flex; /* Menambahkan display flex untuk mendukung align-items dan justify-content */
  /* justify-content: space-between; */
  align-items: center;
}

.sidebar ul .dropdown li:hover {
  background-color: #FBDCC4;
  border-radius: 9px;
}

.sidebar a.active li {
  background-color: #FBDCC4; 
  border-radius: 9px;
}

/* Menempatkan ikon lock di sebelah kanan */
.sidebar ul .dropdown li span {
  margin-left: auto;  /* Menempatkan ikon lock ke kanan */
}


/* Menghapus margin dan padding yang tidak diinginkan pada teks */
.sidebar ul .dropdown li span {
  margin-right: 0; /* Pastikan tidak ada margin di kanan teks */
}

/* Tanda Panah */
.dropdown-toggle {
  display: flex;
  justify-content: flex-start !important; /* Pastikan konten tetap di kiri */
  align-items: center;
   /* Beri jarak antara panah dan teks */
}

/* Pastikan ikon panah berada di kiri */
.dropdown-toggle i {
  font-size: 14px;
  /* transition: 0.3s; */
  order: -1; /* Ini akan menempatkan panah sebelum teks */
}

.dropdown-toggle.teks {
  text-overflow: ellipsis;
}

.dropdown-toggle.teks:hover::after {
  content: attr(data-fulltext);
}

.dropdown-toggle.open i {
  transform: rotate(90deg); /* Rotasi panah ke samping */
}
  
.slc {
  -webkit-appearance: none; /* Untuk browser berbasis WebKit */
  -moz-appearance: none;    /* Untuk Firefox */
  appearance: none;         /* Untuk browser modern lainnya */
  background: none;         /* Menghapus latar belakang bawaan */
}

/* Content Area */
.content {
  margin-left: 0;
  padding-top: 14px;
  /* transition: 0; */
  text-align: justify;
}

.content p, .content pre {
  text-align: justify;
}

.content.shifted {
  margin-left: 280px;
}

.spc {
  margin-bottom: 300px;
}

a {
  text-decoration: none;
  color: black;
}

a:hover,
a:focus,
a:active {
  color: black !important; /* Tetap hitam saat hover */
  text-decoration: none; /* Pastikan tidak ada garis bawah */
}

#sidebar li.active {
  background-color: #495057;
  color: white;
}

.moving-text {
  display: flex; /* Untuk menampilkan teks dan panah secara sejajar */
  align-items: center;
  overflow: hidden;   
  /* margin-left: 0; */
}

.moving-text .text {
  display: inline-block;
  transform: translateX(0); 
  transition: transform 0s;   
}

.moving-text:hover .text {
  animation: moveText 5s linear infinite;
}

@keyframes moveText {
  0% {
    transform: translateX(0); 
  }
  100% {
    transform: translateX(-100%); 
  }
}

.prev {
  margin-left: 20px;
}

.sidebar.no-transition {
  transition: none !important;
}

.no-transition .sidebar {
  transition: none !important;
}

.no-transition .content,
.no-transition #footer {
  transition: none !important;
}

/* .text-turun {
  white-space: nowrap;        
  overflow: hidden;        
  text-overflow: ellipsis;  
} */


@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 65px;
    left: -280px;
    width: 280px;
    height: calc(100vh - 65px);
    background-color: #FBFBFB;
    z-index: 1001; /* Pastikan di atas overlay */
  }

  .sidebar.open {
    left: 0;
  }
  
  .sidebar.initial-load {
    left: 0; /* Sidebar terbuka otomatis pada halaman pertama tanpa transisi */
  }

  .content {
    margin-left: 0 !important; /* Hindari terdorong konten */
  }

  .overlay {
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;
    height: calc(100vh - 65px);
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Di bawah sidebar tapi di atas konten */
    display: block;
  }

  .overlay.hidden {
    display: none;
  }

  footer {
    margin-left: 0 !important;
  }
}