/* faa145-info-css: the site information icon with a hover / focus / tap window (no browser tooltip). Use:
   <span class="fi" tabindex="0" role="note" aria-label="More information"><svg viewBox="0 0 24 24" aria-hidden="true">...</svg><span class="fi-t">Text</span></span> */
.fi{position:relative;display:inline-flex;align-items:center;vertical-align:middle;margin-left:4px;cursor:help;border-radius:50%;outline:0}
.fi:focus-visible{box-shadow:0 0 0 3px #9DC7EE}
.fi svg{width:18px;height:18px;display:block}
.fi .fi-t{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);width:max-content;max-width:min(300px,78vw);box-sizing:border-box;padding:10px 13px;background:#0B2A4A;color:#fff;font:500 13.5px/1.45 "IBM Plex Sans",Arial,Helvetica,sans-serif;text-align:left;white-space:normal;border-radius:10px;box-shadow:0 10px 28px rgba(8,25,45,.28);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:9999;pointer-events:none}
.fi .fi-t::before{content:"";position:absolute;bottom:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom-color:#0B2A4A}
.fi:hover .fi-t,.fi:focus .fi-t,.fi:focus-within .fi-t{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.fi .fi-t{transition:none}}
/* faa145-info-lead: the icon at the front of a note bar carries the hover window (window opens to the right of the icon) */
.fi.fi-lead{margin:0;flex:none}
.fi-lead svg{width:24px;height:24px}
.fi-lead .fi-t{left:-6px;transform:translate(0,-4px)}
.fi-lead .fi-t::before{left:16px;margin-left:0}
.fi-lead:hover .fi-t,.fi-lead:focus .fi-t,.fi-lead:focus-within .fi-t{transform:translate(0,0)}
/* faa145-rfqicon2: the yellow RFQ box uses the same information icon as the bars (its old warning icon is hidden) */
.pf-rfq>svg:not(.pf-rfq-i){display:none}
.pf-rfq>.pf-rfq-i{flex:none;width:24px;height:24px}