.sidenav {
	/* height: 100%; Full-height: remove this if you want "auto" height */
	width: 0px; /* Set the width of the sidebar */
	position: sticky; /* Fixed Sidebar (stay in place on scroll) */
	z-index: 0; /* Stay on top */
	top: 100px; /* Stay at the top */
	left: 5px;
	/* bottom: calc(100vh - 5px); */
	border-right: 1px solid #ddd;
	background-color: white;
	overflow-x: hidden; /* Disable horizontal scroll */
	padding-top: 1rem;
	transition: 0.4s ease-in-out;; /* 0.5 second transition effect to slide in the sidenav */
	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
	overflow-y: auto;
	max-height: calc(100vh - 100px - 5px);
}

/* Inside container */
.sidenav .container {
	padding: 0 32px;
}
.sidenav .open {
	width: 220px;
}

.sidenav.transition {
	 transition: width 0.4s ease-in-out;
}

/* The navigation menu links */
.sidenav a {
	font-family: "Roboto", sans-serif;
	padding: 12px 8px;
	text-decoration: none;
	font-size: 25px;
	color: #0c2753;
	display: block;
	transition: 0.3s;
	border-left: 3px solid transparent;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
	border-left: 3px solid #78291c;
	padding-left: 12px;
	color: #78291c;
}

/* Section header */
.sidenav p {
	color: #999;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
	border-bottom: 1px solid #444;
	padding-bottom: 6px;
}

.sidenav.open ~ .main {
	margin-left: 160px;
}

body.sidenav-open .main {
  margin-left: 260px;
}
@media (max-width: 430px) {
  .sidenav {
      width: 0;
      position: fixed;
      z-index: 9999;
  }
  body.sidenav-open .sidenav {
      width: 260px;
  }
  body.sidenav-open .main {
      margin-left: 0;
  }
}