/*== start of code for tooltips ==*/
.tooltip {
  /*cursor: help;*/
  position: relative;
}

/* Ensure modal overlay stays above tooltips */
#modal > .fixed {
  z-index: 200;
}

/*== common styles for both parts of tooltip ==*/
.tooltip::before,
.tooltip::after {
  opacity: 0;
  position: absolute;
  z-index: -100;
}

.tooltip:hover::before,
.tooltip:focus-visible::before,
.tooltip:hover::after,
.tooltip:focus-visible::after {
  opacity: 1;
  z-index: 100;
}

/*== speech bubble ==*/
.tooltip::after {
  background: #3E474F;
  border-radius: .25em;
  color: #EDEFF0;
  content: none;
  white-space: pre-wrap;
  padding: .5em;
  /*width: max-content;*/
  width: 128px;
  top: 0;
  left: 0;
  transform: translateX(calc(-100% - 10px));
  font-size: 14px;
}

.tooltip[title]:not([title=""])::after {
  content: attr(title);
}

.tooltip[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
}

.tooltip.dense::after {
  line-height: 0.6em;
}

/*== speech bubble right to the label ==*/
.tooltip-right::after {
  background: #3E474F;
  border-radius: .5em;
  color: #EDEFF0;
  padding: .5em;
  /*width: max-content;*/
  width: 128px;
  top: 0;
  left: 0;
  transform: translate(10px, 24px);
}

.tooltip-left::after {
  background: #3E474F;
  border-radius: .5em;
  color: #EDEFF0;
  padding: .5em;
  /*width: max-content;*/
  width: 128px;
  top: 0;
  left: 0;
  transform: translate(calc(-100% - 10px), 24px);
}

.tooltip-top-left::after {
  transform: translate(calc(-100% + 10px), -48px);
}

.tooltip-bottom-left::after {
  transform: translate(calc(-100% + 10px), 24px);
}

/*== speech bubble top to the label ==*/
.tooltip-top::after {
  background: #3E474F;
  border-radius: .5em;
  color: #EDEFF0;
  padding: .5em;
  /*width: max-content;*/
  width: 128px;
  top: 0;
  left: 0;
  transform: translate(0px, -48px);
}

@media (min-width: 768px) {
  .tooltip.tooltip-only-mobile[data-tooltip]::after {
    content: none;
  }
}

/* Flip horizontal tooltip direction for RTL layouts */
[dir="rtl"] .rtl-layout .tooltip-right::after {
  transform: translate(calc(-100% - 10px), 24px);
}

[dir="rtl"] .rtl-layout .tooltip-left::after {
  transform: translate(10px, 24px);
}

[dir="rtl"] .rtl-layout .tooltip-top-left::after {
  transform: translate(10px, -48px);
}

[dir="rtl"] .rtl-layout .tooltip-bottom-left::after {
  transform: translate(10px, 24px);
}