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

#map {
	height: 100%;
}

body {
	display: grid;
	grid-template-rows: 80px 1fr 50px;
	grid-template-columns: 300px 1fr;
	grid-template-areas: 
	"header header"
	"sidebar content"
	/*"content content"*/
	"footer footer";
}

.header {
	grid-area: header;
	padding:10px;
	background-color: #100f0f;
	color: rgb(246, 246, 246);
	font-family: "Arial", Arial, serif;
	font-size: 1.5em;
	text-align: center;
}

.content {
	grid-area: content;
	padding: 10px;
	background: rgb(81, 81, 81); /* background color */
    border: 0.5px solid rgb(82, 79, 79); /* border width, style, and color */
	font-family: "Arial", Arial, serif;
    margin: 0px; /* outer padding */
}

.footer {
	grid-area: footer;
	padding:3px;
	background-color: rgb(175, 175, 175);
	font-size: 0.75em;
}
.sidebar-item {
    padding: 2px; /* adds inner padding */
    background: rgb(223, 221, 221); /* background color */
    border: 0.5	px solid rgb(59, 59, 59); /* border width, style, and color */
	font-family: "Arial", Arial, serif;
    margin: 2px; /* outer padding */
}
.sidebar {
  position: absolute;
  top: 100px;
  left: 10px;
  width: 250px;
  background: rgb(224, 222, 222);
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.2);
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-item {
  flex: 1;
  overflow-y: auto;
}

.sidebar-static-image {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
}