/* 11_custom.css */
/* ============================================================================= CUSTOM CSS FOR PPE LLM DASH APP Modern & Minimalist Theme Place this file in your /assets folder ============================================================================= */ /* ============================================================================= CONFIGURATION VARIABLES Change these values to customize the entire theme ============================================================================= */ :root { /* ----- SHADOW CONFIGURATION ----- */ --shadow-color: rgba(0, 0, 0, 0.25); --shadow-color-hover: rgba(0, 0, 0, 0.35); --shadow-blur: 12px; --shadow-blur-hover: 20px; --shadow-spread: 1px; --shadow-offset-y: 4px; /* Computed shadows (uses the variables above) */ --card-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color); --card-shadow-hover: var(--shadow-offset-x) 4px var(--shadow-blur-hover) var(--shadow-spread) var(--shadow-color-hover); /* ----- TYPOGRAPHY CONFIGURATION ----- */ /* Format: clamp(MIN, PREFERRED, MAX) */ /* PREFERRED uses viewport width (vw) for fluid scaling */ /* Headings */ --font-size-h1: clamp(1.4rem, 3vw, 1.9rem); /* ~22px to ~30px */ --font-size-h2: clamp(1.2rem, 2.5vw, 1.6rem); /* ~19px to ~26px */ --font-size-h3: clamp(1.05rem, 2.2vw, 1.35rem); /* ~17px to ~22px */ --font-size-h4: clamp(0.95rem, 2vw, 1.2rem); /* ~15px to ~19px */ --font-size-h5: clamp(0.85rem, 1.7vw, 1.05rem); /* ~14px to ~17px */ --font-size-h6: clamp(0.8rem, 1.5vw, 0.95rem); /* ~13px to ~15px */ /* Body text */ --font-size-body: clamp(0.75rem, 1.3vw, 0.875rem); /* ~12px to ~14px */ --font-size-p: clamp(0.7rem, 1.2vw, 0.825rem); /* ~11px to ~13px */ --font-size-small: clamp(0.6rem, 1vw, 0.75rem); /* ~10px to ~12px */ --font-size-span: clamp(0.65rem, 1.1vw, 0.8rem); /* ~10px to ~13px */ /* UI elements */ --font-size-button: clamp(0.7rem, 1.2vw, 0.85rem); --font-size-input: clamp(0.75rem, 1.3vw, 0.875rem); --font-size-label: clamp(0.65rem, 1.1vw, 0.775rem); --font-size-badge: clamp(0.55rem, 0.9vw, 0.7rem); /* ----- SPACING & BORDER RADIUS ----- */ --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; /* ----- TRANSITION ----- */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.35s ease; } /* ============================================================================= BASE TYPOGRAPHY ============================================================================= */ html { font-size: 16px; /* Base for rem calculations */ } body { font-size: var(--font-size-body); line-height: 1.6; } h1, .h1 { font-size: var(--font-size-h1); line-height: 1.2; font-weight: 600; } h2, .h2 { font-size: var(--font-size-h2); line-height: 1.25; font-weight: 600; } h3, .h3 { font-size: var(--font-size-h3); line-height: 1.3; font-weight: 500; } h4, .h4 { font-size: var(--font-size-h4); line-height: 1.35; font-weight: 500; } h5, .h5 { font-size: var(--font-size-h5); line-height: 1.4; font-weight: 500; } h6, .h6 { font-size: var(--font-size-h6); line-height: 1.4; font-weight: 500; } /* Prevent LLM bold markers inside headings from creating weight mismatch */ h1 strong, h1 b, h2 strong, h2 b, h3 strong, h3 b, h4 strong, h4 b, h5 strong, h5 b, h6 strong, h6 b { font-weight: inherit; } p { font-size: var(--font-size-p); line-height: 1.6; } span { font-size: var(--font-size-span); } small, .small { font-size: var(--font-size-small); } label { font-size: var(--font-size-label); } /* ============================================================================= CARDS & CONTAINERS ============================================================================= */ .card { box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); transition: box-shadow var(--transition-normal), transform var(--transition-normal); border: none; } .card:hover { box-shadow: var(--card-shadow-hover); } /* Response cards (your custom class) */ .response-card { box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .response-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } /* Card headers and bodies */ .card-header { font-size: var(--font-size-body); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; } .card-body { font-size: var(--font-size-p); } .card-footer { font-size: var(--font-size-small); border-radius: 0 0 var(--border-radius-md) var(--border-radius-md); } /* ============================================================================= BUTTONS ============================================================================= */ .btn { font-size: var(--font-size-button); border-radius: var(--border-radius-sm); transition: all var(--transition-fast); box-shadow: var(--card-shadow); } .btn:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); } .btn:active { transform: translateY(0); box-shadow: var(--card-shadow); } .btn-sm { font-size: var(--font-size-small); } .btn-lg { font-size: var(--font-size-h5); } /* ============================================================================= FORM ELEMENTS ============================================================================= */ input, textarea, select, .form-control, .form-select { font-size: var(--font-size-input); border-radius: var(--border-radius-sm); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(55, 90, 127, 0.15); } /* Chat input specific */ .chat-input { font-size: var(--font-size-input); border-radius: var(--border-radius-md); } /* ============================================================================= BADGES & PILLS ============================================================================= */ .badge, .model-badge { font-size: var(--font-size-badge); border-radius: var(--border-radius-sm); font-weight: 500; } .rank-badge { font-size: var(--font-size-badge); box-shadow: var(--card-shadow); } /* ============================================================================= NAVIGATION & NAVBAR ============================================================================= */ .navbar { box-shadow: var(--card-shadow); } .navbar-brand { font-size: var(--font-size-h5); font-weight: 600; } .nav-link { font-size: var(--font-size-body); transition: opacity var(--transition-fast); } /* ============================================================================= TABS ============================================================================= */ .nav-tabs .nav-link { font-size: var(--font-size-body); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; transition: all var(--transition-fast); } .tab-content { font-size: var(--font-size-p); } /* ============================================================================= ACCORDION ============================================================================= */ .accordion { box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); overflow: hidden; } .accordion-button { font-size: var(--font-size-body); font-weight: 500; } /* Fix collapsed state - give it a visible dark background */ .accordion-button.collapsed { background-color: #303030 !important; color: #fff !important; } /* Make the arrow visible on dark background when collapsed */ .accordion-button.collapsed::after { filter: invert(1); } .accordion-body { font-size: var(--font-size-p); } .accordion-item { border: none; } /* ============================================================================= MODALS ============================================================================= */ .modal-content { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); border-radius: var(--border-radius-lg); border: none; } .modal-header { border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; } .modal-title { font-size: var(--font-size-h4); font-weight: 600; } .modal-body { font-size: var(--font-size-p); } .modal-footer { border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); } /* ============================================================================= ALERTS & TOASTS ============================================================================= */ .alert { font-size: var(--font-size-p); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow); border: none; } .toast { font-size: var(--font-size-small); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow-hover); } /* ============================================================================= STAGE INDICATORS ============================================================================= */ .stage-indicator { font-size: var(--font-size-body); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow); transition: all var(--transition-normal); } /* ============================================================================= MARKDOWN CONTENT ============================================================================= */ .markdown-content { font-size: var(--font-size-p); } .markdown-content h1 { font-size: var(--font-size-h2); } .markdown-content h2 { font-size: var(--font-size-h3); } .markdown-content h3 { font-size: var(--font-size-h4); } .markdown-content h4 { font-size: var(--font-size-h5); } .markdown-content h5 { font-size: var(--font-size-h6); } .markdown-content h6 { font-size: var(--font-size-body); } .markdown-content p { font-size: var(--font-size-p); } .markdown-content pre, .markdown-content code { font-size: var(--font-size-small); border-radius: var(--border-radius-sm); } /* ============================================================================= DROPDOWN ============================================================================= */ .dropdown-menu { font-size: var(--font-size-body); border-radius: var(--border-radius-md); box-shadow: var(--card-shadow-hover); border: none; } .dropdown-item { font-size: var(--font-size-body); transition: background-color var(--transition-fast); } /* ============================================================================= SLIDER / RANGE ============================================================================= */ .rc-slider-mark-text { font-size: var(--font-size-small) !important; } /* ============================================================================= LOADING INDICATOR ============================================================================= */ ._dash-loading { font-size: var(--font-size-small); } /* ============================================================================= UTILITY CLASSES ============================================================================= */ .text-responsive-sm { font-size: var(--font-size-small); } .text-responsive-md { font-size: var(--font-size-body); } .text-responsive-lg { font-size: var(--font-size-h5); } .shadow-subtle { box-shadow: var(--card-shadow); } .shadow-subtle-hover:hover { box-shadow: var(--card-shadow-hover); } /* ============================================================================= RESPONSIVE ADJUSTMENTS Extra tweaks for specific breakpoints if needed ============================================================================= */ /* Extra small devices (phones, less than 576px) */ @media (max-width: 575.98px) { :root { --shadow-blur: 6px; --shadow-blur-hover: 12px; } .card-body { padding: 0.75rem; } .modal-body { padding: 1rem; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767.98px) { :root { --shadow-blur: 7px; --shadow-blur-hover: 14px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { :root { --shadow-blur: 10px; --shadow-blur-hover: 20px; } } /* Make card header blend with card body */ .card-header { background-color: #383838; } .response-card .card-header { background-color: #383838; } /* ============================================================================= MODERN PILL-STYLE TABS ============================================================================= */ .nav-tabs { border-bottom: none; gap: 8px; background-color: transparent; justify-content: center; } .nav-tabs .nav-link { color: #888; border: none; border-radius: 50px; padding: 10px 20px; background-color: transparent; transition: all 0.2s ease; font-size: var(--font-size-body); font-weight: 500; } .nav-tabs .nav-link:hover { color: #fff; background-color: rgba(55, 90, 127, 0.3); } .nav-tabs .nav-link.active { color: #fff; background-color: #375a7f; border: none; font-weight: 500; } /* Tab content area - remove the connected border look */ .tab-content { border: none; border-radius: var(--border-radius-md); background-color: transparent; padding: 1rem 0; } /* ============================================================================= SCROLLBAR (DARK THEME) ============================================================================= */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #303030; } ::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #666; } /* ============================================================================= STAGE INDICATOR STATES ============================================================================= */ .stage-active { background-color: #375a7f; animation: pulse 2s infinite; } .stage-complete { background-color: #00bc8c; } .stage-pending { background-color: #444; opacity: 0.6; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } /* ============================================================================= CHAT INPUT COLORS ============================================================================= */ .chat-input { background-color: #2d2d2d !important; border: 1px solid #444 !important; color: #fff !important; } .chat-input:focus { border-color: #375a7f !important; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25) !important; } /* ============================================================================= MARKDOWN CODE BLOCKS ============================================================================= */ .markdown-content pre { background-color: #1a1a1a; padding: 1rem; overflow-x: auto; } .markdown-content code { color: #e83e8c; } .markdown-content pre code { color: #f8f9fa; } /* ============================================================================= REMOVABLE MODEL BADGE ============================================================================= */ .model-badge-container { position: relative; display: inline-block; margin-right: 0.5rem; margin-bottom: 0.5rem; } .model-badge-container .remove-btn { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background-color: #dc3545; color: white; font-size: 12px; line-height: 14px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.2s; } .model-badge-container:hover .remove-btn { opacity: 1; } .model-badge-container .remove-btn:hover { background-color: #a71d2a; } /* ============================================================================= QUICK MODEL SELECTOR ============================================================================= */ .quick-provider-btn { font-size: 0.78rem; padding: 0.2rem 0.55rem; transition: all 0.15s ease; } .quick-tier-btn { font-size: 0.75rem; padding: 0.15rem 0.5rem; transition: all 0.15s ease; } /* ============================================================================= RANKING BADGE COLORS ============================================================================= */ .rank-badge { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; } .rank-1 { background-color: #ffc107; color: #000; } .rank-2 { background-color: #adb5bd; color: #000; } .rank-3 { background-color: #cd7f32; color: #fff; } .rank-other { background-color: #495057; color: #fff; } /* ============================================================================= CHAT BUBBLES (conversation history) ============================================================================= */ .chat-bubble-question { background-color: #2a4a6b; border: 1px solid #375a7f; } .chat-bubble-answer { background-color: #303030; border: 1px solid #444; } /* ============================================================================= LOADING SPINNER ============================================================================= */ .loading-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid #f3f3f3; border-top: 2px solid #375a7f; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ============================================================================= PRESET BUTTONS - BETTER VISIBILITY ON DARK THEME ============================================================================= */ .btn-outline-secondary { color: #adb5bd !important; /* Lighter gray text */ border-color: #6c757d !important; /* More visible border */ } .btn-outline-secondary:hover { color: #fff !important; background-color: rgba(108, 117, 125, 0.3) !important; /* Subtle fill on hover */ border-color: #adb5bd !important; } /* ============================================================================= CONVERSATION MODAL HAMBURGER BUTTON ============================================================================= */ #conversation-modal-btn { background: transparent !important; border: none !important; box-shadow: none !important; transition: opacity var(--transition-fast); } #conversation-modal-btn:hover { opacity: 0.8; transform: none; /* Disable the default button lift */ box-shadow: none !important; } #conversation-modal-btn:focus { box-shadow: none !important; outline: none; } /* Hamburger icon styling */ #conversation-modal-btn .fas.fa-bars { display: inline-block; } /* Conversation drawer (offcanvas) improvements */ #conversation-modal .offcanvas-body { overflow-y: auto; } /* Let the inner list fill the drawer instead of the 400px cap set inline */ #conversation-modal #conversation-list { max-height: none !important; } /* ============================================================================= NAVBAR MOBILE COLLAPSE - RIGHT ALIGN ============================================================================= */ #navbar-collapse .navbar-nav { text-align: right; } #navbar-collapse .nav-item { text-align: right; } /* Ensure dropdown menus align right on mobile */ @media (max-width: 991.98px) { #navbar-collapse { text-align: right; } #navbar-collapse .navbar-nav { align-items: flex-end; } #navbar-collapse .nav-link { padding-right: 0; } } /* ============================================================================= CONVERSATION THREAD VIEW - LIMIT HEADING SIZES ============================================================================= */ /* Limit markdown heading sizes in conversation thread to keep them compact */ #conversation-thread-view h1, #conversation-thread-view h2, #conversation-thread-view h3, #conversation-thread-view h4 { font-size: 0.95rem !important; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Compact "Board cross validation" switch in the quick model selector. The dbc.Switch here is used label-less — the text is a sibling span in the flex row — so this rule only needs to collapse .form-check down to a tight box containing just the toggle input. Font-size is inherited from the row (0.8rem), so 1em == 0.8rem ≈ 12.8px. */ .cv-switch-compact.form-check { display: inline-flex !important; align-items: center !important; min-height: 0 !important; height: 1em !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; font-size: 0.8rem !important; } .cv-switch-compact .form-check-input { margin: 0 !important; padding: 0 !important; float: none !important; flex-shrink: 0 !important; height: 1em !important; width: 2em !important; display: block !important; /* Bootstrap's switch is a full-em capsule with an SVG knob painted inside the input box. Once the default form-check line-flow offsets are stripped for this compact flex row, the control is geometrically centered but reads slightly low next to 1em text because the glyphs sit above the line box midpoint. A small upward optical correction centers the pill on the external label without adding row height. */ transform: translateY(-0.06em); } /* dbc.Switch always renders an internal .form-check-label element even when no `label` prop is passed; hide it so Bootstrap's default label margins cannot reintroduce vertical slack in the compact row. */ .cv-switch-compact .form-check-label { display: none !important; margin: 0 !important; padding: 0 !important; } /* Mirror the switch's disabled state onto the external html.Label sibling so that while the control is disabled during a compute, the visible caption also dims and shows the not-allowed cursor (matches Bootstrap's built-in disabled .form-check-label styling). Uses :has() which is supported in all current evergreen browsers. */ .cv-switch-row:has(.form-check-input:disabled) label[for="cross-validation-switch"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* 92_combined.min.css */
/* 01_variables.css */ /* ======================== */ /* CSS VARIABLES - MUST LOAD FIRST */ /* File: 00_variables.css */ /* ======================== */ :root { /* ======================== */ /* DARK THEME COLORS */ /* ======================== */ /* Background colors */ --bg-primary: rgb(25, 25, 25); --bg-secondary: rgb(35, 35, 35); --bg-tertiary: rgb(15, 15, 15); --bg-dark: rgb(10, 10, 10); --bg-hover: rgba(255, 255, 255, 0.1); --bg-modal: #2a2a2a; --bg-modal-header: #1a1a1a; /* Border colors */ --border-primary: #444; --border-secondary: #666; --border-tertiary: #888; --border-focus: #0d6efd; --border-focus-shadow: rgba(13, 110, 253, 0.25); /* Text colors */ --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-tertiary: #d0d0d0; --text-muted: #888; --text-disabled: #666; /* Status colors */ --color-success: #00bc8c; --color-success-hover: #009670; --color-danger: #e74c3c; --color-danger-hover: #dc3545; --color-warning: #f39c12; --color-warning-hover: #ffd700; --color-info: #3498db; --color-info-hover: #66b3ff; --color-primary: #0d6efd; --color-primary-hover: #0a58ca; --color-primary-light: #66b3ff; /* Value colors for tables */ --value-positive: #28a745; --value-negative: #dc3545; /* Component specific */ --shadow-default: 0 4px 8px rgba(0, 0, 0, 0.3); --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.2); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5); /* Transitions */ --transition-default: all 0.2s ease; --transition-slow: all 0.3s ease; /* Font sizes */ --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; /* Border radius */ --radius-sm: 3px; --radius-base: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* Z-index layers */ --z-sticky-1: 1; --z-sticky-2: 2; --z-sticky-3: 3; --z-dropdown: 10; --z-modal: 100; --z-tooltip: 1000; } /* 02_global_dynamic_fonts.css */ /* ======================== */ /* GLOBAL DYNAMIC FONT SIZING */ /* File: 01_global_dynamic_fonts.css */ /* ======================== */ /* * This file sets dynamic font sizing for ALL components * Load this AFTER variables.css but BEFORE all other component CSS files * This ensures all components inherit these responsive sizes */ /* ======================== */ /* OVERRIDE CSS VARIABLES BASED ON SCREEN SIZE */ /* ======================== */ /* Mobile First - Smallest sizes */ :root { --font-size-xs: 9px; --font-size-sm: 10px; --font-size-base: 10px; /* Down from 12px */ --font-size-md: 11px; /* Down from 13px */ --font-size-lg: 12px; /* Down from 14px */ --font-size-xl: 14px; /* Down from 16px */ } /* Small devices (landscape phones, 544px and up) */ @media (min-width: 544px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 11px; --font-size-md: 12px; --font-size-lg: 13px; --font-size-xl: 15px; } } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { :root { --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px; --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px; } } /* ======================== */ /* UNIVERSAL FONT SIZE APPLICATION */ /* ======================== */ /* Apply to ALL text elements by default */ body, body * { font-size: var(--font-size-base) !important; }¨ /* ======================== */ /* SPECIFIC COMPONENT OVERRIDES */ /* ======================== */ /* Paragraphs - Keep your existing responsive sizing */ p { font-size: var(--font-size-base) !important; } /* Spans */ span { font-size: var(--font-size-base) !important; } /* Headers - Slightly larger but still dynamic */ h1 { font-size: calc(var(--font-size-xl) * 1.5) !important; } h2 { font-size: calc(var(--font-size-xl) * 1.25) !important; } h3 { font-size: calc(var(--font-size-lg) * 1.2) !important; } h4 { font-size: var(--font-size-lg) !important; } h5 { font-size: var(--font-size-md) !important; } h6 { font-size: var(--font-size-base) !important; } /* ======================== */ /* TABLES (DataTable & dbc.Table) */ /* ======================== */ /* Table body cells */ .table tbody td, .dash-spreadsheet-container td, div.dash-spreadsheet-container .dash-spreadsheet-inner table td { font-size: var(--font-size-base) !important; } /* Table headers - slightly larger */ .table thead th, .dash-spreadsheet-container th, div.dash-spreadsheet-container .dash-spreadsheet-inner table th { font-size: var(--font-size-md) !important; } /* ======================== */ /* FORMS & INPUTS */ /* ======================== */ /* All form controls */ .form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { font-size: var(--font-size-base) !important; } /* Labels */ label, .form-label { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DROPDOWNS & SELECT MENUS */ /* ======================== */ /* Keep dropdowns small as you like them */ .Select-control, .Select-menu-outer, .Select-value-label, .Select-option, .Select-input input, .Select-placeholder { font-size: var(--font-size-sm) !important; /* 10-11px dynamic */ } /* ======================== */ /* BUTTONS */ /* ======================== */ /* All buttons */ .btn, button, [type="button"], [type="submit"], .export { font-size: var(--font-size-base) !important; } /* Small buttons */ .btn-sm { font-size: var(--font-size-sm) !important; } /* Large buttons */ .btn-lg { font-size: var(--font-size-md) !important; } /* ======================== */ /* NAVIGATION & TABS */ /* ======================== */ .nav-link, .nav-tabs .nav-link, .navbar-nav { font-size: var(--font-size-base) !important; } /* ======================== */ /* CARDS */ /* ======================== */ .card-body, .card-title, .card-text { font-size: var(--font-size-base) !important; } .card-header, .card-footer { font-size: var(--font-size-sm) !important; } /* ======================== */ /* MODALS */ /* ======================== */ .modal-body { font-size: var(--font-size-base) !important; } .modal-title { font-size: var(--font-size-lg) !important; } /* ======================== */ /* PAGINATION */ /* ======================== */ .page-number, .current-page-container input, .pagination { font-size: var(--font-size-sm) !important; } /* ======================== */ /* TOOLTIPS & POPOVERS */ /* ======================== */ .tooltip, .popover, .dash-tooltip { font-size: var(--font-size-sm) !important; } /* ======================== */ /* DATE PICKERS */ /* ======================== */ .DateInput_input, .DateInput_input_1, .CalendarDay__default, .CalendarMonth_caption { font-size: var(--font-size-base) !important; } /* ======================== */ /* OVERRIDE FOR SPECIFIC SMALL ELEMENTS */ /* ======================== */ /* Keep these extra small */ .badge, .form-text, small, .small { font-size: var(--font-size-xs) !important; } /* ======================== */ /* ENSURE READABILITY MINIMUMS */ /* ======================== */ /* Never go below 9px for readability */ @media (max-width: 543px) { body, body * { min-font-size: 9px; } } /* ======================== */ /* PLOTLY GRAPH OVERRIDES */ /* ======================== */ /* Let Plotly control its own font sizes */ .js-plotly-plot .plotly text, .js-plotly-plot .legend text, .js-plotly-plot .legendtext, g.legend text.legendtext { font-size: var(--font-size-xs) !important; } /* Alternatively, if you want to use your CSS variable system */ .js-plotly-plot .legend text { font-size: var(--font-size-xs) !important; /* 11px by default */ } /* ======================== */ /* TERMLY BANNER SIZE FIX - SPECIFIC VERSION */ /* Based on exact class names from inspection */ /* ======================== */ /* ======================== */ /* TERMLY BANNER SIZE FIX - DYNAMIC VERSION WITH SCALE VARIABLE */ /* Adjust the --termly-scale variable to make everything bigger/smaller */ /* ======================== */ /* Define the scale variable - CHANGE THIS TO ADJUST SIZE */ :root { --termly-scale: 0.7; /* 0.5 = 50% of original size, 1.0 = 100%, 0.7 = 70%, etc. */ } /* Responsive scale adjustments */ @media (max-width: 768px) { :root { --termly-scale: 0.65; /* Slightly smaller on tablets */ } } @media (max-width: 480px) { :root { --termly-scale: 0.6; /* Even smaller on phones */ } } @media (max-width: 375px) { :root { --termly-scale: 0.55; /* Smallest for iPhone SE and similar */ } } /* Calculate all sizes based on the scale variable */ :root { /* Original sizes multiplied by scale */ --termly-font-size: calc(14px * var(--termly-scale)); --termly-message-font: calc(13px * var(--termly-scale)); --termly-button-font: calc(13px * var(--termly-scale)); /* Padding calculations */ --termly-banner-padding-y: calc(12px * var(--termly-scale)); --termly-banner-padding-x: calc(16px * var(--termly-scale)); --termly-button-padding-y: calc(8px * var(--termly-scale)); --termly-button-padding-x: calc(16px * var(--termly-scale)); /* Heights and gaps */ --termly-button-height: calc(36px * var(--termly-scale)); --termly-gap: calc(12px * var(--termly-scale)); --termly-button-gap: calc(8px * var(--termly-scale)); --termly-max-height: calc(160px * var(--termly-scale)); /* Line height scales less aggressively to maintain readability */ --termly-line-height: calc(1.4 - (0.2 * (1 - var(--termly-scale)))); } /* Main banner container */ .termly-styles-root-b8aebb.termly-styles-banner-e1cd59 { padding: var(--termly-banner-padding-y) var(--termly-banner-padding-x) !important; font-size: var(--termly-font-size) !important; } /* Content wrapper */ .termly-styles-content-fcafe4 { font-size: var(--termly-font-size) !important; gap: var(--termly-gap) !important; } /* Message container */ .termly-styles-messageContainer-d6c726 { font-size: var(--termly-font-size) !important; } /* Message text */ .termly-styles-message-d6c726, .termly-styles-root-d5f97a { font-size: var(--termly-message-font) !important; line-height: var(--termly-line-height) !important; } /* Cookie policy link text */ .termly-styles-root-d5f97a[role="button"][tabindex="0"] { font-size: var(--termly-message-font) !important; text-decoration: underline; } /* Preferences link */ .termly-styles-root-d5f97a[data-testid="preferences-link"] { font-size: var(--termly-message-font) !important; } /* Button container */ .termly-styles-buttons-bb7ed2 { gap: var(--termly-button-gap) !important; } /* Accept button */ .termly-styles-button-bb7ed2[data-tid="banner-accept"] { background: rgb(74, 74, 74) !important; font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; min-height: unset !important; } /* Accept All Cookies button */ .termly-styles-module-root-aa0eb.termly-styles-module-primary-aa493c.termly-styles-module-solid-cd1b13.termly-styles-button-a4543c button { font-size: var(--termly-button-font) !important; padding: var(--termly-button-padding-y) var(--termly-button-padding-x) !important; height: var(--termly-button-height) !important; font-weight: normal !important; } /* Override all text inside the banner */ #termly-code-snippet-support * { font-size: inherit !important; line-height: inherit !important; } /* Ensure the banner container doesn't grow too large */ #termly-code-snippet-support { font-size: var(--termly-font-size) !important; max-height: var(--termly-max-height) !important; } /* Additional micro-adjustments for very small screens */ @media (max-width: 320px) { :root { --termly-scale: 0.45; /* Ultra-compact for very small devices */ } /* Stack buttons vertically on very small screens */ .termly-styles-buttons-bb7ed2 { flex-direction: column !important; width: 100% !important; } .termly-styles-button-bb7ed2, .termly-styles-module-root-aa0eb { width: 100% !important; } } /* 03_typography.css */ /* ======================== */ /* TYPOGRAPHY AND TEXT STYLES */ /* File: 02_typography.css */ /* ======================== */ /* Base font family inheritance */ .dash-table-container, .dash-spreadsheet-container, .dash-spreadsheet-container table, .dash-spreadsheet-container input { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } /* ======================== */ /* RESPONSIVE TYPOGRAPHY */ /* ======================== */ /* Paragraph responsive sizing */ @media (min-width: 1px) { p { font-size: var(--font-size-xs); } } @media (min-width: 544px) { p { font-size: var(--font-size-base); } } @media (min-width: 768px) { p { font-size: var(--font-size-md); } } @media (min-width: 992px) { p { font-size: var(--font-size-md); } } @media (min-width: 1200px) { p { font-size: var(--font-size-md); } } /* Span responsive sizing */ @media (min-width: 1px) { span { font-size: var(--font-size-xs); } } @media (min-width: 544px) { span { font-size: var(--font-size-base); } } @media (min-width: 768px) { span { font-size: var(--font-size-md); } } @media (min-width: 992px) { span { font-size: var(--font-size-md); } } @media (min-width: 1200px) { span { font-size: var(--font-size-md); } } /* H1 responsive sizing */ @media (min-width: 1px) { h1 { font-size: 1.8rem; } } @media (min-width: 544px) { h1 { font-size: 2rem; } } @media (min-width: 768px) { h1 { font-size: 2.2rem; } } @media (min-width: 992px) { h1 { font-size: 2.4rem; } } @media (min-width: 1200px) { h1 { font-size: 2.5rem; } } /* H2 responsive sizing */ @media (min-width: 1px) { h2 { font-size: 1.4rem; } } @media (min-width: 544px) { h2 { font-size: 1.6rem; } } @media (min-width: 768px) { h2 { font-size: 1.8rem; } } @media (min-width: 992px) { h2 { font-size: 1.9rem; } } @media (min-width: 1200px) { h2 { font-size: 2rem; } } /* H3 responsive sizing */ @media (min-width: 1px) { h3 { font-size: 1.2rem; } } @media (min-width: 544px) { h3 { font-size: 1.25rem; } } @media (min-width: 768px) { h3 { font-size: 1.35rem; } } @media (min-width: 992px) { h3 { font-size: 1.5rem; } } @media (min-width: 1200px) { h3 { font-size: 1.75rem; } } /* H4 responsive sizing */ @media (min-width: 1px) { h4 { font-size: 1rem; } } @media (min-width: 544px) { h4 { font-size: 1rem; } } @media (min-width: 768px) { h4 { font-size: 1rem; } } @media (min-width: 992px) { h4 { font-size: 1.1rem; } } @media (min-width: 1200px) { h4 { font-size: 1.1rem; } } /* H5 responsive sizing */ @media (min-width: 1px) { h5 { font-size: 1rem; } } @media (min-width: 544px) { h5 { font-size: 1rem; } } @media (min-width: 768px) { h5 { font-size: 1rem; } } @media (min-width: 992px) { h5 { font-size: 1.1rem; } } @media (min-width: 1200px) { h5 { font-size: 1.1rem; } } /* ======================== */ /* COLOR CODING FOR VALUES */ /* ======================== */ /* Positive values */ .cell-value-positive { color: var(--value-positive); font-weight: 500; } /* Negative values */ .cell-value-negative { color: var(--value-negative); font-weight: 500; } /* Primary text color in modals */ .learn-more-content .text-primary { color: var(--color-info-hover); } /* 04_forms_inputs.css */ /* ======================== */ /* FORM ELEMENTS AND INPUTS */ /* File: 03_forms-inputs.css */ /* ======================== */ /* Base form controls */ .form-control, .form-control:focus, .form-control:valid, input[type="number"], input[type="text"], input.form-control { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); } .form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 0.25rem var(--border-focus-shadow); } /* Form control responsive sizing */ @media (min-width: 1px) { .form-control:valid { font-size: var(--font-size-xs); } } @media (min-width: 768px) { .form-control:valid { font-size: var(--font-size-sm); } } /* Disabled input styling */ input:disabled, .form-control:disabled { background-color: var(--bg-tertiary); color: var(--text-disabled); cursor: not-allowed; opacity: 0.6; } /* ======================== */ /* SELECT DROPDOWNS */ /* ======================== */ /* Select control base styling */ .Select-control { background-color: var(--bg-primary); border: 1px solid var(--border-primary); min-height: 30px; font-size: var(--font-size-base); /* font-size changed to var(--font-size-base): old design was font-size: 11px;*/ } /* Select menu styling */ .Select-menu-outer { background-color: var(--bg-primary); border: 1px solid var(--border-primary); margin-top: 2px; font-size: var(--font-size-sm); /* font-size: 11px; Changed to var(--font-size-sm) to match new design */ } /* Select value and label */ .Select-value, .Select-value-label { color: var(--text-primary); } /* Select input */ .Select-input input { color: var(--text-primary); font-size: var(--font-size-sm); /* font-size: 11px; changed to var(--font-size-base): old design was font-size: 11px;* */ } /* Select options */ .Select-option { background-color: var(--bg-primary); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); } .Select-option:hover { background-color: var(--bg-hover); } .Select-option.is-selected { background-color: var(--color-primary); color: var(--text-primary); } /* Dropdown container */ .dash-dropdown-container { background-color: var(--bg-primary); } /* Custom form select (date dropdowns) */ .form-select-sm { background-color: #222; color: var(--text-primary); border: 1px solid var(--border-primary); transition: var(--transition-default); } .form-select-sm:focus { background-color: #2a2a2a; border-color: var(--color-success); box-shadow: 0 0 0 0.25rem rgba(0, 188, 140, 0.25); color: var(--text-primary); } .form-select-sm option { background-color: #222; color: var(--text-primary); } .form-select-sm:hover { border-color: var(--border-secondary); } /* ======================== */ /* EXPORT BUTTONS */ /* ======================== */ .export { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 6px 12px; border-radius: var(--radius-base); font-size: var(--font-size-base); cursor: pointer; transition: var(--transition-default); margin: var(--spacing-xs); } .export:hover { background-color: var(--bg-hover); border-color: var(--border-secondary); } /* ======================== */ /* DCC.DROPDOWN FIXES */ /* ======================== */ /* Fix focus state - prevent white background */ .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; border-color: var(--border-focus) !important; box-shadow: 0 0 0 0.25rem var(--border-focus-shadow) !important; } /* Fix selected value text color for single select */ .Select--single > .Select-control .Select-value { color: var(--text-primary) !important; } /* Ensure text remains white in all states */ .Select-value-label { color: var(--text-primary) !important; } /* Fix placeholder text color */ .Select-placeholder { color: var(--text-muted) !important; } /* Fix dropdown arrow color */ .Select-arrow { border-color: var(--text-muted) transparent transparent !important; } /* Fix dropdown arrow on hover */ .Select-control:hover .Select-arrow { border-color: var(--text-primary) transparent transparent !important; } /* Additional fixes for multi-select if needed */ .Select--multi .Select-value { background-color: var(--bg-secondary) !important; border-color: var(--border-primary) !important; color: var(--text-primary) !important; } .Select--multi .Select-value-icon { border-color: var(--border-primary) !important; } .Select--multi .Select-value-icon:hover { background-color: var(--bg-hover) !important; color: var(--text-primary) !important; } /* ======================== */ /* DROPDOWN STATE FIXES - Add these to the end of 03_forms_inputs.css */ /* ======================== */ /* Fix for dropdown background turning white after callbacks */ .Select-control, .Select.is-open > .Select-control, .Select.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Ensure menu stays dark */ .Select-menu-outer, .Select.is-open .Select-menu-outer { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Fix for multi-select specific issues */ .Select--multi .Select-control, .Select--multi.is-open > .Select-control, .Select--multi.is-focused:not(.is-open) > .Select-control { background-color: var(--bg-primary) !important; } /* Handle React-Select's dynamic classes */ .Select-control, .Select-control:hover, .Select--single > .Select-control, .Select--multi > .Select-control { background-color: rgb(25, 25, 25) !important; } /* Ensure dropdown arrow and clear button stay visible */ .Select-arrow-zone, .Select-clear-zone { background-color: transparent !important; } /* Handle the input field inside the dropdown */ .Select-input > input, .Select--multi .Select-input > input { background-color: transparent !important; color: var(--text-primary) !important; } /* Fix for when dropdown is disabled */ .Select.is-disabled > .Select-control { background-color: var(--bg-tertiary) !important; opacity: 0.6; } /* Additional specificity for problematic states */ .dash-dropdown .Select-control, .dash-dropdown .Select.is-open > .Select-control, .dash-dropdown .Select.is-focused > .Select-control { background-color: rgb(25, 25, 25) !important; color: var(--text-primary) !important; } /* Force dark background on all Select elements regardless of state */ div[class*="Select"] .Select-control { background-color: rgb(25, 25, 25) !important; } /* Handle Dash's wrapper divs */ .dash-dropdown-container .Select-control, .dash-dropdown-container .Select-menu-outer { background-color: var(--bg-primary) !important; } /* Ensure the dropdown doesn't inherit any white backgrounds from parent elements */ .Select-control * { background-color: transparent !important; } /* Fix for dropdown options */ .Select-option, .Select-option.is-focused, .Select-option.is-selected { background-color: var(--bg-primary) !important; } .Select-option.is-focused:not(.is-selected) { background-color: var(--bg-hover) !important; } .Select-option.is-selected { background-color: var(--color-primary) !important; } /* Ensure no white background bleeds through from Bootstrap or other sources */ .form-control.Select-input, .form-control .Select-control { background-color: transparent !important; } /* ======================== */ /* SAFER DASH RADIO/CHECKBOX SPACING */ /* This version ONLY affects radio buttons and checkboxes */ /* ======================== */ /* Only target labels that CONTAIN radio buttons */ label:has(input[type="radio"]) { margin-right: 8px !important; margin-bottom: 8px !important; display: inline-flex !important; align-items: center !important; } /* Only target labels that CONTAIN checkboxes */ label:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; display: inline-flex !important; align-items: center !important; } /* Spacing for the radio/checkbox inputs themselves */ input[type="radio"], input[type="checkbox"] { margin-right: 8px !important; /*margin-left: 2px !important;*/ cursor: pointer; } /* For browsers that don't support :has() - more specific targeting */ label > input[type="radio"], label > input[type="checkbox"] { margin-right: 8px !important; } /* Only affect labels with inline-block IF they contain radio/checkbox */ label[style*="inline-block"]:has(input[type="radio"]), label[style*="inline-block"]:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; } /* Remove margin from last radio/checkbox label in a group */ div.mb-3 > label:last-child:has(input[type="radio"]), div.mb-3 > label:last-child:has(input[type="checkbox"]) { margin-right: 0 !important; } /* Alternative approach using attribute selectors for Dash components */ /* This targets RadioItems and Checklist components specifically */ div[id*="-radioitems"] label, div[id*="-checklist"] label, div[id*="radio"] label:has(input[type="radio"]), div[id*="check"] label:has(input[type="checkbox"]) { margin-right: 8px !important; margin-bottom: 8px !important; } /* Fallback for older browsers without :has() support */ /* Only applies to labels that are direct children of common Dash containers */ .dash-radioitems > label, .dash-checklist > label, div[class*="radio"] > label, div[class*="check"] > label { margin-right: 8px !important; margin-bottom: 8px !important; } /* Ensure we don't affect any other inline-block elements */ /* Reset margins for non-radio/checkbox labels */ label:not(:has(input[type="radio"])):not(:has(input[type="checkbox"])) { /* These labels keep their default styling */ } /* 05_tables.css */ /* ======================== */ /* TABLE STYLES */ /* File: 04_tables.css */ /* ======================== */ /* ======================== */ /* STICKY COLUMNS - DEFAULT (First column) */ /* ======================== */ th:first-child, td:first-child { position: sticky !important; left: 0px; z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - TWO COLUMNS */ /* Apply class 'two-columns-sticky' when first column has collapse button */ /* ======================== */ .two-columns-sticky th:nth-child(1), .two-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .two-columns-sticky th:nth-child(2), .two-columns-sticky td:nth-child(2) { position: sticky !important; left: 20px; /* Adjust based on first column width - it was 31 before*/ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* STICKY COLUMNS - THREE COLUMNS */ /* Apply class 'three-columns-sticky' when both [+] and [X] buttons present */ /* ======================== */ .three-columns-sticky th:nth-child(1), .three-columns-sticky td:nth-child(1) { position: sticky !important; left: 0px; z-index: var(--z-sticky-3); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(2), .three-columns-sticky td:nth-child(2) { position: sticky !important; left: 25px; /* Width of first column */ z-index: var(--z-sticky-2); white-space: nowrap; background-color: var(--bg-secondary); } .three-columns-sticky th:nth-child(3), .three-columns-sticky td:nth-child(3) { position: sticky !important; left: 50px; /* Width of first + second columns */ z-index: var(--z-sticky-1); white-space: nowrap; background-color: var(--bg-secondary); } /* ======================== */ /* SPECIAL COLUMN WIDTHS */ /* ======================== */ /* Fixed width "+" column */ .plus-col, .plus-col > button { width: 20px; min-width: 20px; max-width: 20px; text-align: center; padding: 0; } /* Fixed width "X" column */ .remove-col, .remove-col > button { width: 25px; min-width: 25px; max-width: 25px; text-align: center; padding: 0; } /* First sticky column: "+" */ th.plus-col, td.plus-col { position: sticky; left: 0; z-index: var(--z-sticky-2); background: var(--bg-secondary); } /* Second sticky column: "X" (if present) or ticker */ th.remove-col, td.remove-col { position: sticky; left: 25px; /* Exactly width of first column */ z-index: var(--z-sticky-1); background: var(--bg-secondary); } /* 06_datatable.css */ /* ======================== */ /* DASH DATATABLE STYLES - TRADITIONAL TABLE MATCHING */ /* File: 05_datatable.css */ /* ======================== */ /* Override inline styles with higher specificity */ .dash-table-container .dash-spreadsheet-container { --accent: #0d6efd !important; --border: #3a3a3a !important; --text-color: #ffffff !important; --background-color: #1a1a1a !important; --hover: #2a2a2a !important; } /* Main container */ .dash-table-container { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; } /* Table wrapper */ .dash-spreadsheet-container { border: none !important; border-radius: 0 !important; overflow: hidden !important; } /* Inner container */ .dash-spreadsheet-inner { background-color: transparent !important; } /* The actual table - TRADITIONAL GRID */ .dash-spreadsheet-inner table { background-color: transparent !important; border-collapse: collapse !important; /* No gaps between cells */ border-spacing: 0 !important; } /* ============= HEADERS - DARKER LIKE LEFT TABLE ============= */ .dash-spreadsheet .dash-header { background-color: #141414 !important; /* Darker header */ font-weight: 600 !important; } .dash-spreadsheet-inner th, .dash-header th, .dash-filter th { background-color: #141414 !important; /* Very dark header */ color: #ffffff !important; font-weight: 600 !important; padding: 8px 10px !important; /* Reduced padding to match */ border: none !important; border-bottom: 1px solid #3a3a3a !important; /* Bottom border only */ border-radius: 0 !important; /* No rounded corners */ font-size: 11px !important; /* Smaller to match */ text-align: left !important; } /* Column headers specifically */ .column-header-name { color: #ffffff !important; font-weight: 600 !important; } /* ============= DATA CELLS - TRADITIONAL STYLE ============= */ .dash-spreadsheet-inner td, .dash-cell-value, .dash-select-cell { background-color: transparent !important; /* Inherit row background */ color: #e0e0e0 !important; /* Slightly softer white */ border: none !important; border-bottom: 1px solid #2a2a2a !important; /* Horizontal lines only */ border-radius: 0 !important; /* No rounded corners */ padding: 6px 10px !important; /* Tighter padding */ font-size: 11px !important; font-weight: 400 !important; /* Regular weight */ line-height: 1.4 !important; /* Tighter line height */ transition: none !important; /* Remove animations */ } /* Cell content */ .dash-cell-value { background-color: transparent !important; border: none !important; padding: 0 !important; } /* ============= ROW BACKGROUNDS - SUBTLE STRIPING ============= */ .dash-spreadsheet-inner tbody tr { background-color: #1a1a1a !important; /* Base background */ } .dash-spreadsheet-inner tbody tr:nth-child(even) { background-color: #1d1d1d !important; /* Very subtle stripe */ } /* ============= HOVER STATES - SUBTLE ============= */ .dash-spreadsheet-inner tbody tr:hover { background-color: #252525 !important; /* Subtle hover */ } .dash-spreadsheet-inner tbody tr:hover td { background-color: transparent !important; /* Cells inherit row background */ transform: none !important; /* No scaling */ box-shadow: none !important; /* No shadow */ } /* ============= SELECTED/ACTIVE CELLS ============= */ .dash-spreadsheet td.focused { background-color: rgba(13, 110, 253, 0.15) !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet td.cell--selected { background-color: rgba(13, 110, 253, 0.08) !important; } /* ============= FILTERS ============= */ .dash-filter { background-color: #1a1a1a !important; } .dash-filter input { background-color: #1a1a1a !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 2px !important; /* Minimal rounding */ padding: 4px 6px !important; font-size: 11px !important; } .dash-filter input:focus { border-color: #0d6efd !important; outline: none !important; } .dash-filter--case { background-color: #1a1a1a !important; } /* ============= PAGINATION CONTAINER ============= */ .previous-next-container { background-color: #1a1a1a !important; padding: 8px !important; border-top: 1px solid #3a3a3a !important; display: flex !important; align-items: center !important; gap: 4px !important; } /* ============= PAGINATION BUTTONS - TRADITIONAL ============= */ .previous-page, .next-page, .first-page, .last-page, .page-number { border-radius: 3px !important; /* Minimal rounding */ background: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; padding: 4px 8px !important; height: 28px !important; /* Smaller height */ box-sizing: border-box !important; font-size: 11px !important; font-weight: 400 !important; line-height: 20px !important; transition: background-color 0.15s ease !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; margin: 0 2px !important; } .page-number:hover, .previous-page:hover:not([disabled]), .next-page:hover:not([disabled]), .first-page:hover:not([disabled]), .last-page:hover:not([disabled]) { background: #2a2a2a !important; border-color: #444 !important; transform: none !important; /* No movement */ box-shadow: none !important; /* No shadow */ } /* Disabled state */ .previous-page[disabled], .next-page[disabled], .first-page[disabled], .last-page[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; } /* ============= CURRENT PAGE INPUT - TRADITIONAL ============= */ /* Remove pseudo-elements */ .current-page-container::before, .current-page-container::after, .current-page-container input::before, .current-page-container input::after, .current-page-container *::before, .current-page-container *::after { content: none !important; display: none !important; } /* Container alignment */ .current-page-container { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; background: transparent !important; height: 28px !important; line-height: 28px !important; margin: 0 2px !important; } /* Hide duplicate elements */ .current-page-container > *:not(input) { display: none !important; } /* Traditional input style */ .current-page-container input { border-radius: 3px !important; background: #0d6efd !important; border: 1px solid #0d6efd !important; color: #ffffff !important; font-weight: 500 !important; padding: 4px 8px !important; width: 50px !important; height: 28px !important; box-sizing: border-box !important; text-align: center !important; font-size: 11px !important; line-height: 20px !important; transition: background-color 0.15s ease !important; box-shadow: none !important; position: relative !important; top: 0 !important; margin: 0 !important; vertical-align: middle !important; z-index: 1 !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(0) !important; } /* Subtle hover effect */ .current-page-container input:hover, .current-page-container input:focus { background: #0a58ca !important; border-color: #0a58ca !important; box-shadow: none !important; transform: none !important; outline: none !important; } /* ============= SORT INDICATORS ============= */ .sort { color: #0d6efd !important; font-weight: 600 !important; padding-left: 4px !important; font-size: 10px !important; } .sort.descending::after { content: ' ↓' !important; } .sort.ascending::after { content: ' ↑' !important; } /* ============= SCROLLBARS ============= */ .dash-spreadsheet-inner::-webkit-scrollbar, .dash-table-viewport::-webkit-scrollbar { width: 8px !important; height: 8px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-track, .dash-table-viewport::-webkit-scrollbar-track { background: #1a1a1a !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb, .dash-table-viewport::-webkit-scrollbar-thumb { background: #3a3a3a !important; border-radius: 2px !important; } .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover, .dash-table-viewport::-webkit-scrollbar-thumb:hover { background: #4a4a4a !important; } /* ============= EDITABLE CELLS ============= */ .dash-spreadsheet-inner .cell--editing { background-color: #1a1a1a !important; box-shadow: inset 0 0 0 1px #0d6efd !important; } .dash-spreadsheet-inner .cell--editing input { background-color: transparent !important; color: #ffffff !important; font-size: 11px !important; } /* ============= DROPDOWN CELLS ============= */ .dash-dropdown { background-color: #1a1a1a !important; } .Select-control { background-color: #1a1a1a !important; border-color: #3a3a3a !important; } .Select-menu-outer { background-color: #1a1a1a !important; border-color: #3a3a3a !important; color: #ffffff !important; } /* ============= FORCE OVERRIDES ============= */ div.dash-table-container * { background-color: inherit !important; color: inherit !important; } div.dash-table-container table, div.dash-table-container tbody, div.dash-table-container thead, div.dash-table-container tr { background-color: transparent !important; } /* ============= EXPORT BUTTONS ============= */ .export { background-color: #252525 !important; color: #ffffff !important; border: 1px solid #3a3a3a !important; border-radius: 3px !important; padding: 4px 8px !important; margin: 2px !important; cursor: pointer !important; font-size: 11px !important; } .export:hover { background-color: #2a2a2a !important; border-color: #444 !important; } /* ============= ENSURE TEXT CONSISTENCY ============= */ .dash-spreadsheet-inner td, .dash-spreadsheet-inner th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; } /* ============= HORIZONTAL SCROLLING FIX ============= */ /* Enable horizontal scrolling for all DataTables */ .dash-table-container { overflow-x: auto !important; width: 100% !important; } .dash-spreadsheet-container { overflow-x: auto !important; } /* Ensure the table can expand beyond container width */ .dash-table-container .dash-spreadsheet-inner { min-width: 100%; width: auto !important; } /* Optional: Ensure viewport scrolling works properly */ .dash-table-viewport { overflow-x: auto !important; } /* Optional: Fix for when table is inside a Bootstrap column */ .col .dash-table-container, .col-md-6 .dash-table-container, .col-lg-6 .dash-table-container, [class*="col-"] .dash-table-container { max-width: 100%; overflow-x: auto !important; } /* ============= FIX FOR STICKY COLUMNS IN DATATABLE ============= */ /* Ensure sticky columns have opaque backgrounds */ /* First sticky column */ .dash-spreadsheet-inner td:first-child, .dash-spreadsheet-inner th:first-child { background-color: #252525 !important; /* Opaque background matching your theme */ position: sticky !important; left: 0; z-index: 2; } /* For two-columns-sticky class */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 3; } .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 31px; z-index: 2; } /* For three-columns-sticky class */ .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1) { background-color: #252525 !important; position: sticky !important; left: 0; z-index: 4; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2) { background-color: #252525 !important; position: sticky !important; left: 25px; z-index: 3; } .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3), .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3) { background-color: #252525 !important; position: sticky !important; left: 50px; z-index: 2; } /* Ensure sticky headers also have opaque backgrounds */ .dash-spreadsheet .dash-header th:first-child, .dash-spreadsheet .dash-header th:nth-child(2), .dash-spreadsheet .dash-header th:nth-child(3) { background-color: #141414 !important; /* Match your header background */ } /* Handle hover states for sticky columns */ .dash-spreadsheet-inner tbody tr:hover td:first-child, .dash-spreadsheet-inner tbody tr:hover td:nth-child(2), .dash-spreadsheet-inner tbody tr:hover td:nth-child(3) { background-color: #2a2a2a !important; /* Slightly lighter on hover */ } /* Ensure cell content within sticky columns doesn't override */ .dash-spreadsheet-inner td:first-child .dash-cell-value, .dash-spreadsheet-inner td:nth-child(2) .dash-cell-value, .dash-spreadsheet-inner td:nth-child(3) .dash-cell-value { background-color: transparent !important; /* Keep content transparent */ } /* Add shadow to sticky columns for better visual separation */ .dash-spreadsheet-inner td:first-child::after, .dash-spreadsheet-inner th:first-child::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* For multiple sticky columns, only add shadow to the last sticky column */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(3)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(3)::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; width: 5px; background: linear-gradient(to right, rgba(0,0,0,0.1), transparent); pointer-events: none; } /* Remove shadow from non-last sticky columns in multi-sticky setups */ .two-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .two-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(1)::after, .three-columns-sticky .dash-spreadsheet-inner td:nth-child(2)::after, .three-columns-sticky .dash-spreadsheet-inner th:nth-child(2)::after { display: none; } /* 07_components.css */ /* ======================== */ /* UI COMPONENTS */ /* File: 05_components.css */ /* ======================== */ /* ======================== */ /* CARD HOVER EFFECTS */ /* ======================== */ /* Hover effect for cards with 'hover-card' class */ .hover-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-card:hover { transform: scale(1.05); box-shadow: var(--shadow-hover); } /* Custom card shadow */ .custom-card-shadow { box-shadow: var(--shadow-default); } /* ======================== */ /* LINK HOVER EFFECTS */ /* ======================== */ .hover-link:hover { cursor: pointer; } /* ======================== */ /* NAVIGATION TABS */ /* ======================== */ /* Pill-style modern tabs */ .nav-tabs { border-bottom: none; background-color: rgba(0, 0, 0, 0.2); padding: var(--spacing-sm); border-radius: var(--radius-xl); display: inline-flex; gap: var(--spacing-xs); } .nav-tabs .nav-link { border: none; border-radius: var(--radius-lg); background-color: transparent; color: rgba(255, 255, 255, 0.7); padding: 10px 18px; transition: var(--transition-slow); font-size: var(--font-size-md); font-weight: 500; } .nav-tabs .nav-link:hover { background-color: var(--bg-hover); color: var(--text-primary); } .nav-tabs .nav-link.active { background-color: var(--color-primary); color: var(--text-primary); box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3); } /* ======================== */ /* TOOLTIPS */ /* ======================== */ .dash-tooltip { background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-base); padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-base); box-shadow: var(--shadow-default); } /* ======================== */ /* LOADING STATE */ /* ======================== */ .dash-loading { background-color: rgba(35, 35, 35, 0.9); color: var(--text-primary); } .dash-loading-spinner { border-color: var(--border-primary); border-top-color: var(--color-primary); } /* 08_date_picker.css */ /* ======================== */ /* DATE PICKER COMPONENT */ /* File: 06_date-picker.css */ /* ======================== */ /* Date input fields */ .DateInput_input { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } /* Date input variant (used by some date pickers) */ .DateInput_input_1 { background-color: var(--bg-primary); color: var(--text-primary); font-size: inherit; height: 25px; border: 1px solid var(--border-primary); } .DateInput_input__focused { border-color: var(--border-focus); background-color: #2b2b2b; } /* Date picker container and wrapper */ .SingleDatePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } .DateRangePicker_picker { background-color: #1a1a1a; border: 1px solid var(--border-primary); border-radius: var(--radius-base); box-shadow: var(--shadow-lg); } /* Calendar base */ .DayPicker { background-color: #1a1a1a; } .DayPicker__horizontal { background-color: #1a1a1a; } /* Month container */ .CalendarMonth { background-color: #1a1a1a; padding: 0; } /* Calendar month caption - THIS IS THE YEAR/MONTH HEADER */ .CalendarMonth_caption { color: var(--text-primary); background-color: #1a1a1a; font-weight: 600; font-size: var(--font-size-xl); padding: 10px 0; margin-bottom: 5px; } /* Navigation arrows */ .DayPickerNavigation_button { background-color: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); } .DayPickerNavigation_button:hover { background-color: var(--bg-hover); } .DayPickerNavigation_svg { fill: var(--text-primary); } /* Week headers (Su Mo Tu etc) - HIDDEN */ .DayPicker_weekHeader { display: none !important; } .DayPicker_weekHeader_ul { display: none !important; } .DayPicker_weekHeader_li { display: none !important; } /* Calendar table */ .CalendarMonth_table { background-color: #1a1a1a; margin: 0; margin-top: 5px; /* Add space above the date grid */ } /* Calendar week (tr elements) */ .CalendarWeek { background-color: #1a1a1a; } /* Calendar days */ .CalendarDay__default { background-color: #1a1a1a; color: var(--text-primary); border: 1px solid #2a2a2a; font-weight: 400; height: 35px; vertical-align: middle; } .CalendarDay__default:hover { background-color: #2a2a2a; color: var(--text-primary); border: 1px solid var(--border-primary); } /* Fix for the container edges */ .DayPicker_transitionContainer { background-color: #1a1a1a; padding-bottom: 10px; } .DayPickerKeyboardShortcuts_buttonReset { display: none !important; /* Hide the question mark button */ } /* Today */ .CalendarDay__today { background-color: #2a2a2a; color: var(--color-info-hover); font-weight: 600; } /* Selected day */ .CalendarDay__selected { background-color: var(--color-primary); color: var(--text-primary); border: 1px solid var(--color-primary); font-weight: 600; } .CalendarDay__selected:hover { background-color: var(--color-primary-hover); border: 1px solid var(--color-primary-hover); } /* Selected span */ .CalendarDay__selected_span { background-color: rgba(13, 110, 253, 0.2); color: var(--text-primary); border: 1px solid rgba(13, 110, 253, 0.3); } /* Hovered span */ .CalendarDay__hovered_span { background-color: rgba(13, 110, 253, 0.1); border: 1px solid rgba(13, 110, 253, 0.2); } /* Blocked/disabled days */ .CalendarDay__blocked_calendar { background-color: #1a1a1a; color: var(--border-primary); text-decoration: line-through; } /* Outside month days */ .CalendarDay__blocked_out_of_range { background-color: #1a1a1a; color: #333; } /* Additional fixes for white edges */ .DateRangePickerInput { background-color: #1a1a1a; } .DateRangePicker { background-color: #1a1a1a; } .DayPicker__withBorder { background-color: #1a1a1a; box-shadow: none; } /* Force dark background on all date picker elements */ .SingleDatePicker, .SingleDatePickerInput { background-color: transparent; } /* Override any default white backgrounds */ div[class*="DayPicker"], div[class*="CalendarMonth"], div[class*="CalendarDay"] { background-color: #1a1a1a; } /* Fix spacing to prevent first row from being hidden */ .CalendarMonthGrid { background-color: #1a1a1a; } .CalendarMonthGrid__horizontal { background-color: #1a1a1a; } /* Ensure proper spacing for the first week */ .CalendarMonth tbody { background-color: #1a1a1a; } .CalendarMonth_table tbody tr:first-child { height: auto; min-height: 35px; } /* 09_modals.css */ /* ======================== */ /* MODAL DIALOGS */ /* File: 07_modals.css */ /* ======================== */ /* Modal base styling */ .modal-content { background-color: var(--bg-modal); border: 1px solid var(--border-primary); } .modal-header { background-color: var(--bg-modal-header); border-bottom: 1px solid var(--border-primary); color: var(--text-primary); /* This will use white ?*/ } .modal-body { background-color: var(--bg-modal); color: var(--text-secondary); } .modal-footer { background-color: var(--bg-modal-header); border-top: 1px solid var(--border-primary); } /* Close button */ #close-learn-more { background-color: var(--border-primary); border-color: var(--border-primary); } #close-learn-more:hover { background-color: #555; border-color: #555; } /* ======================== */ /* LEARN MORE MODAL SPECIFIC */ /* ======================== */ /* Learn More content styling */ .learn-more-content { font-size: var(--font-size-xl); line-height: 1.6; color: var(--text-secondary); } .learn-more-content h5 { color: var(--color-primary-light); font-weight: 600; border-bottom: 2px solid var(--border-primary); padding-bottom: var(--spacing-sm); } .learn-more-content h6 { color: #ffcc66; font-size: 18px; margin-top: var(--spacing-xl); } .learn-more-content p { color: var(--text-tertiary); margin-bottom: 15px; } .learn-more-content ul { margin-left: var(--spacing-xl); margin-bottom: 15px; } .learn-more-content li { margin-bottom: var(--spacing-sm); color: var(--text-tertiary); } .learn-more-content strong { color: var(--color-warning-hover); font-weight: 600; } /* Learn More Button */ #learn-more-button { border-color: var(--color-primary-light); color: var(--color-primary-light); font-weight: 500; transition: var(--transition-slow); } #learn-more-button:hover { background-color: var(--color-primary-light); color: var(--bg-modal-header); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 179, 255, 0.4); } /* ======================== */ /* MODAL SCROLLBAR */ /* ======================== */ .modal-body::-webkit-scrollbar { width: 10px; } .modal-body::-webkit-scrollbar-track { background: var(--bg-modal-header); } .modal-body::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 5px; } .modal-body::-webkit-scrollbar-thumb:hover { background: #555; } /* 10_scrollbars.css */ /* ======================== */ /* CUSTOM SCROLLBARS */ /* File: 08_scrollbars.css */ /* ======================== */ /* Dash DataTable scrollbars */ .dash-spreadsheet-container::-webkit-scrollbar, .dash-spreadsheet-inner::-webkit-scrollbar { width: 8px; height: 8px; } .dash-spreadsheet-container::-webkit-scrollbar-track, .dash-spreadsheet-inner::-webkit-scrollbar-track { background-color: var(--bg-primary); } .dash-spreadsheet-container::-webkit-scrollbar-thumb, .dash-spreadsheet-inner::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover, .dash-spreadsheet-inner::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } /* 11_dbc_table.css */ /* ======================== */ /* DASH BOOTSTRAP COMPONENTS TABLE STYLES */ /* File: 10_dbc_table.css */ /* ======================== */ /* ======================== */ /* TABLE BODY STYLES */ /* ======================== */ /* Base table body cells */ .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-base); /* 12px by default */ color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); /* 8px 12px */ vertical-align: middle; } /* Alternative: If you want different font sizes for different screen sizes */ @media (min-width: 1px) { .table tbody td { font-size: var(--font-size-xs); /* 10px on mobile */ } } @media (min-width: 768px) { .table tbody td { font-size: var(--font-size-sm); /* 11px on tablet */ } } @media (min-width: 992px) { .table tbody td { font-size: var(--font-size-base); /* 12px on desktop */ } } /* ======================== */ /* TABLE HEADER STYLES */ /* ======================== */ /* Table header cells */ .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-md); /* 13px */ font-weight: 600; color: var(--text-primary); /*text-transform: uppercase; Optional: makes headers stand out */ letter-spacing: 0.5px; /* Optional: adds spacing between letters */ padding: var(--spacing-md) var(--spacing-md); /* 12px padding */ vertical-align: middle; border-bottom: 2px solid var(--border-primary); /* Thicker border for header */ } /* Alternative header styling (remove text-transform if not wanted) */ .table thead th { background-color: var(--bg-secondary); /* Slightly different background */ position: relative; } /* ======================== */ /* HOVER EFFECTS */ /* ======================== */ /* Row hover effect for better readability */ .table tbody tr:hover { background-color: var(--bg-hover) !important; transition: var(--transition-default); } /* Ensure text remains readable on hover */ .table tbody tr:hover td { color: var(--text-primary); } /* ======================== */ /* STRIPED TABLE VARIANT */ /* ======================== */ /* If using striped tables */ .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } .table-striped tbody tr:hover { background-color: var(--bg-hover) !important; } /* ======================== */ /* BORDERED TABLE VARIANT */ /* ======================== */ .table-bordered { border: 1px solid var(--border-primary); } .table-bordered td, .table-bordered th { border: 1px solid var(--border-primary); } /* ======================== */ /* SMALL/COMPACT TABLE VARIANT */ /* ======================== */ .table-sm td, .table-sm th { padding: var(--spacing-xs) var(--spacing-sm); /* 4px 8px for compact */ font-size: var(--font-size-sm); /* 11px for compact */ } /* ======================== */ /* RESPONSIVE TABLE WRAPPER */ /* ======================== */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Custom scrollbar for responsive tables */ .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background-color: var(--bg-primary); } .table-responsive::-webkit-scrollbar-thumb { background-color: var(--border-secondary); border-radius: var(--radius-base); } .table-responsive::-webkit-scrollbar-thumb:hover { background-color: var(--border-tertiary); } /* ======================== */ /* SPECIFIC DBC.TABLE TARGETING */ /* ======================== */ /* More specific selectors for dbc.Table if needed */ div[class*="dash-table"] .table tbody td, div[class*="dash-bootstrap"] .table tbody td { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-base); } div[class*="dash-table"] .table thead th, div[class*="dash-bootstrap"] .table thead th { font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--font-size-md); font-weight: 600; } /* ======================== */ /* CUSTOM FONT SIZE CLASSES */ /* ======================== */ /* Use these classes to override default sizes */ .table-font-xs tbody td { font-size: var(--font-size-xs) !important; } /* 10px */ .table-font-sm tbody td { font-size: var(--font-size-sm) !important; } /* 11px */ .table-font-md tbody td { font-size: var(--font-size-md) !important; } /* 13px */ .table-font-lg tbody td { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xs thead th { font-size: var(--font-size-sm) !important; } /* 11px */ .table-header-sm thead th { font-size: var(--font-size-base) !important; } /* 12px */ .table-header-md thead th { font-size: var(--font-size-md) !important; } /* 13px */ .table-header-lg thead th { font-size: var(--font-size-lg) !important; } /* 14px */ .table-header-xl thead th { font-size: var(--font-size-xl) !important; } /* 16px */ /* ======================== */ /* ALIGNMENT UTILITIES */ /* ======================== */ .table .text-left { text-align: left !important; } .table .text-center { text-align: center !important; } .table .text-right { text-align: right !important; } .table .align-top { vertical-align: top !important; } .table .align-middle { vertical-align: middle !important; } .table .align-bottom { vertical-align: bottom !important; } /* ======================== */ /* COLOR CODING FOR VALUES (matching DataTable) */ /* ======================== */ .table .cell-value-positive, .table .text-success { color: var(--value-positive); font-weight: 500; } .table .cell-value-negative, .table .text-danger { color: var(--value-negative); font-weight: 500; }