body {
  font-family: "Nunito", sans-serif;
  color: #99aabb;
  font-size: 14px;
  letter-spacing: .05em; }

h1, h2 {
  font-weight: 500; }

h1 {
  font-size: 2.0rem;
  color: #667788; }

h2 {
  text-align: center; }

main,
header {
  width: 1000px;
  margin: 0 auto; }

label {
  display: block;
  font-weight: 300; }
  label span {
    font-weight: bold; }

.slider {
  width: 100%; }

.overview section {
  margin: 100px 0; }

.overview h1 {
  font-size: 1.2em;
  color: #ccc;
  border-bottom: 1px solid #ddd; }

.overview a {
  text-decoration: none;
  color: inherit; }
  .overview a:hover {
    text-decoration: underline; }

.overview li {
  margin: 5px 0; }

.overview .main {
  font-size: 1.5em;
  margin-bottom: 20px; }

.overview .backup {
  margin-top: 20px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto; }
  table thead th {
    padding: 10px;
    background-color: #e0e0e0;
    cursor: pointer;
    color: #667788;
    width: 20%; }
    table thead th:first-child {
      width: 10%; }
    table thead th:nth-child(2) {
      width: 30%; }
    table thead th:hover {
      background-color: #dadada; }
  table tbody td {
    padding: 10px;
    text-align: center; }
  table tbody tr:nth-child(even) td {
    background-color: #fafafa; }
  table tbody tr:nth-child(odd) td {
    background-color: #eee; }

#d3 {
  margin: 50px auto 0 auto; }
  #d3 .vis {
    text-align: center; }
  #d3 .bar {
    fill: #dadada; }
    #d3 .bar:hover {
      fill: #667788; }
  #d3 .axis text {
    fill: #999; }
  #d3 .axis line,
  #d3 .axis path {
    stroke: #999; }
  #d3 .axis--x domain,
  #d3 .axis--x line,
  #d3 .axis--x .tick:last-child {
    display: none; }
  #d3 .grid-container path {
    display: none; }
  #d3 .grid-container .x-grid line {
    stroke: black; }
  #d3 .grid-container .y-grid line {
    stroke: #667788;
    opacity: .1; }

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

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none; }

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center; }

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px; }

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center; }

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%; }

.d3-tip p {
  margin: 8px;
  font-size: 1.2em;
  text-align: center; }

.d3-tip .minute {
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 20px; }

.d3-tip .value span {
  color: #667788;
  background-color: white;
  border-radius: 20px;
  line-height: 40px;
  width: 40px;
  height: 40px;
  display: inline-block; }