html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	font: 12px Arial, Helvetica, sans-serif;
}

#map {
	position: absolute;
	height: 800px;
	width: 100%;
}

a:link {
	color: #909090;
}

a.selected:link {
	color: #101010;
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
.resetzoom {
	cursor: pointer;
	cursor: default;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
}

.tbtoolTip {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
	border-radius: 4px;
	padding: 5px;
	background: rgba(33, 33, 33, 7);
	color: #fff;
	/* background-color: #FFFF66; */
	display: inline-block;
	box-sizing: border-box;
	letter-spacing: normal;
	font-family: Verdana, Helvetica, Arial, 'sans-serif';
	font-size: 12px;
	/* font-variant: small-caps; */
	position: absolute;
	pointer-events: none;
	white-space: nowrap;
	text-align: left;
}

.header img {
	position: absolute;
	/* float: right;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px; */
	width: 80px;
	height: 80px;
	border: 2px solid #fff;
	-moz-box-shadow: 0px 6px 5px #ccc;
	-webkit-box-shadow: 0px 6px 5px #ccc;
	box-shadow: 0px 6px 5px #ccc;
	-moz-border-radius: 80px;
	-webkit-border-radius: 80px;
	border-radius: 80px;
	right: 10px;
	z-index: 1000;

}

.header {
	/* background-color: antiquewhite; */
	padding: 1px;
	/* margin-top: 5px; */
	margin-bottom: 1px;
	/* font-size: 18px; */
	background: linear-gradient(135deg, #F9BA32 0%, #A1D6E2 50%, #1995AD 100%);
	font: 12px Arial, Helvetica, sans-serif;
	font-size: 1.2VW;
	color: #002c54;
	font-weight: 100;
}

:root {
	--color1: red; /* Max */
	--color2: blue; /* Avg */
	--color3: green; /* Min */
}

.grid line {
    stroke: lightgrey;
    stroke-opacity: 0.5;
    shape-rendering: crispEdges;
}

.grid path {
    stroke-width: 0;
}

.line1 {
	fill: none;
	stroke: var(--color1);
	stroke-width: 1;
	stroke-opacity : 0.5;
	stroke-dasharray: 5, 5;
	clip-path: url(#clip);
}

.line2 {
	fill: none;
	stroke: var(--color2);
	stroke-width: 1;
	stroke-opacity : 0.5;
	clip-path: url(#clip);
}

.line3 {
	fill: none;
	stroke: var(--color3);
	stroke-width: 1;
	stroke-opacity : 0.5;
	stroke-dasharray: 5, 5;
	clip-path: url(#clip);
}

.point1 {
	fill: var(--color1);
	stroke: var(--color1);
	stroke-width: 3;
}

.point2 {
	fill: var(--color2);
	stroke: var(--color2);
	stroke-width: 1;
}

.point3 {
	fill: var(--color3);
	stroke: var(--color3);
	stroke-width: 3;
}

.axisX {
	font-size: 5pt;
	color: #000;
}

#divtool {
	position: absolute;
	z-index: 1500;
}

@media screen and (max-width: 1200px) {
	.header img {
		width: 70px;
		height: 70px;
	}
}

@media screen and (max-width: 1000px) {
	.header img {
		width: 60px;
		height: 60px;
	}
}

@media screen and (max-width: 800px) {
	.header img {
		width: 50px;
		height: 50px;
	}
}

@media screen and (max-width: 600px) {
	.header img {
		width: 40px;
		height: 40px;
	}
}

@media screen and (max-width: 400px) {
	.header img {
		width: 20px;
		height: 20px;
	}
}

@media screen and (max-width: 200px) {
	.header img {
		width: 10px;
		height: 10px;
	}
}