/* * dark-mode.css * ───────────────────────────────────────────────────────────────────────────── * Overrides for hardcoded colors in style.css and custom.css that Bootstrap's * own data-bs-theme="dark" cannot reach automatically. * * Applied when: * ───────────────────────────────────────────────────────────────────────────── */ /* ── Color palette (for reference) ──────────────────────────────────────────── --dk-bg-base : #13161d page canvas --dk-bg-surface : #1a1e2b header / sidebar / cards --dk-bg-elevated : #1e2333 table rows / modal columns --dk-bg-subtle : #242a3a alternating rows / hover base --dk-border : #2e3451 dividers / borders --dk-text : #e2e8f0 primary text --dk-text-muted : #8892a4 secondary text ──────────────────────────────────────────────────────────────────────────── */ /* ============================================================= Base – body & page background ============================================================= */ [data-bs-theme="dark"] body { background: #13161d; color: #e2e8f0; } [data-bs-theme="dark"] a { color: #7c9ef5; } [data-bs-theme="dark"] a:hover { color: #a3b8f8; } [data-bs-theme="dark"] .pagetitle h1 { color: #c8d3ea; } /* ============================================================= Header / Topbar ============================================================= */ [data-bs-theme="dark"] .header { background-color: #1a1e2b; border-bottom: 1px solid #2e3451; box-shadow: 0 1px 6px rgba(0,0,0,.4); } [data-bs-theme="dark"] .header .search-form input { background: #242a3a; border-color: #2e3451; color: #e2e8f0; } [data-bs-theme="dark"] .header .search-form input::placeholder { color: #8892a4; } [data-bs-theme="dark"] .logo span { color: #e2e8f0; } [data-bs-theme="dark"] .header-nav .nav-icon { color: #8892a4; } [data-bs-theme="dark"] .header-nav .nav-icon:hover { color: #e2e8f0; } [data-bs-theme="dark"] .header-nav .nav-profile, [data-bs-theme="dark"] .header-nav .nav-profile span, [data-bs-theme="dark"] .header-nav .nav-profile b { color: #e2e8f0; } /* Profile dropdown */ [data-bs-theme="dark"] .header-nav .profile .dropdown-header h6 { color: #e2e8f0; } [data-bs-theme="dark"] .header-nav .profile .dropdown-header span { color: #8892a4; } [data-bs-theme="dark"] .header-nav .profile .dropdown-item { color: #c5cde0; } [data-bs-theme="dark"] .header-nav .profile .dropdown-item i { color: #8892a4; } [data-bs-theme="dark"] .header-nav .notifications .notification-item:hover, [data-bs-theme="dark"] .header-nav .messages .message-item:hover, [data-bs-theme="dark"] .header-nav .profile .dropdown-item:hover { background-color: #242a3a; color: #e2e8f0; } /* Generic dropdown items across the whole app */ [data-bs-theme="dark"] .dropdown-menu .dropdown-item { color: #c5cde0; } [data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { background-color: #242a3a; color: #e2e8f0; } [data-bs-theme="dark"] .dropdown-menu .dropdown-header { color: #8892a4; } [data-bs-theme="dark"] .dropdown-menu .dropdown-divider { border-color: #2e3451; } /* ============================================================= Sidebar ============================================================= */ [data-bs-theme="dark"] .sidebar { background-color: #1a1e2b; border-right: 1px solid #2e3451; } [data-bs-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background-color: #2e3451; } [data-bs-theme="dark"] .sidebar-nav .nav-link { color: #c5cde0; background: transparent; } [data-bs-theme="dark"] .sidebar-nav .nav-link i { color: #8892a4; } [data-bs-theme="dark"] .sidebar-nav .nav-link:hover, [data-bs-theme="dark"] .sidebar-nav .nav-link:not(.collapsed) { background: #242a3a; color: #e2e8f0; } [data-bs-theme="dark"] .sidebar-nav .nav-link:hover i, [data-bs-theme="dark"] .sidebar-nav .nav-link:not(.collapsed) i { color: #7c9ef5; } [data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed { background: transparent; color: #c5cde0; } [data-bs-theme="dark"] .sidebar-nav .nav-heading { color: #8892a4; } /* ============================================================= DataTable – custom thead / tbody (not Bootstrap table classes) ============================================================= */ [data-bs-theme="dark"] .dt-container table > thead > tr > th { background: linear-gradient(to bottom, #242a3a, #1e2333); color: #8892a4; border-bottom-color: #2e3451; } /* FixedHeader floating header – dark mode */ [data-bs-theme="dark"] .dtfh-floatingparent { box-shadow: 0 4px 16px rgba(0,0,0,0.35); } [data-bs-theme="dark"] .dtfh-floatingparent table > thead > tr > th { background: linear-gradient(to bottom, #1a1e2b, #161929) !important; color: #8892a4 !important; border-bottom-color: #2e3451 !important; } [data-bs-theme="dark"] .dtfh-floatingparent table > thead > tr > th.dt-ordering-asc, [data-bs-theme="dark"] .dtfh-floatingparent table > thead > tr > th.dt-ordering-desc { background: linear-gradient(to bottom, #1e2a44, #192238) !important; color: #7c9ef5 !important; } [data-bs-theme="dark"] .dt-container table > tbody > tr > td { background-color: #1e2333; border-bottom-color: #242a3a; color: #e2e8f0; } [data-bs-theme="dark"] .dt-container table > tbody > tr:nth-child(odd) > td { background-color: #1a1e2b; } [data-bs-theme="dark"] .dt-container table tbody tr:hover > td:not(.dt-empty) { background-color: #242a3a !important; } [data-bs-theme="dark"] .dt-container table tbody tr.active > td { background-color: #1e3358 !important; border-left-color: #7c9ef5; } /* ============================================================= Modal – two-column form layout ============================================================= */ [data-bs-theme="dark"] .modal-form-col--left { background: #161a26; border-right-color: #2e3451; } [data-bs-theme="dark"] .modal-form-col--right { background: #1e2333; } /* ============================================================= Print Modal Panel – dark mode ============================================================= */ [data-bs-theme="dark"] .print-panel__head, [data-bs-theme="dark"] .print-panel__foot, [data-bs-theme="dark"] .print-viewer-bar { background: #161a26; border-color: #2e3451; } [data-bs-theme="dark"] .print-section__label { color: #8892a4; } [data-bs-theme="dark"] .print-section__label::after { background: #2e3451; } [data-bs-theme="dark"] .print-opt-card { border-color: #2e3451; color: #c4cde0; background: transparent; } [data-bs-theme="dark"] .print-opt-card:hover { border-color: #4f7ef8; background: rgba(79,126,248,.08); } [data-bs-theme="dark"] .print-opt-card:has(input:checked) { border-color: #4f7ef8; background: rgba(79,126,248,.14); color: #93c5fd; } [data-bs-theme="dark"] .print-opt-card i { color: #8892a4; } [data-bs-theme="dark"] .print-opt-card:has(input:checked) i { color: #60a5fa; } /* PDF Viewer – dark spinners */ [data-bs-theme="dark"] .pdf-loader { background: rgba(22,26,38,.92); } [data-bs-theme="dark"] .pdf-loader__ring { border-color: rgba(79,126,248,.15); border-top-color: #4f7ef8; } [data-bs-theme="dark"] .pdf-loader__text { color: #8892a4; } [data-bs-theme="dark"] .pdf-form-overlay { background: rgba(22,26,38,.55); } [data-bs-theme="dark"] .pdf-form-overlay__ring { border-color: rgba(79,126,248,.15); border-top-color: #4f7ef8; } /* ============================================================= Form – required field highlight ============================================================= */ [data-bs-theme="dark"] .fg-required .form-control:not(.disabled):not([disabled]), [data-bs-theme="dark"] .fg-required select.form-control:not([disabled]), [data-bs-theme="dark"] .fg-required .input-group > .form-control:first-child { background-color: #1f1922; } /* Required legend strip */ [data-bs-theme="dark"] .modal-required-legend { background: #1a1e2b !important; color: #8892a4 !important; border-bottom-color: #2e3451 !important; } /* ============================================================= Settings section label ============================================================= */ [data-bs-theme="dark"] .settings-section-label { color: #8892a4; border-bottom-color: #2e3451; } /* ============================================================= Card header modern ============================================================= */ [data-bs-theme="dark"] .card-header-modern { background: linear-gradient(135deg, #1e2333, #242a3a); border-bottom-color: #2e3451; } [data-bs-theme="dark"] .card-header-modern .card-title { color: #e2e8f0; } [data-bs-theme="dark"] .card-header-modern .card-subtitle { color: #8892a4; } [data-bs-theme="dark"] .prop-inv-office-access__label { color: #4a5568; } [data-bs-theme="dark"] .prop-inv-office-chip { color: #93c5fd; background: #1e2a44; border-color: #1e3a5f; } [data-bs-theme="dark"] .prop-inv-office-chip--all { color: #6ee7b7; background: #0d2a1f; border-color: #065f46; } [data-bs-theme="dark"] .prop-inv-office-access__empty { color: #4a5568; } /* ============================================================= Accordion / accordion-btn inside modals ============================================================= */ [data-bs-theme="dark"] .modal-accordion-btn { background: #161a26; color: #c5cde0; border-top-color: #2e3451; } /* ============================================================= Transaction context banner / action bars ============================================================= */ [data-bs-theme="dark"] .bg-light-subtle { background-color: #1a1e2b !important; } /* ============================================================= dt-card-wrapper (DataTable card container) ============================================================= */ [data-bs-theme="dark"] .dt-card-wrapper { background: #1e2333; border-color: #2e3451; } /* ============================================================= Footer ============================================================= */ [data-bs-theme="dark"] .footer { background-color: #13161d; border-top-color: #2e3451; } [data-bs-theme="dark"] .footer .copyright { color: #8892a4; } [data-bs-theme="dark"] .footer .credits { color: #8892a4; } /* ============================================================= Chat Popup (dark) ============================================================= */ [data-bs-theme="dark"] .chat-popup__body { background: #1e2333; } [data-bs-theme="dark"] .chat-popup__messages::-webkit-scrollbar-thumb { background: #2e3451; } [data-bs-theme="dark"] .chat-msg--recv .chat-msg__bubble { background: #242a3a; color: #e2e8f0; } [data-bs-theme="dark"] .chat-msg__time { color: #6b7280; } [data-bs-theme="dark"] .chat-msg--system { color: #6b7280; } [data-bs-theme="dark"] .chat-popup__transcript { background: #161a26; border-top-color: #2e3451; } [data-bs-theme="dark"] .chat-popup__footer { background: #1e2333; border-top-color: #2e3451; } [data-bs-theme="dark"] .chat-popup__input { background: #242a3a; border-color: #2e3451; color: #e2e8f0; } [data-bs-theme="dark"] .chat-popup__input:focus { background: #1e2333; border-color: #4f7ef8; } [data-bs-theme="dark"] .chat-popup__input::placeholder { color: #6b7280; } /* ============================================================= Dashboard – Active Users Roster (dark) ============================================================= */ [data-bs-theme="dark"] .user-roster::-webkit-scrollbar-thumb { background: #2e3451; } [data-bs-theme="dark"] .user-roster__item:hover { background: #242a3a; } [data-bs-theme="dark"] .user-roster__item--highlight { background: #2a2510; } [data-bs-theme="dark"] .user-roster__dot { border-color: #1e2333; } [data-bs-theme="dark"] .user-roster__name { color: #e2e8f0; } [data-bs-theme="dark"] .user-roster__role { color: #8892a4; } [data-bs-theme="dark"] .user-roster__time { color: #6b7280; } /* ============================================================= Dashboard – Activity Feed (dark) ============================================================= */ [data-bs-theme="dark"] .activity-feed__item:not(:last-child)::before { background: #2e3451; } [data-bs-theme="dark"] .activity-feed__dot { border-color: #1e2333; box-shadow: 0 0 0 2px #1d3d7a; } [data-bs-theme="dark"] .activity-feed__name { color: #e2e8f0; } [data-bs-theme="dark"] .activity-feed__role { color: #8892a4; } [data-bs-theme="dark"] .activity-feed__action { color: #c5cde0; } [data-bs-theme="dark"] .activity-feed__time { color: #6b7280; } /* ============================================================= Page header bar ============================================================= */ [data-bs-theme="dark"] .page-header-bar .page-header-title h1 { color: #e2e8f0; } [data-bs-theme="dark"] .page-header-bar .page-header-title .page-subtitle { color: #8892a4; } /* ============================================================= Stat Cards – dark mode The gradient backgrounds are self-contained so no bg override is needed. Only the dropdown menu needs a dark-mode nudge. ============================================================= */ [data-bs-theme="dark"] .stat-card { box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 1px 6px rgba(0,0,0,.2); } [data-bs-theme="dark"] .stat-card:hover { box-shadow: 0 16px 48px rgba(0,0,0,.45); } /* ============================================================= QR Result Page (ReadQrCode) – dark mode ============================================================= */ [data-bs-theme="dark"] body { background: #13161d; } [data-bs-theme="dark"] .qr-prop-card, [data-bs-theme="dark"] .qr-pcount-card { background: #1a1e2b; box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2); } [data-bs-theme="dark"] .qr-field { border-bottom-color: #1e2333; } [data-bs-theme="dark"] .qr-field__icon { background: #1e2a44; color: #7c9ef5; } [data-bs-theme="dark"] .qr-field__label { color: #6b7a99; } [data-bs-theme="dark"] .qr-field__value { color: #e2e8f0; } [data-bs-theme="dark"] .qr-section-head { border-bottom-color: #1e2333; } [data-bs-theme="dark"] .qr-section-head__icon--green { background: #14301e; color: #4ade80; } [data-bs-theme="dark"] .qr-section-head__icon--red { background: #2d1212; color: #f87171; } [data-bs-theme="dark"] .qr-section-head__icon--blue { background: #1e2a44; color: #7c9ef5; } [data-bs-theme="dark"] .qr-section-head__title { color: #e2e8f0; } [data-bs-theme="dark"] .qr-section-head__sub { color: #6b7a99; } [data-bs-theme="dark"] .qr-status-badge--default { background: #242a3a; color: #8892a4; } [data-bs-theme="dark"] .qr-credits, [data-bs-theme="dark"] .qr-credits a { color: #3d4663; } /* ============================================================= QR Scanner Modal – dark mode The modal body is already #0c0f14 (near-black), so it looks identical in both themes. Only the shadow gets a slight boost. ============================================================= */ [data-bs-theme="dark"] .qr-modal-content { box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4); } /* ============================================================= DataTable processing/loading overlay – dark mode ============================================================= */ [data-bs-theme="dark"] .dt-processing { background: rgba(26, 30, 43, 0.92) !important; border-color: #2e3451 !important; color: #c5cde0 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; } /* ============================================================= Login / Registration / Forgot-Password pages – dark mode ============================================================= */ [data-bs-theme="dark"] .login-form-panel { background: #0f111a; } [data-bs-theme="dark"] .login-card { background: #1a1e2b; border-color: #2e3451; box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.18); } [data-bs-theme="dark"] .login-card__header h2 { color: #e2e8f0; } [data-bs-theme="dark"] .login-card__header p { color: #8892a4; } [data-bs-theme="dark"] .login-card .form-label { color: #c5cde0; } [data-bs-theme="dark"] .login-card .form-control { background: #242a3a; border-color: #2e3451; color: #e2e8f0; } [data-bs-theme="dark"] .login-card .form-control:focus { border-color: #6366f1; background: #1e2333; box-shadow: 0 0 0 3px rgba(99,102,241,.18); } [data-bs-theme="dark"] .login-card .form-control::placeholder { color: #4a5568; } /* Input icon prefix */ [data-bs-theme="dark"] .login-input-icon { background: #242a3a; border-color: #2e3451; color: #8892a4; } [data-bs-theme="dark"] .login-input-group:focus-within .login-input-icon { background: #1e2333; border-color: #6366f1; color: #818cf8; } [data-bs-theme="dark"] .login-input-group .form-control:focus { background: #1e2333; border-color: #6366f1; } /* Absolute lock icon */ [data-bs-theme="dark"] .login-input-icon-abs { color: #8892a4; } [data-bs-theme="dark"] .input-password-wrap.has-icon:focus-within .login-input-icon-abs { color: #818cf8; } /* Toggle password */ [data-bs-theme="dark"] .btn-toggle-password { color: #8892a4; } [data-bs-theme="dark"] .btn-toggle-password:hover { color: #818cf8; } /* Theme toggle button */ [data-bs-theme="dark"] .login-theme-btn { background: #1a1e2b; border-color: #2e3451; color: #8892a4; box-shadow: 0 1px 6px rgba(0,0,0,.25); } [data-bs-theme="dark"] .login-theme-btn:hover { background: #242a3a; color: #818cf8; border-color: #3d4a8f; box-shadow: 0 2px 10px rgba(99,102,241,.2); } /* Card footer links */ [data-bs-theme="dark"] .login-card__links { color: #8892a4; } [data-bs-theme="dark"] .login-card__links a { color: #818cf8; } /* Mobile logo title */ [data-bs-theme="dark"] .login-mobile-logo .sys-title { color: #e2e8f0; } /* Credits */ [data-bs-theme="dark"] .login-credits, [data-bs-theme="dark"] .login-credits a { color: #4a5568; } /* Registration section titles */ [data-bs-theme="dark"] .reg-section-title { color: #818cf8; border-bottom-color: #1e2a44; } /* Forgot-password step header divider */ [data-bs-theme="dark"] .fp-step-header { border-bottom-color: #1e2333; } [data-bs-theme="dark"] .fp-step-header h5 { color: #e2e8f0; } [data-bs-theme="dark"] .fp-step-header p { color: #8892a4; } /* ============================================================= Bulk Import – Shared Settings card header ============================================================= */ [data-bs-theme="dark"] .bulk-settings-card { border-color: #2e3451; } [data-bs-theme="dark"] .bulk-settings-header { background-color: #1e2333; border-bottom-color: #2e3451; } [data-bs-theme="dark"] .bulk-settings-header:hover { background-color: #242a3a; } [data-bs-theme="dark"] .bulk-settings-header__icon { color: #7c9ef5; } [data-bs-theme="dark"] .bulk-settings-header__title { color: #e2e8f0; } [data-bs-theme="dark"] .bulk-settings-header__chevron { color: #8892a4; } /* Bulk Import – table thead */ [data-bs-theme="dark"] #bulkImportTable > thead.bulk-import-thead > tr > th { background: linear-gradient(to bottom, #242a3a, #1e2333); color: #8892a4; border-bottom-color: #2e3451; } /* ============================================================= Modal – form inputs & controls (dark mode) Bootstrap 5's dark theme handles .form-control inside the page body, but inputs inside modals can keep a light bg from custom.css or vendor stylesheets. Override here. ============================================================= */ [data-bs-theme="dark"] .modal .form-control, [data-bs-theme="dark"] .modal input.form-control, [data-bs-theme="dark"] .modal textarea.form-control, [data-bs-theme="dark"] .modal select.form-control, [data-bs-theme="dark"] .modal .form-select { background-color: #242a3a; border-color: #2e3451; color: #e2e8f0; } [data-bs-theme="dark"] .modal .form-control:focus, [data-bs-theme="dark"] .modal input.form-control:focus, [data-bs-theme="dark"] .modal textarea.form-control:focus, [data-bs-theme="dark"] .modal select.form-control:focus, [data-bs-theme="dark"] .modal .form-select:focus { background-color: #1e2333; border-color: #4f7ef8; color: #e2e8f0; box-shadow: 0 0 0 0.2rem rgba(79, 126, 248, 0.18); } [data-bs-theme="dark"] .modal .form-control::placeholder, [data-bs-theme="dark"] .modal input.form-control::placeholder, [data-bs-theme="dark"] .modal textarea.form-control::placeholder { color: #6b7280; } [data-bs-theme="dark"] .modal .form-control:read-only, [data-bs-theme="dark"] .modal input[readonly], [data-bs-theme="dark"] input:read-only { background-color: #1a1e2b !important; color: #8892a4; } /* Bootstrap Autocomplete plugin dropdown list inside modals */ [data-bs-theme="dark"] .modal .dropdown-menu.autocomplete-menu, [data-bs-theme="dark"] .modal .autocomplete-items { background-color: #1e2333; border-color: #2e3451; } [data-bs-theme="dark"] .modal .dropdown-menu.autocomplete-menu .dropdown-item, [data-bs-theme="dark"] .modal .autocomplete-items div { color: #c5cde0; background-color: #1e2333; } [data-bs-theme="dark"] .modal .dropdown-menu.autocomplete-menu .dropdown-item:hover, [data-bs-theme="dark"] .modal .dropdown-menu.autocomplete-menu .dropdown-item.active, [data-bs-theme="dark"] .modal .autocomplete-items div:hover { background-color: #242a3a; color: #e2e8f0; } /* ============================================================= Dropzone – dark mode dropzone.css and customdropzone.css use hardcoded light colors that don't respond to data-bs-theme. Override here. ============================================================= */ [data-bs-theme="dark"] .dropzone, [data-bs-theme="dark"] #FileDrop.dropzone { background-color: #1a1e2b !important; border-color: #4f7ef8 !important; border-style: dashed !important; } [data-bs-theme="dark"] .dropzone .dz-message, [data-bs-theme="dark"] #FileDrop .dz-message { color: #7c9ef5 !important; } /* File preview cards */ [data-bs-theme="dark"] .dropzone .dz-preview, [data-bs-theme="dark"] #FileDrop .dz-preview { background: #1e2333 !important; } [data-bs-theme="dark"] .dropzone .dz-preview .dz-details, [data-bs-theme="dark"] #FileDrop .dz-preview .dz-details { background-color: rgba(30, 35, 51, 0.9) !important; color: #e2e8f0 !important; } [data-bs-theme="dark"] .dropzone .dz-preview .dz-filename span, [data-bs-theme="dark"] #FileDrop .dz-preview .dz-filename span, [data-bs-theme="dark"] .dropzone .dz-preview .dz-size span, [data-bs-theme="dark"] #FileDrop .dz-preview .dz-size span { background-color: rgba(36, 42, 58, 0.8) !important; color: #e2e8f0 !important; } [data-bs-theme="dark"] .dropzone .dz-preview .dz-image, [data-bs-theme="dark"] #FileDrop .dz-preview .dz-image { background: #242a3a !important; } /* Success checkmark overlay */ [data-bs-theme="dark"] .dropzone .dz-preview.dz-success .dz-success-mark, [data-bs-theme="dark"] #FileDrop .dz-preview.dz-success .dz-success-mark { opacity: 1; } /* Progress bar track */ [data-bs-theme="dark"] .dropzone .dz-preview .dz-progress, [data-bs-theme="dark"] #FileDrop .dz-preview .dz-progress { background: #2e3451 !important; } [data-bs-theme="dark"] .dropzone .dz-preview .dz-progress .dz-upload, [data-bs-theme="dark"] #FileDrop .dz-preview .dz-progress .dz-upload { background: #4f7ef8 !important; background: linear-gradient(to bottom, #6190f9, #4f7ef8) !important; } /* File input control inside modals (native ) */ [data-bs-theme="dark"] .modal input[type="file"].form-control { background-color: #242a3a; border-color: #2e3451; color: #e2e8f0; } [data-bs-theme="dark"] .modal input[type="file"]::file-selector-button { background-color: #2e3451; border-color: #3d4566; color: #c5cde0; } [data-bs-theme="dark"] .modal input[type="file"]:hover::file-selector-button { background-color: #3a4160; color: #e2e8f0; } /* ============================================================= Bulk Import – breakdown column */ [data-bs-theme="dark"] .bulk-bd-badge-imported { background-color: #166534; color: #bbf7d0; } [data-bs-theme="dark"] .bulk-bd-badge-split { background-color: #1e3a5f; color: #7dd3fc; } [data-bs-theme="dark"] .bulk-bd-undo-btn { border-color: #ca8a04; color: #facc15; } [data-bs-theme="dark"] .bulk-bd-undo-btn:hover { background-color: rgba(250,204,21,.15); color: #fde68a; border-color: #facc15; } [data-bs-theme="dark"] .bulk-bd-index { color: #8892a4; } [data-bs-theme="dark"] .bulk-breakdown-toggle { background-color: #2e3451; border-color: #3d4566; } [data-bs-theme="dark"] .bulk-breakdown-toggle:checked { background-color: #0d6efd; border-color: #0d6efd; }