/********************************************************************
	
   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;
}

	#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));
}