/* CSS untuk sidebar */
.modal.fade .modal-dialog {
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
	transform: translateY(-100px);
	opacity: 0;
}

.modal.show .modal-dialog {
	transform: translateY(0);
	opacity: 1;
}

.navbar #sidebarToggle {
	width: 40px;
	height: 40px;
}

.sidebar {
	position: fixed; /* Sidebar tetap berada di posisi tetap pada sisi kiri */
	top: 0;
	left: 0;
	bottom: 0;
	width: 350px; /* Lebar sidebar */
	background-color: #343a40; /* Warna latar sidebar */
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, visibility 0.3s ease;
	transform: translateX(0);
	visibility: visible;
	z-index: 1000; /* Sidebar berada di atas elemen lain */
}

.sidebar-content {
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
}

.sidebar.toggled {
	transform: translateX(-225px);
	visibility: hidden; /* Sidebar di-hidden ketika toggled */
}

#content-wrapper {
	transition: margin-left 0.3s ease;
	margin-left: 225px;
}

.sidebar.toggled ~ #content-wrapper {
	margin-left: 0;
}

#sidebarToggle:focus,
#sidebarToggle.active {
	box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.5);
	outline: none;
}

.nav-item {
	position: relative;
}

.nav-item.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 70%;
	width: 4px;
	background-color: white;
	border-radius: 0 3px 3px 0;
}

.nav-link.active {
	color: #ffffff;
}

.icon-rotate {
	transition: transform 0.3s;
	transform: rotate(180deg);
}

.sidebar-content::-webkit-scrollbar {
	width: 6px;
}

.sidebar-content::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
}

.sidebar-content::-webkit-scrollbar-track {
	background: #4b6fdd;
}

@media (max-width: 768px) {
	.sidebar {
		width: 100%;
	}

	.sidebar.toggled {
		transform: translateX(-100%);
	}

	#content-wrapper {
		margin-left: 0;
	}
}