/* Make 2 columns for a nice side bar */
.row {
	/* display: flex; */
	margin: 0;
	padding: 0;
}

.column-body {
	/* width: 67%; */
	/* flex: 70%; */
	margin: 0;
	padding: 0;
	min-width:240px;
	max-width:640px;

}

.column-sidebar {
	/* width: 33%; */
	/* flex: 30%; */
	min-width: 120px;
	max-width: 240px;
	margin: 0;
	padding: 0;
}


.sidenav {
	height: 100%;           /* Full-height: remove this if you want "auto" height */
	min-width: 200px;		/* 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 */
	right: 0;               /* fix it on the right side. use left for left side. */
	overflow-x: hidden;     /* Disable horizontal scroll */
	display: block;
	padding-top: 90px;
	/* padding-left: 10px; */
	padding-right: 40px;
	margin-right: 0px;
	text-align: left;
}


.buttonbox-vertical{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: start;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	margin: 2px;
	width: 200px;
	/* height: 14pt; */
}

#sidebar-button {
	width: 200px;
	min-height: 18pt;
	height: auto;
	/* color: #001a1a; */
	color: #009999;
	background-color: #004d4d;
	border: solid 2px #004d4d;
	margin-bottom: 4px;
}

#sidebar-button:hover {
	/* color: #001a1a; */
	/* background-color: #008080; */
	color: #001a1a;
	background-color: #009999;
	border: solid 2px #009999;
}



.toc_title {
	font-size: 16pt;
	width: 200px;
	text-align: center;
	font-weight: bold;
}



/* Max width: max-width body + 2*sidebar (same width on left and right side) */
@media all and (max-width: 1120px) {
	.row {
		/* display: flex; */
	}

	.column-body {
		/* float: left; */
		/* width: 67%; */
		/* flex: 100%; */
	}

	.column-sidebar {
		/* float: left; */
		/* width: 33%; */
		/* flex: 0%; */
		display: none; /* make it disappearing */
	}