/* Custom CSS Styling */

body h1 p { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;}

@media only screen and (max-width: 961px), (max-height: 769px), and (min-device-pixel-ratio: 1.5) {
  #footer {
    width: 100%;
    height: 100%;
  }
  .title {
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    padding: 10px;
  }
  #tooltip {
    position: absolute;
    background: white; /* gba(0,153,76,0.8); */
    width: 250px;
    color: black;
    font-size: 12px;
    padding: 5px 10px 0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    pointer-events: none;
  }
}

@media (min-width: 961px) and (min-height: 768px) {
  .title {
    vertical-align: middle;
    font-size: 24px;
    line-height: 24px;
    padding: 10px;
  }
  #tooltip {
    position: absolute;
    background: white; /* gba(0,153,76,0.8); */
    width: 350px;
    color: black;
    font-size: 18px;
    padding: 10px 15px 0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    pointer-events: none;
  }
}

#tooltip p, #overlay-text p {
  margin-bottom: 10px;
}

#legend {
  text-align: center;
  font-weight: bold;
  padding: 0 10px 0 10px;
  float: right;
  font-size: 10px;
  line-height: 14px;
}

.cz {
  stroke: white;
  stroke-width: .5px;
  stroke-linejoin: round;
}

.state {
  fill: none;
  stroke: white;
  stroke-width: .8px;
  stroke-linejoin: round;
}

.background {
  fill: none;
  pointer-events: all;
}

.overlay {
  fill: none;
  pointer-events: all;
}

#tooltip svg {
	border-top: 0;
	margin-left: -5px;
	margin-top: 7px;
}

#tooltip.hidden {
	display: none;
}

table {
  width: 80%;
  margin: 0 auto;
}

th {
  text-align: center;
  font-weight: bold;
}

th, td {
  padding: 0 1em 0.5ex 0;
  f
}

td {
  font-weight: 400;
}

#selected_tr {
  font-style: italic;
  background-color: grey;
}

td.title {
  text-align: left;
  padding: 0 0 0 1em;
}

th.center, td.center { text-align: center; }

thead {
 font-family: "Lucida Console", Monaco, monospace;
}

.x-axis .y-axis {
  font-size: 18px;
  font-weight: 600;
}

th.num, td.num {
  text-align: right;
  font-family: "Lucida Console", Monaco, monospace;
  }