body {
	font-family: "Lato", sans-serif;
}

/* this section is for the left side navigation menu properties*/
.sidenav {
	width: 17%;
  	height: 100%;
  	position: fixed;
  	z-index: 1;
  	top: 1px;
  	left: 5px;
  	background: #eee;
  	overflow-x: hidden;
  	padding: 8px 0;
}
.sidenav a.active{
	background-color: #04AA6D;
	color: white;
}

.sidenav a {
	padding: 6px 8px 6px 16px;
  	text-decoration: none;
  	font-size: 15px;
  	color: #2196F3;
  	display: block;
}

.sidenav a:hover:not(.active) {
	color: #064579;
}
/* side nav properties end at this line   */



.main {
	margin-left: 18%; /* Same width as the sidebar + left position in px */
  	font-size: 20px; /* Increased text to enable scrolling */
  	padding: 0px 10px;
}

.footer{
	text-align: center;
	margin-left: 18%; /* Same width as the sidebar + left position in px */
  	font-size: 20px; /* Increased text to enable scrolling */
  	padding: 0px 10px;
}

table, th, td {
	border: 1px solid black;
  	border-collapse: collapse;


@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
  	.sidenav a {font-size: 18px;}
}

@media screen and (max-width:900px) and (min-width:400px){
	body {font-size: 50%;}
	.sidenav a {
 		padding: 6px 8px 6px 16px;
  		text-decoration: none;
  		font-size: 10px;
  		color: #2196F3;
  		display: block;
	}
	.main{font-size:9px;}

}
	


@media screen and (max-width:400px){
	body{font-size: 9px;}
}




footer {
	text-align: center;
  	padding: 3px;
  	background-color: lightgray;
  	color: white;
	decoration: none;
}