/*-----IGNORE POINTER EVENTS-----*/
.chartcontainer {
  overflow:auto;
}
.ignorePointer {
  pointer-events: none
}


/*-----BACKGROUND AND COSMETIC ELEMENTS-----*/
.chartBackground {
  fill: #f3f3f3;
}

.cosmeticBox {
  fill: #d8dcdb; 
}

.linesGroup {
  stroke: #b9975b;
  stroke-width: 2.5px;
}


/*-----TOP OF CHART MAIN TITLES-----*/
.mainTitle {
  text-anchor: middle;
  font-family: Arial, Helvetica, sans-serif;
}
.mainTitle.main {
  font-size: 19px;
  opacity: .95;
  font-weight: bold;
  fill: #3b3a3d;
}
.mainTitle.sub {
  font-size: 12.5px;
  opacity: .65;
}


/*-----STATES-----*/
.states {
    fill: #d0d3d4;
    stroke: #dddfe0;
    stroke-width: 1px;
}


/*-----METRO DOTS-----*/
.cityCircles {
  fill: #004976;
}


/*-----METRO NAME, INSTRUCTION AND WARNING TEXT BENEATH-----*/
.metroLabel {
  text-anchor: middle;
  font-family: Arial, Helvetica, sans-serif;
  fill: #b7312c;
  font-size: 18px;
  opacity: 1;
  font-weight: bold;
}
.instructionLabel { /* Select a metro area */
  text-anchor: middle;
  font-family: Arial, Helvetica, sans-serif;
  fill: #b7312c;
  font-size: 18px;
  opacity: 1;
}
#selectedWarningA { /* Is selected. */
  text-anchor: end;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  fill: #B7312C;
  opacity: .65;  
}
#selectedWarningB { /* Hover is off... */
  text-anchor: start;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: italic;
  opacity: .65;  
}
#selectedWarningHover { /* Click to retain selection */
  text-anchor: middle;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: italic;
  opacity: .65;  
}

  

/*-----LEGEND AND DATA TABLE------*/
.legendRect { /* start legend elements as hidden */
  opacity: 0;
}
.legendLabel {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;  
  opacity: 0;
}
.legendLeft {
  text-anchor: start;
}
.legendTop {
  text-anchor: end;
}
.legendCount {
  font-size: 12.5px;
  font-family: Arial, Helvetica, sans-serif;
  fill: #004976;
  text-anchor: end;
}
.shelUnshelPct {
  text-anchor: end;
  fill: #004976;
}


/*-----TOGGLES FOR SORTING ROW OF DOTS------*/
.toggleTitle {
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  fill: #b7312c;
    font-weight: bold;
  opacity: 1;
  text-anchor: start;
  pointer-events: none;
}
.toggleTitle2 { /* Circle size always reflects... */
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;  
  font-style: italic;
  opacity: .7;
  text-anchor: middle;
  pointer-events: none;
}
.toggleCategory {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;  
  opacity: .7;
  text-anchor: start;
  cursor: pointer;
}
.toggleBox {
  fill: #f3f3f3;
  stroke: #004976;
  stroke-width: .5px;
  opacity: 1;
  cursor: pointer;
}
.totalToggleBox { /* Sets 'Total Homeless' toggle box to be filled AKA selected at the start */
  fill: #004976;
}


/*-----CENTER CIRCLE AND PIE CHART-----*/
#centerCircleBackground{
  fill:  #d0d3d4;
  opacity:  .8;
}
.centerCircle { /* start invisible */
  opacity: 0;
  pointer-events: none;
}
.centerCircleText {
 text-anchor: middle;
 font-family: Arial, Helvetica, sans-serif;
}
.centerCircleSubtitle {
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}
.centerCircleValue {
  font-size: 20px;
  fill: #004976;
}
.pieSlices { /* start invisible */
  opacity:0;
  pointer-events: none
}