@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* ------------------------------------------------------------------
     Focus

     Interactive elements in the dark shell used `focus:outline-none` with
     no replacement, which left keyboard users with no visible focus at
     all. These classes remove the outline only where a ring replaces it.
     ------------------------------------------------------------------ */
  .focus-ring {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2;
  }

  /* Same, tuned for placement on the dark shell background. */
  .focus-ring-shell {
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-2 focus-visible:ring-offset-shell;
  }

  /* ------------------------------------------------------------------
     Sidebar surface

     A plain `from-shell to-shell-to` reads as flat here: the same two stops
     that are obvious across the 64px top bar are spread over ~900px of
     sidebar, so the colour changes about fourteen times more slowly.

     Three layers instead. An indigo glow at the top-left, where the eye lands
     and where the bar above it is lightest; a violet one lifting the bottom
     edge; and the vertical wash between them. Light at both ends and a darker
     middle gives the column depth that a single linear ramp cannot over this
     height.

     Reach is the free dial here, alpha is not. Measured against shell.muted,
     which has to clear 4.5:1 for the 14px nav labels:

       top glow peak    ~#2f3059   4.8:1
       bottom glow peak ~#282141   5.9:1

     Both hold, but the top one is the tight one. Grow the radii if you want
     more; raising that alpha spends the margin.
     ------------------------------------------------------------------ */
  .sidebar-surface {
    background-image:
      radial-gradient(150% 55% at 0% 0%, rgb(99 102 241 / 0.20), transparent 72%),
      radial-gradient(130% 45% at 15% 100%, rgb(139 92 246 / 0.16), transparent 70%),
      linear-gradient(to bottom, theme('colors.shell.DEFAULT'), theme('colors.shell.to'));
  }

  /* ------------------------------------------------------------------
     Buttons

     Replaces the ad-hoc `bg-X-600 hover:bg-X-700 font-bold py-2 px-4
     rounded-lg` strings that were duplicated across every view, each
     with slightly different radius, weight and height.
     ------------------------------------------------------------------ */
  .btn {
    @apply inline-flex min-h-[40px] cursor-pointer items-center justify-center gap-2 rounded-lg
           px-3.5 py-2 text-sm font-semibold transition-colors duration-150
           focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2
           disabled:cursor-not-allowed disabled:opacity-50;
  }

  .btn-primary   { @apply btn bg-brand text-white shadow-sm hover:bg-brand-hover; }
  .btn-secondary { @apply btn border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50; }
  .btn-success   { @apply btn bg-success text-white shadow-sm hover:bg-success-hover; }

  /* Square icon-only button that still clears a 40px hit target. */
  .btn-icon { @apply btn w-10 px-0; }

  /* ------------------------------------------------------------------
     Soft action buttons

     The detail page shows ten actions at once. Painting them all one
     colour (they were all bg-orange-500) means nothing reads as primary;
     painting them all solid means ten competing blocks of colour.

     Soft fills, structured like .badge. Where an action produces a status
     it borrows that status's hue - Snooze is violet because `snoozed` is
     violet, Close is stone because `closed` is stone - so the button says
     where the lead lands. Take and Clone produce no status, so they take
     distinct hues from the same palette rather than new ones.

     .btn-primary (solid indigo) stays reserved for Add Quote, and
     .btn-danger-soft is the only red on the page, so red always means
     destructive.
     ------------------------------------------------------------------ */
  .btn-soft        { @apply btn ring-1 ring-inset; }
  .btn-soft-brand  { @apply btn-soft bg-indigo-50  text-indigo-800  ring-brand/20       hover:bg-indigo-100; }
  .btn-take        { @apply btn-soft bg-emerald-50 text-emerald-800 ring-emerald-600/20 hover:bg-emerald-100; }
  .btn-snooze      { @apply btn-soft bg-violet-50  text-violet-800  ring-violet-600/20  hover:bg-violet-100; }
  .btn-clone       { @apply btn-soft bg-orange-50  text-orange-800  ring-orange-600/20  hover:bg-orange-100; }
  .btn-close       { @apply btn-soft bg-stone-100  text-stone-700   ring-stone-500/20   hover:bg-stone-200; }
  .btn-record      { @apply btn-soft bg-slate-50   text-slate-700   ring-slate-500/20   hover:bg-slate-100; }
  .btn-danger-soft { @apply btn-soft bg-red-50     text-red-800     ring-danger/20      hover:bg-red-100; }

  /* Quote-card actions.
     ------------------------------------------------------------------
     That row renders up to eight buttons at once, and three of them were
     slate while two more were red - so it read as one undifferentiated
     block and you had to read every label to find the one you wanted.
     Each action now carries its own hue.

     Named for the action rather than the colour, so the class still says
     what the button does. DECLINE is stone rather than a second red:
     REJECT and DECLINE are both negative outcomes, and two near-identical
     reds sitting together is exactly what made them hard to tell apart. */
  .btn-receipt     { @apply btn-soft bg-sky-50     text-sky-800     ring-sky-600/20     hover:bg-sky-100; }
  .btn-hide        { @apply btn-soft bg-violet-50  text-violet-800  ring-violet-600/20  hover:bg-violet-100; }
  .btn-decline     { @apply btn-soft bg-stone-100  text-stone-700   ring-stone-500/20   hover:bg-stone-200; }

  /* Table-row actions. The 40px .btn floor is right for a page-level
     toolbar and wrong inside a dense table row, where it makes the row
     taller than the px-6/py-4 padding it replaced. Apply alongside a
     colour class (e.g. `btn-record btn-sm`); defined after every .btn-*
     variant above so its smaller padding/height wins the cascade. */
  .btn-sm { @apply min-h-0 gap-1 px-2 py-1 text-xs; }

  /* Icon-only .btn-sm - square, not a pill stretched around one glyph. */
  .btn-icon-sm { @apply btn-sm w-6 px-0; }

  /* Group separator on the identity bar. Groups are separated by 16px of
     space either side; this rule only confirms what proximity already says. */
  .bar-divider { @apply h-5 w-px shrink-0 bg-gray-300; }

  /* ------------------------------------------------------------------
     Detail-card field rows

     Label beside value, not stacked above it. The old pattern was a label
     block plus a padded value box - about 44px for one short value, and
     eleven of them ran the client card past 500px. Here the label costs no
     vertical space at all and rows land near 26px.

     12px is the floor for the label (MASTER.md §3); do not shrink it to
     buy width. Widen grid-cols-field instead.
     ------------------------------------------------------------------ */
  .field-row {
    @apply grid grid-cols-field items-baseline gap-2 border-t border-gray-100
           px-3 py-1 first:border-t-0 hover:bg-gray-50;
  }

  /* first:border-t-0 above strips the top hairline off the first .field-row
     in a card's field list, since it has nothing above it to separate from.
     Extra phones/emails render in their own wrapper
     (.extra-phones-container / .extra-emails-container), so the first extra
     is ALSO :first-child of that wrapper and loses its hairline the same
     way - except it does have something above it: the primary phone/email
     row, immediately before the wrapper. Restore it there. Three selectors
     beats .field-row:first-child's two on specificity, so this wins
     regardless of source order within the layer. */
  .extra-phones-container > .field-row:first-child,
  .extra-emails-container > .field-row:first-child {
    @apply border-t;
  }

  .field-key       { @apply text-xs font-semibold uppercase tracking-wide text-gray-500; }
  .field-value     { @apply text-sm font-semibold text-gray-900; }
  /* Continuation rows - extra phones/emails under their primary. */
  .field-value-sub { @apply text-sm font-medium text-gray-600; }

  /* ------------------------------------------------------------------
     What's new (changelog/index): the PR description under Full notes,
     rendered from Markdown by ChangelogHelper#render_changelog_notes.
     Preflight strips every default, so headings, lists, tables and code
     are put back here, on the type scale, and scoped to the notes so
     nothing else on the page picks them up.
     ------------------------------------------------------------------ */
  .log-filter-chip { @apply inline-flex items-center gap-1 rounded-full bg-white px-3 py-1 text-xs font-semibold text-gray-700 ring-1 ring-inset ring-gray-200 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50; }
  .log-filter-chip[aria-pressed="true"] { @apply bg-indigo-600 text-white ring-indigo-600; }
  .log-filter-count { @apply tabular-nums opacity-75; }
  .changelog-notes { @apply text-sm text-gray-700; }
  .changelog-notes > * + * { @apply mt-3; }
  .changelog-notes h1, .changelog-notes h2 { @apply mt-5 text-base font-semibold text-gray-900; }
  .changelog-notes h3, .changelog-notes h4 { @apply mt-4 text-sm font-semibold text-gray-900; }
  .changelog-notes ul { @apply list-disc space-y-1 pl-5; }
  .changelog-notes ol { @apply list-decimal space-y-1 pl-5; }
  .changelog-notes a { @apply text-brand underline; }
  .changelog-notes code { @apply rounded bg-gray-100 px-1 py-0.5 text-xs text-gray-800; }
  .changelog-notes pre { @apply overflow-x-auto rounded-lg bg-gray-900 p-3 text-xs text-gray-100; }
  .changelog-notes pre code { @apply bg-transparent p-0 text-inherit; }
  .changelog-notes blockquote { @apply border-l-2 border-gray-300 pl-3 text-gray-600; }
  .changelog-notes table { @apply w-full text-sm; }
  .changelog-notes th { @apply border-b border-gray-200 px-2 py-1.5 text-left text-xs font-semibold uppercase tracking-wide text-gray-500; }
  .changelog-notes td { @apply border-b border-gray-100 px-2 py-1.5 align-top; }
  .changelog-notes hr { @apply my-4 border-gray-200; }

  /* The figures row: label over value, on the card surface. Proportional
     figures on purpose (no tabular-nums): a standalone number is not a
     column that must align, and every digit at the width of a 0 reads
     loose at this size. */
  .stat-tile       { @apply rounded-lg border border-gray-200 bg-white px-4 py-3 shadow-sm; }
  .stat-tile-label { @apply text-xs font-semibold uppercase tracking-wide text-gray-500; }
  .stat-tile-value { @apply mt-1 text-2xl font-semibold text-gray-900; }

  /* ------------------------------------------------------------------
     Status badges
     ------------------------------------------------------------------ */
  .badge {
    @apply inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2 py-0.5
           text-xs font-semibold ring-1 ring-inset;
  }

  /* Shape/position redundancy so status is never carried by hue alone. */
  .badge-dot { @apply h-1.5 w-1.5 shrink-0 rounded-full bg-current; }

  /* Cabin initial (F/B/P/E) riding alongside the route. Neutral on purpose —
     the row already spends its colour budget on the status badge. Full cabin
     name is on the title attribute. */
  .cabin-chip {
    @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded
           bg-gray-100 text-[11px] font-semibold text-gray-700 ring-1 ring-inset ring-gray-300;
  }

  /* ------------------------------------------------------------------
     Modals

     Visual only - every modal keeps the structure, fields and Stimulus
     wiring it had. What changed is that the five dialogs each hand-rolled
     their own padding, heading size, radio stack and button strings, so
     Clone, Close, Trash, Snooze and Expert Help all looked slightly
     different from each other and from the rest of the page.

     Header / body / footer, with the header tinted by the action so a
     destructive dialog cannot be mistaken for a routine one.
     ------------------------------------------------------------------ */
  /* Deliberately does NOT include `hidden`. Every modal controller does
     `modalTarget.classList.remove("hidden")`, which only works if `hidden`
     is a real class on the element. Baked in here it would set display:none
     with nothing to remove, and no modal would ever open. Each modal's root
     element carries `.hidden` itself; utilities win over components, so it
     overrides this rule's `flex` until the controller strips it. */
  .modal-backdrop {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4;
    background-color: rgb(17 24 39 / 0.6);
    backdrop-filter: blur(2px);
  }

  .modal-panel {
    @apply w-full max-w-lg overflow-hidden rounded-xl bg-white shadow-2xl;
  }

  .modal-header  { @apply flex items-center gap-3 border-b px-5 py-3.5; }
  .modal-icon    { @apply inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-sm; }
  .modal-title   { @apply text-base font-bold leading-tight; }
  .modal-body    { @apply max-h-[60vh] space-y-4 overflow-y-auto px-5 py-4; }
  .modal-footer  { @apply flex justify-end gap-2 border-t border-gray-200 bg-gray-50 px-5 py-3; }
  .modal-label   { @apply block text-xs font-semibold uppercase tracking-wide text-gray-500; }

  .modal-textarea {
    @apply mt-1.5 block min-h-0 w-full rounded-lg border-gray-300 px-3 py-2 text-sm shadow-sm
           focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500;
  }

  /* Reason radios as selectable rows. Native radio kept - it carries the
     checked state, keyboard behaviour and screen-reader semantics for free,
     and hiding it behind a fake dot buys nothing here. */
  .option-card {
    @apply flex cursor-pointer items-start gap-2.5 rounded-lg border border-gray-200 bg-white
           px-3 py-2 text-sm text-gray-700 transition-colors
           hover:border-gray-300 hover:bg-gray-50;
  }

  .option-card:has(input:checked) {
    @apply border-indigo-400 bg-indigo-50 text-indigo-900;
  }

  .option-card:has(input:focus-visible) {
    @apply ring-2 ring-indigo-500 ring-offset-1;
  }

  .option-radio {
    @apply mt-0.5 h-4 w-4 shrink-0 border-gray-300 text-indigo-600 focus:ring-indigo-500;
  }

  /* The app's own confirm / notice / name dialogs (utils/dialog.js). A native
     <dialog> is transparent scaffolding around .modal-panel: the browser's top
     layer puts it above the flash toasts, and ::backdrop replaces
     .modal-backdrop's tint so file_dropzone's open-modal count is unaffected. */
  /* max-w-lg (32rem) alone goes edge-to-edge at phone widths, overriding the
     UA's own dialog:modal { max-width: calc(100% - 6px - 2em) } gutter -
     every other modal keeps one via .modal-backdrop's p-4. cards_controller's
     "Payment card required" is the one customer-facing call site, exactly
     where phones show up, so keep a 1rem gutter on each side here too. */
  .app-dialog {
    @apply w-full max-w-[min(32rem,calc(100%-2rem))] border-0 bg-transparent p-0;
  }

  .app-dialog::backdrop {
    background: rgb(17 24 39 / 0.6);
    backdrop-filter: blur(2px);
  }

  /* ------------------------------------------------------------------
     Quote builder (flight_options/new)

     A full-screen composer rather than a dialog, so it gets a wider panel
     than .modal-panel, but the same header / body / footer anatomy - and
     the same rule that the header carries the colour of the action that
     opened it. Add Quote is .btn-primary, so this header is indigo.
     ------------------------------------------------------------------ */
  /* Wider than max-w-7xl since 2026-08-07: with the itinerary column capped
     (see .composer-grid) every pixel past 80rem lands in the cabin column,
     which is where a leg's six controls and their four inline labels have to
     fit on one line. On anything narrower the panel is viewport-bound as
     before, so this is purely headroom on a large display.

     94rem is where the cabin column stops needing more: with every control in
     it cut to its own longest value, the widest line it holds is a product
     band at ~750px, plus room for the band title beside it. Past this the
     panel would only be stretching whitespace across a big display. */
  .composer-panel {
    @apply flex w-full flex-col overflow-hidden rounded-xl bg-white shadow-2xl;
    max-width: 94rem;
    max-height: 92vh;
  }

  /* Itinerary left, cabin right.
     The left track is capped instead of being a share of the panel: a pasted
     VI* is monospace with a fixed maximum line width, so a proportional
     column (it was 3/5) grew past its own content and parked an empty strip
     down its right edge on every screen. 38rem = the longest VI* line
     (~62 mono characters at text-sm, ~31rem) plus the textarea's own padding
     and the section card's - enough that nothing wraps, with a little slack.

     The 60% is the floor of the deal, not decoration: the cap alone made a
     narrow panel WORSE than the 3/5 split it replaced, because 38rem is more
     than three fifths of anything under ~1000px and the cabin column would
     have paid for it. min() means the itinerary never takes more than its old
     share, so no width regresses - the cap only ever hands space over. */
  /* items-start, not the grid default of stretch: both columns are cards that
     end where their content ends. Stretched, the shorter of the two is painted
     down to the taller one's height - the itinerary card, which is the grid
     child itself, showing as dead white space under the paste box on any
     itinerary long enough to make the cabin column the taller row. */
  .composer-grid {
    @apply grid items-start gap-4;
    grid-template-columns: minmax(0, min(38rem, 60%)) minmax(0, 1fr);
  }

  .composer-section       { @apply rounded-lg border border-gray-200 bg-white p-4; }
  .composer-section-title { @apply mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-gray-500; }

  /* Empty states for the two turbo frames that fill in as you paste. */
  .composer-empty {
    @apply flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed
           border-gray-300 bg-gray-50 px-4 py-10 text-center text-sm text-gray-500;
  }

  /* Grows with its content (autosize_controller), and can still be dragged
     taller by hand. Width stays fixed - the grid owns that, and letting it
     grow would push the cabin column around.

     The floor is a little above the 180px this box used to be pinned to,
     because the column narrowed from 2/3 to 3/5 when the cabin panel took
     the space (and again in 2026-08-07's cap): the same height now holds
     fewer wrapped lines. min-height rather than height, so autosize has
     something to grow from and the box cannot be dragged below a readable
     size.

     Qualified with the element, same trap MASTER.md §4b records: the base
     `textarea.quote-field` rule near the bottom of this file applies min-h-0
     and is (0,1,1), so a bare `.composer-itinerary-input` (0,1,0) lost the
     min-height and an empty box opened two rows tall. */
  textarea.composer-itinerary-input {
    @apply resize-y font-mono;
    min-height: 12rem;
    max-height: 60vh;
  }
  /* Same deal as the itinerary box above: grows with its content and can be
     dragged taller by hand. It used to be pinned at 31rem, which held about
     three segment cards - a four-segment itinerary was cut off mid-card with
     nothing on screen to say the box scrolled.

     flex-none rather than flex-1 is the load-bearing part. As a flex child
     with flex-1 its height came from the flex layout, which overrides both
     the content height and whatever the drag handle writes, so the resize
     handle would have appeared and then done nothing.

     The ceiling is the larger of the old fixed cap and the viewport share the
     itinerary box uses. 60vh alone would have made this worse than it was on
     any screen under about 830px tall - a 13in laptop would have gone from
     496px to 480px, shrinking the very panel this set out to grow. Taking the
     max means it never regresses and still opens up on a tall display, and
     the modal (capped at 92vh) still owns the outer scroll. */
  /* container-type: the leg rows and product bands inside decide between
     one line and two on this box's own width - see the @container block
     under .product-band-title. */
  .composer-cabin-scroll {
    @apply flex-none resize-y overflow-y-auto;
    container-type: inline-size;
    min-height: 8rem;
    max-height: max(31rem, 60vh);
  }


  /* Boolean options as chips rather than a row of bare checkboxes. The
     native input stays - it carries the state, the keyboard behaviour and
     the screen-reader semantics. */
  .toggle-chip {
    @apply inline-flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200
           bg-white px-3 py-1.5 text-sm text-gray-700 transition-colors
           hover:border-gray-300 hover:bg-gray-50;
  }
  .toggle-chip:has(input:checked) { @apply border-indigo-400 bg-indigo-50 font-medium text-indigo-900; }
  .toggle-chip:has(input:focus-visible) { @apply ring-2 ring-indigo-500 ring-offset-1; }
  .toggle-chip input { @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500; }

  /* ------------------------------------------------------------------
     Parsed-itinerary panels: cabin rows and segment pricing

     Both used to label their inputs with dark <div> badges - which look
     like labels but are not, so every number field in the pricing forms
     reached a screen reader unlabelled. Real <label for> elements now,
     which also lets the label sit above the field and gives the row a
     readable rhythm instead of alternating dark blocks and boxes.
     ------------------------------------------------------------------ */
  /* py-2, not p-3: with the labels beside the boxes rather than above them
     the row is one control tall, and the padding is the only thing left
     deciding how many legs the scroller can show at once. */
  .cabin-row        { @apply rounded-lg border border-gray-200 bg-white px-3 py-2; }

  /* Every other leg on a grey wash, so a six-segment itinerary reads as
     separate rows rather than one field of boxes. Alternates on the leg's
     position in the whole itinerary, not within its product band - the bands
     break the sequence up visually already, and restarting the stripe at each
     one would put two greys or two whites against each other across a band.
     Kept off the product bands themselves, which have their own indigo wash.

     Written as a compound selector, not a bare `.cabin-row-alt`: the two
     rules have equal specificity and Tailwind emitted this one ahead of
     `.cabin-row` in the built file, so bg-white won the order tie and the
     stripe never appeared. gray-100 rather than gray-50 because the row sits
     on a white card - gray-50 is a shade the eye does not register there. */
  .cabin-row.cabin-row-alt { @apply bg-gray-100; }
  .cabin-row + .cabin-row { @apply mt-2; }

  /* A leg on one line: which leg it is, its three controls, which product it
     prices under. items-end so the badge and route sit on the field boxes'
     baseline rather than the labels above them.

     On a cabin panel too narrow for that line it goes back to the two-line
     shape this replaced: route and product on top, the three controls full
     width underneath. Done with order/flex-basis rather than by letting
     flex-wrap decide, because plain wrapping put the product selector on a
     line of its own. The breakpoint is the panel's own width - see the
     @container block below. */
  /* The four controls are fixed-width and packed together at the right; the
     route takes the slack. Sizing them off the row instead (cabin flex-1)
     left a hole between Weight and Product on a wide panel, and made Cabin
     four times the width of the box beside it. Fixed widths also mean every
     row's controls line up in the same columns for free - the route block no
     longer has to be a fixed width to hold that alignment. */
  /* A one-line leg needs ~739px since 2026-10-09: route floor 128, Cabin
     160 and Bags/Weight/Product 64 each with their labels at a 4px gap, the
     line's gaps and the row's padding. It was 795 with the three short boxes
     at w-20 and a 6px label gap, which a MacBook's ~754px cabin panel could
     not hold, so every leg stacked there (owner, 2026-10-09). */
  .cabin-line          { @apply flex flex-wrap items-center gap-2; }
  .cabin-line-identity { @apply flex min-w-32 flex-1 items-center gap-2; }
  .cabin-line-fields   { @apply flex shrink-0 items-center gap-2; }
  .cabin-line-product  { @apply flex shrink-0 items-center gap-1; }

  /* Label beside the box, not above it - shared by the leg rows above and
     the product band below. A stacked label costs ~18px of height on every
     row, and height is the scarce dimension here: the cabin scroller shows
     four legs at a time and a long itinerary has eight. It buys that back in
     width, which is why the fallback fires ~200px later than it did when the
     labels sat on top. */
  .quote-inline-field { @apply flex min-w-0 items-center gap-1; }
  .quote-inline-label { @apply field-key shrink-0; }

  .cabin-index      { @apply inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md
                             bg-gray-700 px-1.5 text-xs font-bold tabular-nums text-white; }
  .cabin-route      { @apply text-sm font-semibold tracking-tight text-gray-900; }

  /* Ticket source and fare type are true of a whole product, not of one leg.
     They used to render in every leg row beside Cabin and Bags - which are
     per-leg - so changing one silently rewrote the others and the cascade had
     to special-case it. One band per product says it once, in a place that
     looks like it means the product. */
  .product-band       { @apply rounded-lg border border-indigo-200 bg-indigo-50/50 px-3 py-2; }
  .product-band + .cabin-row { @apply mt-2; }
  .cabin-row + .product-band { @apply mt-2; }

  /* Same treatment as .cabin-line, for the same reason: the band's title and
     its two product-wide selects sit on one line with the labels beside the
     boxes, so a two-product quote spends ~80px on bands instead of ~170.
     No margin under the title - the row's own gap spaces it from the fields
     when they wrap to their own line on a narrow panel. */
  /* gap-3, where the leg rows use gap-2: the title and the first label are
     both small uppercase type, so at 8px "#1-#2 TICKET SOURCE" read as one
     run. The leg rows do not need it - a dark badge starts theirs. */
  .product-line        { @apply flex flex-wrap items-center gap-3; }
  /* The fields grow into the line and Source takes the growth, floored at
     the 16rem its longest label needs. On one line that only closes the gap
     after the title. When a long title ("#1, #2, #5, #6") pushes the fields
     onto their own line, they fill it - the same shape the stacked layout
     gives every band on a narrow panel - instead of stopping at their fixed
     widths with the rest of the line empty beside one-line legs. */
  .product-line-fields { @apply flex shrink-0 grow items-center gap-3; }
  .product-line-fields > .quote-inline-field:first-child { @apply flex-1; }
  .product-line-fields > .quote-inline-field:first-child .searchable-select { @apply w-full min-w-64; }
  /* whitespace-nowrap because it is a flex item that may be squeezed: at the
     tight end of the one-line range it was shrinking below its own text and
     breaking "PRODUCT 1 . #1-#2" across two lines, which made the band taller
     than the legs it heads. */
  .product-band-title  { @apply flex flex-1 items-center gap-2 whitespace-nowrap text-xs
                                font-semibold uppercase tracking-wide text-indigo-800; }

  /* One breakpoint for both the bands and the legs, measured rather than
     picked. Set too low, a leg row did not stack - it wrapped the Product
     selector onto a line of its own. Set per-block, the bands stacked while
     the legs beside them did not, which read as breakage rather than design.
     Move this and the two blocks move together. It sits below both blocks'
     own rules so it outranks them on source order.

     It is the cabin panel's width (.composer-cabin-scroll), not the
     window's. It was `@media (max-width: 1520px)`, but past 1520 the panel
     is capped at 94rem, so the cabin column stops at ~814px - and Windows
     scrollbars, the modal body's and this box's own at 17px each, take that
     to 780, under the 795px a one-line leg row needs (route floor 128,
     Cabin/Bags/Weight 478, Product 147, gaps 16, row padding and border 26;
     browser probe, 2026-10-09). On a wide Windows window the rows then
     wrapped by themselves, Product alone on a second line (owner's
     screenshot, 1536x730: a 1920x1080 screen at 125%).

     46.5rem (744px) is the one-line leg's ~739px (see .cabin-line) plus a
     few pixels for rounding. A band whose segment list runs long ("#1, #2,
     #5, #6") can still wrap on its own above this - its title has no fixed
     width to measure - and takes the stacked shape when it does (see
     .product-line-fields). */
  @container (width < 46.5rem) {
    /* Only Ticket source flexes, same rule as Cabin below: an even split
       between the two gave Fare type more than "Corporate Fare" needs while
       cutting the longer label short. Fare type keeps its measured width and
       Ticket source takes the rest of the line, under its 16rem floor if the
       panel is that narrow. */
    .product-line-fields { flex-basis: 100%; }
    .product-line-fields > .quote-inline-field:first-child .searchable-select { @apply min-w-0; }

    .cabin-line-fields  { flex-basis: 100%; order: 3; }
    .cabin-line-product { order: 2; margin-left: auto; }

    /* On their own line only Cabin is re-cut: it takes whatever is left, so
       "Premium Economy" reads in full down to about a 1250px panel and
       truncates below that, where everything is tight anyway. Bags and Weight
       keep the width they have on the wide row - they are the pair sitting
       side by side, and cutting one to fit would be the uneven look this was
       fixing. The width sits on the .searchable-select wrapper (the select
       inside it is sr-only), and the selector carries three classes, so it
       outranks the w-* utilities in the markup. */
    .cabin-line-fields > .quote-inline-field:first-child { @apply min-w-0 flex-1; }
    .cabin-line-fields > .quote-inline-field:first-child .searchable-select { @apply w-full; }
  }



  /* An edit on one cabin row fills the rows below it. The tint says how far it
     reached - the cascade overwrites without asking, so the agent needs to see
     which rows it just rewrote.

     An animation, not a transition. A transition had to live on the select
     itself, and `.cabin-row select.quote-field` (0,2,1) outranks the base
     `select.quote-field` (0,1,1) - so it also stretched every hover and focus
     border fade in the cabin rows from 150ms to the tint's duration, on the
     controls an agent hovers most. An animation touches nothing but the tinted
     field, ends on its own with no timer to clear, and replays from the top
     when the class is re-applied to a field rewritten twice in a second. */
  @keyframes cabin-cascade-tint {
    0%, 50% { background-color: theme(colors.indigo.50); }
    100%    { background-color: theme(colors.white); }
  }
  .cabin-row select.field-cascaded { animation: cabin-cascade-tint 1s ease-out; }
  /* The native select is what the cascade tints, and it is invisible once
     searchable_select_controller takes over - so the input standing in for it
     is tinted too, by the same animation on the same terms. */
  .cabin-row .searchable-select-input.field-cascaded { animation: cabin-cascade-tint 1s ease-out; }

  /* ── type-to-search dropdowns ─────────────────────────────────────────
     The six cabin fields. searchable_select_controller keeps the native
     <select> as the value and hides it behind an input it can filter; these
     are the classes for the input, and for the panel it renders.

     The select is hidden the sr-only way rather than with display:none.
     The cascade tint above is a CSS animation on the select and animationend
     never fires on an undisplayed element - the class would stick there
     forever, and the mirrored tint on the input with it. */
  .searchable-select        { @apply relative; }
  .searchable-select-native { @apply sr-only; }

  /* The input's chevron is declared below input.field-input, at the end of
     the quote-builder form fields block - it has to beat that rule's px-2
     on source order, and up here it lost. */

  /* Parented to <body> and fixed, because the cabin box is a scroller with
     its own overflow and an absolutely positioned panel is cut off at the
     fourth leg. Position and height are set by the controller, which is the
     only thing that knows where the field ended up; everything static is
     here. Above .modal-backdrop's z-50 - the builder is itself a modal, so a
     panel at or below it opens behind the form that asked for it. */
  .searchable-select-panel {
    @apply fixed overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg;
    z-index: 60;
  }

  .searchable-select-group {
    @apply px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-400;
  }

  /* No hover rule: the highlight is one state, driven by the controller, and
     the arrow keys move it. A separate hover tint means two things look
     chosen whenever the pointer rests over the list while typing. */
  .searchable-select-option {
    @apply flex cursor-pointer flex-col gap-0.5 px-3 py-1.5 text-sm text-gray-900;
  }
  .searchable-select-option[data-highlighted="true"] { @apply bg-indigo-50; }
  .searchable-select-option[aria-selected="true"]    { @apply font-semibold; }
  .searchable-select-option[aria-disabled="true"]    { @apply cursor-not-allowed text-gray-400; }

  .searchable-select-label { @apply tabular-nums; }
  /* The operator's note on a source - which partners it reaches, how long it
     takes. Second line rather than beside the label: the labels are already
     the width of the box once the two rates are in them. */
  .searchable-select-note  { @apply text-xs leading-tight text-gray-500; }

  .searchable-select-empty { @apply px-3 py-2 text-sm text-gray-500; }

  /* The airport pickers' list: the new-lead form and the leads filter
     (shared/_airport_search_input) and a lead's Flight Route
     (inline_edit_controller), its rows from utils/airport_options.js. Drawn
     like the searchable select above, with one highlight: the arrow keys and
     the pointer both move it, so there is no hover tint and two rows never
     look chosen at once. */
  .airport-list {
    @apply overflow-y-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg;
  }
  /* The Flight Route's list hangs off <body>, so a table cell never clips it;
     the controller places it under the field. Above .modal-backdrop's z-50,
     as .searchable-select-panel is. */
  .airport-list-floating {
    @apply fixed max-h-56 min-w-56;
    z-index: 60;
  }
  .airport-option { @apply flex cursor-pointer flex-col gap-0.5 px-3 py-1.5; }
  .airport-option[data-highlighted="true"] { @apply bg-indigo-50; }
  .airport-option-head { @apply flex items-center justify-between gap-2; }
  .airport-option-city { @apply truncate text-sm font-medium text-gray-900; }
  .airport-option-code {
    @apply shrink-0 rounded bg-gray-100 px-1.5 py-0.5 text-xs font-semibold tabular-nums text-gray-700;
  }
  .airport-option[data-highlighted="true"] .airport-option-code { @apply bg-indigo-100 text-indigo-800; }
  .airport-option-detail { @apply truncate text-xs leading-tight text-gray-500; }
  .airport-option-all { @apply font-medium text-indigo-700; }
  .airport-list-empty { @apply px-3 py-2 text-sm text-gray-500; }

  /* Same type treatment as .field-key on the lead page, as a block with
     breathing room for stacked form fields. Composed from it so the two
     never drift. */
  .field-label      { @apply field-key mb-1 block; }


  .price-product {
    @apply flex flex-wrap items-center gap-2 rounded-t-lg border border-b-0 border-indigo-200
           bg-indigo-50 px-3 py-2 text-sm font-semibold text-indigo-900;
  }
  .price-product-index {
    @apply inline-flex items-center rounded-md bg-indigo-100 px-2 py-0.5 text-xs font-bold text-indigo-800;
  }
  .price-body { @apply flex flex-wrap items-end gap-3 rounded-b-lg border border-gray-200 bg-white p-3; }
  /* A vertical rule between the per-passenger fares and the fees that
     follow them, so the row reads as two groups rather than nine boxes. */
  .price-divider { @apply mx-1 h-9 w-px shrink-0 self-end bg-gray-200; }

  /* ------------------------------------------------------------------
     Itinerary — GDS and graphic modes

     GDS mode is a real grid. The previous markup width-constrained only the
     flight number and space-separated the rest, so nothing lined up between
     rows and the eye could not run down a column. Every field now gets a
     fixed track.

     The day-offset track sits between arrival and cabin: rendered inline it
     pushed the arrival time out of alignment on exactly the rows where
     alignment matters. It is empty on most rows, which is the point.
     ------------------------------------------------------------------ */
  /* Tracks are measured in `ch` — one character of the monospace font — and
     sized to their longest possible content, with a uniform 1ch gap.

     Sizing them in rem meant guessing: a track wider than its content left
     slack, and where content is left-aligned that slack lands against the
     next column and reads as a wider gap. `JFK LHR` in a 4.6rem track is
     4.2rem of text, and that 0.4rem is what made the row look ragged.

     The flight-number track is 4ch because flight numbers run to four
     digits, and right-aligned so the slack on a short number (EK 1) falls
     away from the airline rather than between them. */
  /* Banding, as a class rather than a bare bg-gray-50 on the row: utilities
     outrank this layer, so a raw utility here could never be re-coloured by
     the booked wash below. */
  .gds-row-alt { @apply bg-gray-50; }
  .gds-row {
    @apply grid items-baseline px-1 font-mono text-xs leading-6 tabular-nums;
    gap: 0 1ch;
    grid-template-columns:
      2ch  /* segment number */
      2ch  /* airline IATA */
      4ch  /* flight number, right aligned, up to 4 digits */
      7ch  /* "JFK LHR" */
      5ch  /* "12MAR" */
      4ch  /* departure "1900" */
      4ch  /* arrival "0710" */
      2ch  /* day offset "+1" */
      5ch; /* cabin "FIRST" */
  }

  /* Graphic mode. */
  /* min-width, not a fixed width. The layover chip ("3h 48m layover") is
     wider than an airport code, and in a fixed 5rem node it overflowed to
     one side and read as misaligned. Letting the node grow to its widest
     child keeps the code, the times and the chip on one centre line. */
  .itinerary-node { @apply min-w-20 shrink-0 px-1 text-center; }
  /* The leg is dropped 0.375rem so the flight line meets the airport code's
     baseline. That drop is a margin, not `position: relative; top`: a
     relative offset paints outside the box without growing it, so the row -
     which is `overflow-x-auto`, and therefore clips vertically too - cut the
     last line off the tallest leg label ("9h 25m · Boeing 787-8 Dreamliner").
     As a margin the same 6px is in flow and the row grows to hold it. */
  .itinerary-leg  { @apply min-w-20 flex-1 px-2; margin-top: 0.375rem; }

  .itinerary-line { @apply relative h-px bg-gray-300; }
  .itinerary-line::after {
    content: "\f072"; /* Font Awesome plane */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    @apply absolute left-1/2 -translate-x-1/2 bg-white px-1 text-xs text-indigo-500;
    top: -0.5rem;
  }

  .itinerary-stop {
    @apply mt-1 inline-flex items-center gap-1 whitespace-nowrap rounded-full px-1.5 py-px
           text-xs font-bold tabular-nums ring-1 ring-inset;
  }
  .itinerary-stop-normal    { @apply bg-orange-50 text-orange-800 ring-orange-600/25; }
  /* Long enough to be worth flagging while quoting - see
     ItinerariesHelper::LONG_LAYOVER_MINUTES. */
  .itinerary-stop-long      { @apply bg-red-50    text-red-800    ring-red-600/25; }
  /* Same flight continuing; the passenger stays onboard, so this is a stop
     but not a connection to make. Deliberately not orange or red. */
  .itinerary-stop-technical { @apply bg-slate-100 text-slate-600  ring-slate-400/30; }

  /* An airport change (JFK -> LGA) is a journey between two airports, not
     time spent inside one, so it must not read as a layover badge. It takes
     the flight line's spot in the row - same flex-1 sizing, same baseline -
     but the dashed connector and missing plane icon keep it from reading as
     a flight leg either. */
  .itinerary-transfer      { @apply min-w-20 flex-1 px-2; margin-top: 0.375rem; }
  .itinerary-transfer-line { @apply relative h-px border-t border-dashed border-gray-300; }

  /* Graphic mode needs more width than the itinerary side column has, and
     the pricing table has width to spare: its figures top out around eight
     characters ("99,999.99"), yet it holds two thirds of the card.
     Switching modes re-proportions the split rather than moving anything.

     In GDS mode the itinerary column is as wide as its rows. The GDS row is
     a fixed nine-track grid ending in the cabin, and as a third of the card
     (8 of 12 columns to 4) it was narrower than that row on most screens -
     22px short even at a 1920 window - so it scrolled sideways to show
     "FIRST" (owner, 2026-10-09). Measured in a browser: the row needs ~336px
     with its padding, the pricing table ~420px.

     The pricing table keeps its own width first (min-content floor) and the
     itinerary takes up to its rows (max-content cap) out of the rest. A
     first try floored the itinerary instead, and under a ~1475px window that
     pushed the scroll onto the pricing and cut the Selling column off. Where
     both fit - most screens - neither scrolls; where they cannot, the
     itinerary scrolls, by less than it did as a third.
     The columns live here, not as grid-cols-12 on the markup - a utility
     outranks this layer and would override them. */
  .quote-grid { grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content); }
  /* In graphic mode the timeline stops being a side column and takes the
     full width above the pricing. Even at 7 of 12 it was running right up
     to its edge, and a horizontal timeline squeezed into a narrow column is
     the one thing this mode exists to avoid.

     `order` puts it first without moving anything in the markup, so GDS
     mode keeps the side-by-side layout and the DOM stays in the order that
     reads correctly to a screen reader in both. */
  .quote-grid.is-graphic { grid-template-columns: minmax(0, 1fr); }
  .quote-grid.is-graphic > .quote-itinerary { order: 1; }
  .quote-grid.is-graphic > .quote-pricing   { order: 2; }

  /* GDS mode is compact, and a ten-segment itinerary scrolling inside a
     capped box is fine there. Graphic mode is the opposite: it exists to be
     read at a glance, so capping it defeats the point. */
  .itinerary-scroll { @apply max-h-40 overflow-auto; }
  /* Past six legs the box scrolls down (max-h-40 holds six 24px .gds-row
     lines), and a classic (Windows) scrollbar took 17px the quote grid had
     not measured, which cut the cabin off again. A stable gutter is always
     there, so the grid counts it. Only on a box that will scroll, which a
     seventh row says: on every box it was 17px of blank on Windows, enough
     to clip a 5-digit quote's FIRST at a 1536 window. Overlay (Mac)
     scrollbars take no room either way. The seventh row is read here, next
     to the height it follows from, so the two change together (a helper
     once counted the rows in Ruby; review of #160). */
  .itinerary-scroll:has(.gds-row:nth-child(7)) { scrollbar-gutter: stable; }
  .quote-grid.is-graphic .itinerary-scroll { @apply max-h-none overflow-visible; }

  /* As a side column the itinerary is divided by a left rule; stacked above
     the pricing that rule would sit across the top of the card, so it
     becomes an underline instead. */
  .quote-itinerary-body { @apply border-l border-gray-200 pl-4; }
  .quote-grid.is-graphic .quote-itinerary-body {
    @apply border-b border-l-0 border-gray-200 pb-3 pl-0;
  }

  /* ------------------------------------------------------------------
     Quote pricing table

     Same six columns as before. What changed is that the currency was
     repeated on all 24 cells, which is what stopped the figures reading as
     columns - it now appears once, under the table. Cells are tighter, and
     a single rule separates what the ticket costs from what you make on it.
     ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------
     Won quote — booked or sold

     The status badge is one pill among five, on a card carrying an
     itinerary, a pricing table and a row of buttons. On a lead with eight
     quotes, finding the one that came through meant reading every card. The
     whole card takes a green wash instead, so it is found at a glance — and
     FlightOption.won_first sorts it to the top, because at fifty quotes a
     wash you have to scroll to is not much better than a badge.

     Sold gets the same wash as booked: they are the same news to an agent
     scanning the list, and the badge still tells them apart.

     Everything below it is the same rule applied inward: a wash only works
     if nothing inside the card paints its own white or grey background, or
     that background reads as a hole punched through it. No `bg-` utility may
     sit on .quote-won itself for the same reason — utilities outrank this
     layer, so the view drops the hidden section's bg-gray-50 rather than
     layering the two.
     ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------
     Bookmarked lead — the leads index

     The bookmark is one small icon in a column of them, and on a page of
     fifty rows finding the leads you marked meant reading that column. The
     row takes a wash instead, in the amber the bookmark itself already wears
     (.fa-bookmark.text-amber-500 in leads/_favorite_button) — the same rule
     .quote-rejected follows in taking the REJECTED badge's red.

     Hover deepens rather than switching to the table's indigo: the pointer
     is exactly when you are about to act on the row, and the mark going out
     underneath it is the one moment it must not.

     No zebra utility may sit on this row — odd:/even:/hover: are utilities
     and outrank this layer, so LeadsHelper#lead_row_classes returns the wash
     OR the striping, never both. Suppressed entirely in the Favourites
     queue, where every row is a mark.
     ------------------------------------------------------------------ */
  .lead-row-favorite       { @apply bg-amber-50; }
  .lead-row-favorite:hover { @apply bg-amber-100; }

  .quote-won { @apply bg-green-50; }
  /* Grey band across the wash otherwise. */
  .quote-won .price-total td { @apply border-gray-400/40 bg-green-100/70; }
  /* The number the card exists to communicate. Emerald-50 against white is a
     highlight; against the wash it is invisible, so it deepens instead. */
  .quote-won .price-sell { @apply bg-emerald-100/70; }
  .quote-won .price-total .price-sell { @apply bg-emerald-200/70; }
  /* The plane icon hides the flight line behind an opaque disc, which has to
     be the colour of the card rather than white. */
  .quote-won .itinerary-line::after { @apply bg-green-50; }
  .quote-won .gds-row-alt { @apply bg-green-100/60; }

  /* The same treatment for the booking that fell apart (2026-08-21), in the
     red the REJECTED badge already wears. Every rule below mirrors a
     .quote-won rule above, for the same stated reason. */
  .quote-rejected { @apply bg-red-50; }
  .quote-rejected .price-total td { @apply border-gray-400/40 bg-red-100/70; }
  .quote-rejected .price-sell { @apply bg-red-100/70; }
  /* The wash mirrored the backgrounds but the emerald text rule at
     .price-total .price-sell outranks nothing at three classes deep - left
     alone, the failed booking's biggest number still wears the success
     colour. Red-800 mirrors the emerald-800 depth. */
  .quote-rejected .price-total .price-sell { @apply bg-red-200/70 text-red-800; }
  .quote-rejected .itinerary-line::after { @apply bg-red-50; }
  .quote-rejected .gds-row-alt { @apply bg-red-100/60; }

  /* Drag-to-reorder (quote_order_controller). The grip sits at the head of
     the card's identity row, quiet until hovered: it is an affordance, not
     information. The card being dragged fades and stands in for where it
     will land; the cards it displaces slide into their new places, which is
     the whole indication of where the drop goes. The slide is a transform
     the controller sets and clears (FLIP), so this class is only the
     transition - and only for people who have not asked for reduced motion,
     for whom the cards simply swap. */
  /* Sized explicitly: left to the glyph, the hit target is the glyph. */
  .quote-drag-handle { @apply -ml-1 inline-flex h-6 w-5 cursor-grab items-center justify-center text-gray-300 hover:text-gray-500 focus:outline-none focus-visible:text-gray-500; }
  .quote-drag-handle:active { @apply cursor-grabbing; }
  .quote-dragging { @apply opacity-40; }
  .quote-order-shift { @apply motion-safe:transition-transform motion-safe:duration-150 motion-safe:ease-out; }

  .price-table       { @apply w-full text-sm tabular-nums; }
  /* whitespace-nowrap: since the quote card sizes this column to the table
     (.quote-grid), a narrow card holds it at its min-content, which broke
     "Min mrkp" onto two lines. One line costs the itinerary 8px. */
  .price-table th    { @apply whitespace-nowrap px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500; }
  .price-table td    { @apply px-2 py-1.5; }
  .price-num         { @apply text-right; }
  /* Cost ends here, margin begins. */
  .price-divide      { @apply border-l border-gray-200; }
  /* The number the whole card exists to communicate. */
  .price-sell        { @apply bg-emerald-50/60 text-right font-semibold; }
  /* The whole total row reads at the larger size, not just the selling cell:
     the totals are what an agent scans for, and one big number in a row of
     small ones made the rest look like a footnote. */
  .price-total td    { @apply border-t-2 border-gray-300 bg-gray-50 text-base font-bold; }
  .price-total .price-sell { @apply text-emerald-800; }
  /* A floor you check, not a figure you read. */
  .price-floor       { @apply text-right text-gray-400; }
  .price-caption     { @apply mt-1 pr-2 text-right text-xs text-gray-400; }
  /* What the agency keeps on the booking. It sits in the card header beside the
     currency rather than in the pricing table: it is one figure about the whole
     booking, and breaking it out per passenger type gave the agent three
     numbers where only their sum was ever acted on. */
  .quote-profit      { @apply inline-flex items-center gap-1.5 font-semibold tabular-nums text-emerald-700; }
  .quote-profit i    { @apply text-emerald-600; }
  /* Under water: a cost rise absorbed into the markup, or fees larger than
     the margin. In emerald a minus sign was the only thing saying so. */
  .quote-profit-loss   { @apply text-red-700; }
  .quote-profit-loss i { @apply text-red-600; }
  /* A split booking's own figure: counted in the original's chip, so greyed
     like the tabs' profit cell (split-booking spec, Part 5). */
  .quote-profit-counted   { @apply text-gray-400; }
  .quote-profit-counted i { @apply text-gray-400; }

  /* ------------------------------------------------------------------
     Payment portal money bar

     Four figures in one row, each carrying a hue for its part in the story:
     rose is money out, amber what we added, sky what the customer pays,
     emerald what is left. All are washes of the same weight.

     There was a fifth, indigo: Charge on merchant, what we key into the
     terminal. Its tile was deleted on request (2026-08-21) and its
     .money-tile-merchant rules went with it - see _money_bar.html.haml for
     the history the bar carries.

     The three lines are classes rather than repeated utility strings
     because there are several of them, and the previous version had already
     drifted - one tile's note carried tabular-nums the others lacked.
     ------------------------------------------------------------------ */
  .money-tile       { @apply bg-white p-4; }
  .money-tile-label { @apply text-xs font-semibold uppercase tracking-wide text-gray-500; }
  .money-tile-value { @apply mt-1 text-xl font-bold tabular-nums text-gray-900; }
  .money-tile-note  { @apply mt-1 text-xs text-gray-400; }

  .money-tile-cost       { @apply bg-rose-50; }
  .money-tile-cost .money-tile-label { @apply text-rose-700; }
  .money-tile-cost .money-tile-note  { @apply text-rose-500/80; }

  .money-tile-extras     { @apply bg-amber-50; }
  .money-tile-extras .money-tile-label { @apply text-amber-700; }
  .money-tile-extras .money-tile-note  { @apply text-amber-600/80; }

  .money-tile-total      { @apply bg-sky-50; }
  .money-tile-total .money-tile-label { @apply text-sky-700; }
  .money-tile-total .money-tile-note  { @apply text-sky-600/80; }

  .money-tile-profit     { @apply bg-emerald-50; }
  .money-tile-profit .money-tile-label { @apply text-emerald-700; }
  .money-tile-profit .money-tile-value { @apply text-emerald-900; }
  .money-tile-profit .money-tile-note  { @apply text-emerald-600/80; }

  /* Under water - fees larger than the margin, or a price renegotiated below
     cost. Same rule as the quote card's profit chip. */
  .money-tile-profit.money-tile-loss { @apply bg-red-50; }
  .money-tile-loss .money-tile-label { @apply text-red-700; }
  .money-tile-loss .money-tile-value { @apply text-red-900; }
  .money-tile-loss .money-tile-note  { @apply text-red-500/80; }

  /* The split-booking review and undo pages' third tile/column: what moves
     to (or returns from) the new sale. Violet is the app's own split colour
     (see .quote-menu-item-split, .btn-snooze's family) rather than a new
     accent - it also tints the amounts table's split column. */
  .money-tile-split { @apply bg-violet-50; }
  .money-tile-split .money-tile-label { @apply text-violet-700; }
  .money-tile-split .money-tile-value { @apply text-violet-900; }
  .money-tile-split .money-tile-note  { @apply text-violet-600/80; }

  /* ------------------------------------------------------------------
     Split booking, step 1 (booking_splits/_steps, _selection,
     _selection_rail)

     The step bar: two steps joined by a hairline. The current step's
     number sits in a filled indigo circle - the same circle as the "1" on
     the passengers panel - a done step is ticked and links back, and the
     next one is grey. The joining line is the second step's ::before rather
     than an element of its own, so the list holds exactly its two steps.
     ------------------------------------------------------------------ */
  .split-steps { @apply flex items-center gap-3 text-sm; }
  .split-step  { @apply flex items-center gap-3 text-gray-500; }
  .split-step + .split-step::before { content: ""; @apply h-px w-12 bg-gray-300; }
  .split-step-mark {
    @apply flex h-6 w-6 flex-none items-center justify-center rounded-full bg-white text-xs font-bold
           tabular-nums text-gray-500 ring-1 ring-inset ring-gray-300;
  }
  .split-step-label { @apply font-medium; }
  .split-step-current { @apply text-gray-900; }
  .split-step-current .split-step-mark  { @apply bg-indigo-600 text-white ring-indigo-600; }
  .split-step-current .split-step-label { @apply font-semibold; }
  .split-step-done { @apply text-indigo-700; }
  .split-step-done .split-step-mark { @apply bg-indigo-100 text-indigo-700 ring-indigo-200; }
  .split-step-done + .split-step::before { @apply bg-indigo-300; }
  .split-step-link { @apply flex items-center gap-3 rounded-md; }
  .split-step-link[href] { @apply focus-ring; }
  .split-step-link[href]:hover .split-step-label { @apply underline; }

  /* The passenger rows. A click anywhere on a row ticks it
     (split_selection_controller#rowClick), so the row is the pointer. A
     ticked row turns violet, the split colour above, with a bar down its
     left edge and a "Moves" tag by the name. The ticked checkbox is the
     real signal; the rest repeats it. The colour and the tag both read
     data-moving, which the server draws first and the controller keeps in
     step with the box, rather than a class of their own, so they cannot
     disagree with it. */
  .split-table input[type="checkbox"] { @apply accent-violet-600; }
  .split-row { @apply cursor-pointer transition-colors hover:bg-gray-50; }
  .split-row[data-moving="true"] { @apply bg-violet-50 hover:bg-violet-100; }
  .split-row[data-moving="true"] > td:first-child { box-shadow: inset 3px 0 0 0 theme('colors.violet.500'); }
  /* Declared after .badge, so display:none wins their tie. */
  .split-moves-tag { @apply hidden bg-violet-100 text-violet-800 ring-violet-600/20; }
  .split-row[data-moving="true"] .split-moves-tag { @apply inline-flex; }

  /* The rail's preview, two columns split by a hairline: who stays (an
     emerald dot, the review's "Stays on" green) and who moves (a violet
     dot, the rows' colour). The controller writes an empty side as
     li.text-gray-400 "Nobody yet"; that grey is under 4.5:1 on white, so
     here it reads gray-500. A name's li has no class at all, so li[class]
     is that line. Not li.text-gray-400: a utility's name in a selector here
     makes Tailwind copy the rule into every component that @applies
     text-gray-400. The hints list takes no room until the controller has a
     hint to put in it. */
  .split-rail-title { @apply flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-gray-600; }
  .split-preview { @apply grid grid-cols-2 divide-x divide-gray-100; }
  .split-preview-side { @apply min-w-0 pr-3; }
  .split-preview-side + .split-preview-side { @apply pl-3 pr-0; }
  .split-preview-dot { @apply h-2 w-2 flex-none rounded-full; }
  .split-preview-side-stays .split-preview-dot { @apply bg-emerald-500; }
  .split-preview-side-moves .split-preview-dot { @apply bg-violet-500; }
  .split-preview-list { @apply mt-1.5 space-y-0.5 pl-4 text-sm font-medium text-gray-900; }
  .split-preview-list li[class] { @apply font-normal italic text-gray-500; }
  .split-hints:not(:empty) {
    @apply mt-3 space-y-1 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-900 ring-1 ring-inset ring-amber-200;
  }

  /* ------------------------------------------------------------------
     Split booking, step 2 and undo: the picture (booking_splits/_diagram)

     The booking drawn as boxes joined by lines: one branching into two
     on the review, two merging back into one on the undo page. Three
     columns: the left boxes, 4rem of lines, the right boxes. The lines'
     box is placed in the middle column here, so the partial draws both
     sides from one loop. A side of two boxes is two equal rows with a
     box centred in each (equal margins, no gap), which puts the boxes'
     middles 25% and 75% down, where the lines end; a lone box is centred,
     at 50%. The svg fills its column absolutely, so it never sets the
     height, only follows it.

     A white box with a coloured top edge, its title in the same hue: sky
     for the booking as it is (the money bar's "what the customer pays"),
     emerald for what stays (the step 1 preview's dot), violet, the split
     colour, for what moves or is removed. The hue reads data-tone rather
     than a class per tone: the partial writes the tone from the box, and
     Tailwind would drop a class name it never sees written out whole.
     Names run as a comma list, which stays a line or two for a family of
     nine where chips would stack. The paid line is gray-500, not 400,
     which is under 4.5:1 on white.
     ------------------------------------------------------------------ */
  .split-diagram { @apply grid; grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr); }
  /* The pair is a grid of its own, never the lone side's flex box made a
     grid: justify-content: center on a grid shrinks its column to the
     names' width and centres it, short of the lines' ends. */
  .split-diagram-single { @apply flex min-w-0 flex-col justify-center; }
  .split-diagram-pair   { @apply grid min-w-0 grid-rows-2; }
  .split-diagram-pair > .split-diagram-card { @apply my-2; }
  .split-diagram-lines { @apply relative col-start-2 row-start-1; }
  .split-diagram-lines svg { @apply absolute inset-0 h-full w-full overflow-visible; }
  .split-diagram-line { @apply fill-none stroke-gray-400; stroke-width: 1.5; }

  .split-diagram-card { @apply min-w-0 rounded-xl border-t-4 bg-white px-4 py-3 shadow-sm ring-1 ring-gray-900/5; }
  .split-diagram-title { @apply text-xs font-semibold uppercase tracking-wide; }
  .split-diagram-total { @apply mt-1 text-xl font-bold tabular-nums text-gray-900; }
  .split-diagram-names { @apply mt-1.5 text-sm text-gray-700; }
  .split-diagram-names li { @apply inline; }
  .split-diagram-names li:not(:last-child)::after { content: ", "; }
  .split-diagram-paid { @apply mt-1.5 text-xs text-gray-500; }

  .split-diagram-card[data-tone="now"] { @apply border-sky-500; }
  .split-diagram-card[data-tone="now"] .split-diagram-title { @apply text-sky-700; }
  .split-diagram-card[data-tone="stays"],
  .split-diagram-card[data-tone="after"] { @apply border-emerald-500; }
  .split-diagram-card[data-tone="stays"] .split-diagram-title,
  .split-diagram-card[data-tone="after"] .split-diagram-title { @apply text-emerald-700; }
  .split-diagram-card[data-tone="moves"],
  .split-diagram-card[data-tone="removed"] { @apply border-violet-500; }
  .split-diagram-card[data-tone="moves"] .split-diagram-title,
  .split-diagram-card[data-tone="removed"] .split-diagram-title { @apply text-violet-700; }

  /* ------------------------------------------------------------------
     Quote tag chip

     PNR, fare type, ticket source, MP and HIDDEN used to sit on the card as
     up to six chips. They said what the quote IS six times over, in five
     hues, next to the one badge an agent actually scans a stack of cards
     for - its state. They open on hover or focus now.

     Hover AND focus-within, not hover alone: the panel holds the PNR, and a
     keyboard user has to be able to reach it. The trigger is a real button
     so it lands in the tab order to make that possible.

     The panel takes pointer events. It was pointer-events-none for a day so
     it could not swallow clicks aimed at the pricing table it overlaps - but
     that made the PNR it holds impossible to select: hovering the panel fell
     through to the card and closed it, and a mousedown to start a selection
     blurred the trigger. The PNR is the one thing agents copy off a card, so
     while the panel is open it owns its rectangle. Hovering it keeps it open
     because it is a descendant of .quote-tags.
     ------------------------------------------------------------------ */
  .quote-tags { @apply relative inline-flex; }
  .quote-tags-trigger {
    @apply focus-ring inline-flex h-6 items-center gap-1.5 rounded-md border border-gray-200
           bg-white px-2 text-xs font-semibold text-gray-500 transition-colors
           hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700;
  }
  /* A small table (_flight_option_badges): a row per product, each value
     under a heading that says what it is - PNR, fare type, source, MP. */
  .quote-tags-panel {
    @apply absolute right-0 top-full z-30 mt-1 hidden w-max max-w-lg
           flex-col items-start gap-2 rounded-lg border border-gray-200
           bg-white px-3 py-2.5 shadow-lg;
  }
  .quote-tags-table { @apply border-separate text-left; border-spacing: 0; }
  .quote-tags-table thead th {
    @apply pb-1.5 pr-4 text-xs font-semibold uppercase tracking-wider text-gray-400 last:pr-0;
  }
  .quote-tags-table tbody th {
    @apply whitespace-nowrap py-1 pr-4 text-xs font-semibold text-gray-500;
  }
  .quote-tags-table tbody td { @apply py-1 pr-4 align-middle last:pr-0; }
  .quote-tags-table tbody tr + tr > * { @apply border-t border-gray-100; }
  .quote-tags-cell { @apply flex flex-wrap gap-1; }
  .quote-tags-none { @apply text-xs text-gray-300; }
  .quote-tags:hover .quote-tags-panel,
  .quote-tags:focus-within .quote-tags-panel { @apply flex; }

  /* ------------------------------------------------------------------
     Quote actions menu

     Up to eight actions used to sit as a row of coloured buttons across the
     bottom of every quote card - a whole line of vertical space per quote,
     on the page where vertical space is the scarce thing, and eight hues
     competing hard enough that the buttons read before the quote did.

     One kebab in the card header instead. Each item keeps the hue its button
     carried in that row - CLONE orange, HIDE violet, RECEIPT sky, and so on,
     the same mapping .btn-clone/.btn-hide/.btn-receipt use - so an agent who
     learned the row by colour still finds the action by colour. What the menu
     removes is the eight fills competing at once: here they are text and icon
     against white, an accent per line rather than eight blocks of colour.

     Named for the action, not the hue, exactly like the .btn-* variants they
     mirror; if the palette moves, the class still says what the item does.
     ------------------------------------------------------------------ */
  .quote-menu-trigger {
    @apply focus-ring inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
           text-gray-400 transition-colors hover:bg-gray-200/70 hover:text-gray-700;
  }

  /* right-0 so it opens inward from the card's right edge, and z-30 to clear
     the sticky pricing/itinerary content it overlaps. Nothing between here
     and the page background clips it - the lead cards deliberately carry no
     overflow-hidden. */
  .quote-menu {
    @apply absolute right-0 z-30 mt-2 w-60 rounded-xl border border-gray-200 bg-white py-1 shadow-2xl;
  }
  .quote-menu-item {
    @apply focus-ring flex w-full items-center gap-2.5 px-4 py-2 text-left text-xs font-semibold
           uppercase tracking-wide text-gray-700 transition-colors hover:bg-gray-100;
  }
  .quote-menu-item i { @apply w-4 shrink-0 text-center text-sm text-gray-400; }

  .quote-menu-item-admin    { @apply text-slate-700   hover:bg-slate-50; }
  .quote-menu-item-admin i  { @apply text-slate-400; }
  .quote-menu-item-portal   { @apply text-indigo-700  hover:bg-indigo-50; }
  .quote-menu-item-portal i { @apply text-indigo-400; }
  .quote-menu-item-receipt  { @apply text-sky-700     hover:bg-sky-50; }
  .quote-menu-item-receipt i { @apply text-sky-400; }
  .quote-menu-item-accept   { @apply text-emerald-700 hover:bg-emerald-50; }
  .quote-menu-item-accept i { @apply text-emerald-500; }
  .quote-menu-item-clone    { @apply text-orange-700  hover:bg-orange-50; }
  .quote-menu-item-clone i  { @apply text-orange-400; }
  .quote-menu-item-hide     { @apply text-violet-700  hover:bg-violet-50; }
  .quote-menu-item-hide i   { @apply text-violet-400; }
  .quote-menu-item-reject   { @apply text-red-700     hover:bg-red-50; }
  .quote-menu-item-reject i { @apply text-red-400; }
  /* Rose and blue, not REJECT's red: VOID and UNACCEPT are not the booking
     falling apart, they are an admin walking a real sale back on purpose -
     the same rose/blue the activity log marks them with. */
  .quote-menu-item-void      { @apply text-rose-700  hover:bg-rose-50; }
  .quote-menu-item-void i    { @apply text-rose-500; }
  .quote-menu-item-unaccept  { @apply text-blue-700   hover:bg-blue-50; }
  .quote-menu-item-unaccept i { @apply text-blue-500; }
  .quote-menu-item-split     { @apply text-violet-700 hover:bg-violet-50; }
  .quote-menu-item-split i   { @apply text-violet-500; }
  /* Stone, not a second red: REJECT and DECLINE are both negative outcomes,
     and two near-identical reds sitting together is what made them hard to
     tell apart in the row this replaced (see .btn-decline). */
  .quote-menu-item-decline  { @apply text-stone-600   hover:bg-stone-100; }
  .quote-menu-item-decline i { @apply text-stone-400; }
  /* Kept in the list rather than dropped, so the action reads as unavailable
     here rather than missing - see the DECLINE branch in _quote_actions.
     Greys out whatever hue the item carries: a class + pseudo-class outranks
     the single-class colour rules above whatever order they land in. */
  .quote-menu-item:disabled { @apply cursor-not-allowed text-gray-400 hover:bg-transparent; }
  .quote-menu-item:disabled i { @apply text-gray-300; }
  .quote-menu-divider { @apply my-1 border-t border-gray-100; }

  .itinerary-toggle {
    @apply inline-flex items-center gap-0.5 rounded-lg bg-gray-100 p-0.5;
  }
  .itinerary-toggle button {
    @apply focus-ring rounded-md px-2.5 py-1 text-xs font-semibold text-gray-500 transition-colors
           hover:text-gray-800;
  }
  .itinerary-toggle button.itinerary-toggle-on {
    @apply bg-white text-indigo-700 shadow-sm;
  }

  /* ------------------------------------------------------------------
     External flight-search links

     These were five real brand logos - Kayak, ITA Matrix, Google Flights,
     Skyscanner, Expedia - as inline SVGs ranging 17px to 21px tall, each
     with its own inline width/height and its own brand colours. Five
     different shapes on one line that never sat on a common baseline, and
     the last inline styles left in the lead views.

     One badge shape, one type size. Each site gets a soft brand-inspired
     tint (--<site> modifiers below) so the row scans by colour without
     reintroducing the mismatched logo shapes. The site name is kept as
     the label, so you still know where each one goes.
     ------------------------------------------------------------------ */
  .search-badge {
    @apply inline-flex items-center rounded-md bg-white px-2 py-0.5 text-xs font-semibold
           text-gray-700 shadow-sm ring-1 ring-inset ring-gray-300 transition-colors
           hover:bg-gray-50 hover:text-gray-900
           focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500;
  }
  .search-badge--kayak {
    @apply bg-orange-50 text-orange-700 ring-orange-300 hover:bg-orange-100 hover:text-orange-800;
  }
  .search-badge--matrix {
    @apply bg-purple-50 text-purple-700 ring-purple-300 hover:bg-purple-100 hover:text-purple-800;
  }
  .search-badge--google-flights {
    @apply bg-blue-50 text-blue-700 ring-blue-300 hover:bg-blue-100 hover:text-blue-800;
  }
  .search-badge--skyscanner {
    @apply bg-cyan-50 text-cyan-700 ring-cyan-300 hover:bg-cyan-100 hover:text-cyan-800;
  }
  .search-badge--expedia {
    @apply bg-amber-50 text-amber-800 ring-amber-300 hover:bg-amber-100 hover:text-amber-900;
  }

  /* ------------------------------------------------------------------
     Pagination (Kaminari partials in app/views/kaminari)
     ------------------------------------------------------------------ */
  .pagination-link {
    @apply inline-flex h-9 min-w-[2.25rem] items-center justify-center gap-1 rounded-lg px-3
           text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100
           focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2;
  }

  .pagination-current {
    @apply inline-flex h-9 min-w-[2.25rem] items-center justify-center rounded-lg bg-indigo-600
           px-3 text-sm font-semibold text-white;
  }

  .pagination-gap {
    @apply inline-flex h-9 min-w-[2.25rem] items-center justify-center px-1 text-sm text-gray-500;
  }

  /* ------------------------------------------------------------------
     Notifications drawer toolbar

     The header carried five controls in five different hues - a green vial, a
     violet bubble, a grey speaker, an indigo link and a grey close - so the
     colour said nothing except "this is a button". These are one muted tone,
     and hue is spent on the only thing it can mean here: whether a toggle is
     on. The updaters already set aria-pressed, so the state selector needs no
     extra class bookkeeping in JS.
     ------------------------------------------------------------------ */
  .notif-tool {
    @apply focus-ring inline-flex h-8 w-8 items-center justify-center rounded-md
           text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700;
  }

  .notif-tool[aria-pressed="true"] {
    @apply bg-indigo-50 text-indigo-600 hover:bg-indigo-100;
  }

  /* Opt-in shrink for a footer that competes with its table for viewport
     height (the leads index). Descendant selectors out-specify the base
     classes above, so the Kaminari partials need no changes. */
  .pagination-compact .pagination-link,
  .pagination-compact .pagination-current {
    @apply h-7 min-w-[1.75rem] px-2 text-xs;
  }
  .pagination-compact .pagination-gap {
    @apply h-7 min-w-[1.75rem] text-xs;
  }

  /* ------------------------------------------------------------------
     Payment portal admin panels

     Every section of payment_portals#admin_view is one of these: a white
     card with an indigo header strip. The ticket cards carried that
     treatment from the start and the other five panels did not, so the page
     read as two designs stacked on top of each other. Components rather
     than repeated utility chains, so "one panel changes" cannot become
     "five of six panels changed".

     The head carries only the fill and the rule. Padding stays at the call
     site because the strips are not all the same shape: five are a padded
     div, but the Sabre block's strip is a full-width <button> that has to
     own its own padding or the collapse target shrinks to the text.
     ------------------------------------------------------------------ */
  .admin-panel      { @apply rounded-xl bg-white shadow-sm ring-1 ring-brand/20; }
  .admin-panel-head { @apply border-b border-indigo-100 bg-indigo-50; }

  /* ------------------------------------------------------------------
     Payment portal admin tabs

     The segmented switch the leads index already uses for All Leads /
     Assigned to Me (leads/index.html.haml), lifted into components so the
     two stay the same control rather than the same idea drawn twice. Its
     comment there applies here word for word: it lives in the header action
     row rather than on a band of its own, because the band costs a full row
     of vertical space the content can use instead.

     admin_tabs_controller toggles .admin-tab-active by name, so the active
     look has to be a class rather than an aria-selected attribute selector -
     the controller already owns aria-selected for assistive tech, and having
     it drive the paint too would mean two sources for one state.

     Declared after .admin-tab so the active rule wins the source-order tie;
     both are (0,1,0). The hover darkening is scoped to inactive tabs: on
     .admin-tab itself it would compile to .admin-tab:hover at (0,2,0),
     which beats the active rule and turns the selected tab gray on
     mouseover - the same reason the leads switch only ever carried the
     hover class on its off state.
     ------------------------------------------------------------------ */
  .admin-tabs { @apply inline-flex gap-1 rounded-lg bg-gray-200/70 p-1; }
  .admin-tab {
    @apply cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium text-gray-600
           transition-colors focus-ring;
  }
  .admin-tab:not(.admin-tab-active) { @apply hover:text-gray-900; }
  .admin-tab-active { @apply bg-white text-indigo-700 shadow-sm; }

  /* ------------------------------------------------------------------
     Ticket card record strip

     The three columns of a ticket card - ticket numbers, record locators,
     pricing - each render a row of small labelled cells. Components rather
     than repeated utility strings for two reasons beyond brevity: the same
     markup is built in JavaScript by ticket_record_locators_controller
     (appendRow, for a locator added without a reload), and one class name is
     far easier to keep in step across Ruby and JS than eight; and the value
     line needs an exact shared height, which is the thing that goes wrong
     when it is spelled out per call site.

     h-6 on the value line is that height. A plain text value is 16px
     (text-xs line-height) while one carrying a copy or remove button is 24px
     (p-1 around a text-xs icon), so cells whose contents happened to differ
     came out different heights side by side - the locator column stood 8px
     taller than the ticket-number column next to it. Pinning the line makes
     the cell height a property of the strip rather than of what happens to
     be inside a given cell.

     The label is truncated rather than wrapped: a passenger's full name is
     the label in the ticket-number column and a long one would otherwise
     make its cell two lines tall, which is the same defect from the other
     direction.
     ------------------------------------------------------------------ */
  .record-strip      { @apply flex flex-wrap gap-px overflow-hidden rounded-lg bg-gray-200 ring-1 ring-gray-200; }
  .record-cell       { @apply min-w-[6.5rem] flex-1 bg-white px-3 py-2; }
  .record-cell-label { @apply block truncate text-[10px] font-semibold uppercase tracking-wide text-gray-400; }
  .record-cell-value { @apply mt-0.5 flex h-6 items-center gap-1 text-xs; }

  /* Declared after .record-cell so it wins the source-order tie - both are
     (0,1,0). The ticket-number column is labelled with passenger names, which
     need more room than an airline code or a field name. */
  .record-cell-wide  { @apply min-w-[8rem]; }

  /* ------------------------------------------------------------------
     Dense data table

     Density-8 scale (8-32px) for the lead queues, which render up to 16
     columns. The previous px-6/py-4 cells forced horizontal scrolling on
     every viewport and fit ~40% fewer rows on screen.
     ------------------------------------------------------------------ */
  /* 12px is the floor for legible text; uppercase + tracking already costs
     enough legibility without dropping to 11.

     :where() keeps this at zero specificity so a per-cell text-right
     utility can still win. A plain `.table-dense th` selector is (0,1,1)
     and silently overrode .text-right on numeric column headers. */
  .table-dense :where(th) {
    @apply px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-600;
  }

  /* py-1.5 rather than py-2: at two lines of text per cell the 8px pad made
     each row ~52px, and 4px back per row is roughly one extra visible row per
     screen on the lead queues. Applies to every table-dense index (leads,
     clients, receipts, conversions) so they stay on one density. */
  .table-dense td {
    @apply px-3 py-1.5 align-middle text-sm;
  }

  /* Stickiness is a separate opt-in from density: Follow Up uses a two-row
     grouped header, where sticking every th to top-0 would stack both rows on
     top of each other. Applied to the cells rather than <thead> for wider
     browser support, and the bottom rule is an inset shadow because collapsed
     table borders do not paint on sticky cells. */
  .table-sticky-head thead th {
    /* Matches the darker of the two row bands. At gray-50 the header was
       lighter than every striped row, which reads as inverted; the inset rule
       below is what separates it, not a lighter tone. */
    @apply sticky top-0 z-table-head bg-gray-100;
    box-shadow: inset 0 -1px 0 0 theme('colors.gray.300');
  }

  /* ------------------------------------------------------------------
     Compact form controls (Create Lead)

     The element rules below pin every input/select at 44px and 16px type -
     touch-target sizing meant for the customer-facing pages. Internal data-
     entry forms want desktop density instead, and a plain utility loses to
     those (0,1,1) element selectors, so the overrides carry !. */
  .field-compact {
    @apply block w-full rounded-md border border-gray-300 bg-white shadow-sm
           !min-h-0 !py-1.5 !px-2.5 !text-sm !leading-5
           focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500;
  }

  .field-label {
    @apply mb-1 block text-xs font-medium text-gray-600;
  }

  /* The compose page's preview pane. A calc() height has no utility class and
     an arbitrary value is forbidden in views (see lead_show_ui_test) - the
     21rem clears the page header, the field stack above the fold and the
     footer row, leaving the preview as tall as the viewport allows. */
  .compose-preview-pane {
    height: calc(100vh - 21rem);
    min-height: 320px;
  }

  /* The template form's preview pane (Task 9) - same reasoning as
     .compose-preview-pane above, but with less to clear: this page's header
     is a single line and there is no quote/attachment stack above the fold,
     so 14rem is enough to keep the pane clear of the page chrome. */
  .template-preview-pane {
    height: calc(100vh - 14rem);
    min-height: 320px;
  }

  /* Checkbox tiles (the Award Search programme and cabin pickers). :has()
     tints the whole tile when its box is ticked, so a selection reads from
     across a four-column grid instead of from one 16px checkbox. A component
     rather than a `has-[:checked]:` utility, which would be an arbitrary
     variant in a view. */
  .option-tile {
    @apply flex cursor-pointer items-center gap-2 rounded-lg border border-gray-200
           px-2 py-1.5 transition-colors hover:bg-gray-50;
  }

  /* The place a ticked quote holds in the email (1, 2, 3 down the cards),
     written by editor_controller#tickChanged. Empty, and so absent, until
     the quote is ticked. */
  .tick-number { @apply inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-brand px-1 text-xs font-semibold tabular-nums text-white; }
  .tick-number:empty { @apply hidden; }

  .option-tile:has(:checked) {
    @apply border-indigo-300 bg-indigo-50;
  }

  /* One exact height, not just matching padding: selects and number inputs
     compute slightly different intrinsic heights from the same padding, and
     side-by-side on one row the mismatch shows. */
  input.field-compact,
  select.field-compact {
    @apply !h-8;
  }

  /* A compact textarea still needs room for two lines; the global textarea
     rule's 100px floor is the thing being escaped, not the concept of one. */
  textarea.field-compact {
    @apply !min-h-textarea-sm;
  }

  /* The flag-picker phone widget (app/javascript/utils/phone.js). Its inner
     input is type=tel, which the global element rule below pins at 44px;
     the widget's own utility classes lose that specificity fight, so the
     correction lives here. The wrapper carries the border and the h-8. */
  .phone-flag-input input[type="tel"] {
    @apply h-full !min-h-0 !py-0 !px-2 !text-sm !leading-5 border-0 focus:ring-0;
  }

  /* Numbered chip in front of each flight-segment row, kept in CSS counters
     so rows added or removed by the nested-form controller renumber
     themselves - display:none rows (soft-deleted via _destroy) don't count. */
  .segment-rows {
    counter-reset: segment;
  }
  .segment-row {
    counter-increment: segment;
  }
  .segment-row::before {
    content: counter(segment);
    @apply flex h-6 w-6 items-center justify-center self-center justify-self-start
           rounded-full bg-indigo-50 text-xs font-semibold text-indigo-700 ring-1 ring-indigo-100;
  }

  .form-input {
    @apply py-3 px-4 min-h-[44px] text-base leading-normal;
  }

  .form-select {
    @apply py-3 px-4 min-h-[44px] text-base leading-normal;
  }

  .form-textarea {
    @apply py-3 px-4 min-h-[100px] text-base leading-normal;
  }

  /* Override all input, select, and textarea elements */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    @apply py-3 px-4 min-h-[44px] text-base leading-normal;
  }

  /* Radio buttons and checkboxes */
  input[type="radio"],
  input[type="checkbox"] {
    @apply w-5 h-5;
  }

  textarea {
    @apply min-h-[100px];
  }

  /* ------------------------------------------------------------------
     Filter panel fields

     Must come after the element overrides above, and match their
     specificity. `input[type="text"]` is (0,1,1) and out-specifies a plain
     utility class (0,1,0), so filter text inputs were silently rendering at
     44px/16px — while the <select>s beside them, matched only by the (0,0,1)
     `select` selector, honoured the utilities at 36px/14px. Every filter row
     was a mix of two control heights. `input.filter-field` ties on
     specificity and wins on source order, so the row lines up.
     ------------------------------------------------------------------ */
  input.filter-field,
  select.filter-field,
  textarea.filter-field {
    @apply mt-1 block min-h-0 w-full rounded-lg border border-gray-300 bg-white px-2.5 py-2
           text-sm leading-5 text-gray-900 shadow-sm transition-colors
           placeholder:text-gray-400
           hover:border-gray-400
           focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500;
  }

  /* ── checkbox dropdowns ──────────────────────────────────────────────
     Every select in the leads filter pop-up. multi_select_controller keeps
     the native <select multiple> as the value, hides it, and draws a field
     (a text input carrying the select's .filter-field, so it matches its
     neighbours' height, that you also type into to narrow the list, as on
     Add Quote) and a floating panel: a checkbox per option. Clear moved out
     of the panel to the label row on 2026-09-14 ("so we save some space") -
     see the .flex row in _filter_select.html.haml, styled inline there like
     the label beside it rather than through a class here.

     Hidden the sr-only way, like .searchable-select-native, so the select
     keeps its place in the form and its label's association. select.* so it
     ties with select.filter-field above and wins on source order: the plain
     class lost to that rule's padding and border, and left the hidden list
     18px tall. */
  select.multi-select-native { @apply sr-only; }

  /* input.* to outrank input.filter-field's px-2.5 on source order, which
     would otherwise put the summary under the chevron. The chevron is a
     background, as on .searchable-select-input, so it cannot be clicked
     past or tabbed to. truncate ends a long summary in an ellipsis rather
     than a clipped word. Closed, the field is a dropdown to click on, so it
     has the pointer; open, it is a search box, with the text cursor. */
  input.multi-select-field {
    @apply truncate bg-no-repeat pr-8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-size: 1rem 1rem;
  }
  input.multi-select-field[aria-expanded="false"] { @apply cursor-pointer; }

  /* Fixed and placed by the controller from the field's rect, because the
     pop-up's body scrolls and its box clips: a list hanging inside them was
     cut off. Above the pop-up's own z-50 layer, as the floating airport list
     is. The list inside takes whatever height the panel is capped to. */
  .multi-select-panel {
    @apply fixed flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg;
    z-index: 60;
  }

  /* Positioned, so an option's offsetTop is measured from the list's top -
     the controller scrolls the highlight into view with it. */
  .multi-select-list { @apply relative max-h-60 min-h-0 overflow-y-auto py-1; }

  /* No hover rule, as on .searchable-select-option: the highlight is one
     state, moved by the arrow keys, and a separate hover tint would show two
     things looking chosen. */
  .multi-select-option {
    @apply flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm text-gray-900;
  }
  .multi-select-option[data-highlighted="true"] { @apply bg-indigo-50; }
  .multi-select-option[aria-disabled="true"]    { @apply cursor-not-allowed text-gray-400; }
  .multi-select-label { @apply min-w-0 break-words; }

  /* The checkbox is drawn: a real one inside role="option" would be a second
     control for a screen reader to announce. Ticked follows aria-selected. */
  .multi-select-check {
    @apply h-4 w-4 shrink-0 rounded border border-gray-300 bg-white bg-center bg-no-repeat;
  }
  .multi-select-option[aria-selected="true"] .multi-select-check {
    @apply border-indigo-600 bg-indigo-600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-size: 0.75rem 0.75rem;
  }

  .multi-select-empty { @apply px-3 py-2 text-sm text-gray-500; }

  /* Readonly date-range proxies are buttons in spirit — they open a picker. */
  input.filter-field[readonly] {
    @apply cursor-pointer bg-white;
  }

  /* The leads filter pop-up's two tabs share one grid cell on a wide screen,
     and the hidden one keeps its place there, invisible, instead of dropping
     out of the layout. The body is then as tall as the taller tab whichever
     one is showing, so the centred box keeps its height on a switch. Without
     this it changed by about 45px, which moved the tab strip out from under
     the pointer that had just clicked it.

     Only from xl, where both tabs fit a laptop screen side by side. Narrower,
     the columns stack, Lead & trip is far taller, and Sales & work would
     scroll on into empty space. visibility:hidden keeps the hidden tab's
     fields away from the pointer, the Tab key and screen readers, as
     display:none does. */
  @media (min-width: 1280px) {
    .filter-tabpanels { display: grid; }
    .filter-tabpanels > [role="tabpanel"] { grid-area: 1 / 1; }
    .filter-tabpanels > [role="tabpanel"][hidden] { display: block; visibility: hidden; }
  }

  /* ------------------------------------------------------------------
     Quote-builder form fields

     Element+class selectors on purpose, AND declared after the element
     overrides above. The global `input[type="text"]` rule is (0,1,1) and
     ties with `input.quote-field`, so source order is what decides - these
     rules were originally written further up the file and lost that tie.

     The symptom is narrow: `input[type="number"]` is not in the global
     list, so number fields looked right while the one text field (PNR)
     rendered at 44px/16px beside them. Same bug MASTER.md §4b records for
     the filter panel, same fix; keep this block below that one.
     ------------------------------------------------------------------ */
  input.quote-field,
  select.quote-field,
  textarea.quote-field {
    @apply block min-h-0 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm
           leading-5 text-gray-900 shadow-sm transition-colors
           placeholder:text-gray-400
           hover:border-gray-400
           focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500;
  }

  /* Declared after .quote-field so these sizes win the source-order tie -
     both selectors are (0,1,1). */
  input.field-input,
  select.field-input {
    @apply w-full px-2 py-1.5 text-sm;
  }
  input.field-input { @apply tabular-nums; }
  /* A child or infant price box Create quote found empty
     (flight_option_form_controller#blockedByPricing); the outline comes off
     when the box gets a value. Qualified with the element, like the rules
     above, so it outranks input.field-input's border. */
  input.quote-field[aria-invalid="true"] { @apply border-red-500 bg-red-50 ring-2 ring-red-500/30; }

  /* The chevron on the type-to-search input; the rest of that control is in
     the searchable-select block above. It went with the select, and without
     one the field reads as a text box - nothing says there is a list behind
     it. Drawn as a background rather than an element so it cannot be tabbed
     to or clicked past.

     Down here rather than with its block: input.searchable-select-input has
     to outrank input.field-input's px-2 to keep the right-hand padding under
     the arrow, and (0,1,1) against (0,1,1) is decided by source order. Same
     rule as .quote-field and .auth-field - it stays below them. */
  input.searchable-select-input {
    @apply bg-no-repeat pr-7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-size: 1rem 1rem;
  }
  /* Bags, Weight and Product on a quote leg: one size (w-16) for the three,
     the owner's call, the smallest that holds the widest of their values -
     "32kg", 33.5px in Inter at text-sm. The standard 8px + 28px padding
     leaves that box 26px of text, so these three trim it to 6px + 20px and
     move the arrow in to 4px from the edge: 36px of text, the arrow 2px
     clear of it. The class sits on the select and the controller copies it
     onto the input it renders. */
  input.searchable-select-input.quote-field-short {
    @apply pl-1.5 pr-5;
    background-position: right 0.25rem center;
  }

  /* ── sign-in page ─────────────────────────────────────────────────────
     See docs/superpowers/specs/2026-08-11-sign-in-page-design.md.

     .auth-field must stay BELOW the global input[type=...] rule above, for
     the same source-order reason as .quote-field and .filter-field: both
     selectors are (0,1,1), so whichever comes last wins.

     Unlike those two, this one does not fight the global sizes - it states
     them. The old sessions/new markup asked for px-3 py-2 and the global
     rule silently overrode it to 44px/16px, so the fields have always
     rendered larger than the view claimed. 44px is the right target size
     here and 16px is what stops iOS zooming the page on focus, so the fix
     is to say so rather than to shrink them.
     ------------------------------------------------------------------- */
  input.auth-field {
    @apply block min-h-[44px] w-full rounded-lg border border-gray-300 bg-white
           px-4 py-3 text-base text-gray-900 shadow-sm transition-colors
           placeholder:text-gray-400
           hover:border-gray-400
           focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30;
  }

  /* The artwork half. Same construction as .sidebar-surface - two indigo and
     violet washes over the shell gradient - with the washes placed for a
     tall panel rather than a narrow rail. theme() keeps the shell stops in
     one place, so re-tuning the app chrome carries here automatically. */
  .auth-panel {
    background-image:
      radial-gradient(140% 60% at 8% 0%, rgb(99 102 241 / 0.28), transparent 70%),
      radial-gradient(120% 50% at 100% 100%, rgb(139 92 246 / 0.20), transparent 68%),
      linear-gradient(to bottom, theme('colors.shell.from'), theme('colors.shell.to'));
  }

  /* The one piece of motion on the page: a 150ms fade as the artwork lands,
     per MASTER.md section 6. No loop and no parallax. The global
     prefers-reduced-motion block at the foot of this file already forces
     every animation-duration to 0.01ms with !important, so this needs no
     media query of its own. */
  .auth-fade {
    animation: auth-fade-in 150ms ease-out both;
  }

  /* ------------------------------------------------------------------
     Phone fields

     phone_validate_controller injects a country-flag prefix and wraps the
     input in .phone-flag-wrapper. The wrapper is the visible control, so the
     input inside must not draw its own border, ring or radius — otherwise you
     see a box inside a box. The controller used to strip those by removing
     utility class names, which stopped working the moment the styling moved
     into a single .filter-field class, so it is the stylesheet's job now.

     Deliberately sets no padding or height: the field keeps whatever size its
     own class gives it, so phone inputs on other forms are unaffected.
     ------------------------------------------------------------------ */
  .phone-flag-wrapper {
    @apply mt-1 flex w-full items-center overflow-hidden rounded-lg border border-gray-300
           bg-white shadow-sm transition-colors
           focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500;
  }

  /* The flag-picker widget (phone.js) also receives .phone-flag-wrapper when
     multi-field mounts it, but it sits in a labelled grid cell beside other
     h-8 fields - the mt-1 above is for the inline-edit wrapper that replaces
     a bare input, and here it pushed the control below its row line. */
  .phone-flag-input.phone-flag-wrapper {
    @apply mt-0;
  }

  .phone-flag-wrapper > input {
    @apply mt-0 w-full flex-1 rounded-none border-0 bg-transparent shadow-none
           focus:border-0 focus:outline-none focus:ring-0;
  }

  .phone-flag-prefix {
    @apply flex shrink-0 select-none items-center self-stretch border-r border-gray-200
           bg-gray-50 px-2.5 text-base leading-none;
  }

  /* Dual range slider thumbs */
  .slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 1.5rem;
    margin: 0;
  }
  .slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #6366f1;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 10;
  }
  .slider-thumb::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: #6366f1;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 10;
  }
  .slider-thumb::-webkit-slider-thumb:hover {
    background: #4f46e5;
    transform: scale(1.15);
  }
  .slider-thumb::-moz-range-thumb:hover {
    background: #4f46e5;
    transform: scale(1.15);
  }

  /* Hide the leads table until the column-customizer Stimulus controller
     has applied saved preferences (prevents FOUC / column flicker).
     The controller adds [data-columns-ready] once prefs are applied. */
  [data-controller~="column-customizer"] table[data-column-customizer-target="table"] {
    opacity: 0;
  }
  [data-controller~="column-customizer"][data-columns-ready] table[data-column-customizer-target="table"] {
    opacity: 1;
    transition: opacity 0.08s ease-in;
  }

  @media print {
    .no-print {
      display: none !important;
    }

    .payment-portal-completed {
      @apply bg-white pb-0;
    }

    .payment-portal-completed [data-collapsible-target="content"] {
      display: flex !important;
    }

    .payment-portal-completed .pp-print-layout {
      flex-direction: column !important;
      gap: 1.5rem !important;
    }

    .payment-portal-completed .pp-order-summary-sidebar {
      display: block !important;
      position: static !important;
      width: 100% !important;
      order: -1;
      page-break-inside: avoid;
    }

    .payment-portal-completed .pp-order-summary-mobile {
      display: none !important;
    }

    .payment-portal-completed .pp-overview-desktop {
      display: flex !important;
    }

    .payment-portal-completed .pp-overview-mobile {
      display: none !important;
    }
  }

  /* ------------------------------------------------------------------
     Partner controls (partner design polish spec, Controls)

     Our own time field, calendar, segmented choice and inline field
     errors, in place of the browser's pickers, selects and validation
     bubble. Last in this layer on purpose: they override the element
     rules above (input[type="text"], input[type="radio"]) at the same
     specificity, so they must come after them.
     ------------------------------------------------------------------ */
  .time-field { @apply relative w-24 shrink-0; }
  .time-field.has-icon { @apply w-28; }
  .time-field-input { @apply field-compact tabular-nums; }
  .time-field.has-icon .time-field-input { @apply !pl-8; }
  .time-field-icon { @apply pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-gray-400; }
  .time-note { @apply mt-1 h-4 text-xs text-gray-500; }

  /* The list a time field or a calendar opens (utils/floating_panel.js
     places it; its top, left, width and max-height are set in JS). */
  .floating-list { @apply fixed z-10 overflow-y-auto rounded-lg bg-white p-1 shadow-lg ring-1 ring-gray-900/10; }
  .time-list { @apply max-h-56; }
  .floating-option {
    @apply flex cursor-pointer items-center justify-between gap-2 rounded-md px-2.5 py-1 text-sm tabular-nums
           text-gray-700 hover:bg-gray-50;
  }
  .floating-option.is-active { @apply bg-indigo-50 font-semibold text-indigo-800; }
  .floating-option small { @apply text-xs font-normal text-gray-500; }

  /* Our date field and calendar. The button is spelled out rather than
     @apply field-compact, whose w-full would win over a width here. A
     missing pick (a required field, Team setup's First due) rings it red
     as the Days off button is, the ring staying red while it has focus
     (review of #147). */
  .date-field { @apply relative; }
  .date-field-button {
    @apply inline-flex w-40 items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-left
           text-sm leading-5 text-gray-900 shadow-sm tabular-nums focus-ring hover:border-gray-400;
  }
  .date-field-button .fa-calendar { @apply text-xs text-gray-400; }
  .date-field-button[aria-invalid="true"] { @apply border-red-500 ring-1 ring-red-500; }
  .date-field-button[aria-invalid="true"]:focus-visible { @apply ring-2 ring-red-500; }
  .calendar { @apply p-3; }
  .calendar-head { @apply mb-2 flex items-center justify-between text-sm font-semibold text-gray-900; }
  .calendar-nav { @apply inline-flex h-7 w-7 items-center justify-center rounded-md text-xs text-gray-500 focus-ring hover:bg-gray-100; }
  .calendar-weekdays { @apply grid grid-cols-7 text-center text-xs font-semibold text-gray-400; }
  .calendar-grid { @apply mt-1 space-y-0.5; }
  .calendar-week { @apply grid grid-cols-7 gap-0.5; }
  .calendar-day {
    @apply h-8 rounded-md text-sm tabular-nums text-gray-700 focus-ring hover:bg-gray-100
           disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent;
  }
  .calendar-day.is-outside { @apply text-gray-400; }
  .calendar-day.is-today { @apply font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-300; }
  .calendar-day[aria-selected="true"] { @apply bg-indigo-600 font-semibold text-white hover:bg-indigo-700; }
  .calendar-foot { @apply mt-2 flex flex-wrap justify-between gap-x-3 gap-y-1 border-t border-gray-100 pt-2 text-xs; }
  /* Today, or a due date's shortcuts (Friday ... Clear) in its place. */
  .calendar-today, .calendar-shortcut { @apply rounded font-semibold text-indigo-700 focus-ring; }

  /* Segmented choice: real radios, hidden but focusable, the checked one lifted. */
  .segmented { @apply inline-flex gap-0.5 rounded-lg bg-gray-100 p-0.5; }
  .segmented-option {
    @apply inline-flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-gray-600
           transition-colors hover:text-gray-900;
  }
  .segmented-option input { @apply sr-only; }
  .segmented-option .fas { @apply text-xs; }
  .segmented-option .avatar { @apply shrink-0; }
  .segmented-option:has(input:checked) { @apply bg-white font-semibold text-indigo-800 shadow-sm; }
  .segmented-option:has(input:focus-visible) { @apply ring-2 ring-indigo-500 ring-offset-1; }
  /* A required group left unanswered (New project's Owner): the radios are
     hidden, so the red goes on the pill around them. */
  .segmented:has([aria-invalid="true"]) { @apply ring-1 ring-red-500; }

  /* Inline field errors (inline_validity_controller.js). With :focus as
     well: the field with the error is the one with focus, and the fields'
     own :focus border and ring (.time-field-input:focus,
     .modal-textarea:focus) would win over the bare attribute selector,
     so the red never showed. */
  input[aria-invalid="true"], textarea[aria-invalid="true"],
  input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
    @apply border-red-500 ring-1 ring-red-500;
  }
  .field-error { @apply mt-1 flex items-center gap-1 text-xs text-red-700; }

  /* The Correct / Add a shift dialogs' breaks (shift_breaks_controller.js). */
  .break-row { @apply flex items-center gap-2 py-1; }
  /* Undo is a .btn, whose inline-flex beats the browser's own
     [hidden] { display: none }: it showed on every row. Put back for the
     row only. Not a global [hidden] rule: the filter's tab panels are
     hidden another way on purpose (.filter-tabpanels, above). */
  .break-row [hidden] { display: none; }
  .break-number {
    @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md bg-amber-100 text-xs font-semibold text-amber-800;
  }
  .break-length { @apply w-24 text-xs tabular-nums text-gray-500; }
  .break-row.is-removed .time-field-input { @apply bg-gray-50 text-gray-400 line-through; }
  .break-row.is-removed .break-number { @apply bg-gray-100 text-gray-400; }
  .add-break {
    @apply mt-1 inline-flex items-center gap-1.5 rounded-md border border-dashed border-indigo-200 bg-indigo-50/40 px-2.5 py-1.5
           text-sm font-semibold text-indigo-700 focus-ring hover:bg-indigo-50;
  }

  /* Their live preview (shift_preview_controller.js): the Shift page's
     timeline colours. A newly added break is striped. */
  .shift-preview-track { @apply relative h-6 rounded-md bg-gray-100; }
  .shift-preview-track > * { @apply absolute; }
  .preview-scheduled { @apply inset-y-0 rounded-md bg-gray-200; }
  .preview-worked { @apply inset-y-1 rounded bg-emerald-500; }
  .preview-break, .preview-new-break { @apply inset-y-1 rounded-sm bg-amber-400; }
  .preview-new-break {
    background-image: repeating-linear-gradient(45deg, theme("colors.amber.400") 0 3px, theme("colors.amber.200") 3px 6px);
  }
  .shift-preview-ticks, .timeline-ticks { @apply relative mt-1 h-4 text-xs tabular-nums text-gray-400; }
  .shift-preview-ticks span, .timeline-ticks span { @apply absolute -translate-x-1/2; }
  .shift-preview-ticks span.is-first, .timeline-ticks span.is-first { @apply translate-x-0; }
  .shift-preview-ticks span.is-last, .timeline-ticks span.is-last { @apply -translate-x-full; }
  .shift-preview-summary { @apply mt-1.5 flex flex-wrap gap-x-3.5 gap-y-1 text-xs text-gray-700; }
  .shift-preview-summary .fas { @apply text-gray-400; }
  .preview-change { @apply font-semibold text-indigo-700; }
  .preview-over { @apply font-semibold text-red-700; }

  /* A quiet destructive action beside a dialog's own buttons ("Void shift..."). */
  .btn-ghost-danger { @apply btn bg-transparent text-red-700 hover:bg-red-50; }

  /* The timesheet's one action per row: faint (still 3:1) until its row is
     hovered or it has focus; a spinner while its dialog loads. */
  .row-pencil {
    @apply inline-flex h-7 w-7 items-center justify-center rounded-md text-sm text-gray-500 focus-ring
           hover:bg-gray-100 hover:text-indigo-700;
  }
  tr:hover .row-pencil { @apply text-indigo-600; }

  /* A Stats Small tasks figure that opens its list (stats/_partner_column,
     _time_by_project): its words as they were, a dotted underline and a
     list icon after them to say it opens something. */
  .stats-list-link {
    @apply rounded-sm underline decoration-dotted decoration-gray-400 underline-offset-2 focus-ring
           hover:text-indigo-700 hover:decoration-indigo-500;
  }
  .stats-list-link .fa-list-ul { @apply ml-1 text-gray-400; }
  .stats-list-link:hover .fa-list-ul { @apply text-indigo-600; }
  .stats-list-link .fa-spinner { @apply ml-1; }

  /* An opener whose icon gives way to a spinner until what it fetches is
     in: the timesheet's row pencil and a Small tasks figure while
     partner-dialog#busy marks them .is-busy, and the small tasks list's
     Show older days (stats_small_tasks/_page) while Turbo marks the frame
     it loads into [busy] - it sits in a dialog opened on <body>, outside
     partner-dialog. */
  :is(.row-pencil, .stats-list-link, .stats-older-button) .fa-spinner { @apply hidden; }
  :is(.row-pencil.is-busy, .stats-list-link.is-busy, turbo-frame[busy] .stats-older-button) .fas:not(.fa-spinner) { @apply hidden; }
  :is(.row-pencil.is-busy, .stats-list-link.is-busy, turbo-frame[busy] .stats-older-button) .fa-spinner { @apply inline-block; }
  :is(.stats-list-link.is-busy, turbo-frame[busy] .stats-older-button) { @apply cursor-progress opacity-60; }

  /* The timesheet's Shift bar (partner planner polish spec, Part 2:
     "Timesheet bars"; stats/_shift_bar.html.haml): a track from clock-in
     to clock-out, each stretch placed on it by an inline left and width.
     Work is indigo, a break amber as everywhere else in the partner area,
     a voided shift's both grey. A break keeps --break-min (3px) however short, so a
     one-minute break can still be seen and hovered; its inline left is
     capped (min(L%, 100% - var(--break-min))) so that minimum stays inside the track,
     which clips anything past its edge (Review Focus 2). The stretches
     are drawn in order, and the work after a break starts at its true
     end: breaks stack above the work (z-10), or that work covers the
     rest of a short break's 3px, to the eye and to the mouse (task
     review). isolate keeps that stacking inside the bar, under the
     page's hover card and header. The track fills its own table cell,
     which takes the table's leftover width; min-w-24 is its floor. */
  .shift-bar { @apply relative isolate h-3 min-w-24 overflow-hidden rounded-full bg-gray-100 focus-ring; --break-min: 3px; }
  .shift-bar > span { @apply absolute inset-y-0; }
  .shift-bar-worked { @apply bg-indigo-600; }
  .shift-bar-break { @apply z-10 bg-amber-300; min-width: var(--break-min); }
  .shift-bar.is-voided .shift-bar-worked { @apply bg-gray-300; }
  .shift-bar.is-voided .shift-bar-break { @apply bg-gray-200; }

  /* The On shift pill's dot (partner_status_pill). It pulses; the
     prefers-reduced-motion rule at the end of this file stops it. */
  .status-pulse {
    @apply inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500;
    animation: status-pulse 1.6s infinite;
  }

  /* Our hover card (hover_card_controller.js), in place of title=: one per
     page, a copy of the trigger's sr-only note, fixed to the screen above
     the trigger (below it near the top edge). JS sets top, left and
     --arrow-left. Lines wrap at the card's max width. Never takes the pointer, so it can't flicker its trigger.
     z-20, under the app's fixed header (z-30, shared/_header): a focused
     trigger's card follows it while the page scrolls, and must slide under
     the header with its trigger, never paint over the logo, clocks and
     Clock in. Still above the page's content; modal dialogs sit in the top
     layer, above both. */
  .hover-card {
    @apply pointer-events-none fixed z-20 max-w-xs rounded-lg bg-gray-900 px-2.5 py-2 text-xs leading-5 text-gray-50 shadow-lg;
  }
  .hover-card::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--arrow-left, 50%);
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: theme("colors.gray.900");
  }
  .hover-card.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: theme("colors.gray.900"); }
  /* Lifted to stay on the screen, the card lies over its trigger: no arrow. */
  .hover-card.is-lifted::after { display: none; }
  .hover-card-title { @apply block font-semibold; }
  .hover-card-line { @apply block; }
  /* A sum laid out as label and amount (the quote's profit breakdown,
     LeadsHelper#quote_profit_note): amounts right-aligned in tabular figures,
     the total under a rule. */
  .hover-card-row { @apply flex justify-between gap-6; }
  .hover-card-row > span:last-child { @apply tabular-nums; }
  .hover-card-total { @apply mt-1 border-t border-gray-700 pt-1 font-semibold; }
  .quote-profit[data-hover-card] { @apply cursor-default rounded-sm; }
  .quote-profit[data-hover-card]:focus-visible { @apply outline-none ring-2 ring-indigo-500 ring-offset-1; }
  .hover-card-line .fas { @apply mr-1.5 inline-block w-3.5 text-center text-indigo-300; }
  /* Something that only shows a hover card: focusable, no click action. */
  .hover-trigger { @apply inline-flex cursor-default items-center gap-1 rounded focus-ring; }
  .correction-mark { @apply hover-trigger ml-1 text-xs text-gray-400 hover:text-indigo-700; }

  /* Pick dates: a popover over the page (popover_controller.js) holding the
     range calendar (date_range_controller.js). */
  .popover-panel { @apply p-3; }
  .date-range { @apply flex gap-3; }
  .date-range-presets { @apply flex w-32 shrink-0 flex-col gap-0.5 border-r border-gray-100 pr-3; }
  .date-range-preset { @apply rounded-md px-2 py-1 text-left text-sm text-gray-700 focus-ring hover:bg-gray-50; }
  .date-range-preset[aria-pressed="true"] { @apply bg-indigo-50 font-semibold text-indigo-800; }
  .date-range .calendar { @apply w-72; }
  .date-range .calendar-day[aria-selected="true"] { @apply rounded-none bg-indigo-50 font-normal text-indigo-900 hover:bg-indigo-100; }
  /* After the shaded days, not before: same specificity, so the later rule
     wins and the two ends of the range are filled. */
  .date-range .calendar-day.is-range-start,
  .date-range .calendar-day.is-range-end { @apply rounded-md bg-indigo-600 font-semibold text-white hover:bg-indigo-700; }
  .date-range-summary { @apply mt-2 text-xs text-gray-600; }

  /* The Stats partners card (partner design polish spec, Stats): a column
     per partner with an initials avatar, the Hours ring, four icon tiles
     and two split bars. The tiles are partner-tile, not stat-tile: that
     name is What's new's label-over-value card (above), and one rule set
     would restyle the other. */
  .avatar { @apply inline-flex shrink-0 items-center justify-center bg-indigo-600 font-semibold text-white; }
  .avatar-md { @apply h-8 w-8 rounded-md text-xs; }
  /* The mockup's mini avatar; no Tailwind step is as small as its 9px. */
  .avatar-sm {
    @apply h-5 w-5 rounded bg-indigo-100 text-indigo-800;
    font-size: 9px;
    line-height: 1;
  }
  .progress-ring { @apply relative h-14 w-14 shrink-0; }
  .progress-ring svg { @apply h-full w-full; }
  .progress-ring-label { @apply absolute inset-0 flex items-center justify-center text-xs font-bold text-indigo-900; }
  .partner-column { @apply px-4 pb-4 pt-3.5; }
  /* Side by side from lg, stacked below it, like the page's other grids. */
  .partner-column + .partner-column { @apply border-t border-gray-100 lg:border-l lg:border-t-0; }
  .partner-tile { @apply flex items-start gap-2 rounded-lg bg-slate-50 px-2.5 py-2 ring-1 ring-inset ring-slate-100; }
  .partner-tile-icon {
    @apply inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-indigo-50 text-xs text-indigo-600;
  }
  .partner-tile.is-warn .partner-tile-icon { @apply bg-red-50 text-red-600; }
  .partner-tile-value { @apply text-sm font-bold leading-tight tabular-nums text-gray-900; }
  .partner-tile-label { @apply text-xs text-gray-500; }
  .split-track { @apply flex h-2 overflow-hidden rounded-full bg-gray-100; }
  .split-key { @apply mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-gray-700; }
  .split-swatch { @apply mr-1 inline-block h-2 w-2 rounded-sm align-middle; }

  /* A column's hours bars (_partner_bars.html.haml): the arrival marks
     under them at the mockup's size, smaller than the day labels (no
     Tailwind step is 10px), or a 6px dot of the mark's colour once the
     bars are too narrow for an icon. A bar shows its hover card and takes
     focus, one Tab stop per chart (hover_card_controller.js), so a
     focused bar gets a ring; it has no click action. */
  .bar-marks {
    font-size: 10px;
    line-height: 1;
  }
  .mark-dot { @apply inline-block h-1.5 w-1.5 rounded-full; }
  [data-hover-card-row] > [data-hover-card] { @apply cursor-default; }
  [data-hover-card-row] > [data-hover-card]:focus-visible { @apply rounded-sm outline-none ring-2 ring-indigo-500 ring-offset-1; }

  /* Our menu select (menu_select_controller.js): a compact button over our
     own list. The list reuses .floating-list / .floating-option; the tick
     shows on the selected option only. */
  .menu-select { @apply relative inline-block; }
  .menu-select-button {
    @apply inline-flex h-8 w-full items-center justify-between gap-2 rounded-lg border border-gray-300 bg-white px-2.5
           text-left text-sm text-gray-900 focus-ring;
  }
  .menu-select-label { @apply flex min-w-0 items-center gap-1.5 truncate; }
  .menu-select-chevron { @apply shrink-0 text-xs text-gray-500; }
  .menu-select-button.is-dashed {
    @apply border-dashed border-indigo-200 bg-indigo-50 font-semibold text-indigo-700;
  }
  .menu-select-button.is-dashed .menu-select-chevron { @apply text-indigo-500; }
  /* Stacked (the clock menu): the select takes the whole line, like the
     buttons under it, and its list is as wide as the line. */
  .menu-select-block { @apply w-full; }
  .menu-select-block .menu-select { @apply block w-full; }
  .menu-list { @apply max-h-64; }
  .floating-option [data-menu-label] { @apply flex min-w-0 items-center gap-1.5 truncate; }
  .floating-option .menu-tick { @apply hidden text-xs text-indigo-600; }
  .floating-option[aria-selected="true"] .menu-tick { @apply inline-block; }

  /* "Working on" as chips (partners/_running_projects). */
  .work-chip {
    @apply inline-flex max-w-full items-center gap-1.5 rounded-lg bg-indigo-50 px-2.5 py-1 text-sm font-semibold
           text-indigo-800 ring-1 ring-inset ring-indigo-200;
  }
  .work-chip-title { @apply min-w-0 max-w-xs truncate; }
  .work-chip small { @apply shrink-0 text-xs font-normal text-indigo-600; }
  .work-chip-stop {
    @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-xs text-indigo-500 focus-ring
           hover:bg-indigo-100;
  }
  .work-chip.is-general { @apply bg-gray-100 text-gray-700 ring-gray-200; }

  /* Our stepper (stepper_controller.js): − and + around a text box of
     digits. The wrapper carries the border and the focus or error ring, so
     the box inside has none of its own. */
  .stepper {
    @apply inline-flex h-8 items-center overflow-hidden rounded-lg border border-gray-300 bg-white;
  }
  .stepper:focus-within { @apply border-indigo-500 ring-1 ring-indigo-500; }
  .stepper button {
    @apply inline-flex h-full w-8 shrink-0 items-center justify-center bg-gray-50 text-xs text-gray-500 hover:bg-gray-100;
  }
  .stepper-input {
    @apply h-full w-14 border-0 bg-white p-0 text-center text-sm tabular-nums text-gray-900 shadow-none ring-0;
  }
  .stepper-input:focus { @apply outline-none ring-0; }
  .stepper-input[aria-invalid="true"], .stepper-input[aria-invalid="true"]:focus { @apply border-0 ring-0; }
  .stepper:has([aria-invalid="true"]) { @apply border-red-500 ring-1 ring-red-500; }
  .stepper-unit { @apply pr-2.5 text-sm text-gray-500; }

  /* The week meter's "expected by now" mark (partners/_week_meter): a 2px
     line centred on its computed left, in a w-3 hit area. On the Shift page
     it is a focusable hover trigger; in the clock menu, decoration. */
  .week-mark { @apply absolute -top-1 block h-4 w-3 -translate-x-1/2 rounded; }
  .week-mark::after { @apply absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 rounded bg-gray-900; content: ""; }
  .week-mark.is-trigger { @apply cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500; }

  /* Today by project: one line is an icon, a label that truncates, a bar
     track and the minutes. */
  .today-row { @apply grid items-center gap-3; grid-template-columns: 1rem minmax(0, 12rem) minmax(0, 1fr) 4rem; }

  /* A small task's bin: an icon button that appears on the row's hover and
     on keyboard focus. Opacity, not hidden, so it stays in the Tab order. */
  .row-bin { @apply inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-gray-500 opacity-0 hover:bg-red-50 hover:text-red-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500; }
  li:hover .row-bin, .row-bin:focus-visible { @apply opacity-100; }
  /* A touch screen has no hover: always shown there, or it is an invisible
     button that still takes a tap. */
  @media (hover: none) { .row-bin { @apply opacity-100; } }

  /* Round tick (daily tasks): drawn inside the tick's own button, which
     keeps aria-pressed and the focus ring. Empty ring unticked, filled
     indigo with a check once ticked. */
  .round-tick { @apply inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white text-white ring-2 ring-inset ring-indigo-200; }
  .round-tick i { @apply text-xs; }
  button:hover .round-tick { @apply ring-indigo-400; }
  [aria-pressed="true"] .round-tick { @apply bg-indigo-600 ring-indigo-600; }
  [aria-pressed="true"]:hover .round-tick { @apply ring-indigo-600; }

  /* Projects (PR 4): the chosen row is tinted and has an indigo edge on its
     first cell; an avatar inside an owner tab sits centred with no padding
     of its own. */
  .project-row.is-chosen { @apply bg-indigo-50; }
  .project-row.is-chosen > :first-child { box-shadow: inset 3px 0 0 theme("colors.indigo.600"); }
  .admin-tab-avatar { @apply flex items-center justify-center p-1; }

  /* The project update box: the text area and a footer row (hint, Post)
     inside one bordered box, which takes the focus ring for both. */
  .compose-box { @apply rounded-lg border border-gray-300 bg-white shadow-sm; }
  .compose-box:focus-within { @apply border-indigo-500 ring-1 ring-indigo-500; }
  .compose-box:has(textarea[aria-invalid="true"]) { @apply border-red-500 ring-1 ring-red-500; }
  .compose-box textarea {
    @apply block w-full resize-none rounded-t-lg border-0 bg-transparent px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-0;
  }
  .compose-box textarea[aria-invalid="true"], .compose-box textarea[aria-invalid="true"]:focus { @apply border-0 ring-0; }
  .compose-footer { @apply flex items-center justify-between gap-2 px-2 pb-2; }
  /* A control that can't be used right now but stays focusable, so its
     hover card can say why (aria-disabled, not disabled). */
  .is-unavailable { @apply cursor-not-allowed opacity-50; }

  /* Team setup's weekly schedule (partners/setup/_schedule, redrawn by
     schedule_week_controller.js). One grid per row with fixed columns, so
     every row's bar sits on the same axis, and the axis labels use the same
     columns. The layout follows the card's own width, not the screen's: a
     card of 40rem or more has the bar on the row's line; narrower, the bar
     (and the axis) take a line under the times; under 28rem the times take
     a line of their own too. */
  .switch { @apply relative inline-flex shrink-0 cursor-pointer items-center; }
  .switch-input { @apply sr-only; }
  .switch-track { @apply relative block h-5 w-9 rounded-full bg-gray-300 transition-colors; }
  .switch-track::after {
    @apply absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform;
    content: "";
  }
  .switch-input:checked + .switch-track { @apply bg-indigo-600; }
  .switch-input:checked + .switch-track::after { @apply translate-x-4; }
  .switch-input:focus-visible + .switch-track { @apply ring-2 ring-indigo-500 ring-offset-2; }
  .schedule-card { container-type: inline-size; }
  .schedule-row { @apply grid items-center gap-x-2 gap-y-1 px-4 py-1.5; }
  .schedule-axis { @apply grid gap-x-2 px-4 pt-1; }
  .schedule-row, .schedule-axis { grid-template-columns: 2.25rem 2rem minmax(0, 1fr); }
  .schedule-row [hidden] { display: none; }
  .schedule-day { @apply text-sm font-medium text-gray-900; }
  .schedule-times { @apply col-span-3 min-w-0; }
  .schedule-times .time-field { @apply w-20; }
  .schedule-times-fields { @apply flex items-center gap-2; }
  .schedule-bar-track { @apply relative col-span-3 h-2 rounded bg-gray-100; }
  .schedule-bar { @apply absolute inset-y-0 rounded bg-indigo-500; }
  .schedule-length { @apply col-start-3 row-start-1 text-right text-xs tabular-nums text-gray-600; }
  .schedule-length.is-error { @apply text-red-700; }
  .schedule-axis-labels { @apply col-span-3 flex justify-between text-xs tabular-nums text-gray-500; }
  @container (min-width: 28rem) {
    .schedule-row, .schedule-axis { grid-template-columns: 2.25rem 2rem 11.5rem minmax(0, 1fr); }
    .schedule-times { @apply col-span-1; }
    .schedule-bar-track, .schedule-axis-labels { @apply col-span-2 col-start-3; }
    .schedule-length { @apply col-start-4; }
  }
  @container (min-width: 40rem) {
    .schedule-row, .schedule-axis { grid-template-columns: 2.25rem 2rem 11.5rem minmax(0, 1fr) 5.5rem; }
    .schedule-bar-track, .schedule-axis-labels { @apply col-span-1 col-start-4; }
    .schedule-length { @apply col-start-5; }
  }
  .schedule-total { @apply inline-flex items-center gap-1.5 text-sm; }
  .schedule-total.is-none { @apply text-gray-500; }
  .schedule-total.is-match { @apply text-emerald-700; }
  .schedule-total.is-differs { @apply text-amber-700; }
  /* Font Awesome's .fas is inline-block, which beats the browser's [hidden]. */
  .schedule-total [hidden] { display: none; }

  /* Team setup's days off (partners/setup/_days_off). The dates are the
     range calendar in a popover behind a button drawn as the date field's
     (partner_date_range_button). Wide enough for any range within a year
     ("Wed 23 Sep – Wed 30 Dec"), so a pick never moves the line's other
     controls; it grows for a range across a new year, and on a phone it
     cuts its text short rather than run off the card. The placeholder is
     muted until a day is picked (data-picked, date_range_controller.js). A
     missing pick rings it red (inline_validity_controller.js), and the ring
     stays red while it has focus. */
  .date-range-picker { @apply relative inline-block max-w-full; }
  .date-range-button {
    @apply inline-flex max-w-full items-center gap-2 whitespace-nowrap rounded-md border border-gray-300 bg-white px-2.5 py-1.5
           text-left text-sm leading-5 text-gray-900 shadow-sm tabular-nums focus-ring hover:border-gray-400;
    min-width: 14rem;
  }
  .date-range-button .fa-calendar { @apply text-xs text-gray-400; }
  .date-range-button [data-date-range-target="label"] { @apply min-w-0 truncate; }
  .date-range-button:not([data-picked="true"]) [data-date-range-target="label"] { @apply text-gray-500; }
  .date-range-button[aria-invalid="true"] { @apply border-red-500 ring-1 ring-red-500; }
  .date-range-button[aria-invalid="true"]:focus-visible { @apply ring-2 ring-red-500; }
  .day-off-note { @apply min-w-0 flex-1; flex-basis: 8rem; }

  /* Team setup's tasks (partners/setup/_daily_tasks). A task is a line: a
     grip handle - a button, drag it or press Up / Down on it
     (task_order_controller.js) - the title, the days pill or the repeat
     pill and its next due date, and at the end the bin. The task being
     dragged is faded where it will land. */
  .task-row { @apply flex items-center justify-between gap-3 bg-white px-4 py-2; }
  .task-row.is-dragging { @apply opacity-40; }
  .task-handle {
    @apply inline-flex h-6 w-5 shrink-0 cursor-grab items-center justify-center rounded text-gray-400 hover:text-gray-600
           focus-visible:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500;
  }
  .task-row.is-dragging .task-handle { @apply cursor-grabbing; }
  /* The icon fills the handle: Firefox before 147 starts a button's drag
     only from a press on the icon inside it, not on the button around it. */
  .task-handle > i { @apply flex h-full w-full items-center justify-center; }
  /* A touch screen can't drag a task (the handle arms on a mouse press) and
     has no arrow keys: there each task shows Up / Down buttons instead of
     the handle and the header's "drag to reorder". Not drawn at all where
     there is a hover, so a mouse and keyboard never meet them. */
  .task-moves { @apply hidden items-center gap-1; }
  .task-move { @apply inline-flex h-8 w-8 items-center justify-center rounded text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500; }
  @media (hover: none) {
    .task-moves { @apply flex; }
    .task-handle, .task-order-hint { @apply hidden; }
  }
  .task-add { @apply space-y-2 rounded-b-lg border-t border-gray-100 bg-gray-50 px-4 py-3; }

  /* Day chips (partner_day_chips): real checkboxes, hidden but focusable,
     each drawn as a small pill - "Every day" and a letter per weekday. A
     ticked chip is filled indigo; the focused one is ringed. */
  .day-chips { @apply flex flex-wrap items-center gap-1; }
  .day-chip {
    @apply relative inline-flex h-7 cursor-pointer select-none items-center justify-center rounded-md bg-gray-100 px-2 text-xs
           font-semibold text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-900;
    min-width: 1.875rem;
  }
  .day-chip input { @apply sr-only; }
  .day-chip:has(input:checked) { @apply bg-indigo-600 text-white; }
  .day-chip:has(input:focus-visible) { @apply ring-2 ring-indigo-500 ring-offset-1; }

  /* Team setup: the change history (Task 10). The line's flex is on an inner
     div so the li's `hidden` holds. */
  .history-group { @apply px-4 pb-0.5 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-500; }
  .history-line { @apply flex gap-2.5 px-4 py-2; }
  .history-list li:focus { @apply outline-none; }
  .history-list li:focus-visible > .history-line { @apply bg-indigo-50; }
  .history-icon { @apply inline-flex h-6 w-6 flex-none items-center justify-center rounded-md text-xs; }
  .history-icon.is-indigo { @apply bg-indigo-50 text-indigo-700; }
  .history-icon.is-red { @apply bg-red-50 text-red-700; }
  .history-icon.is-amber { @apply bg-amber-50 text-amber-700; }
  .history-chip { @apply ml-1 inline-flex items-center gap-1 rounded-md bg-slate-50 px-1.5 text-xs tabular-nums text-gray-700 ring-1 ring-inset ring-slate-200; }
  .history-chip s { @apply text-gray-400; }
  .history-chip .fa-arrow-right { @apply text-gray-400; font-size: 0.625rem; }
  .history-show-all { @apply text-xs font-semibold text-indigo-600 hover:text-indigo-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 rounded; }
  .log-long-text { @apply mt-2 w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700; }

  /* Website chat (app/views/chats, layouts/chat; spec 4.4). These pages are
     phone-first and their views take no arbitrary values
     (test/integration/chat_views_guard_test.rb), so what a utility cannot
     say lives here, prefixed .chat-.

     The bottom of a chat page (the composer, a pinned button) keeps clear of
     a phone's home indicator: at least the 0.75rem it would have anyway,
     more where the device reports a safe area. */
  .chat-safe-bottom { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }

  /* The chat page's list column marks the open chat's row aria-current
     (chat_inbox_controller.js); the row is drawn as the mockup's selected
     one, whatever its usual tone (an unanswered row is amber). */
  .chat-row-link[aria-current="page"] { @apply border-brand bg-indigo-50 hover:bg-indigo-50; }

  /* A tab's panel on the chat page (chats/show): a column filling the page
     under the tab bar. admin_tabs_controller hides the others with the
     hidden attribute, which this display would otherwise beat (both are one
     class or attribute, and the component comes after the browser's rule),
     so it is put back here, for the panel only. */
  .chat-tab-panel { @apply flex min-h-0 flex-1 flex-col; }
  .chat-tab-panel[hidden] { display: none; }
}

/* Honour the OS "reduce motion" setting for the sidebar/panel transitions. */
/* Used by .auth-fade on the sign-in artwork. Declared outside @layer
   components so the keyframes are never subject to layer ordering. */
@keyframes auth-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0.55); }
  70% { box-shadow: 0 0 0 6px rgb(16 185 129 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@layer base {
  body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/*!
 * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900); }

.fa,
.fa-classic,
.fa-sharp,
.fas,
.fa-solid,
.far,
.fa-regular,
.fab,
.fa-brands {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: var(--fa-display, inline-block);
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto; }

.fas,
.fa-classic,
.fa-solid,
.far,
.fa-regular {
  font-family: 'Font Awesome 6 Free'; }

.fab,
.fa-brands {
  font-family: 'Font Awesome 6 Brands'; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-2xs {
  font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em; }

.fa-xs {
  font-size: 0.75em;
  line-height: 0.0833333337em;
  vertical-align: 0.125em; }

.fa-sm {
  font-size: 0.875em;
  line-height: 0.0714285718em;
  vertical-align: 0.0535714295em; }

.fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; }

.fa-xl {
  font-size: 1.5em;
  line-height: 0.0416666682em;
  vertical-align: -0.125em; }

.fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: var(--fa-li-margin, 2.5em);
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: calc(var(--fa-li-width, 2em) * -1);
  position: absolute;
  text-align: center;
  width: var(--fa-li-width, 2em);
  line-height: inherit; }

.fa-border {
  border-color: var(--fa-border-color, #eee);
  border-radius: var(--fa-border-radius, 0.1em);
  border-style: var(--fa-border-style, solid);
  border-width: var(--fa-border-width, 0.08em);
  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }

.fa-pull-left {
  float: left;
  margin-right: var(--fa-pull-margin, 0.3em); }

.fa-pull-right {
  float: right;
  margin-left: var(--fa-pull-margin, 0.3em); }

.fa-beat {
  animation-name: fa-beat;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-bounce {
  animation-name: fa-bounce;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }

.fa-fade {
  animation-name: fa-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-beat-fade {
  animation-name: fa-beat-fade;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }

.fa-flip {
  animation-name: fa-flip;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, ease-in-out); }

.fa-shake {
  animation-name: fa-shake;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin {
  animation-name: fa-spin;
  animation-delay: var(--fa-animation-delay, 0s);
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 2s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, linear); }

.fa-spin-reverse {
  --fa-animation-direction: reverse; }

.fa-pulse,
.fa-spin-pulse {
  animation-name: fa-spin;
  animation-direction: var(--fa-animation-direction, normal);
  animation-duration: var(--fa-animation-duration, 1s);
  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
  animation-timing-function: var(--fa-animation-timing, steps(8)); }

@media (prefers-reduced-motion: reduce) {
  .fa-beat,
  .fa-bounce,
  .fa-fade,
  .fa-beat-fade,
  .fa-flip,
  .fa-pulse,
  .fa-shake,
  .fa-spin,
  .fa-spin-pulse {
    animation-delay: -1ms;
    animation-duration: 1ms;
    animation-iteration-count: 1;
    transition-delay: 0s;
    transition-duration: 0s; } }

@keyframes fa-beat {
  0%, 90% {
    transform: scale(1); }
  45% {
    transform: scale(var(--fa-beat-scale, 1.25)); } }

@keyframes fa-bounce {
  0% {
    transform: scale(1, 1) translateY(0); }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
  64% {
    transform: scale(1, 1) translateY(0); }
  100% {
    transform: scale(1, 1) translateY(0); } }

@keyframes fa-fade {
  50% {
    opacity: var(--fa-fade-opacity, 0.4); } }

@keyframes fa-beat-fade {
  0%, 100% {
    opacity: var(--fa-beat-fade-opacity, 0.4);
    transform: scale(1); }
  50% {
    opacity: 1;
    transform: scale(var(--fa-beat-fade-scale, 1.125)); } }

@keyframes fa-flip {
  50% {
    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }

@keyframes fa-shake {
  0% {
    transform: rotate(-15deg); }
  4% {
    transform: rotate(15deg); }
  8%, 24% {
    transform: rotate(-18deg); }
  12%, 28% {
    transform: rotate(18deg); }
  16% {
    transform: rotate(-22deg); }
  20% {
    transform: rotate(22deg); }
  32% {
    transform: rotate(-12deg); }
  36% {
    transform: rotate(12deg); }
  40%, 100% {
    transform: rotate(0deg); } }

@keyframes fa-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.fa-rotate-90 {
  transform: rotate(90deg); }

.fa-rotate-180 {
  transform: rotate(180deg); }

.fa-rotate-270 {
  transform: rotate(270deg); }

.fa-flip-horizontal {
  transform: scale(-1, 1); }

.fa-flip-vertical {
  transform: scale(1, -1); }

.fa-flip-both,
.fa-flip-horizontal.fa-flip-vertical {
  transform: scale(-1, -1); }

.fa-rotate-by {
  transform: rotate(var(--fa-rotate-angle, 0)); }

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em; }

.fa-stack-1x,
.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: var(--fa-stack-z-index, auto); }

.fa-stack-1x {
  line-height: inherit; }

.fa-stack-2x {
  font-size: 2em; }

.fa-inverse {
  color: var(--fa-inverse, #fff); }

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-0::before {
  content: "\30"; }

.fa-1::before {
  content: "\31"; }

.fa-2::before {
  content: "\32"; }

.fa-3::before {
  content: "\33"; }

.fa-4::before {
  content: "\34"; }

.fa-5::before {
  content: "\35"; }

.fa-6::before {
  content: "\36"; }

.fa-7::before {
  content: "\37"; }

.fa-8::before {
  content: "\38"; }

.fa-9::before {
  content: "\39"; }

.fa-fill-drip::before {
  content: "\f576"; }

.fa-arrows-to-circle::before {
  content: "\e4bd"; }

.fa-circle-chevron-right::before {
  content: "\f138"; }

.fa-chevron-circle-right::before {
  content: "\f138"; }

.fa-at::before {
  content: "\40"; }

.fa-trash-can::before {
  content: "\f2ed"; }

.fa-trash-alt::before {
  content: "\f2ed"; }

.fa-text-height::before {
  content: "\f034"; }

.fa-user-xmark::before {
  content: "\f235"; }

.fa-user-times::before {
  content: "\f235"; }

.fa-stethoscope::before {
  content: "\f0f1"; }

.fa-message::before {
  content: "\f27a"; }

.fa-comment-alt::before {
  content: "\f27a"; }

.fa-info::before {
  content: "\f129"; }

.fa-down-left-and-up-right-to-center::before {
  content: "\f422"; }

.fa-compress-alt::before {
  content: "\f422"; }

.fa-explosion::before {
  content: "\e4e9"; }

.fa-file-lines::before {
  content: "\f15c"; }

.fa-file-alt::before {
  content: "\f15c"; }

.fa-file-text::before {
  content: "\f15c"; }

.fa-wave-square::before {
  content: "\f83e"; }

.fa-ring::before {
  content: "\f70b"; }

.fa-building-un::before {
  content: "\e4d9"; }

.fa-dice-three::before {
  content: "\f527"; }

.fa-calendar-days::before {
  content: "\f073"; }

.fa-calendar-alt::before {
  content: "\f073"; }

.fa-anchor-circle-check::before {
  content: "\e4aa"; }

.fa-building-circle-arrow-right::before {
  content: "\e4d1"; }

.fa-volleyball::before {
  content: "\f45f"; }

.fa-volleyball-ball::before {
  content: "\f45f"; }

.fa-arrows-up-to-line::before {
  content: "\e4c2"; }

.fa-sort-down::before {
  content: "\f0dd"; }

.fa-sort-desc::before {
  content: "\f0dd"; }

.fa-circle-minus::before {
  content: "\f056"; }

.fa-minus-circle::before {
  content: "\f056"; }

.fa-door-open::before {
  content: "\f52b"; }

.fa-right-from-bracket::before {
  content: "\f2f5"; }

.fa-sign-out-alt::before {
  content: "\f2f5"; }

.fa-atom::before {
  content: "\f5d2"; }

.fa-soap::before {
  content: "\e06e"; }

.fa-icons::before {
  content: "\f86d"; }

.fa-heart-music-camera-bolt::before {
  content: "\f86d"; }

.fa-microphone-lines-slash::before {
  content: "\f539"; }

.fa-microphone-alt-slash::before {
  content: "\f539"; }

.fa-bridge-circle-check::before {
  content: "\e4c9"; }

.fa-pump-medical::before {
  content: "\e06a"; }

.fa-fingerprint::before {
  content: "\f577"; }

.fa-hand-point-right::before {
  content: "\f0a4"; }

.fa-magnifying-glass-location::before {
  content: "\f689"; }

.fa-search-location::before {
  content: "\f689"; }

.fa-forward-step::before {
  content: "\f051"; }

.fa-step-forward::before {
  content: "\f051"; }

.fa-face-smile-beam::before {
  content: "\f5b8"; }

.fa-smile-beam::before {
  content: "\f5b8"; }

.fa-flag-checkered::before {
  content: "\f11e"; }

.fa-football::before {
  content: "\f44e"; }

.fa-football-ball::before {
  content: "\f44e"; }

.fa-school-circle-exclamation::before {
  content: "\e56c"; }

.fa-crop::before {
  content: "\f125"; }

.fa-angles-down::before {
  content: "\f103"; }

.fa-angle-double-down::before {
  content: "\f103"; }

.fa-users-rectangle::before {
  content: "\e594"; }

.fa-people-roof::before {
  content: "\e537"; }

.fa-people-line::before {
  content: "\e534"; }

.fa-beer-mug-empty::before {
  content: "\f0fc"; }

.fa-beer::before {
  content: "\f0fc"; }

.fa-diagram-predecessor::before {
  content: "\e477"; }

.fa-arrow-up-long::before {
  content: "\f176"; }

.fa-long-arrow-up::before {
  content: "\f176"; }

.fa-fire-flame-simple::before {
  content: "\f46a"; }

.fa-burn::before {
  content: "\f46a"; }

.fa-person::before {
  content: "\f183"; }

.fa-male::before {
  content: "\f183"; }

.fa-laptop::before {
  content: "\f109"; }

.fa-file-csv::before {
  content: "\f6dd"; }

.fa-menorah::before {
  content: "\f676"; }

.fa-truck-plane::before {
  content: "\e58f"; }

.fa-record-vinyl::before {
  content: "\f8d9"; }

.fa-face-grin-stars::before {
  content: "\f587"; }

.fa-grin-stars::before {
  content: "\f587"; }

.fa-bong::before {
  content: "\f55c"; }

.fa-spaghetti-monster-flying::before {
  content: "\f67b"; }

.fa-pastafarianism::before {
  content: "\f67b"; }

.fa-arrow-down-up-across-line::before {
  content: "\e4af"; }

.fa-spoon::before {
  content: "\f2e5"; }

.fa-utensil-spoon::before {
  content: "\f2e5"; }

.fa-jar-wheat::before {
  content: "\e517"; }

.fa-envelopes-bulk::before {
  content: "\f674"; }

.fa-mail-bulk::before {
  content: "\f674"; }

.fa-file-circle-exclamation::before {
  content: "\e4eb"; }

.fa-circle-h::before {
  content: "\f47e"; }

.fa-hospital-symbol::before {
  content: "\f47e"; }

.fa-pager::before {
  content: "\f815"; }

.fa-address-book::before {
  content: "\f2b9"; }

.fa-contact-book::before {
  content: "\f2b9"; }

.fa-strikethrough::before {
  content: "\f0cc"; }

.fa-k::before {
  content: "\4b"; }

.fa-landmark-flag::before {
  content: "\e51c"; }

.fa-pencil::before {
  content: "\f303"; }

.fa-pencil-alt::before {
  content: "\f303"; }

.fa-backward::before {
  content: "\f04a"; }

.fa-caret-right::before {
  content: "\f0da"; }

.fa-comments::before {
  content: "\f086"; }

.fa-paste::before {
  content: "\f0ea"; }

.fa-file-clipboard::before {
  content: "\f0ea"; }

.fa-code-pull-request::before {
  content: "\e13c"; }

.fa-clipboard-list::before {
  content: "\f46d"; }

.fa-truck-ramp-box::before {
  content: "\f4de"; }

.fa-truck-loading::before {
  content: "\f4de"; }

.fa-user-check::before {
  content: "\f4fc"; }

.fa-vial-virus::before {
  content: "\e597"; }

.fa-sheet-plastic::before {
  content: "\e571"; }

.fa-blog::before {
  content: "\f781"; }

.fa-user-ninja::before {
  content: "\f504"; }

.fa-person-arrow-up-from-line::before {
  content: "\e539"; }

.fa-scroll-torah::before {
  content: "\f6a0"; }

.fa-torah::before {
  content: "\f6a0"; }

.fa-broom-ball::before {
  content: "\f458"; }

.fa-quidditch::before {
  content: "\f458"; }

.fa-quidditch-broom-ball::before {
  content: "\f458"; }

.fa-toggle-off::before {
  content: "\f204"; }

.fa-box-archive::before {
  content: "\f187"; }

.fa-archive::before {
  content: "\f187"; }

.fa-person-drowning::before {
  content: "\e545"; }

.fa-arrow-down-9-1::before {
  content: "\f886"; }

.fa-sort-numeric-desc::before {
  content: "\f886"; }

.fa-sort-numeric-down-alt::before {
  content: "\f886"; }

.fa-face-grin-tongue-squint::before {
  content: "\f58a"; }

.fa-grin-tongue-squint::before {
  content: "\f58a"; }

.fa-spray-can::before {
  content: "\f5bd"; }

.fa-truck-monster::before {
  content: "\f63b"; }

.fa-w::before {
  content: "\57"; }

.fa-earth-africa::before {
  content: "\f57c"; }

.fa-globe-africa::before {
  content: "\f57c"; }

.fa-rainbow::before {
  content: "\f75b"; }

.fa-circle-notch::before {
  content: "\f1ce"; }

.fa-tablet-screen-button::before {
  content: "\f3fa"; }

.fa-tablet-alt::before {
  content: "\f3fa"; }

.fa-paw::before {
  content: "\f1b0"; }

.fa-cloud::before {
  content: "\f0c2"; }

.fa-trowel-bricks::before {
  content: "\e58a"; }

.fa-face-flushed::before {
  content: "\f579"; }

.fa-flushed::before {
  content: "\f579"; }

.fa-hospital-user::before {
  content: "\f80d"; }

.fa-tent-arrow-left-right::before {
  content: "\e57f"; }

.fa-gavel::before {
  content: "\f0e3"; }

.fa-legal::before {
  content: "\f0e3"; }

.fa-binoculars::before {
  content: "\f1e5"; }

.fa-microphone-slash::before {
  content: "\f131"; }

.fa-box-tissue::before {
  content: "\e05b"; }

.fa-motorcycle::before {
  content: "\f21c"; }

.fa-bell-concierge::before {
  content: "\f562"; }

.fa-concierge-bell::before {
  content: "\f562"; }

.fa-pen-ruler::before {
  content: "\f5ae"; }

.fa-pencil-ruler::before {
  content: "\f5ae"; }

.fa-people-arrows::before {
  content: "\e068"; }

.fa-people-arrows-left-right::before {
  content: "\e068"; }

.fa-mars-and-venus-burst::before {
  content: "\e523"; }

.fa-square-caret-right::before {
  content: "\f152"; }

.fa-caret-square-right::before {
  content: "\f152"; }

.fa-scissors::before {
  content: "\f0c4"; }

.fa-cut::before {
  content: "\f0c4"; }

.fa-sun-plant-wilt::before {
  content: "\e57a"; }

.fa-toilets-portable::before {
  content: "\e584"; }

.fa-hockey-puck::before {
  content: "\f453"; }

.fa-table::before {
  content: "\f0ce"; }

.fa-magnifying-glass-arrow-right::before {
  content: "\e521"; }

.fa-tachograph-digital::before {
  content: "\f566"; }

.fa-digital-tachograph::before {
  content: "\f566"; }

.fa-users-slash::before {
  content: "\e073"; }

.fa-clover::before {
  content: "\e139"; }

.fa-reply::before {
  content: "\f3e5"; }

.fa-mail-reply::before {
  content: "\f3e5"; }

.fa-star-and-crescent::before {
  content: "\f699"; }

.fa-house-fire::before {
  content: "\e50c"; }

.fa-square-minus::before {
  content: "\f146"; }

.fa-minus-square::before {
  content: "\f146"; }

.fa-helicopter::before {
  content: "\f533"; }

.fa-compass::before {
  content: "\f14e"; }

.fa-square-caret-down::before {
  content: "\f150"; }

.fa-caret-square-down::before {
  content: "\f150"; }

.fa-file-circle-question::before {
  content: "\e4ef"; }

.fa-laptop-code::before {
  content: "\f5fc"; }

.fa-swatchbook::before {
  content: "\f5c3"; }

.fa-prescription-bottle::before {
  content: "\f485"; }

.fa-bars::before {
  content: "\f0c9"; }

.fa-navicon::before {
  content: "\f0c9"; }

.fa-people-group::before {
  content: "\e533"; }

.fa-hourglass-end::before {
  content: "\f253"; }

.fa-hourglass-3::before {
  content: "\f253"; }

.fa-heart-crack::before {
  content: "\f7a9"; }

.fa-heart-broken::before {
  content: "\f7a9"; }

.fa-square-up-right::before {
  content: "\f360"; }

.fa-external-link-square-alt::before {
  content: "\f360"; }

.fa-face-kiss-beam::before {
  content: "\f597"; }

.fa-kiss-beam::before {
  content: "\f597"; }

.fa-film::before {
  content: "\f008"; }

.fa-ruler-horizontal::before {
  content: "\f547"; }

.fa-people-robbery::before {
  content: "\e536"; }

.fa-lightbulb::before {
  content: "\f0eb"; }

.fa-caret-left::before {
  content: "\f0d9"; }

.fa-circle-exclamation::before {
  content: "\f06a"; }

.fa-exclamation-circle::before {
  content: "\f06a"; }

.fa-school-circle-xmark::before {
  content: "\e56d"; }

.fa-arrow-right-from-bracket::before {
  content: "\f08b"; }

.fa-sign-out::before {
  content: "\f08b"; }

.fa-circle-chevron-down::before {
  content: "\f13a"; }

.fa-chevron-circle-down::before {
  content: "\f13a"; }

.fa-unlock-keyhole::before {
  content: "\f13e"; }

.fa-unlock-alt::before {
  content: "\f13e"; }

.fa-cloud-showers-heavy::before {
  content: "\f740"; }

.fa-headphones-simple::before {
  content: "\f58f"; }

.fa-headphones-alt::before {
  content: "\f58f"; }

.fa-sitemap::before {
  content: "\f0e8"; }

.fa-circle-dollar-to-slot::before {
  content: "\f4b9"; }

.fa-donate::before {
  content: "\f4b9"; }

.fa-memory::before {
  content: "\f538"; }

.fa-road-spikes::before {
  content: "\e568"; }

.fa-fire-burner::before {
  content: "\e4f1"; }

.fa-flag::before {
  content: "\f024"; }

.fa-hanukiah::before {
  content: "\f6e6"; }

.fa-feather::before {
  content: "\f52d"; }

.fa-volume-low::before {
  content: "\f027"; }

.fa-volume-down::before {
  content: "\f027"; }

.fa-comment-slash::before {
  content: "\f4b3"; }

.fa-cloud-sun-rain::before {
  content: "\f743"; }

.fa-compress::before {
  content: "\f066"; }

.fa-wheat-awn::before {
  content: "\e2cd"; }

.fa-wheat-alt::before {
  content: "\e2cd"; }

.fa-ankh::before {
  content: "\f644"; }

.fa-hands-holding-child::before {
  content: "\e4fa"; }

.fa-asterisk::before {
  content: "\2a"; }

.fa-square-check::before {
  content: "\f14a"; }

.fa-check-square::before {
  content: "\f14a"; }

.fa-peseta-sign::before {
  content: "\e221"; }

.fa-heading::before {
  content: "\f1dc"; }

.fa-header::before {
  content: "\f1dc"; }

.fa-ghost::before {
  content: "\f6e2"; }

.fa-list::before {
  content: "\f03a"; }

.fa-list-squares::before {
  content: "\f03a"; }

.fa-square-phone-flip::before {
  content: "\f87b"; }

.fa-phone-square-alt::before {
  content: "\f87b"; }

.fa-cart-plus::before {
  content: "\f217"; }

.fa-gamepad::before {
  content: "\f11b"; }

.fa-circle-dot::before {
  content: "\f192"; }

.fa-dot-circle::before {
  content: "\f192"; }

.fa-face-dizzy::before {
  content: "\f567"; }

.fa-dizzy::before {
  content: "\f567"; }

.fa-egg::before {
  content: "\f7fb"; }

.fa-house-medical-circle-xmark::before {
  content: "\e513"; }

.fa-campground::before {
  content: "\f6bb"; }

.fa-folder-plus::before {
  content: "\f65e"; }

.fa-futbol::before {
  content: "\f1e3"; }

.fa-futbol-ball::before {
  content: "\f1e3"; }

.fa-soccer-ball::before {
  content: "\f1e3"; }

.fa-paintbrush::before {
  content: "\f1fc"; }

.fa-paint-brush::before {
  content: "\f1fc"; }

.fa-lock::before {
  content: "\f023"; }

.fa-gas-pump::before {
  content: "\f52f"; }

.fa-hot-tub-person::before {
  content: "\f593"; }

.fa-hot-tub::before {
  content: "\f593"; }

.fa-map-location::before {
  content: "\f59f"; }

.fa-map-marked::before {
  content: "\f59f"; }

.fa-house-flood-water::before {
  content: "\e50e"; }

.fa-tree::before {
  content: "\f1bb"; }

.fa-bridge-lock::before {
  content: "\e4cc"; }

.fa-sack-dollar::before {
  content: "\f81d"; }

.fa-pen-to-square::before {
  content: "\f044"; }

.fa-edit::before {
  content: "\f044"; }

.fa-car-side::before {
  content: "\f5e4"; }

.fa-share-nodes::before {
  content: "\f1e0"; }

.fa-share-alt::before {
  content: "\f1e0"; }

.fa-heart-circle-minus::before {
  content: "\e4ff"; }

.fa-hourglass-half::before {
  content: "\f252"; }

.fa-hourglass-2::before {
  content: "\f252"; }

.fa-microscope::before {
  content: "\f610"; }

.fa-sink::before {
  content: "\e06d"; }

.fa-bag-shopping::before {
  content: "\f290"; }

.fa-shopping-bag::before {
  content: "\f290"; }

.fa-arrow-down-z-a::before {
  content: "\f881"; }

.fa-sort-alpha-desc::before {
  content: "\f881"; }

.fa-sort-alpha-down-alt::before {
  content: "\f881"; }

.fa-mitten::before {
  content: "\f7b5"; }

.fa-person-rays::before {
  content: "\e54d"; }

.fa-users::before {
  content: "\f0c0"; }

.fa-eye-slash::before {
  content: "\f070"; }

.fa-flask-vial::before {
  content: "\e4f3"; }

.fa-hand::before {
  content: "\f256"; }

.fa-hand-paper::before {
  content: "\f256"; }

.fa-om::before {
  content: "\f679"; }

.fa-worm::before {
  content: "\e599"; }

.fa-house-circle-xmark::before {
  content: "\e50b"; }

.fa-plug::before {
  content: "\f1e6"; }

.fa-chevron-up::before {
  content: "\f077"; }

.fa-hand-spock::before {
  content: "\f259"; }

.fa-stopwatch::before {
  content: "\f2f2"; }

.fa-face-kiss::before {
  content: "\f596"; }

.fa-kiss::before {
  content: "\f596"; }

.fa-bridge-circle-xmark::before {
  content: "\e4cb"; }

.fa-face-grin-tongue::before {
  content: "\f589"; }

.fa-grin-tongue::before {
  content: "\f589"; }

.fa-chess-bishop::before {
  content: "\f43a"; }

.fa-face-grin-wink::before {
  content: "\f58c"; }

.fa-grin-wink::before {
  content: "\f58c"; }

.fa-ear-deaf::before {
  content: "\f2a4"; }

.fa-deaf::before {
  content: "\f2a4"; }

.fa-deafness::before {
  content: "\f2a4"; }

.fa-hard-of-hearing::before {
  content: "\f2a4"; }

.fa-road-circle-check::before {
  content: "\e564"; }

.fa-dice-five::before {
  content: "\f523"; }

.fa-square-rss::before {
  content: "\f143"; }

.fa-rss-square::before {
  content: "\f143"; }

.fa-land-mine-on::before {
  content: "\e51b"; }

.fa-i-cursor::before {
  content: "\f246"; }

.fa-stamp::before {
  content: "\f5bf"; }

.fa-stairs::before {
  content: "\e289"; }

.fa-i::before {
  content: "\49"; }

.fa-hryvnia-sign::before {
  content: "\f6f2"; }

.fa-hryvnia::before {
  content: "\f6f2"; }

.fa-pills::before {
  content: "\f484"; }

.fa-face-grin-wide::before {
  content: "\f581"; }

.fa-grin-alt::before {
  content: "\f581"; }

.fa-tooth::before {
  content: "\f5c9"; }

.fa-v::before {
  content: "\56"; }

.fa-bangladeshi-taka-sign::before {
  content: "\e2e6"; }

.fa-bicycle::before {
  content: "\f206"; }

.fa-staff-snake::before {
  content: "\e579"; }

.fa-rod-asclepius::before {
  content: "\e579"; }

.fa-rod-snake::before {
  content: "\e579"; }

.fa-staff-aesculapius::before {
  content: "\e579"; }

.fa-head-side-cough-slash::before {
  content: "\e062"; }

.fa-truck-medical::before {
  content: "\f0f9"; }

.fa-ambulance::before {
  content: "\f0f9"; }

.fa-wheat-awn-circle-exclamation::before {
  content: "\e598"; }

.fa-snowman::before {
  content: "\f7d0"; }

.fa-mortar-pestle::before {
  content: "\f5a7"; }

.fa-road-barrier::before {
  content: "\e562"; }

.fa-school::before {
  content: "\f549"; }

.fa-igloo::before {
  content: "\f7ae"; }

.fa-joint::before {
  content: "\f595"; }

.fa-angle-right::before {
  content: "\f105"; }

.fa-horse::before {
  content: "\f6f0"; }

.fa-q::before {
  content: "\51"; }

.fa-g::before {
  content: "\47"; }

.fa-notes-medical::before {
  content: "\f481"; }

.fa-temperature-half::before {
  content: "\f2c9"; }

.fa-temperature-2::before {
  content: "\f2c9"; }

.fa-thermometer-2::before {
  content: "\f2c9"; }

.fa-thermometer-half::before {
  content: "\f2c9"; }

.fa-dong-sign::before {
  content: "\e169"; }

.fa-capsules::before {
  content: "\f46b"; }

.fa-poo-storm::before {
  content: "\f75a"; }

.fa-poo-bolt::before {
  content: "\f75a"; }

.fa-face-frown-open::before {
  content: "\f57a"; }

.fa-frown-open::before {
  content: "\f57a"; }

.fa-hand-point-up::before {
  content: "\f0a6"; }

.fa-money-bill::before {
  content: "\f0d6"; }

.fa-bookmark::before {
  content: "\f02e"; }

.fa-align-justify::before {
  content: "\f039"; }

.fa-umbrella-beach::before {
  content: "\f5ca"; }

.fa-helmet-un::before {
  content: "\e503"; }

.fa-bullseye::before {
  content: "\f140"; }

.fa-bacon::before {
  content: "\f7e5"; }

.fa-hand-point-down::before {
  content: "\f0a7"; }

.fa-arrow-up-from-bracket::before {
  content: "\e09a"; }

.fa-folder::before {
  content: "\f07b"; }

.fa-folder-blank::before {
  content: "\f07b"; }

.fa-file-waveform::before {
  content: "\f478"; }

.fa-file-medical-alt::before {
  content: "\f478"; }

.fa-radiation::before {
  content: "\f7b9"; }

.fa-chart-simple::before {
  content: "\e473"; }

.fa-mars-stroke::before {
  content: "\f229"; }

.fa-vial::before {
  content: "\f492"; }

.fa-gauge::before {
  content: "\f624"; }

.fa-dashboard::before {
  content: "\f624"; }

.fa-gauge-med::before {
  content: "\f624"; }

.fa-tachometer-alt-average::before {
  content: "\f624"; }

.fa-wand-magic-sparkles::before {
  content: "\e2ca"; }

.fa-magic-wand-sparkles::before {
  content: "\e2ca"; }

.fa-e::before {
  content: "\45"; }

.fa-pen-clip::before {
  content: "\f305"; }

.fa-pen-alt::before {
  content: "\f305"; }

.fa-bridge-circle-exclamation::before {
  content: "\e4ca"; }

.fa-user::before {
  content: "\f007"; }

.fa-school-circle-check::before {
  content: "\e56b"; }

.fa-dumpster::before {
  content: "\f793"; }

.fa-van-shuttle::before {
  content: "\f5b6"; }

.fa-shuttle-van::before {
  content: "\f5b6"; }

.fa-building-user::before {
  content: "\e4da"; }

.fa-square-caret-left::before {
  content: "\f191"; }

.fa-caret-square-left::before {
  content: "\f191"; }

.fa-highlighter::before {
  content: "\f591"; }

.fa-key::before {
  content: "\f084"; }

.fa-bullhorn::before {
  content: "\f0a1"; }

.fa-globe::before {
  content: "\f0ac"; }

.fa-synagogue::before {
  content: "\f69b"; }

.fa-person-half-dress::before {
  content: "\e548"; }

.fa-road-bridge::before {
  content: "\e563"; }

.fa-location-arrow::before {
  content: "\f124"; }

.fa-c::before {
  content: "\43"; }

.fa-tablet-button::before {
  content: "\f10a"; }

.fa-building-lock::before {
  content: "\e4d6"; }

.fa-pizza-slice::before {
  content: "\f818"; }

.fa-money-bill-wave::before {
  content: "\f53a"; }

.fa-chart-area::before {
  content: "\f1fe"; }

.fa-area-chart::before {
  content: "\f1fe"; }

.fa-house-flag::before {
  content: "\e50d"; }

.fa-person-circle-minus::before {
  content: "\e540"; }

.fa-ban::before {
  content: "\f05e"; }

.fa-cancel::before {
  content: "\f05e"; }

.fa-camera-rotate::before {
  content: "\e0d8"; }

.fa-spray-can-sparkles::before {
  content: "\f5d0"; }

.fa-air-freshener::before {
  content: "\f5d0"; }

.fa-star::before {
  content: "\f005"; }

.fa-repeat::before {
  content: "\f363"; }

.fa-cross::before {
  content: "\f654"; }

.fa-box::before {
  content: "\f466"; }

.fa-venus-mars::before {
  content: "\f228"; }

.fa-arrow-pointer::before {
  content: "\f245"; }

.fa-mouse-pointer::before {
  content: "\f245"; }

.fa-maximize::before {
  content: "\f31e"; }

.fa-expand-arrows-alt::before {
  content: "\f31e"; }

.fa-charging-station::before {
  content: "\f5e7"; }

.fa-shapes::before {
  content: "\f61f"; }

.fa-triangle-circle-square::before {
  content: "\f61f"; }

.fa-shuffle::before {
  content: "\f074"; }

.fa-random::before {
  content: "\f074"; }

.fa-person-running::before {
  content: "\f70c"; }

.fa-running::before {
  content: "\f70c"; }

.fa-mobile-retro::before {
  content: "\e527"; }

.fa-grip-lines-vertical::before {
  content: "\f7a5"; }

.fa-spider::before {
  content: "\f717"; }

.fa-hands-bound::before {
  content: "\e4f9"; }

.fa-file-invoice-dollar::before {
  content: "\f571"; }

.fa-plane-circle-exclamation::before {
  content: "\e556"; }

.fa-x-ray::before {
  content: "\f497"; }

.fa-spell-check::before {
  content: "\f891"; }

.fa-slash::before {
  content: "\f715"; }

.fa-computer-mouse::before {
  content: "\f8cc"; }

.fa-mouse::before {
  content: "\f8cc"; }

.fa-arrow-right-to-bracket::before {
  content: "\f090"; }

.fa-sign-in::before {
  content: "\f090"; }

.fa-shop-slash::before {
  content: "\e070"; }

.fa-store-alt-slash::before {
  content: "\e070"; }

.fa-server::before {
  content: "\f233"; }

.fa-virus-covid-slash::before {
  content: "\e4a9"; }

.fa-shop-lock::before {
  content: "\e4a5"; }

.fa-hourglass-start::before {
  content: "\f251"; }

.fa-hourglass-1::before {
  content: "\f251"; }

.fa-blender-phone::before {
  content: "\f6b6"; }

.fa-building-wheat::before {
  content: "\e4db"; }

.fa-person-breastfeeding::before {
  content: "\e53a"; }

.fa-right-to-bracket::before {
  content: "\f2f6"; }

.fa-sign-in-alt::before {
  content: "\f2f6"; }

.fa-venus::before {
  content: "\f221"; }

.fa-passport::before {
  content: "\f5ab"; }

.fa-heart-pulse::before {
  content: "\f21e"; }

.fa-heartbeat::before {
  content: "\f21e"; }

.fa-people-carry-box::before {
  content: "\f4ce"; }

.fa-people-carry::before {
  content: "\f4ce"; }

.fa-temperature-high::before {
  content: "\f769"; }

.fa-microchip::before {
  content: "\f2db"; }

.fa-crown::before {
  content: "\f521"; }

.fa-weight-hanging::before {
  content: "\f5cd"; }

.fa-xmarks-lines::before {
  content: "\e59a"; }

.fa-file-prescription::before {
  content: "\f572"; }

.fa-weight-scale::before {
  content: "\f496"; }

.fa-weight::before {
  content: "\f496"; }

.fa-user-group::before {
  content: "\f500"; }

.fa-user-friends::before {
  content: "\f500"; }

.fa-arrow-up-a-z::before {
  content: "\f15e"; }

.fa-sort-alpha-up::before {
  content: "\f15e"; }

.fa-chess-knight::before {
  content: "\f441"; }

.fa-face-laugh-squint::before {
  content: "\f59b"; }

.fa-laugh-squint::before {
  content: "\f59b"; }

.fa-wheelchair::before {
  content: "\f193"; }

.fa-circle-arrow-up::before {
  content: "\f0aa"; }

.fa-arrow-circle-up::before {
  content: "\f0aa"; }

.fa-toggle-on::before {
  content: "\f205"; }

.fa-person-walking::before {
  content: "\f554"; }

.fa-walking::before {
  content: "\f554"; }

.fa-l::before {
  content: "\4c"; }

.fa-fire::before {
  content: "\f06d"; }

.fa-bed-pulse::before {
  content: "\f487"; }

.fa-procedures::before {
  content: "\f487"; }

.fa-shuttle-space::before {
  content: "\f197"; }

.fa-space-shuttle::before {
  content: "\f197"; }

.fa-face-laugh::before {
  content: "\f599"; }

.fa-laugh::before {
  content: "\f599"; }

.fa-folder-open::before {
  content: "\f07c"; }

.fa-heart-circle-plus::before {
  content: "\e500"; }

.fa-code-fork::before {
  content: "\e13b"; }

.fa-city::before {
  content: "\f64f"; }

.fa-microphone-lines::before {
  content: "\f3c9"; }

.fa-microphone-alt::before {
  content: "\f3c9"; }

.fa-pepper-hot::before {
  content: "\f816"; }

.fa-unlock::before {
  content: "\f09c"; }

.fa-colon-sign::before {
  content: "\e140"; }

.fa-headset::before {
  content: "\f590"; }

.fa-store-slash::before {
  content: "\e071"; }

.fa-road-circle-xmark::before {
  content: "\e566"; }

.fa-user-minus::before {
  content: "\f503"; }

.fa-mars-stroke-up::before {
  content: "\f22a"; }

.fa-mars-stroke-v::before {
  content: "\f22a"; }

.fa-champagne-glasses::before {
  content: "\f79f"; }

.fa-glass-cheers::before {
  content: "\f79f"; }

.fa-clipboard::before {
  content: "\f328"; }

.fa-house-circle-exclamation::before {
  content: "\e50a"; }

.fa-file-arrow-up::before {
  content: "\f574"; }

.fa-file-upload::before {
  content: "\f574"; }

.fa-wifi::before {
  content: "\f1eb"; }

.fa-wifi-3::before {
  content: "\f1eb"; }

.fa-wifi-strong::before {
  content: "\f1eb"; }

.fa-bath::before {
  content: "\f2cd"; }

.fa-bathtub::before {
  content: "\f2cd"; }

.fa-underline::before {
  content: "\f0cd"; }

.fa-user-pen::before {
  content: "\f4ff"; }

.fa-user-edit::before {
  content: "\f4ff"; }

.fa-signature::before {
  content: "\f5b7"; }

.fa-stroopwafel::before {
  content: "\f551"; }

.fa-bold::before {
  content: "\f032"; }

.fa-anchor-lock::before {
  content: "\e4ad"; }

.fa-building-ngo::before {
  content: "\e4d7"; }

.fa-manat-sign::before {
  content: "\e1d5"; }

.fa-not-equal::before {
  content: "\f53e"; }

.fa-border-top-left::before {
  content: "\f853"; }

.fa-border-style::before {
  content: "\f853"; }

.fa-map-location-dot::before {
  content: "\f5a0"; }

.fa-map-marked-alt::before {
  content: "\f5a0"; }

.fa-jedi::before {
  content: "\f669"; }

.fa-square-poll-vertical::before {
  content: "\f681"; }

.fa-poll::before {
  content: "\f681"; }

.fa-mug-hot::before {
  content: "\f7b6"; }

.fa-car-battery::before {
  content: "\f5df"; }

.fa-battery-car::before {
  content: "\f5df"; }

.fa-gift::before {
  content: "\f06b"; }

.fa-dice-two::before {
  content: "\f528"; }

.fa-chess-queen::before {
  content: "\f445"; }

.fa-glasses::before {
  content: "\f530"; }

.fa-chess-board::before {
  content: "\f43c"; }

.fa-building-circle-check::before {
  content: "\e4d2"; }

.fa-person-chalkboard::before {
  content: "\e53d"; }

.fa-mars-stroke-right::before {
  content: "\f22b"; }

.fa-mars-stroke-h::before {
  content: "\f22b"; }

.fa-hand-back-fist::before {
  content: "\f255"; }

.fa-hand-rock::before {
  content: "\f255"; }

.fa-square-caret-up::before {
  content: "\f151"; }

.fa-caret-square-up::before {
  content: "\f151"; }

.fa-cloud-showers-water::before {
  content: "\e4e4"; }

.fa-chart-bar::before {
  content: "\f080"; }

.fa-bar-chart::before {
  content: "\f080"; }

.fa-hands-bubbles::before {
  content: "\e05e"; }

.fa-hands-wash::before {
  content: "\e05e"; }

.fa-less-than-equal::before {
  content: "\f537"; }

.fa-train::before {
  content: "\f238"; }

.fa-eye-low-vision::before {
  content: "\f2a8"; }

.fa-low-vision::before {
  content: "\f2a8"; }

.fa-crow::before {
  content: "\f520"; }

.fa-sailboat::before {
  content: "\e445"; }

.fa-window-restore::before {
  content: "\f2d2"; }

.fa-square-plus::before {
  content: "\f0fe"; }

.fa-plus-square::before {
  content: "\f0fe"; }

.fa-torii-gate::before {
  content: "\f6a1"; }

.fa-frog::before {
  content: "\f52e"; }

.fa-bucket::before {
  content: "\e4cf"; }

.fa-image::before {
  content: "\f03e"; }

.fa-microphone::before {
  content: "\f130"; }

.fa-cow::before {
  content: "\f6c8"; }

.fa-caret-up::before {
  content: "\f0d8"; }

.fa-screwdriver::before {
  content: "\f54a"; }

.fa-folder-closed::before {
  content: "\e185"; }

.fa-house-tsunami::before {
  content: "\e515"; }

.fa-square-nfi::before {
  content: "\e576"; }

.fa-arrow-up-from-ground-water::before {
  content: "\e4b5"; }

.fa-martini-glass::before {
  content: "\f57b"; }

.fa-glass-martini-alt::before {
  content: "\f57b"; }

.fa-rotate-left::before {
  content: "\f2ea"; }

.fa-rotate-back::before {
  content: "\f2ea"; }

.fa-rotate-backward::before {
  content: "\f2ea"; }

.fa-undo-alt::before {
  content: "\f2ea"; }

.fa-table-columns::before {
  content: "\f0db"; }

.fa-columns::before {
  content: "\f0db"; }

.fa-lemon::before {
  content: "\f094"; }

.fa-head-side-mask::before {
  content: "\e063"; }

.fa-handshake::before {
  content: "\f2b5"; }

.fa-gem::before {
  content: "\f3a5"; }

.fa-dolly::before {
  content: "\f472"; }

.fa-dolly-box::before {
  content: "\f472"; }

.fa-smoking::before {
  content: "\f48d"; }

.fa-minimize::before {
  content: "\f78c"; }

.fa-compress-arrows-alt::before {
  content: "\f78c"; }

.fa-monument::before {
  content: "\f5a6"; }

.fa-snowplow::before {
  content: "\f7d2"; }

.fa-angles-right::before {
  content: "\f101"; }

.fa-angle-double-right::before {
  content: "\f101"; }

.fa-cannabis::before {
  content: "\f55f"; }

.fa-circle-play::before {
  content: "\f144"; }

.fa-play-circle::before {
  content: "\f144"; }

.fa-tablets::before {
  content: "\f490"; }

.fa-ethernet::before {
  content: "\f796"; }

.fa-euro-sign::before {
  content: "\f153"; }

.fa-eur::before {
  content: "\f153"; }

.fa-euro::before {
  content: "\f153"; }

.fa-chair::before {
  content: "\f6c0"; }

.fa-circle-check::before {
  content: "\f058"; }

.fa-check-circle::before {
  content: "\f058"; }

.fa-circle-stop::before {
  content: "\f28d"; }

.fa-stop-circle::before {
  content: "\f28d"; }

.fa-compass-drafting::before {
  content: "\f568"; }

.fa-drafting-compass::before {
  content: "\f568"; }

.fa-plate-wheat::before {
  content: "\e55a"; }

.fa-icicles::before {
  content: "\f7ad"; }

.fa-person-shelter::before {
  content: "\e54f"; }

.fa-neuter::before {
  content: "\f22c"; }

.fa-id-badge::before {
  content: "\f2c1"; }

.fa-marker::before {
  content: "\f5a1"; }

.fa-face-laugh-beam::before {
  content: "\f59a"; }

.fa-laugh-beam::before {
  content: "\f59a"; }

.fa-helicopter-symbol::before {
  content: "\e502"; }

.fa-universal-access::before {
  content: "\f29a"; }

.fa-circle-chevron-up::before {
  content: "\f139"; }

.fa-chevron-circle-up::before {
  content: "\f139"; }

.fa-lari-sign::before {
  content: "\e1c8"; }

.fa-volcano::before {
  content: "\f770"; }

.fa-person-walking-dashed-line-arrow-right::before {
  content: "\e553"; }

.fa-sterling-sign::before {
  content: "\f154"; }

.fa-gbp::before {
  content: "\f154"; }

.fa-pound-sign::before {
  content: "\f154"; }

.fa-viruses::before {
  content: "\e076"; }

.fa-square-person-confined::before {
  content: "\e577"; }

.fa-user-tie::before {
  content: "\f508"; }

.fa-arrow-down-long::before {
  content: "\f175"; }

.fa-long-arrow-down::before {
  content: "\f175"; }

.fa-tent-arrow-down-to-line::before {
  content: "\e57e"; }

.fa-certificate::before {
  content: "\f0a3"; }

.fa-reply-all::before {
  content: "\f122"; }

.fa-mail-reply-all::before {
  content: "\f122"; }

.fa-suitcase::before {
  content: "\f0f2"; }

.fa-person-skating::before {
  content: "\f7c5"; }

.fa-skating::before {
  content: "\f7c5"; }

.fa-filter-circle-dollar::before {
  content: "\f662"; }

.fa-funnel-dollar::before {
  content: "\f662"; }

.fa-camera-retro::before {
  content: "\f083"; }

.fa-circle-arrow-down::before {
  content: "\f0ab"; }

.fa-arrow-circle-down::before {
  content: "\f0ab"; }

.fa-file-import::before {
  content: "\f56f"; }

.fa-arrow-right-to-file::before {
  content: "\f56f"; }

.fa-square-arrow-up-right::before {
  content: "\f14c"; }

.fa-external-link-square::before {
  content: "\f14c"; }

.fa-box-open::before {
  content: "\f49e"; }

.fa-scroll::before {
  content: "\f70e"; }

.fa-spa::before {
  content: "\f5bb"; }

.fa-location-pin-lock::before {
  content: "\e51f"; }

.fa-pause::before {
  content: "\f04c"; }

.fa-hill-avalanche::before {
  content: "\e507"; }

.fa-temperature-empty::before {
  content: "\f2cb"; }

.fa-temperature-0::before {
  content: "\f2cb"; }

.fa-thermometer-0::before {
  content: "\f2cb"; }

.fa-thermometer-empty::before {
  content: "\f2cb"; }

.fa-bomb::before {
  content: "\f1e2"; }

.fa-registered::before {
  content: "\f25d"; }

.fa-address-card::before {
  content: "\f2bb"; }

.fa-contact-card::before {
  content: "\f2bb"; }

.fa-vcard::before {
  content: "\f2bb"; }

.fa-scale-unbalanced-flip::before {
  content: "\f516"; }

.fa-balance-scale-right::before {
  content: "\f516"; }

.fa-subscript::before {
  content: "\f12c"; }

.fa-diamond-turn-right::before {
  content: "\f5eb"; }

.fa-directions::before {
  content: "\f5eb"; }

.fa-burst::before {
  content: "\e4dc"; }

.fa-house-laptop::before {
  content: "\e066"; }

.fa-laptop-house::before {
  content: "\e066"; }

.fa-face-tired::before {
  content: "\f5c8"; }

.fa-tired::before {
  content: "\f5c8"; }

.fa-money-bills::before {
  content: "\e1f3"; }

.fa-smog::before {
  content: "\f75f"; }

.fa-crutch::before {
  content: "\f7f7"; }

.fa-cloud-arrow-up::before {
  content: "\f0ee"; }

.fa-cloud-upload::before {
  content: "\f0ee"; }

.fa-cloud-upload-alt::before {
  content: "\f0ee"; }

.fa-palette::before {
  content: "\f53f"; }

.fa-arrows-turn-right::before {
  content: "\e4c0"; }

.fa-vest::before {
  content: "\e085"; }

.fa-ferry::before {
  content: "\e4ea"; }

.fa-arrows-down-to-people::before {
  content: "\e4b9"; }

.fa-seedling::before {
  content: "\f4d8"; }

.fa-sprout::before {
  content: "\f4d8"; }

.fa-left-right::before {
  content: "\f337"; }

.fa-arrows-alt-h::before {
  content: "\f337"; }

.fa-boxes-packing::before {
  content: "\e4c7"; }

.fa-circle-arrow-left::before {
  content: "\f0a8"; }

.fa-arrow-circle-left::before {
  content: "\f0a8"; }

.fa-group-arrows-rotate::before {
  content: "\e4f6"; }

.fa-bowl-food::before {
  content: "\e4c6"; }

.fa-candy-cane::before {
  content: "\f786"; }

.fa-arrow-down-wide-short::before {
  content: "\f160"; }

.fa-sort-amount-asc::before {
  content: "\f160"; }

.fa-sort-amount-down::before {
  content: "\f160"; }

.fa-cloud-bolt::before {
  content: "\f76c"; }

.fa-thunderstorm::before {
  content: "\f76c"; }

.fa-text-slash::before {
  content: "\f87d"; }

.fa-remove-format::before {
  content: "\f87d"; }

.fa-face-smile-wink::before {
  content: "\f4da"; }

.fa-smile-wink::before {
  content: "\f4da"; }

.fa-file-word::before {
  content: "\f1c2"; }

.fa-file-powerpoint::before {
  content: "\f1c4"; }

.fa-arrows-left-right::before {
  content: "\f07e"; }

.fa-arrows-h::before {
  content: "\f07e"; }

.fa-house-lock::before {
  content: "\e510"; }

.fa-cloud-arrow-down::before {
  content: "\f0ed"; }

.fa-cloud-download::before {
  content: "\f0ed"; }

.fa-cloud-download-alt::before {
  content: "\f0ed"; }

.fa-children::before {
  content: "\e4e1"; }

.fa-chalkboard::before {
  content: "\f51b"; }

.fa-blackboard::before {
  content: "\f51b"; }

.fa-user-large-slash::before {
  content: "\f4fa"; }

.fa-user-alt-slash::before {
  content: "\f4fa"; }

.fa-envelope-open::before {
  content: "\f2b6"; }

.fa-handshake-simple-slash::before {
  content: "\e05f"; }

.fa-handshake-alt-slash::before {
  content: "\e05f"; }

.fa-mattress-pillow::before {
  content: "\e525"; }

.fa-guarani-sign::before {
  content: "\e19a"; }

.fa-arrows-rotate::before {
  content: "\f021"; }

.fa-refresh::before {
  content: "\f021"; }

.fa-sync::before {
  content: "\f021"; }

.fa-fire-extinguisher::before {
  content: "\f134"; }

.fa-cruzeiro-sign::before {
  content: "\e152"; }

.fa-greater-than-equal::before {
  content: "\f532"; }

.fa-shield-halved::before {
  content: "\f3ed"; }

.fa-shield-alt::before {
  content: "\f3ed"; }

.fa-book-atlas::before {
  content: "\f558"; }

.fa-atlas::before {
  content: "\f558"; }

.fa-virus::before {
  content: "\e074"; }

.fa-envelope-circle-check::before {
  content: "\e4e8"; }

.fa-layer-group::before {
  content: "\f5fd"; }

.fa-arrows-to-dot::before {
  content: "\e4be"; }

.fa-archway::before {
  content: "\f557"; }

.fa-heart-circle-check::before {
  content: "\e4fd"; }

.fa-house-chimney-crack::before {
  content: "\f6f1"; }

.fa-house-damage::before {
  content: "\f6f1"; }

.fa-file-zipper::before {
  content: "\f1c6"; }

.fa-file-archive::before {
  content: "\f1c6"; }

.fa-square::before {
  content: "\f0c8"; }

.fa-martini-glass-empty::before {
  content: "\f000"; }

.fa-glass-martini::before {
  content: "\f000"; }

.fa-couch::before {
  content: "\f4b8"; }

.fa-cedi-sign::before {
  content: "\e0df"; }

.fa-italic::before {
  content: "\f033"; }

.fa-table-cells-column-lock::before {
  content: "\e678"; }

.fa-church::before {
  content: "\f51d"; }

.fa-comments-dollar::before {
  content: "\f653"; }

.fa-democrat::before {
  content: "\f747"; }

.fa-z::before {
  content: "\5a"; }

.fa-person-skiing::before {
  content: "\f7c9"; }

.fa-skiing::before {
  content: "\f7c9"; }

.fa-road-lock::before {
  content: "\e567"; }

.fa-a::before {
  content: "\41"; }

.fa-temperature-arrow-down::before {
  content: "\e03f"; }

.fa-temperature-down::before {
  content: "\e03f"; }

.fa-feather-pointed::before {
  content: "\f56b"; }

.fa-feather-alt::before {
  content: "\f56b"; }

.fa-p::before {
  content: "\50"; }

.fa-snowflake::before {
  content: "\f2dc"; }

.fa-newspaper::before {
  content: "\f1ea"; }

.fa-rectangle-ad::before {
  content: "\f641"; }

.fa-ad::before {
  content: "\f641"; }

.fa-circle-arrow-right::before {
  content: "\f0a9"; }

.fa-arrow-circle-right::before {
  content: "\f0a9"; }

.fa-filter-circle-xmark::before {
  content: "\e17b"; }

.fa-locust::before {
  content: "\e520"; }

.fa-sort::before {
  content: "\f0dc"; }

.fa-unsorted::before {
  content: "\f0dc"; }

.fa-list-ol::before {
  content: "\f0cb"; }

.fa-list-1-2::before {
  content: "\f0cb"; }

.fa-list-numeric::before {
  content: "\f0cb"; }

.fa-person-dress-burst::before {
  content: "\e544"; }

.fa-money-check-dollar::before {
  content: "\f53d"; }

.fa-money-check-alt::before {
  content: "\f53d"; }

.fa-vector-square::before {
  content: "\f5cb"; }

.fa-bread-slice::before {
  content: "\f7ec"; }

.fa-language::before {
  content: "\f1ab"; }

.fa-face-kiss-wink-heart::before {
  content: "\f598"; }

.fa-kiss-wink-heart::before {
  content: "\f598"; }

.fa-filter::before {
  content: "\f0b0"; }

.fa-question::before {
  content: "\3f"; }

.fa-file-signature::before {
  content: "\f573"; }

.fa-up-down-left-right::before {
  content: "\f0b2"; }

.fa-arrows-alt::before {
  content: "\f0b2"; }

.fa-house-chimney-user::before {
  content: "\e065"; }

.fa-hand-holding-heart::before {
  content: "\f4be"; }

.fa-puzzle-piece::before {
  content: "\f12e"; }

.fa-money-check::before {
  content: "\f53c"; }

.fa-star-half-stroke::before {
  content: "\f5c0"; }

.fa-star-half-alt::before {
  content: "\f5c0"; }

.fa-code::before {
  content: "\f121"; }

.fa-whiskey-glass::before {
  content: "\f7a0"; }

.fa-glass-whiskey::before {
  content: "\f7a0"; }

.fa-building-circle-exclamation::before {
  content: "\e4d3"; }

.fa-magnifying-glass-chart::before {
  content: "\e522"; }

.fa-arrow-up-right-from-square::before {
  content: "\f08e"; }

.fa-external-link::before {
  content: "\f08e"; }

.fa-cubes-stacked::before {
  content: "\e4e6"; }

.fa-won-sign::before {
  content: "\f159"; }

.fa-krw::before {
  content: "\f159"; }

.fa-won::before {
  content: "\f159"; }

.fa-virus-covid::before {
  content: "\e4a8"; }

.fa-austral-sign::before {
  content: "\e0a9"; }

.fa-f::before {
  content: "\46"; }

.fa-leaf::before {
  content: "\f06c"; }

.fa-road::before {
  content: "\f018"; }

.fa-taxi::before {
  content: "\f1ba"; }

.fa-cab::before {
  content: "\f1ba"; }

.fa-person-circle-plus::before {
  content: "\e541"; }

.fa-chart-pie::before {
  content: "\f200"; }

.fa-pie-chart::before {
  content: "\f200"; }

.fa-bolt-lightning::before {
  content: "\e0b7"; }

.fa-sack-xmark::before {
  content: "\e56a"; }

.fa-file-excel::before {
  content: "\f1c3"; }

.fa-file-contract::before {
  content: "\f56c"; }

.fa-fish-fins::before {
  content: "\e4f2"; }

.fa-building-flag::before {
  content: "\e4d5"; }

.fa-face-grin-beam::before {
  content: "\f582"; }

.fa-grin-beam::before {
  content: "\f582"; }

.fa-object-ungroup::before {
  content: "\f248"; }

.fa-poop::before {
  content: "\f619"; }

.fa-location-pin::before {
  content: "\f041"; }

.fa-map-marker::before {
  content: "\f041"; }

.fa-kaaba::before {
  content: "\f66b"; }

.fa-toilet-paper::before {
  content: "\f71e"; }

.fa-helmet-safety::before {
  content: "\f807"; }

.fa-hard-hat::before {
  content: "\f807"; }

.fa-hat-hard::before {
  content: "\f807"; }

.fa-eject::before {
  content: "\f052"; }

.fa-circle-right::before {
  content: "\f35a"; }

.fa-arrow-alt-circle-right::before {
  content: "\f35a"; }

.fa-plane-circle-check::before {
  content: "\e555"; }

.fa-face-rolling-eyes::before {
  content: "\f5a5"; }

.fa-meh-rolling-eyes::before {
  content: "\f5a5"; }

.fa-object-group::before {
  content: "\f247"; }

.fa-chart-line::before {
  content: "\f201"; }

.fa-line-chart::before {
  content: "\f201"; }

.fa-mask-ventilator::before {
  content: "\e524"; }

.fa-arrow-right::before {
  content: "\f061"; }

.fa-signs-post::before {
  content: "\f277"; }

.fa-map-signs::before {
  content: "\f277"; }

.fa-cash-register::before {
  content: "\f788"; }

.fa-person-circle-question::before {
  content: "\e542"; }

.fa-h::before {
  content: "\48"; }

.fa-tarp::before {
  content: "\e57b"; }

.fa-screwdriver-wrench::before {
  content: "\f7d9"; }

.fa-tools::before {
  content: "\f7d9"; }

.fa-arrows-to-eye::before {
  content: "\e4bf"; }

.fa-plug-circle-bolt::before {
  content: "\e55b"; }

.fa-heart::before {
  content: "\f004"; }

.fa-mars-and-venus::before {
  content: "\f224"; }

.fa-house-user::before {
  content: "\e1b0"; }

.fa-home-user::before {
  content: "\e1b0"; }

.fa-dumpster-fire::before {
  content: "\f794"; }

.fa-house-crack::before {
  content: "\e3b1"; }

.fa-martini-glass-citrus::before {
  content: "\f561"; }

.fa-cocktail::before {
  content: "\f561"; }

.fa-face-surprise::before {
  content: "\f5c2"; }

.fa-surprise::before {
  content: "\f5c2"; }

.fa-bottle-water::before {
  content: "\e4c5"; }

.fa-circle-pause::before {
  content: "\f28b"; }

.fa-pause-circle::before {
  content: "\f28b"; }

.fa-toilet-paper-slash::before {
  content: "\e072"; }

.fa-apple-whole::before {
  content: "\f5d1"; }

.fa-apple-alt::before {
  content: "\f5d1"; }

.fa-kitchen-set::before {
  content: "\e51a"; }

.fa-r::before {
  content: "\52"; }

.fa-temperature-quarter::before {
  content: "\f2ca"; }

.fa-temperature-1::before {
  content: "\f2ca"; }

.fa-thermometer-1::before {
  content: "\f2ca"; }

.fa-thermometer-quarter::before {
  content: "\f2ca"; }

.fa-cube::before {
  content: "\f1b2"; }

.fa-bitcoin-sign::before {
  content: "\e0b4"; }

.fa-shield-dog::before {
  content: "\e573"; }

.fa-solar-panel::before {
  content: "\f5ba"; }

.fa-lock-open::before {
  content: "\f3c1"; }

.fa-elevator::before {
  content: "\e16d"; }

.fa-money-bill-transfer::before {
  content: "\e528"; }

.fa-money-bill-trend-up::before {
  content: "\e529"; }

.fa-house-flood-water-circle-arrow-right::before {
  content: "\e50f"; }

.fa-square-poll-horizontal::before {
  content: "\f682"; }

.fa-poll-h::before {
  content: "\f682"; }

.fa-circle::before {
  content: "\f111"; }

.fa-backward-fast::before {
  content: "\f049"; }

.fa-fast-backward::before {
  content: "\f049"; }

.fa-recycle::before {
  content: "\f1b8"; }

.fa-user-astronaut::before {
  content: "\f4fb"; }

.fa-plane-slash::before {
  content: "\e069"; }

.fa-trademark::before {
  content: "\f25c"; }

.fa-basketball::before {
  content: "\f434"; }

.fa-basketball-ball::before {
  content: "\f434"; }

.fa-satellite-dish::before {
  content: "\f7c0"; }

.fa-circle-up::before {
  content: "\f35b"; }

.fa-arrow-alt-circle-up::before {
  content: "\f35b"; }

.fa-mobile-screen-button::before {
  content: "\f3cd"; }

.fa-mobile-alt::before {
  content: "\f3cd"; }

.fa-volume-high::before {
  content: "\f028"; }

.fa-volume-up::before {
  content: "\f028"; }

.fa-users-rays::before {
  content: "\e593"; }

.fa-wallet::before {
  content: "\f555"; }

.fa-clipboard-check::before {
  content: "\f46c"; }

.fa-file-audio::before {
  content: "\f1c7"; }

.fa-burger::before {
  content: "\f805"; }

.fa-hamburger::before {
  content: "\f805"; }

.fa-wrench::before {
  content: "\f0ad"; }

.fa-bugs::before {
  content: "\e4d0"; }

.fa-rupee-sign::before {
  content: "\f156"; }

.fa-rupee::before {
  content: "\f156"; }

.fa-file-image::before {
  content: "\f1c5"; }

.fa-circle-question::before {
  content: "\f059"; }

.fa-question-circle::before {
  content: "\f059"; }

.fa-plane-departure::before {
  content: "\f5b0"; }

.fa-handshake-slash::before {
  content: "\e060"; }

.fa-book-bookmark::before {
  content: "\e0bb"; }

.fa-code-branch::before {
  content: "\f126"; }

.fa-hat-cowboy::before {
  content: "\f8c0"; }

.fa-bridge::before {
  content: "\e4c8"; }

.fa-phone-flip::before {
  content: "\f879"; }

.fa-phone-alt::before {
  content: "\f879"; }

.fa-truck-front::before {
  content: "\e2b7"; }

.fa-cat::before {
  content: "\f6be"; }

.fa-anchor-circle-exclamation::before {
  content: "\e4ab"; }

.fa-truck-field::before {
  content: "\e58d"; }

.fa-route::before {
  content: "\f4d7"; }

.fa-clipboard-question::before {
  content: "\e4e3"; }

.fa-panorama::before {
  content: "\e209"; }

.fa-comment-medical::before {
  content: "\f7f5"; }

.fa-teeth-open::before {
  content: "\f62f"; }

.fa-file-circle-minus::before {
  content: "\e4ed"; }

.fa-tags::before {
  content: "\f02c"; }

.fa-wine-glass::before {
  content: "\f4e3"; }

.fa-forward-fast::before {
  content: "\f050"; }

.fa-fast-forward::before {
  content: "\f050"; }

.fa-face-meh-blank::before {
  content: "\f5a4"; }

.fa-meh-blank::before {
  content: "\f5a4"; }

.fa-square-parking::before {
  content: "\f540"; }

.fa-parking::before {
  content: "\f540"; }

.fa-house-signal::before {
  content: "\e012"; }

.fa-bars-progress::before {
  content: "\f828"; }

.fa-tasks-alt::before {
  content: "\f828"; }

.fa-faucet-drip::before {
  content: "\e006"; }

.fa-cart-flatbed::before {
  content: "\f474"; }

.fa-dolly-flatbed::before {
  content: "\f474"; }

.fa-ban-smoking::before {
  content: "\f54d"; }

.fa-smoking-ban::before {
  content: "\f54d"; }

.fa-terminal::before {
  content: "\f120"; }

.fa-mobile-button::before {
  content: "\f10b"; }

.fa-house-medical-flag::before {
  content: "\e514"; }

.fa-basket-shopping::before {
  content: "\f291"; }

.fa-shopping-basket::before {
  content: "\f291"; }

.fa-tape::before {
  content: "\f4db"; }

.fa-bus-simple::before {
  content: "\f55e"; }

.fa-bus-alt::before {
  content: "\f55e"; }

.fa-eye::before {
  content: "\f06e"; }

.fa-face-sad-cry::before {
  content: "\f5b3"; }

.fa-sad-cry::before {
  content: "\f5b3"; }

.fa-audio-description::before {
  content: "\f29e"; }

.fa-person-military-to-person::before {
  content: "\e54c"; }

.fa-file-shield::before {
  content: "\e4f0"; }

.fa-user-slash::before {
  content: "\f506"; }

.fa-pen::before {
  content: "\f304"; }

.fa-tower-observation::before {
  content: "\e586"; }

.fa-file-code::before {
  content: "\f1c9"; }

.fa-signal::before {
  content: "\f012"; }

.fa-signal-5::before {
  content: "\f012"; }

.fa-signal-perfect::before {
  content: "\f012"; }

.fa-bus::before {
  content: "\f207"; }

.fa-heart-circle-xmark::before {
  content: "\e501"; }

.fa-house-chimney::before {
  content: "\e3af"; }

.fa-home-lg::before {
  content: "\e3af"; }

.fa-window-maximize::before {
  content: "\f2d0"; }

.fa-face-frown::before {
  content: "\f119"; }

.fa-frown::before {
  content: "\f119"; }

.fa-prescription::before {
  content: "\f5b1"; }

.fa-shop::before {
  content: "\f54f"; }

.fa-store-alt::before {
  content: "\f54f"; }

.fa-floppy-disk::before {
  content: "\f0c7"; }

.fa-save::before {
  content: "\f0c7"; }

.fa-vihara::before {
  content: "\f6a7"; }

.fa-scale-unbalanced::before {
  content: "\f515"; }

.fa-balance-scale-left::before {
  content: "\f515"; }

.fa-sort-up::before {
  content: "\f0de"; }

.fa-sort-asc::before {
  content: "\f0de"; }

.fa-comment-dots::before {
  content: "\f4ad"; }

.fa-commenting::before {
  content: "\f4ad"; }

.fa-plant-wilt::before {
  content: "\e5aa"; }

.fa-diamond::before {
  content: "\f219"; }

.fa-face-grin-squint::before {
  content: "\f585"; }

.fa-grin-squint::before {
  content: "\f585"; }

.fa-hand-holding-dollar::before {
  content: "\f4c0"; }

.fa-hand-holding-usd::before {
  content: "\f4c0"; }

.fa-bacterium::before {
  content: "\e05a"; }

.fa-hand-pointer::before {
  content: "\f25a"; }

.fa-drum-steelpan::before {
  content: "\f56a"; }

.fa-hand-scissors::before {
  content: "\f257"; }

.fa-hands-praying::before {
  content: "\f684"; }

.fa-praying-hands::before {
  content: "\f684"; }

.fa-arrow-rotate-right::before {
  content: "\f01e"; }

.fa-arrow-right-rotate::before {
  content: "\f01e"; }

.fa-arrow-rotate-forward::before {
  content: "\f01e"; }

.fa-redo::before {
  content: "\f01e"; }

.fa-biohazard::before {
  content: "\f780"; }

.fa-location-crosshairs::before {
  content: "\f601"; }

.fa-location::before {
  content: "\f601"; }

.fa-mars-double::before {
  content: "\f227"; }

.fa-child-dress::before {
  content: "\e59c"; }

.fa-users-between-lines::before {
  content: "\e591"; }

.fa-lungs-virus::before {
  content: "\e067"; }

.fa-face-grin-tears::before {
  content: "\f588"; }

.fa-grin-tears::before {
  content: "\f588"; }

.fa-phone::before {
  content: "\f095"; }

.fa-calendar-xmark::before {
  content: "\f273"; }

.fa-calendar-times::before {
  content: "\f273"; }

.fa-child-reaching::before {
  content: "\e59d"; }

.fa-head-side-virus::before {
  content: "\e064"; }

.fa-user-gear::before {
  content: "\f4fe"; }

.fa-user-cog::before {
  content: "\f4fe"; }

.fa-arrow-up-1-9::before {
  content: "\f163"; }

.fa-sort-numeric-up::before {
  content: "\f163"; }

.fa-door-closed::before {
  content: "\f52a"; }

.fa-shield-virus::before {
  content: "\e06c"; }

.fa-dice-six::before {
  content: "\f526"; }

.fa-mosquito-net::before {
  content: "\e52c"; }

.fa-bridge-water::before {
  content: "\e4ce"; }

.fa-person-booth::before {
  content: "\f756"; }

.fa-text-width::before {
  content: "\f035"; }

.fa-hat-wizard::before {
  content: "\f6e8"; }

.fa-pen-fancy::before {
  content: "\f5ac"; }

.fa-person-digging::before {
  content: "\f85e"; }

.fa-digging::before {
  content: "\f85e"; }

.fa-trash::before {
  content: "\f1f8"; }

.fa-gauge-simple::before {
  content: "\f629"; }

.fa-gauge-simple-med::before {
  content: "\f629"; }

.fa-tachometer-average::before {
  content: "\f629"; }

.fa-book-medical::before {
  content: "\f7e6"; }

.fa-poo::before {
  content: "\f2fe"; }

.fa-quote-right::before {
  content: "\f10e"; }

.fa-quote-right-alt::before {
  content: "\f10e"; }

.fa-shirt::before {
  content: "\f553"; }

.fa-t-shirt::before {
  content: "\f553"; }

.fa-tshirt::before {
  content: "\f553"; }

.fa-cubes::before {
  content: "\f1b3"; }

.fa-divide::before {
  content: "\f529"; }

.fa-tenge-sign::before {
  content: "\f7d7"; }

.fa-tenge::before {
  content: "\f7d7"; }

.fa-headphones::before {
  content: "\f025"; }

.fa-hands-holding::before {
  content: "\f4c2"; }

.fa-hands-clapping::before {
  content: "\e1a8"; }

.fa-republican::before {
  content: "\f75e"; }

.fa-arrow-left::before {
  content: "\f060"; }

.fa-person-circle-xmark::before {
  content: "\e543"; }

.fa-ruler::before {
  content: "\f545"; }

.fa-align-left::before {
  content: "\f036"; }

.fa-dice-d6::before {
  content: "\f6d1"; }

.fa-restroom::before {
  content: "\f7bd"; }

.fa-j::before {
  content: "\4a"; }

.fa-users-viewfinder::before {
  content: "\e595"; }

.fa-file-video::before {
  content: "\f1c8"; }

.fa-up-right-from-square::before {
  content: "\f35d"; }

.fa-external-link-alt::before {
  content: "\f35d"; }

.fa-table-cells::before {
  content: "\f00a"; }

.fa-th::before {
  content: "\f00a"; }

.fa-file-pdf::before {
  content: "\f1c1"; }

.fa-book-bible::before {
  content: "\f647"; }

.fa-bible::before {
  content: "\f647"; }

.fa-o::before {
  content: "\4f"; }

.fa-suitcase-medical::before {
  content: "\f0fa"; }

.fa-medkit::before {
  content: "\f0fa"; }

.fa-user-secret::before {
  content: "\f21b"; }

.fa-otter::before {
  content: "\f700"; }

.fa-person-dress::before {
  content: "\f182"; }

.fa-female::before {
  content: "\f182"; }

.fa-comment-dollar::before {
  content: "\f651"; }

.fa-business-time::before {
  content: "\f64a"; }

.fa-briefcase-clock::before {
  content: "\f64a"; }

.fa-table-cells-large::before {
  content: "\f009"; }

.fa-th-large::before {
  content: "\f009"; }

.fa-book-tanakh::before {
  content: "\f827"; }

.fa-tanakh::before {
  content: "\f827"; }

.fa-phone-volume::before {
  content: "\f2a0"; }

.fa-volume-control-phone::before {
  content: "\f2a0"; }

.fa-hat-cowboy-side::before {
  content: "\f8c1"; }

.fa-clipboard-user::before {
  content: "\f7f3"; }

.fa-child::before {
  content: "\f1ae"; }

.fa-lira-sign::before {
  content: "\f195"; }

.fa-satellite::before {
  content: "\f7bf"; }

.fa-plane-lock::before {
  content: "\e558"; }

.fa-tag::before {
  content: "\f02b"; }

.fa-comment::before {
  content: "\f075"; }

.fa-cake-candles::before {
  content: "\f1fd"; }

.fa-birthday-cake::before {
  content: "\f1fd"; }

.fa-cake::before {
  content: "\f1fd"; }

.fa-envelope::before {
  content: "\f0e0"; }

.fa-angles-up::before {
  content: "\f102"; }

.fa-angle-double-up::before {
  content: "\f102"; }

.fa-paperclip::before {
  content: "\f0c6"; }

.fa-arrow-right-to-city::before {
  content: "\e4b3"; }

.fa-ribbon::before {
  content: "\f4d6"; }

.fa-lungs::before {
  content: "\f604"; }

.fa-arrow-up-9-1::before {
  content: "\f887"; }

.fa-sort-numeric-up-alt::before {
  content: "\f887"; }

.fa-litecoin-sign::before {
  content: "\e1d3"; }

.fa-border-none::before {
  content: "\f850"; }

.fa-circle-nodes::before {
  content: "\e4e2"; }

.fa-parachute-box::before {
  content: "\f4cd"; }

.fa-indent::before {
  content: "\f03c"; }

.fa-truck-field-un::before {
  content: "\e58e"; }

.fa-hourglass::before {
  content: "\f254"; }

.fa-hourglass-empty::before {
  content: "\f254"; }

.fa-mountain::before {
  content: "\f6fc"; }

.fa-user-doctor::before {
  content: "\f0f0"; }

.fa-user-md::before {
  content: "\f0f0"; }

.fa-circle-info::before {
  content: "\f05a"; }

.fa-info-circle::before {
  content: "\f05a"; }

.fa-cloud-meatball::before {
  content: "\f73b"; }

.fa-camera::before {
  content: "\f030"; }

.fa-camera-alt::before {
  content: "\f030"; }

.fa-square-virus::before {
  content: "\e578"; }

.fa-meteor::before {
  content: "\f753"; }

.fa-car-on::before {
  content: "\e4dd"; }

.fa-sleigh::before {
  content: "\f7cc"; }

.fa-arrow-down-1-9::before {
  content: "\f162"; }

.fa-sort-numeric-asc::before {
  content: "\f162"; }

.fa-sort-numeric-down::before {
  content: "\f162"; }

.fa-hand-holding-droplet::before {
  content: "\f4c1"; }

.fa-hand-holding-water::before {
  content: "\f4c1"; }

.fa-water::before {
  content: "\f773"; }

.fa-calendar-check::before {
  content: "\f274"; }

.fa-braille::before {
  content: "\f2a1"; }

.fa-prescription-bottle-medical::before {
  content: "\f486"; }

.fa-prescription-bottle-alt::before {
  content: "\f486"; }

.fa-landmark::before {
  content: "\f66f"; }

.fa-truck::before {
  content: "\f0d1"; }

.fa-crosshairs::before {
  content: "\f05b"; }

.fa-person-cane::before {
  content: "\e53c"; }

.fa-tent::before {
  content: "\e57d"; }

.fa-vest-patches::before {
  content: "\e086"; }

.fa-check-double::before {
  content: "\f560"; }

.fa-arrow-down-a-z::before {
  content: "\f15d"; }

.fa-sort-alpha-asc::before {
  content: "\f15d"; }

.fa-sort-alpha-down::before {
  content: "\f15d"; }

.fa-money-bill-wheat::before {
  content: "\e52a"; }

.fa-cookie::before {
  content: "\f563"; }

.fa-arrow-rotate-left::before {
  content: "\f0e2"; }

.fa-arrow-left-rotate::before {
  content: "\f0e2"; }

.fa-arrow-rotate-back::before {
  content: "\f0e2"; }

.fa-arrow-rotate-backward::before {
  content: "\f0e2"; }

.fa-undo::before {
  content: "\f0e2"; }

.fa-hard-drive::before {
  content: "\f0a0"; }

.fa-hdd::before {
  content: "\f0a0"; }

.fa-face-grin-squint-tears::before {
  content: "\f586"; }

.fa-grin-squint-tears::before {
  content: "\f586"; }

.fa-dumbbell::before {
  content: "\f44b"; }

.fa-rectangle-list::before {
  content: "\f022"; }

.fa-list-alt::before {
  content: "\f022"; }

.fa-tarp-droplet::before {
  content: "\e57c"; }

.fa-house-medical-circle-check::before {
  content: "\e511"; }

.fa-person-skiing-nordic::before {
  content: "\f7ca"; }

.fa-skiing-nordic::before {
  content: "\f7ca"; }

.fa-calendar-plus::before {
  content: "\f271"; }

.fa-plane-arrival::before {
  content: "\f5af"; }

.fa-circle-left::before {
  content: "\f359"; }

.fa-arrow-alt-circle-left::before {
  content: "\f359"; }

.fa-train-subway::before {
  content: "\f239"; }

.fa-subway::before {
  content: "\f239"; }

.fa-chart-gantt::before {
  content: "\e0e4"; }

.fa-indian-rupee-sign::before {
  content: "\e1bc"; }

.fa-indian-rupee::before {
  content: "\e1bc"; }

.fa-inr::before {
  content: "\e1bc"; }

.fa-crop-simple::before {
  content: "\f565"; }

.fa-crop-alt::before {
  content: "\f565"; }

.fa-money-bill-1::before {
  content: "\f3d1"; }

.fa-money-bill-alt::before {
  content: "\f3d1"; }

.fa-left-long::before {
  content: "\f30a"; }

.fa-long-arrow-alt-left::before {
  content: "\f30a"; }

.fa-dna::before {
  content: "\f471"; }

.fa-virus-slash::before {
  content: "\e075"; }

.fa-minus::before {
  content: "\f068"; }

.fa-subtract::before {
  content: "\f068"; }

.fa-chess::before {
  content: "\f439"; }

.fa-arrow-left-long::before {
  content: "\f177"; }

.fa-long-arrow-left::before {
  content: "\f177"; }

.fa-plug-circle-check::before {
  content: "\e55c"; }

.fa-street-view::before {
  content: "\f21d"; }

.fa-franc-sign::before {
  content: "\e18f"; }

.fa-volume-off::before {
  content: "\f026"; }

.fa-hands-asl-interpreting::before {
  content: "\f2a3"; }

.fa-american-sign-language-interpreting::before {
  content: "\f2a3"; }

.fa-asl-interpreting::before {
  content: "\f2a3"; }

.fa-hands-american-sign-language-interpreting::before {
  content: "\f2a3"; }

.fa-gear::before {
  content: "\f013"; }

.fa-cog::before {
  content: "\f013"; }

.fa-droplet-slash::before {
  content: "\f5c7"; }

.fa-tint-slash::before {
  content: "\f5c7"; }

.fa-mosque::before {
  content: "\f678"; }

.fa-mosquito::before {
  content: "\e52b"; }

.fa-star-of-david::before {
  content: "\f69a"; }

.fa-person-military-rifle::before {
  content: "\e54b"; }

.fa-cart-shopping::before {
  content: "\f07a"; }

.fa-shopping-cart::before {
  content: "\f07a"; }

.fa-vials::before {
  content: "\f493"; }

.fa-plug-circle-plus::before {
  content: "\e55f"; }

.fa-place-of-worship::before {
  content: "\f67f"; }

.fa-grip-vertical::before {
  content: "\f58e"; }

.fa-arrow-turn-up::before {
  content: "\f148"; }

.fa-level-up::before {
  content: "\f148"; }

.fa-u::before {
  content: "\55"; }

.fa-square-root-variable::before {
  content: "\f698"; }

.fa-square-root-alt::before {
  content: "\f698"; }

.fa-clock::before {
  content: "\f017"; }

.fa-clock-four::before {
  content: "\f017"; }

.fa-backward-step::before {
  content: "\f048"; }

.fa-step-backward::before {
  content: "\f048"; }

.fa-pallet::before {
  content: "\f482"; }

.fa-faucet::before {
  content: "\e005"; }

.fa-baseball-bat-ball::before {
  content: "\f432"; }

.fa-s::before {
  content: "\53"; }

.fa-timeline::before {
  content: "\e29c"; }

.fa-keyboard::before {
  content: "\f11c"; }

.fa-caret-down::before {
  content: "\f0d7"; }

.fa-house-chimney-medical::before {
  content: "\f7f2"; }

.fa-clinic-medical::before {
  content: "\f7f2"; }

.fa-temperature-three-quarters::before {
  content: "\f2c8"; }

.fa-temperature-3::before {
  content: "\f2c8"; }

.fa-thermometer-3::before {
  content: "\f2c8"; }

.fa-thermometer-three-quarters::before {
  content: "\f2c8"; }

.fa-mobile-screen::before {
  content: "\f3cf"; }

.fa-mobile-android-alt::before {
  content: "\f3cf"; }

.fa-plane-up::before {
  content: "\e22d"; }

.fa-piggy-bank::before {
  content: "\f4d3"; }

.fa-battery-half::before {
  content: "\f242"; }

.fa-battery-3::before {
  content: "\f242"; }

.fa-mountain-city::before {
  content: "\e52e"; }

.fa-coins::before {
  content: "\f51e"; }

.fa-khanda::before {
  content: "\f66d"; }

.fa-sliders::before {
  content: "\f1de"; }

.fa-sliders-h::before {
  content: "\f1de"; }

.fa-folder-tree::before {
  content: "\f802"; }

.fa-network-wired::before {
  content: "\f6ff"; }

.fa-map-pin::before {
  content: "\f276"; }

.fa-hamsa::before {
  content: "\f665"; }

.fa-cent-sign::before {
  content: "\e3f5"; }

.fa-flask::before {
  content: "\f0c3"; }

.fa-person-pregnant::before {
  content: "\e31e"; }

.fa-wand-sparkles::before {
  content: "\f72b"; }

.fa-ellipsis-vertical::before {
  content: "\f142"; }

.fa-ellipsis-v::before {
  content: "\f142"; }

.fa-ticket::before {
  content: "\f145"; }

.fa-power-off::before {
  content: "\f011"; }

.fa-right-long::before {
  content: "\f30b"; }

.fa-long-arrow-alt-right::before {
  content: "\f30b"; }

.fa-flag-usa::before {
  content: "\f74d"; }

.fa-laptop-file::before {
  content: "\e51d"; }

.fa-tty::before {
  content: "\f1e4"; }

.fa-teletype::before {
  content: "\f1e4"; }

.fa-diagram-next::before {
  content: "\e476"; }

.fa-person-rifle::before {
  content: "\e54e"; }

.fa-house-medical-circle-exclamation::before {
  content: "\e512"; }

.fa-closed-captioning::before {
  content: "\f20a"; }

.fa-person-hiking::before {
  content: "\f6ec"; }

.fa-hiking::before {
  content: "\f6ec"; }

.fa-venus-double::before {
  content: "\f226"; }

.fa-images::before {
  content: "\f302"; }

.fa-calculator::before {
  content: "\f1ec"; }

.fa-people-pulling::before {
  content: "\e535"; }

.fa-n::before {
  content: "\4e"; }

.fa-cable-car::before {
  content: "\f7da"; }

.fa-tram::before {
  content: "\f7da"; }

.fa-cloud-rain::before {
  content: "\f73d"; }

.fa-building-circle-xmark::before {
  content: "\e4d4"; }

.fa-ship::before {
  content: "\f21a"; }

.fa-arrows-down-to-line::before {
  content: "\e4b8"; }

.fa-download::before {
  content: "\f019"; }

.fa-face-grin::before {
  content: "\f580"; }

.fa-grin::before {
  content: "\f580"; }

.fa-delete-left::before {
  content: "\f55a"; }

.fa-backspace::before {
  content: "\f55a"; }

.fa-eye-dropper::before {
  content: "\f1fb"; }

.fa-eye-dropper-empty::before {
  content: "\f1fb"; }

.fa-eyedropper::before {
  content: "\f1fb"; }

.fa-file-circle-check::before {
  content: "\e5a0"; }

.fa-forward::before {
  content: "\f04e"; }

.fa-mobile::before {
  content: "\f3ce"; }

.fa-mobile-android::before {
  content: "\f3ce"; }

.fa-mobile-phone::before {
  content: "\f3ce"; }

.fa-face-meh::before {
  content: "\f11a"; }

.fa-meh::before {
  content: "\f11a"; }

.fa-align-center::before {
  content: "\f037"; }

.fa-book-skull::before {
  content: "\f6b7"; }

.fa-book-dead::before {
  content: "\f6b7"; }

.fa-id-card::before {
  content: "\f2c2"; }

.fa-drivers-license::before {
  content: "\f2c2"; }

.fa-outdent::before {
  content: "\f03b"; }

.fa-dedent::before {
  content: "\f03b"; }

.fa-heart-circle-exclamation::before {
  content: "\e4fe"; }

.fa-house::before {
  content: "\f015"; }

.fa-home::before {
  content: "\f015"; }

.fa-home-alt::before {
  content: "\f015"; }

.fa-home-lg-alt::before {
  content: "\f015"; }

.fa-calendar-week::before {
  content: "\f784"; }

.fa-laptop-medical::before {
  content: "\f812"; }

.fa-b::before {
  content: "\42"; }

.fa-file-medical::before {
  content: "\f477"; }

.fa-dice-one::before {
  content: "\f525"; }

.fa-kiwi-bird::before {
  content: "\f535"; }

.fa-arrow-right-arrow-left::before {
  content: "\f0ec"; }

.fa-exchange::before {
  content: "\f0ec"; }

.fa-rotate-right::before {
  content: "\f2f9"; }

.fa-redo-alt::before {
  content: "\f2f9"; }

.fa-rotate-forward::before {
  content: "\f2f9"; }

.fa-utensils::before {
  content: "\f2e7"; }

.fa-cutlery::before {
  content: "\f2e7"; }

.fa-arrow-up-wide-short::before {
  content: "\f161"; }

.fa-sort-amount-up::before {
  content: "\f161"; }

.fa-mill-sign::before {
  content: "\e1ed"; }

.fa-bowl-rice::before {
  content: "\e2eb"; }

.fa-skull::before {
  content: "\f54c"; }

.fa-tower-broadcast::before {
  content: "\f519"; }

.fa-broadcast-tower::before {
  content: "\f519"; }

.fa-truck-pickup::before {
  content: "\f63c"; }

.fa-up-long::before {
  content: "\f30c"; }

.fa-long-arrow-alt-up::before {
  content: "\f30c"; }

.fa-stop::before {
  content: "\f04d"; }

.fa-code-merge::before {
  content: "\f387"; }

.fa-upload::before {
  content: "\f093"; }

.fa-hurricane::before {
  content: "\f751"; }

.fa-mound::before {
  content: "\e52d"; }

.fa-toilet-portable::before {
  content: "\e583"; }

.fa-compact-disc::before {
  content: "\f51f"; }

.fa-file-arrow-down::before {
  content: "\f56d"; }

.fa-file-download::before {
  content: "\f56d"; }

.fa-caravan::before {
  content: "\f8ff"; }

.fa-shield-cat::before {
  content: "\e572"; }

.fa-bolt::before {
  content: "\f0e7"; }

.fa-zap::before {
  content: "\f0e7"; }

.fa-glass-water::before {
  content: "\e4f4"; }

.fa-oil-well::before {
  content: "\e532"; }

.fa-vault::before {
  content: "\e2c5"; }

.fa-mars::before {
  content: "\f222"; }

.fa-toilet::before {
  content: "\f7d8"; }

.fa-plane-circle-xmark::before {
  content: "\e557"; }

.fa-yen-sign::before {
  content: "\f157"; }

.fa-cny::before {
  content: "\f157"; }

.fa-jpy::before {
  content: "\f157"; }

.fa-rmb::before {
  content: "\f157"; }

.fa-yen::before {
  content: "\f157"; }

.fa-ruble-sign::before {
  content: "\f158"; }

.fa-rouble::before {
  content: "\f158"; }

.fa-rub::before {
  content: "\f158"; }

.fa-ruble::before {
  content: "\f158"; }

.fa-sun::before {
  content: "\f185"; }

.fa-guitar::before {
  content: "\f7a6"; }

.fa-face-laugh-wink::before {
  content: "\f59c"; }

.fa-laugh-wink::before {
  content: "\f59c"; }

.fa-horse-head::before {
  content: "\f7ab"; }

.fa-bore-hole::before {
  content: "\e4c3"; }

.fa-industry::before {
  content: "\f275"; }

.fa-circle-down::before {
  content: "\f358"; }

.fa-arrow-alt-circle-down::before {
  content: "\f358"; }

.fa-arrows-turn-to-dots::before {
  content: "\e4c1"; }

.fa-florin-sign::before {
  content: "\e184"; }

.fa-arrow-down-short-wide::before {
  content: "\f884"; }

.fa-sort-amount-desc::before {
  content: "\f884"; }

.fa-sort-amount-down-alt::before {
  content: "\f884"; }

.fa-less-than::before {
  content: "\3c"; }

.fa-angle-down::before {
  content: "\f107"; }

.fa-car-tunnel::before {
  content: "\e4de"; }

.fa-head-side-cough::before {
  content: "\e061"; }

.fa-grip-lines::before {
  content: "\f7a4"; }

.fa-thumbs-down::before {
  content: "\f165"; }

.fa-user-lock::before {
  content: "\f502"; }

.fa-arrow-right-long::before {
  content: "\f178"; }

.fa-long-arrow-right::before {
  content: "\f178"; }

.fa-anchor-circle-xmark::before {
  content: "\e4ac"; }

.fa-ellipsis::before {
  content: "\f141"; }

.fa-ellipsis-h::before {
  content: "\f141"; }

.fa-chess-pawn::before {
  content: "\f443"; }

.fa-kit-medical::before {
  content: "\f479"; }

.fa-first-aid::before {
  content: "\f479"; }

.fa-person-through-window::before {
  content: "\e5a9"; }

.fa-toolbox::before {
  content: "\f552"; }

.fa-hands-holding-circle::before {
  content: "\e4fb"; }

.fa-bug::before {
  content: "\f188"; }

.fa-credit-card::before {
  content: "\f09d"; }

.fa-credit-card-alt::before {
  content: "\f09d"; }

.fa-car::before {
  content: "\f1b9"; }

.fa-automobile::before {
  content: "\f1b9"; }

.fa-hand-holding-hand::before {
  content: "\e4f7"; }

.fa-book-open-reader::before {
  content: "\f5da"; }

.fa-book-reader::before {
  content: "\f5da"; }

.fa-mountain-sun::before {
  content: "\e52f"; }

.fa-arrows-left-right-to-line::before {
  content: "\e4ba"; }

.fa-dice-d20::before {
  content: "\f6cf"; }

.fa-truck-droplet::before {
  content: "\e58c"; }

.fa-file-circle-xmark::before {
  content: "\e5a1"; }

.fa-temperature-arrow-up::before {
  content: "\e040"; }

.fa-temperature-up::before {
  content: "\e040"; }

.fa-medal::before {
  content: "\f5a2"; }

.fa-bed::before {
  content: "\f236"; }

.fa-square-h::before {
  content: "\f0fd"; }

.fa-h-square::before {
  content: "\f0fd"; }

.fa-podcast::before {
  content: "\f2ce"; }

.fa-temperature-full::before {
  content: "\f2c7"; }

.fa-temperature-4::before {
  content: "\f2c7"; }

.fa-thermometer-4::before {
  content: "\f2c7"; }

.fa-thermometer-full::before {
  content: "\f2c7"; }

.fa-bell::before {
  content: "\f0f3"; }

.fa-superscript::before {
  content: "\f12b"; }

.fa-plug-circle-xmark::before {
  content: "\e560"; }

.fa-star-of-life::before {
  content: "\f621"; }

.fa-phone-slash::before {
  content: "\f3dd"; }

.fa-paint-roller::before {
  content: "\f5aa"; }

.fa-handshake-angle::before {
  content: "\f4c4"; }

.fa-hands-helping::before {
  content: "\f4c4"; }

.fa-location-dot::before {
  content: "\f3c5"; }

.fa-map-marker-alt::before {
  content: "\f3c5"; }

.fa-file::before {
  content: "\f15b"; }

.fa-greater-than::before {
  content: "\3e"; }

.fa-person-swimming::before {
  content: "\f5c4"; }

.fa-swimmer::before {
  content: "\f5c4"; }

.fa-arrow-down::before {
  content: "\f063"; }

.fa-droplet::before {
  content: "\f043"; }

.fa-tint::before {
  content: "\f043"; }

.fa-eraser::before {
  content: "\f12d"; }

.fa-earth-americas::before {
  content: "\f57d"; }

.fa-earth::before {
  content: "\f57d"; }

.fa-earth-america::before {
  content: "\f57d"; }

.fa-globe-americas::before {
  content: "\f57d"; }

.fa-person-burst::before {
  content: "\e53b"; }

.fa-dove::before {
  content: "\f4ba"; }

.fa-battery-empty::before {
  content: "\f244"; }

.fa-battery-0::before {
  content: "\f244"; }

.fa-socks::before {
  content: "\f696"; }

.fa-inbox::before {
  content: "\f01c"; }

.fa-section::before {
  content: "\e447"; }

.fa-gauge-high::before {
  content: "\f625"; }

.fa-tachometer-alt::before {
  content: "\f625"; }

.fa-tachometer-alt-fast::before {
  content: "\f625"; }

.fa-envelope-open-text::before {
  content: "\f658"; }

.fa-hospital::before {
  content: "\f0f8"; }

.fa-hospital-alt::before {
  content: "\f0f8"; }

.fa-hospital-wide::before {
  content: "\f0f8"; }

.fa-wine-bottle::before {
  content: "\f72f"; }

.fa-chess-rook::before {
  content: "\f447"; }

.fa-bars-staggered::before {
  content: "\f550"; }

.fa-reorder::before {
  content: "\f550"; }

.fa-stream::before {
  content: "\f550"; }

.fa-dharmachakra::before {
  content: "\f655"; }

.fa-hotdog::before {
  content: "\f80f"; }

.fa-person-walking-with-cane::before {
  content: "\f29d"; }

.fa-blind::before {
  content: "\f29d"; }

.fa-drum::before {
  content: "\f569"; }

.fa-ice-cream::before {
  content: "\f810"; }

.fa-heart-circle-bolt::before {
  content: "\e4fc"; }

.fa-fax::before {
  content: "\f1ac"; }

.fa-paragraph::before {
  content: "\f1dd"; }

.fa-check-to-slot::before {
  content: "\f772"; }

.fa-vote-yea::before {
  content: "\f772"; }

.fa-star-half::before {
  content: "\f089"; }

.fa-boxes-stacked::before {
  content: "\f468"; }

.fa-boxes::before {
  content: "\f468"; }

.fa-boxes-alt::before {
  content: "\f468"; }

.fa-link::before {
  content: "\f0c1"; }

.fa-chain::before {
  content: "\f0c1"; }

.fa-ear-listen::before {
  content: "\f2a2"; }

.fa-assistive-listening-systems::before {
  content: "\f2a2"; }

.fa-tree-city::before {
  content: "\e587"; }

.fa-play::before {
  content: "\f04b"; }

.fa-font::before {
  content: "\f031"; }

.fa-table-cells-row-lock::before {
  content: "\e67a"; }

.fa-rupiah-sign::before {
  content: "\e23d"; }

.fa-magnifying-glass::before {
  content: "\f002"; }

.fa-search::before {
  content: "\f002"; }

.fa-table-tennis-paddle-ball::before {
  content: "\f45d"; }

.fa-ping-pong-paddle-ball::before {
  content: "\f45d"; }

.fa-table-tennis::before {
  content: "\f45d"; }

.fa-person-dots-from-line::before {
  content: "\f470"; }

.fa-diagnoses::before {
  content: "\f470"; }

.fa-trash-can-arrow-up::before {
  content: "\f82a"; }

.fa-trash-restore-alt::before {
  content: "\f82a"; }

.fa-naira-sign::before {
  content: "\e1f6"; }

.fa-cart-arrow-down::before {
  content: "\f218"; }

.fa-walkie-talkie::before {
  content: "\f8ef"; }

.fa-file-pen::before {
  content: "\f31c"; }

.fa-file-edit::before {
  content: "\f31c"; }

.fa-receipt::before {
  content: "\f543"; }

.fa-square-pen::before {
  content: "\f14b"; }

.fa-pen-square::before {
  content: "\f14b"; }

.fa-pencil-square::before {
  content: "\f14b"; }

.fa-suitcase-rolling::before {
  content: "\f5c1"; }

.fa-person-circle-exclamation::before {
  content: "\e53f"; }

.fa-chevron-down::before {
  content: "\f078"; }

.fa-battery-full::before {
  content: "\f240"; }

.fa-battery::before {
  content: "\f240"; }

.fa-battery-5::before {
  content: "\f240"; }

.fa-skull-crossbones::before {
  content: "\f714"; }

.fa-code-compare::before {
  content: "\e13a"; }

.fa-list-ul::before {
  content: "\f0ca"; }

.fa-list-dots::before {
  content: "\f0ca"; }

.fa-school-lock::before {
  content: "\e56f"; }

.fa-tower-cell::before {
  content: "\e585"; }

.fa-down-long::before {
  content: "\f309"; }

.fa-long-arrow-alt-down::before {
  content: "\f309"; }

.fa-ranking-star::before {
  content: "\e561"; }

.fa-chess-king::before {
  content: "\f43f"; }

.fa-person-harassing::before {
  content: "\e549"; }

.fa-brazilian-real-sign::before {
  content: "\e46c"; }

.fa-landmark-dome::before {
  content: "\f752"; }

.fa-landmark-alt::before {
  content: "\f752"; }

.fa-arrow-up::before {
  content: "\f062"; }

.fa-tv::before {
  content: "\f26c"; }

.fa-television::before {
  content: "\f26c"; }

.fa-tv-alt::before {
  content: "\f26c"; }

.fa-shrimp::before {
  content: "\e448"; }

.fa-list-check::before {
  content: "\f0ae"; }

.fa-tasks::before {
  content: "\f0ae"; }

.fa-jug-detergent::before {
  content: "\e519"; }

.fa-circle-user::before {
  content: "\f2bd"; }

.fa-user-circle::before {
  content: "\f2bd"; }

.fa-user-shield::before {
  content: "\f505"; }

.fa-wind::before {
  content: "\f72e"; }

.fa-car-burst::before {
  content: "\f5e1"; }

.fa-car-crash::before {
  content: "\f5e1"; }

.fa-y::before {
  content: "\59"; }

.fa-person-snowboarding::before {
  content: "\f7ce"; }

.fa-snowboarding::before {
  content: "\f7ce"; }

.fa-truck-fast::before {
  content: "\f48b"; }

.fa-shipping-fast::before {
  content: "\f48b"; }

.fa-fish::before {
  content: "\f578"; }

.fa-user-graduate::before {
  content: "\f501"; }

.fa-circle-half-stroke::before {
  content: "\f042"; }

.fa-adjust::before {
  content: "\f042"; }

.fa-clapperboard::before {
  content: "\e131"; }

.fa-circle-radiation::before {
  content: "\f7ba"; }

.fa-radiation-alt::before {
  content: "\f7ba"; }

.fa-baseball::before {
  content: "\f433"; }

.fa-baseball-ball::before {
  content: "\f433"; }

.fa-jet-fighter-up::before {
  content: "\e518"; }

.fa-diagram-project::before {
  content: "\f542"; }

.fa-project-diagram::before {
  content: "\f542"; }

.fa-copy::before {
  content: "\f0c5"; }

.fa-volume-xmark::before {
  content: "\f6a9"; }

.fa-volume-mute::before {
  content: "\f6a9"; }

.fa-volume-times::before {
  content: "\f6a9"; }

.fa-hand-sparkles::before {
  content: "\e05d"; }

.fa-grip::before {
  content: "\f58d"; }

.fa-grip-horizontal::before {
  content: "\f58d"; }

.fa-share-from-square::before {
  content: "\f14d"; }

.fa-share-square::before {
  content: "\f14d"; }

.fa-child-combatant::before {
  content: "\e4e0"; }

.fa-child-rifle::before {
  content: "\e4e0"; }

.fa-gun::before {
  content: "\e19b"; }

.fa-square-phone::before {
  content: "\f098"; }

.fa-phone-square::before {
  content: "\f098"; }

.fa-plus::before {
  content: "\2b"; }

.fa-add::before {
  content: "\2b"; }

.fa-expand::before {
  content: "\f065"; }

.fa-computer::before {
  content: "\e4e5"; }

.fa-xmark::before {
  content: "\f00d"; }

.fa-close::before {
  content: "\f00d"; }

.fa-multiply::before {
  content: "\f00d"; }

.fa-remove::before {
  content: "\f00d"; }

.fa-times::before {
  content: "\f00d"; }

.fa-arrows-up-down-left-right::before {
  content: "\f047"; }

.fa-arrows::before {
  content: "\f047"; }

.fa-chalkboard-user::before {
  content: "\f51c"; }

.fa-chalkboard-teacher::before {
  content: "\f51c"; }

.fa-peso-sign::before {
  content: "\e222"; }

.fa-building-shield::before {
  content: "\e4d8"; }

.fa-baby::before {
  content: "\f77c"; }

.fa-users-line::before {
  content: "\e592"; }

.fa-quote-left::before {
  content: "\f10d"; }

.fa-quote-left-alt::before {
  content: "\f10d"; }

.fa-tractor::before {
  content: "\f722"; }

.fa-trash-arrow-up::before {
  content: "\f829"; }

.fa-trash-restore::before {
  content: "\f829"; }

.fa-arrow-down-up-lock::before {
  content: "\e4b0"; }

.fa-lines-leaning::before {
  content: "\e51e"; }

.fa-ruler-combined::before {
  content: "\f546"; }

.fa-copyright::before {
  content: "\f1f9"; }

.fa-equals::before {
  content: "\3d"; }

.fa-blender::before {
  content: "\f517"; }

.fa-teeth::before {
  content: "\f62e"; }

.fa-shekel-sign::before {
  content: "\f20b"; }

.fa-ils::before {
  content: "\f20b"; }

.fa-shekel::before {
  content: "\f20b"; }

.fa-sheqel::before {
  content: "\f20b"; }

.fa-sheqel-sign::before {
  content: "\f20b"; }

.fa-map::before {
  content: "\f279"; }

.fa-rocket::before {
  content: "\f135"; }

.fa-photo-film::before {
  content: "\f87c"; }

.fa-photo-video::before {
  content: "\f87c"; }

.fa-folder-minus::before {
  content: "\f65d"; }

.fa-store::before {
  content: "\f54e"; }

.fa-arrow-trend-up::before {
  content: "\e098"; }

.fa-plug-circle-minus::before {
  content: "\e55e"; }

.fa-sign-hanging::before {
  content: "\f4d9"; }

.fa-sign::before {
  content: "\f4d9"; }

.fa-bezier-curve::before {
  content: "\f55b"; }

.fa-bell-slash::before {
  content: "\f1f6"; }

.fa-tablet::before {
  content: "\f3fb"; }

.fa-tablet-android::before {
  content: "\f3fb"; }

.fa-school-flag::before {
  content: "\e56e"; }

.fa-fill::before {
  content: "\f575"; }

.fa-angle-up::before {
  content: "\f106"; }

.fa-drumstick-bite::before {
  content: "\f6d7"; }

.fa-holly-berry::before {
  content: "\f7aa"; }

.fa-chevron-left::before {
  content: "\f053"; }

.fa-bacteria::before {
  content: "\e059"; }

.fa-hand-lizard::before {
  content: "\f258"; }

.fa-notdef::before {
  content: "\e1fe"; }

.fa-disease::before {
  content: "\f7fa"; }

.fa-briefcase-medical::before {
  content: "\f469"; }

.fa-genderless::before {
  content: "\f22d"; }

.fa-chevron-right::before {
  content: "\f054"; }

.fa-retweet::before {
  content: "\f079"; }

.fa-car-rear::before {
  content: "\f5de"; }

.fa-car-alt::before {
  content: "\f5de"; }

.fa-pump-soap::before {
  content: "\e06b"; }

.fa-video-slash::before {
  content: "\f4e2"; }

.fa-battery-quarter::before {
  content: "\f243"; }

.fa-battery-2::before {
  content: "\f243"; }

.fa-radio::before {
  content: "\f8d7"; }

.fa-baby-carriage::before {
  content: "\f77d"; }

.fa-carriage-baby::before {
  content: "\f77d"; }

.fa-traffic-light::before {
  content: "\f637"; }

.fa-thermometer::before {
  content: "\f491"; }

.fa-vr-cardboard::before {
  content: "\f729"; }

.fa-hand-middle-finger::before {
  content: "\f806"; }

.fa-percent::before {
  content: "\25"; }

.fa-percentage::before {
  content: "\25"; }

.fa-truck-moving::before {
  content: "\f4df"; }

.fa-glass-water-droplet::before {
  content: "\e4f5"; }

.fa-display::before {
  content: "\e163"; }

.fa-face-smile::before {
  content: "\f118"; }

.fa-smile::before {
  content: "\f118"; }

.fa-thumbtack::before {
  content: "\f08d"; }

.fa-thumb-tack::before {
  content: "\f08d"; }

.fa-trophy::before {
  content: "\f091"; }

.fa-person-praying::before {
  content: "\f683"; }

.fa-pray::before {
  content: "\f683"; }

.fa-hammer::before {
  content: "\f6e3"; }

.fa-hand-peace::before {
  content: "\f25b"; }

.fa-rotate::before {
  content: "\f2f1"; }

.fa-sync-alt::before {
  content: "\f2f1"; }

.fa-spinner::before {
  content: "\f110"; }

.fa-robot::before {
  content: "\f544"; }

.fa-peace::before {
  content: "\f67c"; }

.fa-gears::before {
  content: "\f085"; }

.fa-cogs::before {
  content: "\f085"; }

.fa-warehouse::before {
  content: "\f494"; }

.fa-arrow-up-right-dots::before {
  content: "\e4b7"; }

.fa-splotch::before {
  content: "\f5bc"; }

.fa-face-grin-hearts::before {
  content: "\f584"; }

.fa-grin-hearts::before {
  content: "\f584"; }

.fa-dice-four::before {
  content: "\f524"; }

.fa-sim-card::before {
  content: "\f7c4"; }

.fa-transgender::before {
  content: "\f225"; }

.fa-transgender-alt::before {
  content: "\f225"; }

.fa-mercury::before {
  content: "\f223"; }

.fa-arrow-turn-down::before {
  content: "\f149"; }

.fa-level-down::before {
  content: "\f149"; }

.fa-person-falling-burst::before {
  content: "\e547"; }

.fa-award::before {
  content: "\f559"; }

.fa-ticket-simple::before {
  content: "\f3ff"; }

.fa-ticket-alt::before {
  content: "\f3ff"; }

.fa-building::before {
  content: "\f1ad"; }

.fa-angles-left::before {
  content: "\f100"; }

.fa-angle-double-left::before {
  content: "\f100"; }

.fa-qrcode::before {
  content: "\f029"; }

.fa-clock-rotate-left::before {
  content: "\f1da"; }

.fa-history::before {
  content: "\f1da"; }

.fa-face-grin-beam-sweat::before {
  content: "\f583"; }

.fa-grin-beam-sweat::before {
  content: "\f583"; }

.fa-file-export::before {
  content: "\f56e"; }

.fa-arrow-right-from-file::before {
  content: "\f56e"; }

.fa-shield::before {
  content: "\f132"; }

.fa-shield-blank::before {
  content: "\f132"; }

.fa-arrow-up-short-wide::before {
  content: "\f885"; }

.fa-sort-amount-up-alt::before {
  content: "\f885"; }

.fa-house-medical::before {
  content: "\e3b2"; }

.fa-golf-ball-tee::before {
  content: "\f450"; }

.fa-golf-ball::before {
  content: "\f450"; }

.fa-circle-chevron-left::before {
  content: "\f137"; }

.fa-chevron-circle-left::before {
  content: "\f137"; }

.fa-house-chimney-window::before {
  content: "\e00d"; }

.fa-pen-nib::before {
  content: "\f5ad"; }

.fa-tent-arrow-turn-left::before {
  content: "\e580"; }

.fa-tents::before {
  content: "\e582"; }

.fa-wand-magic::before {
  content: "\f0d0"; }

.fa-magic::before {
  content: "\f0d0"; }

.fa-dog::before {
  content: "\f6d3"; }

.fa-carrot::before {
  content: "\f787"; }

.fa-moon::before {
  content: "\f186"; }

.fa-wine-glass-empty::before {
  content: "\f5ce"; }

.fa-wine-glass-alt::before {
  content: "\f5ce"; }

.fa-cheese::before {
  content: "\f7ef"; }

.fa-yin-yang::before {
  content: "\f6ad"; }

.fa-music::before {
  content: "\f001"; }

.fa-code-commit::before {
  content: "\f386"; }

.fa-temperature-low::before {
  content: "\f76b"; }

.fa-person-biking::before {
  content: "\f84a"; }

.fa-biking::before {
  content: "\f84a"; }

.fa-broom::before {
  content: "\f51a"; }

.fa-shield-heart::before {
  content: "\e574"; }

.fa-gopuram::before {
  content: "\f664"; }

.fa-earth-oceania::before {
  content: "\e47b"; }

.fa-globe-oceania::before {
  content: "\e47b"; }

.fa-square-xmark::before {
  content: "\f2d3"; }

.fa-times-square::before {
  content: "\f2d3"; }

.fa-xmark-square::before {
  content: "\f2d3"; }

.fa-hashtag::before {
  content: "\23"; }

.fa-up-right-and-down-left-from-center::before {
  content: "\f424"; }

.fa-expand-alt::before {
  content: "\f424"; }

.fa-oil-can::before {
  content: "\f613"; }

.fa-t::before {
  content: "\54"; }

.fa-hippo::before {
  content: "\f6ed"; }

.fa-chart-column::before {
  content: "\e0e3"; }

.fa-infinity::before {
  content: "\f534"; }

.fa-vial-circle-check::before {
  content: "\e596"; }

.fa-person-arrow-down-to-line::before {
  content: "\e538"; }

.fa-voicemail::before {
  content: "\f897"; }

.fa-fan::before {
  content: "\f863"; }

.fa-person-walking-luggage::before {
  content: "\e554"; }

.fa-up-down::before {
  content: "\f338"; }

.fa-arrows-alt-v::before {
  content: "\f338"; }

.fa-cloud-moon-rain::before {
  content: "\f73c"; }

.fa-calendar::before {
  content: "\f133"; }

.fa-trailer::before {
  content: "\e041"; }

.fa-bahai::before {
  content: "\f666"; }

.fa-haykal::before {
  content: "\f666"; }

.fa-sd-card::before {
  content: "\f7c2"; }

.fa-dragon::before {
  content: "\f6d5"; }

.fa-shoe-prints::before {
  content: "\f54b"; }

.fa-circle-plus::before {
  content: "\f055"; }

.fa-plus-circle::before {
  content: "\f055"; }

.fa-face-grin-tongue-wink::before {
  content: "\f58b"; }

.fa-grin-tongue-wink::before {
  content: "\f58b"; }

.fa-hand-holding::before {
  content: "\f4bd"; }

.fa-plug-circle-exclamation::before {
  content: "\e55d"; }

.fa-link-slash::before {
  content: "\f127"; }

.fa-chain-broken::before {
  content: "\f127"; }

.fa-chain-slash::before {
  content: "\f127"; }

.fa-unlink::before {
  content: "\f127"; }

.fa-clone::before {
  content: "\f24d"; }

.fa-person-walking-arrow-loop-left::before {
  content: "\e551"; }

.fa-arrow-up-z-a::before {
  content: "\f882"; }

.fa-sort-alpha-up-alt::before {
  content: "\f882"; }

.fa-fire-flame-curved::before {
  content: "\f7e4"; }

.fa-fire-alt::before {
  content: "\f7e4"; }

.fa-tornado::before {
  content: "\f76f"; }

.fa-file-circle-plus::before {
  content: "\e494"; }

.fa-book-quran::before {
  content: "\f687"; }

.fa-quran::before {
  content: "\f687"; }

.fa-anchor::before {
  content: "\f13d"; }

.fa-border-all::before {
  content: "\f84c"; }

.fa-face-angry::before {
  content: "\f556"; }

.fa-angry::before {
  content: "\f556"; }

.fa-cookie-bite::before {
  content: "\f564"; }

.fa-arrow-trend-down::before {
  content: "\e097"; }

.fa-rss::before {
  content: "\f09e"; }

.fa-feed::before {
  content: "\f09e"; }

.fa-draw-polygon::before {
  content: "\f5ee"; }

.fa-scale-balanced::before {
  content: "\f24e"; }

.fa-balance-scale::before {
  content: "\f24e"; }

.fa-gauge-simple-high::before {
  content: "\f62a"; }

.fa-tachometer::before {
  content: "\f62a"; }

.fa-tachometer-fast::before {
  content: "\f62a"; }

.fa-shower::before {
  content: "\f2cc"; }

.fa-desktop::before {
  content: "\f390"; }

.fa-desktop-alt::before {
  content: "\f390"; }

.fa-m::before {
  content: "\4d"; }

.fa-table-list::before {
  content: "\f00b"; }

.fa-th-list::before {
  content: "\f00b"; }

.fa-comment-sms::before {
  content: "\f7cd"; }

.fa-sms::before {
  content: "\f7cd"; }

.fa-book::before {
  content: "\f02d"; }

.fa-user-plus::before {
  content: "\f234"; }

.fa-check::before {
  content: "\f00c"; }

.fa-battery-three-quarters::before {
  content: "\f241"; }

.fa-battery-4::before {
  content: "\f241"; }

.fa-house-circle-check::before {
  content: "\e509"; }

.fa-angle-left::before {
  content: "\f104"; }

.fa-diagram-successor::before {
  content: "\e47a"; }

.fa-truck-arrow-right::before {
  content: "\e58b"; }

.fa-arrows-split-up-and-left::before {
  content: "\e4bc"; }

.fa-hand-fist::before {
  content: "\f6de"; }

.fa-fist-raised::before {
  content: "\f6de"; }

.fa-cloud-moon::before {
  content: "\f6c3"; }

.fa-briefcase::before {
  content: "\f0b1"; }

.fa-person-falling::before {
  content: "\e546"; }

.fa-image-portrait::before {
  content: "\f3e0"; }

.fa-portrait::before {
  content: "\f3e0"; }

.fa-user-tag::before {
  content: "\f507"; }

.fa-rug::before {
  content: "\e569"; }

.fa-earth-europe::before {
  content: "\f7a2"; }

.fa-globe-europe::before {
  content: "\f7a2"; }

.fa-cart-flatbed-suitcase::before {
  content: "\f59d"; }

.fa-luggage-cart::before {
  content: "\f59d"; }

.fa-rectangle-xmark::before {
  content: "\f410"; }

.fa-rectangle-times::before {
  content: "\f410"; }

.fa-times-rectangle::before {
  content: "\f410"; }

.fa-window-close::before {
  content: "\f410"; }

.fa-baht-sign::before {
  content: "\e0ac"; }

.fa-book-open::before {
  content: "\f518"; }

.fa-book-journal-whills::before {
  content: "\f66a"; }

.fa-journal-whills::before {
  content: "\f66a"; }

.fa-handcuffs::before {
  content: "\e4f8"; }

.fa-triangle-exclamation::before {
  content: "\f071"; }

.fa-exclamation-triangle::before {
  content: "\f071"; }

.fa-warning::before {
  content: "\f071"; }

.fa-database::before {
  content: "\f1c0"; }

.fa-share::before {
  content: "\f064"; }

.fa-mail-forward::before {
  content: "\f064"; }

.fa-bottle-droplet::before {
  content: "\e4c4"; }

.fa-mask-face::before {
  content: "\e1d7"; }

.fa-hill-rockslide::before {
  content: "\e508"; }

.fa-right-left::before {
  content: "\f362"; }

.fa-exchange-alt::before {
  content: "\f362"; }

.fa-paper-plane::before {
  content: "\f1d8"; }

.fa-road-circle-exclamation::before {
  content: "\e565"; }

.fa-dungeon::before {
  content: "\f6d9"; }

.fa-align-right::before {
  content: "\f038"; }

.fa-money-bill-1-wave::before {
  content: "\f53b"; }

.fa-money-bill-wave-alt::before {
  content: "\f53b"; }

.fa-life-ring::before {
  content: "\f1cd"; }

.fa-hands::before {
  content: "\f2a7"; }

.fa-sign-language::before {
  content: "\f2a7"; }

.fa-signing::before {
  content: "\f2a7"; }

.fa-calendar-day::before {
  content: "\f783"; }

.fa-water-ladder::before {
  content: "\f5c5"; }

.fa-ladder-water::before {
  content: "\f5c5"; }

.fa-swimming-pool::before {
  content: "\f5c5"; }

.fa-arrows-up-down::before {
  content: "\f07d"; }

.fa-arrows-v::before {
  content: "\f07d"; }

.fa-face-grimace::before {
  content: "\f57f"; }

.fa-grimace::before {
  content: "\f57f"; }

.fa-wheelchair-move::before {
  content: "\e2ce"; }

.fa-wheelchair-alt::before {
  content: "\e2ce"; }

.fa-turn-down::before {
  content: "\f3be"; }

.fa-level-down-alt::before {
  content: "\f3be"; }

.fa-person-walking-arrow-right::before {
  content: "\e552"; }

.fa-square-envelope::before {
  content: "\f199"; }

.fa-envelope-square::before {
  content: "\f199"; }

.fa-dice::before {
  content: "\f522"; }

.fa-bowling-ball::before {
  content: "\f436"; }

.fa-brain::before {
  content: "\f5dc"; }

.fa-bandage::before {
  content: "\f462"; }

.fa-band-aid::before {
  content: "\f462"; }

.fa-calendar-minus::before {
  content: "\f272"; }

.fa-circle-xmark::before {
  content: "\f057"; }

.fa-times-circle::before {
  content: "\f057"; }

.fa-xmark-circle::before {
  content: "\f057"; }

.fa-gifts::before {
  content: "\f79c"; }

.fa-hotel::before {
  content: "\f594"; }

.fa-earth-asia::before {
  content: "\f57e"; }

.fa-globe-asia::before {
  content: "\f57e"; }

.fa-id-card-clip::before {
  content: "\f47f"; }

.fa-id-card-alt::before {
  content: "\f47f"; }

.fa-magnifying-glass-plus::before {
  content: "\f00e"; }

.fa-search-plus::before {
  content: "\f00e"; }

.fa-thumbs-up::before {
  content: "\f164"; }

.fa-user-clock::before {
  content: "\f4fd"; }

.fa-hand-dots::before {
  content: "\f461"; }

.fa-allergies::before {
  content: "\f461"; }

.fa-file-invoice::before {
  content: "\f570"; }

.fa-window-minimize::before {
  content: "\f2d1"; }

.fa-mug-saucer::before {
  content: "\f0f4"; }

.fa-coffee::before {
  content: "\f0f4"; }

.fa-brush::before {
  content: "\f55d"; }

.fa-mask::before {
  content: "\f6fa"; }

.fa-magnifying-glass-minus::before {
  content: "\f010"; }

.fa-search-minus::before {
  content: "\f010"; }

.fa-ruler-vertical::before {
  content: "\f548"; }

.fa-user-large::before {
  content: "\f406"; }

.fa-user-alt::before {
  content: "\f406"; }

.fa-train-tram::before {
  content: "\e5b4"; }

.fa-user-nurse::before {
  content: "\f82f"; }

.fa-syringe::before {
  content: "\f48e"; }

.fa-cloud-sun::before {
  content: "\f6c4"; }

.fa-stopwatch-20::before {
  content: "\e06f"; }

.fa-square-full::before {
  content: "\f45c"; }

.fa-magnet::before {
  content: "\f076"; }

.fa-jar::before {
  content: "\e516"; }

.fa-note-sticky::before {
  content: "\f249"; }

.fa-sticky-note::before {
  content: "\f249"; }

.fa-bug-slash::before {
  content: "\e490"; }

.fa-arrow-up-from-water-pump::before {
  content: "\e4b6"; }

.fa-bone::before {
  content: "\f5d7"; }

.fa-user-injured::before {
  content: "\f728"; }

.fa-face-sad-tear::before {
  content: "\f5b4"; }

.fa-sad-tear::before {
  content: "\f5b4"; }

.fa-plane::before {
  content: "\f072"; }

.fa-tent-arrows-down::before {
  content: "\e581"; }

.fa-exclamation::before {
  content: "\21"; }

.fa-arrows-spin::before {
  content: "\e4bb"; }

.fa-print::before {
  content: "\f02f"; }

.fa-turkish-lira-sign::before {
  content: "\e2bb"; }

.fa-try::before {
  content: "\e2bb"; }

.fa-turkish-lira::before {
  content: "\e2bb"; }

.fa-dollar-sign::before {
  content: "\24"; }

.fa-dollar::before {
  content: "\24"; }

.fa-usd::before {
  content: "\24"; }

.fa-x::before {
  content: "\58"; }

.fa-magnifying-glass-dollar::before {
  content: "\f688"; }

.fa-search-dollar::before {
  content: "\f688"; }

.fa-users-gear::before {
  content: "\f509"; }

.fa-users-cog::before {
  content: "\f509"; }

.fa-person-military-pointing::before {
  content: "\e54a"; }

.fa-building-columns::before {
  content: "\f19c"; }

.fa-bank::before {
  content: "\f19c"; }

.fa-institution::before {
  content: "\f19c"; }

.fa-museum::before {
  content: "\f19c"; }

.fa-university::before {
  content: "\f19c"; }

.fa-umbrella::before {
  content: "\f0e9"; }

.fa-trowel::before {
  content: "\e589"; }

.fa-d::before {
  content: "\44"; }

.fa-stapler::before {
  content: "\e5af"; }

.fa-masks-theater::before {
  content: "\f630"; }

.fa-theater-masks::before {
  content: "\f630"; }

.fa-kip-sign::before {
  content: "\e1c4"; }

.fa-hand-point-left::before {
  content: "\f0a5"; }

.fa-handshake-simple::before {
  content: "\f4c6"; }

.fa-handshake-alt::before {
  content: "\f4c6"; }

.fa-jet-fighter::before {
  content: "\f0fb"; }

.fa-fighter-jet::before {
  content: "\f0fb"; }

.fa-square-share-nodes::before {
  content: "\f1e1"; }

.fa-share-alt-square::before {
  content: "\f1e1"; }

.fa-barcode::before {
  content: "\f02a"; }

.fa-plus-minus::before {
  content: "\e43c"; }

.fa-video::before {
  content: "\f03d"; }

.fa-video-camera::before {
  content: "\f03d"; }

.fa-graduation-cap::before {
  content: "\f19d"; }

.fa-mortar-board::before {
  content: "\f19d"; }

.fa-hand-holding-medical::before {
  content: "\e05c"; }

.fa-person-circle-check::before {
  content: "\e53e"; }

.fa-turn-up::before {
  content: "\f3bf"; }

.fa-level-up-alt::before {
  content: "\f3bf"; }

.sr-only,
.fa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }

.sr-only-focusable:not(:focus),
.fa-sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0; }

/*!
 * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(/assets/font-awesome/fa-solid-900-370bba3c04d5d177f9af8bcb796011e21509808f9a5369289328f89870dba0a0.woff2) format("woff2"), url(/assets/font-awesome/fa-solid-900-3c7bf1859e32a508e8a6c4750a2e195eb283b77bba013bef0b93a44b11630e2f.ttf) format("truetype"); }

.fas,
.fa-solid {
  font-weight: 900; }

/*!
 * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/font-awesome/fa-regular-400-f5930dd8a4e66926250f45d051ff86566a4237b8c45d28e3abdc937e0a58aa7f.woff2) format("woff2"), url(/assets/font-awesome/fa-regular-400-60054ca3c188db05e091d3185a2ad284dd321587b06676bab96797a2764d10f0.ttf) format("truetype"); }

.far,
.fa-regular {
  font-weight: 400; }

/*!
 * Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2024 Fonticons, Inc.
 */
:root, :host {
  --fa-style-family-brands: 'Font Awesome 6 Brands';
  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/font-awesome/fa-brands-400-4f44a163fb44be54c1a2d02d4637b7a6a39722e313b6569cb81f88a72d879663.woff2) format("woff2"), url(/assets/font-awesome/fa-brands-400-03e2d94838db33a68d48642e65b9a0c20389c97e7eca5e1d3c5b9b1b6fce4e07.ttf) format("truetype"); }

.fab,
.fa-brands {
  font-weight: 400; }

.fa-monero:before {
  content: "\f3d0"; }

.fa-hooli:before {
  content: "\f427"; }

.fa-yelp:before {
  content: "\f1e9"; }

.fa-cc-visa:before {
  content: "\f1f0"; }

.fa-lastfm:before {
  content: "\f202"; }

.fa-shopware:before {
  content: "\f5b5"; }

.fa-creative-commons-nc:before {
  content: "\f4e8"; }

.fa-aws:before {
  content: "\f375"; }

.fa-redhat:before {
  content: "\f7bc"; }

.fa-yoast:before {
  content: "\f2b1"; }

.fa-cloudflare:before {
  content: "\e07d"; }

.fa-ups:before {
  content: "\f7e0"; }

.fa-pixiv:before {
  content: "\e640"; }

.fa-wpexplorer:before {
  content: "\f2de"; }

.fa-dyalog:before {
  content: "\f399"; }

.fa-bity:before {
  content: "\f37a"; }

.fa-stackpath:before {
  content: "\f842"; }

.fa-buysellads:before {
  content: "\f20d"; }

.fa-first-order:before {
  content: "\f2b0"; }

.fa-modx:before {
  content: "\f285"; }

.fa-guilded:before {
  content: "\e07e"; }

.fa-vnv:before {
  content: "\f40b"; }

.fa-square-js:before {
  content: "\f3b9"; }

.fa-js-square:before {
  content: "\f3b9"; }

.fa-microsoft:before {
  content: "\f3ca"; }

.fa-qq:before {
  content: "\f1d6"; }

.fa-orcid:before {
  content: "\f8d2"; }

.fa-java:before {
  content: "\f4e4"; }

.fa-invision:before {
  content: "\f7b0"; }

.fa-creative-commons-pd-alt:before {
  content: "\f4ed"; }

.fa-centercode:before {
  content: "\f380"; }

.fa-glide-g:before {
  content: "\f2a6"; }

.fa-drupal:before {
  content: "\f1a9"; }

.fa-jxl:before {
  content: "\e67b"; }

.fa-hire-a-helper:before {
  content: "\f3b0"; }

.fa-creative-commons-by:before {
  content: "\f4e7"; }

.fa-unity:before {
  content: "\e049"; }

.fa-whmcs:before {
  content: "\f40d"; }

.fa-rocketchat:before {
  content: "\f3e8"; }

.fa-vk:before {
  content: "\f189"; }

.fa-untappd:before {
  content: "\f405"; }

.fa-mailchimp:before {
  content: "\f59e"; }

.fa-css3-alt:before {
  content: "\f38b"; }

.fa-square-reddit:before {
  content: "\f1a2"; }

.fa-reddit-square:before {
  content: "\f1a2"; }

.fa-vimeo-v:before {
  content: "\f27d"; }

.fa-contao:before {
  content: "\f26d"; }

.fa-square-font-awesome:before {
  content: "\e5ad"; }

.fa-deskpro:before {
  content: "\f38f"; }

.fa-brave:before {
  content: "\e63c"; }

.fa-sistrix:before {
  content: "\f3ee"; }

.fa-square-instagram:before {
  content: "\e055"; }

.fa-instagram-square:before {
  content: "\e055"; }

.fa-battle-net:before {
  content: "\f835"; }

.fa-the-red-yeti:before {
  content: "\f69d"; }

.fa-square-hacker-news:before {
  content: "\f3af"; }

.fa-hacker-news-square:before {
  content: "\f3af"; }

.fa-edge:before {
  content: "\f282"; }

.fa-threads:before {
  content: "\e618"; }

.fa-napster:before {
  content: "\f3d2"; }

.fa-square-snapchat:before {
  content: "\f2ad"; }

.fa-snapchat-square:before {
  content: "\f2ad"; }

.fa-google-plus-g:before {
  content: "\f0d5"; }

.fa-artstation:before {
  content: "\f77a"; }

.fa-markdown:before {
  content: "\f60f"; }

.fa-sourcetree:before {
  content: "\f7d3"; }

.fa-google-plus:before {
  content: "\f2b3"; }

.fa-diaspora:before {
  content: "\f791"; }

.fa-foursquare:before {
  content: "\f180"; }

.fa-stack-overflow:before {
  content: "\f16c"; }

.fa-github-alt:before {
  content: "\f113"; }

.fa-phoenix-squadron:before {
  content: "\f511"; }

.fa-pagelines:before {
  content: "\f18c"; }

.fa-algolia:before {
  content: "\f36c"; }

.fa-red-river:before {
  content: "\f3e3"; }

.fa-creative-commons-sa:before {
  content: "\f4ef"; }

.fa-safari:before {
  content: "\f267"; }

.fa-google:before {
  content: "\f1a0"; }

.fa-square-font-awesome-stroke:before {
  content: "\f35c"; }

.fa-font-awesome-alt:before {
  content: "\f35c"; }

.fa-atlassian:before {
  content: "\f77b"; }

.fa-linkedin-in:before {
  content: "\f0e1"; }

.fa-digital-ocean:before {
  content: "\f391"; }

.fa-nimblr:before {
  content: "\f5a8"; }

.fa-chromecast:before {
  content: "\f838"; }

.fa-evernote:before {
  content: "\f839"; }

.fa-hacker-news:before {
  content: "\f1d4"; }

.fa-creative-commons-sampling:before {
  content: "\f4f0"; }

.fa-adversal:before {
  content: "\f36a"; }

.fa-creative-commons:before {
  content: "\f25e"; }

.fa-watchman-monitoring:before {
  content: "\e087"; }

.fa-fonticons:before {
  content: "\f280"; }

.fa-weixin:before {
  content: "\f1d7"; }

.fa-shirtsinbulk:before {
  content: "\f214"; }

.fa-codepen:before {
  content: "\f1cb"; }

.fa-git-alt:before {
  content: "\f841"; }

.fa-lyft:before {
  content: "\f3c3"; }

.fa-rev:before {
  content: "\f5b2"; }

.fa-windows:before {
  content: "\f17a"; }

.fa-wizards-of-the-coast:before {
  content: "\f730"; }

.fa-square-viadeo:before {
  content: "\f2aa"; }

.fa-viadeo-square:before {
  content: "\f2aa"; }

.fa-meetup:before {
  content: "\f2e0"; }

.fa-centos:before {
  content: "\f789"; }

.fa-adn:before {
  content: "\f170"; }

.fa-cloudsmith:before {
  content: "\f384"; }

.fa-opensuse:before {
  content: "\e62b"; }

.fa-pied-piper-alt:before {
  content: "\f1a8"; }

.fa-square-dribbble:before {
  content: "\f397"; }

.fa-dribbble-square:before {
  content: "\f397"; }

.fa-codiepie:before {
  content: "\f284"; }

.fa-node:before {
  content: "\f419"; }

.fa-mix:before {
  content: "\f3cb"; }

.fa-steam:before {
  content: "\f1b6"; }

.fa-cc-apple-pay:before {
  content: "\f416"; }

.fa-scribd:before {
  content: "\f28a"; }

.fa-debian:before {
  content: "\e60b"; }

.fa-openid:before {
  content: "\f19b"; }

.fa-instalod:before {
  content: "\e081"; }

.fa-expeditedssl:before {
  content: "\f23e"; }

.fa-sellcast:before {
  content: "\f2da"; }

.fa-square-twitter:before {
  content: "\f081"; }

.fa-twitter-square:before {
  content: "\f081"; }

.fa-r-project:before {
  content: "\f4f7"; }

.fa-delicious:before {
  content: "\f1a5"; }

.fa-freebsd:before {
  content: "\f3a4"; }

.fa-vuejs:before {
  content: "\f41f"; }

.fa-accusoft:before {
  content: "\f369"; }

.fa-ioxhost:before {
  content: "\f208"; }

.fa-fonticons-fi:before {
  content: "\f3a2"; }

.fa-app-store:before {
  content: "\f36f"; }

.fa-cc-mastercard:before {
  content: "\f1f1"; }

.fa-itunes-note:before {
  content: "\f3b5"; }

.fa-golang:before {
  content: "\e40f"; }

.fa-kickstarter:before {
  content: "\f3bb"; }

.fa-square-kickstarter:before {
  content: "\f3bb"; }

.fa-grav:before {
  content: "\f2d6"; }

.fa-weibo:before {
  content: "\f18a"; }

.fa-uncharted:before {
  content: "\e084"; }

.fa-firstdraft:before {
  content: "\f3a1"; }

.fa-square-youtube:before {
  content: "\f431"; }

.fa-youtube-square:before {
  content: "\f431"; }

.fa-wikipedia-w:before {
  content: "\f266"; }

.fa-wpressr:before {
  content: "\f3e4"; }

.fa-rendact:before {
  content: "\f3e4"; }

.fa-angellist:before {
  content: "\f209"; }

.fa-galactic-republic:before {
  content: "\f50c"; }

.fa-nfc-directional:before {
  content: "\e530"; }

.fa-skype:before {
  content: "\f17e"; }

.fa-joget:before {
  content: "\f3b7"; }

.fa-fedora:before {
  content: "\f798"; }

.fa-stripe-s:before {
  content: "\f42a"; }

.fa-meta:before {
  content: "\e49b"; }

.fa-laravel:before {
  content: "\f3bd"; }

.fa-hotjar:before {
  content: "\f3b1"; }

.fa-bluetooth-b:before {
  content: "\f294"; }

.fa-square-letterboxd:before {
  content: "\e62e"; }

.fa-sticker-mule:before {
  content: "\f3f7"; }

.fa-creative-commons-zero:before {
  content: "\f4f3"; }

.fa-hips:before {
  content: "\f452"; }

.fa-behance:before {
  content: "\f1b4"; }

.fa-reddit:before {
  content: "\f1a1"; }

.fa-discord:before {
  content: "\f392"; }

.fa-chrome:before {
  content: "\f268"; }

.fa-app-store-ios:before {
  content: "\f370"; }

.fa-cc-discover:before {
  content: "\f1f2"; }

.fa-wpbeginner:before {
  content: "\f297"; }

.fa-confluence:before {
  content: "\f78d"; }

.fa-shoelace:before {
  content: "\e60c"; }

.fa-mdb:before {
  content: "\f8ca"; }

.fa-dochub:before {
  content: "\f394"; }

.fa-accessible-icon:before {
  content: "\f368"; }

.fa-ebay:before {
  content: "\f4f4"; }

.fa-amazon:before {
  content: "\f270"; }

.fa-unsplash:before {
  content: "\e07c"; }

.fa-yarn:before {
  content: "\f7e3"; }

.fa-square-steam:before {
  content: "\f1b7"; }

.fa-steam-square:before {
  content: "\f1b7"; }

.fa-500px:before {
  content: "\f26e"; }

.fa-square-vimeo:before {
  content: "\f194"; }

.fa-vimeo-square:before {
  content: "\f194"; }

.fa-asymmetrik:before {
  content: "\f372"; }

.fa-font-awesome:before {
  content: "\f2b4"; }

.fa-font-awesome-flag:before {
  content: "\f2b4"; }

.fa-font-awesome-logo-full:before {
  content: "\f2b4"; }

.fa-gratipay:before {
  content: "\f184"; }

.fa-apple:before {
  content: "\f179"; }

.fa-hive:before {
  content: "\e07f"; }

.fa-gitkraken:before {
  content: "\f3a6"; }

.fa-keybase:before {
  content: "\f4f5"; }

.fa-apple-pay:before {
  content: "\f415"; }

.fa-padlet:before {
  content: "\e4a0"; }

.fa-amazon-pay:before {
  content: "\f42c"; }

.fa-square-github:before {
  content: "\f092"; }

.fa-github-square:before {
  content: "\f092"; }

.fa-stumbleupon:before {
  content: "\f1a4"; }

.fa-fedex:before {
  content: "\f797"; }

.fa-phoenix-framework:before {
  content: "\f3dc"; }

.fa-shopify:before {
  content: "\e057"; }

.fa-neos:before {
  content: "\f612"; }

.fa-square-threads:before {
  content: "\e619"; }

.fa-hackerrank:before {
  content: "\f5f7"; }

.fa-researchgate:before {
  content: "\f4f8"; }

.fa-swift:before {
  content: "\f8e1"; }

.fa-angular:before {
  content: "\f420"; }

.fa-speakap:before {
  content: "\f3f3"; }

.fa-angrycreative:before {
  content: "\f36e"; }

.fa-y-combinator:before {
  content: "\f23b"; }

.fa-empire:before {
  content: "\f1d1"; }

.fa-envira:before {
  content: "\f299"; }

.fa-google-scholar:before {
  content: "\e63b"; }

.fa-square-gitlab:before {
  content: "\e5ae"; }

.fa-gitlab-square:before {
  content: "\e5ae"; }

.fa-studiovinari:before {
  content: "\f3f8"; }

.fa-pied-piper:before {
  content: "\f2ae"; }

.fa-wordpress:before {
  content: "\f19a"; }

.fa-product-hunt:before {
  content: "\f288"; }

.fa-firefox:before {
  content: "\f269"; }

.fa-linode:before {
  content: "\f2b8"; }

.fa-goodreads:before {
  content: "\f3a8"; }

.fa-square-odnoklassniki:before {
  content: "\f264"; }

.fa-odnoklassniki-square:before {
  content: "\f264"; }

.fa-jsfiddle:before {
  content: "\f1cc"; }

.fa-sith:before {
  content: "\f512"; }

.fa-themeisle:before {
  content: "\f2b2"; }

.fa-page4:before {
  content: "\f3d7"; }

.fa-hashnode:before {
  content: "\e499"; }

.fa-react:before {
  content: "\f41b"; }

.fa-cc-paypal:before {
  content: "\f1f4"; }

.fa-squarespace:before {
  content: "\f5be"; }

.fa-cc-stripe:before {
  content: "\f1f5"; }

.fa-creative-commons-share:before {
  content: "\f4f2"; }

.fa-bitcoin:before {
  content: "\f379"; }

.fa-keycdn:before {
  content: "\f3ba"; }

.fa-opera:before {
  content: "\f26a"; }

.fa-itch-io:before {
  content: "\f83a"; }

.fa-umbraco:before {
  content: "\f8e8"; }

.fa-galactic-senate:before {
  content: "\f50d"; }

.fa-ubuntu:before {
  content: "\f7df"; }

.fa-draft2digital:before {
  content: "\f396"; }

.fa-stripe:before {
  content: "\f429"; }

.fa-houzz:before {
  content: "\f27c"; }

.fa-gg:before {
  content: "\f260"; }

.fa-dhl:before {
  content: "\f790"; }

.fa-square-pinterest:before {
  content: "\f0d3"; }

.fa-pinterest-square:before {
  content: "\f0d3"; }

.fa-xing:before {
  content: "\f168"; }

.fa-blackberry:before {
  content: "\f37b"; }

.fa-creative-commons-pd:before {
  content: "\f4ec"; }

.fa-playstation:before {
  content: "\f3df"; }

.fa-quinscape:before {
  content: "\f459"; }

.fa-less:before {
  content: "\f41d"; }

.fa-blogger-b:before {
  content: "\f37d"; }

.fa-opencart:before {
  content: "\f23d"; }

.fa-vine:before {
  content: "\f1ca"; }

.fa-signal-messenger:before {
  content: "\e663"; }

.fa-paypal:before {
  content: "\f1ed"; }

.fa-gitlab:before {
  content: "\f296"; }

.fa-typo3:before {
  content: "\f42b"; }

.fa-reddit-alien:before {
  content: "\f281"; }

.fa-yahoo:before {
  content: "\f19e"; }

.fa-dailymotion:before {
  content: "\e052"; }

.fa-affiliatetheme:before {
  content: "\f36b"; }

.fa-pied-piper-pp:before {
  content: "\f1a7"; }

.fa-bootstrap:before {
  content: "\f836"; }

.fa-odnoklassniki:before {
  content: "\f263"; }

.fa-nfc-symbol:before {
  content: "\e531"; }

.fa-mintbit:before {
  content: "\e62f"; }

.fa-ethereum:before {
  content: "\f42e"; }

.fa-speaker-deck:before {
  content: "\f83c"; }

.fa-creative-commons-nc-eu:before {
  content: "\f4e9"; }

.fa-patreon:before {
  content: "\f3d9"; }

.fa-avianex:before {
  content: "\f374"; }

.fa-ello:before {
  content: "\f5f1"; }

.fa-gofore:before {
  content: "\f3a7"; }

.fa-bimobject:before {
  content: "\f378"; }

.fa-brave-reverse:before {
  content: "\e63d"; }

.fa-facebook-f:before {
  content: "\f39e"; }

.fa-square-google-plus:before {
  content: "\f0d4"; }

.fa-google-plus-square:before {
  content: "\f0d4"; }

.fa-web-awesome:before {
  content: "\e682"; }

.fa-mandalorian:before {
  content: "\f50f"; }

.fa-first-order-alt:before {
  content: "\f50a"; }

.fa-osi:before {
  content: "\f41a"; }

.fa-google-wallet:before {
  content: "\f1ee"; }

.fa-d-and-d-beyond:before {
  content: "\f6ca"; }

.fa-periscope:before {
  content: "\f3da"; }

.fa-fulcrum:before {
  content: "\f50b"; }

.fa-cloudscale:before {
  content: "\f383"; }

.fa-forumbee:before {
  content: "\f211"; }

.fa-mizuni:before {
  content: "\f3cc"; }

.fa-schlix:before {
  content: "\f3ea"; }

.fa-square-xing:before {
  content: "\f169"; }

.fa-xing-square:before {
  content: "\f169"; }

.fa-bandcamp:before {
  content: "\f2d5"; }

.fa-wpforms:before {
  content: "\f298"; }

.fa-cloudversify:before {
  content: "\f385"; }

.fa-usps:before {
  content: "\f7e1"; }

.fa-megaport:before {
  content: "\f5a3"; }

.fa-magento:before {
  content: "\f3c4"; }

.fa-spotify:before {
  content: "\f1bc"; }

.fa-optin-monster:before {
  content: "\f23c"; }

.fa-fly:before {
  content: "\f417"; }

.fa-aviato:before {
  content: "\f421"; }

.fa-itunes:before {
  content: "\f3b4"; }

.fa-cuttlefish:before {
  content: "\f38c"; }

.fa-blogger:before {
  content: "\f37c"; }

.fa-flickr:before {
  content: "\f16e"; }

.fa-viber:before {
  content: "\f409"; }

.fa-soundcloud:before {
  content: "\f1be"; }

.fa-digg:before {
  content: "\f1a6"; }

.fa-tencent-weibo:before {
  content: "\f1d5"; }

.fa-letterboxd:before {
  content: "\e62d"; }

.fa-symfony:before {
  content: "\f83d"; }

.fa-maxcdn:before {
  content: "\f136"; }

.fa-etsy:before {
  content: "\f2d7"; }

.fa-facebook-messenger:before {
  content: "\f39f"; }

.fa-audible:before {
  content: "\f373"; }

.fa-think-peaks:before {
  content: "\f731"; }

.fa-bilibili:before {
  content: "\e3d9"; }

.fa-erlang:before {
  content: "\f39d"; }

.fa-x-twitter:before {
  content: "\e61b"; }

.fa-cotton-bureau:before {
  content: "\f89e"; }

.fa-dashcube:before {
  content: "\f210"; }

.fa-42-group:before {
  content: "\e080"; }

.fa-innosoft:before {
  content: "\e080"; }

.fa-stack-exchange:before {
  content: "\f18d"; }

.fa-elementor:before {
  content: "\f430"; }

.fa-square-pied-piper:before {
  content: "\e01e"; }

.fa-pied-piper-square:before {
  content: "\e01e"; }

.fa-creative-commons-nd:before {
  content: "\f4eb"; }

.fa-palfed:before {
  content: "\f3d8"; }

.fa-superpowers:before {
  content: "\f2dd"; }

.fa-resolving:before {
  content: "\f3e7"; }

.fa-xbox:before {
  content: "\f412"; }

.fa-square-web-awesome-stroke:before {
  content: "\e684"; }

.fa-searchengin:before {
  content: "\f3eb"; }

.fa-tiktok:before {
  content: "\e07b"; }

.fa-square-facebook:before {
  content: "\f082"; }

.fa-facebook-square:before {
  content: "\f082"; }

.fa-renren:before {
  content: "\f18b"; }

.fa-linux:before {
  content: "\f17c"; }

.fa-glide:before {
  content: "\f2a5"; }

.fa-linkedin:before {
  content: "\f08c"; }

.fa-hubspot:before {
  content: "\f3b2"; }

.fa-deploydog:before {
  content: "\f38e"; }

.fa-twitch:before {
  content: "\f1e8"; }

.fa-ravelry:before {
  content: "\f2d9"; }

.fa-mixer:before {
  content: "\e056"; }

.fa-square-lastfm:before {
  content: "\f203"; }

.fa-lastfm-square:before {
  content: "\f203"; }

.fa-vimeo:before {
  content: "\f40a"; }

.fa-mendeley:before {
  content: "\f7b3"; }

.fa-uniregistry:before {
  content: "\f404"; }

.fa-figma:before {
  content: "\f799"; }

.fa-creative-commons-remix:before {
  content: "\f4ee"; }

.fa-cc-amazon-pay:before {
  content: "\f42d"; }

.fa-dropbox:before {
  content: "\f16b"; }

.fa-instagram:before {
  content: "\f16d"; }

.fa-cmplid:before {
  content: "\e360"; }

.fa-upwork:before {
  content: "\e641"; }

.fa-facebook:before {
  content: "\f09a"; }

.fa-gripfire:before {
  content: "\f3ac"; }

.fa-jedi-order:before {
  content: "\f50e"; }

.fa-uikit:before {
  content: "\f403"; }

.fa-fort-awesome-alt:before {
  content: "\f3a3"; }

.fa-phabricator:before {
  content: "\f3db"; }

.fa-ussunnah:before {
  content: "\f407"; }

.fa-earlybirds:before {
  content: "\f39a"; }

.fa-trade-federation:before {
  content: "\f513"; }

.fa-autoprefixer:before {
  content: "\f41c"; }

.fa-whatsapp:before {
  content: "\f232"; }

.fa-square-upwork:before {
  content: "\e67c"; }

.fa-slideshare:before {
  content: "\f1e7"; }

.fa-google-play:before {
  content: "\f3ab"; }

.fa-viadeo:before {
  content: "\f2a9"; }

.fa-line:before {
  content: "\f3c0"; }

.fa-google-drive:before {
  content: "\f3aa"; }

.fa-servicestack:before {
  content: "\f3ec"; }

.fa-simplybuilt:before {
  content: "\f215"; }

.fa-bitbucket:before {
  content: "\f171"; }

.fa-imdb:before {
  content: "\f2d8"; }

.fa-deezer:before {
  content: "\e077"; }

.fa-raspberry-pi:before {
  content: "\f7bb"; }

.fa-jira:before {
  content: "\f7b1"; }

.fa-docker:before {
  content: "\f395"; }

.fa-screenpal:before {
  content: "\e570"; }

.fa-bluetooth:before {
  content: "\f293"; }

.fa-gitter:before {
  content: "\f426"; }

.fa-d-and-d:before {
  content: "\f38d"; }

.fa-microblog:before {
  content: "\e01a"; }

.fa-cc-diners-club:before {
  content: "\f24c"; }

.fa-gg-circle:before {
  content: "\f261"; }

.fa-pied-piper-hat:before {
  content: "\f4e5"; }

.fa-kickstarter-k:before {
  content: "\f3bc"; }

.fa-yandex:before {
  content: "\f413"; }

.fa-readme:before {
  content: "\f4d5"; }

.fa-html5:before {
  content: "\f13b"; }

.fa-sellsy:before {
  content: "\f213"; }

.fa-square-web-awesome:before {
  content: "\e683"; }

.fa-sass:before {
  content: "\f41e"; }

.fa-wirsindhandwerk:before {
  content: "\e2d0"; }

.fa-wsh:before {
  content: "\e2d0"; }

.fa-buromobelexperte:before {
  content: "\f37f"; }

.fa-salesforce:before {
  content: "\f83b"; }

.fa-octopus-deploy:before {
  content: "\e082"; }

.fa-medapps:before {
  content: "\f3c6"; }

.fa-ns8:before {
  content: "\f3d5"; }

.fa-pinterest-p:before {
  content: "\f231"; }

.fa-apper:before {
  content: "\f371"; }

.fa-fort-awesome:before {
  content: "\f286"; }

.fa-waze:before {
  content: "\f83f"; }

.fa-bluesky:before {
  content: "\e671"; }

.fa-cc-jcb:before {
  content: "\f24b"; }

.fa-snapchat:before {
  content: "\f2ab"; }

.fa-snapchat-ghost:before {
  content: "\f2ab"; }

.fa-fantasy-flight-games:before {
  content: "\f6dc"; }

.fa-rust:before {
  content: "\e07a"; }

.fa-wix:before {
  content: "\f5cf"; }

.fa-square-behance:before {
  content: "\f1b5"; }

.fa-behance-square:before {
  content: "\f1b5"; }

.fa-supple:before {
  content: "\f3f9"; }

.fa-webflow:before {
  content: "\e65c"; }

.fa-rebel:before {
  content: "\f1d0"; }

.fa-css3:before {
  content: "\f13c"; }

.fa-staylinked:before {
  content: "\f3f5"; }

.fa-kaggle:before {
  content: "\f5fa"; }

.fa-space-awesome:before {
  content: "\e5ac"; }

.fa-deviantart:before {
  content: "\f1bd"; }

.fa-cpanel:before {
  content: "\f388"; }

.fa-goodreads-g:before {
  content: "\f3a9"; }

.fa-square-git:before {
  content: "\f1d2"; }

.fa-git-square:before {
  content: "\f1d2"; }

.fa-square-tumblr:before {
  content: "\f174"; }

.fa-tumblr-square:before {
  content: "\f174"; }

.fa-trello:before {
  content: "\f181"; }

.fa-creative-commons-nc-jp:before {
  content: "\f4ea"; }

.fa-get-pocket:before {
  content: "\f265"; }

.fa-perbyte:before {
  content: "\e083"; }

.fa-grunt:before {
  content: "\f3ad"; }

.fa-weebly:before {
  content: "\f5cc"; }

.fa-connectdevelop:before {
  content: "\f20e"; }

.fa-leanpub:before {
  content: "\f212"; }

.fa-black-tie:before {
  content: "\f27e"; }

.fa-themeco:before {
  content: "\f5c6"; }

.fa-python:before {
  content: "\f3e2"; }

.fa-android:before {
  content: "\f17b"; }

.fa-bots:before {
  content: "\e340"; }

.fa-free-code-camp:before {
  content: "\f2c5"; }

.fa-hornbill:before {
  content: "\f592"; }

.fa-js:before {
  content: "\f3b8"; }

.fa-ideal:before {
  content: "\e013"; }

.fa-git:before {
  content: "\f1d3"; }

.fa-dev:before {
  content: "\f6cc"; }

.fa-sketch:before {
  content: "\f7c6"; }

.fa-yandex-international:before {
  content: "\f414"; }

.fa-cc-amex:before {
  content: "\f1f3"; }

.fa-uber:before {
  content: "\f402"; }

.fa-github:before {
  content: "\f09b"; }

.fa-php:before {
  content: "\f457"; }

.fa-alipay:before {
  content: "\f642"; }

.fa-youtube:before {
  content: "\f167"; }

.fa-skyatlas:before {
  content: "\f216"; }

.fa-firefox-browser:before {
  content: "\e007"; }

.fa-replyd:before {
  content: "\f3e6"; }

.fa-suse:before {
  content: "\f7d6"; }

.fa-jenkins:before {
  content: "\f3b6"; }

.fa-twitter:before {
  content: "\f099"; }

.fa-rockrms:before {
  content: "\f3e9"; }

.fa-pinterest:before {
  content: "\f0d2"; }

.fa-buffer:before {
  content: "\f837"; }

.fa-npm:before {
  content: "\f3d4"; }

.fa-yammer:before {
  content: "\f840"; }

.fa-btc:before {
  content: "\f15a"; }

.fa-dribbble:before {
  content: "\f17d"; }

.fa-stumbleupon-circle:before {
  content: "\f1a3"; }

.fa-internet-explorer:before {
  content: "\f26b"; }

.fa-stubber:before {
  content: "\e5c7"; }

.fa-telegram:before {
  content: "\f2c6"; }

.fa-telegram-plane:before {
  content: "\f2c6"; }

.fa-old-republic:before {
  content: "\f510"; }

.fa-odysee:before {
  content: "\e5c6"; }

.fa-square-whatsapp:before {
  content: "\f40c"; }

.fa-whatsapp-square:before {
  content: "\f40c"; }

.fa-node-js:before {
  content: "\f3d3"; }

.fa-edge-legacy:before {
  content: "\e078"; }

.fa-slack:before {
  content: "\f198"; }

.fa-slack-hash:before {
  content: "\f198"; }

.fa-medrt:before {
  content: "\f3c8"; }

.fa-usb:before {
  content: "\f287"; }

.fa-tumblr:before {
  content: "\f173"; }

.fa-vaadin:before {
  content: "\f408"; }

.fa-quora:before {
  content: "\f2c4"; }

.fa-square-x-twitter:before {
  content: "\e61a"; }

.fa-reacteurope:before {
  content: "\f75d"; }

.fa-medium:before {
  content: "\f23a"; }

.fa-medium-m:before {
  content: "\f23a"; }

.fa-amilia:before {
  content: "\f36d"; }

.fa-mixcloud:before {
  content: "\f289"; }

.fa-flipboard:before {
  content: "\f44d"; }

.fa-viacoin:before {
  content: "\f237"; }

.fa-critical-role:before {
  content: "\f6c9"; }

.fa-sitrox:before {
  content: "\e44a"; }

.fa-discourse:before {
  content: "\f393"; }

.fa-joomla:before {
  content: "\f1aa"; }

.fa-mastodon:before {
  content: "\f4f6"; }

.fa-airbnb:before {
  content: "\f834"; }

.fa-wolf-pack-battalion:before {
  content: "\f514"; }

.fa-buy-n-large:before {
  content: "\f8a6"; }

.fa-gulp:before {
  content: "\f3ae"; }

.fa-creative-commons-sampling-plus:before {
  content: "\f4f1"; }

.fa-strava:before {
  content: "\f428"; }

.fa-ember:before {
  content: "\f423"; }

.fa-canadian-maple-leaf:before {
  content: "\f785"; }

.fa-teamspeak:before {
  content: "\f4f9"; }

.fa-pushed:before {
  content: "\f3e1"; }

.fa-wordpress-simple:before {
  content: "\f411"; }

.fa-nutritionix:before {
  content: "\f3d6"; }

.fa-wodu:before {
  content: "\e088"; }

.fa-google-pay:before {
  content: "\e079"; }

.fa-intercom:before {
  content: "\f7af"; }

.fa-zhihu:before {
  content: "\f63f"; }

.fa-korvue:before {
  content: "\f42f"; }

.fa-pix:before {
  content: "\e43a"; }

.fa-steam-symbol:before {
  content: "\f3f6"; }