/* HelpTip: question-mark icon with an explanation on hover, focus or tap. */
.sp-help-tip { position: relative; display: inline-flex; vertical-align: middle; }
.sp-help-tip__button { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; padding: 0; border: 0; border-radius: 9999px; background: none; color: #94a3b8; cursor: help; transition: color .15s ease; }
.sp-help-tip__button svg { width: 100%; height: 100%; }
.sp-help-tip:hover .sp-help-tip__button, .sp-help-tip:focus-within .sp-help-tip__button { color: #177a50; }
.sp-help-tip__button:focus-visible { outline: 2px solid #177a50; outline-offset: 2px; }
.sp-help-tip__bubble { position: absolute; left: 50%; z-index: 50; width: max-content; max-width: min(18rem, 80vw); padding: .5rem .75rem; border-radius: 8px; background: #0f172a; color: #fff; font-size: .8125rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 6px 20px rgba(15, 23, 42, .18); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
.sp-help-tip--top .sp-help-tip__bubble { bottom: calc(100% + .5rem); }
.sp-help-tip--bottom .sp-help-tip__bubble { top: calc(100% + .5rem); transform: translate(-50%, -4px); }
.sp-help-tip:hover .sp-help-tip__bubble, .sp-help-tip:focus-within .sp-help-tip__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .sp-help-tip__button, .sp-help-tip__bubble { transition: none; }
}