body {
	overflow-x: hidden
}

#whole-flex {
	position: absolute;
	flex-direction: column;
	text-align: center;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -10
}

.sidenav {
	max-width: 380px;
	width: 80%;
	overflow-x: hidden;
	overflow-y: hidden;
	height: 100%;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	background-color: #fff;
	transform-origin: left center;
	transform: translateX(-380px)
}

.sidenavHeader {
	color: #fff;
	font-weight: 700;
	background-color: #232f3e;
	padding: 10px 0 10px 30px;
	font-size: 23px
}

.sidenavContentHeader {
	margin-top: 5px;
	padding: 15px 0 15px 25px;
	font-size: 20px;
	font-weight: 700
}

.sidenavContent {
	padding: 15px 0 15px 25px
}

.sidenavContent:hover {
	background-color: #eaeded
}

hr {
	height: 1px;
	border: 0;
	color: gray;
	background-color: gray;
	margin: 15px auto 10px auto
}

.sidenavRow {
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding: 15px 25px 15px 25px
}

.sidenavRow:hover {
	background-color: #eaeded
}

.sidenavRow:hover i {
	color: #111111 !important
}

#closeBtn {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 390px;
	color: #fff;
	font-size: 50px;
	cursor: pointer;
	z-index: 75;
	transform: translateY(-5px);
	transition: visibility 0.5s
}

a,
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	color: #000
}

@keyframes collapse {
	0% {
		z-index: 100;
		transform: translateX(0)
	}

	100% {
		transform: translateX(-380px)
	}
}

@keyframes expand {
	0% {
		z-index: 100;
		transform: translateX(-380px)
	}

	100% {
		transform: translateX(0)
	}
}

@keyframes show {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes hide {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50;
	background-color: rgb(0 0 0 / .7)
}

.sidenavContainer hr {
	width: 85%
}

.sidenavRowDropdown {
	display: flex;
	width: 100%;
	justify-content: start;
	align-items: center;
	padding: 15px 25px 15px 25px;
	cursor: pointer
}

.sidenavRowDropdown:hover {
	background-color: #eaeded
}

.sidenavRowDropdown:hover i {
	color: #111111 !important
}

.sidenavContainer {
	display: none;
	height: 0;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: center top
}

@keyframes expandDropDown {
	0% {
		transform: scaleY(0);
		opacity: 0
	}

	100% {
		transform: scaleY(1);
		opacity: 1
	}
}

@keyframes collapseDropDown {
	0% {
		transform: scaleY(1);
		opacity: 1
	}

	100% {
		transform: scaleY(0);
		opacity: 0
	}
}

#main-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: scroll
}

@keyframes mainAway {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(-380px)
	}
}

@keyframes mainBack {
	0% {
		transform: translateX(-380px)
	}

	100% {
		transform: translateX(0)
	}
}

#sub-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	background-color: #fff;
	transform: translateX(380px)
}

@keyframes subBack {
	0% {
		transform: translateX(380px)
	}

	100% {
		transform: translateX(0)
	}
}

@keyframes subPush {
	0% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(380px)
	}
}

#mainMenu {
	margin-top: 5px;
	padding: 15px 0 15px 25px;
	font-weight: 700
}

#mainMenu:hover {
	background-color: #eaeded;
	cursor: pointer
}