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

body {
	padding: 0;
	margin: 0;
}

.centered {
	text-align: center;
}

/* Leaflet Map */
#map-container {
	height: 100%;
	width: 100%
}

#ca-map {
	position: absolute;
	height: 100%!important;
	width: 100%;
}

.mvc-marker-text {
	position: relative;
	display: block;
	text-align: center;
}

.mvc-marker-display {
	height: 60px;
	width: 50px;
	border: 1px solid blue;
	position: relative;
	display: block;
	margin: 0 auto;
	background-color: white;
}

.mvc-targets,
.mvc-levels {
	height: 100%;
	display: inline-block;
}

.mvc-targets {
	width: 100%;
	position: absolute;
}

.mvc-targets .blank1 {
	height: calc(30% - 2.5px);
}

.mvc-targets .blank2 {
	height: calc(25% - 5px);
}

.mvc-targets .marker {
	width: 100%;
	height: 5px;
	background-color: blue;
}

.mvc-levels {
	width: 100%;
}

.mvc-levels div {
	width: 100%;
}

.mvc-levels .blank {
	height: calc(40%);
}

.mvc-targets .target-hi,
.mvc-targets .target-lo {
	border-bottom: 2px solid red;
}

.mvc-targets .hist-avg {
	border-bottom: 2px solid yellowgreen;
}

.mvc-levels .level {
	background-color: cadetblue;
}

.mvc-level-label {
	font-weight: bold;
}