.legend {
    font-size: 12px;
  }
  rect {
    stroke-width: 2;
  }
  #chartlegend {
   min-width: 400px;
   width:100%;
	
    text-align: center;
    cursor: pointer;
    color: white;position:relative; top:20px;padding-bottom:20px;
}
#chartlegend  span{
border-style: solid;
    border-width: 1px;
	border-color: black;
   margin:1px;
    text-align: center;
    cursor: pointer;
    color: white;
}
  .PopupTitle{text-align:center;color:white;font-weight:bold;text-transform: uppercase;letter-spacing:4px;pointer-events:none;position:relative;background-color:black
  
  }
  .PieChartTitle{text-align:left;color:#0A5169;font-size;smaller;font-weight:bold;pointer-events:none;position:absolute;width:50%;top:120px;left:15px;z-index: 999;
  
  }
  
.insetmap circle.background {
    fill: none;
    stroke: black;
    stroke-width: 4; 
	-webkit-filter: drop-shadow( -5px -5px 5px #000 );
            filter: drop-shadow( 0px 0px 5px #000 ); /* Same syntax as box-shadow */
}   
.insetmap{
    stroke: black;
	stroke-width: 0.2;
}
.insetmap circle.blur {
    filter: url(#blur);
    fill: none;
    stroke: white;
}
.insetmap circle.outline {
    fill: gray;
    stroke: #999;
}

.inset2map circle.background {
    fill: none;
    stroke: black;
    stroke-width: 4; 
	-webkit-filter: drop-shadow( -5px -5px 5px #000 );
            filter: drop-shadow( 0px 0px 5px #000 ); /* Same syntax as box-shadow */
}   

.inset2map circle.blur {
    filter: url(#blur);
    fill: none;
    stroke: white;
}
.inset2map circle.outline {
    fill: gray;
    stroke: #999;
}
.inset2map{
    stroke: black;
	stroke-width: 0.2;
}



.chart
{
    display:inline-block;background-color:rgba(190, 190, 190, 1);border-radius: 5px;margin:13px;padding:13px;black;border-style: solid;border-width: 1px;border-color:black;box-shadow: 0px 0px 5px;height:900px;
}



.chart span {
    width: 50%;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    background-color: red;
}

/* .c3-legend-item text {
    fill: black;
} */
 
.compass{
    fill:  #fff;
    stroke:  #000;
    stroke-width:  1.5;
  }
  .buttonComp{
    fill:  #336699;
    stroke:  white;
    stroke-miterlimit:	6;
    stroke-linecap:  round;
    box-shadow: 10px 10px;
  }
  .buttonComp:hover{
    stroke-width:  2;
  }
  .plus-minus{
    fill:  #fff;
    pointer-events: none;
  }
           
           
        .states {
            fill: none;
            stroke: #fff;
            stroke-linejoin: round;
        }
        .subunit-label {
          fill: red;
          fill-opacity: .8;
          font-size: 12px;
          text-anchor: middle;
}
.arc {
  fill: none;
  stroke: red;
  stroke-width: 3px;
  stroke-linecap: round;
}
 .tooltipNew{
	  background-color:#408399;
	  }
.tooltip{
	  background-color:red;color:blue
	  }

/* Creates a small triangle extender for the tooltip */



.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
  .d3-tip:hover{
fill: red;
}
div.tooltip {   
  position: absolute;           
  text-align: center;              
  font-size: 10px;
  background: black;
  border: 1px;              
  pointer-events: none;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  padding:20px;
  background-color: black;color:white;border-style:solid;border-width:small;
  border-color:white;outline-color:black;outline-offset:5px;outline-width:10px;
letter-spacing:2px;				
      
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
.place,
        .place-label {
            fill: black;
        }

        text {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            pointer-events: none;
            font-size:9px;
        }
   
 .modal-box {
	font-family: Verdana, Geneva, sans-serif;
  top:25px;
  position: absolute;
  width: 1000px;
  height:550px;
  border-radius: 4px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 0px solid rgba(255, 0, 0, 1);
  background-clip: padding-box;
  background: -o-linear-gradient(rgba(255, 255, 255, 0.99), rgba(50, 50, 50, 0.99)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.99), rgba(50, 50, 50, 0.99)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(255, 255, 255, 0.99), rgba(200, 200, 200, 0.99));
  visibility:hidden;
  opacity:0;
  left:50px;
  z-index: 999;
}
   
.counties {
  fill: none;
}


.ChartInfo{
	top:25px;position:relative
	
}
.chartLegend{
	
	fill:black;
	background-color:red
}

.states {
  fill: none;
  stroke: white;
  stroke-width: 0.3;  
  stroke-linejoin: round;
}
.towns {
    fill: red;
  }
  .labels {
	fill: #444;
	font-family:arial;
}


.q0-5 { fill:rgb(252,215,197); }
.q1-5 { fill:rgb(237,163,126); }
.q2-5 { fill:rgb(224,147,108); }
.q3-5 { fill:rgb(219,127,81); }
.q4-5 { fill:rgb(217,104,48); }