/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The app's form fields. Scoped away from the public pages: everything wearing
   the marketing layout - the landing pages, sign in, sign up, password reset,
   the invitation and two-factor screens, the feedback form - is designed in the
   public look and asks for it in its own classes. These rules were overriding
   all of that, so a page written as `rounded-xl border-gray-200 bg-gray-50`
   rendered as a grey box with a black border. */
body:not(.marketing-page) input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body:not(.marketing-page) select {background: #e5e5e5; border: 1px solid black;}


/* 2px corner radius app-wide on buttons and form fields: real <button>/<input>
   buttons, the btn-* component classes, anchors styled as buttons (a bg-* fill
   plus px-* padding), and all text-entry fields. Overrides any per-view
   rounded-* utility so every control shares the same radius. Checkboxes and
   radios keep their native shape. */
body:not(.marketing-page) button,
body:not(.marketing-page) input[type="submit"],
body:not(.marketing-page) input[type="button"],
body:not(.marketing-page) input[type="reset"],
body:not(.marketing-page) a[class*="px-"][class*="bg-"],
body:not(.marketing-page) .btn-primary,
body:not(.marketing-page) .btn-secondary,
body:not(.marketing-page) .btn-danger {
  border-radius: 2px !important;
}
body:not(.marketing-page) input:not([type="checkbox"]):not([type="radio"]),
body:not(.marketing-page) select,
body:not(.marketing-page) textarea,
body:not(.marketing-page) trix-editor {
  border-radius: 2px !important;
}
body:not(.marketing-page) input[type="file"]::file-selector-button { border-radius: 2px; }


/* --------------------------------------------------------------------------------
 COLLAPSIBLE REPORT NAV  (toggled by sidebar_controller via .sidebar-collapsed on <html>)
 --------------------------------------------------------------------------------*/
#report-nav { transition: width 0.15s ease; }
#action-bar { transition: left 0.15s ease; }
#demo-banner { transition: left 0.15s ease; }
main { transition: padding-left 0.15s ease; }
.page-inner, .report-filter { transition: margin-left 0.15s ease; }

.sidebar-collapsed #report-nav { width: 64px; }
.sidebar-collapsed #report-nav .nav-collapsible { display: none !important; }
.sidebar-collapsed #report-nav .nav-header { justify-content: center; }
.sidebar-collapsed #report-nav .nav-item {
  width: 52px;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}
.sidebar-collapsed #report-nav .nav-user {
  width: 52px;
  padding-left: 2px;
  padding-right: 2px;
}

/* The listings' pagination bar, pinned to the foot of the screen.

   It used to follow the last row, so its height on the page was a function of
   how many ledgers the firm had and which page you were on - the last page of a
   list is rarely a full one, and the row of numbers you were about to click
   moved up the screen as you paged towards it. Fixed, it is in the same place
   every time, which is the whole point of it.

   left matches main's padding rather than #action-bar's offset: this sits under
   the content, not over the rail, and follows the rail in when it collapses.

   The legal strip is also fixed along the bottom (shared/_legal_footer), 20px
   tall and hard right, at z-50. This sits below it in the stack and keeps its
   own content to the left, so the two do not fight over the corner. */
.listing-pagination {
  position: fixed;
  left: 260px;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1.5rem;
  background-color: var(--theme-surface);
  border-top: 1px solid #e5e7eb; /* gray-200 */
  transition: left 0.15s ease;   /* with the rail, not after it */
}
.sidebar-collapsed .listing-pagination { left: 84px; }
@media print { .listing-pagination { display: none; } }

/* Room under the last row for the bar, plus the legal strip's 20px. */
.listing-with-pagination { padding-bottom: 5rem; }

/* Shift the page content over to meet the narrowed rail */
.sidebar-collapsed #action-bar { left: 64px; }
.sidebar-collapsed #demo-banner { left: 64px; }
.sidebar-collapsed main { padding-left: 84px; }
.sidebar-collapsed .page-inner { margin-left: 96px; }
.sidebar-collapsed .report-filter { margin-left: 96px; }

/* The toggle chevron points the other way once collapsed */
.sidebar-collapsed #report-nav .nav-toggle svg { transform: rotate(180deg); }

/* Sidebar "Recents" disclosure (a native <details> under Client Ledgers List):
   drop the browser's default triangle marker so the row matches the other nav
   items, and point our own chevron down while it's open. */
#report-nav .nav-recents > summary { list-style: none; }
#report-nav .nav-recents > summary::-webkit-details-marker { display: none; }
#report-nav .nav-recents[open] > summary .nav-recents-chevron { transform: rotate(90deg); }

/* --------------------------------------------------------------------------------
 MODERN THEMES: collapsible nav sections
 --------------------------------------------------------------------------------*/
/* Shortcut keys now show in modern themes too (small, far-right of each nav
   item) - visibility is governed by the user's hide-shortcuts preference via
   hotkey_hint, not the theme. */

/* Section headers are inert by default; the chevron only shows (and the header
   becomes clickable) on the modern themes, where nav_section_controller runs. */
#report-nav .nav-section-chevron { display: none; }
[data-theme^="modern"] #report-nav .nav-section-chevron { display: block; }
[data-theme^="modern"] #report-nav .nav-section-header { cursor: pointer; }
[data-theme^="modern"] #report-nav .nav-section-open .nav-section-chevron { transform: rotate(90deg); }

/* --------------------------------------------------------------------------------
 MODERN THEMES: light/dark toggle in the action bar
 --------------------------------------------------------------------------------*/
/* A two-segment switch: both icons ship in the markup and the one for the theme
   you are *in* is picked out with a white pill. Doing it in CSS off the
   data-theme attribute keeps it correct after a Turbo navigation without any JS,
   and means the theme-toggle controller only has to move that attribute.

   The old form showed a single icon of the theme you'd switch *to*, which had
   to be read twice - a moon meant "you are in light". A switch just shows you
   where you are. */
/* The track has rounded corners, not pill ends. A rounded-* utility on the
   element loses to the 2px radius this file pins every <button> to further up,
   and so did the plain `.theme-toggle` this rule used to be - that rule is
   !important too and outscores a lone class, so the track came out at 2px and
   read as square. Matching its selector shape is what actually answers it. */
body:not(.marketing-page) button.theme-toggle { border-radius: 8px !important; }
.theme-toggle-seg { transition: background-color 150ms ease, box-shadow 150ms ease; }
[data-theme="modern-light"] .theme-toggle-sun,
[data-theme="modern-dark"] .theme-toggle-moon {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
/* The dark track needs its own greys, or the pill and the icons on it vanish. */
[data-theme="modern-dark"] .theme-toggle { background: #334155; }
[data-theme="modern-dark"] .theme-toggle-seg { color: #cbd5e1; }
[data-theme="modern-dark"] .theme-toggle-moon { background: #0f172a; color: #f1f5f9; }
.theme-toggle:hover .theme-toggle-seg svg { transform: scale(1.1); }
.theme-toggle svg { transition: transform 200ms ease; }

/* Modern-dark CRUD/admin pages: a dark canvas (lighter than the #0f172a sidebar)
   with slightly-lighter cards and light text. Scoped to <main>, so only the
   application/listing layouts go dark - reports render in their own layout and
   stay light. Selectors are more specific than the Tailwind utilities they
   override, so no !important is needed. */
[data-theme="modern-dark"] main { background-color: #1e293b; color: #f1f5f9; }
[data-theme="modern-dark"] main .bg-white { background-color: #334155; }
[data-theme="modern-dark"] main .bg-gray-50,
[data-theme="modern-dark"] main .bg-gray-100 { background-color: #2b3a52; }
[data-theme="modern-dark"] main .border-gray-200,
[data-theme="modern-dark"] main .border-gray-300,
[data-theme="modern-dark"] main .border-gray-400 { border-color: #475569; }
[data-theme="modern-dark"] main .text-gray-900,
[data-theme="modern-dark"] main .text-gray-800,
[data-theme="modern-dark"] main .text-gray-700,
[data-theme="modern-dark"] main .text-black,
/* The blue used for headings on these pages - the Changelog's dates are the
   ones you notice. It is a near-black navy chosen against a white card, and on
   the dark canvas it all but disappeared. Scoped to <main>, so the reports keep
   their blue headings: they draw on a white page whichever theme is on. */
[data-theme="modern-dark"] main .text-blue-900 { color: #f1f5f9; }
[data-theme="modern-dark"] main .text-gray-600,
[data-theme="modern-dark"] main .text-gray-500,
[data-theme="modern-dark"] main .text-gray-400 { color: #cbd5e1; }
/* Darker error / selection / status highlights so they sit on the dark canvas
   (companies listing: selected row is yellow, error row is red). */
[data-theme="modern-dark"] main .bg-yellow-100,
[data-theme="modern-dark"] main .bg-yellow-200 { background-color: #7a5310; }
[data-theme="modern-dark"] main .bg-blue-50 { background-color: #000000; } /* firms listing: selected row */
[data-theme="modern-dark"] main .hover\:bg-gray-50:hover { background-color: #000000; } /* e.g. company-name hover */
/* Report Packs rows. Needs its own value: the utility above is only mapped for
   bg-gray-50, so an unmapped hover:bg-gray-100 would paint a near-white band
   across the row on the dark canvas. Kept close to the canvas so it reads as a
   pointer, not a selection. */
[data-theme="modern-dark"] main .hover\:bg-gray-100:hover { background-color: #2f3f57; }
[data-theme="modern-dark"] main .bg-red-50,
[data-theme="modern-dark"] main .bg-red-100 { background-color: #7f1d1d; }
[data-theme="modern-dark"] main .bg-green-100 { background-color: #14532d; }
[data-theme="modern-dark"] main .text-red-500,
[data-theme="modern-dark"] main .text-red-700 { color: #fca5a5; }
[data-theme="modern-dark"] main .text-green-700 { color: #86efac; }
/* Black form fields with light text (the :not chain mirrors the base input rule
   above so this wins on specificity; checkboxes/radios are left alone). */
[data-theme="modern-dark"] main input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="modern-dark"] main textarea,
[data-theme="modern-dark"] main select {
  background-color: #000000;
  color: #f1f5f9;
  border-color: #475569;
  color-scheme: dark; /* render the native dropdown list / arrow dark too */
}
[data-theme="modern-dark"] main input::placeholder,
[data-theme="modern-dark"] main textarea::placeholder { color: #94a3b8; }
/* Rich-text (Trix) editor: black field with light text; invert the toolbar
   icons so they stay visible on the dark surface. */
[data-theme="modern-dark"] main trix-editor,
[data-theme="modern-dark"] main .trix-content {
  background-color: #000000;
  color: #f1f5f9;
  border-color: #475569;
}
[data-theme="modern-dark"] main trix-toolbar .trix-button { filter: invert(1); }

/* Modern-dark action-bar buttons (Refresh, PDF, Changelog, Help, Save, etc):
   a much darker background with a white outline instead of bright fills. */
[data-theme="modern-dark"] #action-bar .bg-primary-button,
[data-theme="modern-dark"] #action-bar .bg-accent,
[data-theme="modern-dark"] #action-bar .bg-blue-600,
[data-theme="modern-dark"] #action-bar .bg-green-700,
[data-theme="modern-dark"] #action-bar .bg-gray-100,
[data-theme="modern-dark"] #action-bar .btn-primary,
[data-theme="modern-dark"] #action-bar .btn-secondary {
  background-color: #0a0a0a;
  border: 1px solid #ffffff;
  color: #ffffff;
}
[data-theme="modern-dark"] #action-bar .bg-primary-button:hover,
[data-theme="modern-dark"] #action-bar .bg-accent:hover,
[data-theme="modern-dark"] #action-bar .bg-blue-600:hover,
[data-theme="modern-dark"] #action-bar .bg-green-700:hover,
[data-theme="modern-dark"] #action-bar .bg-gray-100:hover,
[data-theme="modern-dark"] #action-bar .btn-primary:hover,
[data-theme="modern-dark"] #action-bar .btn-secondary:hover,
[data-theme="modern-dark"] #action-bar .hover\:bg-gray-50:hover {
  background-color: #1f2937;
}

/* Back controls app-wide: a plain underlined black link with the esc <kbd>
   hint shown beside it - identical on every theme and page (the static
   privacy/license pages in public/ carry a matching copy of this style).
   On modern-dark's dark surfaces the text flips to light for legibility. */
.back-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.back-btn:hover {
  background: transparent;
  text-decoration: none;
}

/* The same unbutton, for an action inside a row rather than above a page.
   The Chart of Accounts' "+ Sub", "Edit" and the filter row's "Clear".

   These were btn-secondary chips. Three bordered boxes in every row of a table
   hundreds of rows long is a wall of buttons, and it got heavier when every
   button in the app went to a flat 40px: the chips grew with them and took the
   rows from 26px to 54, so a chart that used to show forty accounts showed
   twenty. A row action is a thing you click occasionally on the one row you are
   looking at, and a link says that at a fraction of the weight.

   No font-size, unlike .back-btn: these take the size of the row they sit in,
   which on the Chart of Accounts is text-xs. Nothing sets a height, so they
   drop out of the 40px button rule - the rule reaches btn-primary/secondary/
   danger, and these are none of those. That is the point of them. */
.btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: #000000;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover {
  background: transparent;
  text-decoration: none;
}
[data-theme="modern-dark"] main .btn-link { color: #f1f5f9; }

/* An icon doing a button's job, in the danger colour - the Chart of Accounts'
   Delete. The word was the widest thing in the row's action column and the
   only red box on the page, which gave the least-used action of the three the
   most weight. The bin says it in an icon's width.

   It keeps the red: this is the one row action that cannot be undone, and
   dropping it to a link like the two beside it would lose the only warning the
   row carries. line-height: 0 so the box is the icon's height and not a text
   line's. */
.btn-icon-danger {
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 0;
  color: var(--theme-danger-button);
  cursor: pointer;
}
.btn-icon-danger:hover { color: var(--theme-danger-button-hover); }

/* The same button in the two other colours the Chart of Accounts row needs:
   a tick to save an inline edit and a cross to abandon it. Two words in boxes
   were wider than the row's action column and pushed Delete out of line; a
   tick and a cross say the same thing in the space an icon takes, and read
   the same way round as the bin beside them. */
.btn-icon-confirm,
.btn-icon-cancel {
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}
.btn-icon-confirm { color: #16a34a; }
.btn-icon-confirm:hover { color: #15803d; }
.btn-icon-cancel { color: #64748b; }
.btn-icon-cancel:hover { color: #334155; }
[data-theme="modern-dark"] main .btn-icon-cancel { color: #cbd5e1; }

/* Folding a parent's sub-accounts away on the Chart of Accounts. Its own class
   rather than `hidden`, because the search filter owns that one and a row can
   be out of the results and folded away at once. The chevron is the sidebar's,
   and turns the same way. */
.account-folded { display: none !important; }
.account-chevron { transition: transform 150ms ease; }
.account-chevron-open { transform: rotate(90deg); }

/* Rows picked out with ctrl-click, to be dragged together. The bar down the
   left is what carries at a glance on a chart hundreds of rows long - a tint
   alone is hard to tell from the white/grey banding underneath it, which is
   also why the tint has to win over that banding. */
.account-selected {
  background-color: #dbeafe !important;
  box-shadow: inset 3px 0 0 0 #2563eb;
}
[data-theme="modern-dark"] main .account-selected { background-color: #1e3a5f !important; }

/* Dragging an account onto a new parent. Into the middle of a row files it
   under that account; the line at the top or bottom edge files it beside. */
.account-dragging { opacity: 0.45; }
.account-drop-into { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 4px; }
.account-drop-beside { box-shadow: inset 0 2px 0 0 #2563eb; }
[data-theme="modern-dark"] #action-bar .back-btn,
[data-theme="modern-dark"] main .back-btn { color: #f1f5f9; }

/* Modern themes use Inter, which ships proper normal/bold weights (the joe
   theme keeps Open Sans). Selectors beat the base `html, body` rule in report.css. */
[data-theme^="modern"],
[data-theme^="modern"] body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
/* …but reports do not follow the theme's font. They print in whatever the
   business (or the ledger) chose - see ReportFonts and shared/_report_font -
   defaulting to the original joe font, so output is unchanged for anyone who
   has not set one. .page-inner wraps the whole report (header + body) on
   every theme.
   Carries the same fallbacks as the base rule in report.css - see the note
   there for why a report of all things must not drop through to a serif. */
[data-theme^="modern"] .page-inner { font-family: var(--report-font, "Open Sans", ui-sans-serif, system-ui, sans-serif); }

/* Roomier vertical rhythm on the modern themes (item widths are left untouched
   so the fixed 220px rail / collapsed rail still line up). */
[data-theme^="modern"] #report-nav .nav-item { padding-top: 0.35rem; padding-bottom: 0.35rem; margin-top: 0.2rem; }

/* Indent items within a collapsible section so they read as sub-items under the
   heading (modern themes, expanded rail only - the collapsed icon rail keeps its
   centred items). */
html[data-theme^="modern"]:not(.sidebar-collapsed) #report-nav [data-nav-section-target="body"] .nav-item { padding-left: 22px; }
[data-theme^="modern"] #report-nav .nav-section-header { margin-top: 0.85rem; margin-bottom: 0.3rem; }
[data-theme^="modern"] #report-nav .nav-user { margin-bottom: 0.6rem; }

a {text-decoration:none;}

/* The source column holds "QuickBooks" spelled out in full (Intuit's naming
   rules don't allow abbreviating it), so it needs more room than the other
   short columns - hence 6.5rem here and at every breakpoint below where it's
   still visible. The actions column carries "Disconnect" for the same reason.

   The Name column is the 4th track and is the one the row is read by, so it has
   a 250px floor at every breakpoint. It has to be written as minmax() here
   rather than as a min-width on the cell: the cell carries min-w-0 so its name
   can truncate, and in any case a flexible track is what decides the width. If
   the window gets narrow enough that the tracks no longer fit, the grid scrolls
   sideways and the other columns give way first. */
.companies-grid {
  grid-template-columns: 2.5rem 7rem 4rem minmax(250px, 1.5fr) 6rem 8.5rem 5rem 6.5rem 4rem 4rem 6.5rem 6.5rem 18rem;
}

.companies-grid .col-code,
.companies-grid .col-client-type,
.companies-grid .col-business,
.companies-grid .col-period,
.companies-grid .col-source,
.companies-grid .col-group,
.companies-grid .col-turnover {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Status and Issues pills. A shared class keeps every pill the same shape and
   width so they line up in a column. min-width is sized to the widest label in
   use ("disconnected" / "warnings: NN"); the colour is set per-pill inline.

   Shape only - no colour. The pills that stay a solid state colour carry their
   own fill and text-white; the ones that took a badge state (errors, warnings,
   a stale Synced) take both from --theme-badge-*, and a white declared here
   would have won over the badge class and left light text on a light chip. This
   file is unlayered, and unlayered beats @layer components whatever the order. */
.ledger-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 6rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

/* The same pill inline in a report, beside an account name rather than in a
   column of its own - the Trial Balance's Error and Warning flags.

   Everything that makes it a pill stays: the shape, the type, and the two badge
   states meaning what they mean on the listing. What comes off is the column
   sizing. min-width above is there to line a column of pills
   up with each other, which is worth 6rem when they sit under one another and
   nothing at all when they follow a name of any length - it just padded a
   five-letter word out to 96px in the middle of a row of figures.

   Smaller with it, because a flag on a page of numbers should be readable
   without being the first thing on the line you look at. */
.ledger-pill-sm {
  /* inline-block, not the inline-flex above, and this is load-bearing rather
     than tidying. The pill is bound to the account name by a non-breaking space
     so it cannot wrap away from it (see trial_balance_status_flag), which means
     that when the name nearly fills the column the pill has to fit in whatever
     is left of the line. An inline-flex box shrinks to that space and lets its
     own text overflow - centred, so "Warning" came out clipped to "rning" at
     both ends. An inline-block sizes to its content and refuses to shrink, so
     the name-and-pill unit moves to the next line whole instead. */
  display: inline-block;

  /* Both labels to the width of the wider one, so an Error and a Warning are
     the same size wherever they fall down the report - the same reason the
     listing's pill carries a min-width, sized here to "Warning" rather than to
     a column of status text. A red pill visibly smaller than the orange one
     beside it reads as the lesser of the two, which is backwards.

     text-align because this is an inline-block: the justify-content on
     .ledger-pill centres the label of a flex box, and does nothing here, so
     "Error" would sit against the left edge of the wider box without it. */
  min-width: 3.5rem;
  text-align: center;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  line-height: 0.95rem;

  /* The account name column hangs its wrapped lines on a negative text-indent,
     and text-indent inherits into every block container inside it - which an
     inline-block is. The pill was taking the cell's -18px as its own, drawing
     its label 18px to the left of its fill and shrinking its box by the same
     18px: "Warning" came out as a 35px pill reading "rning", "Error" as a 19px
     one reading "or". Nothing to do with the pill's own size; it just has to
     say it does not want the indent. */
  text-indent: 0;
}

@media (max-width: 1500px) {
  .companies-grid {
    grid-template-columns: 2.5rem 7rem 4rem minmax(250px, 1.5fr) 6rem 6.5rem 4rem 4rem 6.5rem 6.5rem 18rem;
  }
  .companies-grid .col-business,
  .companies-grid .col-period {
    display: none;
  }
}

@media (max-width: 1250px) {
  .companies-grid {
    grid-template-columns: 2.5rem 7rem 4rem minmax(250px, 1.5fr) 6.5rem 4rem 4rem 6.5rem 6.5rem 18rem;
  }
  .companies-grid .col-client-type,
  .companies-grid .col-business,
  .companies-grid .col-period {
    display: none;
  }
}

@media (max-width: 1050px) {
  .companies-grid {
    grid-template-columns: 2.5rem 7rem 5rem minmax(250px, 1fr) 16rem;
  }
  .companies-grid .col-client-type,
  .companies-grid .col-business,
  .companies-grid .col-period,
  .companies-grid .col-source,
  .companies-grid .col-group,
  .companies-grid .col-turnover,
  .companies-grid .col-status,
  .companies-grid .col-issues {
    display: none;
  }
}

@media (max-width: 900px) {
  /* Name is the only column left here, so the floor is really only doing
     anything on a very narrow phone - but it is the same floor as above. */
  .companies-grid {
    grid-template-columns: minmax(250px, 1fr);
  }
  .companies-grid .col-checkbox,
  .companies-grid .col-select,
  .companies-grid .col-code,
  .companies-grid .col-client-type,
  .companies-grid .col-business,
  .companies-grid .col-period,
  .companies-grid .col-source,
  .companies-grid .col-group,
  .companies-grid .col-turnover,
  .companies-grid .col-status,
  .companies-grid .col-issues,
  .companies-grid .col-actions {
    display: none;
  }
}
