html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: automatic;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

#pac-input {
   height: 3%;
   width: 98%;
   display: flex;
	}

#container {
  height: 95%;
  width: 98%;
  display: flex;
}

	#left {
  	flex-basis: 35rem;
  	flex-grow: 1;
  	height: 100%;
 	width: 65%;
	border-style: outset;	
  	}

		#map {
 		 flex-basis: 0;
 		 flex-grow: 1;
	     height: 75%;
  		 width: 100%;
	  	 border-style: outset;	
  		}

		#line_top_x {
 		 flex-basis: 0;
 		 flex-grow: 4;
 		 height: 25%;
  	 	 width: 100%;
	   	 border-style: outset;	
  		}

	#right {
 	 flex-basis: 35rem;
 	 height: 100%;
 	 width: 35%;
	 border-style: inset;	
	}

		#sidebar {
 		 flex-basis: 35rem;
 		 flex-grow: 1;
 		 width: 100%; 
 		 height: 100%;
 		 overflow: auto;
		}
		
		#zoom_map {
 		 flex-basis: 0;
  		flex-grow: 1;
 		 width: 100%;
  		 height: 50%;
 		}



#scatters_row1 {
  height: 100%;
   width: 99%;
 display: flex;
 
}

		#scatter1 {
 		 flex-basis: 0;
 		 flex-grow: 1;
	     height: 100%;
  		 width: 33%;
	  	 border-style: outset;	
  		}

		#scatter2 {
 		 flex-basis: 0;
 		 flex-grow: 1;
	     height: 100%;
  		 width: 33%;
	  	 border-style: outset;	
  		}

        #scatter3 {
 		 flex-basis: 0;
 		 flex-grow: 1;
	     height: 100%;
  		 width: 33%;
	  	 border-style: outset;	
  		}