.info-tooltip {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.info-tooltip > button {
  display: inline-grid;
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  margin: 0 0 0 5px;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font: 700 11px/1 system-ui, sans-serif;
  opacity: .64;
  cursor: help;
}

.info-tooltip > button:hover,
.info-tooltip > button:focus-visible,
.info-tooltip > button[aria-expanded="true"] { opacity: 1; }
.info-tooltip > button:focus-visible { outline: 2px solid rgba(107,45,184,.28); outline-offset: 2px; }

.info-tooltip-panel {
  position: fixed;
  z-index: 1200;
  width: max-content;
  max-width: min(330px, calc(100vw - 24px));
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(49,31,65,.2);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(35,24,46,.17);
  color: #2d2435;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.info-tooltip-panel[hidden] { display: none; }