/******************** SVG responsive STYLING ************************/
  .svg-container {
    display: inline-block;
    position: relative;
    width: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
  }

  .svg-content-responsive {
      display: inline-block;
      position: absolute;
      top: 10px;
      left: 0;
  }

  /**************************** MAP STYLING ******************************/
    /* Tooltip from http://bl.ocks.org/juan-cb/1984c7f2b446fffeedde*/
  .toolTip {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: -3px 3px 15px #888888;
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
  }

  .state-path:hover {
    filter: url(#glow-filter);
    stroke-width: 4px;
  }

  /**************************** SLIDER STYLING **************************/
  .axis--grid .domain {
    fill: #ddd;
    stroke: none;
  }

  .axis--x .domain,
  .axis--grid .tick line {
    stroke: #fff;
  }

  .axis--grid .tick--minor line {
    stroke-opacity: .5;
  }

  /* Give handles a fill color. Necessary for them to also be able to glow
  like the selection region.*/
  .handle {
    fill: rgba(173, 173, 173, 0.75);
  }

  /* Make clickable/draggable elements (the selection and handles), glow */
  .selection.move-enabled:hover, .handle:hover {
    filter: url(#glow-filter);
  }

  /************************ DROPDOWN STYLING *******************************/
  /* Styling the select removes some of its browser specific styling on hover,
  which flickers and does not look right. So we are not styling the drop down.
  /*.topic-select:hover {
    box-shadow: 0 0 6px rgba(35, 173, 255, 1);
  }*/


   /*****************  Used for creating the legend STYLING *****************/
  text.legendHeader {
  color: #111;
  margin: 24px 0 -12px 20px;
  }