/* PUNG Tooltip v1.4: customizable colors & border */
.pung-tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px var(--pung-tip-uline, dashed) var(--pung-tip-uline-color, #ce792f);
  color: var(--pung-tip-text, inherit);
  outline: none;
  padding-right: 1.1em;
  background-repeat: no-repeat;
  background-position: right 0.15em center;
  background-size: 0.9em 0.9em;
  background-image: var(--pung-tip-icon, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><circle cx="128" cy="128" r="120" fill="%23ce792f"/><rect x="120" y="112" width="16" height="80" fill="white"/><circle cx="128" cy="84" r="10" fill="white"/></svg>'));
}

.pung-tooltip[data-pungtip-icon=""],
.pung-tooltip[data-pungtip-icon="0"] {
  background-image: none;
  padding-right: 0;
}

.pung-tooltip::after {
  content: attr(data-pungtip);
  position: absolute;
  left: 50%;
  bottom: 140%;
  transform: translateX(-50%);
  background: var(--pung-tip-bg, #323d4d);
  color: var(--pung-tip-fg, #fff);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: block !important;
  min-width: 240px;
  max-width: 480px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-in-out;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 9999;
}

.pung-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 130%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--pung-tip-bg, #323d4d);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-in-out;
}

.pung-tooltip:hover::after,
.pung-tooltip:hover::before,
.pung-tooltip:focus::after,
.pung-tooltip:focus::before,
.pung-tooltip:focus-within::after,
.pung-tooltip:focus-within::before {
  opacity: 1;
  visibility: visible;
}