ul.nav {
	position: fixed;
	list-style-type: none;
  padding-left: 0;
	margin: 0;
	opacity: 0;
	height: calc(100vh - 44px);
	width: 180px;
	background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffffff), color-stop(1, #b6c6df));
	border-right: 1px solid #3e71bf;
	box-shadow: 0px 10px 16px -12px #00000070;
	z-index: 100;
}
ul.nav.show {
	opacity: 1;
}
ul.nav li {
	border-bottom: 1px solid #24467960;
	height: 37px;
}
ul.nav li a {
	display: block;
	padding: 10px 12px 9px 12px;
	color: #112c54;
	font-weight: bold;
	font-size: 11pt;
	text-decoration: none;
	background-color: transparent;
	transition: background-color 0.3s;
}
ul.nav li a.active {
	background-color: #ffffff80;
}

ul.nav li.super_admin,
ul.nav li.manager {
	display: none;
}
ul.nav.role-super_admin li.super_admin,
ul.nav.role-manager li.manager {
	display: block;
}


main {
	position: relative;
	left: 200px;
	width: calc(100% - 212px);
	height: calc(100vh - 74px);
}

main>section {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 16px 6px 6px 6px;
	opacity: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	transition: opacity 0.25s;
}

/* =============== */

ul.nav li h3 {
	margin: 0;
	padding: 10px 12px 9px 12px;
	font-size: 12pt;
	background-color: #244679;
	color: #e0f0fe;
}

ul.nav li ul {
	padding-left: 0;
}

ul.nav li ul li{
	list-style-type: none;
	white-space: nowrap;
}