.sidebar-wrapper {
	padding: 10rem 10rem 0 10rem;
	width: 25%;
	/* background-color: #eff3f7; */
	background-color: var(--primary50);
	transition: transform 0.3s ease-in-out;
}

.sidebar-wrapper ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.sidebar__menu {
	font-size: var(--font-size-medium);
	font-weight: 500;
	color: var(--gray120);
	cursor: pointer;
	font-family: "Pretendard";
}

.sidebar__logout {
	display: inline-block;
	text-decoration: none;
	font-size: var(--font-size-medium);
	color: var(--gray120);
	font-weight: 500;
	font-family: "Pretendard";
	margin-bottom: 2.4rem;
}

.account-safety-section {
	margin-top: 4rem;
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 0;
}

.account-safety-section h3 {
	font-size: var(--font-size-medium);
	font-weight: 500;
	color: var(--gray120);
	margin-bottom: 1.5rem;
	font-family: "Pretendard";
}

.safety-links {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.safety-links a {
	text-decoration: none;
	font-size: var(--font-size-medium);
	color: var(--gray120);
	font-weight: 500;
	font-family: "Pretendard";
	padding: 0;
	border-radius: 0;
	transition: none;
	border: none;
	cursor: pointer;
}

.safety-links a:hover {
	background-color: transparent;
	color: var(--gray120);
	border: none;
}

.safety-links a[href*="report-adverse-event"] {
	background-color: transparent;
	color: var(--gray120);
	font-weight: 500;
}

.safety-links a[href*="report-adverse-event"]:hover {
	background-color: transparent;
	color: var(--gray120);
	border: none;
}

@media only screen and (max-width: 1600px) {
	.sidebar-wrapper {
		padding: 7rem;
	}
}
/* Small laptops and tablets landscape (up to 1200px) */
@media only screen and (max-width: 1200px) {
	.sidebar-wrapper {
		padding: 4rem;
	}
}

/* Tablets portrait (up to 992px) */
@media only screen and (max-width: 992px) {
	.sidebar-wrapper {
		padding: 3rem;
	}

	.sidebar__menu {
		font-size: 1.4rem;
	}
	
	.account-safety-section {
		margin-top: 3rem;
		padding: 0;
	}
	
	.account-safety-section h3 {
		font-size: 1.4rem;
	}
	
	.safety-links a {
		font-size: 1.4rem;
		padding: 0;
	}
}

/* Large smartphones and small tablets (up to 768px) */
@media only screen and (max-width: 768px) {
	.sidebar-wrapper {
		position: fixed;
		left: 0;
		top: 0;
		transform: translateX(-200%); /* Hide it to the left */
		z-index: 1000;
	}

	.sidebar-wrapper.active {
		transform: translateX(0); /* Slide in */
	}
	
	.account-safety-section {
		margin-top: 2rem;
		padding: 0;
	}
	
	.account-safety-section h3 {
		font-size: 1.4rem;
		margin-bottom: 1rem;
	}
	
	.safety-links a {
		font-size: 1.4rem;
		padding: 0;
	}
}

/* function toggleSidebar() {
  const sidebar = document.getElementById("sidebar");
  sidebar.classList.toggle("active");
} */