[data-req-tooltip] {
  cursor: pointer;
}

@media (hover: none) and (pointer: coarse) {
  [data-req-tooltip] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

.req-tooltip {
  position: absolute;
  z-index: 2147483000;
  left: 0;
  top: 0;
  max-width: min(500px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 3px;
  background: var(--req-widget-tooltip-bg, #2C2C2C) !important;
  color: var(--req-widget-tooltip-text, #FFFFFF) !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear;
  pointer-events: none;
  white-space: normal;
}

.req-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.req-tooltip__content--with-accent {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.req-tooltip__separator {
  flex-shrink: 0;
  color: var(--req-widget-text-secondary, #7F7F7F) !important;
  opacity: 0.5;
}

.req-tooltip__accent {
  color: var(--req-widget-success, #95C000) !important;
}

.req-tooltip__accent--warning {
  color: var(--req-widget-warning, #FFB43F) !important;
}

.req-tooltip__accent--danger {
  color: var(--req-widget-danger, #D82222) !important;
}

.req-tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 4px;
  color: var(--req-widget-tooltip-bg, #2C2C2C) !important;
}

.req-tooltip__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.req-tooltip__arrow polygon {
  fill: currentColor;
}

.req-tooltip[data-placement="bottom"] .req-tooltip__arrow {
  top: -4px;
  left: var(--req-tooltip-arrow-x, 50%);
  transform: translateX(-50%) rotate(180deg);
}

.req-tooltip[data-placement="top"] .req-tooltip__arrow {
  bottom: -4px;
  left: var(--req-tooltip-arrow-x, 50%);
  transform: translateX(-50%);
}

.req-tooltip[data-placement="left"] .req-tooltip__arrow {
  width: 14px;
  height: 7px;
  right: -8px;
  top: var(--req-tooltip-arrow-y, 50%);
  transform: translateY(-50%) rotate(-90deg);
}

.req-tooltip[data-placement="right"] .req-tooltip__arrow {
  width: 14px;
  height: 7px;
  left: -8px;
  top: var(--req-tooltip-arrow-y, 50%);
  transform: translateY(-50%) rotate(90deg);
}