.offcanvas {
	display: none;
	box-shadow: -8px 10px 8px 0 #888888;
}

.customhamburger, .moduletable.hamburger {
	display: none;
}

@media screen and (max-width: 1000px) {
	#nav {
		.customhamburger, .moduletable.hamburger {
			display: block;
			z-index: 99;
			height: 60px;
			margin-right: -190px;
		}
	}

	body #main {
		margin-top: -100px;
	}

	.offcanvas {
		background-color: #fcefec;
		top: 70px;
		right: 0;
		width: 30%;
		z-index: 99;
		flex: 1 0;
		position: fixed;
		margin: 0;

		ul.nav {
			display: flex;
			width: 100%;
			flex-direction: column;
			text-align: left;
			padding-inline-start: 10px;
			max-height: 80vh;
			overflow-y: scroll;
			text-transform: capitalize;
			list-style: none;

			li {
				padding: 10px;

				a {
					color: black;
					text-decoration: none;
				}
			}

			li:first-child {
				padding-top: 0;
			}

			li:last-child {
				padding-bottom: 0;
				border-bottom: none;
			}

			li.parent {
				& > a {
					border-bottom: 1px dashed white;
				}

				ul {
					display: block;
					padding-inline-start: 10px;
					list-style-type: none;
					margin-top: 10px;

					li {
						padding: 10px;
					}
				}
			}

			.active {
				border-left: #b795a6 solid 3px;
				font-weight: bolder;
			}
		}
		.customhamburger, .moduletable.hamburger {
			display: none;
		}
	}
	.offcanvas.open {
		display: block;
	}
}

@media screen and (max-width: 820px) {
	#nav {
		.customhamburger, .moduletable.hamburger {
			margin-right: -20px;
		}
	}

	.offcanvas {
		width: 48%;
	}
}
