@font-face {
    font-family: "metricLight";
    src: 
    	url("../fonts/MetricWeb-Light.woff2") format('woff2'),
    	url("../fonts/MetricWeb-Light.woff") format('woff'),
    	url('../fonts/MetricWeb-Light.ttf') format('truetype');

}

@font-face {
    font-family: "metric";
    src: 
    	url("../fonts/MetricWeb-Regular.woff2") format('woff2'),
      	url("../fonts/MetricWeb-Regular.woff") format('woff'),
  		url('../fonts/MetricWeb-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "metricMedium";
    src: 
    	url("../fonts/MetricWeb-Medium.woff2") format('woff2'),
    	url("../fonts/MetricWeb-Medium.woff") format('woff'),
    	url('../fonts/MetricWeb-Medium.ttf') format('truetype');
}

@font-face {
    font-family: "metricSemiBold";
    src: 
    	url("../fonts/MetricWeb-Semibold.woff2") format('woff2'),
    	url("../fonts/MetricWeb-Semibold.woff") format('woff'),
    	url('../fonts/MetricWeb-Semibold.ttf') format('truetype');
}


#tooltip { pointer-events: none; color: rgb(90,90,90); position: absolute; left: 0; top: 0; z-index: 10; font-size: 14px; line-height: 16px; font-weight: 400; height: auto; padding: 15px; background-color: rgb(255,255,255); border: solid 1px #b3b3b3; box-shadow: 5px 5px 5px rgba(0,0,0,.2); opacity: 0; }
#tooltip .marker { display: inline-block; width: 6px; height: 6px; border: solid 3px red; border-radius: 6px; margin: 2px 2px 0 0; }

#tooltip #m_s1 { border-color: #0093b2; }
#tooltip #m_s2 { border-color: #582c83; }
#tooltip #m_s3 { border-color: #7a9a01; }

#tooltip #m_sl1 { border-color: #7a9a01; }
#tooltip #m_sl2 { border-color: #582c83; }
#tooltip #m_sl3 { border-color: #0093b2; }


.tooltipLeft:after, .tooltipLeft:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.tooltipLeft:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 10px;
	margin-top: -10px;
}
.tooltipLeft:before {
	border-color: rgba(179, 179, 179, 0);
	border-right-color: #b3b3b3;
	border-width: 11px;
	margin-top: -11px;
}

.tooltipRight:after, .tooltipRight:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.tooltipRight:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 10px;
	margin-top: -10px;
}
.tooltipRight:before {
	border-color: rgba(179, 179, 179, 0);
	border-left-color: #b3b3b3;
	border-width: 11px;
	margin-top: -11px;
}


#tooltip h2 { font-size: 21px; line-height: 21px; font-family: 'metricMedium', sans-serif; margin: 0; padding: 0; color: rgb(0,0,0); }
#tooltip table tr td { padding: 5px 0 0 0; }
#tooltip table tr td:last-child { text-align: right; font-family: 'metricMedium', sans-serif; color: rgb(0,0,0); padding: 5px 0 0 15px;}


svg { width: 100%; 
	/*height: auto;*/ 
	font-family: 'metric', sans-serif;  
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
}

#svgMap {  
	display: block;
	position: relative;
	width: 100%;
	padding-bottom: 63%; /* depends on svg ratio */
	overflow: hidden;
}


.line_data { fill: none; stroke-width: 3px; shape-rendering: auto;}
.s1, #c_s1 { stroke: #0093b2; }
.s2, #c_s2 { stroke: #582c83; }
.s3, #c_s3 { stroke: #7a9a01; }

.sl1, #c_sl1 { stroke: #7a9a01; }
.sl2, #c_sl2 { stroke: #582c83; }
.sl3, #c_sl3 { stroke: #0093b2; }


.x1 .tick line { stroke: rgb(210,210,210); }
.x1 path { display: none; }
.x2 text { font-size: 14px; fill: #211b26; font-family: "metric", sans-serif; }
.x2 path, .x3 path { stroke: rgb(177,177,177); }
.x2 line { stroke: rgb(177,177,177); }

.y1 text { font-size: 14px; fill: #211b26; font-family: "metric", sans-serif; }

.focus circle { stroke-width: 3px; shape-rendering: auto; fill: #ffffff; }

.focus line { fill: 'none'; stroke: rgb(179,179,179); stroke-width: 1.5px; stroke-dasharray: 1.5,3; }

.grid line {
  stroke: rgb(220,220,220);
  shape-rendering: crispEdges;
  stroke-dasharray: 1,2;
}

.gridX line {
  stroke: rgb(220,220,220);
  shape-rendering: crispEdges;
}

.gridX text { font-size: 14px; fill: #211b26; font-family: "metric", sans-serif; }

.grid path, .y1 path, .gridX path {
  stroke-width: 0;
}

.axis_label { font-size: 14px; color: #000000; }


body { /* margin: 60px; */ font-family: 'metric', sans-serif; }
.clearBoth { clear: both; }
.off { display: none; }
.fLeft { float: left; }
.fRight { float: right; }
.mobile { display: none; }
.sourced { font-family: 'metricMedium', sans-serif; }
.changeMe { transition: .2s; background-color: #ededee; color: black; font-family: 'metricMedium', sans-serif; border: none; font-size: 16px; line-height: 16px; height: 40px; border-radius: 40px; margin: 0 7px; padding: 0 18px; }
.waxOn, .changeMe:hover { background-color: #582c83; color: white; cursor: pointer; }
.waxOn:focus { outline: none; }

#wrapper { width: 100%; max-width: 1260px; position: relative; margin: 0 auto; padding-bottom: 30px; }

#mapLeft { float: left; width: 60%; transition: .3s; }
#mapRight { float: right; width: calc(40% - 60px); transition: .3s; color: rgb(33,27,38); }

#mapRight h3 { font-size: 30px; line-height: 30px; margin: 0; padding: 0 4.8% 10px 10.7%; font-family: 'metric', sans-serif; text-align: center; }
#mapRight h2 { font-size: 38px; line-height: 38px; margin: 0 0 20px 0; padding: 0 0 15px 0; font-family: 'MetricSemiBold', sans-serif; text-transform: uppercase; border-bottom: solid 1px rgb(179,179,179); text-align: center; }
#mapRight h4  { font-size: 16px; line-height: 18px; margin: 0; padding: 0 0 12px 0; font-family: 'metric', sans-serif; }
#mapRight h5 { font-size: 18px; line-height: 28px; padding: 20px 0 0 0; margin: 20px 4.8% 0 10.7%;; font-family: 'metric', sans-serif; border-top: solid 1px rgb(179,179,179); }
#mapRight h5 b { font-family: 'metricMedium', sans-serif; }
#mapRight p { font-size: 16px; line-height: 25px; color: #9d9d9d; margin: 0; padding: 0; }
.mapRightButtons { text-align: center; padding: 0 0 15px 0; }

h4.textOff { display: none; }
h4.textOn { display: block; }

#mapRightKey {  border-bottom: solid 1px rgb(179,179,179); padding: 0 0 15px 0; margin: 0 0 20px 0; }
.mapRightKeyItem { font-size: 14px; line-height: 1rem; color: #211b26; padding: 10px 0 0 0; }
.mapRightKeyItem_marker { display: inline-block; width: 30px; height: 3px; border-radius: 10px; background-color: red; vertical-align: middle; margin: -2px 4px 0 0; }

#mapRightKey #k_s1 { background-color: #0093b2; }
#mapRightKey #k_s2 { background-color: #582c83; }
#mapRightKey #k_s3 { background-color: #7a9a01; }

#fluNav { text-align: center; width: 100%; height: 30px; border-bottom: solid 1px rgb(179,179,179); padding: 10px 0; margin: 0 0 30px 0; font-family: 'metricMedium', sans-serif; font-size: 24px; line-height: 30px; color: #a2a6a9; }
#fluNav a { color: #a2a6a9; transition: .3s; text-decoration: none; }
#fluNav a:first-child { margin-right: 30px; }
#fluNav a:hover { color: rgb(30,30,30); }
.fluNavIcon { transition: .3s; display: inline-block; width: 30px; height: 30px; background-color: rgb(170,170,170); vertical-align: middle; margin: -4px 8px 0 0; background-position: center; background-repeat: no-repeat; }
#fluNavMap { background-image: url(../img/icon_map.png); }
#fluNavCom { background-image: url(../img/icon_chart.png); }
#fluNav a:hover .fluNavIcon, .navActive .fluNavIcon { background-color: #582c83; }

@media only screen and (max-width : 1260px) {

	body { /* margin: 15px; */ }
	#mapLeft { width: calc(60% - 15px); }
	#mapRight { width: calc(40% - 15px); }
	#mapRight h3 { font-size: 18px; line-height: 18px; padding-bottom: 7px; }
	#mapRight h2 { font-size: 36px; line-height: 36px; letter-spacing: -1px; }
	#mapRight h5 { font-size: 14px; line-height: 18px; }
	
	.changeMe { /* margin: 0 3px; */ }

}

@media only screen and (max-width : 1023px) {

	#mapLeft, #mapRight { float: none; display: block; width: 100%; }
	body { margin: 15px; }

	#mapRight { padding-top: 30px; }
	#mapRight h3 { font-size: 16px; line-height: 16px; }
	#mapRight h2 { font-size: 30px; line-height: 30px; }

	.mobileNo { display: none; }
	.mobile { display: block; }
	h2.mobile { border-bottom: solid 1px rgb(179,179,179); padding: 0 0 7px 0; margin: 0 0 12px 0; }

	#tooltip { font-size: 9px; line-height: 9px; padding: 7px; }
	#tooltip h2 { font-size: 12px; line-height: 14px; }
	
	.changeMe { font-size: 10px; height: 30px; line-height: 10px; margin: 0 3px; }

}

@media only screen and (max-width : 320px) {

	.changeMe { padding: 0 15px; }

}