.stkr-help {
  display: inline-flex;
  justify-content: center;
  position: relative;
  top: 1.5px;
}

.stkr-help .stkr-help-content .stkr-help-content-icon {
  display: inline-block;
}

.stkr-help .stkr-help-content .stkr-help-content-link {
  display: none;
  text-decoration: underline;
  color: blue;
}

.stkr-help:hover .stkr-help-additional-content {
  opacity: 1;
  visibility: visible;
}

.stkr-help .stkr-help-additional-content {
  background-color: white;
  border-radius: 0.5rem;
  bottom: calc(100% + 0.6em + 2px);
  border: 0.1875rem solid rgba(26, 26, 26, 0.1);
  color: black;
  display: flex;
  opacity: 0;
  transition: all 0.3s ease-in;
  visibility: hidden;
  font-size: 1em;
  justify-content: center;
  line-height: 1.35em;
  padding: 0.5em 0.7em;
  position: absolute;
  text-align: center;
  width: 10em;
  z-index: 100;
}

.stkr-help .stkr-help-additional-content::before {
  content: url("tooltip-arrow.svg?v=1");
  display: block;
  position: absolute;
  top: calc(100% - 0.5em - 0.25px);
}

.stkr-help.top .stkr-help-additional-content {
  margin-bottom: 8px;
}

.stkr-help.top:hover .stkr-help-additional-content {
  margin-bottom: 0;
}

.stkr-help.bottom .stkr-help-additional-content {
  top: calc(100% + 0.6em + 2px);
  margin-top: 8px;
}

.stkr-help.bottom:hover .stkr-help-additional-content {
  margin-top: 0;
}

.stkr-help.bottom .stkr-help-additional-content::before {
  transform: rotate(180deg);
  bottom:  calc(100% - 0.5em - 0.25px);
}

.stkr-help:not(.top) .stkr-help-additional-content {
  bottom: auto;
}
.stkr-help:not(.top) .stkr-help-additional-content::before {
  top: auto;
}

.stkr-help.right,
.stkr-help.left {
  align-items: center;
}

.stkr-help.right .stkr-help-additional-content,
.stkr-help.left .stkr-help-additional-content {
  align-items: center;
  min-height: 2.5em;
}

.stkr-help.right .stkr-help-additional-content {
  left: calc(100% + 0.6em + 2px);
  margin-left: 8px;
}

.stkr-help.right:hover .stkr-help-additional-content {
  margin-left: 0;
}

.stkr-help.right .stkr-help-additional-content::before {
  right: calc(100% - 0.5em - 0.25px);
  transform: rotate(90deg);
}

.stkr-help.left .stkr-help-additional-content {
  right: calc(100% + 0.6em + 2px);
  margin-right: 8px;
}

.stkr-help.left:hover .stkr-help-additional-content {
  margin-right: 0;
}

.stkr-help.left .stkr-help-additional-content::before {
  left: calc(100% - 0.5em - 0.25px);
  transform: rotate(-90deg);
}

@media only screen and (max-width: 600px) {
  .stkr-help .stkr-help-content .stkr-help-content-icon {
    display: none;
  }

  .stkr-help .stkr-help-content .stkr-help-content-link {
    display: block;
  }

  .stkr-help:active .stkr-help-additional-content {
    opacity: 1;
    visibility: visible;
  }
}