h1.article-title {
  max-width: 725px !important;
}
div.tooltip {   
  position: absolute;  
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px #ccc;
  color: black;
/*  text-align: left; */    
  font-family: BWHaasText, Helvetica, sans-serif;       
  width: 174px;                  
  min-height: inherit;                
  padding: 2px;             
  font-size: 14px;
  line-height: 16px;         
  pointer-events: none; 
  z-index: 9999; 
  display: none;
  padding: 5px;
  transform: translate(-50%, -110%);
} 
div.tooltip .title{
  font-weight: bold;
  margin-bottom: 3px;
  display: inline-block;
}

div.tooltip:after, before {
      position: absolute;
      bottom: 0;
      left: 50%;
      content: ' ';
      display: inline-block;
      width: 0;
      background-color: transparent;
      height: 0;
      transform: translate(-50%, 100%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 7px solid #fff;
    }
  div.tooltip:before {
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #ccc;   
    }
@media all and (max-width: 550px) {
  div.tooltip:after, before {
      display: none;
    }
}
.tooltip p {
  text-align: left;
}

.tooltip .tabular {
  max-width: 174px
}

.tooltip .val-right {
  display: inline-block;
  float: right;
}
.city-dot {
  cursor: pointer;
  stroke: black;
  stroke-width: .5px;
}
.key-dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin-right: 5px;
}
.hundred {
  background-color: #2d7776; 
}
.ninety {
  background-color: #2daf93;
}
.eighty {
  background-color: #2dcb93;
}
.seventy {
  background-color: #abebd3;
}
#legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
}
.legend-child {
  margin-right: 20px;
}
.legend-child p{
  clear:both;
  float:left;
}
.annotation path{
  fill: none;
  stroke: #000;
  cursor: default;
}
.annotation circle{
  stroke: none;
  cursor: default;
}
.annotation text{
  cursor: default;
}
@media all and (max-width: 1000px) {
  .annotation text {
    font-size: 12px;
  }
}
@media all and (max-width: 800px) {
  .annotation path{
    fill: none;
    stroke: none;
    cursor: default;
  }
  .annotation circle{
    stroke: none;
    cursor: default;
  }
  .annotation text{
    fill: none;
    cursor: default;
  }
  #arrow {
    fill: none;
  }
}
@media all and (max-width: 500px) {
  #subtitle-map{
    display: none;
  }
}
.interactive-bug {
    float: right;
    position: relative;
    top: 0px;
    right: 0px;
    font-family: BWHaasText, Helvetica, sans-serif;       
    font-size: .875rem;
    color: #999999;
  }
@media all and (max-width: 500px) {
  .interactive-bug {
      display: none;
    }
  }
.icon-font {
    font-family: BWHaasDingbat;
    font-size: 1.5rem;
  }