.slidebar {
	position: fixed;
	top: 0;
	left: -200px; /* Initially hidden on the left */
	width: 200px;
	height: 100%;
	background-color: var(--bs-light-bg-subtle);
	color: var(--bs-body-color);
	padding: 10px;
	transition: left 0.3s ease;
	overflow-y: scroll; /* Allow vertical scrolling */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	z-index: 1040;

	.card {
		background-color: var(--bs-body-bg);
		border: none;
		margin-bottom: 15px;
		color: var(--bs-body-color);
	}
	
	.card-body {
		text-align: center;
	}

	.switch {
		position: relative;
		display: inline-block;
		width: 34px;
		height: 20px;
	}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}
}

.slidebar::-webkit-scrollbar {
	width: 0.7em; /* Width of the scrollbar */
	background-color: transparent; /* Background color of the scrollbar track */
}

.slidebar::-webkit-scrollbar-thumb {
	border-radius: 0.5em; /* Rounded corners for the scrollbar thumb */
	background-color: var(--bs-border-color); /* Color of the scrollbar thumb */
}

.slidebar::-webkit-scrollbar-track {
	background-color: transparent; /* Background color of the scrollbar track */
}

.slidebar.active {
	left: 0; /* Slide in from the left */
}

.toggle-btn {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 1040;
	transition: left 0.3s ease;
	background-color: var(--bs-primary);
}

.toggle-btn.active {
	background-color: var(--bs-primary);
}

.toggle-btn:hover {
	background-color: var(--bs-primary);
}

html[data-bs-theme="dark"] .toggle-btn {
	color: var(--bs-dark);
}

html[data-bs-theme="light"] .toggle-btn {
	color: var(--bs-light);
}

.slidebar.active + .toggle-btn {
	left: 220px; /* Move button to the right when the sidebar opens */
}

a.highlighted {
	background-color: yellow;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 20px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 12px;
	width: 12px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	transition: .4s;
}

input:checked + .slider {
	background-color: var(--bs-primary);
}

input:checked + .slider:before {
	transform: translateX(14px);
}

.dyslexia-font {
	font-family: 'Open-Dyslexic', sans-serif;
}

.fs-7 {
	font-size: 0.75rem;
}
.accessibility-card-padding {
    padding: 0.5rem 0.5rem !important;
}