@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@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');
}

.material_icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

body { /* margin: 60px; */ font-family: "metric", sans-serif; padding-bottom: 30px; }
.clearBoth { clear: both; }
.off { display: none; }
.fLeft { float: left; }
.fRight { float: right; }
.mobile { display: none; }
.sourced { font-family: 'metricMedium', sans-serif; }


#wrapper { /*position: relative; margin: 0 auto; width: auto; max-width: 1300px;*/ }
#wrapper { width: 100%; max-width: 1260px; position: relative; margin: 0 auto; }


#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: 24px; line-height: 24px; margin: 0; padding: 0 4.8% 10px 0; font-family: "metric", sans-serif; text-align: center; }
#mapRight h2 { font-size: 42px; line-height: 42px; margin: 0 4.8% 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: 16px; line-height: 26px; padding: 20px 0 0 0; margin: 20px 4.8% 0 0; 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: 20px 4.8% 0 0; padding: 20px 0 0 0; border-top: solid 1px rgb(179,179,179); }


.mapRightInfo { font-size: 12px; line-height: 12px; padding: 0 4.8% 8px 0; }
.mapRightNumbers { font-family: 'metricMedium', sans-serif; font-size: 24px; line-height: 24px; padding: 0 4.8% 20px 0; letter-spacing: -.5px; }

#mapRightControls { margin: 0 4.8% 0 0; padding: 20px 0 5px 0; display: table; /* width: calc(100% - 15.5%); */ width: 100%; }
#mapRightControlsKey { border-right: dotted 1px rgb(179,179,179); width: calc(100% - 104px); padding: 0 20px 0 0; display: table-cell; vertical-align: top; }
#mapRightControlsKeyArea { position: relative; padding: 0 0 20px 0;}
#mapRightControlsKeyBox { border: solid 1px rgb(128,128,128); height: 10px; position: relative; }
.keyBloc { width: calc(12.5% - 1px); float: left; height: 10px; border-right: solid 1px rgb(220,220,220); }
/*.keyBloc:last-child { width: 12.5%; border-right: none; }*/

.keyEnd { width: 1px; height: 15px; background-color: rgb(128,128,128); position: absolute; top: 0; }
#keyEnd-left { left: 0; }
#keyEnd-mid { left: calc(50% - 1px); }
#keyEnd-right { right: 0; }
.keyText { font-size: 8px; position: absolute; top: 18px; }
#keyText-left { left: 0; }
#keyText-mid { left: 20%; width: 60%; text-align: center; }
#keyText-right { right: 0; text-align: right; }



#mapRightControlsAuto { width: 63px; height: 100%; padding-left: 20px; display: table-cell; vertical-align: middle; }
#mapRightControlsAuto .material_icons { display: inline-block; margin: 0; line-height: 30px; font-size: 30px; margin: 0 -3px; }
.mapRightControlsHolder { color: #582c83; }

#mapRightContolsOther { font-size: 10px; line-height: 10px; padding: 5px 0 0 0; }
#mapRightContolsOther span { display: inline-block; width: 13px; height: 13px; border: solid 1px rgb(90,90,90); vertical-align: middle; margin: 0 5px 0 0; background-image: url(../img/quantSuff.png); background-position: center; background-size: cover; }

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

}



.stateOutline { stroke: #211b26; }
.stateOn { stroke: red; }
.usOutline{ stroke: #211b26; stroke-width: 1.2px; fill: transparent; pointer-events: none; }

.ticksLine { stroke-width: .5px; stroke: rgb(204,204,204); }
.tickPoint { transition: .3s; fill: rgb(170,170,170); }
.tickRect { stroke: rgb(200,200,200); stroke-width: 1px; transition: .3s; cursor: pointer; }
/* .tickRectOn, .tickRect:hover { stroke: rgb(133,51,185); } */
/* .tickRectOn, .tickRect:hover { stroke: red; } */
.tickRectOn { stroke: #582c83; }
.tickRectAct { stroke: #582c83; }

#markerBall, #markerEnd { /*transition: .3s;*/ fill: #582c83; }
#markerBall { cursor: pointer; }
#markerLine { transition: .3s; stroke: rgb(204,204,204); opacity: 1; stroke-dasharray: 1,1;}
.markerLineOff { opacity: 0 !important; }
#markerBallInset { pointer-events: none; fill: rgb(255,255,255); }

#markerBall:hover { transition: .3s; fill: rgb(255,255,255); stroke: #582c83; stroke-width: 1.5px; }
#markerBall:hover + #markerBallInset { transition: .3s; fill: #582c83; }

.tick { font-size: 8px; stroke-width: .5px; font-family: "metric", sans-serif; }
.domain { stroke-width: .5px; }

#stripey rect { stroke: none; fill: rgb(245,245,245); }
#stripey path { stroke: rgb(200,200,200); stroke-width: 1.5px; }

#playOff { display: none; }

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

#svgBar {
	display: block;
 	position: relative;
 	width: 100%;
 	padding-bottom: 31%;  
}

#tooltip { pointer-events: none; color: rgb(90,90,90); position: absolute; left: 0; top: 0; z-index: 10; font-size: 12px; line-height: 14px; font-weight: 400; height: auto; padding: 15px; background-color: rgb(255,255,255); border: solid 1px rgb(220,220,220); box-shadow: 5px 5px 5px rgba(0,0,0,.2); opacity: 0; }

.tooltipLeft:after, .tooltipLeft:before {
	bottom: 100%;
	left: 10px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.tooltipRight:after, .tooltipRight:before {
	bottom: 100%;
	right: 10px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}


.tooltipLeft:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: rgb(255,255,255);
	border-width:  0 4px 4px 0px;
	margin-left: -10px;

}
.tooltipLeft:before {
	border-color: rgba(220,220,220, 0);
	border-bottom-color: rgb(220,220,220);
	border-width:  0 6px 6px 0px;
	margin-left: -11px;
}

.tooltipRight:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: rgb(255,255,255);
	border-width:  0 0 4px 4px;
	margin-right: -10px;

}
.tooltipRight:before {
	border-color: rgba(220,220,220, 0);
	border-bottom-color: rgb(220,220,220);
	border-width:  0 0 6px 6px;
	margin-right: -11px;
}

#tooltip h2 { font-size: 18px; line-height: 18px; 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 10px;}

.axis { }

#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; }


/*.domain { display: none; }*/

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

	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: -3px; }
	#mapRight h5 { font-size: 14px; line-height: 18px; }

}

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

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

	#mapRight h3 { font-size: 16px; line-height: 16px; }
	#mapRight h2 { font-size: 30px; line-height: 30px; }
	.mapRightNumbers { font-size: 18px; line-height: 18px; padding-bottom: 5px; }
	#mapRightControls { padding-top: 10px; }

	#mapFlu { width: 100%; height: 65vw; }
	#barsFlu { width: calc(100% - 30px); height: 31vw; }

	.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; }

}