/* Gina-wide form density. The Terms screen's sizing is the canonical scale — every Gina window opts in with these classes instead of per-screen overrides. */ /* Side padding is a full 1rem for the same reason as the modal-body rule below: Falcon's .row gutters margin out up to -1rem, and thinner panel padding lets every bare row hang past the panel edge — the source of Gina's purposeless horizontal scrollbars. */ .gina-panel { padding: 0.35rem 1rem 0.75rem; font-size: 0.72rem; } /* Modal bodies keep Falcon's full 1rem gutter: Falcon's .row ignores Bootstrap's .g-* vars and margins out -0.5*--falcon-gutter-x (up to -1rem), so the thin .gina-panel padding lets rows hang past the body edge — content flush against the modal border plus a phantom horizontal scrollbar. */ .modal-body.gina-panel { padding: 0.75rem 1rem 1rem; } /* Read-only value rows (TIL Information): Bootstrap's plaintext control keeps 1rem text and .25rem padding, which drops values below their captions and off the density scale. Match the caption metrics so both sit on one baseline. */ .gina-panel .form-control-plaintext, .gina-panel .form-control-plaintext.form-control-sm { font-size: 0.72rem; padding: 0.1rem 0; min-height: 0; line-height: 1.35; } /* An rendered between .modal-dialog and .modal-content (the fee modals do this) becomes a flex item once the dialog is .modal-dialog-centered (display: flex). Flex items shrink-wrap instead of filling, so the whole modal box hugged the dialog's left edge while the dialog itself sat centered. Make the form fill like the .modal-content it wraps. */ .modal-dialog > form { width: 100%; } /* Center wizard modals over the content area instead of the viewport: the fixed left nav (--gina-nav-w, set on .gina-shell) makes a viewport-centered dialog read as shifted left — glaringly so for wide dialogs like the fee Details modals. Padding the modal's left edge by the nav width moves the margin-auto centering axis right by half of it, which lands the dialog on the content region's center. Skipped below 768px, where the nav becomes a horizontal top bar. */ @media (min-width: 769px) { .gina-shell .modal { padding-left: var(--gina-nav-w, 160px); } } /* Date-picker calendars (AidaInputDate / GinaInputDate) flip above their input when the popup would run off the bottom of the viewport; the components toggle this class. Also defined in AidaInputDate's style block, but that only ships when an AidaInputDate is rendered — this copy covers GinaInputDate-only screens. */ .date-input-container .dropdown-menu.aida-date-drop-up { top: auto; bottom: calc(100% + 0.25rem); } /* Aida's scroll containers opt into Falcon's `.scrollbar` class one by one (6px bar, transparent track, thumb that hides until you hover the container); Gina's hand-rolled containers never did, so they rendered the browser's stock wide light scrollbars. Apply Falcon's exact recipe to every scroll container inside the wizard shell instead of chasing each container for the class. */ .gina-shell ::-webkit-scrollbar { visibility: hidden; -webkit-appearance: none; width: 6px; height: 6px; background-color: transparent; } .gina-shell ::-webkit-scrollbar-thumb { visibility: hidden; border-radius: 3px; background-color: var(--falcon-scrollbar-bg); } .gina-shell :hover::-webkit-scrollbar, .gina-shell :hover::-webkit-scrollbar-thumb, .gina-shell :focus::-webkit-scrollbar, .gina-shell :focus::-webkit-scrollbar-thumb { visibility: visible; } /* Falcon guards the standard-property variant behind its .firefox class because in Chromium scrollbar-width/scrollbar-color would override the ::-webkit rules above. */ .firefox .gina-shell * { scrollbar-color: var(--falcon-scrollbar-bg) transparent; scrollbar-width: thin; } /* Date pickers inside fee/escrow tables (escrow Disbursements, HUD line 901's date range): .table-responsive's overflow-x:auto makes the browser compute overflow-y as auto too, so the calendar popup — rendered inside the table container — is clipped and spawns an inner scrollbar the moment it opens. These tables size their columns in percentages and fit their pane, so where a date input is present let the table overflow visibly; the pane itself still scrolls. */ .gina-panel .table-responsive:has(.date-input-container) { overflow: visible; } /* Clickable HUD-line numbers (btn-link) in the RESPA fee tables: Falcon's .btn pins its own 1rem font-size, so the clickable numbers tower over the plain row numbers on the density scale. Inherit the surrounding table's size instead. */ .gina-panel .fee-grid .btn-link { font-size: inherit; } /* Falcon ships no dark-theme rule for Bootstrap's .btn-close, leaving a black X on a dark modal header. Same trick as Bootstrap's .btn-close-white, keyed off the html.dark theme class. */ html.dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Bootstrap's form-control-sm is roomier than it looks, so squeeze inputs and selects screen-wide to fit whole windows without scrolling. */ .gina-panel .form-control, .gina-panel .form-select { font-size: 0.72rem; padding: 0.08rem 0.4rem; min-height: 0; height: auto; line-height: 1.35; } .gina-panel .form-select { padding-right: 1.4rem; background-position: right 0.35rem center; } /* Buttons and addons inside input groups (date pickers, calculators, sparkles) get the same squeeze so their rows match plain-input rows. */ .gina-panel .input-group .btn, .gina-panel .input-group .input-group-text { font-size: 0.72rem; padding: 0.08rem 0.4rem; min-height: 0; line-height: 1.35; } /* Standalone small buttons (Pick, Vesting Tool, Details, address copiers) match the input rows too — Bootstrap's btn-sm alone is a size up from the 0.72rem scale and towers over the fields beside it. */ .gina-panel .btn-sm { font-size: 0.72rem; padding: 0.08rem 0.5rem; min-height: 0; line-height: 1.35; } .gina-panel .form-check { font-size: 0.72rem; line-height: 1.35; } /* Inline suffix text ("at first adjustment.", "days", "% of") is markup-tagged .small across the Terms sub-windows, which lands at 0.875em of the density scale — visibly smaller than the row it belongs to. One scale everywhere. */ .gina-panel .small, .gina-panel small { font-size: 0.72rem; } /* The shared SignatureBlockEditor (Aida component) is compared side-by-side with its Aida rendering, so it opts OUT of the density squeeze entirely: restore Falcon's stock .form-control / .form-select metrics inside it. Values mirror theme.css. */ .gina-panel .gina-sigblock .form-control { font-size: 1rem; padding: 0.3125rem 1rem; line-height: 1.5; } .gina-panel .gina-sigblock .form-select { font-size: 1rem; padding: 0.3125rem 3rem 0.3125rem 1rem; line-height: 1.5; background-position: right 1rem center; } /* Falcon fixes form-check-label line-height at 1.45rem (sized for 1rem text), which leaves our 0.72rem labels floating in a too-tall box beside the box. Falcon also sizes bare label elements at 0.8333rem, so without the inherit every checkbox label renders a full size above its row — inherit picks up whatever scale the surrounding .form-check runs at (0.72rem here, 0.8333rem inside a gina-modal-form). */ .gina-panel .form-check-label { line-height: 1.35; font-size: inherit; } /* Bootstrap row/col form screens (Property, Parties) — labels match the grids. */ .gina-panel .col-form-label, .gina-panel .col-form-label-sm { font-size: 0.7rem; color: var(--falcon-700); padding-top: 0.1rem; padding-bottom: 0.1rem; } /* Tab strips inside a window (Parties, Property, credit bureaus). */ .gina-tabs .nav-link { font-size: 0.72rem; padding: 0.2rem 0.6rem; } /* Compact standalone button (Pick, Change, feature openers). */ .gina-btn { font-size: 0.7rem; padding: 0.1rem 0.5rem; line-height: 1.35; white-space: nowrap; } /* Theme tokens, not literals: the Falcon grey scale flips in dark mode, so var(--falcon-700) + white text washes out to white-on-light-grey there. The 200/800 pair reads as a soft header pill in both themes. */ .gina-section-bar { background: var(--falcon-200, #edf2f9); color: var(--falcon-800, #4d5969); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.22rem 0.55rem; border-radius: 4px; margin: 0 0 0.35rem; } .gina-section-bar--mid { margin-top: 0.5rem; } /* Column-header pill for the small input matrices (Buydown years, MI paid-by, reductions columns). Same theme-token pair as the section bar — hardcoded white text on a grey that flips light in dark mode is unreadable there. */ .gina-col-head { background: var(--falcon-200, #edf2f9); color: var(--falcon-800, #4d5969); font-weight: 600; text-align: center; padding: 0.1rem 0.3rem; border-radius: 3px; } /* Modern modal scale — Terms sub-windows opt in by adding this class to their EditForm. Falcon gives label and input elements Poppins at 0.8333rem while spans and divs inherit the Open Sans density size, so mixed rows read as two different fonts. Adopt the label font and size for the whole form. */ .gina-modal-form { font-family: var(--falcon-font-sans-serif); font-size: 0.8333rem; } .gina-modal-form .form-control, .gina-modal-form .form-select, .gina-modal-form .input-group .btn, .gina-modal-form .input-group .input-group-text, .gina-modal-form .form-check { font-size: 0.8333rem; } /* Inside a modern-scale form, .small stops shrinking (overrides the density pin above) so stray small text matches its row. */ .gina-modal-form .small, .gina-modal-form small { font-size: inherit; } /* Falcon's .form-check ships min-height and margins, and its labels a bottom margin — both make checkbox rows taller than bare rows and float their text above center. Reset so mixed rows share one rhythm. */ .gina-modal-form .form-check { margin-bottom: 0; min-height: 0; } .gina-modal-form .form-check-label { margin-bottom: 0; } .gina-modal-form .gina-section-bar { margin: 0.9rem 0 0.45rem; } /* Inline sentence text beside an input ("at first adjustment.", "days") and spans standing in for labels: mirror Falcon's label weight and tracking so they render identically to the label elements around them. */ .gina-modal-form .gina-suffix { font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; } /* Compact two-column label/input grid. Screens tune the label column with --gina-label-w rather than diverging on grid definitions. */ .gina-grid { display: grid; grid-template-columns: var(--gina-label-w, 8.25rem) 1fr; gap: 0.1rem 0.35rem; align-items: center; } .gina-grid > label { font-size: 0.7rem; color: var(--falcon-700); text-align: right; margin: 0; } .gina-grid > label.gina-link { color: var(--falcon-primary); text-decoration: underline; cursor: pointer; user-select: none; } .gina-grid > label.gina-link:hover { color: var(--falcon-blue, #0a58ca); } /* Every single-value input fills its grid cell so inputs are uniform width across columns; inputs sharing a row flex beside their suffix or button. */ .gina-grid > .combobox-container, .gina-grid > .combobox-container .input-group, .gina-grid > .d-flex { min-width: 0; width: 100%; } .gina-grid > .d-flex > .combobox-container { flex: 1 1 auto; min-width: 0; } /* Dense input tables (Closing matrices). Scoped under .gina-panel so the cell padding beats Bootstrap's .table > :not(caption) > * > * without !important. */ .gina-panel .gina-matrix td, .gina-panel .gina-matrix th { padding: 2px 4px; vertical-align: middle; } .gina-panel .gina-matrix .form-control, .gina-panel .gina-matrix .form-select { padding: 1px 4px; height: auto; } /* Review List: reviewers scan long findings text and comments at a glance, so this table opts out of the 0.72rem density scale. Fixed layout splits the width after the Finding column evenly between Description and Comment. */ .gina-panel .gina-reviewlist-table { table-layout: fixed; font-size: 0.8rem; } .gina-panel .gina-reviewlist-table .form-control, .gina-panel .gina-reviewlist-table .form-select { font-size: 0.8rem; } .gina-panel .gina-reviewlist-comments { resize: vertical; line-height: 1.35; } @media (max-width: 575.98px) { .gina-grid { grid-template-columns: 1fr; gap: 0.3rem; } .gina-grid > label { text-align: left; } }