:root {
  --tooltip-before-left: 50%;
  --tooltip-description-top: 0;
}

.tooltip-wrapper {
  display: inline-block;
}

.tooltip-wrapper::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 4px;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  background-image: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='icons_Information.stroke'%3e%3cpath id='Percent of dried blo' d='M12 23.5C5.706 23.5 0.5 18.2913 0.5 11.9941C0.5 5.69695 5.6943 0.5 11.9883 0.5C18.2823 0.5 23.5 5.69695 23.5 11.9941C23.5 18.2913 18.294 23.5 12 23.5ZM12 21.0771C17.0305 21.0771 21.0783 17.0389 21.0783 11.9941C21.0783 6.96107 17.0305 2.9112 11.9883 2.9112C6.95778 2.9112 2.93337 6.96107 2.93337 11.9941C2.93337 17.0389 6.96948 21.0771 12 21.0771ZM11.9415 8.45929C11.1109 8.45929 10.4207 7.7687 10.4207 6.93766C10.4207 6.08321 11.1109 5.40433 11.9415 5.40433C12.7955 5.40433 13.4624 6.08321 13.4624 6.93766C13.4624 7.7687 12.7955 8.45929 11.9415 8.45929ZM10.058 18.0338C9.55493 18.0338 9.15717 17.671 9.15717 17.156C9.15717 16.6761 9.55493 16.2898 10.058 16.2898H11.3566V11.8654H10.2569C9.75381 11.8654 9.35605 11.5025 9.35605 10.9875C9.35605 10.5076 9.75381 10.1214 10.2569 10.1214H12.351C12.9827 10.1214 13.322 10.5662 13.322 11.245V16.2898H14.5036C15.0066 16.2898 15.4044 16.6761 15.4044 17.156C15.4044 17.671 15.0066 18.0338 14.5036 18.0338H10.058Z' fill='black'/%3e%3c/g%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip-wrapper .tooltip-description {
  display: block;
  visibility: hidden;
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: calc((var(--tooltip-description-top) + 20) * 1px);
  left: 50%;
  transform: translateX(-50%);
  background: #FFF;
  border: 1px solid #ed7421;
  border-radius: 10px;
  color: #000;
  padding: 10px;
  z-index: 600;
  font-family: Arial,sans-serif;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

.tooltip-wrapper .tooltip-description.reversed {
  top: calc((var(--tooltip-description-top) + 35) * 1px);
}

.tooltip-wrapper .tooltip-description::before {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 0;
  left: calc((var(--tooltip-before-left) - 2) * 1px);
  height: 0;
  border: 6px solid rgba(0, 93, 169, 0.15);
  border-color: #FFF transparent transparent #FFF;
  transform: translateX(-50%) rotate(-135deg);
  box-shadow: -1px -1px 1px 0px rgb(237, 116, 33);
  z-index: 101;
}

.tooltip-wrapper .tooltip-description.reversed::before {
  top: -5px;
  bottom: unset;
  transform: translateX(-50%) rotate(45deg);
}

.tooltip-wrapper .tooltip-description a {
  text-decoration: underline;
}

.tooltip-wrapper:hover::after {
  filter: invert(51%) sepia(70%) saturate(2035%) hue-rotate(350deg) brightness(98%) contrast(89%);
}

.tooltip-wrapper:hover .tooltip-description {
  visibility: visible;
}

@media screen and (max-width: 767px) {
  .tooltip-wrapper {
    position: unset;
  }

  .tooltip-wrapper .tooltip-description {
    top: calc((var(--tooltip-description-top) + 24) * 1px);
  }

  .tooltip-wrapper .tooltip-description::before {
    left: calc((var(--tooltip-before-left) - 9) * 1px);
  }

  body[class^="toolbar"] .tooltip-wrapper .tooltip-description {
    top: calc((var(--tooltip-description-top) - 178 ) * 1px);
  }

  body[class^="toolbar"] #title-wrapper .tooltip-wrapper .tooltip-description,
  body[class^="toolbar"] #subtitle-wrapper .tooltip-wrapper .tooltip-description  {
    top: calc((var(--tooltip-description-top) + 23 ) * 1px);
  }

  body[class^="toolbar"] #title-wrapper .tooltip-wrapper .tooltip-description::before,
  body[class^="toolbar"] #subtitle-wrapper .tooltip-wrapper .tooltip-description::before  {
    left: calc((var(--tooltip-before-left) - 3) * 1px);
  }
}

@media screen and (max-width: 650px) {
  .tooltip-wrapper .tooltip-description::before {
    left: calc((var(--tooltip-before-left) - 4) * 1px);
  }
}

@media screen and (max-width: 500px) {
  .tooltip-wrapper .tooltip-description::before {
    left: calc((var(--tooltip-before-left) + 9) * 1px);
  }
}