/* The sidebar menu */
.sidenav {
	height: 100%; /* Full-height: remove this if you want "auto" height */
	width: 220px; /* Set the width of the sidebar */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 1; /* Stay on top */
	top: 0; /* Stay at the top */
	left: 0;
	background-color: #222; /* Black */
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
	padding-top: 		6px;
	padding-right: 		8px;
	padding-bottom:		6px;
	padding-left:  		16px;

	text-decoration: 	none;
	font-variant: small-caps;
	font-family: "Cambria", sans-serif;
	font-size: 21px;
	color: #aaa;
	display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	color: #f1f1f1;
}

/* Style page content */
.main {
	margin-left: 220px; /* Same as the width of the sidebar */
	padding: 0px 10px;

	margin-right: 240px; /* Same as the width of the RIGHT sidebar */
	padding-bottom: 150px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
} 


.sidenav-right {
	height: 100%; /* Full-height: remove this if you want "auto" height */
	width: 220px; /* Set the width of the sidebar */
	position: fixed; /* Fixed Sidebar (stay in place on scroll) */

	right: 0;

	background-color: #222; /* Black */
	overflow: hidden; /* Disable horizontal scroll */
	padding-top: 20px;
	padding-right: 15px;
	padding-left: 5px;
}



.sidenav-right p {
	font-family: 	"Cambria", sans-serif;
	font-size: 		12pt;
	color: 			#bababa;
	text-align: 	left;
}

.sidenav-right select {
	font-family: 	"Cambria", sans-serif;
	font-size: 		10pt;

	color: 				#000;
	background-color: 	#bababa;
	border-width: 		0px;
}

.sidenav-right input {
	font-family: 	"Cambria", sans-serif;
	font-size: 		10pt;

	color: 				#000;
	background-color: 	#bababa;
	border-width: 		0px;
	width: 				30px;
}

.sidenav-right table {
	font-family: 	"Cambria", sans-serif;
	font-size: 		9pt;
	color: 			#bababa;
	text-align: 	left;
	padding-left: 	25px;
}


.sidenav-right th {
	padding-right: 	5px;
	font-weight: 	bold;
}




.sidenav-btn {
	position: fixed; 

	z-index: 1; /* Stay on top */
	top: 30%;
	right: 240px;

	cursor: pointer;
}
.sidenav-hide-btn {
	right: 20px;
}
.sidenav-hide {
	width: 0;
}
.sidenav-hide-main {
	margin-right: 10px;
}






/* Go to top */
body {
	display: 				grid;
	grid-template-columns: 	auto 0px; 
}

#gototop {
	--offset: 50px; 

	position: 		sticky;
	bottom: 		20px;
	margin-right: 	300px; 
	place-self: 	end;
	margin-top: 	calc(100vh + var(--offset));

	/* visual styling */
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 	4px;
	color: 			#111111;
	background: 	#cdcdcd;
	/*padding: 		4px 5px 4px 5px;*/
	text-decoration: none;

	font-variant: 	small-caps;
	font-family: 	"Cambria", sans-serif;
	font-size: 		1.2em;
	font-weight: 	normal;

	padding: 		10px;
	white-space: 	nowrap;
	z-index: 		2; /* Stay on top */

	box-shadow: 	0px 10px 8px 3px rgba(20,20,20,0.4);
}


#gototop:hover {
	color: 			#cdcdcd;
	background: 	#111111;
}



@media only screen and (max-width: 980px) {
	.sidenav-btn {
		display: none;
	}
	.sidenav-right {
		width: 			0;
		padding-right: 	0;
		padding-left: 	0;
	}

	.main{
		margin-right: 10px;
		margin-left: 150px;
	}

	#gototop {
		margin-right: 50px;
	}

	.sidenav {
		width: 150px;
	}
	.sidenav a {
		font-size: 		20px;

		padding-top: 	6px;
		padding-right: 	3px;
		padding-bottom:	6px;
		padding-left:  	4px;
	}
}



@media only screen and (max-width: 540px) {
	.sidenav-btn {
		display: none;
	}
	.sidenav-right {
		width: 			0;
		padding-right: 	0;
		padding-left: 	0;
	}

	.main{
		margin-right: 10px;
		margin-left: 65px;
	}

	#gototop {
		margin-right: 50px;
	}

	.sidenav {
		width: 65px;
	}
	.sidenav a {
		font-size: 		9pt;

		padding-top: 	6px;
		padding-right: 	3px;
		padding-bottom:	6px;
		padding-left:  	0;
	}
}