/* Styles for the shared lead-form field groups rendered by
   scripts/ui/form-fields.js. Kept in its own file because the groups appear on
   pages that do not share a stylesheet otherwise (the home page loads only
   style.min.css), and because the rules used to be pasted inline into every
   page that needed them. */

/* Info icon shown beside a field label, e.g. "Preferred Timeslot". */
.na-tip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #3b7ef6;
  font-size: 0.8rem;
  margin-left: 3px;
  vertical-align: middle;
}

.na-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: #1a214d;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 1000;
}

/* `.is-active` is toggled on tap, since :hover never fires on touch devices. */
.na-tip:hover::after,
.na-tip.is-active::after {
  opacity: 1;
}