.tooltip {
  position: relative;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between text and icon */
}

/* the question mark circle */
.tooltip::before {
  content: "?";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: #007BFF; /* Bootstrap blue */
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
  transition: background-color 0.2s ease-in-out;
}

/* tooltip text (hidden by default) */
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%; /* show above */
  left: 50%;
  transform: translateX(-50%);
  /*background-color: #333; */background-color: var(--footer-bg) !important;
  color: #FFF; letter-spacing:.04em;
  padding:.4em .7em;
  border-radius:3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-size: 1em;
  z-index: 10;
}

/* arrow under tooltip */
.tooltip:hover::before {
  background-color: #0056b3; /* change on hover ? */
}

.tooltip::after::before {
  content: "";
}

.tooltip::after {
  content: attr(data-tooltip);
}

.tooltip::after,
.tooltip::before {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* tooltip arrow */
.tooltip::before + .tooltip::after,
.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}

/* separate arrow element */
.tooltip:hover::after {
  opacity: 1;
}

/* add the little arrow tip */
.tooltip:hover::after {
  opacity: 1;
}
.tooltip::after {
  position: absolute;
}
.tooltip::before,
.tooltip::after {
  z-index: 2;
}
.tooltip:hover::after {
  opacity: 1;
}
.tooltip:hover::after::before {
  opacity: 1;
}
.tooltip:hover::after {
  opacity: 1;
}
.tooltip::after::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
 
/************  .. class="tooltip" data-tooltip=" ..>
 ******************************************************************/