/* The open button structure */
.offcanvas-menu > label {
	content: "";
	position: fixed;
	top: 50%;
	left: 0;
	cursor: pointer;
	transition: 0.3s ease;
	display: flex;
	align-items: center;
	z-index: 10;
	transform: rotate(-90deg);
}

/* The button label */
.offcanvas-menu label span,
.offcanvas-menu label span::before,
.offcanvas-menu label span::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 0;
	background-color: #c55420;
	padding: 3px 8px;
	border-radius: 0 0 6px 6px;
	color: #ffffff;
	font-weight: 300;
	font-size: 1em;
	white-space: nowrap;
}

/* The menu background */
.offcanvas-menu nav {
	position: fixed;
	top: 25vh;
	height: 75vh;
	width: 300px;
	left: -300px;
	overflow: auto;
	background: #fdf5e0;
	transition: 0.3s ease;
	padding: 12px 12px 12px 65px;
	border: thin solid #c55420;
	border-radius: 0 12px 12px 0;
	z-index: 5;
}

/* The close button structure */
.offcanvas-menu nav > div label {
	position: fixed;
	top: 50%;
	left: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.3s ease;
	transform: rotate(-90deg);
	background-color: #c55420;
}

/* The list of links */
.offcanvas-menu nav > ul {
	padding-left: 0 !important;
}
#toc li.nav-item {
	list-style-type: none !important;
}

/* The list items */
.offcanvas-menu nav > ul li {
	cursor: pointer;
	line-height: normal;
	padding-left: 0 !important;
    padding-bottom: 0 !important;
	margin-top: 1em;
    background-image: none !important;
}

/* Functionality of the trigger */
.offcanvas-menu input[type=checkbox] {display: none;}
.offcanvas-menu input[type=checkbox]:checked ~ label {opacity: 0; pointer-events: none;}
.offcanvas-menu input[type=checkbox]:checked ~ nav {left: 0;}
.offcanvas-menu input[type=checkbox]:checked ~ nav label span:before,
.offcanvas-menu input[type=checkbox]:checked ~ nav label span:after {transition-delay: 0.2s;}


/* Media query */
@media (max-width: 1680px) {
	.offcanvas-menu > label {
		position: fixed;
		top: 65%;
	}
	.offcanvas-menu nav {
		top: 25vh;
		height: 75vh;
		width: 224px;
		left: -224px;
		padding: 12px 12px 12px 36px;
	}
	.offcanvas-menu nav > div label {
		position: fixed;
		top: 65%;
	}
	.offcanvas-menu label span,
	.offcanvas-menu label span::before,
	.offcanvas-menu label span::after {
		font-size: 0.85em;
		padding: 4 8px;
		line-height: normal;
	}
}

@media (max-width: 1199px) {
	.offcanvas-menu > label {
		position: fixed;
		top: 90%;
	}
	.offcanvas-menu nav {
		top: 25vh;
		height: 75vh;
		width: 100%;
		left: -100%;
		padding: 12px 18px 12px 36px;
	}
	.offcanvas-menu nav > div label {
		position: fixed;
		top: 90%;
	}
	.offcanvas-menu label span,
	.offcanvas-menu label span::before,
	.offcanvas-menu label span::after {
		font-size: 0.85em;
		padding: 0 8px;
		line-height: normal;
	}
}