/* This CSS was copied from Chris Bracco's "[CSS Simple Tooltip](https://codepen.io/cbracco/pen/qzukg)" on 2019 Jan 19. The code is [MIT Licensed](https://blog.codepen.io/legal/licensing/). Brian Tomasik made some modifications. */


:root {
  --tooltip_width: 130px; /* For smaller screen widths, there's more risk of the tooltip going off the left or right edge of the screen, so make it narrower than it is for wider screens. Plus, usually small screen widths are when people are viewing a mobile device vertically, and in that case, a narrower but taller tooltip is less likely to overflow the top of the screen than if people are holding the device horizontally. */
}
@media (min-width: calc(825px + 50px)) { /* This calculation adds 50px to the body's max-width value to ensure the screen has enough whitespace margin on the edges to fit a wide tooltip. */
  :root {
    --tooltip_width: 230px;
  }
}

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  transition: opacity 0.5s;
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: calc(-1 * var(--tooltip_width) / 2);
  padding: 7px;
  width: var(--tooltip_width);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: rgb(255, 252, 243);
  color: rgb(20, 20, 20);
  content: attr(data-tooltip);
  font-size: 70%;
  text-decoration: none;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid rgb(146, 64, 0);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}