/* style.css */

body{
	font-family: sans-serif;
	margin: 0;
}

/* For desktop: */
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 70%; height: 600px;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	@media only screen and (max-width: 768px) {
	  /* For mobile phones: */
	  [class*="col-"] {
		width: 95%;
	  }
	  .legendpanel {
		position: absolute; 
		left: 80%;
		}
		.testTXT { 
font-size: 18px;
}
.logo{ 
height: 20px;
} 
.topbar {
height: 54px;
}
	}
	
	@media only screen and (max-width: 414px) {
	  /* For mobile phones: */
	  [class*="col-"] {
		width: 95%;
	  }
	  .legendpanel {
		position: absolute; 
		left: 70%;
		}
		}
	.testTXT { 
font-size: 18px;
}
.logo{ 
height: 20px;
} 
.topbar {
height: 54px;
}

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;
	padding-top: 20px;
}
.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
.highcharts-credits{
	
display: none;
}
.testIMG{ 
float:left; 
display:inline; 
margin-top:5px; 
margin-left:5px; 
} 

.testTXT { 
margin-top:15px; 
margin-left:5px; 
font-size: 28px;
text-align: center;
color: #005A9E;

}


.topbar{

/*background-color:#fafafb;*/
    margin: 0;
    
    border: 0;
height:70px;
border-top: 3px solid #005A9E;
box-sizing: border-box;   
box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.05);


}

.topbar-logo {
  padding: 0px 10px 0px 0px;
  font-size: 35px;
  line-height: 60px;
}


.region.ca {
	fill: #fff;
	stroke: #444;
	stroke-width: 0.1px;
}
.active
	{fill: #f29929;
}
.hover
	{fill: #fee391;
}
.highlight
	{fill: #fec44f;
}

.region.other { 
  fill: #aaa;
  stroke: #aaa;
}

.mappanel rect {
    fill: none;
    pointer-events: all;
}

/* Colors taken from colorbrewer2.org - blue */
.mappanel .b0-9 { fill:rgb(247,251,255); }
.mappanel .b1-9 { fill:rgb(222,235,247); }
.mappanel .b2-9 { fill:rgb(198,219,239); }
.mappanel .b3-9 { fill:rgb(158,202,225); }
.mappanel .b4-9 { fill:rgb(107,174,214); }
.mappanel .b5-9 { fill:rgb(66,146,198); }
.mappanel .b6-9 { fill:rgb(33,113,181); }
.mappanel .b7-9 { fill:rgb(8,81,156); }
.mappanel .b8-9 { fill:rgb(8,48,107); }

/* Colors taken from colorbrewer2.org - red */
.mappanel .r0-9 { fill:rgb(255,245,240); }
.mappanel .r1-9 { fill:rgb(254,224,210); }
.mappanel .r2-9 { fill:rgb(252,187,161); }
.mappanel .r3-9 { fill:rgb(252,146,114); }
.mappanel .r4-9 { fill:rgb(251,106,74); }
.mappanel .r5-9 { fill:rgb(239,59,44); }
.mappanel .r6-9 { fill:rgb(203,24,29); }
.mappanel .r7-9 { fill:rgb(165,15,21); }
.mappanel .r8-9 { fill:rgb(103,0,13); }

/* Colors taken from colorbrewer2.org - green */
.mappanel .g0-9 { fill:rgb(247,252,245); }
.mappanel .g1-9 { fill:rgb(229,245,224); }
.mappanel .g2-9 { fill:rgb(199,233,192); }
.mappanel .g3-9 { fill:rgb(161,217,155); }
.mappanel .g4-9 { fill:rgb(116,196,118); }
.mappanel .g5-9 { fill:rgb(65,171,93); }
.mappanel .g6-9 { fill:rgb(35,139,69); }
.mappanel .g7-9 { fill:rgb(0,109,44); }
.mappanel .g8-9 { fill:rgb(0,68,27); }

.text { stroke:#444;
	text-anchor: middle;
	font-family: "sans-serif";
	stroke-width: 0.5;
	fill: #444;
	font-size: 10pt;
	}


.csvTable table {
border-collapse: collapse;
text-align: left;
width: 100%;
}

.csvTable {
font: normal 12px/120% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #069;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 2em;
}

.csvTable table td, .csvTable table th {
padding: 3px 10px;
}

.csvTable table thead th {
background: 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699',endColorstr='#00557F');
background-color: #005A9E;
color: #FFF;
font-size: 15px;
font-weight: 700;
border-left: 1px solid #005A9E;
}

.csvTable table thead th:first-child {
    border: none;
}

.csvTable table tbody td {
color: #00496B;
border-left: 1px solid #E1EEF4;
font-size: 12px;
border-bottom: 1px solid #E1EEF4;
font-weight: 400;
}

.csvTable table tbody td:first-child {
    border-left: none;
}

.csvTable table tbody tr:last-child td {
border-bottom: none;
}

.csvTable tr:hover td {
background-color: #069;
color: white;
}



.left{
  float: left;
  text-align: center;
  width: 20%; 
  padding:10px 10px;
  
  font-size: 12px;
}

.right {
  float: right;
  text-align: center;
  padding:10px 10px;
}
.main {
  float:left;
  top: 5px; 
  position: relative;
}

.legendpanel{
	position: absolute;
	top:0px;
	left:80%;

    font-size: 12px;
	z-index: 499;
}

.controlpanel{
	position: absolute;
	top:0px;
	left:0px;
	z-index:400;
}

.totalnumber {
  font-size: 35px;
  line-height: 70px;
}

.title {
  font-size: 28px;
  text-align:center;
  line-height: 60px;
  color: #005A9E;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}
svg .rect {
  stroke: steelblue;
  stroke-width: 5px;
}


.svg-pan-zoom-control { 
cursor: pointer; fill: black; fill-opacity: 0.333; 
} 
.svg-pan-zoom-control:hover { 
fill-opacity: 0.8; 
} 
.svg-pan-zoom-control-background { 
fill: white; 
fill-opacity: 0.5; 
} 
.svg-pan-zoom-control-background { 
fill-opacity: 0.8; 
}