canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none; }

.chartjs-tooltip {
  opacity: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  transform: translate(-50%, 0);
  z-index: 1050; }
  .chartjs-tooltip > div {
    display: flex;
    align-items: center;
    white-space: nowrap; }
  .chartjs-tooltip:before {
    border: solid;
    border-color: transparent;
    border-width: 8px;
    content: "";
    display: block;
    position: absolute;
    z-index: 99; }
  .chartjs-tooltip.top {
    transform: translate(-50%, 8px); }
    .chartjs-tooltip.top:before {
      border-bottom-color: rgba(0, 0, 0, 0.8);
      left: 50%;
      top: 0;
      transform: translate(-50%, -100%); }
  .chartjs-tooltip.bottom {
    transform: translate(-50%, calc(-100% - 8px)); }
    .chartjs-tooltip.bottom:before {
      border-top-color: rgba(0, 0, 0, 0.8);
      left: 50%;
      top: 100%;
      transform: translate(-50%, 0); }
  .chartjs-tooltip.right {
    transform: translate(calc(-100% - 8px), -50%); }
    .chartjs-tooltip.right:before {
      border-left-color: rgba(0, 0, 0, 0.8);
      top: calc(50% - 8px);
      left: 100%; }
  .chartjs-tooltip.left {
    transform: translate(8px, -50%); }
    .chartjs-tooltip.left:before {
      border-right-color: rgba(0, 0, 0, 0.8);
      top: calc(50% - 8px);
      left: 0;
      transform: translate(-100%, 0%); }

.chartjs-tooltip-key {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px; }