/* The location pointed to by the popup tip. */
      .popup-tip-anchor {
        height: 0;
        position: absolute;
        /* The max width of the info window. */
        width: 200px;
      }
      /* The bubble is anchored above the tip. */
      .popup-bubble-anchor {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
      }
      /* Draw the tip. */
      .popup-bubble-anchor::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, 0);
        width: 0;
        height: 0;
      }
      /* The popup bubble itself. */
      .popup-bubble-content {
        position: absolute;
        top: -20px;
        left: 0;
        transform: translate(-50%, -100%);
        /* Style the info window. */
        background-color: white;
        padding: 5px;
        border-radius: 5px;
        font-family: sans-serif;
        overflow-y: auto;
        max-height: 60px;
        box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
      }
	  
	  #charts {
	  padding: 10px 0;
	}

	.chart {
	  display: inline-block;
	  height: 151px;
	  margin-bottom: 20px;
	}

	.reset {
	  padding-left: 1em;
	  font-size: smaller;
	  color: #ccc;
	}

	.background.bar {
	  fill: #ccc;
	}

	.foreground.bar {
	  fill: steelblue;
	}

	.axis path, .axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}

	.axis text {
	  font: 10px sans-serif;
	}

	.brush rect.extent {
	  fill: steelblue;
	  fill-opacity: .125;
	}

	.brush .resize path {
	  fill: #eee;
	  stroke: #666;
	}

	#hour-chart {
	  width: 400px;
	}

	#delay-chart {
	  width: 400px;
	}

	#distance-chart {
	  width: 420px;
	}

	#date-chart {
	  width: 920px;
	}