.text-with-tooltip {
    font-family: soleil, sans-serif; /* Fallback for IE11 */
    font-family: var(--soleil) !important;
    font-weight: 600 !important;
    font-size: 20px; /* Fallback for IE11 */
    font-size: var(--paragraph) !important;
    line-height: 32px !important;
    letter-spacing: -0.2px;
    color: #0F454A; /* Fallback for IE11 */
    color: var(--darkgreen);
    /* text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: #228E93;
    text-decoration-color: var(--secondary1); */
    display: inline;
}

.tenacre-tooltip {
    transform: translateZ(0);
    -webkit-transform: translateZ(0); /* webkit flicker fix */
    -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.tenacre-tooltip .tooltip-box {
    background-color: white;
    padding: 35px 40px 30px 40px;

    z-index: 1;
    bottom: calc(100% + 20px);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    border-radius: 5px;
    width: 455px;
    left: 0;
    right: 0;
    -webkit-transform: translateY(10px);
       -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
         -o-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: all .25s ease-out;
       -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
    -webkit-box-shadow: 0px 8px 24px rgba(8, 8, 18, 0.04);
       -moz-box-shadow: 0px 8px 24px rgba(8, 8, 18, 0.04);
        -ms-box-shadow: 0px 8px 24px rgba(8, 8, 18, 0.04);
         -o-box-shadow: 0px 8px 24px rgba(8, 8, 18, 0.04);
            box-shadow: 0px 8px 24px rgba(8, 8, 18, 0.04);
  }

   /* This bridges the gap so you can mouse into the tooltip without it disappearing */
   .tenacre-tooltip .tooltip-box:before {
    bottom: -20px;
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
  }

  .tenacre-tooltip:hover .tooltip-box,
  .tenacre-tooltip:focus .tooltip-box,
  .tenacre-tooltip:active .tooltip-box {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
       -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
         -o-transform: translateY(0px);
            transform: translateY(0px);
  }

  .tooltip-text {
    font-family: kepler-std-display; /* Fallback for IE11 */
    font-family: var(--kepler) !important;
    font-style: italic;
    font-size: 24px; /* Fallback for IE11 */
    font-size: var(--h4) !important;
    line-height: 27px !important;
    color: #0F454A; /* Fallback for IE11 */
    color: var(--darkgreen);
  }

  .tooltip-title {
    font-family: soleil, sans-serif; /* Fallback for IE11 */
    font-family: var(--soleil);
    font-style: 600;
    font-size: 12px; /* Fallback for IE11 */
    font-size: var(--label) !important;
    line-height: 15px !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #228E93; /* Fallback for IE11 */
    color: var(--secondary1);
  }

  .tooltip-source {
    font-family: soleil, sans-serif; /* Fallback for IE11 */
    font-family: var(--soleil);
    font-style: 600;
    font-size: 12px; /* Fallback for IE11 */
    font-size: var(--label) !important;
    line-height: 15px !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666D6E; /* Fallback for IE11 */
    color: var(--gray);
  }

  .tooltip-box.arrow-bottom:after {
    content: " ";
    position: absolute;
    /* right: 50%; */
    right:47%;
    bottom: -15px;
    border-top: 15px solid white;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-bottom: none;
    box-shadow: 0px 8px 24px rgba(8, 8, 18, 0.04);
  }

  .tooltip-underline {
    padding-bottom: 4px;
    border-bottom: 1px dashed #228E93; /* Fallback for IE11 */
    border-bottom: 1px dashed var(--secondary1);
  }


  @media only screen and (max-width: 955px) {
    .tooltip-box.arrow-bottom:after {
      content: " ";
      right: 70%;
    }
  }

  @media only screen and (max-width: 800px) {
    .tenacre-tooltip .tooltip-box {
      width: 100%!important;
    }
    .tooltip-box.arrow-bottom:after {
      content: " ";
      right: 50%;
    }
  }