/* Fonts are loaded from the HTML with preconnect + , not an @import here: @import chains a second request and blocks rendering. For production, SELF-HOST Inter — hotlinking Google Fonts has drawn GDPR complaints in the EU and you serve UK and EU advisers. Inter Tight is a second family you can drop if you want one fewer request. */ /* ========================================================================== GrowthWorkbook — gw5-theme.css Design layer on top of Bootstrap 5.3.x WHAT THIS IS A full design system for a 2026-era SaaS product, expressed as Bootstrap 5.3 custom-property overrides plus a component layer for the parts Bootstrap does not ship (stepper, question list, stat tiles, charts, app shell). WHAT THIS IS NOT A drop-in for the current app. Bootstrap 5 renames the class contract, so the .aspx markup has to change with it. The migration map is in the notes at the bottom of this file. USAGE ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ /* ============================================================================ CHROME COLOURS — the knobs. Change these four lines and the whole top bar and sidebar move with them. Everything else in the chrome (hovers, borders, raised fields) is mixed off these, so you do not have to hand-pick a set. Why the two bars differ: pixel-identical navy fused them into one L-shaped block. The sidebar is the deeper of the two because it is the base the nav items sit on, and because it measures better — against the sidebar, muted labels go from 5.27:1 to 5.71:1 and the sidebar/content edge from 15.97:1 to 17.30:1. (The alternative, a darker top bar, pushed muted labels down to 4.77:1, just over the 4.5 AA floor.) Perceptual step is ΔL* 7.6. These sit outside the light/dark blocks on purpose: the chrome is brand furniture and stays put when the content area flips to dark. ========================================================================= */ :root { --gw-topbar-bg: #16233F; /* raised global layer */ --gw-sidebar-bg: #0B1426; /* deeper nav base */ --gw-nav-active-bg: #1C2E50; /* selected nav item */ --gw-signin-bg: #0B1426; /* sign-in page canvas */ } :root, [data-bs-theme="light"] { color-scheme: light; /* neutrals */ --gw-bg: #F7F8FA; --gw-surface: #FFFFFF; --gw-surface-2: #FBFCFD; --gw-surface-3: #F2F4F7; --gw-line: #E4E7EC; --gw-line-strong: #D0D5DD; --gw-ink: #101828; --gw-ink-2: #475467; --gw-muted: #667085; --gw-faint: #98A2B3; /* DECORATIVE ICONS ONLY — 2.58:1 on white, so it never carries text; text uses --gw-muted */ --gw-head-bg: #E9EFF6; /* card / panel header band: 1.13:1 on white, a visible band; the title stays 16.1:1 on it */ --gw-head-line: #CBD5E1; /* Edges of things you type into or click: inputs, selects, file pickers, outline buttons. --gw-line (#E4E7EC) is 1.24:1 on white - fine for a divider, invisible as a text box ("I can't see the New Folder input"). WCAG 1.4.11 asks 3:1 for a control's boundary. Measured: #868E9E 3.29 white . 3.21 on #FBFCFD (modal footer) . 3.10 on #F7F8FA #667085 4.97 white (hover) */ --gw-control-line: #868E9E; --gw-control-line-hover: #667085; /* Interactive accent — the same blue the charts use, deliberately. #2a78d6 is 4.42:1 on white and 4.16:1 on the page background, so it is a MARK colour only. Anything that carries text, or is filled under white text, uses --gw-accent-strong (5.50:1). Same split as --gw-brand-btn. */ --gw-accent: #2a78d6; --gw-accent-strong: #2468C0; --gw-on-accent: #FFFFFF; --gw-accent-hover: #1E5CA8; --gw-accent-tint: #EDF4FD; --gw-accent-line: #C6DCF7; /* brand green, from the logo ring — status + primary sign-in only */ --gw-brand: #12A150; /* the logo green — status text, marks */ --gw-brand-btn: #0F8542; /* button FILL only: white on #12A150 is 3.37:1, under the 4.5 AA floor; this is 4.71:1 */ --gw-brand-hover: #0C6F37; --gw-brand-tint: #E9F9F0; --gw-brand-line: #BFE8D0; /* status */ --gw-danger: #d03b3b; --gw-danger-tint: #FDF0F0; --gw-danger-line: #F3CDCD; --gw-warn: #B54708; --gw-warn-tint: #FEF6E8; --gw-warn-line: #F6DBAE; /* solid action — near-black primary is the 2026 default */ --gw-solid: #101828; --gw-solid-hover: #23304A; --gw-solid-ink: #FFFFFF; /* chart roles (validated — see notes) */ --viz-surface: #FFFFFF; --viz-series: #2a78d6; --viz-series-wash: rgba(42,120,214,.12); --viz-pos: #2a78d6; --viz-mid: #C9CCD4; --viz-neg: #d03b3b; --viz-grid: #EAECF0; --viz-axis: #D0D5DD; --viz-ink-muted: #667085; /* elevation */ --gw-shadow-xs: 0 1px 2px rgba(16,24,40,.05); --gw-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.06); --gw-shadow-md: 0 2px 4px -2px rgba(16,24,40,.06), 0 12px 24px -8px rgba(16,24,40,.10); --gw-shadow-lg: 0 8px 12px -6px rgba(16,24,40,.06), 0 32px 64px -16px rgba(16,24,40,.18); --gw-ring: 0 0 0 4px rgba(42,120,214,.16); /* type */ --gw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --gw-display: 'Inter Tight', 'Inter', system-ui, sans-serif; /* geometry */ --gw-r-xs: 6px; --gw-r-sm: 8px; --gw-r: 10px; --gw-r-md: 14px; --gw-r-lg: 18px; --gw-sidebar-w: 260px; --gw-rail-w: 64px; /* collapsed sidebar */ --gw-topbar-h: 60px; } [data-bs-theme="dark"] { color-scheme: dark; --gw-bg: #0B0E14; --gw-surface: #161A21; --gw-surface-2: #1A1F27; --gw-surface-3: #20262F; --gw-line: #252B36; --gw-line-strong: #333B48; --gw-ink: #F2F4F7; --gw-ink-2: #B0B9C6; --gw-muted: #8B95A5; --gw-faint: #8B95A5; /* 5.76:1 on the dark surface (was #667085, 3.18:1) */ --gw-head-bg: #202836; --gw-head-line: #333B48; /* #646E80 3.39 on #161A21 . 3.22 on #1A1F27 ; hover #8B95A5 */ --gw-control-line: #646E80; --gw-control-line-hover: #8B95A5; --gw-accent: #3987e5; --gw-accent-strong: #3987E5; --gw-on-accent: #0B0E14; /* dark ink on the dark-mode blue = 5.31:1 */ --gw-accent-hover: #5598e7; --gw-accent-tint: #16223A; --gw-accent-line: #274063; --gw-brand: #16B85C; --gw-brand-btn: #12934A; --gw-brand-hover: #0F7C3E; --gw-brand-tint: #0F2419; --gw-brand-line: #1D4430; --gw-danger: #E36565; --gw-danger-tint: #2B1618; --gw-danger-line: #4D2427; --gw-warn: #E8A33D; --gw-warn-tint: #2A1F10; --gw-warn-line: #4A3518; --gw-solid: #F2F4F7; --gw-solid-hover: #FFFFFF; --gw-solid-ink: #0B0E14; --viz-surface: #161A21; --viz-series: #3987e5; --viz-series-wash: rgba(57,135,229,.16); --viz-pos: #3987e5; --viz-mid: #3A414E; --viz-neg: #d03b3b; --viz-grid: #232932; --viz-axis: #333B48; --viz-ink-muted: #8B95A5; --gw-shadow-xs: 0 1px 2px rgba(0,0,0,.40); --gw-shadow-sm: 0 1px 2px rgba(0,0,0,.44), 0 1px 3px rgba(0,0,0,.34); --gw-shadow-md: 0 2px 4px -2px rgba(0,0,0,.42), 0 12px 24px -8px rgba(0,0,0,.46); --gw-shadow-lg: 0 8px 12px -6px rgba(0,0,0,.40), 0 32px 64px -16px rgba(0,0,0,.60); --gw-ring: 0 0 0 4px rgba(57,135,229,.24); } /* -------------------------------------------------------------------------- 2. BOOTSTRAP VARIABLE BRIDGE Remap Bootstrap's own custom properties so stock components inherit the system without being restyled one by one. -------------------------------------------------------------------------- */ :root { --bs-body-font-family: var(--gw-font); --bs-body-font-size: .9375rem; --bs-body-line-height: 1.6; --bs-body-color: var(--gw-ink-2); --bs-body-bg: var(--gw-bg); --bs-emphasis-color: var(--gw-ink); --bs-secondary-color: var(--gw-muted); --bs-tertiary-color: var(--gw-muted); --bs-border-color: var(--gw-line); --bs-border-radius: var(--gw-r); --bs-border-radius-sm: var(--gw-r-sm); --bs-border-radius-lg: var(--gw-r-md); --bs-border-radius-xl: var(--gw-r-lg); --bs-link-color: var(--gw-accent); --bs-link-color-rgb: 42, 120, 214; --bs-link-hover-color: var(--gw-accent-hover); --bs-primary: var(--gw-accent); --bs-focus-ring-color: transparent; --bs-focus-ring-width: 0; } [data-bs-theme="dark"] { --bs-link-color-rgb: 57, 135, 229; } /* Stock Bootstrap components read the *-rgb pair, not --bs-primary, so .text-primary, .bg-primary, .badge.bg-primary and .link-primary were still painting Bootstrap's own #0d6efd. The compiled defaults for pagination, nav-pills, list-group and progress were untouched too. .btn-info and .btn-warning are themed because surveyreport.aspx uses them today. */ :root { --bs-primary-rgb: 36, 104, 192; --bs-link-color-rgb: 36, 104, 192; --bs-link-hover-color-rgb: 30, 92, 168; } [data-bs-theme="dark"] { --bs-primary-rgb: 57, 135, 229; --bs-link-color-rgb: 57, 135, 229; --bs-link-hover-color-rgb: 125, 176, 240; } .pagination { --bs-pagination-color: var(--gw-accent-strong); --bs-pagination-bg: var(--gw-surface); --bs-pagination-border-color: var(--gw-line); --bs-pagination-hover-bg: var(--gw-surface-3); --bs-pagination-active-bg: var(--gw-accent-strong); --bs-pagination-active-border-color: var(--gw-accent-strong); } .nav-pills { --bs-nav-pills-link-active-bg: var(--gw-accent-strong); } .list-group { --bs-list-group-active-bg: var(--gw-accent-strong); --bs-list-group-active-border-color: var(--gw-accent-strong); } .progress { --bs-progress-bar-bg: var(--gw-accent-strong); } .btn-info { --bs-btn-bg: var(--gw-surface); --bs-btn-border-color: var(--gw-line-strong); --bs-btn-color: var(--gw-ink-2); --bs-btn-hover-bg: var(--gw-surface-3); --bs-btn-hover-border-color: var(--gw-line-strong); --bs-btn-hover-color: var(--gw-ink); } .btn-warning { --bs-btn-bg: var(--gw-surface); --bs-btn-border-color: var(--gw-line-strong); --bs-btn-color: var(--gw-ink-2); --bs-btn-hover-bg: var(--gw-surface-3); --bs-btn-hover-border-color: var(--gw-line-strong); --bs-btn-hover-color: var(--gw-ink); } /* -------------------------------------------------------------------------- 3. BASE + TYPE -------------------------------------------------------------------------- */ body { font-family: var(--gw-font); background: var(--gw-bg); color: var(--gw-ink-2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv05' 1, 'ss03' 1; } h1, h2, h3, .gw-display { font-family: var(--gw-display); color: var(--gw-ink); letter-spacing: -0.022em; font-weight: 600; } h4, h5, h6 { font-family: var(--gw-font); color: var(--gw-ink); font-weight: 600; letter-spacing: -0.012em; } .gw-h1 { font-size: 1.5rem; line-height: 1.25; } .gw-h2 { font-size: 1.1875rem; line-height: 1.3; } .gw-h3 { font-size: 1rem; line-height: 1.4; } .gw-eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gw-muted); } .gw-sub { font-size: .875rem; color: var(--gw-muted); } .gw-meta { font-size: .8125rem; color: var(--gw-muted); } .gw-num { font-variant-numeric: tabular-nums; } a { text-decoration: none; transition: color .15s ease; } /* A 16%-tint box-shadow measured 1.23:1 on white and 1.62:1 on the chrome, against the 3:1 a focus indicator needs — and box-shadow is dropped entirely in Windows High Contrast, where `outline: none` then left nothing at all. A real outline is the only indicator that survives forced-colors. */ *:focus-visible, .btn:focus-visible, .btn-check:focus-visible + .btn, .gw-pager a:focus-visible, .gw-actions a:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--gw-accent-strong); outline-offset: 2px; box-shadow: none; } .gw-chrome *:focus-visible { outline-color: var(--gw-accent); } .form-control:focus, .form-select:focus, .form-check-input:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--gw-ring); border-color: var(--gw-accent-strong); } @media (forced-colors: active) { *:focus-visible { outline: 2px solid CanvasText !important; } } /* -------------------------------------------------------------------------- 4. BUTTONS -------------------------------------------------------------------------- */ /* >>> WHY EVERY VARIANT BELOW IS WRITTEN TWICE <<< Bootstrap's CSS-variable button API (--bs-btn-bg and friends) arrived in 5.3.0. In 5.0.2 the variants are hard-coded: 5.0.2 .btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd} 5.3.3 .btn-primary{--bs-btn-bg:#0d6efd; ...} (checked against both dist files, not from memory.) So on 5.0.2 every --bs-btn-* line here is inert and the buttons come out in stock Bootstrap blue/grey at stock padding and radius. That is what the screenshots show. Each variant therefore also carries the plain background-color / border-color / color, reading the SAME --gw-* token, so the result is byte-identical on 5.3 and correct on 5.0.2 — and buttons still have a shape if bootstrap.min.css fails to load at all. Keep both halves in step when you change a colour. */ .btn { --bs-btn-font-family: var(--gw-font); --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .875rem; --bs-btn-border-radius: var(--gw-r-sm); --bs-btn-box-shadow: none; --bs-btn-focus-box-shadow: var(--gw-ring); font-family: var(--gw-font); font-size: .875rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.006em; text-decoration: none; padding: .5rem .875rem; border: 1px solid transparent; border-radius: var(--gw-r-sm); cursor: pointer; user-select: none; vertical-align: middle; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease; } .btn:active { transform: translateY(.5px); } .btn-sm { --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: .8125rem; padding: .3125rem .625rem; font-size: .8125rem; } .btn-lg { --bs-btn-padding-y: .6875rem; --bs-btn-padding-x: 1.125rem; --bs-btn-font-size: .9375rem; --bs-btn-border-radius: var(--gw-r); padding: .6875rem 1.125rem; font-size: .9375rem; border-radius: var(--gw-r); } .btn-primary { --bs-btn-bg: var(--gw-solid); --bs-btn-border-color: var(--gw-solid); --bs-btn-color: var(--gw-solid-ink); --bs-btn-hover-bg: var(--gw-solid-hover); --bs-btn-hover-border-color: var(--gw-solid-hover); --bs-btn-hover-color: var(--gw-solid-ink); --bs-btn-active-bg: var(--gw-solid-hover); --bs-btn-active-border-color: var(--gw-solid-hover); --bs-btn-active-color: var(--gw-solid-ink); background-color: var(--gw-solid); border-color: var(--gw-solid); color: var(--gw-solid-ink); box-shadow: var(--gw-shadow-xs); } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--gw-solid-hover); border-color: var(--gw-solid-hover); color: var(--gw-solid-ink); } .btn-success { --bs-btn-bg: var(--gw-brand-btn); --bs-btn-border-color: var(--gw-brand-btn); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--gw-brand-hover); --bs-btn-hover-border-color: var(--gw-brand-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--gw-brand-hover); --bs-btn-active-border-color: var(--gw-brand-hover); --bs-btn-active-color: #fff; background-color: var(--gw-brand-btn); border-color: var(--gw-brand-btn); color: #fff; box-shadow: var(--gw-shadow-xs); } .btn-success:hover, .btn-success:active, .btn-success:focus { background-color: var(--gw-brand-hover); border-color: var(--gw-brand-hover); color: #fff; } [data-bs-theme="dark"] .btn-success { --bs-btn-color: #04150B; --bs-btn-hover-color: #04150B; --bs-btn-active-color: #04150B; color: #04150B; } [data-bs-theme="dark"] .btn-success:hover, [data-bs-theme="dark"] .btn-success:active { color: #04150B; } .btn-accent { --bs-btn-bg: var(--gw-accent-strong); --bs-btn-border-color: var(--gw-accent); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--gw-accent-hover); --bs-btn-hover-border-color: var(--gw-accent-hover); --bs-btn-hover-color: #fff; background-color: var(--gw-accent-strong); border-color: var(--gw-accent); color: #fff; box-shadow: var(--gw-shadow-xs); } .btn-accent:hover, .btn-accent:active, .btn-accent:focus { background-color: var(--gw-accent-hover); border-color: var(--gw-accent-hover); color: #fff; } .btn-danger { --bs-btn-bg: var(--gw-danger); --bs-btn-border-color: var(--gw-danger); --bs-btn-color: #fff; --bs-btn-hover-bg: #B32F2F; --bs-btn-hover-border-color: #B32F2F; --bs-btn-hover-color: #fff; background-color: var(--gw-danger); border-color: var(--gw-danger); color: #fff; } .btn-danger:hover, .btn-danger:active, .btn-danger:focus { background-color: #B32F2F; border-color: #B32F2F; color: #fff; } /* the workhorse secondary */ .btn-outline-secondary { --bs-btn-bg: var(--gw-surface); --bs-btn-border-color: var(--gw-control-line); --bs-btn-color: var(--gw-ink-2); --bs-btn-hover-bg: var(--gw-surface-3); --bs-btn-hover-border-color: var(--gw-control-line-hover); --bs-btn-hover-color: var(--gw-ink); --bs-btn-active-bg: var(--gw-surface-3); --bs-btn-active-border-color: var(--gw-control-line-hover); --bs-btn-active-color: var(--gw-ink); background-color: var(--gw-surface); border-color: var(--gw-control-line); color: var(--gw-ink-2); box-shadow: var(--gw-shadow-xs); } .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:focus { background-color: var(--gw-surface-3); border-color: var(--gw-control-line-hover); color: var(--gw-ink); } /* Secondary destructive action (e.g. Disconnect) - the outline twin of .btn-danger, on the same red, not Bootstrap's stock #dc3545. */ .btn-outline-danger { --bs-btn-color: var(--gw-danger); --bs-btn-border-color: var(--gw-danger); --bs-btn-bg: var(--gw-surface); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--gw-danger); --bs-btn-hover-border-color: var(--gw-danger); --bs-btn-active-color: #fff; --bs-btn-active-bg: #B32F2F; --bs-btn-active-border-color: #B32F2F; color: var(--gw-danger); border-color: var(--gw-danger); background-color: var(--gw-surface); } .btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger:focus { color: #fff; background-color: var(--gw-danger); border-color: var(--gw-danger); } .btn-ghost { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--gw-muted); --bs-btn-hover-bg: var(--gw-surface-3); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--gw-ink); background-color: transparent; border-color: transparent; color: var(--gw-muted); } .btn-ghost:hover, .btn-ghost:active, .btn-ghost:focus { background-color: var(--gw-surface-3); border-color: transparent; color: var(--gw-ink); } .btn:disabled, .btn.disabled { opacity: .55; cursor: default; } /* square icon button */ .btn-icon { width: 34px; height: 34px; padding: 0 !important; border-radius: var(--gw-r-sm); flex: 0 0 auto; } .btn-icon.btn-sm { width: 30px; height: 30px; } /* -------------------------------------------------------------------------- 5. FORMS -------------------------------------------------------------------------- */ .form-select { padding-right: 2.25rem; } /* room for the chevron */ .form-label { font-size: .8125rem; font-weight: 500; color: var(--gw-ink); margin-bottom: .375rem; letter-spacing: -0.004em; } .form-control, .form-select { background-color: var(--gw-surface); /* NOT the shorthand — it wipes the select chevron */ border: 1px solid var(--gw-control-line); border-radius: var(--gw-r-sm); color: var(--gw-ink); font-size: .9375rem; padding: .5rem .75rem; min-height: 40px; box-shadow: var(--gw-shadow-xs); transition: border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder { color: var(--gw-muted); } /* :not(.is-invalid):not(.error) - without it this selector (0,5,0) out-ranks .form-control.is-invalid (0,2,0) and a red error border went grey on hover. */ .form-control:hover:not(:focus):not(:disabled):not([readonly]):not(.is-invalid):not(.error), .form-select:hover:not(:focus):not(:disabled):not(.is-invalid):not(.error) { border-color: var(--gw-control-line-hover); } .form-control:focus, .form-select:focus { background-color: var(--gw-surface); border-color: var(--gw-accent); box-shadow: var(--gw-ring); color: var(--gw-ink); } .form-control-lg, .form-select-lg { min-height: 46px; font-size: .9375rem; border-radius: var(--gw-r); } .form-control-sm { min-height: 34px; font-size: .8125rem; padding: .25rem .625rem; } textarea.form-control { min-height: 96px; } /* FILE INPUTS — "Choose File" was the browser's own control, which is why it looked dull next to everything else. Styled by ELEMENT SELECTOR, not by a class, deliberately: asp:FileUpload renders a bare and there are file uploads on many of the 213 pages. Doing it this way means no page markup changes and no .form-control on the control — .form-control is width:100% and would break the one-line [ Remove | browse | Cancel ] group on the builder's Logo panel. ::file-selector-button is the standard; ::-webkit-file-upload-button is kept for older WebKit. */ input[type="file"] { font-family: var(--gw-font); font-size: .875rem; color: var(--gw-ink-2); background-color: var(--gw-surface); border: 1px solid var(--gw-control-line); border-radius: var(--gw-r-sm); box-shadow: var(--gw-shadow-xs); padding: 0 .75rem 0 0; max-width: 100%; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } input[type="file"]:hover { border-color: var(--gw-control-line-hover); } input[type="file"]:focus-visible { outline: 2px solid var(--gw-accent-strong); outline-offset: 2px; } input[type="file"]::file-selector-button { font: 500 .8125rem var(--gw-font); color: var(--gw-ink-2); background-color: var(--gw-surface-3); border: 0; border-right: 1px solid var(--gw-line); border-radius: calc(var(--gw-r-sm) - 1px) 0 0 calc(var(--gw-r-sm) - 1px); padding: .5rem .875rem; margin-right: .75rem; cursor: pointer; transition: background-color .12s ease, color .12s ease; } input[type="file"]:hover::file-selector-button { background-color: var(--gw-line); color: var(--gw-ink); } input[type="file"]::-webkit-file-upload-button { font: 500 .8125rem var(--gw-font); color: var(--gw-ink-2); background-color: var(--gw-surface-3); border: 0; border-right: 1px solid var(--gw-line); border-radius: calc(var(--gw-r-sm) - 1px) 0 0 calc(var(--gw-r-sm) - 1px); padding: .5rem .875rem; margin-right: .75rem; cursor: pointer; } .form-text { font-size: .8125rem; color: var(--gw-muted); } .input-group-text { background: var(--gw-surface); border: 1px solid var(--gw-control-line); color: var(--gw-faint); border-radius: var(--gw-r-sm); } /* :focus-within, not a sibling combinator — so the addon may sit on either side */ .input-group:focus-within > .input-group-text { border-color: var(--gw-accent); } /* Leading-icon field: the icon sits inside the control, no visible addon box. Replaces the Bootstrap 3 `.input-group.input-icon` pattern in default.aspx. */ .gw-field { position: relative; display: block; } .gw-field > .gw-i { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--gw-faint); pointer-events: none; z-index: 3; transition: color .15s ease; } .gw-field > .form-control { padding-left: 2.625rem; } .gw-field:focus-within > .gw-i { color: var(--gw-accent); } .form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--gw-danger); background-image: none; } .invalid-feedback { font-size: .8125rem; color: var(--gw-danger); } /* Unchecked controls were invisible: the old border (#D0D5DD) is 1.47:1 on white, against the 3:1 WCAG needs for a UI component boundary. #79839A is 3.80:1 and reads clearly without looking heavy. */ .form-check-input { border-color: #79839A; border-width: 1.5px; background-color: var(--gw-surface); width: 1.05em; height: 1.05em; margin-top: .22em; } .form-check-input:checked { background-color: var(--gw-accent); border-color: var(--gw-accent); } .form-check-input:focus { box-shadow: var(--gw-ring); border-color: var(--gw-accent); } .form-check-label { font-size: .875rem; color: var(--gw-ink-2); } .form-switch .form-check-input { width: 2.15em; } /* segmented radio group */ .gw-segmented { display: inline-flex; gap: 2px; padding: 3px; background: var(--gw-surface-3); border-radius: var(--gw-r); } .gw-segmented button { border: 0; background: transparent; font: 500 .8125rem var(--gw-font); color: var(--gw-muted); padding: .375rem .75rem; border-radius: var(--gw-r-xs); transition: background .15s ease, color .15s ease; } .gw-segmented button:hover { color: var(--gw-ink); } .gw-segmented button[aria-selected="true"] { background: var(--gw-surface); color: var(--gw-ink); box-shadow: var(--gw-shadow-xs); } /* -------------------------------------------------------------------------- 6. CARDS -------------------------------------------------------------------------- */ /* Same double-declaration rule as the buttons: --bs-card-* is 5.3-only, so the plain properties are what make this work on 5.0.2. */ .card { --bs-card-bg: var(--gw-surface); --bs-card-border-color: var(--gw-line); --bs-card-border-radius: var(--gw-r-md); --bs-card-inner-border-radius: var(--gw-r-md); --bs-card-spacer-x: 1.25rem; --bs-card-spacer-y: 1.125rem; --bs-card-cap-bg: var(--gw-surface-2); background-color: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: var(--gw-r-md); box-shadow: var(--gw-shadow-sm); } .card > .card-body { padding: 1.125rem 1.25rem; } /* DISTINCT SECTIONS — the Logo / Header / Questions / Footer panels on the builder are separate sections. The first version gave the header a 1.02:1 hint of a fill, and in use (Hitesh, 2026-10-04) the four still read as one sheet. Now a solid light band (--gw-head-bg, 1.13:1 on white), a stronger rule under it and a 1rem title. Not a dark band: headers also hold buttons (step 5's "New rule"), sub-text, and question HTML with its own colours (Logic, the report charts), all of which assume a light background. */ .card-header { background-color: var(--gw-head-bg); border-bottom: 1px solid var(--gw-head-line); border-top-left-radius: calc(var(--gw-r-md) - 1px); border-top-right-radius: calc(var(--gw-r-md) - 1px); padding: .875rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .card-header h2, .card-header h3, .card-header .card-title, .card-header h4 { font-size: 1rem; font-weight: 600; margin: 0; color: var(--gw-ink); font-family: var(--gw-font); letter-spacing: -0.008em; display: flex; align-items: center; gap: .5rem; } /* a 3px accent stub on the leading edge of each section heading — this is what actually makes four stacked panels scan as four things */ .card-header .card-title::before, .card-header h3::before, .card-header h4::before { content: ""; width: 3px; height: 1em; border-radius: 2px; background: var(--gw-accent-strong); flex: 0 0 auto; } .card-footer { border-top: 1px solid var(--gw-line); background: var(--gw-surface-2); padding: .875rem 1.25rem; } .card.gw-flat { box-shadow: none; } .card + .card { margin-top: 1.25rem; } /* -------------------------------------------------------------------------- 7. TABLES -------------------------------------------------------------------------- */ .gw-table-wrap { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: var(--gw-r-md); box-shadow: var(--gw-shadow-sm); /* overflow-x must be auto, not hidden: the survey grid is eight columns wide and its sixth action icon (Analytics) was being clipped off the right edge — a live control, silently unreachable. */ overflow-x: auto; overflow-y: hidden; } .table { --bs-table-bg: transparent; --bs-table-color: var(--gw-ink-2); --bs-table-border-color: var(--gw-line); --bs-table-hover-bg: var(--gw-surface-2); --bs-table-hover-color: var(--gw-ink); margin: 0; font-size: .875rem; } .table > thead > tr > th { background: var(--gw-surface-2); border-bottom: 1px solid var(--gw-line); font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gw-muted); padding: .75rem 1rem; white-space: nowrap; vertical-align: middle; } .table > tbody > tr > td { padding: .875rem 1rem; border-top: 1px solid var(--gw-line); border-bottom: 0; vertical-align: middle; color: var(--gw-ink-2); } .table > tbody > tr:first-child > td { border-top: 0; } .table > tbody > tr { transition: background .12s ease; } /* ACTION COLUMN PINNED TO THE RIGHT EDGE - OPT-IN with class gw-pin-actions. Only on tables whose last column IS an action column. Applied to every .gw-table-grid it also pinned the last DATA column of the report's auto-generated Overview grid. Measured at 1366px (a laptop at 100% zoom) the survey list is 1128px wide in a 1058px space. The wrapper scrolls, but its scrollbar sits below the last row, where nobody finds it - so the 5th and 6th action icons were, in practice, unreachable. Pinning the column keeps every action on screen at any width; the other columns scroll underneath it. ORDER MATTERS: this block sits BEFORE the zebra and hover rules, which have the same specificity, so striped and hovered rows still recolour the pinned cell. Odd rows are transparent by default, so this supplies their background - without it, scrolled text would show through the icons. Divider is a box-shadow, not a border: collapsed borders on sticky cells do not travel with the cell in Chrome. */ .gw-pin-actions > thead > tr > th:last-child, .gw-pin-actions > tbody > tr > td:last-child { position: sticky; right: 0; z-index: 1; border-left: 0; box-shadow: inset 1px 0 0 var(--gw-line), -6px 0 8px -6px rgba(16, 24, 40, .14); } .gw-pin-actions > thead > tr > th:last-child { z-index: 2; } .gw-pin-actions > tbody > tr > td:last-child { background-color: var(--gw-surface); } /* Long header labels ("Latest Response", "Created By") may wrap to two lines. One-line headers were setting those columns' widths, not their data. */ .gw-table-grid > thead > tr > th { white-space: normal; } /* The GridView ships .table-striped and , so the zebra is already in the markup — this just makes it a readable tint rather than Bootstrap's heavier default, and adds a column rule so the eye can track across eight columns without losing the row. */ .table > tbody > tr:nth-of-type(even) > td, .table > tbody > tr.alt > td { background: #F5F7F9; } /* 1.07:1 — visible; body text still 7.16:1 on it */ [data-bs-theme="dark"] .table > tbody > tr:nth-of-type(even) > td, [data-bs-theme="dark"] .table > tbody > tr.alt > td { background: #12161D; } .gw-table-grid > thead > tr > th + th, .gw-table-grid > tbody > tr > td + td { border-left: 1px solid var(--gw-line); } .gw-table-grid > thead > tr > th { background: var(--gw-surface-3); color: var(--gw-ink-2); font-size: .75rem; letter-spacing: .04em; border-bottom: 1px solid var(--gw-line-strong); } /* Specificity: the zebra rule is (0,3,3) and this was (0,2,3), so hover was dead on every even row in dark mode. Matched here deliberately. */ .gw-table-grid > tbody > tr:hover > td, .gw-table-grid > tbody > tr:nth-of-type(even):hover > td, .gw-table-grid > tbody > tr.alt:hover > td { background: var(--gw-accent-tint); } .gw-num-cell { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* Sortable headers are GridView LinkButtons (), so they took the link blue while "Action" stayed grey - a header row in two colours. Same colour as the header; the accent comes back on hover/focus. */ .gw-table-grid > thead > tr > th > a { color: inherit; text-decoration: none; } .gw-table-grid > thead > tr > th > a:hover, .gw-table-grid > thead > tr > th > a:focus-visible { color: var(--gw-accent-strong); text-decoration: underline; text-underline-offset: 2px; } /* COMPACT GRID below 1600px - i.e. a laptop at 100% zoom. Measured on the real quiz list (9 columns, 7 action icons) at 1366px with the sidebar open: the table needed 1206px of a 1056px space, so the pinned Action column sat on top of "Created By" (150px of it hidden) until you scrolled sideways. At 80% zoom the same page fitted - which is why it "looked fine at low resolution". Where the 150px comes back from: cell padding 12px -> 8px a side, 9 columns ............ 72px header 12px/.04em -> 11px/.02em (header words set the width of the narrow columns: QUESTIONS, RESPONSE) .... ~25px "Created By" may wrap onto two lines .................. ~55px action icons: no gap between the 24px targets ......... 12px body text 14px -> 13px ("Outcome/Personality" cannot break at the slash, so it sets its column's width) ... ~35px Targets stay 24x24 (WCAG 2.5.8). Dates and numbers still never wrap. Placed AFTER the base header rule on purpose: same specificity, so the later rule wins - above it, the header font change was silently ignored. */ @media (max-width: 1599.98px) { .gw-table-grid > thead > tr > th, .gw-table-grid > tbody > tr > td { padding-left: .5rem; padding-right: .5rem; } .gw-table-grid > thead > tr > th:first-child, .gw-table-grid > tbody > tr > td:first-child { padding-left: .75rem; } .gw-table-grid > thead > tr > th { font-size: .6875rem; letter-spacing: .02em; } .gw-table-grid > tbody > tr > td { font-size: .8125rem; } .gw-table-grid .gw-col-user { white-space: normal; } .gw-table-grid .gw-actions { gap: 0; } } /* Dates come from DataFormatString="{0:MMM dd yyyy}" and names are one field — neither should wrap. Only the survey title is allowed to run to two lines. */ .gw-col-date, .gw-col-user { white-space: nowrap; } .gw-table-grid td:first-child { min-width: 200px; } /* Status is plain text in Cells(1) — no span, no class — so it cannot be coloured per value from CSS. This gives the column weight; see the note at the foot of this file for the one VB line that would allow a real badge. */ .gw-col-status { font-weight: 500; color: var(--gw-ink); white-space: nowrap; } /* Action column: the six LinkButtons are always rendered, so they are always visible here too — no hover-reveal, which would hide live controls. THE COLUMN MUST NOT BE SQUEEZED. Six 26px targets + gaps is ~170px; the title column's min-width:200px plus seven other columns will happily push that past the viewport and clip the last two icons, which is what the screenshot shows. width:1% + white-space:nowrap makes the browser give this column exactly its content width and take the slack out of the title column instead, and the wrap scrolls rather than clipping. */ .gw-actions { display: flex; gap: .125rem; align-items: center; white-space: nowrap; width: max-content; } .gw-pin-actions td:last-child, .gw-pin-actions th:last-child { width: 1%; white-space: nowrap; } .gw-actions a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--gw-r-xs); color: var(--gw-muted); flex: 0 0 auto; transition: background .12s ease, color .12s ease; } .gw-actions a > svg, .gw-actions a > .gw-i { width: 16px; height: 16px; } @media (max-width: 1400px) { .gw-actions a { width: 24px; height: 24px; } .gw-actions a > svg, .gw-actions a > .gw-i { width: 15px; height: 15px; } .gw-table-grid td:first-child { min-width: 160px; } } .gw-actions a:hover { background: var(--gw-surface-3); color: var(--gw-accent); } .gw-actions a.gw-act-danger:hover { background: var(--gw-danger-tint); color: var(--gw-danger); } .gw-cell-title { color: var(--gw-ink); font-weight: 500; display: block; letter-spacing: -0.006em; } /* row actions reveal on hover, stay reachable by keyboard */ .gw-row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; } tr:hover .gw-row-actions, .gw-row-actions:focus-within { opacity: 1; } @media (hover: none) { .gw-row-actions { opacity: 1; } } /* -------------------------------------------------------------------------- 8. BADGES / PILLS -------------------------------------------------------------------------- */ .gw-badge { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 500; line-height: 1.3; padding: .25rem .5rem .25rem .4375rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .gw-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: 0 0 auto; } .gw-badge-live { background: var(--gw-brand-tint); color: var(--gw-brand-hover); border-color: var(--gw-brand-line); } .gw-badge-draft { background: var(--gw-surface-3); color: var(--gw-muted); border-color: var(--gw-line); } .gw-badge-off { background: var(--gw-warn-tint); color: var(--gw-warn); border-color: var(--gw-warn-line); } [data-bs-theme="dark"] .gw-badge-live { color: var(--gw-brand); } .gw-chip { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 500; padding: .25rem .5rem; border-radius: var(--gw-r-xs); background: var(--gw-surface-3); color: var(--gw-muted); border: 1px solid var(--gw-line); } .gw-kbd { font: 500 .6875rem var(--gw-font); padding: .1875rem .375rem; border-radius: 5px; background: var(--gw-surface-3); color: var(--gw-muted); border: 1px solid var(--gw-line); border-bottom-width: 2px; } /* -------------------------------------------------------------------------- 9. APP SHELL — sidebar + topbar -------------------------------------------------------------------------- */ /* ---- NAVY CHROME ----------------------------------------------------------- The one block to retune if you want a different chrome colour. It does not add rules — it RE-POINTS the same tokens the shell already uses, scoped to the chrome. Every rule below (nav links, search, avatar, kbd, ghost buttons, dividers) keeps referring to --gw-surface / --gw-line / --gw-ink-2 and resolves them against these values instead. Change the nine colours here and the whole chrome moves with them. Scoped, not global: .gw-avatar in the surveys table stays on white. Identical in light and dark mode — the chrome is brand furniture, not a surface that should flip. Measured against the CURRENT pair, sidebar first: ink #F2F5FA 16.8 / 14.3 ink-2 #B4C0D6 10.0 / 8.5 faint #8190AC 5.7 / 4.8 accent #5C9DFF 6.8 / 5.7 Faint on the top bar is the thinnest margin in the file, so it carries icons and section headers only — never body text. -------------------------------------------------------------------------- */ /* Shared ink for anything sitting on navy. The two bars differ only in their own --gw-surface, set below; hovers and borders are mixed off it, so changing one hex at :root moves the whole bar coherently. */ .gw-chrome { --gw-surface-2: color-mix(in srgb, var(--gw-surface) 92%, #FFFFFF); --gw-surface-3: color-mix(in srgb, var(--gw-surface) 87%, #FFFFFF); --gw-line: color-mix(in srgb, var(--gw-surface) 82%, #FFFFFF); --gw-line-strong: color-mix(in srgb, var(--gw-surface) 74%, #FFFFFF); --gw-ink: #F2F5FA; --gw-ink-2: #B4C0D6; /* nav labels */ --gw-muted: #94A2BC; --gw-faint: #8190AC; /* icons, counts, section headers */ --gw-accent: #5C9DFF; /* 6.2:1 on the navy; the brand #2a78d6 is only 3.8:1 */ --gw-accent-tint: rgba(92,157,255,.14); --gw-accent-line: rgba(92,157,255,.30); --gw-ring: 0 0 0 3px rgba(92,157,255,.28); /* the logo lockup needs a light variant on navy — see .gw-logo */ --logo-word-1: #F2F5FA; --logo-word-2: #7FB4FF; --logo-mark: #5C9DFF; --logo-ring: #1FBF66; color-scheme: dark; /* scrollbars match the navy */ color: var(--gw-ink-2); } /* The two bars. This is the only place the backgrounds are applied. */ .gw-topbar.gw-chrome { --gw-surface: var(--gw-topbar-bg); background: var(--gw-surface); backdrop-filter: none; } .gw-sidebar.gw-chrome { --gw-surface: var(--gw-sidebar-bg); background: var(--gw-surface); } /* Selected nav item: a solid fill plus a left accent bar, rather than a tint. #1C2E50 on the deeper sidebar is a 1.36:1 fill step — visible — and carries its label at 4.96:1. */ .gw-sidebar .gw-nav-link.active, .gw-sidebar .gw-nav-root a.active { background: var(--gw-nav-active-bg); color: var(--gw-accent); font-weight: 500; position: relative; } .gw-sidebar .gw-nav-link.active::before, .gw-sidebar .gw-nav-root a.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 2px 2px 0; background: var(--gw-accent); } .gw-shell-collapsed .gw-sidebar .gw-nav-link.active::before, .gw-shell-collapsed .gw-sidebar .gw-nav-root a.active::before { display: none; } /* Logo lockup. Defaults are the brand values for light backgrounds; the chrome block above overrides them. Set as `style` on the SVG nodes, not as fill="" attributes — a presentation attribute cannot take a var(). */ .gw-logo-ring { stroke: var(--logo-ring, #12A150); } .gw-logo-mark { stroke: var(--logo-mark, #2a78d6); } .gw-logo-mark-fill { fill: var(--logo-mark, #2a78d6); } .gw-logo-word-1 { fill: var(--logo-word-1, currentColor); } .gw-logo-word-2 { fill: var(--logo-word-2, #2a78d6); } /* ---- SHELL LAYOUT ---------------------------------------------------------- Banner geometry: a full-width top bar with the sidebar starting beneath it. This is deliberate, and it is what lets BOTH panels be navy — the separation is done by geometry rather than by colour. (Two navy panels meeting at a corner in the inset geometry read as one L-shaped slab; a 1px border cannot separate two navies.) It is also the geometry MasterPage.master already has: #header > nav.navbar -> .gw-topbar #wrapper > #sidebar -> .gw-sidebar #wrapper > #content -> .gw-main so the migration is a re-skin of the existing boxes, not a re-nesting. The top bar carries only what the old one carries: the collapse control (.collapseBtn.leftbar), the logo (.navbar-brand > img_Logo), and the profile dropdown (.usernav .avatar + #topmenu) with Logout folded into it. -------------------------------------------------------------------------- */ .gw-shell { display: grid; grid-template-columns: var(--gw-sidebar-w) minmax(0, 1fr); grid-template-rows: var(--gw-topbar-h) 1fr; grid-template-areas: "topbar topbar" "sidebar main"; min-height: 100vh; background: var(--gw-bg); transition: grid-template-columns .18s ease; } /* collapsed rail — icons only. Matches the existing .collapseBtn.leftbar control. */ .gw-shell-collapsed { grid-template-columns: var(--gw-rail-w) minmax(0, 1fr); } .gw-sidebar { grid-area: sidebar; background: var(--gw-surface); border-right: 1px solid var(--gw-line); display: flex; flex-direction: column; position: sticky; top: var(--gw-topbar-h); height: calc(100vh - var(--gw-topbar-h)); overflow: hidden; } .gw-topbar-brand { display: flex; align-items: center; flex: 0 0 auto; } /* ---- COLLAPSE ---- The rail keeps the icons and drops the labels and section headers. Labels are removed from the flow rather than faded, so the icon can centre. The name is restored by a tooltip built from data-tip. */ .gw-shell-collapsed .gw-nav { padding-left: .5rem; padding-right: .5rem; } .gw-shell-collapsed .gw-nav-section, .gw-shell-collapsed .gw-count { display: none; } /* Hidden visually, NOT removed. display:none would drop the link's accessible name, and Bootstrap's tooltip moves `title` to data-bs-original-title, so the rail icons would have had no name at all for a screen reader. */ .gw-shell-collapsed .gw-nav-txt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .gw-shell-collapsed .gw-nav-link { justify-content: center; padding-left: 0; padding-right: 0; } .gw-shell-collapsed .gw-nav-sub { margin-left: 0; padding-left: 0; border-left: 0; } /* RAIL CONTENT for the master's real markup (.gw-nav-root, written by the .vb). - Section headers (Internal Surveys / Assessment / Survey / Personas) are a chevron and a word - there is no icon to show - so the rail drops them and lists every section's pages flat, one group per section, split by a rule. All groups show, collapsed or not: in a 64px rail there is no room for open/close, and every page must stay one click away. - Quiz folders are dropped: the .vb gives every folder the same icon-font glyph, so a column of identical folders is unreadable. "Assessments" directly above them still leads to every folder's quizzes. - Labels stay in the DOM, visually hidden, so links keep an accessible name; gw5-app.js adds title= while collapsed, for a hover label. */ /* Only lists whose header is rendered (a + ul), or that the .vb opened (.show). MasterPage.master.vb line ~356 always hides the "Internal Surveys" HEADER but leaves ul_Module in the page, closed - a bare "li > ul" rule put four pages in the rail that the open sidebar never shows. */ .gw-shell-collapsed .gw-nav-root > li > a { display: none; } .gw-shell-collapsed .gw-nav-root > li > ul { margin: 0; padding: 0; border-left: 0; } .gw-shell-collapsed .gw-nav-root > li > a + ul, .gw-shell-collapsed .gw-nav-root > li > ul.show { display: block; } .gw-shell-collapsed .gw-nav-root > li > a + ul ~ a + ul, .gw-shell-collapsed .gw-nav-root > li + li > a + ul { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid var(--gw-line); } /* On a folder's page the active link is the folder, which the rail hides - so "Assessments" carries the marker instead. */ .gw-shell-collapsed .gw-sidebar .gw-nav-root li:has(> a.span_icons.active) > a:first-child { background: var(--gw-nav-active-bg); color: var(--gw-accent); } .gw-shell-collapsed .gw-sidebar .gw-nav-root li:has(> a.span_icons.active) > a:first-child .gw-i { color: var(--gw-accent); } .gw-shell-collapsed .gw-nav-root a.span_icons { display: none; } .gw-shell-collapsed .gw-nav-root a { justify-content: center; padding: .5rem 0; gap: 0; } .gw-shell-collapsed .gw-nav-root a .gw-i { width: 18px; height: 18px; flex-basis: 18px; } .gw-shell-collapsed .gw-nav-root .txt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Collapsed-rail labels come back as Bootstrap's own tooltip (data-bs-toggle="tooltip"), NOT a CSS pseudo-element: the rail scrolls, and anything drawn inside a scroll container is clipped by it. Bootstrap appends the tooltip to , so it escapes. No new dependency — it is already in bootstrap.bundle.min.js. Styled here to match the rest of the system. */ .tooltip { --bs-tooltip-bg: var(--gw-solid); --bs-tooltip-color: var(--gw-bg); } .tooltip .tooltip-inner { font: 500 .75rem/1.3 var(--gw-font); padding: .3125rem .5rem; border-radius: var(--gw-r-xs); } /* the collapse control itself — the 2026 form of .collapseBtn.leftbar */ .gw-collapse { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; margin-right: .25rem; border: 0; border-radius: var(--gw-r-sm); background: transparent; color: var(--gw-ink-2); cursor: pointer; transition: background .12s ease, color .12s ease; } .gw-collapse:hover { background: var(--gw-surface-3); color: var(--gw-ink); } /* profile control in the bar */ .gw-profile { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .25rem; border: 0; border-radius: 999px; background: transparent; color: var(--gw-ink-2); cursor: pointer; transition: background .12s ease; } .gw-profile:hover { background: var(--gw-surface-3); } .gw-profile-name { font-size: .8125rem; font-weight: 500; color: var(--gw-ink); } .gw-profile .gw-i { color: var(--gw-faint); } .gw-workspace { margin: .875rem .75rem .5rem; padding: .5rem .625rem; border: 1px solid var(--gw-line); border-radius: var(--gw-r-sm); background: var(--gw-surface-2); display: flex; align-items: center; gap: .5rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .gw-workspace:hover { border-color: var(--gw-line-strong); background: var(--gw-surface-3); } .gw-workspace-mark { width: 26px; height: 26px; border-radius: var(--gw-r-xs); background: var(--gw-accent-tint); color: var(--gw-accent); display: grid; place-items: center; font: 600 .6875rem var(--gw-font); flex: 0 0 auto; } .gw-nav { padding: .25rem .75rem 1rem; overflow-y: auto; flex: 1 1 auto; } .gw-nav-section { margin-top: 1.125rem; padding: 0 .625rem .375rem; } /* .gw-nav-root a = the master's sidebar links. They carry NO class of their own (see the comment above the sidebar in MasterPage.master), so every .gw-nav-link rule is also written against their position. */ .gw-nav-link, .gw-nav-root a { display: flex; align-items: center; gap: .625rem; padding: .4375rem .625rem; border-radius: var(--gw-r-sm); font-size: .875rem; font-weight: 450; color: var(--gw-ink-2); letter-spacing: -0.006em; transition: background .12s ease, color .12s ease; } .gw-nav-link:hover, .gw-nav-root a:hover { background: var(--gw-surface-3); color: var(--gw-ink); } /* color-mix toward white gave #2B3342 (Y .0327), lighter than the selected item #1C2E50 (Y .0278) — hover outshone selection. Navy-tinted instead. */ .gw-sidebar .gw-nav-link:hover, .gw-sidebar .gw-nav-root a:hover { background: #131F3A; } .gw-sidebar .gw-nav-link.active:hover, .gw-sidebar .gw-nav-root a.active:hover { background: var(--gw-nav-active-bg); } .gw-nav-link .gw-i, .gw-nav-root a .gw-i { color: var(--gw-faint); flex: 0 0 16px; transition: color .12s ease, transform .15s ease; } .gw-nav-link:hover .gw-i, .gw-nav-root a:hover .gw-i { color: var(--gw-muted); } .gw-nav-link.active, .gw-nav-root a.active { background: var(--gw-accent-tint); color: var(--gw-accent); font-weight: 500; } .gw-nav-link.active .gw-i, .gw-nav-root a.active .gw-i { color: var(--gw-accent); } .gw-nav-link .gw-count { margin-left: auto; font-size: .75rem; color: var(--gw-muted); font-variant-numeric: tabular-nums; } .gw-nav-sub { margin-left: 1.5rem; padding-left: .625rem; border-left: 1px solid var(--gw-line); } .gw-nav-sub .gw-nav-link { font-size: .8125rem; padding: .3125rem .625rem; } .gw-sidebar-foot { border-top: 1px solid var(--gw-line); padding: .625rem .75rem; } .gw-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; } .gw-topbar { grid-area: topbar; height: var(--gw-topbar-h); display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; background: color-mix(in srgb, var(--gw-surface) 80%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--gw-line); position: sticky; top: 0; z-index: 30; } .gw-topbar { padding-left: 1rem; } .gw-search { display: flex; align-items: center; gap: .5rem; width: 320px; max-width: 42vw; padding: .4375rem .625rem; background: var(--gw-surface-2); border: 1px solid var(--gw-line); border-radius: var(--gw-r-sm); color: var(--gw-muted); font-size: .8125rem; cursor: pointer; transition: border-color .15s ease; white-space: nowrap; /* never let the hint wrap to a second line */ } .gw-search:hover { border-color: var(--gw-line-strong); } .gw-search-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .gw-search .gw-i { flex: 0 0 auto; } .gw-search .gw-kbd { margin-left: auto; flex: 0 0 auto; } .gw-avatar { width: 28px; height: 28px; border-radius: 999px; /* --gw-accent on --gw-accent-tint is 3.99:1 — short of 4.5:1 for an 11px initial. --gw-accent-strong is 4.97:1. */ background: var(--gw-accent-tint); color: var(--gw-accent-strong); display: grid; place-items: center; font: 600 .6875rem var(--gw-font); flex: 0 0 auto; border: 1px solid var(--gw-accent-line); } /* dark: --gw-accent-strong is 4.36:1 on the dark tint; --gw-accent-hover is 5.31:1 */ [data-bs-theme="dark"] .gw-avatar { color: var(--gw-accent-hover); } .gw-avatar-sm { width: 22px; height: 22px; font-size: .625rem; } .gw-content { padding: 1.5rem 1.5rem 3rem; flex: 1 1 auto; } .gw-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .dropdown-menu { --bs-dropdown-bg: var(--gw-surface); --bs-dropdown-border-color: var(--gw-line); --bs-dropdown-border-radius: var(--gw-r); --bs-dropdown-link-color: var(--gw-ink-2); --bs-dropdown-link-hover-bg: var(--gw-surface-3); --bs-dropdown-link-hover-color: var(--gw-ink); --bs-dropdown-padding-y: .3125rem; --bs-dropdown-item-padding-y: .4375rem; --bs-dropdown-item-padding-x: .625rem; --bs-dropdown-font-size: .875rem; box-shadow: var(--gw-shadow-md); } .dropdown-item { border-radius: var(--gw-r-xs); margin: 0 .3125rem; width: auto; } .dropdown-divider { border-color: var(--gw-line); } /* -------------------------------------------------------------------------- 10. STAT TILES -------------------------------------------------------------------------- */ .gw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .875rem; } .gw-stat { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: var(--gw-r-md); box-shadow: var(--gw-shadow-sm); padding: 1rem 1.125rem; } .gw-stat-label { font-size: .8125rem; color: var(--gw-muted); margin-bottom: .375rem; } .gw-stat-value { font-family: var(--gw-display); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--gw-ink); letter-spacing: -0.03em; } .gw-stat-value small { font-size: .9375rem; font-weight: 500; color: var(--gw-muted); letter-spacing: 0; } .gw-stat-foot { margin-top: .5rem; display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--gw-muted); } .gw-delta { display: inline-flex; align-items: center; gap: .1875rem; font-weight: 500; } .gw-delta-up { color: var(--gw-brand-hover); } .gw-delta-down { color: var(--gw-danger); } [data-bs-theme="dark"] .gw-delta-up { color: var(--gw-brand); } /* -------------------------------------------------------------------------- 11. STEPPER (replaces .bwizard-steps) -------------------------------------------------------------------------- */ .gw-stepper { display: flex; list-style: none; margin: 0; padding: 10px 0 2px; /* room for the current step's ring - scale(1.12) plus the 5px ring reach ~7.6px above the circle; overflow-x:auto also clips y */ overflow-x: auto; scrollbar-width: none; } .gw-stepper::-webkit-scrollbar { display: none; } .gw-stepper li { flex: 1 1 0; min-width: 104px; position: relative; text-align: center; } .gw-stepper a { position: relative; z-index: 1; display: block; text-decoration: none; } /* --- DEFAULT STATE IS "UPCOMING", NOT "DONE" ------------------------------- This was the wrong way round. The default used to be a filled green pill, so a page whose JS had not set .current — for any reason, including the ready handler throwing earlier — rendered every step as completed. A stepper that silently claims the whole wizard is finished is worse than one with no indicator, so the unmarked state is now the neutral one and "done" has to be asserted. Palette changed green -> blue (--gw-accent-*) on request; green now means only "saved/published" elsewhere in the app. */ .gw-step-num { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto .5rem; border-radius: 999px; font: 600 .75rem var(--gw-font); background: var(--gw-surface); /* --gw-line-strong (#D0D5DD) was only 1.47:1 on white — an outlined circle you cannot see. --gw-muted is 4.97:1 light / 3.51:1 dark, both clear of the 3:1 that WCAG 1.4.11 asks of a UI component boundary, and it matches the numeral inside so the circle reads as one object. */ border: 1px solid var(--gw-muted); color: var(--gw-muted); transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .gw-step-txt { display: block; font-size: .75rem; font-weight: 450; color: var(--gw-muted); white-space: nowrap; } /* the connector sits to the LEFT of li N and joins N-1 to N, so it is "walked" when li N is current or already done */ .gw-stepper li + li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--gw-line); border-radius: 2px; } /* DONE — every step before .current. :has() is Chrome 105+/Safari 15.4+/FF 121+. Where it is unsupported the step stays neutral, which is the safe reading. */ .gw-stepper li:has(~ li.current) .gw-step-num { background: var(--gw-accent-strong); border-color: var(--gw-accent-strong); color: #fff; } .gw-stepper li:has(~ li.current) .gw-step-txt { color: var(--gw-ink-2); font-weight: 500; } .gw-stepper li.current::before, .gw-stepper li:has(~ li.current)::before { background: var(--gw-accent-strong); } /* CURRENT — same blue, plus a ring, a slightly larger circle and a blue label. The first version (a 4px pale ring and a bold label) was too close to a completed step: Hitesh could not tell "where am I" at a glance. The ring is a gap in the page colour, then the accent; scale() leaves the connector lines where they are. */ .gw-stepper li.current .gw-step-num { background: var(--gw-accent-strong); border-color: var(--gw-accent-strong); color: #fff; box-shadow: 0 0 0 3px var(--gw-bg), 0 0 0 5px var(--gw-accent-strong); transform: scale(1.12); } .gw-stepper li.current .gw-step-txt { color: var(--gw-accent-strong); font-weight: 650; } /* UPCOMING — explicit, so it still wins if a page marks steps some other way */ .gw-stepper li.current ~ li .gw-step-num { background: var(--gw-surface); border-color: var(--gw-muted); color: var(--gw-muted); box-shadow: none; } /* Dark mode: white on the dark-mode accent (#3987E5) is only 3.64:1, so the numeral inverts instead. 5.31:1. */ [data-bs-theme="dark"] .gw-stepper li.current .gw-step-num, [data-bs-theme="dark"] .gw-stepper li.active .gw-step-num, [data-bs-theme="dark"] .gw-stepper li:has(~ li.current) .gw-step-num, [data-bs-theme="dark"] .gw-stepper li:has(~ li.active) .gw-step-num { color: #0B0E14; } .gw-stepper li.current ~ li .gw-step-txt { color: var(--gw-muted); font-weight: 450; } /* .active is what step2..step8 still write (they are not migrated yet). Treat it as a synonym for .current so a half-migrated wizard is never all-neutral. */ .gw-stepper li.active .gw-step-num { background: var(--gw-accent-strong); border-color: var(--gw-accent-strong); color: #fff; box-shadow: 0 0 0 3px var(--gw-bg), 0 0 0 5px var(--gw-accent-strong); transform: scale(1.12); } .gw-stepper li.active .gw-step-txt { color: var(--gw-accent-strong); font-weight: 650; } .gw-stepper li:has(~ li.active) .gw-step-num { background: var(--gw-accent-strong); border-color: var(--gw-accent-strong); color: #fff; } .gw-stepper li.active::before, .gw-stepper li:has(~ li.active)::before { background: var(--gw-accent-strong); } /* DENSE - the Scored Quiz wizard has 13 steps; the survey has 8. At the normal 104px a 13-step row needs 1352px, wider than the content column on a 1366px screen, so the last steps would sit off to the right behind a hidden scrollbar. Dense steps are 74px ("Integrations", the widest single word, is 72px) and labels wrap onto two lines instead. All 13 fit from about 1280px wide. Below that the row still scrolls, so here the scrollbar is shown (thin) instead of hidden: a step you cannot see must at least look reachable. Opt-in class:

is inline and ignores width/height */ height: 100%; background: var(--viz-series); border-radius: 0 4px 4px 0; /* 4px rounded data-end; square against the baseline */ min-width: 2px; } .gw-bar-value { font-size: .8125rem; font-weight: 500; color: var(--gw-ink-2); font-variant-numeric: tabular-nums; min-width: 56px; } /* Diverging stack — one bar, three segments, 2px surface gaps. Values are DIRECT LABELS beneath the bar, not text inside the fills: white on the promoter blue is 4.42:1 (light) / 3.64:1 (dark), under the 4.5:1 AA floor for 12px text, and no ink clears it on the light blue either. Labels in ink tokens sidestep it and follow the mark spec — text never wears the data colour. */ .gw-stack { display: flex; height: 24px; gap: 2px; } .gw-stack-seg { min-width: 2px; } .gw-stack-seg:first-child { border-radius: 4px 0 0 4px; } .gw-stack-seg:last-child { border-radius: 0 4px 4px 0; } .gw-seg-pos { background: var(--viz-pos); } .gw-seg-mid { background: var(--viz-mid); } .gw-seg-neg { background: var(--viz-neg); } .gw-stack-labels { display: flex; gap: 2px; margin-top: .4375rem; } .gw-stack-label { font-size: .75rem; font-weight: 500; color: var(--gw-ink-2); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; overflow: hidden; } .gw-stack-label span { color: var(--gw-muted); font-weight: 400; } /* line chart */ .gw-line-grid line { stroke: var(--viz-grid); stroke-width: 1; } .gw-line-axis line { stroke: var(--viz-axis); stroke-width: 1; } .gw-line-path { fill: none; stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .gw-line-area { fill: var(--viz-series-wash); } .gw-line-dot { fill: var(--viz-series); stroke: var(--viz-surface); stroke-width: 2; } .gw-tick { font: 400 10.5px var(--gw-font); fill: var(--viz-ink-muted); } .gw-tick.gw-num { font-variant-numeric: tabular-nums; } /* open-text response */ .gw-quote { border-left: 2px solid var(--gw-line-strong); padding: .125rem 0 .125rem .875rem; color: var(--gw-ink-2); font-size: .875rem; } .gw-quote + .gw-quote { margin-top: .875rem; } .gw-empty { text-align: center; padding: 1.5rem 0; color: var(--gw-muted); font-size: .8125rem; } /* -------------------------------------------------------------------------- 14. MODAL / OFFCANVAS -------------------------------------------------------------------------- */ .modal-content { --bs-modal-bg: var(--gw-surface); --bs-modal-border-color: transparent; --bs-modal-border-radius: var(--gw-r-lg); box-shadow: var(--gw-shadow-lg); } .modal-header { border-bottom: 1px solid var(--gw-line); padding: 1.125rem 1.25rem; } .modal-title { font-size: 1rem; font-weight: 600; } .modal-body { padding: 1.25rem; } .modal-footer { border-top: 1px solid var(--gw-line); background: var(--gw-surface-2); padding: .875rem 1.25rem; } .modal-backdrop.show { --bs-backdrop-opacity: .45; --bs-backdrop-bg: #070A0F; } /* -------------------------------------------------------------------------- 15. LOGIN -------------------------------------------------------------------------- */ /* default.aspx is a single centred card (.login-panel.panel.plain), not a split. The navy canvas is --gw-signin-bg; set it to var(--gw-bg) for the light version. */ .gw-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--gw-signin-bg); } .gw-auth-inner { width: 100%; max-width: 400px; } .gw-auth-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; } /* shown by the img's onerror when /img/logo.png is missing */ .gw-auth-wordmark { font: 700 1.25rem/1 var(--gw-font); letter-spacing: -0.02em; color: #fff; } .gw-auth-card { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: var(--gw-r-lg); box-shadow: 0 20px 48px -20px rgba(3, 8, 20, .55); padding: 2rem 1.75rem 1.75rem; } .gw-auth-foot { text-align: center; margin-top: 1.25rem; font-size: .75rem; color: #7E8CA6; } .gw-auth-foot a { color: #A8B6CE; text-decoration: underline; text-underline-offset: 2px; } /* the lockup sits on the navy canvas, so it takes the light variant */ .gw-auth-brand { --logo-word-1: #F2F5FA; --logo-word-2: #7FB4FF; --logo-mark: #5C9DFF; --logo-ring: #1FBF66; } /* -------------------------------------------------------------------------- DATATABLES CHROME jquery.dataTables renders the length menu, search box, info line and pager itself. These are its real classes' equivalents, styled to match. -------------------------------------------------------------------------- */ .gw-dt-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; } .gw-dt-len, .gw-dt-search { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--gw-muted); margin: 0; } .gw-dt-len select { width: auto; } .gw-dt-search input { width: 220px; } .gw-dt-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .875rem; font-size: .8125rem; color: var(--gw-muted); } .gw-pager { display: flex; gap: .25rem; } .gw-pager a { min-width: 32px; height: 32px; padding: 0 .5rem; display: grid; place-items: center; border: 1px solid var(--gw-line); border-radius: var(--gw-r-sm); background: var(--gw-surface); color: var(--gw-ink-2); font-size: .8125rem; font-variant-numeric: tabular-nums; transition: background .12s ease, border-color .12s ease; } .gw-pager a:hover { background: var(--gw-surface-3); border-color: var(--gw-line-strong); } .gw-pager a.on { background: var(--gw-accent-strong); border-color: var(--gw-accent-strong); color: var(--gw-on-accent); } .gw-pager a.disabled { opacity: .45; pointer-events: none; } /* .btn-toolbar > .btn-group.btn-group-lg on surveyreport.aspx */ .gw-btn-group { display: inline-flex; } .gw-btn-group .btn { border-radius: 0; margin-left: -1px; } .gw-btn-group .btn:first-child { border-radius: var(--gw-r-sm) 0 0 var(--gw-r-sm); margin-left: 0; } .gw-btn-group .btn:last-child { border-radius: 0 var(--gw-r-sm) var(--gw-r-sm) 0; } .gw-btn-group .btn-primary { position: relative; z-index: 1; } /* one question group inside the Survey Summary placeholder */ .gw-qg { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--gw-line); } .gw-qg-last, .gw-qg:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .gw-qg-title { font-family: var(--gw-display); font-size: .9375rem; font-weight: 600; color: var(--gw-ink); letter-spacing: -0.01em; margin: 0 0 .875rem; } /* logo upload well on step1.aspx */ .gw-logo-drop { width: 96px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border: 1px dashed var(--gw-line-strong); border-radius: var(--gw-r-sm); background: var(--gw-surface-2); color: var(--gw-faint); } .gw-q-list { list-style: none; margin: 0; padding: 0; } /* A block the user adds and removes in a wizard step (Thank You pages, outcomes, results ...). Replaces Supr's .bs-callout. It usually also carries .row for its two columns, so the row's negative side margins are cancelled here - otherwise the box pokes out of the card. */ .gw-repeat { position: relative; margin: 0 0 1rem; padding: 1rem .25rem; border: 1px solid var(--gw-line); border-radius: var(--gw-r); background: var(--gw-surface-2); } .gw-repeat.row { margin-left: 0; margin-right: 0; } .gw-scrim { display: none; } .gw-skip { position: absolute; left: 50%; top: -3rem; transform: translateX(-50%); z-index: 100; padding: .5rem .875rem; background: var(--gw-solid); color: var(--gw-bg); border-radius: 0 0 var(--gw-r-sm) var(--gw-r-sm); font-size: .8125rem; font-weight: 500; transition: top .15s ease; } .gw-skip:focus { top: 0; } @media (max-width: 991.98px) { .gw-scrim { display: block; } } /* -------------------------------------------------------------------------- DATATABLES — the selectors the library ACTUALLY emits. The .gw-dt-* classes above are the preview's hand-built equivalents. The jquery.dataTables build surveylist.aspx loads generates .dataTables_wrapper, .dataTables_filter, .dataTables_length, .dataTables_info and .paginate_button, so without these the live search box, length menu and pager stay unstyled. Verify against your DataTables version — v2 renames these to dt-* classes. -------------------------------------------------------------------------- */ /* LAYOUT. gw5-app.js sets DataTables' default "dom" to <'gw-dt-top'fr> <'gw-dt-scroll't> <'gw-dt-foot'ilp> so every table gets: search on top; the table in its own horizontal scroller (the toolbars no longer scroll away with it); and info, rows-per-page and pager along the bottom. Floats from any DataTables stylesheet are cancelled - the rows are flex. */ .dataTables_wrapper .gw-dt-top, .dataTables_wrapper .gw-dt-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .625rem 1.25rem; } .dataTables_wrapper .gw-dt-top { padding: 0 0 .75rem; } /* inside a .card-body, */ .dataTables_wrapper .gw-dt-foot { padding: .75rem 0 0; } /* which has its own padding */ .dataTables_wrapper .gw-dt-top:empty, .dataTables_wrapper .gw-dt-foot:empty { display: none; } .dataTables_wrapper .gw-dt-top > div, .dataTables_wrapper .gw-dt-foot > div { float: none !important; padding: 0; margin: 0; text-align: left; } .dataTables_wrapper .gw-dt-foot .dataTables_length { margin-left: auto; } .dataTables_wrapper .gw-dt-scroll { overflow-x: auto; } /* Inside the bordered card: the toolbars become its header and footer. */ .gw-table-wrap .dataTables_wrapper .gw-dt-top { padding: .75rem 1rem; border-bottom: 1px solid var(--gw-line); } .gw-table-wrap .dataTables_wrapper .gw-dt-foot { padding: .625rem 1rem; border-top: 1px solid var(--gw-line); background: var(--gw-surface-2); } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info { font-size: .8125rem; color: var(--gw-muted); } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; white-space: nowrap; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 34px; padding: .25rem .625rem; margin: 0; border: 1px solid var(--gw-control-line); border-radius: var(--gw-r-sm); background-color: var(--gw-surface); color: var(--gw-ink); font-size: .8125rem; box-shadow: var(--gw-shadow-xs); background-repeat: no-repeat; } /* The search box: a magnifier inside, placeholder "Search". The visible word "Search:" is still there for screen readers (visually hidden). */ .dataTables_wrapper .dataTables_filter input { width: 260px; max-width: 100%; padding-left: 2rem; background-position: .625rem 50%; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); } /* The rows-per-page menu: it rendered as a bare number with no edge and no arrow, so it read as text. Same chevron as .form-select. */ .dataTables_wrapper .dataTables_length select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 1.875rem; cursor: pointer; background-position: right .5rem center; background-size: 12px 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); } [data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B95A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); } .dataTables_wrapper .dataTables_filter input:hover, .dataTables_wrapper .dataTables_length select:hover { border-color: var(--gw-control-line-hover); } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--gw-accent-strong); box-shadow: var(--gw-ring); } .dataTables_wrapper .dataTables_paginate { display: flex; align-items: center; gap: .25rem; } .dataTables_wrapper .dataTables_paginate > span { display: inline-flex; gap: .25rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; margin: 0; padding: 0 .625rem !important; border: 1px solid var(--gw-line-strong) !important; border-radius: var(--gw-r-sm); background: var(--gw-surface) !important; color: var(--gw-ink-2) !important; font-size: .8125rem; line-height: 1; cursor: pointer; text-decoration: none; font-variant-numeric: tabular-nums; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--gw-surface-3) !important; border-color: var(--gw-control-line-hover) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--gw-accent-strong) !important; border-color: var(--gw-accent-strong) !important; color: var(--gw-on-accent) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; cursor: default; pointer-events: none; } @media (max-width: 575.98px) { .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_filter input { width: 100%; } .dataTables_wrapper .gw-dt-foot .dataTables_length { margin-left: 0; } } /* The styled confirm dialog (gw5-app.js 4b) - narrower than a form dialog. */ .gw-confirm .modal-dialog { max-width: 440px; } .gw-confirm .modal-body { color: var(--gw-ink-2); overflow-wrap: anywhere; } /* -------------------------------------------------------------------------- SHELL PIECES USED BY MasterPage5.master -------------------------------------------------------------------------- */ /* The sidebar

" & s & "