/* https://csswizardry.com/2013/04/shame-css/ */

/* Avoid having fragment hops slide the header underneath the fixed top header
 * https://css-tricks.com/hash-tag-links-padding/#article-header-id-1 */

h1.frag::before,
h2.frag::before {
  display: block;
  content: " ";
  margin-top: -60px;
  height: 60px;
  visibility: hidden;
  pointer-events: none;
}

#benefit-tooltip-element {
  visibility: hidden;
  color: rgba(0, 0, 0, 0.87);
  position: fixed;
  z-index: 1000;
  background-color: white;
  border: 1px solid rgba(34, 36, 38, 0.25);
  padding: 0.35rem 0.5rem 0.5rem;
  max-width: 350px;
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.35);
}

#benefit-tooltip-element.visible {
  visibility: visible;
}

#benefit-tooltip-element .measure-name {
}

#benefit-tooltip-element .amount {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 0.66em;
}

#benefit-tooltip-element .benefit-name {
  margin-bottom: 0.33em;
  font-weight: bold;
}

#benefit-tooltip-element .amount.cost,
#benefit-tooltip-element .benefit-name.cost {
  color: red;
}

#benefit-tooltip-element .benefit-desc {
  margin-top: 0.33em;
  font-size: 0.8em;
  line-height: 1.3;
}

#benefit-tooltip-element .ctx-header {
  margin-top: 1rem;
}

#benefit-tooltip-element .ctx-value {
  font-size: 1.1rem;
  span {
  font-weight: bold;
  }
}