/********************************************************************
	
   SIDEBAR

*********************************************************************/

#SidebarToggle {
	position: absolute;
	display: none;
	top: 0;
	right: 0;
	box-shadow: none;
	border-radius: 0;
	z-index: 99;
	left: unset;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
	/* AI: The button's markup is the words "View Sidebar" followed by the
	   hamburger image. Nothing hid the words, so at mobile width they
	   rendered beside the icon and ran off the right edge of the screen.
	   The button already carries aria-label="View Sidebar", so the visible
	   copy is redundant; zeroing the font size hides it without taking it
	   away from a screen reader, and does not touch the image. */
	font-size: 0;
}

	#SidebarToggle img {
		width: 48px;
		height: 48px;
		top: 0;
		right: 0;
		left: unset;
		}
	
@media only screen and (max-width: 1024px) {
	#SidebarToggle {
		display: block;
	}
}

#Sidebar
	{
 	display: block;
 	flex-direction: column;
	border-radius: var(--DefaultBorderRadius);
 	box-shadow: var(--DefaultBoxShadow);
	background-color: var(--clr_Sidebar_Background);
	padding: 10px;
	margin: 0 12pt 12pt 0;
	width: 200px;
	min-width: 200px;
	max-width: 200px;
	text-align: center;
	}

@media only screen and (max-width: 1024px)
	{
	#Sidebar { display: none; }
	#Sidebar.mobile-open {
		display: block !important;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		height: 100vh;
		z-index: 200;
		overflow-y: auto;
		border-radius: 0;
		margin: 0;
		padding: 20px;
		box-sizing: border-box;
	}
	}

#Sidebar h3,
#Sidebar h4 {
	font-family: var(--fnt_Sidebar_Heading);
	color: var(--clr_Sidebar_Heading);
}

#Sidebar h5,
#Sidebar h6 {
	font-family: var(--fnt_Sidebar_Text);
	color: var(--clr_Sidebar_Heading);
	font-weight: bold;
}

#Sidebar p {
	font-family: var(--fnt_Sidebar_Text);
	color: var(--clr_Sidebar_Text);
	margin: 0 auto 10px auto;
	width: 75%;
	text-align: center;
	font-size: 75%;
	font-family: var(--fnt_Sidebar_Text);
	color: var(--clr_Sidebar_Text);
}

#Sidebar a {
	font-family: var(--fnt_Sidebar_Link);
	color: var(--clr_Sidebar_Link);
}

	#Sidebar a:visited, #Sidebar a:hover, #Sidebar a:active {
		font-family: var(--fnt_Sidebar_Link);
		color: var(--clr_Sidebar_Link);
	}

#Sidebar nav 
	{
 	display: block;
	margin-right: auto;
	margin-left: auto;
	width: 90%;
	}

a.Gateway
	{
	display: block;
	padding: 2px;
	width: 10em;
	font-size: 9pt;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	font-family: var(--fnt_Nav_Link);
	color: var(--clr_Sidebar_Button_Link) !important;
	background-color: var(--clr_Sidebar_Button);
	box-shadow: 4px 4px 6px black;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 6px;
	}

	a.Gateway:hover 
		{
		box-shadow: 1px 1px 6px black;
		transform: translate(3px, 3px);
		}

#Sidebar div.ScrollingList
	{
	height: auto;
	max-height: 250px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	}
	
#Sidebar :not(nav) a 
	{ 
	color: var(--clr_Sidebar_Link);
	font-size: 75%;
	line-height: 1;
	}

#Sidebar img {
	margin-top: 12pt;
	filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.8));
}