). */ --invest3-surface-bg-00: #f4f4f5; --invest3-surface-elevation-01: #ffffff; --invest3-canvas: #f4f4f5; --invest3-card: #ffffff; --invest3-card-border: #e4e4e7; --invest3-text: #18181b; --invest3-text-muted: #71717a; --invest3-primary: #1b67db; --invest3-primary-hover: #1557bd; --invest3-link: #1b67db; --invest3-link-hover: #1557bd; /* Toast error (invest3-svelte: text-toast-error, bg-toast-error-surface, border-toast-error-icon) */ --invest3-error-bg: #fff1f2; --invest3-error-border: #fb7185; --invest3-error-text: #9f1239; --invest3-info-bg: #eff5ff; --invest3-warn-bg: #fefce8; --invest3-skeleton: #e4e4e7; } html.dark, html[data-theme="dark"] { /* * INV-2072 — sole source of solid dark hex. Everything else in this file (and html.dark overrides) * must use var(--invest3-*) that resolves to these or to the rgba block below. */ --invest3-ds-elev-01: #101a21; --invest3-ds-elev-02: #17232d; --invest3-ds-elev-03: #212c39; --invest3-ds-elev-04: #2d3441; --invest3-ds-tint-blue: #223851; --invest3-ds-link-primary: #6fa6f8; --invest3-ds-link-secondary: #73a7f8; --invest3-ds-accent: #fc965e; --invest3-ds-text-primary: #ffffff; --invest3-ds-text-secondary: #c0c2c6; --invest3-ds-text-tertiary: #9699a0; --invest3-surface-bg-00: var(--invest3-ds-elev-01); --invest3-surface-elevation-01: var(--invest3-ds-elev-01); --invest3-canvas: var(--invest3-ds-elev-01); --invest3-card: var(--invest3-ds-elev-02); --invest3-card-border: var(--invest3-ds-elev-04); --invest3-text: var(--invest3-ds-text-primary); --invest3-text-secondary: var(--invest3-ds-text-secondary); --invest3-text-muted: var(--invest3-ds-text-tertiary); --invest3-primary: var(--invest3-ds-link-primary); --invest3-primary-hover: var(--invest3-ds-link-secondary); --invest3-link: var(--invest3-ds-link-primary); --invest3-link-hover: var(--invest3-ds-link-secondary); --invest3-accent: var(--invest3-ds-accent); /* Semantic surfaces (palette-only) */ --invest3-error-bg: var(--invest3-ds-elev-03); --invest3-error-border: var(--invest3-ds-accent); --invest3-error-text: var(--invest3-ds-text-primary); --invest3-info-bg: var(--invest3-ds-tint-blue); --invest3-warn-bg: var(--invest3-ds-elev-03); --invest3-skeleton: var(--invest3-ds-elev-04); --invest3-row-alt: var(--invest3-ds-elev-03); --invest3-row-hover: var(--invest3-ds-elev-04); --invest3-title-bar: var(--invest3-ds-tint-blue); /* rgb(16, 26, 33) = #101A21 — overlays / shadows */ --invest3-overlay-scrim: rgba(16, 26, 33, 0.78); --invest3-shadow-35: rgba(16, 26, 33, 0.35); --invest3-shadow-40: rgba(16, 26, 33, 0.4); --invest3-shadow-45: rgba(16, 26, 33, 0.45); --invest3-shadow-50: rgba(16, 26, 33, 0.5); --invest3-shadow-55: rgba(16, 26, 33, 0.55); --invest3-shadow-72: rgba(16, 26, 33, 0.72); /* Ghost / tint fills: #6FA6F8 at low alpha */ --invest3-primary-tint-16: rgba(111, 166, 248, 0.16); --invest3-primary-tint-20: rgba(111, 166, 248, 0.2); --invest3-primary-tint-42: rgba(111, 166, 248, 0.42); --invest3-positive-tint-bg: rgba(111, 166, 248, 0.18); --invest3-positive-tint-border: rgba(111, 166, 248, 0.4); --invest3-negative-tint-bg: rgba(252, 150, 94, 0.14); --invest3-negative-tint-border: rgba(252, 150, 94, 0.35); /* #FFFFFF at alpha — text primary only */ --invest3-white-12: rgba(255, 255, 255, 0.12); --invest3-white-06: rgba(255, 255, 255, 0.06); } /* Legacy shell (header): soften canvas when dark */ html.dark body, html[data-theme="dark"] body { background-color: var(--invest3-canvas); color: var(--invest3-text); } html.dark #wholediv, html[data-theme="dark"] #wholediv { background-color: var(--invest3-canvas); color: var(--invest3-text); } /* FCGI body sits in #maincontent; keep flush with invest3 main surface (no light strip). */ html.dark #wholediv #maincontent, html[data-theme="dark"] #wholediv #maincontent { background-color: var(--invest3-canvas) !important; color: var(--invest3-text); } /* Iframe embed dark: same INV-2072 tokens as standalone (no separate OKLCH override). */ /* Iframe embed: same fill as main column (--invest3-surface-elevation-01). */ html[data-invest3-embed="1"].dark body, html[data-invest3-embed="1"][data-theme="dark"] body, html[data-invest3-embed="1"].dark #wholediv, html[data-invest3-embed="1"][data-theme="dark"] #wholediv, html[data-invest3-embed="1"].dark #wholediv #maincontent, html[data-invest3-embed="1"][data-theme="dark"] #wholediv #maincontent { background-color: var(--invest3-surface-elevation-01) !important; } html.dark #wholediv .settings, html[data-theme="dark"] #wholediv .settings { background-color: transparent !important; color: var(--invest3-text); } /* mysettings-accountstatus.htm: inline border on .right_side tr */ html.dark #wholediv .right_side tr, html[data-theme="dark"] #wholediv .right_side tr { border-left-color: var(--invest3-card-border) !important; } html.dark #wholediv #prof_div, html[data-theme="dark"] #wholediv #prof_div { color: var(--invest3-text-muted) !important; } /* Tooltip trigger icons (information.svg) — dark-blue glyph → high-contrast on dark surfaces */ html.dark #wholediv img[src*="information.svg"], html.dark #maincontent img[src*="information.svg"], html[data-theme="dark"] #wholediv img[src*="information.svg"], html[data-theme="dark"] #maincontent img[src*="information.svg"] { filter: brightness(0) invert(1) brightness(1.2); opacity: 1; } /* * Invest3 shell iframe — light mode page shell only (OKLCH grey); when .dark, rules above apply. */ html[data-invest3-embed="1"]:not(.dark) body, html[data-invest3-embed="1"]:not(.dark) #wholediv, html[data-invest3-embed="1"]:not(.dark) #wholediv #maincontent { background-color: oklch(97.61% 0.0012 286.38) !important; } html[data-invest3-embed="1"]:not(.dark) #mainorderbar, html[data-invest3-embed="1"]:not(.dark) #space-for-bar { background-color: oklch(97.61% 0.0012 286.38) !important; } /* Login / OTP (class hooks on body + sections) */ body.invest3-ui { background-color: var(--invest3-canvas) !important; color: var(--invest3-text); } body.invest3-ui .invest3-card { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } body.invest3-ui .invest3-footer { background-color: var(--invest3-card) !important; } body.invest3-ui .invest3-heading, body.invest3-ui .invest3-label { color: var(--invest3-text) !important; } body.invest3-ui .invest3-muted, body.invest3-ui .text-gray-600 { color: var(--invest3-text-muted) !important; } body.invest3-ui .invest3-field, body.invest3-ui input.invest3-field, body.invest3-ui select.invest3-field { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } body.invest3-ui .invest3-submit { background-color: var(--invest3-primary) !important; } body.invest3-ui .invest3-submit:hover { background-color: var(--invest3-primary-hover) !important; } /* Primary CTA on link-blue fill: text = inverted surface (ds elev-01 only) */ html.dark body.invest3-ui .invest3-submit, html[data-theme="dark"] body.invest3-ui .invest3-submit { color: var(--invest3-ds-elev-01) !important; } body.invest3-ui a.text-azure, body.invest3-ui .invest3-link { color: var(--invest3-link) !important; } body.invest3-ui #message-container.logerrormsg { padding: 8px 12px; background-color: var(--invest3-error-bg) !important; border: 1px solid var(--invest3-error-border); } body.invest3-ui #message-container .logerrormsg-text { color: var(--invest3-error-text) !important; } body.invest3-ui .login-message--info { background: var(--invest3-info-bg) !important; } body.invest3-ui .login-message--warning { background: var(--invest3-warn-bg) !important; } body.invest3-ui .login-message--info p, body.invest3-ui .login-message--warning p { color: var(--invest3-text) !important; } /* * Alerts (#alert_container): .errmsg shared yellow background in redesign.css — use toast-error tokens. */ #wholediv #alert_container .errmsg, #maincontent #alert_container .errmsg { background-color: var(--invest3-error-bg) !important; border: 1px solid var(--invest3-error-border) !important; color: var(--invest3-error-text) !important; } body.invest3-ui .border-neutral-200, body.invest3-ui .border-b.border-neutral-200 { border-color: var(--invest3-card-border) !important; } /* OTP skeleton placeholders */ body.invest3-ui .bg-slate-200 { background-color: var(--invest3-skeleton) !important; } /* Login: password row + visibility toggle (replaces inline styles on Login.htm) */ body.invest3-ui .login-password-wrap { position: relative; display: block; width: 100%; } body.invest3-ui .login-password-input { padding-right: 3rem; box-sizing: border-box; } body.invest3-ui button.login-toggle-password { position: absolute; right: 0; top: 0; bottom: 0; width: 2.5rem; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; z-index: 1; } /* Class-based eye icons so bfcache does not drop visibility */ body.invest3-ui .toggle-password .eye-open { display: none !important; } body.invest3-ui .toggle-password .eye-closed { display: block !important; } body.invest3-ui .toggle-password.password-revealed .eye-open { display: block !important; } body.invest3-ui .toggle-password.password-revealed .eye-closed { display: none !important; } body.invest3-ui .toggle-password .eye-closed, body.invest3-ui .toggle-password .eye-open { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } /* * Login / enter_pin / enter_otp: Uno/Tailwind utility colors (bg-white, slate, azure, etc.) * must map to INV-2072 tokens when html is dark — variables on html.dark already switch; * these literals would otherwise stay light-theme hex values. */ html.dark body.invest3-ui .bg-zinc-100, html[data-theme="dark"] body.invest3-ui .bg-zinc-100 { background-color: var(--invest3-canvas) !important; } html.dark body.invest3-ui .bg-white, html[data-theme="dark"] body.invest3-ui .bg-white { background-color: var(--invest3-card) !important; } html.dark body.invest3-ui .text-slate-700, html.dark body.invest3-ui .text-zinc-700, html[data-theme="dark"] body.invest3-ui .text-slate-700, html[data-theme="dark"] body.invest3-ui .text-zinc-700 { color: var(--invest3-text) !important; } html.dark body.invest3-ui .text-gray-700, html[data-theme="dark"] body.invest3-ui .text-gray-700 { color: var(--invest3-text) !important; } html.dark body.invest3-ui .border-slate-300, html[data-theme="dark"] body.invest3-ui .border-slate-300 { border-color: var(--invest3-card-border) !important; } html.dark body.invest3-ui .bg-yellow-50, html[data-theme="dark"] body.invest3-ui .bg-yellow-50 { background-color: var(--invest3-warn-bg) !important; } html.dark body.invest3-ui .bg-blue-50, html[data-theme="dark"] body.invest3-ui .bg-blue-50 { background-color: var(--invest3-info-bg) !important; } html.dark body.invest3-ui .bg-slate-50, html[data-theme="dark"] body.invest3-ui .bg-slate-50 { background-color: var(--invest3-row-alt) !important; } html.dark body.invest3-ui .text-yellow-500, html[data-theme="dark"] body.invest3-ui .text-yellow-500 { color: var(--invest3-accent) !important; } html.dark body.invest3-ui .text-blue-500, html[data-theme="dark"] body.invest3-ui .text-blue-500 { color: var(--invest3-link) !important; } html.dark body.invest3-ui .bg-azure, html[data-theme="dark"] body.invest3-ui .bg-azure { background-color: var(--invest3-primary) !important; } html.dark body.invest3-ui .text-azure, html[data-theme="dark"] body.invest3-ui .text-azure { color: var(--invest3-link) !important; } html.dark body.invest3-ui .border-azure, html[data-theme="dark"] body.invest3-ui .border-azure { border-color: var(--invest3-link) !important; } html.dark body.invest3-ui footer, html[data-theme="dark"] body.invest3-ui footer { background-color: var(--invest3-card) !important; color: var(--invest3-text); } html.dark body.invest3-ui select, html[data-theme="dark"] body.invest3-ui select { color: var(--invest3-text) !important; } html.dark body.invest3-ui .border-gray-400, html[data-theme="dark"] body.invest3-ui .border-gray-400 { border-color: var(--invest3-card-border) !important; } html.dark body.invest3-ui .placeholder\:text-gray-700::placeholder, html[data-theme="dark"] body.invest3-ui .placeholder\:text-gray-700::placeholder { color: var(--invest3-text-muted) !important; opacity: 0.85; } html.dark body.invest3-ui .focus\:ring-blue-500:focus, html[data-theme="dark"] body.invest3-ui .focus\:ring-blue-500:focus { --un-ring-color: var(--invest3-link) !important; } html.dark body.invest3-ui .text-neutral-400, html[data-theme="dark"] body.invest3-ui .text-neutral-400 { color: var(--invest3-text-muted) !important; } /* PIN / OTP text fields use bg-transparent + slate borders — fill with card color in dark */ html.dark body.invest3-ui #form-pin input[type="text"], html.dark body.invest3-ui #form-pin input[type="password"], html.dark body.invest3-ui #form-verify input#code, html[data-theme="dark"] body.invest3-ui #form-pin input[type="text"], html[data-theme="dark"] body.invest3-ui #form-pin input[type="password"], html[data-theme="dark"] body.invest3-ui #form-verify input#code { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; } /* enter_pin / enter_otp: “Trust this device” checkbox — avoid light UA fill on dark card */ html.dark body.invest3-ui #form-pin input[type="checkbox"], html.dark body.invest3-ui #form-verify input[type="checkbox"], html[data-theme="dark"] body.invest3-ui #form-pin input[type="checkbox"], html[data-theme="dark"] body.invest3-ui #form-verify input[type="checkbox"] { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; accent-color: var(--invest3-primary) !important; } html.dark body.invest3-ui #form-pin input[type="checkbox"]:checked, html.dark body.invest3-ui #form-verify input[type="checkbox"]:checked, html[data-theme="dark"] body.invest3-ui #form-pin input[type="checkbox"]:checked, html[data-theme="dark"] body.invest3-ui #form-verify input[type="checkbox"]:checked { background-color: var(--invest3-primary) !important; border-color: var(--invest3-primary) !important; } html.dark body.invest3-ui #message-container.logerrormsg svg, html[data-theme="dark"] body.invest3-ui #message-container.logerrormsg svg { stroke: var(--invest3-error-border) !important; } html.dark #wholediv .gh, html[data-theme="dark"] #wholediv .gh { background: var(--invest3-canvas) !important; } /* * Primary / secondary nav (#nav): redesign uses #21508E and #798CA1 — illegible on dark canvas. * Dropdowns stay light in redesign — force card surfaces + readable text. */ :is(html.dark, html[data-theme="dark"]) #wholediv #nav-row-one, :is(html.dark, html[data-theme="dark"]) #wholediv #nav-row-two { background-color: var(--invest3-card) !important; box-shadow: 0 1px 0 var(--invest3-card-border); } :is(html.dark, html[data-theme="dark"]) #wholediv #nav_one li.nav-one-link a { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #nav_one li.nav-one-link a:hover { color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #nav_one li.nav-one-link a.current { color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #nav .nav_two li a span, :is(html.dark, html[data-theme="dark"]) #wholediv #nav #home_menu.nav_two li.left span { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #nav .nav_two li.current a span, :is(html.dark, html[data-theme="dark"]) #wholediv #nav .nav_two a:hover span { color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .home-update-ts { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .dropdown-menu { background: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; box-shadow: 0 9px 12px var(--invest3-shadow-45) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .dropdown-link a, :is(html.dark, html[data-theme="dark"]) #wholediv #nav_one li.nav-one-link .dropdown-link a { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .dropdown-link:hover, :is(html.dark, html[data-theme="dark"]) #wholediv #nav_one li.nav-one-link .dropdown-link:hover { border-left-color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .dropdown-link:hover a, :is(html.dark, html[data-theme="dark"]) #wholediv #nav_one li.nav-one-link .dropdown-link:hover a { color: var(--invest3-link-hover) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #nav_one li.nav-one-link.has-dropdown:hover > a { color: var(--invest3-primary) !important; border-top-color: var(--invest3-primary) !important; border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head h1.logo a[href] { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head h1.logo a em { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head #lang-menu, :is(html.dark, html[data-theme="dark"]) #wholediv #head ul li select, :is(html.dark, html[data-theme="dark"]) #wholediv #head ul li input#id-symlookup { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #id-search-cat-wr { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #id-search-cat-wr label { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #nav #home_menu.nav_two li.left span strong { color: var(--invest3-text) !important; } /* Investor Home: h1 / help / refresh sit outside .template_t .main */ html.dark #wholediv .homepage .home > .title h1, html[data-theme="dark"] #wholediv .homepage .home > .title h1 { color: var(--invest3-text) !important; } html.dark #wholediv .homepage .home > .title a.hplink, html[data-theme="dark"] #wholediv .homepage .home > .title a.hplink { color: var(--invest3-link) !important; } html.dark #wholediv .homepage .home > .title a.but_refresh, html.dark #wholediv .homepage .home > .title a.but_refreshing, html[data-theme="dark"] #wholediv .homepage .home > .title a.but_refresh, html[data-theme="dark"] #wholediv .homepage .home > .title a.but_refreshing { color: var(--invest3-link) !important; opacity: 1 !important; } html.dark #wholediv .homepage .home > .title a.but_refresh:hover, html.dark #wholediv .homepage .home > .title a.but_refresh:focus-visible, html[data-theme="dark"] #wholediv .homepage .home > .title a.but_refresh:hover, html[data-theme="dark"] #wholediv .homepage .home > .title a.but_refresh:focus-visible { color: var(--invest3-link-hover) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .mfabanner { background: var(--invest3-warn-bg) !important; border-color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .mfabanner h3, :is(html.dark, html[data-theme="dark"]) #wholediv .mfabanner p { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .mfabanner a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .template_t .main, html.dark #wholediv .template_t .banner_short, html.dark #wholediv .template_t .banner_long { background: var(--invest3-card) !important; color: var(--invest3-text); } html.dark #wholediv .template_t .banner h1, html.dark #wholediv .template_t .main h1, html.dark #wholediv .template_t .main h2, html.dark #wholediv .template_t .main h3 { color: var(--invest3-text) !important; } html.dark #wholediv .template_t .main p, html.dark #wholediv .margin ul li.texts { color: var(--invest3-text-muted) !important; } html.dark #wholediv .template_t .left_12, html.dark #wholediv .template_t .left_9, html.dark #wholediv .template_t .right_12 { box-shadow: 0 2px 12px var(--invest3-shadow-40); } /* Empty decorative strip: tabs2_customersvc.gif reads loud on dark canvas — dim + slight desat (en-us/zh-tw asset). */ html.dark #wholediv #maincontent .template_t .left_12 .style1, html.dark #wholediv .template_t .left_12 .style1, html.dark #maincontent .template_t .left_12 .style1, html[data-theme="dark"] #wholediv #maincontent .template_t .left_12 .style1, html[data-theme="dark"] #wholediv .template_t .left_12 .style1, html[data-theme="dark"] #maincontent .template_t .left_12 .style1 { filter: brightness(0.48) saturate(0.75); } /* * Support Center (support/contactus.php): .template_t.custSupport — .left_12 (#fff), .right_4 .blurb.fbg-grey + .inner. */ html.dark #wholediv .template_t.custSupport .title h1, html.dark #wholediv .custSupport .title h1, html.dark #maincontent .template_t.custSupport .title h1, html.dark #maincontent .custSupport .title h1, html[data-theme="dark"] #wholediv .template_t.custSupport .title h1, html[data-theme="dark"] #wholediv .custSupport .title h1, html[data-theme="dark"] #maincontent .template_t.custSupport .title h1, html[data-theme="dark"] #maincontent .custSupport .title h1 { color: var(--invest3-text) !important; } html.dark #wholediv .custSupport .left_12, html.dark #maincontent .custSupport .left_12, html[data-theme="dark"] #wholediv .custSupport .left_12, html[data-theme="dark"] #maincontent .custSupport .left_12 { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv .custSupport .left_12 p, html.dark #maincontent .custSupport .left_12 p, html[data-theme="dark"] #wholediv .custSupport .left_12 p, html[data-theme="dark"] #maincontent .custSupport .left_12 p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .custSupport .hr-grey, html.dark #maincontent .custSupport .hr-grey, html[data-theme="dark"] #wholediv .custSupport .hr-grey, html[data-theme="dark"] #maincontent .custSupport .hr-grey { border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv .custSupport .table tr td, html.dark #maincontent .custSupport .table tr td, html[data-theme="dark"] #wholediv .custSupport .table tr td, html[data-theme="dark"] #maincontent .custSupport .table tr td { color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .custSupport .left_12 .table a, html.dark #maincontent .custSupport .left_12 .table a, html[data-theme="dark"] #wholediv .custSupport .left_12 .table a, html[data-theme="dark"] #maincontent .custSupport .left_12 .table a { color: var(--invest3-link) !important; } html.dark #wholediv .custSupport .left_12 .table a:hover, html.dark #wholediv .custSupport .left_12 .table a:focus-visible, html.dark #maincontent .custSupport .left_12 .table a:hover, html.dark #maincontent .custSupport .left_12 .table a:focus-visible, html[data-theme="dark"] #wholediv .custSupport .left_12 .table a:hover, html[data-theme="dark"] #wholediv .custSupport .left_12 .table a:focus-visible, html[data-theme="dark"] #maincontent .custSupport .left_12 .table a:hover, html[data-theme="dark"] #maincontent .custSupport .left_12 .table a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .custSupport a.btn.btn-primary, html.dark #maincontent .custSupport a.btn.btn-primary, html[data-theme="dark"] #wholediv .custSupport a.btn.btn-primary, html[data-theme="dark"] #maincontent .custSupport a.btn.btn-primary { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; background-image: none !important; border-color: var(--invest3-primary) !important; text-shadow: none !important; box-shadow: none !important; } html.dark #wholediv .custSupport a.btn.btn-primary:hover, html.dark #wholediv .custSupport a.btn.btn-primary:focus-visible, html.dark #maincontent .custSupport a.btn.btn-primary:hover, html.dark #maincontent .custSupport a.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv .custSupport a.btn.btn-primary:hover, html[data-theme="dark"] #wholediv .custSupport a.btn.btn-primary:focus-visible, html[data-theme="dark"] #maincontent .custSupport a.btn.btn-primary:hover, html[data-theme="dark"] #maincontent .custSupport a.btn.btn-primary:focus-visible { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; background-image: none !important; } html.dark #wholediv .custSupport .left_12 .icon-help, html.dark #wholediv .custSupport .left_12 .icon-email, html.dark #wholediv .custSupport .left_12 .icon-phone, html.dark #wholediv .custSupport .left_12 .icon-fax, html.dark #maincontent .custSupport .left_12 .icon-help, html.dark #maincontent .custSupport .left_12 .icon-email, html.dark #maincontent .custSupport .left_12 .icon-phone, html.dark #maincontent .custSupport .left_12 .icon-fax, html[data-theme="dark"] #wholediv .custSupport .left_12 .icon-help, html[data-theme="dark"] #wholediv .custSupport .left_12 .icon-email, html[data-theme="dark"] #wholediv .custSupport .left_12 .icon-phone, html[data-theme="dark"] #wholediv .custSupport .left_12 .icon-fax, html[data-theme="dark"] #maincontent .custSupport .left_12 .icon-help, html[data-theme="dark"] #maincontent .custSupport .left_12 .icon-email, html[data-theme="dark"] #maincontent .custSupport .left_12 .icon-phone, html[data-theme="dark"] #maincontent .custSupport .left_12 .icon-fax { filter: brightness(0) invert(1); opacity: 0.9; } html.dark #wholediv .custSupport .border-box, html.dark #maincontent .custSupport .border-box, html[data-theme="dark"] #wholediv .custSupport .border-box, html[data-theme="dark"] #maincontent .custSupport .border-box { border-color: var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv .custSupport .right_4 div.blurb.fbg-grey, html.dark #maincontent .custSupport .right_4 div.blurb.fbg-grey, html[data-theme="dark"] #wholediv .custSupport .right_4 div.blurb.fbg-grey, html[data-theme="dark"] #maincontent .custSupport .right_4 div.blurb.fbg-grey { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner, html.dark #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner, html[data-theme="dark"] #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner, html[data-theme="dark"] #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner { color: var(--invest3-text-muted) !important; } html.dark #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner b, html.dark #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner b, html[data-theme="dark"] #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner b, html[data-theme="dark"] #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner b { color: var(--invest3-text) !important; } html.dark #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner a, html.dark #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner a, html[data-theme="dark"] #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner a, html[data-theme="dark"] #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner a { color: var(--invest3-link) !important; } html.dark #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner a:hover, html.dark #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner a:focus-visible, html.dark #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner a:hover, html.dark #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner a:focus-visible, html[data-theme="dark"] #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner a:hover, html[data-theme="dark"] #wholediv .custSupport .right_4 div.blurb.fbg-grey .inner a:focus-visible, html[data-theme="dark"] #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner a:hover, html[data-theme="dark"] #maincontent .custSupport .right_4 div.blurb.fbg-grey .inner a:focus-visible { color: var(--invest3-link-hover) !important; } /* * Wire transfer fee rebate (promos/wirefund/wirefee_rebate.php): .wire_fundfee inside .template_t .main. */ html.dark #wholediv #maincontent .template_t .main .wire_fundfee, html.dark #wholediv .template_t .main .wire_fundfee, html.dark #maincontent .template_t .main .wire_fundfee, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee { color: var(--invest3-text); } html.dark #wholediv #maincontent .template_t .main .wire_fundfee h1, html.dark #wholediv #maincontent .template_t .main .wire_fundfee h2, html.dark #wholediv #maincontent .template_t .main .wire_fundfee h3, html.dark #wholediv .template_t .main .wire_fundfee h1, html.dark #wholediv .template_t .main .wire_fundfee h2, html.dark #wholediv .template_t .main .wire_fundfee h3, html.dark #maincontent .template_t .main .wire_fundfee h1, html.dark #maincontent .template_t .main .wire_fundfee h2, html.dark #maincontent .template_t .main .wire_fundfee h3, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee h1, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee h2, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee h3, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee h1, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee h2, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee h3, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee h1, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee h2, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee h3 { color: var(--invest3-text) !important; -webkit-text-fill-color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee > p, html.dark #wholediv .template_t .main .wire_fundfee > p, html.dark #maincontent .template_t .main .wire_fundfee > p, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee > p, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee > p, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee > p, html.dark #wholediv #maincontent .template_t .main .wire_fundfee p.note, html.dark #wholediv .template_t .main .wire_fundfee p.note, html.dark #maincontent .template_t .main .wire_fundfee p.note, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee p.note, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee p.note, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee p.note { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee .sub_header, html.dark #wholediv .template_t .main .wire_fundfee .sub_header, html.dark #maincontent .template_t .main .wire_fundfee .sub_header, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee .sub_header, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee .sub_header, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee .sub_header { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee li#no_transaction, html.dark #wholediv .template_t .main .wire_fundfee li#no_transaction, html.dark #maincontent .template_t .main .wire_fundfee li#no_transaction, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee li#no_transaction, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee li#no_transaction, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee li#no_transaction { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee #received_amount, html.dark #wholediv #maincontent .template_t .main .wire_fundfee #received_date, html.dark #wholediv .template_t .main .wire_fundfee #received_amount, html.dark #wholediv .template_t .main .wire_fundfee #received_date, html.dark #maincontent .template_t .main .wire_fundfee #received_amount, html.dark #maincontent .template_t .main .wire_fundfee #received_date, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee #received_amount, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee #received_date, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee #received_amount, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee #received_date, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee #received_amount, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee #received_date { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee table, html.dark #wholediv .template_t .main .wire_fundfee table, html.dark #maincontent .template_t .main .wire_fundfee table, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee table, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee table, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee table { border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee table thead, html.dark #wholediv .template_t .main .wire_fundfee table thead, html.dark #maincontent .template_t .main .wire_fundfee table thead, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee table thead, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee table thead, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee table thead { background: var(--invest3-title-bar) !important; background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee table thead h1, html.dark #wholediv .template_t .main .wire_fundfee table thead h1, html.dark #maincontent .template_t .main .wire_fundfee table thead h1, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee table thead h1, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee table thead h1, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee table thead h1 { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee table td, html.dark #wholediv .template_t .main .wire_fundfee table td, html.dark #maincontent .template_t .main .wire_fundfee table td, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee table td, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee table td, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee table td { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee tr[bgcolor="#FFFFFF"] td, html.dark #wholediv .template_t .main .wire_fundfee tr[bgcolor="#FFFFFF"] td, html.dark #maincontent .template_t .main .wire_fundfee tr[bgcolor="#FFFFFF"] td, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee tr[bgcolor="#FFFFFF"] td, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee tr[bgcolor="#FFFFFF"] td, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee tr[bgcolor="#FFFFFF"] td { background-color: var(--invest3-card) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee .confirmForm ul li span.right, html.dark #wholediv .template_t .main .wire_fundfee .confirmForm ul li span.right, html.dark #maincontent .template_t .main .wire_fundfee .confirmForm ul li span.right, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee .confirmForm ul li span.right, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee .confirmForm ul li span.right, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee .confirmForm ul li span.right { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee select, html.dark #wholediv #maincontent .template_t .main .wire_fundfee input[type="text"], html.dark #wholediv .template_t .main .wire_fundfee select, html.dark #wholediv .template_t .main .wire_fundfee input[type="text"], html.dark #maincontent .template_t .main .wire_fundfee select, html.dark #maincontent .template_t .main .wire_fundfee input[type="text"], html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee select, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee input[type="text"], html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee select, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee input[type="text"], html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee select, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee input[type="text"] { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee #pending-tb th, html.dark #wholediv .template_t .main .wire_fundfee #pending-tb th, html.dark #maincontent .template_t .main .wire_fundfee #pending-tb th, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee #pending-tb th, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee #pending-tb th, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee #pending-tb th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee #pending-tb td, html.dark #wholediv .template_t .main .wire_fundfee #pending-tb td, html.dark #maincontent .template_t .main .wire_fundfee #pending-tb td, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee #pending-tb td, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee #pending-tb td, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee #pending-tb td { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-action, html.dark #wholediv .template_t .main .wire_fundfee a.btn.btn-action, html.dark #maincontent .template_t .main .wire_fundfee a.btn.btn-action, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-action, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee a.btn.btn-action, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee a.btn.btn-action { background-color: var(--invest3-ds-link-secondary) !important; background: var(--invest3-ds-link-secondary) !important; color: var(--invest3-ds-elev-01) !important; -webkit-text-fill-color: var(--invest3-ds-elev-01) !important; border-color: var(--invest3-ds-link-secondary) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-action:hover, html.dark #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-action:focus-visible, html.dark #wholediv .template_t .main .wire_fundfee a.btn.btn-action:hover, html.dark #wholediv .template_t .main .wire_fundfee a.btn.btn-action:focus-visible, html.dark #maincontent .template_t .main .wire_fundfee a.btn.btn-action:hover, html.dark #maincontent .template_t .main .wire_fundfee a.btn.btn-action:focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-action:hover, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-action:focus-visible, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee a.btn.btn-action:hover, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee a.btn.btn-action:focus-visible, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee a.btn.btn-action:hover, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee a.btn.btn-action:focus-visible { background-color: var(--invest3-ds-link-primary) !important; background: var(--invest3-ds-link-primary) !important; color: var(--invest3-ds-elev-01) !important; -webkit-text-fill-color: var(--invest3-ds-elev-01) !important; border-color: var(--invest3-ds-link-primary) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey, html.dark #wholediv .template_t .main .wire_fundfee a.btn.btn-clear-grey, html.dark #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee a.btn.btn-clear-grey, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey { background-color: transparent !important; background-image: none !important; color: var(--invest3-text-muted) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:hover, html.dark #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:focus-visible, html.dark #wholediv .template_t .main .wire_fundfee a.btn.btn-clear-grey:hover, html.dark #wholediv .template_t .main .wire_fundfee a.btn.btn-clear-grey:focus-visible, html.dark #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:hover, html.dark #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:hover, html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:focus-visible, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee a.btn.btn-clear-grey:hover, html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee a.btn.btn-clear-grey:focus-visible, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:hover, html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee a.btn.btn-clear-grey:focus-visible { color: var(--invest3-text) !important; border-color: var(--invest3-primary) !important; background-color: var(--invest3-primary-tint-16) !important; } /* ajaxForm / confirm row injects legacy */ html.dark #wholediv #maincontent .template_t .main .wire_fundfee font[color="#FF0000"], html.dark #wholediv #maincontent .template_t .main .wire_fundfee font[color="#ff0000"], html.dark #wholediv .template_t .main .wire_fundfee font[color="#FF0000"], html.dark #wholediv .template_t .main .wire_fundfee font[color="#ff0000"], html.dark #maincontent .template_t .main .wire_fundfee font[color="#FF0000"], html.dark #maincontent .template_t .main .wire_fundfee font[color="#ff0000"], html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee font[color="#FF0000"], html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee font[color="#ff0000"], html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee font[color="#FF0000"], html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee font[color="#ff0000"], html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee font[color="#FF0000"], html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee font[color="#ff0000"] { color: var(--invest3-error-text) !important; } html.dark #wholediv #maincontent .template_t .main .wire_fundfee font[color="green"], html.dark #wholediv .template_t .main .wire_fundfee font[color="green"], html.dark #maincontent .template_t .main .wire_fundfee font[color="green"], html[data-theme="dark"] #wholediv #maincontent .template_t .main .wire_fundfee font[color="green"], html[data-theme="dark"] #wholediv .template_t .main .wire_fundfee font[color="green"], html[data-theme="dark"] #maincontent .template_t .main .wire_fundfee font[color="green"] { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv #navcontainer { background: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv .action_box { background: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .action_box ul li a { color: var(--invest3-link) !important; } /* Home / dashboard widgets (cgi-bin/home, fcgi home.htm) */ :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-block-content { background: var(--invest3-card) !important; color: var(--invest3-text); } :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-block-title { background: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-top-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block-tabs, :is(html.dark, html[data-theme="dark"]) #wholediv .tabs-wr, :is(html.dark, html[data-theme="dark"]) #wholediv .ct .tabs-wr { background: var(--invest3-card) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .tabs-wr .tab a, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-block-tab a, :is(html.dark, html[data-theme="dark"]) #wholediv .ct .tabs-wr .tab a { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .tabs-wr .tab.current a, :is(html.dark, html[data-theme="dark"]) #wholediv .tabs-wr .tab:hover a, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block-tab.current a, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-block-tab a:hover, :is(html.dark, html[data-theme="dark"]) #wholediv .ct .tabs-wr .tab.current a, :is(html.dark, html[data-theme="dark"]) #wholediv .ct .tabs-wr .tab:hover a { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block:not(#accountBalances) th { color: var(--invest3-text-muted) !important; border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block-content table td { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #accountBalances span { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #accountBalances td { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv div.quotetime { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .mu-wr li { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv a.hnews, :is(html.dark, html[data-theme="dark"]) #wholediv .template_t .main a:not(.btn) { color: var(--invest3-link) !important; } /* Inline tab borders on home.htm (market indices / movers) */ :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column ul.tabs-wr[style*="border-top"], :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column ul.stat-gla-cat[style*="border-top"] { border-top-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .homepage select.stat-gla-mkt { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } /* home.htm Education Videos: legacy timestamps */ :is(html.dark, html[data-theme="dark"]) #wholediv .homepage font[color="#000000"], :is(html.dark, html[data-theme="dark"]) #wholediv .homepage font[color="#000"] { color: var(--invest3-text-muted) !important; } /* * Header Quick Links (div.scut) + symbol search: base.css / redesign use light borders and yellow hover. */ :is(html.dark, html[data-theme="dark"]) #wholediv #searchbar { border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head .change_acon { border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv div.scut { background: var(--invest3-card) !important; box-shadow: 0 9px 12px var(--invest3-shadow-45) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv div.scut .text { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv div.scut .top, :is(html.dark, html[data-theme="dark"]) #wholediv div.scut .bot { background: none !important; height: 0 !important; min-height: 0 !important; border: none !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head ul li div.scut_ctl span, :is(html.dark, html[data-theme="dark"]) #wholediv #head ul li div.scut .text a { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head ul li div.scut .text a { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head ul li div.scut .text a.first { border-top-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #head ul li div.scut .text a:hover { background-color: var(--invest3-primary-tint-16) !important; color: var(--invest3-link-hover) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .autocomplete { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } /* * Message Center (content/msg_center/mc.php): .mn_list / .mn_head / table.mc — legacy whites and blues. */ :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page > .title h1 { color: var(--invest3-text) !important; } /* Special Offers listing (content/promos/promos.php): .promotions > .title h1 */ :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .promotions > .title h1, :is(html.dark, html[data-theme="dark"]) #maincontent .promotions > .title h1 { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page > .title a.but_refresh, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page > .title a.but_refreshing { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page > .title a.but_refresh:hover, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page > .title a.but_refresh:focus-visible { color: var(--invest3-link-hover) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mn_list { background: var(--invest3-card) !important; border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35); } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mn_list .footer_list { background: var(--invest3-ds-elev-03) !important; border-top: 1px solid var(--invest3-card-border); } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mn_head { background: var(--invest3-title-bar) !important; border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mn_head .div_filter, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mn_head .div_filter label { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page select#mc_filter_m { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mc .msg_row td { color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mc .msg_row:hover { background-color: var(--invest3-row-hover) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .msg_row .ts, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .msg_row .ts.sright { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mc .subject { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .msg_row.read_0 .subject { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .msg_row .msg_body, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .msg_row .msg_body_short { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .all_prompt { background-color: var(--invest3-info-bg) !important; color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .all_prompt a { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .mn_list .error { color: var(--invest3-error-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .pagination a { background: var(--invest3-card) !important; color: var(--invest3-link) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .pagination a:hover, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .pagination a:focus-visible { background-color: var(--invest3-primary-tint-16) !important; color: var(--invest3-link-hover) !important; border-color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .pagination span { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page a.btn-clear-blue.disabled, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page a.btn-clear-blue.disabled_mr { opacity: 0.5 !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page div.red_dot_0 { background: var(--invest3-accent) !important; background-image: none !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page div.red_dot_1 { background: var(--invest3-ds-elev-04) !important; background-image: none !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .tog_icon_close, :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page .tog_icon_open { filter: brightness(0) invert(1); opacity: 0.75; } :is(html.dark, html[data-theme="dark"]) #wholediv #maincontent .mc-page div.vpipe { filter: brightness(0) invert(1); opacity: 0.2; } /* * Pricing hub (content/pricing/pricing.php + includes): tabs, commission lists, table_template blocks, broker comparison. * ul.pricingtab also appears under .fundaccount — same tab tokens apply. */ html.dark #wholediv #maincontent .template_t > .title > h1, html.dark #wholediv .template_t > .title > h1, html.dark #maincontent .template_t > .title > h1, html[data-theme="dark"] #wholediv #maincontent .template_t > .title > h1, html[data-theme="dark"] #wholediv .template_t > .title > h1, html[data-theme="dark"] #maincontent .template_t > .title > h1 { color: var(--invest3-text) !important; -webkit-text-fill-color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t ul.pricingtab li a, html.dark #wholediv .template_t ul.pricingtab li a, html.dark #maincontent .template_t ul.pricingtab li a, html[data-theme="dark"] #wholediv #maincontent .template_t ul.pricingtab li a, html[data-theme="dark"] #wholediv .template_t ul.pricingtab li a, html[data-theme="dark"] #maincontent .template_t ul.pricingtab li a { background: var(--invest3-ds-elev-03) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t ul.pricingtab li:hover a, html.dark #wholediv #maincontent .template_t ul.pricingtab li.current a, html.dark #wholediv .template_t ul.pricingtab li:hover a, html.dark #wholediv .template_t ul.pricingtab li.current a, html.dark #maincontent .template_t ul.pricingtab li:hover a, html.dark #maincontent .template_t ul.pricingtab li.current a, html[data-theme="dark"] #wholediv #maincontent .template_t ul.pricingtab li:hover a, html[data-theme="dark"] #wholediv #maincontent .template_t ul.pricingtab li.current a, html[data-theme="dark"] #wholediv .template_t ul.pricingtab li:hover a, html[data-theme="dark"] #wholediv .template_t ul.pricingtab li.current a, html[data-theme="dark"] #maincontent .template_t ul.pricingtab li:hover a, html[data-theme="dark"] #maincontent .template_t ul.pricingtab li.current a { background: var(--invest3-card) !important; color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .pricing h3, html.dark #wholediv #maincontent .template_t .pricing .table h2, html.dark #wholediv .template_t .pricing h3, html.dark #wholediv .template_t .pricing .table h2, html.dark #maincontent .template_t .pricing h3, html.dark #maincontent .template_t .pricing .table h2, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing h3, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing .table h2, html[data-theme="dark"] #wholediv .template_t .pricing h3, html[data-theme="dark"] #wholediv .template_t .pricing .table h2, html[data-theme="dark"] #maincontent .template_t .pricing h3, html[data-theme="dark"] #maincontent .template_t .pricing .table h2, html.dark #wholediv #maincontent .template_t .margin_rates h3, html.dark #wholediv .template_t .margin_rates h3, html.dark #maincontent .template_t .margin_rates h3, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates h3, html[data-theme="dark"] #wholediv .template_t .margin_rates h3, html[data-theme="dark"] #maincontent .template_t .margin_rates h3, html.dark #wholediv #maincontent .template_t .special_services h3, html.dark #wholediv .template_t .special_services h3, html.dark #maincontent .template_t .special_services h3, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services h3, html[data-theme="dark"] #wholediv .template_t .special_services h3, html[data-theme="dark"] #maincontent .template_t .special_services h3, html.dark #wholediv #maincontent .template_t .brokercomp h3, html.dark #wholediv .template_t .brokercomp h3, html.dark #maincontent .template_t .brokercomp h3, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp h3, html[data-theme="dark"] #wholediv .template_t .brokercomp h3, html[data-theme="dark"] #maincontent .template_t .brokercomp h3 { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .pricing .table .t_invisible, html.dark #wholediv .template_t .pricing .table .t_invisible, html.dark #maincontent .template_t .pricing .table .t_invisible, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing .table .t_invisible, html[data-theme="dark"] #wholediv .template_t .pricing .table .t_invisible, html[data-theme="dark"] #maincontent .template_t .pricing .table .t_invisible { border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .pricing ul.t_invisible[style*="ffffff"], html.dark #wholediv .template_t .pricing ul.t_invisible[style*="ffffff"], html.dark #maincontent .template_t .pricing ul.t_invisible[style*="ffffff"], html[data-theme="dark"] #wholediv #maincontent .template_t .pricing ul.t_invisible[style*="ffffff"], html[data-theme="dark"] #wholediv .template_t .pricing ul.t_invisible[style*="ffffff"], html[data-theme="dark"] #maincontent .template_t .pricing ul.t_invisible[style*="ffffff"], html.dark #wholediv #maincontent .template_t .pricing ul.t_invisible[style*="FFFFFF"], html.dark #wholediv .template_t .pricing ul.t_invisible[style*="FFFFFF"], html.dark #maincontent .template_t .pricing ul.t_invisible[style*="FFFFFF"], html[data-theme="dark"] #wholediv #maincontent .template_t .pricing ul.t_invisible[style*="FFFFFF"], html[data-theme="dark"] #wholediv .template_t .pricing ul.t_invisible[style*="FFFFFF"], html[data-theme="dark"] #maincontent .template_t .pricing ul.t_invisible[style*="FFFFFF"] { border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .pricing .table .t_invisible span.left, html.dark #wholediv #maincontent .template_t .pricing .table .t_invisible span.right, html.dark #wholediv .template_t .pricing .table .t_invisible span.left, html.dark #wholediv .template_t .pricing .table .t_invisible span.right, html.dark #maincontent .template_t .pricing .table .t_invisible span.left, html.dark #maincontent .template_t .pricing .table .t_invisible span.right, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing .table .t_invisible span.left, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing .table .t_invisible span.right, html[data-theme="dark"] #wholediv .template_t .pricing .table .t_invisible span.left, html[data-theme="dark"] #wholediv .template_t .pricing .table .t_invisible span.right, html[data-theme="dark"] #maincontent .template_t .pricing .table .t_invisible span.left, html[data-theme="dark"] #maincontent .template_t .pricing .table .t_invisible span.right { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .pricing .t_invisible li.note, html.dark #wholediv .template_t .pricing .t_invisible li.note, html.dark #maincontent .template_t .pricing .t_invisible li.note, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing .t_invisible li.note, html[data-theme="dark"] #wholediv .template_t .pricing .t_invisible li.note, html[data-theme="dark"] #maincontent .template_t .pricing .t_invisible li.note { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t .pricing p.note, html.dark #wholediv .template_t .pricing p.note, html.dark #maincontent .template_t .pricing p.note, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing p.note, html[data-theme="dark"] #wholediv .template_t .pricing p.note, html[data-theme="dark"] #maincontent .template_t .pricing p.note { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t .pricing p.note b, html.dark #wholediv .template_t .pricing p.note b, html.dark #maincontent .template_t .pricing p.note b, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing p.note b, html[data-theme="dark"] #wholediv .template_t .pricing p.note b, html[data-theme="dark"] #maincontent .template_t .pricing p.note b { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .pricing p.note a:not(.btn), html.dark #wholediv .template_t .pricing p.note a:not(.btn), html.dark #maincontent .template_t .pricing p.note a:not(.btn), html[data-theme="dark"] #wholediv #maincontent .template_t .pricing p.note a:not(.btn), html[data-theme="dark"] #wholediv .template_t .pricing p.note a:not(.btn), html[data-theme="dark"] #maincontent .template_t .pricing p.note a:not(.btn) { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .template_t .pricing p.note a:not(.btn):hover, html.dark #wholediv #maincontent .template_t .pricing p.note a:not(.btn):focus-visible, html.dark #wholediv .template_t .pricing p.note a:not(.btn):hover, html.dark #wholediv .template_t .pricing p.note a:not(.btn):focus-visible, html.dark #maincontent .template_t .pricing p.note a:not(.btn):hover, html.dark #maincontent .template_t .pricing p.note a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing p.note a:not(.btn):hover, html[data-theme="dark"] #wholediv #maincontent .template_t .pricing p.note a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv .template_t .pricing p.note a:not(.btn):hover, html[data-theme="dark"] #wholediv .template_t .pricing p.note a:not(.btn):focus-visible, html[data-theme="dark"] #maincontent .template_t .pricing p.note a:not(.btn):hover, html[data-theme="dark"] #maincontent .template_t .pricing p.note a:not(.btn):focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv #maincontent .template_t .margin_rates p, html.dark #wholediv .template_t .margin_rates p, html.dark #maincontent .template_t .margin_rates p, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates p, html[data-theme="dark"] #wholediv .template_t .margin_rates p, html[data-theme="dark"] #maincontent .template_t .margin_rates p, html.dark #wholediv #maincontent .template_t .margin_rates p.note, html.dark #wholediv .template_t .margin_rates p.note, html.dark #maincontent .template_t .margin_rates p.note, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates p.note, html[data-theme="dark"] #wholediv .template_t .margin_rates p.note, html[data-theme="dark"] #maincontent .template_t .margin_rates p.note { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t .margin_rates .table p, html.dark #wholediv .template_t .margin_rates .table p, html.dark #maincontent .template_t .margin_rates .table p, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates .table p, html[data-theme="dark"] #wholediv .template_t .margin_rates .table p, html[data-theme="dark"] #maincontent .template_t .margin_rates .table p { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t .margin_rates .table p:first-of-type, html.dark #wholediv .template_t .margin_rates .table p:first-of-type, html.dark #maincontent .template_t .margin_rates .table p:first-of-type, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates .table p:first-of-type, html[data-theme="dark"] #wholediv .template_t .margin_rates .table p:first-of-type, html[data-theme="dark"] #maincontent .template_t .margin_rates .table p:first-of-type { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .margin_rates table.table_template thead th, html.dark #wholediv .template_t .margin_rates table.table_template thead th, html.dark #maincontent .template_t .margin_rates table.table_template thead th, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates table.table_template thead th, html[data-theme="dark"] #wholediv .template_t .margin_rates table.table_template thead th, html[data-theme="dark"] #maincontent .template_t .margin_rates table.table_template thead th, html.dark #wholediv #maincontent .template_t .special_services table.table_template thead th, html.dark #wholediv .template_t .special_services table.table_template thead th, html.dark #maincontent .template_t .special_services table.table_template thead th, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services table.table_template thead th, html[data-theme="dark"] #wholediv .template_t .special_services table.table_template thead th, html[data-theme="dark"] #maincontent .template_t .special_services table.table_template thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .margin_rates table.table_template tbody td, html.dark #wholediv .template_t .margin_rates table.table_template tbody td, html.dark #maincontent .template_t .margin_rates table.table_template tbody td, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates table.table_template tbody td, html[data-theme="dark"] #wholediv .template_t .margin_rates table.table_template tbody td, html[data-theme="dark"] #maincontent .template_t .margin_rates table.table_template tbody td, html.dark #wholediv #maincontent .template_t .special_services table.table_template tbody td, html.dark #wholediv .template_t .special_services table.table_template tbody td, html.dark #maincontent .template_t .special_services table.table_template tbody td, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services table.table_template tbody td, html[data-theme="dark"] #wholediv .template_t .special_services table.table_template tbody td, html[data-theme="dark"] #maincontent .template_t .special_services table.table_template tbody td { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .margin_rates table.table_template tbody tr:hover td, html.dark #wholediv .template_t .margin_rates table.table_template tbody tr:hover td, html.dark #maincontent .template_t .margin_rates table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv .template_t .margin_rates table.table_template tbody tr:hover td, html[data-theme="dark"] #maincontent .template_t .margin_rates table.table_template tbody tr:hover td, html.dark #wholediv #maincontent .template_t .special_services table.table_template tbody tr:hover td, html.dark #wholediv .template_t .special_services table.table_template tbody tr:hover td, html.dark #maincontent .template_t .special_services table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv .template_t .special_services table.table_template tbody tr:hover td, html[data-theme="dark"] #maincontent .template_t .special_services table.table_template tbody tr:hover td { background-color: var(--invest3-row-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn), html.dark #wholediv .template_t .margin_rates table.table_template tbody td a:not(.btn), html.dark #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn), html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn), html[data-theme="dark"] #wholediv .template_t .margin_rates table.table_template tbody td a:not(.btn), html[data-theme="dark"] #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn), html.dark #wholediv #maincontent .template_t .special_services table.table_template tbody td a:not(.btn), html.dark #wholediv .template_t .special_services table.table_template tbody td a:not(.btn), html.dark #maincontent .template_t .special_services table.table_template tbody td a:not(.btn), html[data-theme="dark"] #wholediv #maincontent .template_t .special_services table.table_template tbody td a:not(.btn), html[data-theme="dark"] #wholediv .template_t .special_services table.table_template tbody td a:not(.btn), html[data-theme="dark"] #maincontent .template_t .special_services table.table_template tbody td a:not(.btn) { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .template_t .margin_rates p a:not(.btn), html.dark #wholediv .template_t .margin_rates p a:not(.btn), html.dark #maincontent .template_t .margin_rates p a:not(.btn), html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates p a:not(.btn), html[data-theme="dark"] #wholediv .template_t .margin_rates p a:not(.btn), html[data-theme="dark"] #maincontent .template_t .margin_rates p a:not(.btn), html.dark #wholediv #maincontent .template_t .special_services p a:not(.btn), html.dark #wholediv .template_t .special_services p a:not(.btn), html.dark #maincontent .template_t .special_services p a:not(.btn), html[data-theme="dark"] #wholediv #maincontent .template_t .special_services p a:not(.btn), html[data-theme="dark"] #wholediv .template_t .special_services p a:not(.btn), html[data-theme="dark"] #maincontent .template_t .special_services p a:not(.btn) { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .template_t .margin_rates p a:not(.btn):hover, html.dark #wholediv #maincontent .template_t .margin_rates p a:not(.btn):focus-visible, html.dark #wholediv .template_t .margin_rates p a:not(.btn):hover, html.dark #wholediv .template_t .margin_rates p a:not(.btn):focus-visible, html.dark #maincontent .template_t .margin_rates p a:not(.btn):hover, html.dark #maincontent .template_t .margin_rates p a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates p a:not(.btn):hover, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates p a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv .template_t .margin_rates p a:not(.btn):hover, html[data-theme="dark"] #wholediv .template_t .margin_rates p a:not(.btn):focus-visible, html[data-theme="dark"] #maincontent .template_t .margin_rates p a:not(.btn):hover, html[data-theme="dark"] #maincontent .template_t .margin_rates p a:not(.btn):focus-visible, html.dark #wholediv #maincontent .template_t .special_services p a:not(.btn):hover, html.dark #wholediv #maincontent .template_t .special_services p a:not(.btn):focus-visible, html.dark #wholediv .template_t .special_services p a:not(.btn):hover, html.dark #wholediv .template_t .special_services p a:not(.btn):focus-visible, html.dark #maincontent .template_t .special_services p a:not(.btn):hover, html.dark #maincontent .template_t .special_services p a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services p a:not(.btn):hover, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services p a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv .template_t .special_services p a:not(.btn):hover, html[data-theme="dark"] #wholediv .template_t .special_services p a:not(.btn):focus-visible, html[data-theme="dark"] #maincontent .template_t .special_services p a:not(.btn):hover, html[data-theme="dark"] #maincontent .template_t .special_services p a:not(.btn):focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):hover, html.dark #wholediv #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):focus-visible, html.dark #wholediv .template_t .margin_rates table.table_template tbody td a:not(.btn):hover, html.dark #wholediv .template_t .margin_rates table.table_template tbody td a:not(.btn):focus-visible, html.dark #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):hover, html.dark #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):hover, html[data-theme="dark"] #wholediv #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv .template_t .margin_rates table.table_template tbody td a:not(.btn):hover, html[data-theme="dark"] #wholediv .template_t .margin_rates table.table_template tbody td a:not(.btn):focus-visible, html[data-theme="dark"] #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):hover, html[data-theme="dark"] #maincontent .template_t .margin_rates table.table_template tbody td a:not(.btn):focus-visible, html.dark #wholediv #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):hover, html.dark #wholediv #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):focus-visible, html.dark #wholediv .template_t .special_services table.table_template tbody td a:not(.btn):hover, html.dark #wholediv .template_t .special_services table.table_template tbody td a:not(.btn):focus-visible, html.dark #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):hover, html.dark #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):hover, html[data-theme="dark"] #wholediv #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv .template_t .special_services table.table_template tbody td a:not(.btn):hover, html[data-theme="dark"] #wholediv .template_t .special_services table.table_template tbody td a:not(.btn):focus-visible, html[data-theme="dark"] #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):hover, html[data-theme="dark"] #maincontent .template_t .special_services table.table_template tbody td a:not(.btn):focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv #maincontent .template_t .brokercomp table th, html.dark #wholediv .template_t .brokercomp table th, html.dark #maincontent .template_t .brokercomp table th, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp table th, html[data-theme="dark"] #wholediv .template_t .brokercomp table th, html[data-theme="dark"] #maincontent .template_t .brokercomp table th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .brokercomp table td, html.dark #wholediv .template_t .brokercomp table td, html.dark #maincontent .template_t .brokercomp table td, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp table td, html[data-theme="dark"] #wholediv .template_t .brokercomp table td, html[data-theme="dark"] #maincontent .template_t .brokercomp table td { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t .brokercomp table tr.alt td, html.dark #wholediv .template_t .brokercomp table tr.alt td, html.dark #maincontent .template_t .brokercomp table tr.alt td, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp table tr.alt td, html[data-theme="dark"] #wholediv .template_t .brokercomp table tr.alt td, html[data-theme="dark"] #maincontent .template_t .brokercomp table tr.alt td { background-color: var(--invest3-row-alt) !important; } html.dark #wholediv #maincontent .template_t .brokercomp table tbody tr:hover td, html.dark #wholediv .template_t .brokercomp table tbody tr:hover td, html.dark #maincontent .template_t .brokercomp table tbody tr:hover td, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp table tbody tr:hover td, html[data-theme="dark"] #wholediv .template_t .brokercomp table tbody tr:hover td, html[data-theme="dark"] #maincontent .template_t .brokercomp table tbody tr:hover td { background-color: var(--invest3-row-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .brokercomp .tabletitle, html.dark #wholediv .template_t .brokercomp .tabletitle, html.dark #maincontent .template_t .brokercomp .tabletitle, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp .tabletitle, html[data-theme="dark"] #wholediv .template_t .brokercomp .tabletitle, html[data-theme="dark"] #maincontent .template_t .brokercomp .tabletitle { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .brokercomp .symbol, html.dark #wholediv .template_t .brokercomp .symbol, html.dark #maincontent .template_t .brokercomp .symbol, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp .symbol, html[data-theme="dark"] #wholediv .template_t .brokercomp .symbol, html[data-theme="dark"] #maincontent .template_t .brokercomp .symbol { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .template_t .brokercomp .side, html.dark #wholediv .template_t .brokercomp .side, html.dark #maincontent .template_t .brokercomp .side, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp .side, html[data-theme="dark"] #wholediv .template_t .brokercomp .side, html[data-theme="dark"] #maincontent .template_t .brokercomp .side { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t .brokercomp .smallnote, html.dark #wholediv .template_t .brokercomp .smallnote, html.dark #maincontent .template_t .brokercomp .smallnote, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp .smallnote, html[data-theme="dark"] #wholediv .template_t .brokercomp .smallnote, html[data-theme="dark"] #maincontent .template_t .brokercomp .smallnote { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t .brokercomp th img[src*="ftlogo"], html.dark #wholediv .template_t .brokercomp th img[src*="ftlogo"], html.dark #maincontent .template_t .brokercomp th img[src*="ftlogo"], html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp th img[src*="ftlogo"], html[data-theme="dark"] #wholediv .template_t .brokercomp th img[src*="ftlogo"], html[data-theme="dark"] #maincontent .template_t .brokercomp th img[src*="ftlogo"] { filter: brightness(0) invert(1); } html.dark #wholediv #maincontent .template_t .brokercomp p, html.dark #wholediv .template_t .brokercomp p, html.dark #maincontent .template_t .brokercomp p, html[data-theme="dark"] #wholediv #maincontent .template_t .brokercomp p, html[data-theme="dark"] #wholediv .template_t .brokercomp p, html[data-theme="dark"] #maincontent .template_t .brokercomp p { color: var(--invest3-text-muted) !important; } html.dark #wholediv #onlineapp-wr, html.dark #wholediv .homepage #fundin-wr { background: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #onlineapp-wr .heading-title { color: var(--invest3-text) !important; } html.dark #wholediv #onlineapp-wr .heading-subtitle, html.dark #wholediv #onlineapp-wr .heading-paragraph { color: var(--invest3-text-muted) !important; } html.dark #wholediv .welcomebanner { background: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .welcomebanner p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .noticebox { background-color: var(--invest3-info-bg) !important; color: var(--invest3-text-muted) !important; } /* Side widgets / AOT tables */ html.dark #wholediv .aot_ifm table a { color: var(--invest3-link) !important; } html.dark #wholediv .aot_ifm table.tablesorter tbody tr { border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .aot_ifm table.tablesorter > tbody > tr.even > td { background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .aot_ifm table.tablesorter > tbody > tr.odd > td { background-color: var(--invest3-card) !important; } html.dark #wholediv .aot_ifm table.tablesorter > tbody > tr.even:hover > td, html.dark #wholediv .aot_ifm table.tablesorter > tbody > tr.odd:hover > td { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv .aot_ifm, html[data-theme="dark"] #wholediv .aot_ifm { background-color: var(--invest3-card) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } /* e.g. #acct_info_right cash row — not .tablesorter */ html.dark #wholediv .aot_ifm table:not(.tablesorter) th, html.dark #wholediv .aot_ifm table:not(.tablesorter) td, html[data-theme="dark"] #wholediv .aot_ifm table:not(.tablesorter) th, html[data-theme="dark"] #wholediv .aot_ifm table:not(.tablesorter) td { color: var(--invest3-text) !important; background-color: transparent !important; } html.dark #wholediv .aot_ifm .main, html[data-theme="dark"] #wholediv .aot_ifm .main { color: var(--invest3-text) !important; } html.dark #wholediv .aot_ifm .main a, html[data-theme="dark"] #wholediv .aot_ifm .main a { color: var(--invest3-link) !important; } html.dark #wholediv .aot_ifm .main a:hover, html[data-theme="dark"] #wholediv .aot_ifm .main a:hover { color: var(--invest3-link-hover) !important; } html.dark #wholediv table.tablesorter > tbody > tr.even > td { background-color: var(--invest3-row-alt) !important; } html.dark #wholediv table.tablesorter > tbody > tr.odd > td { background-color: var(--invest3-card) !important; } html.dark #wholediv table.tablesorter > tbody > tr:hover > td, html.dark #wholediv table.tablesorter > tbody > tr.hovered > td { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv table.display tbody tr:hover > td { background-color: var(--invest3-row-hover) !important; } /* * Fixed order bar + option chain (#mainorderbar, #notify-table, #showpacel, #optionChain). * orderbar.css / redesign use white + light blues; #notify-table .footer1 is outside #wholediv. * Bar + spacer match main column fill (--invest3-canvas). Spacer is layout-only — no bar chrome. */ html.dark #mainorderbar, html[data-theme="dark"] #mainorderbar { background-color: var(--invest3-canvas) !important; color: var(--invest3-text); } html.dark #space-for-bar, html[data-theme="dark"] #space-for-bar { background-color: var(--invest3-canvas) !important; color: var(--invest3-text); } /* * #notify-table is full width; .orderbar is 960px centered — side gutters exposed the * white blank.html in iframe.orderBar_iframe (z-index:-1). Paint the shell + hide placeholder iframes. */ html.dark #notify-table, html[data-theme="dark"] #notify-table { background-color: var(--invest3-surface-elevation-01) !important; color: var(--invest3-text) !important; } html.dark #notify-table iframe.orderBar_iframe, html[data-theme="dark"] #notify-table iframe.orderBar_iframe, html.dark #notify-table iframe.optionChain_iframe, html[data-theme="dark"] #notify-table iframe.optionChain_iframe { opacity: 0 !important; pointer-events: none; } html.dark #notify-table .footer1, html[data-theme="dark"] #notify-table .footer1 { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; border-top: 1px solid var(--invest3-card-border); } html.dark #notify-table .orderbar, html[data-theme="dark"] #notify-table .orderbar { background: var(--invest3-card) !important; border-top: 4px solid var(--invest3-primary) !important; color: var(--invest3-text) !important; } html.dark #notify-table .orderbar > .top, html[data-theme="dark"] #notify-table .orderbar > .top { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #notify-table .orderbar .top .left, html[data-theme="dark"] #notify-table .orderbar .top .left { background: var(--invest3-title-bar) !important; } html.dark #notify-table .orderbar .top .left .name, html.dark #notify-table .orderbar .top .left .bar, html[data-theme="dark"] #notify-table .orderbar .top .left .name, html[data-theme="dark"] #notify-table .orderbar .top .left .bar { background: var(--invest3-card) !important; } html.dark #notify-table .orderbar .top .right, html[data-theme="dark"] #notify-table .orderbar .top .right { background: var(--invest3-row-alt) !important; border-left-color: var(--invest3-card-border) !important; } html.dark #notify-table .orderbar .bottom, html.dark #notify-table .orderbar .edit, html[data-theme="dark"] #notify-table .orderbar .bottom, html[data-theme="dark"] #notify-table .orderbar .edit { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #notify-table .orderbar .bottom .main, html.dark #notify-table .orderbar .bottom .cheat, html[data-theme="dark"] #notify-table .orderbar .bottom .main, html[data-theme="dark"] #notify-table .orderbar .bottom .cheat { background: var(--invest3-row-alt) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #notify-table .orderbar .bottom .bal, html[data-theme="dark"] #notify-table .orderbar .bottom .bal { background: var(--invest3-card) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #notify-table #QuoteForm input[type="text"], html.dark #notify-table #accountId, html.dark #notify-table #dropdownpages, html[data-theme="dark"] #notify-table #QuoteForm input[type="text"], html[data-theme="dark"] #notify-table #accountId, html[data-theme="dark"] #notify-table #dropdownpages { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #notify-table .orderbar .bottom .main input[type="text"], html.dark #notify-table .orderbar .bottom .main select, html.dark #notify-table .orderbar .bottom .main .od_option input, html.dark #notify-table .orderbar .bottom .main .od_option select, html[data-theme="dark"] #notify-table .orderbar .bottom .main input[type="text"], html[data-theme="dark"] #notify-table .orderbar .bottom .main select, html[data-theme="dark"] #notify-table .orderbar .bottom .main .od_option input, html[data-theme="dark"] #notify-table .orderbar .bottom .main .od_option select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #notify-table .orderbar .bottom .main .button a.stock_off, html.dark #notify-table .orderbar .bottom .main .button a.option_off, html[data-theme="dark"] #notify-table .orderbar .bottom .main .button a.stock_off, html[data-theme="dark"] #notify-table .orderbar .bottom .main .button a.option_off { background: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; } html.dark #notify-table .orderbar .bottom .main .button a.stock_on, html.dark #notify-table .orderbar .bottom .main .button a.option_on, html[data-theme="dark"] #notify-table .orderbar .bottom .main .button a.stock_on, html[data-theme="dark"] #notify-table .orderbar .bottom .main .button a.option_on { background: transparent !important; color: var(--invest3-link) !important; } html.dark #notify-table .orderbar label, html.dark #notify-table .orderbar .bottom .main ul label, html[data-theme="dark"] #notify-table .orderbar label, html[data-theme="dark"] #notify-table .orderbar .bottom .main ul label { color: var(--invest3-text-muted) !important; } html.dark #notify-table .orderbar .info_off, html[data-theme="dark"] #notify-table .orderbar .info_off { border-right-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } html.dark #notify-table .orderbar .bottom .bal .bal_l, html[data-theme="dark"] #notify-table .orderbar .bottom .bal .bal_l { border-left-color: var(--invest3-card-border) !important; } html.dark #notify-table .orderbar .bottom .bal .bal_m .balances td, html.dark #notify-table .orderbar .bottom .bal .bal_m .balances th, html[data-theme="dark"] #notify-table .orderbar .bottom .bal .bal_m .balances td, html[data-theme="dark"] #notify-table .orderbar .bottom .bal .bal_m .balances th { border-bottom-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #notify-table .get_chain, html[data-theme="dark"] #notify-table .get_chain { background-color: var(--invest3-row-alt) !important; } html.dark #notify-table #sandpheadline #cheatsheet-news, html[data-theme="dark"] #notify-table #sandpheadline #cheatsheet-news { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; } html.dark #optionChain, html[data-theme="dark"] #optionChain { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; } html.dark #optionChain .odb_option, html[data-theme="dark"] #optionChain .odb_option { background: var(--invest3-card) !important; background-image: none !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .top, html[data-theme="dark"] #optionChain .odb_option .top { background: var(--invest3-title-bar) !important; background-image: none !important; } html.dark #optionChain .odb_option .top .sel, html[data-theme="dark"] #optionChain .odb_option .top .sel { background: transparent !important; background-image: none !important; } html.dark #optionChain .odb_option .top .bar, html[data-theme="dark"] #optionChain .odb_option .top .bar { background: transparent !important; background-image: none !important; } html.dark #optionChain .odb_option .top .sel label, html.dark #optionChain .odb_option .sel_t li label, html.dark #optionChain .odb_option .day label, html[data-theme="dark"] #optionChain .odb_option .top .sel label, html[data-theme="dark"] #optionChain .odb_option .sel_t li label, html[data-theme="dark"] #optionChain .odb_option .day label { color: var(--invest3-text-muted) !important; } html.dark #optionChain .odb_option .top .sel input, html.dark #optionChain .odb_option .sel_t li select, html.dark #optionChain .odb_option .sel_t, html[data-theme="dark"] #optionChain .odb_option .top .sel input, html[data-theme="dark"] #optionChain .odb_option .sel_t li select, html[data-theme="dark"] #optionChain .odb_option .sel_t { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; background-image: none !important; } html.dark #optionChain .odb_option .sel_t, html[data-theme="dark"] #optionChain .odb_option .sel_t { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .day, html[data-theme="dark"] #optionChain .odb_option .day { background: var(--invest3-row-alt) !important; background-image: none !important; border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .day ul li a, html[data-theme="dark"] #optionChain .odb_option .day ul li a { background: var(--invest3-card) !important; color: var(--invest3-text) !important; } html.dark #optionChain .odb_option .day ul li.current a, html.dark #optionChain .odb_option .day ul li a:hover, html[data-theme="dark"] #optionChain .odb_option .day ul li.current a, html[data-theme="dark"] #optionChain .odb_option .day ul li a:hover { background: var(--invest3-primary) !important; color: var(--invest3-text) !important; } /* * Option chain scroll pane + grid: base.css uses .odb_option .main { background:#fff } and * table tr td/th { background #fff / #F7F7F7 } — must override backgrounds, not only color. */ html.dark #optionChain .odb_option .main, html[data-theme="dark"] #optionChain .odb_option .main { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .main table, html[data-theme="dark"] #optionChain .odb_option .main table { border-left-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .main .symbol, html.dark #optionChain .odb_option .main table tr .gray, html.dark #optionChain .odb_option .main table tr .gray_r, html.dark #optionChain .odb_option .main table tr th.gray, html[data-theme="dark"] #optionChain .odb_option .main .symbol, html[data-theme="dark"] #optionChain .odb_option .main table tr .gray, html[data-theme="dark"] #optionChain .odb_option .main table tr .gray_r, html[data-theme="dark"] #optionChain .odb_option .main table tr th.gray { background: var(--invest3-title-bar) !important; background-image: none !important; color: var(--invest3-link) !important; } html.dark #optionChain .odb_option .main .symbol h2, html.dark #optionChain .odb_option .main table tr th, html.dark #optionChain .odb_option .main table tr th.left_t, html.dark #optionChain .odb_option .main table tr th.cp, html[data-theme="dark"] #optionChain .odb_option .main .symbol h2, html[data-theme="dark"] #optionChain .odb_option .main table tr th, html[data-theme="dark"] #optionChain .odb_option .main table tr th.left_t, html[data-theme="dark"] #optionChain .odb_option .main table tr th.cp { background-color: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; border-bottom-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .main table tr td, html[data-theme="dark"] #optionChain .odb_option .main table tr td { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .main table tr td.yellow, html[data-theme="dark"] #optionChain .odb_option .main table tr td.yellow { background-color: var(--invest3-warn-bg) !important; } html.dark #optionChain .odb_option .main table tr td.over, html[data-theme="dark"] #optionChain .odb_option .main table tr td.over { background-color: var(--invest3-row-hover) !important; } html.dark #optionChain .odb_option .start tr td span, html[data-theme="dark"] #optionChain .odb_option .start tr td span { background: var(--invest3-warn-bg) !important; } html.dark #optionChain .odb_option .caption, html[data-theme="dark"] #optionChain .odb_option .caption { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .caption li span, html[data-theme="dark"] #optionChain .odb_option .caption li span { background: var(--invest3-warn-bg) !important; border-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .caption, html.dark #optionChain .odb_option .caption label, html[data-theme="dark"] #optionChain .odb_option .caption, html[data-theme="dark"] #optionChain .odb_option .caption label { color: var(--invest3-text-muted) !important; } html.dark #optionChain .odb_option .caption a, html[data-theme="dark"] #optionChain .odb_option .caption a { color: var(--invest3-link) !important; } html.dark #optionChain .odb_option .main input[type="text"], html[data-theme="dark"] #optionChain .odb_option .main input[type="text"] { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #optionChain .odb_option .main table tr th.int, html[data-theme="dark"] #optionChain .odb_option .main table tr th.int { border-right-color: var(--invest3-card-border) !important; } /* Content inputs (symbol lookup, etc.) */ html.dark #wholediv #id-symlookup-wr input, html.dark #wholediv .dashboard-block-content input[type="text"], html.dark #wholediv .dashboard-block-content input[type="number"], html.dark #wholediv .dashboard-block-content select, html.dark #wholediv .template_t .main input[type="text"], html.dark #wholediv .template_t .main select { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } /* * FEIP / investment profile: Bootstrap .form-control uses #fff / #555 (base.css) — use a slightly * lighter field well (--invest3-row-alt) on the dark form card for clear separation. */ html.dark #wholediv #feip-update .form-control, html.dark #wholediv #feip-form .form-control { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } html.dark #wholediv #feip-update .form-control:focus, html.dark #wholediv #feip-form .form-control:focus { border-color: var(--invest3-primary) !important; -webkit-box-shadow: 0 0 0 1px var(--invest3-primary) !important; box-shadow: 0 0 0 1px var(--invest3-primary) !important; } html.dark #wholediv #feip-update .form-control::placeholder, html.dark #wholediv #feip-form .form-control::placeholder { color: var(--invest3-text-muted) !important; opacity: 1; } html.dark #wholediv #feip-form input:disabled, html.dark #wholediv #feip-form select:disabled, html.dark #wholediv #feip-form textarea:disabled { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; opacity: 1 !important; } /* Beneficiaries: brighter invest3 blue (not body white) for section titles */ html.dark #wholediv h2.ben-header, html.dark #wholediv .ben-cat-header { color: var(--invest3-link-hover) !important; } html.dark #wholediv .ben-cat hr { border-top-color: var(--invest3-card-border) !important; } /* * Mutual Funds order entry (mutualfund.htm #MFOrderForm1): #colorbox.box.white.cond — orderbar.css * sets .optionsB .white { background:#fff } and .optionsB .box { border:#e5e4e4 }. */ html.dark #wholediv #MFOrderForm1 .title h1, html[data-theme="dark"] #wholediv #MFOrderForm1 .title h1 { color: var(--invest3-text) !important; } html.dark #wholediv #MFOrderForm1 .title a.hplink, html[data-theme="dark"] #wholediv #MFOrderForm1 .title a.hplink { color: var(--invest3-link) !important; } html.dark #wholediv #MFOrderForm1 .optionsB .box.white, html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB .box.white { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #wholediv #MFOrderForm1 .optionsB input[type="text"], html.dark #wholediv #MFOrderForm1 .optionsB select, html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB input[type="text"], html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #MFOrderForm1 .optionsB input[type="radio"], html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB input[type="radio"] { accent-color: var(--invest3-primary); } html.dark #wholediv #MFOrderForm1 .optionsB label, html.dark #wholediv #MFOrderForm1 .optionsB ul.rad li, html.dark #wholediv #MFOrderForm1 .optionsB ul.rad_mut strong, html.dark #wholediv #MFOrderForm1 .optionsB ul.rad_mut strong label, html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB label, html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB ul.rad li, html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB ul.rad_mut strong, html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB ul.rad_mut strong label { color: var(--invest3-text) !important; } html.dark #wholediv #MFOrderForm1 .optionsB ul.rad_mut li:first-child strong, html[data-theme="dark"] #wholediv #MFOrderForm1 .optionsB ul.rad_mut li:first-child strong { color: var(--invest3-text-muted) !important; } html.dark #wholediv #MFOrderForm1 #order_entry .title_list .acct_dd select, html.dark #wholediv #MFOrderForm1 #order_entry .title_list .acct_dd strong, html[data-theme="dark"] #wholediv #MFOrderForm1 #order_entry .title_list .acct_dd select, html[data-theme="dark"] #wholediv #MFOrderForm1 #order_entry .title_list .acct_dd strong { color: var(--invest3-text) !important; } html.dark #wholediv #MFOrderForm1 #order_entry .title_list .acct_dd select, html[data-theme="dark"] #wholediv #MFOrderForm1 #order_entry .title_list .acct_dd select { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #MFOrderForm1 #show_mforderpageerror .yellow.box, html[data-theme="dark"] #wholediv #MFOrderForm1 #show_mforderpageerror .yellow.box { background: var(--invest3-warn-bg) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #MFOrderForm1 #mforderpageerror, html[data-theme="dark"] #wholediv #MFOrderForm1 #mforderpageerror { color: var(--invest3-error-text) !important; } /* * Mutual Funds preview (#MFOrderForm1 #preview): AJAX injects .preview_box / .preview_mut + table; * orderbar.css uses #fff / #efefef cells, #003366 h2, .preview_refresh light rows. */ html.dark #wholediv #MFOrderForm1 #preview .preview_box, html.dark #wholediv #MFOrderForm1 #preview .preview_mut, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_mut { color: var(--invest3-text) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box h2, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box h2 { color: var(--invest3-link) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box table th, html.dark #wholediv #MFOrderForm1 #preview .preview_box table td, html.dark #wholediv #MFOrderForm1 #preview .preview_mut table th, html.dark #wholediv #MFOrderForm1 #preview .preview_mut table td, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box table th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box table td, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_mut table th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_mut table td { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box table thead th, html.dark #wholediv #MFOrderForm1 #preview .preview_mut table thead th, html.dark #wholediv #MFOrderForm1 #preview .preview_box table tr:first-child th, html.dark #wholediv #MFOrderForm1 #preview .preview_mut table tr:first-child th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box table thead th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_mut table thead th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box table tr:first-child th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_mut table tr:first-child th { background: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box table tbody tr:nth-child(even) td, html.dark #wholediv #MFOrderForm1 #preview .preview_mut table tbody tr:nth-child(even) td, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box table tbody tr:nth-child(even) td, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_mut table tbody tr:nth-child(even) td { background-color: var(--invest3-row-alt) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box table .no_bor td, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box table .no_bor td { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box .preview_refresh tr td, html.dark #wholediv #MFOrderForm1 #preview .preview_box .preview_refresh tr th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box .preview_refresh tr td, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box .preview_refresh tr th { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box .preview_refresh tr th, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box .preview_refresh tr th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; } html.dark #wholediv #MFOrderForm1 #preview .preview_box table a, html.dark #wholediv #MFOrderForm1 #preview .preview_mut table a, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_box table a, html[data-theme="dark"] #wholediv #MFOrderForm1 #preview .preview_mut table a { color: var(--invest3-link) !important; } /* * Options / conditional: .part_c left rule — orderbar uses border-left (replaces line_cond.gif); dark stroke from tokens. */ html.dark #wholediv .optionsB .box .part_c, html[data-theme="dark"] #wholediv .optionsB .box .part_c { background: none !important; border-left: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv .optionsB .yellow .part_c, html[data-theme="dark"] #wholediv .optionsB .yellow .part_c { background: none !important; border-left-color: var(--invest3-card-border) !important; } /* * Conditional orders (condition_orders.htm): INV-2072 ds tokens only (--invest3-ds-elev-01…accent…text-tertiary) * inside #OptionOrderForm1 .optionsB and .right_4; .label_y uses elev-03 (not accent orange). */ html.dark #wholediv .stocks-conditional-orders > .title h1, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title h1 { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders > .title, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders > .title a, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title a { color: var(--invest3-ds-link-primary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders > .title a:hover, html.dark #wholediv .stocks-conditional-orders > .title a:focus-visible, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title a:hover, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title a:focus-visible { color: var(--invest3-ds-link-secondary) !important; opacity: 1 !important; } /* index_top in title: no legacy #008a1b / #e51e1e — map movers to ds link / secondary text */ html.dark #wholediv .stocks-conditional-orders > .title #qt-top-search, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title #qt-top-search { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders > .title #qt-top-search .green, html.dark #wholediv .stocks-conditional-orders > .title #qt-top-search .hul div.green, html.dark #wholediv .stocks-conditional-orders > .title #qt-top-search .quote_up, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title #qt-top-search .green, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title #qt-top-search .hul div.green, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title #qt-top-search .quote_up { color: var(--invest3-ds-link-primary) !important; } html.dark #wholediv .stocks-conditional-orders > .title #qt-top-search .red, html.dark #wholediv .stocks-conditional-orders > .title #qt-top-search .hul div.red, html.dark #wholediv .stocks-conditional-orders > .title #qt-top-search .quote_down, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title #qt-top-search .red, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title #qt-top-search .hul div.red, html[data-theme="dark"] #wholediv .stocks-conditional-orders > .title #qt-top-search .quote_down { color: var(--invest3-ds-text-secondary) !important; } html.dark #wholediv .stocks-conditional-orders #optionorder_content .list, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .list { background: var(--invest3-ds-elev-02) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #optionorder_content .trading_disclaimer, html.dark #wholediv .stocks-conditional-orders #optionorder_content .trading_disclaimer span, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .trading_disclaimer, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .trading_disclaimer span { color: var(--invest3-ds-text-tertiary) !important; } html.dark #wholediv .stocks-conditional-orders #optionorder_content .title_list .acct_dd select, html.dark #wholediv .stocks-conditional-orders #optionorder_content .title_list .acct_dd strong, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .title_list .acct_dd select, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .title_list .acct_dd strong { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #optionorder_content .title_list .acct_dd select, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .title_list .acct_dd select { background-color: var(--invest3-ds-elev-03) !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders #optionorder_content .title_list ul li a span, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .title_list ul li a span { color: var(--invest3-ds-text-primary) !important; } /* * Conditional orders: preview/submit shows ul.non_editable and hides ul.editable via jQuery. * Dark theme rules using display !important can win over jQuery's inline display:none on the tab * strip, so both OCO/OTO and the read-only label appear. When the following sibling is not * explicitly display:none (handles display:none and display: none), force the editable ul hidden. */ html.dark #wholediv .stocks-conditional-orders #optionorder_content .title_list > ul.editable:has(+ ul.non_editable:not([style*="display:none"]):not([style*="display: none"])), html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorder_content .title_list > ul.editable:has(+ ul.non_editable:not([style*="display:none"]):not([style*="display: none"])) { display: none !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box.white, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box.yellow, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box.white, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box.yellow { background: var(--invest3-ds-elev-02) !important; background-color: var(--invest3-ds-elev-02) !important; border-color: var(--invest3-ds-elev-04) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB input[type="text"], html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB select, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB textarea, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB input[type="text"], html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB select, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB textarea { background-color: var(--invest3-ds-elev-03) !important; color: var(--invest3-ds-text-primary) !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB input[type="radio"], html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB input[type="radio"] { accent-color: var(--invest3-ds-link-primary); } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB label, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul.rad li, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul li strong, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul li strong label, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB label, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul.rad li, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul li strong, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul li strong label { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul li, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB ul li { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .label_y, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .label_y { background: var(--invest3-ds-elev-03) none !important; background-image: none !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .label_b, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .label_b { background: var(--invest3-ds-tint-blue) none !important; background-image: none !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 #warning_msg_bg .yellow.box, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .msg_bg .yellow.box, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 #warning_msg_bg .yellow.box, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .msg_bg .yellow.box { background: var(--invest3-ds-elev-03) !important; border-color: var(--invest3-ds-elev-04) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #optionorderpageerror, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .error_msg, html[data-theme="dark"] #wholediv .stocks-conditional-orders #optionorderpageerror, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .error_msg { color: var(--invest3-ds-accent) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 a.lnk_fs, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 a.get_t, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 a.lnk_fs, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 a.get_t { color: var(--invest3-ds-link-primary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li { color: var(--invest3-ds-text-primary) !important; border-right-color: var(--invest3-ds-elev-04) !important; background-image: none !important; } /* Replace orderbar btn_order.gif tabs with flat ds fills (active = tint-blue, inactive = elev-03) */ html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option { background: var(--invest3-ds-elev-03) none !important; background-color: var(--invest3-ds-elev-03) !important; background-image: none !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock_on, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option_on, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock_on, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option_on { background: var(--invest3-ds-tint-blue) none !important; background-color: var(--invest3-ds-tint-blue) !important; background-image: none !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .yellow ul.cond_l li, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .yellow ul.cond_l li { border-right-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li b, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li b { color: var(--invest3-ds-text-tertiary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li a, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li a { color: var(--invest3-ds-text-primary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock a, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option a, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock_on a, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option_on a, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock a, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option a, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.stock_on a, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .box ul.cond_l li.option_on a { color: var(--invest3-ds-text-primary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .chain_circle, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .chain_circle { background-color: var(--invest3-ds-elev-03) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .margin_requirement table tr td, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .margin_requirement table tr td { color: var(--invest3-ds-text-tertiary) !important; } html.dark #wholediv .stocks-conditional-orders .list .condition_stock_quote_table th, html.dark #wholediv .stocks-conditional-orders .list .condition_stock_quote_table td, html.dark #wholediv .stocks-conditional-orders .list table.condition_option_quote_table th, html.dark #wholediv .stocks-conditional-orders .list table.condition_option_quote_table td, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .condition_stock_quote_table th, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .condition_stock_quote_table td, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table.condition_option_quote_table th, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table.condition_option_quote_table td { background-color: var(--invest3-ds-elev-02) !important; color: var(--invest3-ds-text-primary) !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders .list .condition_stock_quote_table thead th, html.dark #wholediv .stocks-conditional-orders .list table.condition_option_quote_table thead th, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .condition_stock_quote_table thead th, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table.condition_option_quote_table thead th { background: var(--invest3-ds-tint-blue) !important; color: var(--invest3-ds-link-primary) !important; } html.dark #wholediv .stocks-conditional-orders .list table th.green, html.dark #wholediv .stocks-conditional-orders .list table td.green, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table th.green, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table td.green { color: var(--invest3-ds-link-primary) !important; } html.dark #wholediv .stocks-conditional-orders .list table th.red, html.dark #wholediv .stocks-conditional-orders .list table td.red, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table th.red, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table td.red { color: var(--invest3-ds-text-secondary) !important; } /* * OCO / OTO stock preview (stocks-preview.html → .previewonly1/2): orderbar.css sets table.prev th/td to * #efefef / #ffffff while #wholediv .list table * sets light text — white-on-white in dark mode. */ html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond table.prev th, html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond table.prev td, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond table.prev th, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond table.prev td { background: var(--invest3-ds-elev-03) !important; background-color: var(--invest3-ds-elev-03) !important; color: var(--invest3-ds-text-primary) !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond table.prev tr:first-child th, html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond table.prev tr:first-child th { background: var(--invest3-ds-tint-blue) !important; background-color: var(--invest3-ds-tint-blue) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond .previewonly1 div[style*='003366'], html.dark #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond .previewonly2 div[style*='003366'], html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond .previewonly1 div[style*='003366'], html[data-theme="dark"] #wholediv .stocks-conditional-orders #OptionOrderForm1 .optionsB .cond .previewonly2 div[style*='003366'] { color: var(--invest3-ds-text-primary) !important; } /* * Conditional stock quote (orderbar getSingleSectionQuote): div.symbol_gdbms.condition_stock_quote_table * sits under #optionorder_content .list; row 1 is th… + td.col_ref (refresh). Inline #0066CC / #6C707A / #2D3441 * must yield to INV-2072 ds tokens; refresh.svg → mask tinted with link primary (brighter than #4d6582 fill). */ html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top, html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top li, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top li { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top li[style*="0066CC"], html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top li[style*="#0066CC"], html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top li[style*="0066CC"], html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table ul.top li[style*="#0066CC"] { color: var(--invest3-ds-link-primary) !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:first-child th, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:first-child th { background: var(--invest3-ds-tint-blue) !important; background-color: var(--invest3-ds-tint-blue) !important; color: var(--invest3-ds-link-primary) !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:first-child th span, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:first-child th span { color: var(--invest3-ds-text-tertiary) !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:first-child td.col_ref, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:first-child td.col_ref { background: var(--invest3-ds-tint-blue) none !important; background-color: var(--invest3-ds-tint-blue) !important; background-image: none !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:nth-child(2) td, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table tr:nth-child(2) td { background-color: var(--invest3-ds-elev-02) !important; color: var(--invest3-ds-text-primary) !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td.bule, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td.bule { color: var(--invest3-ds-link-primary) !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td a, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td a { color: var(--invest3-ds-link-primary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td a:hover, html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td a:focus-visible, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td a:hover, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td a:focus-visible { color: var(--invest3-ds-link-secondary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td div[style*="2D3441"], html.dark #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td div[style*="2d3441"], html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td div[style*="2D3441"], html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .symbol_gdbms.condition_stock_quote_table table td div[style*="2d3441"] { color: var(--invest3-ds-text-tertiary) !important; } html.dark #wholediv .stocks-conditional-orders .list .condition_stock_quote_table tr td.col_ref a, html.dark #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref a, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .condition_stock_quote_table tr td.col_ref a, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref a { background: none !important; background-image: none !important; background-color: var(--invest3-ds-link-primary) !important; -webkit-mask-image: url(/images/shared/refresh.svg); mask-image: url(/images/shared/refresh.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; } html.dark #wholediv .stocks-conditional-orders .list .condition_stock_quote_table tr td.col_ref a:hover, html.dark #wholediv .stocks-conditional-orders .list .condition_stock_quote_table tr td.col_ref a:focus-visible, html.dark #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref a:hover, html.dark #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref a:focus-visible, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .condition_stock_quote_table tr td.col_ref a:hover, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list .condition_stock_quote_table tr td.col_ref a:focus-visible, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref a:hover, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref a:focus-visible { background-color: var(--invest3-ds-link-secondary) !important; } html.dark #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref, html[data-theme="dark"] #wholediv .stocks-conditional-orders .list table.condition_option_quote_table tr td.col_ref { background: var(--invest3-ds-elev-02) none !important; background-image: none !important; } html.dark #wholediv .stocks-conditional-orders .op_preview .ord_prev ul.left li, html.dark #wholediv .stocks-conditional-orders .op_preview .ord_prev ul.right li, html[data-theme="dark"] #wholediv .stocks-conditional-orders .op_preview .ord_prev ul.left li, html[data-theme="dark"] #wholediv .stocks-conditional-orders .op_preview .ord_prev ul.right li { background: var(--invest3-ds-elev-03) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .stocks_list .op_preview .ord_prev ul.left li strong, html.dark #wholediv .stocks-conditional-orders .op_preview .ord_prev ul.left li strong, html[data-theme="dark"] #wholediv .stocks-conditional-orders .stocks_list .op_preview .ord_prev ul.left li strong, html[data-theme="dark"] #wholediv .stocks-conditional-orders .op_preview .ord_prev ul.left li strong { border-color: var(--invest3-ds-elev-04) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .ord_prev .left li span, html.dark #wholediv .stocks-conditional-orders li#complexquote1 > span, html.dark #wholediv .stocks-conditional-orders li#complexquote2 > span, html[data-theme="dark"] #wholediv .stocks-conditional-orders .ord_prev .left li span, html[data-theme="dark"] #wholediv .stocks-conditional-orders li#complexquote1 > span, html[data-theme="dark"] #wholediv .stocks-conditional-orders li#complexquote2 > span { border-color: var(--invest3-ds-elev-04) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .stocks_list .op_preview .ord_prev ul.left li span, html[data-theme="dark"] #wholediv .stocks-conditional-orders .stocks_list .op_preview .ord_prev ul.left li span { border-color: var(--invest3-ds-elev-04) !important; } /* Account sidebar + quick links: ds tokens only */ html.dark #wholediv .stocks-conditional-orders .right_4, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 h2, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 h2 { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 .title_list_nav h6, html.dark #wholediv .stocks-conditional-orders .right_4 .title_list h6, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .title_list_nav h6, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .title_list h6 { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 a, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 a { color: var(--invest3-ds-link-primary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders .right_4 a:hover, html.dark #wholediv .stocks-conditional-orders .right_4 a:focus-visible, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 a:hover, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 a:focus-visible { color: var(--invest3-ds-link-secondary) !important; opacity: 1 !important; } html.dark #wholediv .stocks-conditional-orders .right_4 .title_list_nav ul li a span, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .title_list_nav ul li a span { color: inherit !important; } html.dark #wholediv .stocks-conditional-orders .right_4 .aot_ifm, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .aot_ifm { background-color: var(--invest3-ds-elev-02) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 .aot_ifm .main, html.dark #wholediv .stocks-conditional-orders .right_4 .aot_ifm .main ul, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .aot_ifm .main, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .aot_ifm .main ul { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 .aot_ifm table th, html.dark #wholediv .stocks-conditional-orders .right_4 .aot_ifm table td, html.dark #wholediv .stocks-conditional-orders .right_4 #acct_info_right table th, html.dark #wholediv .stocks-conditional-orders .right_4 #acct_info_right table td, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .aot_ifm table th, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 .aot_ifm table td, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 #acct_info_right table th, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 #acct_info_right table td { color: var(--invest3-ds-text-primary) !important; border-color: var(--invest3-ds-elev-04) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 table.tablesorter tbody tr.even td, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 table.tablesorter tbody tr.even td { background-color: var(--invest3-ds-elev-03) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 table.tablesorter tbody tr.odd td, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 table.tablesorter tbody tr.odd td { background-color: var(--invest3-ds-elev-02) !important; color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .stocks-conditional-orders .al_info, html[data-theme="dark"] #wholediv .stocks-conditional-orders .al_info { background: var(--invest3-negative-tint-bg) !important; color: var(--invest3-accent) !important; border: 1px solid var(--invest3-negative-tint-border) !important; } html.dark #wholediv .stocks-conditional-orders .right_4 a#opapp_lnk, html[data-theme="dark"] #wholediv .stocks-conditional-orders .right_4 a#opapp_lnk { color: var(--invest3-ds-link-primary) !important; opacity: 1 !important; } /* * Positions / Portfolio Watchlist (.positions, .positions1): redesign uses light blues/grays * on tables; index strip + watchlist toolbar need readable text on dark canvas. */ html.dark #wholediv .positions > .title h1, html.dark #wholediv .positions1 > .title h1, html[data-theme="dark"] #wholediv .positions > .title h1, html[data-theme="dark"] #wholediv .positions1 > .title h1 { color: var(--invest3-text) !important; } html.dark #wholediv .positions > .title .hplink, html.dark #wholediv .positions1 > .title .hplink, html[data-theme="dark"] #wholediv .positions > .title .hplink, html[data-theme="dark"] #wholediv .positions1 > .title .hplink { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .positions > .title a.but_refresh, html.dark #wholediv #maincontent .positions > .title a.but_refreshing, html.dark #wholediv #maincontent .positions1 > .title a.but_refresh, html.dark #wholediv #maincontent .positions1 > .title a.but_refreshing, html[data-theme="dark"] #wholediv #maincontent .positions > .title a.but_refresh, html[data-theme="dark"] #wholediv #maincontent .positions > .title a.but_refreshing, html[data-theme="dark"] #wholediv #maincontent .positions1 > .title a.but_refresh, html[data-theme="dark"] #wholediv #maincontent .positions1 > .title a.but_refreshing { color: var(--invest3-link) !important; opacity: 1 !important; } html.dark #wholediv #maincontent .positions > .title a.but_refresh:hover, html.dark #wholediv #maincontent .positions > .title a.but_refresh:focus-visible, html.dark #wholediv #maincontent .positions1 > .title a.but_refresh:hover, html.dark #wholediv #maincontent .positions1 > .title a.but_refresh:focus-visible, html[data-theme="dark"] #wholediv #maincontent .positions > .title a.but_refresh:hover, html[data-theme="dark"] #wholediv #maincontent .positions > .title a.but_refresh:focus-visible, html[data-theme="dark"] #wholediv #maincontent .positions1 > .title a.but_refresh:hover, html[data-theme="dark"] #wholediv #maincontent .positions1 > .title a.but_refresh:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .positions > .title .sub_title a { color: var(--invest3-link) !important; } html.dark #wholediv .positions #qt-top-search, html.dark #wholediv .positions1 #qt-top-search, html[data-theme="dark"] #wholediv .positions #qt-top-search, html[data-theme="dark"] #wholediv .positions1 #qt-top-search { color: var(--invest3-text) !important; } html.dark #wholediv .positions #qt-top-search .hul strong, html.dark #wholediv .positions1 #qt-top-search .hul strong, html[data-theme="dark"] #wholediv .positions #qt-top-search .hul strong, html[data-theme="dark"] #wholediv .positions1 #qt-top-search .hul strong { color: var(--invest3-text-muted) !important; } /* index_top / positions header: light-mode quote colors (redesign .green #008A1B, .red #E51E1E) */ html.dark #wholediv #qt-top-search .green, html.dark #wholediv #qt-top-search .hul div.green, html[data-theme="dark"] #wholediv #qt-top-search .green, html[data-theme="dark"] #wholediv #qt-top-search .hul div.green { color: #008a1b !important; } html.dark #wholediv #qt-top-search .quote_up, html[data-theme="dark"] #wholediv #qt-top-search .quote_up { color: #008a1b !important; } html.dark #wholediv #qt-top-search .red, html.dark #wholediv #qt-top-search .hul div.red, html[data-theme="dark"] #wholediv #qt-top-search .red, html[data-theme="dark"] #wholediv #qt-top-search .hul div.red { color: #e51e1e !important; } html.dark #wholediv #qt-top-search .quote_down, html[data-theme="dark"] #wholediv #qt-top-search .quote_down { color: #e51e1e !important; } html.dark #wholediv .positions table tr.header_total th, html.dark #wholediv .positions1 table tr.header_total th { background: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; } html.dark #wholediv .positions table tr.header_total th span, html.dark #wholediv .positions1 table tr.header_total th span { color: var(--invest3-text-muted) !important; } html.dark #wholediv .positions tbody, html.dark #wholediv .positions1 tbody { background: var(--invest3-card) !important; } html.dark #wholediv .positions table tr.header, html.dark #wholediv .positions1 table tr.header, html[data-theme="dark"] #wholediv .positions table tr.header, html[data-theme="dark"] #wholediv .positions1 table tr.header { background: var(--invest3-row-alt) !important; } html.dark #wholediv .positions table tr.header th, html.dark #wholediv .positions1 table tr.header th, html[data-theme="dark"] #wholediv .positions table tr.header th, html[data-theme="dark"] #wholediv .positions1 table tr.header th { background: var(--invest3-row-alt) !important; color: var(--invest3-ds-link-secondary) !important; } html.dark #wholediv .positions table tr.header th a, html.dark #wholediv .positions1 table tr.header th a, html[data-theme="dark"] #wholediv .positions table tr.header th a, html[data-theme="dark"] #wholediv .positions1 table tr.header th a { color: var(--invest3-ds-link-secondary) !important; } html.dark #wholediv .positions table tr td, html.dark #wholediv .positions1 table tr td { color: var(--invest3-text) !important; } /* Chg($) / Chg(%) etc.: same light-mode up/down as index strip (redesign .green / .red) */ html.dark #wholediv .positions table tr th.green, html.dark #wholediv .positions table tr td.green, html.dark #wholediv .positions1 table tr th.green, html.dark #wholediv .positions1 table tr td.green, html[data-theme="dark"] #wholediv .positions table tr th.green, html[data-theme="dark"] #wholediv .positions table tr td.green, html[data-theme="dark"] #wholediv .positions1 table tr th.green, html[data-theme="dark"] #wholediv .positions1 table tr td.green { color: #008a1b !important; } html.dark #wholediv .positions table tr th.red, html.dark #wholediv .positions table tr td.red, html.dark #wholediv .positions1 table tr th.red, html.dark #wholediv .positions1 table tr td.red, html[data-theme="dark"] #wholediv .positions table tr th.red, html[data-theme="dark"] #wholediv .positions table tr td.red, html[data-theme="dark"] #wholediv .positions1 table tr th.red, html[data-theme="dark"] #wholediv .positions1 table tr td.red { color: #e51e1e !important; } /* Streaming symbol column (td.row.streaming52 — e.g. AAPL): link primary */ html.dark #wholediv .positions table tr td.row.streaming52, html.dark #wholediv .positions1 table tr td.row.streaming52, html[data-theme="dark"] #wholediv .positions table tr td.row.streaming52, html[data-theme="dark"] #wholediv .positions1 table tr td.row.streaming52 { color: var(--invest3-link) !important; } html.dark #wholediv .positions table tr td.row.streaming52 a, html.dark #wholediv .positions1 table tr td.row.streaming52 a, html[data-theme="dark"] #wholediv .positions table tr td.row.streaming52 a, html[data-theme="dark"] #wholediv .positions1 table tr td.row.streaming52 a { color: var(--invest3-link) !important; } html.dark #wholediv .positions table tr td.row.streaming52 a:hover, html.dark #wholediv .positions table tr td.row.streaming52 a:focus-visible, html.dark #wholediv .positions1 table tr td.row.streaming52 a:hover, html.dark #wholediv .positions1 table tr td.row.streaming52 a:focus-visible, html[data-theme="dark"] #wholediv .positions table tr td.row.streaming52 a:hover, html[data-theme="dark"] #wholediv .positions table tr td.row.streaming52 a:focus-visible, html[data-theme="dark"] #wholediv .positions1 table tr td.row.streaming52 a:hover, html[data-theme="dark"] #wholediv .positions1 table tr td.row.streaming52 a:focus-visible { color: var(--invest3-link-hover) !important; } /* Mutual fund positions (#mf_positiontable): symbol td.row without .streaming52 — orderbar #0066cc on dark rows */ html.dark #wholediv #mf_positiontable tbody tr td a, html.dark #maincontent #mf_positiontable tbody tr td a, html[data-theme="dark"] #wholediv #mf_positiontable tbody tr td a, html[data-theme="dark"] #maincontent #mf_positiontable tbody tr td a { color: var(--invest3-link) !important; } html.dark #wholediv #mf_positiontable tbody tr td a:hover, html.dark #wholediv #mf_positiontable tbody tr td a:focus-visible, html.dark #maincontent #mf_positiontable tbody tr td a:hover, html.dark #maincontent #mf_positiontable tbody tr td a:focus-visible, html[data-theme="dark"] #wholediv #mf_positiontable tbody tr td a:hover, html[data-theme="dark"] #wholediv #mf_positiontable tbody tr td a:focus-visible, html[data-theme="dark"] #maincontent #mf_positiontable tbody tr td a:hover, html[data-theme="dark"] #maincontent #mf_positiontable tbody tr td a:focus-visible { color: var(--invest3-link-hover) !important; } /* Row hover: beat base.css / redesign (cream #FDFCE7 / #FFFAEA) when table lacks .tablesorter or specificity ties */ html.dark #wholediv .positions table > tbody > tr:hover > td, html.dark #wholediv .positions1 table > tbody > tr:hover > td, html.dark #wholediv .positions table > tbody > tr.odd:hover > td, html.dark #wholediv .positions1 table > tbody > tr.odd:hover > td, html.dark #wholediv .positions table > tbody > tr.even:hover > td, html.dark #wholediv .positions1 table > tbody > tr.even:hover > td, html.dark #wholediv .positions table > tbody > tr.hovered > td, html.dark #wholediv .positions1 table > tbody > tr.hovered > td, html.dark #wholediv .positions table > tbody > tr.hoverd > td, html.dark #wholediv .positions1 table > tbody > tr.hoverd > td { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv .positions .watchlist_3, html.dark #wholediv .positions1 .watchlist_3 { background: var(--invest3-row-alt) !important; border-top: 1px solid var(--invest3-card-border); } html.dark #wholediv #portfolio-watchlist-subheader .watchlist_4 h6, html.dark #wholediv #portfolio-watchlist-subheader .watchlist_6 h5 { color: var(--invest3-text) !important; } html.dark #wholediv #portfolio-watchlist-subheader .watchlist_6 { background: transparent !important; } html.dark #wholediv #portfolio-watchlist-subheader input, html.dark #wholediv #portfolio-watchlist-subheader select { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .positions .title_list label, html.dark #wholediv .positions1 .title_list label { color: var(--invest3-text-muted) !important; } html.dark #wholediv .positions .title_list select, html.dark #wholediv .positions .title_list ul li input#new_list_name, html.dark #wholediv .positions1 .title_list select, html.dark #wholediv .positions1 .title_list ul li input { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .positions .title_list a.cre, html.dark #wholediv .positions1 .title_list a.cre { color: var(--invest3-link) !important; } html.dark #wholediv .positions .watchlist_2, html.dark #wholediv .positions1 .watchlist_2 { color: var(--invest3-link) !important; } /* Delete row icon: remove.svg is #4d6582 — lift on dark table rows */ html.dark #wholediv .positions a.watchlist_10, html.dark #wholediv .positions1 a.watchlist_10, html[data-theme="dark"] #wholediv .positions a.watchlist_10, html[data-theme="dark"] #wholediv .positions1 a.watchlist_10 { filter: brightness(1.7) contrast(1.06) !important; } html.dark #wholediv .positions a.watchlist_10:hover, html.dark #wholediv .positions a.watchlist_10:focus-visible, html.dark #wholediv .positions1 a.watchlist_10:hover, html.dark #wholediv .positions1 a.watchlist_10:focus-visible, html[data-theme="dark"] #wholediv .positions a.watchlist_10:hover, html[data-theme="dark"] #wholediv .positions a.watchlist_10:focus-visible, html[data-theme="dark"] #wholediv .positions1 a.watchlist_10:hover, html[data-theme="dark"] #wholediv .positions1 a.watchlist_10:focus-visible { filter: brightness(2.05) contrast(1.08) !important; } html.dark #wholediv .positions > div[style*="FFFAEA"], html.dark #wholediv .positions1 > div[style*="FFFAEA"] { background: var(--invest3-warn-bg) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .positions > div[style*="FFFAEA"] a, html.dark #wholediv .positions1 > div[style*="FFFAEA"] a { color: var(--invest3-link) !important; } /* Tailwind islands (class prefix .tw in build/tailwind.css) inside main shell */ html.dark #wholediv .tw :is(.bg-white) { background-color: var(--invest3-card) !important; } html.dark #wholediv .tw :is(.bg-zinc-100) { background-color: var(--invest3-canvas) !important; } html.dark #wholediv .tw :is(.text-\[\#2b2b2b\]), html.dark #wholediv .tw :is(.text-\[\#454545\]), html.dark #wholediv .tw :is(.text-\[\#5c5c5c\]), html.dark #wholediv .tw :is(.text-gray-700), html.dark #wholediv .tw :is(.text-slate-700) { color: var(--invest3-text) !important; } html.dark #wholediv .tw :is(.text-gray-600), html.dark #wholediv .tw :is(.text-gray-400), html.dark #wholediv .tw :is(.text-neutral-400) { color: var(--invest3-text-muted) !important; } html.dark #wholediv .tw :is(.border-slate-300), html.dark #wholediv .tw :is(.border-neutral-200), html.dark #wholediv .tw :is(.border-\[\#d3dce6\]) { border-color: var(--invest3-card-border) !important; } html.dark #wholediv .tw :is(.border-grey-30) { border-color: var(--invest3-card-border) !important; } html.dark #wholediv .tw :is(.text-grey-80), html.dark #wholediv .tw :is(.text-grey-90) { color: var(--invest3-text) !important; } html.dark #wholediv .tw :is(.text-text-primary) { color: var(--invest3-text) !important; } html.dark #wholediv .tw :is(.text-text-tertiary) { color: var(--invest3-text-muted) !important; } html.dark #wholediv .tw :is(.bg-grey-5) { background-color: var(--invest3-row-alt) !important; } /* * Manage devices: icon chip uses bg-grey-5 → row-alt; tabler SVGs use stroke #2D3441 (same family as * the chip) — lighten the well and render the glyph as a light mark for contrast. */ html.dark #wholediv #manage-devices .device-icon { background-color: var(--invest3-white-12) !important; } html.dark #wholediv #manage-devices .device-icon-image { filter: brightness(0) invert(1); opacity: 0.9; } /* Trusted devices: "This device" pill (was pale mint + dark green — low contrast on dark card) */ html.dark #wholediv .tw :is(.bg-green-light) { background-color: var(--invest3-positive-tint-bg) !important; } html.dark #wholediv .tw :is(.bg-green-light) :is(.text-green) { color: var(--invest3-link) !important; } /* * Security / MFA (#mfa in redesign.css: #000 / #454545 / blue-gray legends). */ html.dark #wholediv #mfa .description, html.dark #wholediv #mfa .detail, html.dark #wholediv #mfa fieldset legend, html.dark #wholediv #mfa .mfa-heading, html.dark #wholediv #mfa .mfa-recipient .recipient, html.dark #wholediv #mfa .mfa-radio-label, html.dark #wholediv #mfa .switch .switch-label { color: var(--invest3-text) !important; } html.dark #wholediv #mfa .detail a { color: var(--invest3-link) !important; } html.dark #wholediv #mfa fieldset { border-color: var(--invest3-card-border) !important; } html.dark #wholediv #mfa .mfa-opt-container { border-color: var(--invest3-card-border) !important; } html.dark #wholediv #mfa th#mfa-header, html[data-theme="dark"] #wholediv #mfa th#mfa-header { background: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; } html.dark #wholediv #mfa .badge.positive { background: var(--invest3-positive-tint-bg) !important; border-color: var(--invest3-positive-tint-border) !important; color: var(--invest3-link) !important; } html.dark #wholediv #mfa .badge.negative { background: var(--invest3-negative-tint-bg) !important; border-color: var(--invest3-negative-tint-border) !important; color: var(--invest3-accent) !important; } html.dark #wholediv #mfa [style*="color:#454545"] { color: var(--invest3-text-muted) !important; } /* MFA modals often render under body (e.g. Thickbox), not inside #wholediv */ :is(html.dark, html[data-theme="dark"]) .modal-window :is(.modal-desc, .modal-heading, .modal-note, .resend-code) { color: var(--invest3-text) !important; } /* * Extended hours risk modal (#exthour_agreement): inline light colors + .modal-window>div white panel (header.htm). */ html.dark #exthour_agreement.modal-window, html[data-theme="dark"] #exthour_agreement.modal-window { background: var(--invest3-overlay-scrim) !important; } html.dark #exthour_agreement img[src*="close.png"], html[data-theme="dark"] #exthour_agreement img[src*="close.png"] { filter: invert(1); } html.dark #exthour_agreement.modal-window > div, html[data-theme="dark"] #exthour_agreement.modal-window > div { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; box-shadow: 0 12px 48px var(--invest3-shadow-55) !important; color: var(--invest3-text) !important; } html.dark #exthour_agreement .ciu_title1, html[data-theme="dark"] #exthour_agreement .ciu_title1 { color: var(--invest3-text) !important; } html.dark #exthour_agreement .ciu_prompt1 div[style*="color:#5A616D"], html[data-theme="dark"] #exthour_agreement .ciu_prompt1 div[style*="color:#5A616D"] { color: var(--invest3-text-muted) !important; } html.dark #exthour_agreement .ciu_prompt1 div[style*="display: inline-flex"][style*="F3F3F3"], html[data-theme="dark"] #exthour_agreement .ciu_prompt1 div[style*="display: inline-flex"][style*="F3F3F3"] { background-color: var(--invest3-row-alt) !important; } html.dark #exthour_agreement #extagreecontent, html[data-theme="dark"] #exthour_agreement #extagreecontent { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; } /* Modal is under , not #wholediv — mirror solid primary from shell buttons. */ html.dark #exthour_agreement a.btn.btn-primary, html[data-theme="dark"] #exthour_agreement a.btn.btn-primary { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; background-image: none !important; border: 1px solid var(--invest3-primary) !important; text-shadow: none !important; box-shadow: none !important; } html.dark #exthour_agreement a.btn.btn-primary:hover, html.dark #exthour_agreement a.btn.btn-primary:focus-visible, html[data-theme="dark"] #exthour_agreement a.btn.btn-primary:hover, html[data-theme="dark"] #exthour_agreement a.btn.btn-primary:focus-visible { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; background-image: none !important; } html.dark #exthour_agreement a.btn.btn-primary span, html[data-theme="dark"] #exthour_agreement a.btn.btn-primary span { color: inherit !important; } html.dark #exthour_agreement a.btn.btn-primary[style*="background:white"], html[data-theme="dark"] #exthour_agreement a.btn.btn-primary[style*="background:white"] { background: var(--invest3-row-alt) !important; background-color: var(--invest3-row-alt) !important; color: var(--invest3-link) !important; border-color: var(--invest3-card-border) !important; background-image: none !important; } html.dark #exthour_agreement a.btn.btn-primary[style*="background:white"]:hover, html.dark #exthour_agreement a.btn.btn-primary[style*="background:white"]:focus-visible, html[data-theme="dark"] #exthour_agreement a.btn.btn-primary[style*="background:white"]:hover, html[data-theme="dark"] #exthour_agreement a.btn.btn-primary[style*="background:white"]:focus-visible { background-color: var(--invest3-row-hover) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-link-hover) !important; } /* * jQuery autocomplete (devbridge): .autocomplete-suggestions is appended to , outside #wholediv. * acat.css / jquery.auto-complete.css use white panel + light gray selection — fix for dark shell. */ html.dark .autocomplete-suggestions, html[data-theme="dark"] .autocomplete-suggestions { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; box-shadow: 0 4px 18px var(--invest3-shadow-50) !important; } html.dark .autocomplete-suggestion, html[data-theme="dark"] .autocomplete-suggestion { color: var(--invest3-text) !important; } html.dark .autocomplete-suggestion b, html[data-theme="dark"] .autocomplete-suggestion b { color: var(--invest3-link) !important; } html.dark .autocomplete-suggestion.selected, html.dark .autocomplete-suggestion:hover, html[data-theme="dark"] .autocomplete-suggestion.selected, html[data-theme="dark"] .autocomplete-suggestion:hover { background-color: var(--invest3-row-alt) !important; } html.dark .has-error .autocomplete-suggestion, html[data-theme="dark"] .has-error .autocomplete-suggestion { color: var(--invest3-text) !important; } /* * Legacy symbol autocomplete (combined.js): #Autocomplete_* div.autocomplete — row divs + .ac-sym / .ac-desc / .ac-opt * (not devbridge .autocomplete-suggestions). redesign.css + base.css use light gray / blue selection. */ html.dark .autocomplete-w1, html[data-theme="dark"] .autocomplete-w1 { background: none !important; } html.dark div.autocomplete, html[data-theme="dark"] div.autocomplete { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; box-shadow: 0 4px 20px var(--invest3-shadow-55) !important; } html.dark .autocomplete div, html[data-theme="dark"] .autocomplete div { color: var(--invest3-text) !important; } html.dark .autocomplete .selected, html.dark .autocomplete .selected a, html[data-theme="dark"] .autocomplete .selected, html[data-theme="dark"] .autocomplete .selected a { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; } html.dark .autocomplete strong, html[data-theme="dark"] .autocomplete strong { color: var(--invest3-link) !important; } html.dark .autocomplete .ac-sym, html[data-theme="dark"] .autocomplete .ac-sym { color: var(--invest3-link) !important; } html.dark .autocomplete .ac-desc, html[data-theme="dark"] .autocomplete .ac-desc { color: var(--invest3-text-muted) !important; } html.dark .autocomplete .selected .ac-sym, html.dark .autocomplete .selected .ac-desc, html[data-theme="dark"] .autocomplete .selected .ac-sym, html[data-theme="dark"] .autocomplete .selected .ac-desc { color: var(--invest3-text) !important; } html.dark .autocomplete .ac-opt, html[data-theme="dark"] .autocomplete .ac-opt { color: var(--invest3-link) !important; } /* * Symbol lookup mini popup (div.ss1): dropdown.css uses bg_popup.gif — replace with dark card. */ html.dark div.ss1, html[data-theme="dark"] div.ss1 { background: var(--invest3-card) !important; background-image: none !important; border: 1px solid var(--invest3-card-border) !important; border-radius: 6px; box-shadow: 0 4px 20px var(--invest3-shadow-50); } html.dark div.ss1 div.lbl, html[data-theme="dark"] div.ss1 div.lbl { color: var(--invest3-text-muted) !important; } html.dark div.ss1 input.stext, html[data-theme="dark"] div.ss1 input.stext { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } /* * .webapp-modal-panel: background comes from iframe document (combined.js invest3SyncWebappModalPanelBackground) * or postMessage invest3-webapp-embed-bg — not a fixed token here. */ #modal-container.modal-window > div.webapp-modal-panel { background-color: transparent; } /* Dark webapp embed: canvas behind cross-origin iframe before SPA paints (see combined.js showWebApp). */ #modal-container.modal-window > div.webapp-modal-panel[data-webapp-theme="dark"], #modal-container.modal-window > div.webapp-modal-panel[data-webapp-theme="dark"] iframe { background-color: #101a21; color-scheme: dark; } /* * #modal-container is under (not #wholediv): trusted-device remove confirm (.tw tpl-remove-device), * webapp iframe shell (.webapp-modal-panel), etc. — backdrop + panel tokens for dark mode. */ html.dark #modal-container.modal-window, html[data-theme="dark"] #modal-container.modal-window { background: var(--invest3-overlay-scrim) !important; } html.dark #modal-container.modal-window > div:not(.webapp-modal-panel), html[data-theme="dark"] #modal-container.modal-window > div:not(.webapp-modal-panel) { background-color: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 12px 48px var(--invest3-shadow-55) !important; color: var(--invest3-text) !important; } html.dark #modal-container.modal-window > div.webapp-modal-panel, html[data-theme="dark"] #modal-container.modal-window > div.webapp-modal-panel { border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 12px 48px var(--invest3-shadow-55) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .tw :is(.text-grey-80, .text-grey-90, .text-text-primary) { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .tw :is(.text-text-tertiary) { color: var(--invest3-text-muted) !important; } html.dark #modal-container.modal-window .modal-close img, html[data-theme="dark"] #modal-container.modal-window .modal-close img { filter: invert(1) brightness(1.1); opacity: 0.88; } html.dark #modal-container.modal-window .modal-close:hover img, html.dark #modal-container.modal-window .modal-close:focus-visible img, html[data-theme="dark"] #modal-container.modal-window .modal-close:hover img, html[data-theme="dark"] #modal-container.modal-window .modal-close:focus-visible img { opacity: 1; } html.dark #modal-container.modal-window button.btn.btn-primary, html[data-theme="dark"] #modal-container.modal-window button.btn.btn-primary { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; background-image: none !important; border: 1px solid var(--invest3-primary) !important; text-shadow: none !important; box-shadow: none !important; } html.dark #modal-container.modal-window button.btn.btn-primary:hover, html.dark #modal-container.modal-window button.btn.btn-primary:focus-visible, html[data-theme="dark"] #modal-container.modal-window button.btn.btn-primary:hover, html[data-theme="dark"] #modal-container.modal-window button.btn.btn-primary:focus-visible { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; background-image: none !important; } /* MFA verify password modal (#passwordForm): redesign uses #000 / #c00 — map to tokens (modal is outside #wholediv). */ :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #passwordForm.form .form-group > label:not(.error) { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #passwordForm.form .form-group label.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #passwordForm #mfa-password-error { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #passwordForm.form .form-group input#mfa-password { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } /* * jQuery Validate can leave class="error" while aria-invalid="false"; redesign's * input[aria-invalid='false'] still matches — use #mfa-password + .error so accent always wins. */ :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #passwordForm.form .form-group input#mfa-password.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #passwordForm.form .form-group input#mfa-password[aria-invalid="true"] { border-color: var(--invest3-accent) !important; box-shadow: 0 0 0 1px var(--invest3-accent) !important; outline: none !important; } /* * MFA authenticator setup + backup code modals (#totpVerifyForm, tpl-modal-totp-setup / tpl-modal-totp-backup — * mysettings-login_security.htm). redesign hard-codes #000 / #454545 / #F2F6FC on body copy and code wells. */ /* Step body + lists: primary text (redesign #454545); .heading stays same token. */ :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm .step .info { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm .step .heading { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm .step .info a { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm .step .info a:hover, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm .step .info a:focus-visible { color: var(--invest3-link-hover) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm.form .form-group input#token { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm.form .form-group input#token::placeholder { color: var(--invest3-text-muted) !important; opacity: 0.85; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm.form .form-group input#token.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #totpVerifyForm.form .form-group input#token[aria-invalid="true"] { border-color: var(--invest3-accent) !important; box-shadow: 0 0 0 1px var(--invest3-accent) !important; outline: none !important; } /* * QRCode.js: draws on canvas, then makeImage() may swap to (data-URI) and hide canvas. Forcing both to * display:block showed two codes. Dark: invert B/W only; do not touch display — one graphic matches the shell. */ :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #mfa-secret-qrCode-link { display: inline-block !important; line-height: 0 !important; background-color: var(--invest3-row-alt) !important; border-radius: 8px !important; padding: 10px !important; box-sizing: border-box !important; text-decoration: none !important; border: 1px solid var(--invest3-card-border) !important; } /* Invert on both nodes: after makeImage() only one is visible (library toggles display). Never set display here. */ :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #mfa-secret-qrCode-link canvas, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #mfa-secret-qrCode-link img { filter: invert(1); } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .mfa-secret-code-container { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #mfa-secret-code { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .mfa-backup-code-container { background-color: var(--invest3-row-alt) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #mfa-backup-code { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .modal-heading { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .desc { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .modal-note { color: var(--invest3-text-muted) !important; } /* Change Security PIN modal (#form-changepin, tpl-modal-change-pin — mysettings-login_security.htm) */ :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group > label:not(.error) { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group label.error { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin-confirm, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#password { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin::placeholder, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin-confirm::placeholder, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#password::placeholder { color: var(--invest3-text-muted) !important; opacity: 0.85; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin-confirm.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#password.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin[aria-invalid="true"], :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#pin-confirm[aria-invalid="true"], :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin.form .form-group input#password[aria-invalid="true"] { border-color: var(--invest3-accent) !important; box-shadow: 0 0 0 1px var(--invest3-accent) !important; outline: none !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-changepin #modal-error-container { color: var(--invest3-accent) !important; } /* mysettings-login_security.htm (and similar): /cgi-bin/my_info text links use .stdlink; modal is often outside #wholediv. */ :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window a.stdlink { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window a.stdlink:hover, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window a.stdlink:focus-visible { color: var(--invest3-link-hover) !important; } /* * Update phone number + OTP verify (#form-phone-update, tpl-modal-phone-verify, #verify-code-form — * mysettings-my_info.htm #modal-container). intl-tel-input: dial code strip, dropdown, tel inputs. */ :is(html.dark, html[data-theme="dark"]) .modal-window .modal-info { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) .modal-window .modal-info a { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update.form .form-group > label:not(.error) { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update.form .form-group label.error { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .hint { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update.form .form-group input#password, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update.form .form-group select.phone-type { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update.form .form-group input#password::placeholder { color: var(--invest3-text-muted) !important; opacity: 0.85; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update.form .form-group input#password.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update.form .form-group input#password[aria-invalid="true"] { border-color: var(--invest3-accent) !important; box-shadow: 0 0 0 1px var(--invest3-accent) !important; outline: none !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input input[type='tel'] { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input input[type='tel'].error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input input[type='tel'][aria-invalid='true'] { border-color: var(--invest3-accent) !important; box-shadow: 0 0 0 1px var(--invest3-accent) !important; outline: none !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input.separate-dial-code .selected-flag { background-color: var(--invest3-row-alt) !important; border-right: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .selected-dial-code { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .selected-flag .iti-arrow { border-top-color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .selected-flag .iti-arrow.up { border-bottom-color: var(--invest3-text-muted) !important; border-top-color: transparent !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input.separate-dial-code .flag-container:hover .selected-flag { background-color: var(--invest3-row-hover) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .country-list { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; box-shadow: 0 4px 18px var(--invest3-shadow-50) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .country-list .country { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .country-list .country .dial-code { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .country-list .country.highlight { background-color: var(--invest3-row-alt) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #form-phone-update .intl-tel-input .country-list .divider { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .text-3xl { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #btn-back { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #btn-back img { filter: invert(1) brightness(1.15); opacity: 0.9; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #verify-code-form .verify-code-label { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #verify-code-form input#code { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #verify-code-form input#code.error, :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #verify-code-form input#code[aria-invalid='true'] { border-color: var(--invest3-accent) !important; box-shadow: 0 0 0 1px var(--invest3-accent) !important; outline: none !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window #btn-resend-code { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #modal-container.modal-window .modal-error-message { color: var(--invest3-accent) !important; } html.dark .modal-title, html[data-theme="dark"] .modal-title { color: var(--invest3-text) !important; } /* * Thickbox (#TB_window / #TB_ajaxContent.TB_modal): ACAT preview, securities lending, etc. * thickbox.css uses #fff window, #e8e8e8 title; overlay #041930 @ 60% opacity. */ html.dark #TB_overlay.TB_overlayBG, html[data-theme="dark"] #TB_overlay.TB_overlayBG { background-color: var(--invest3-overlay-scrim) !important; opacity: 1 !important; } html.dark #TB_window, html[data-theme="dark"] #TB_window { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 12px 48px var(--invest3-shadow-55) !important; } html.dark #TB_title, html[data-theme="dark"] #TB_title { background-color: var(--invest3-title-bar) !important; border-bottom: 1px solid var(--invest3-card-border) !important; } html.dark #TB_ajaxWindowTitle, html[data-theme="dark"] #TB_ajaxWindowTitle { color: var(--invest3-link) !important; } html.dark #TB_ajaxContent, html.dark #TB_ajaxContent.TB_modal, html[data-theme="dark"] #TB_ajaxContent, html[data-theme="dark"] #TB_ajaxContent.TB_modal { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; } html.dark #TB_ajaxContent p, html[data-theme="dark"] #TB_ajaxContent p { color: var(--invest3-text) !important; } /* Generic markup inside Thickbox (fundmgt .drip_plan h2/h3 #003366, lists, tables, forms) */ html.dark #TB_ajaxContent h1, html.dark #TB_ajaxContent h2, html.dark #TB_ajaxContent h3, html.dark #TB_ajaxContent h4, html.dark #TB_ajaxContent h5, html.dark #TB_ajaxContent h6, html[data-theme="dark"] #TB_ajaxContent h1, html[data-theme="dark"] #TB_ajaxContent h2, html[data-theme="dark"] #TB_ajaxContent h3, html[data-theme="dark"] #TB_ajaxContent h4, html[data-theme="dark"] #TB_ajaxContent h5, html[data-theme="dark"] #TB_ajaxContent h6 { color: var(--invest3-link) !important; } html.dark #TB_ajaxContent ul, html.dark #TB_ajaxContent ol, html.dark #TB_ajaxContent li, html.dark #TB_ajaxContent dl, html.dark #TB_ajaxContent dt, html.dark #TB_ajaxContent dd, html[data-theme="dark"] #TB_ajaxContent ul, html[data-theme="dark"] #TB_ajaxContent ol, html[data-theme="dark"] #TB_ajaxContent li, html[data-theme="dark"] #TB_ajaxContent dl, html[data-theme="dark"] #TB_ajaxContent dt, html[data-theme="dark"] #TB_ajaxContent dd { color: var(--invest3-text) !important; } html.dark #TB_ajaxContent table, html[data-theme="dark"] #TB_ajaxContent table { background-color: transparent !important; } html.dark #TB_ajaxContent th, html.dark #TB_ajaxContent td, html[data-theme="dark"] #TB_ajaxContent th, html[data-theme="dark"] #TB_ajaxContent td { color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #TB_ajaxContent thead th, html[data-theme="dark"] #TB_ajaxContent thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; } html.dark #TB_ajaxContent input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]), html.dark #TB_ajaxContent textarea, html.dark #TB_ajaxContent select, html[data-theme="dark"] #TB_ajaxContent input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]), html[data-theme="dark"] #TB_ajaxContent textarea, html[data-theme="dark"] #TB_ajaxContent select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #TB_ajaxContent fieldset, html[data-theme="dark"] #TB_ajaxContent fieldset { border-color: var(--invest3-card-border) !important; } html.dark #TB_ajaxContent legend, html[data-theme="dark"] #TB_ajaxContent legend { color: var(--invest3-text-muted) !important; } html.dark #TB_ajaxContent div.line:empty, html[data-theme="dark"] #TB_ajaxContent div.line:empty { border: none !important; border-top: 1px solid var(--invest3-card-border) !important; background: transparent !important; height: 0 !important; margin: 12px 0 !important; padding: 0 !important; min-height: 0 !important; } html.dark #TB_closeAjaxWindow, html.dark #TB_closeAjaxWindow a, html.dark #TB_closeWindow, html.dark #TB_closeWindow a, html.dark #TB_closeWindowButton, html[data-theme="dark"] #TB_closeAjaxWindow, html[data-theme="dark"] #TB_closeAjaxWindow a, html[data-theme="dark"] #TB_closeWindow, html[data-theme="dark"] #TB_closeWindow a, html[data-theme="dark"] #TB_closeWindowButton { color: var(--invest3-link) !important; } html.dark #TB_closeAjaxWindow a:hover, html.dark #TB_closeWindow a:hover, html[data-theme="dark"] #TB_closeAjaxWindow a:hover, html[data-theme="dark"] #TB_closeWindow a:hover { color: var(--invest3-link-hover) !important; } html.dark #TB_HideSelect, html[data-theme="dark"] #TB_HideSelect { background-color: transparent !important; } /* Securities lending modal (redesign .TB_modal) */ html.dark #TB_ajaxContent.TB_modal .securitiesloan, html.dark #TB_ajaxContent.TB_modal .securitiesloan p, html[data-theme="dark"] #TB_ajaxContent.TB_modal .securitiesloan, html[data-theme="dark"] #TB_ajaxContent.TB_modal .securitiesloan p { color: var(--invest3-text) !important; } html.dark #TB_ajaxContent.TB_modal .securitiesloan .steps .box b, html.dark #TB_ajaxContent.TB_modal .securitiesloan .steps .box p b, html[data-theme="dark"] #TB_ajaxContent.TB_modal .securitiesloan .steps .box b, html[data-theme="dark"] #TB_ajaxContent.TB_modal .securitiesloan .steps .box p b { color: var(--invest3-link) !important; } html.dark #TB_ajaxContent.TB_modal .securitiesloan #show-later button, html[data-theme="dark"] #TB_ajaxContent.TB_modal .securitiesloan #show-later button { color: var(--invest3-text-muted) !important; background: transparent !important; } html.dark #TB_ajaxContent.TB_modal #learn-more button, html[data-theme="dark"] #TB_ajaxContent.TB_modal #learn-more button { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; border-color: var(--invest3-primary) !important; } html.dark #TB_window a:link, html.dark #TB_window a:visited, html[data-theme="dark"] #TB_window a:link, html[data-theme="dark"] #TB_window a:visited { color: var(--invest3-link) !important; } html.dark #TB_window a:hover, html.dark #TB_window a:active, html[data-theme="dark"] #TB_window a:hover, html[data-theme="dark"] #TB_window a:active { color: var(--invest3-link-hover) !important; } html.dark #TB_secondLine, html[data-theme="dark"] #TB_secondLine { color: var(--invest3-text-muted) !important; } /* ACAT transfer confirm (template #id-preview-form-tpl) loaded into Thickbox */ html.dark #TB_ajaxContent #id-acat-transfer-confirm, html[data-theme="dark"] #TB_ajaxContent #id-acat-transfer-confirm { color: var(--invest3-text) !important; } html.dark #TB_ajaxContent .confirm-title, html[data-theme="dark"] #TB_ajaxContent .confirm-title { color: var(--invest3-link) !important; } html.dark #TB_ajaxContent .cf th, html.dark #TB_ajaxContent .cf td, html[data-theme="dark"] #TB_ajaxContent .cf th, html[data-theme="dark"] #TB_ajaxContent .cf td { color: var(--invest3-text) !important; } html.dark #TB_ajaxContent .confirm-party th, html[data-theme="dark"] #TB_ajaxContent .confirm-party th { color: var(--invest3-text-muted) !important; } html.dark #TB_ajaxContent hr, html[data-theme="dark"] #TB_ajaxContent hr { border: none !important; border-top: 1px solid var(--invest3-card-border) !important; background-color: var(--invest3-card-border) !important; } html.dark #TB_ajaxContent .partial-review, html[data-theme="dark"] #TB_ajaxContent .partial-review { background: var(--invest3-row-alt) !important; background-color: var(--invest3-row-alt) !important; border: 1px solid var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #TB_ajaxContent .partial-review h2, html[data-theme="dark"] #TB_ajaxContent .partial-review h2 { color: var(--invest3-link) !important; } html.dark #TB_ajaxContent .partial-review thead th, html[data-theme="dark"] #TB_ajaxContent .partial-review thead th { background: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; border-bottom: 1px solid var(--invest3-card-border) !important; } html.dark #TB_ajaxContent .partial-review table th, html.dark #TB_ajaxContent .partial-review table td, html[data-theme="dark"] #TB_ajaxContent .partial-review table th, html[data-theme="dark"] #TB_ajaxContent .partial-review table td { color: var(--invest3-text) !important; border-bottom: 1px solid var(--invest3-card-border) !important; } html.dark #TB_ajaxContent .partial-review tbody tr:nth-child(even) td, html[data-theme="dark"] #TB_ajaxContent .partial-review tbody tr:nth-child(even) td { background-color: var(--invest3-card) !important; } html.dark #TB_ajaxContent .partial-review input, html[data-theme="dark"] #TB_ajaxContent .partial-review input { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #TB_ajaxContent .cash-transfer, html[data-theme="dark"] #TB_ajaxContent .cash-transfer { color: var(--invest3-text) !important; } html.dark #TB_ajaxContent .cash-transfer h2, html[data-theme="dark"] #TB_ajaxContent .cash-transfer h2 { color: var(--invest3-link) !important; } html.dark #TB_ajaxContent .agreement-wr, html[data-theme="dark"] #TB_ajaxContent .agreement-wr { background: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #TB_ajaxContent .cash-transfer span, html[data-theme="dark"] #TB_ajaxContent .cash-transfer span { color: var(--invest3-text) !important; } html.dark #TB_ajaxContent img.close, html[data-theme="dark"] #TB_ajaxContent img.close { filter: invert(1) brightness(1.15) opacity(0.9); } html.dark #TB_ajaxContent .form-group label, html[data-theme="dark"] #TB_ajaxContent .form-group label { color: var(--invest3-text) !important; } /* Thickbox sits outside #wholediv — shell button rules do not apply */ html.dark #TB_window button.btn.btn-primary, html.dark #TB_window a.btn.btn-primary, html[data-theme="dark"] #TB_window button.btn.btn-primary, html[data-theme="dark"] #TB_window a.btn.btn-primary { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; background-image: none !important; border: 1px solid var(--invest3-primary) !important; text-shadow: none !important; box-shadow: none !important; } html.dark #TB_window button.btn.btn-primary:hover, html.dark #TB_window button.btn.btn-primary:focus-visible, html[data-theme="dark"] #TB_window button.btn.btn-primary:hover, html[data-theme="dark"] #TB_window button.btn.btn-primary:focus-visible { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; background-image: none !important; } html.dark #TB_window button.btn.btn-primary:disabled, html[data-theme="dark"] #TB_window button.btn.btn-primary:disabled { opacity: 0.55 !important; cursor: not-allowed !important; } html.dark #TB_window button.btn.btn-default, html.dark #TB_window a.btn.btn-default, html[data-theme="dark"] #TB_window button.btn.btn-default, html[data-theme="dark"] #TB_window a.btn.btn-default { color: var(--invest3-text) !important; background-color: var(--invest3-row-alt) !important; background-image: none !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #TB_window button.btn.btn-default:hover, html.dark #TB_window button.btn.btn-default:focus-visible, html[data-theme="dark"] #TB_window button.btn.btn-default:hover, html[data-theme="dark"] #TB_window button.btn.btn-default:focus-visible { background-color: var(--invest3-row-hover) !important; border-color: var(--invest3-card-border) !important; } /* * Selected tab / subnav: invest3 primary only in dark mode. Light mode keeps redesign orange (#F18043). */ html.dark #wholediv .title_list ul li.current a, html.dark #wholediv .title_list ul li:hover a:not(.btn), html.dark #wholediv .title_list_nav .left ul li.current a, html.dark #wholediv .title_list_nav .left ul li:hover a, html[data-theme="dark"] #wholediv .title_list ul li.current a, html[data-theme="dark"] #wholediv .title_list ul li:hover a:not(.btn), html[data-theme="dark"] #wholediv .title_list_nav .left ul li.current a, html[data-theme="dark"] #wholediv .title_list_nav .left ul li:hover a { border-bottom-color: var(--invest3-primary) !important; } html.dark #wholediv .tabs-wr .tab.current a, html.dark #wholediv .tabs-wr .tab:hover a, html.dark #wholediv .ct .tabs-wr .tab.current a, html.dark #wholediv .ct .tabs-wr .tab:hover a, html.dark #wholediv .dashboard-column .dashboard-block-tab.current a, html.dark #wholediv .dashboard-block-tab a:hover, html[data-theme="dark"] #wholediv .tabs-wr .tab.current a, html[data-theme="dark"] #wholediv .tabs-wr .tab:hover a, html[data-theme="dark"] #wholediv .ct .tabs-wr .tab.current a, html[data-theme="dark"] #wholediv .ct .tabs-wr .tab:hover a, html[data-theme="dark"] #wholediv .dashboard-column .dashboard-block-tab.current a, html[data-theme="dark"] #wholediv .dashboard-block-tab a:hover { border-bottom-color: var(--invest3-primary) !important; } html.dark #wholediv .tabs-sel .tabs-wr .tab.current, html.dark #wholediv .tabs-sel .tabs-wr .tab:hover, html[data-theme="dark"] #wholediv .tabs-sel .tabs-wr .tab.current, html[data-theme="dark"] #wholediv .tabs-sel .tabs-wr .tab:hover { background-color: var(--invest3-primary) !important; } html.dark #wholediv .title_list .button, html[data-theme="dark"] #wholediv .title_list .button { background: var(--invest3-primary) !important; } html.dark #wholediv .title_list .button:hover, html[data-theme="dark"] #wholediv .title_list .button:hover { background-color: var(--invest3-primary-hover) !important; } html.dark #wholediv .thirdnav li.tab.current a, html.dark #wholediv .thirdnav li.tab:hover a, html[data-theme="dark"] #wholediv .thirdnav li.tab.current a, html[data-theme="dark"] #wholediv .thirdnav li.tab:hover a { border-bottom-color: var(--invest3-primary) !important; } html.dark #wholediv #scr-top-nav .bl.tabs-wr .tab.current, html.dark #wholediv #scr-top-nav .bl.tabs-wr .tab:hover, html.dark #maincontent #scr-top-nav .bl.tabs-wr .tab.current, html.dark #maincontent #scr-top-nav .bl.tabs-wr .tab:hover, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr .tab.current, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr .tab:hover, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr .tab.current, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr .tab:hover { border-bottom-color: var(--invest3-primary) !important; } /* * Screener workspace (#scr-*): screeners/stocks|etfs|mutual-funds.php, rt-*/scr.php — light blues / white cards. */ html.dark #wholediv #scr-top-nav .bl.tabs-wr, html.dark #maincontent #scr-top-nav .bl.tabs-wr, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr { background: var(--invest3-title-bar) !important; background-color: var(--invest3-title-bar) !important; } html.dark #wholediv #scr-top-nav .bl.tabs-wr .tab.current, html.dark #wholediv #scr-top-nav .bl.tabs-wr .tab:hover, html.dark #maincontent #scr-top-nav .bl.tabs-wr .tab.current, html.dark #maincontent #scr-top-nav .bl.tabs-wr .tab:hover, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr .tab.current, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr .tab:hover, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr .tab.current, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr .tab:hover { background: transparent !important; background-color: transparent !important; } html.dark #wholediv #scr-top-nav .bl.tabs-wr .tab:not(.current):not(:hover) a, html.dark #maincontent #scr-top-nav .bl.tabs-wr .tab:not(.current):not(:hover) a, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr .tab:not(.current):not(:hover) a, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr .tab:not(.current):not(:hover) a { color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-top-nav .bl.tabs-wr .tab.current a, html.dark #wholediv #scr-top-nav .bl.tabs-wr .tab:hover a, html.dark #maincontent #scr-top-nav .bl.tabs-wr .tab.current a, html.dark #maincontent #scr-top-nav .bl.tabs-wr .tab:hover a, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr .tab.current a, html[data-theme="dark"] #wholediv #scr-top-nav .bl.tabs-wr .tab:hover a, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr .tab.current a, html[data-theme="dark"] #maincontent #scr-top-nav .bl.tabs-wr .tab:hover a { color: var(--invest3-link) !important; } html.dark #wholediv #scr-top-box, html.dark #wholediv #scr-detail-box, html.dark #maincontent #scr-top-box, html.dark #maincontent #scr-detail-box, html[data-theme="dark"] #wholediv #scr-top-box, html[data-theme="dark"] #wholediv #scr-detail-box, html[data-theme="dark"] #maincontent #scr-top-box, html[data-theme="dark"] #maincontent #scr-detail-box { background: var(--invest3-row-alt) !important; background-color: var(--invest3-row-alt) !important; } html.dark #wholediv #scr-main-box > li > label, html.dark #maincontent #scr-main-box > li > label, html[data-theme="dark"] #wholediv #scr-main-box > li > label, html[data-theme="dark"] #maincontent #scr-main-box > li > label { color: var(--invest3-text) !important; } html.dark #wholediv #scr-detail-box .header label, html.dark #maincontent #scr-detail-box .header label, html[data-theme="dark"] #wholediv #scr-detail-box .header label, html[data-theme="dark"] #maincontent #scr-detail-box .header label { color: var(--invest3-text) !important; } html.dark #wholediv #scr-result-box, html.dark #maincontent #scr-result-box, html[data-theme="dark"] #wholediv #scr-result-box, html[data-theme="dark"] #maincontent #scr-result-box { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv #scr-result-box .header label, html.dark #wholediv #scr-result-box .header li:first-child label, html.dark #maincontent #scr-result-box .header label, html.dark #maincontent #scr-result-box .header li:first-child label, html[data-theme="dark"] #wholediv #scr-result-box .header label, html[data-theme="dark"] #wholediv #scr-result-box .header li:first-child label, html[data-theme="dark"] #maincontent #scr-result-box .header label, html[data-theme="dark"] #maincontent #scr-result-box .header li:first-child label { color: var(--invest3-text) !important; } html.dark #wholediv #cur-scr-title, html.dark #maincontent #cur-scr-title, html[data-theme="dark"] #wholediv #cur-scr-title, html[data-theme="dark"] #maincontent #cur-scr-title { color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-results-cnt-wr label, html.dark #maincontent #scr-results-cnt-wr label, html[data-theme="dark"] #wholediv #scr-results-cnt-wr label, html[data-theme="dark"] #maincontent #scr-results-cnt-wr label { color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-results-cnt, html.dark #maincontent #scr-results-cnt, html[data-theme="dark"] #wholediv #scr-results-cnt, html[data-theme="dark"] #maincontent #scr-results-cnt { color: var(--invest3-accent) !important; } html.dark #wholediv #scr-selected-txt-wr label, html.dark #maincontent #scr-selected-txt-wr label, html[data-theme="dark"] #wholediv #scr-selected-txt-wr label, html[data-theme="dark"] #maincontent #scr-selected-txt-wr label { color: var(--invest3-text) !important; } html.dark #wholediv #scr-results-wr .gray.tabs-wr, html.dark #maincontent #scr-results-wr .gray.tabs-wr, html[data-theme="dark"] #wholediv #scr-results-wr .gray.tabs-wr, html[data-theme="dark"] #maincontent #scr-results-wr .gray.tabs-wr { background: var(--invest3-row-alt) !important; background-color: var(--invest3-row-alt) !important; border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv #scr-results-wr .gray.tabs-wr .current, html.dark #maincontent #scr-results-wr .gray.tabs-wr .current, html[data-theme="dark"] #wholediv #scr-results-wr .gray.tabs-wr .current, html[data-theme="dark"] #maincontent #scr-results-wr .gray.tabs-wr .current { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv #scr-results-wr .gray.tabs-wr .tab:not(.current) a, html.dark #maincontent #scr-results-wr .gray.tabs-wr .tab:not(.current) a, html[data-theme="dark"] #wholediv #scr-results-wr .gray.tabs-wr .tab:not(.current) a, html[data-theme="dark"] #maincontent #scr-results-wr .gray.tabs-wr .tab:not(.current) a { color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-results-wr .tabs-wr .tab.current a, html.dark #maincontent #scr-results-wr .tabs-wr .tab.current a, html[data-theme="dark"] #wholediv #scr-results-wr .tabs-wr .tab.current a, html[data-theme="dark"] #maincontent #scr-results-wr .tabs-wr .tab.current a { color: var(--invest3-link) !important; } html.dark #wholediv #scr-predefined .scrn a, html.dark #maincontent #scr-predefined .scrn a, html[data-theme="dark"] #wholediv #scr-predefined .scrn a, html[data-theme="dark"] #maincontent #scr-predefined .scrn a { color: var(--invest3-link) !important; } html.dark #wholediv #scr-predefined .scrn a:hover, html.dark #wholediv #scr-predefined .scrn a:focus-visible, html.dark #maincontent #scr-predefined .scrn a:hover, html.dark #maincontent #scr-predefined .scrn a:focus-visible, html[data-theme="dark"] #wholediv #scr-predefined .scrn a:hover, html[data-theme="dark"] #wholediv #scr-predefined .scrn a:focus-visible, html[data-theme="dark"] #maincontent #scr-predefined .scrn a:hover, html[data-theme="dark"] #maincontent #scr-predefined .scrn a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv #scr-main-box, html.dark #wholediv #scr-box-wr, html.dark #maincontent #scr-main-box, html.dark #maincontent #scr-box-wr, html[data-theme="dark"] #wholediv #scr-main-box, html[data-theme="dark"] #wholediv #scr-box-wr, html[data-theme="dark"] #maincontent #scr-main-box, html[data-theme="dark"] #maincontent #scr-box-wr { color: var(--invest3-text) !important; } html.dark #wholediv .scr-row, html.dark #maincontent .scr-row, html[data-theme="dark"] #wholediv .scr-row, html[data-theme="dark"] #maincontent .scr-row { border-top-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #wholediv .scr-row .row-head label, html.dark #maincontent .scr-row .row-head label, html[data-theme="dark"] #wholediv .scr-row .row-head label, html[data-theme="dark"] #maincontent .scr-row .row-head label { color: var(--invest3-text) !important; } html.dark #wholediv #scr-result-box .essential label, html.dark #maincontent #scr-result-box .essential label, html[data-theme="dark"] #wholediv #scr-result-box .essential label, html[data-theme="dark"] #maincontent #scr-result-box .essential label { color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-result-box.ed2 .main, html.dark #maincontent #scr-result-box.ed2 .main, html[data-theme="dark"] #wholediv #scr-result-box.ed2 .main, html[data-theme="dark"] #maincontent #scr-result-box.ed2 .main { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-result-box #dt-results table.display, html.dark #maincontent #scr-result-box #dt-results table.display, html[data-theme="dark"] #wholediv #scr-result-box #dt-results table.display, html[data-theme="dark"] #maincontent #scr-result-box #dt-results table.display { background-color: transparent !important; } html.dark #wholediv #scr-result-box #dt-results table.display thead th, html.dark #maincontent #scr-result-box #dt-results table.display thead th, html[data-theme="dark"] #wholediv #scr-result-box #dt-results table.display thead th, html[data-theme="dark"] #maincontent #scr-result-box #dt-results table.display thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-right-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv #scr-result-box #dt-results table.display tbody td, html.dark #maincontent #scr-result-box #dt-results table.display tbody td, html[data-theme="dark"] #wholediv #scr-result-box #dt-results table.display tbody td, html[data-theme="dark"] #maincontent #scr-result-box #dt-results table.display tbody td { color: var(--invest3-text-muted) !important; border-bottom-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv #scr-result-box #dt-results table.display tbody tr:hover > td, html.dark #maincontent #scr-result-box #dt-results table.display tbody tr:hover > td, html[data-theme="dark"] #wholediv #scr-result-box #dt-results table.display tbody tr:hover > td, html[data-theme="dark"] #maincontent #scr-result-box #dt-results table.display tbody tr:hover > td { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv #scr-result-box #dt-results table.display tbody td a, html.dark #maincontent #scr-result-box #dt-results table.display tbody td a, html[data-theme="dark"] #wholediv #scr-result-box #dt-results table.display tbody td a, html[data-theme="dark"] #maincontent #scr-result-box #dt-results table.display tbody td a { color: var(--invest3-link) !important; } html.dark #wholediv #scr-result-box #dt-results table.display tbody td a:hover, html.dark #wholediv #scr-result-box #dt-results table.display tbody td a:focus-visible, html.dark #maincontent #scr-result-box #dt-results table.display tbody td a:hover, html.dark #maincontent #scr-result-box #dt-results table.display tbody td a:focus-visible, html[data-theme="dark"] #wholediv #scr-result-box #dt-results table.display tbody td a:hover, html[data-theme="dark"] #wholediv #scr-result-box #dt-results table.display tbody td a:focus-visible, html[data-theme="dark"] #maincontent #scr-result-box #dt-results table.display tbody td a:hover, html[data-theme="dark"] #maincontent #scr-result-box #dt-results table.display tbody td a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv #scr-result-box #dt-results .dataTables_wrapper, html.dark #maincontent #scr-result-box #dt-results .dataTables_wrapper, html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_wrapper, html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_wrapper { color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-result-box #dt-results .dataTables_info, html.dark #wholediv #scr-result-box #dt-results .dataTables_length, html.dark #maincontent #scr-result-box #dt-results .dataTables_info, html.dark #maincontent #scr-result-box #dt-results .dataTables_length, html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_info, html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_length, html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_info, html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_length { color: var(--invest3-text-muted) !important; } html.dark #wholediv #scr-result-box #dt-results .dataTables_length select, html.dark #maincontent #scr-result-box #dt-results .dataTables_length select, html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_length select, html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_length select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } /* Screener detail row: .closebtn (cancel.svg) + filter selects ._select; results: #m-scr-res-tbl_* pagination */ html.dark #wholediv #scr-detail-box a.closebtn, html.dark #maincontent #scr-detail-box a.closebtn, html[data-theme="dark"] #wholediv #scr-detail-box a.closebtn, html[data-theme="dark"] #maincontent #scr-detail-box a.closebtn { color: var(--invest3-text) !important; filter: invert(1) brightness(1.08); opacity: 0.92; } html.dark #wholediv #scr-detail-box a.closebtn:hover, html.dark #wholediv #scr-detail-box a.closebtn:focus-visible, html.dark #maincontent #scr-detail-box a.closebtn:hover, html.dark #maincontent #scr-detail-box a.closebtn:focus-visible, html[data-theme="dark"] #wholediv #scr-detail-box a.closebtn:hover, html[data-theme="dark"] #wholediv #scr-detail-box a.closebtn:focus-visible, html[data-theme="dark"] #maincontent #scr-detail-box a.closebtn:hover, html[data-theme="dark"] #maincontent #scr-detail-box a.closebtn:focus-visible { opacity: 1; } html.dark #wholediv #scr-detail-box select._select, html.dark #wholediv .scr-row select._select, html.dark #maincontent #scr-detail-box select._select, html.dark #maincontent .scr-row select._select, html[data-theme="dark"] #wholediv #scr-detail-box select._select, html[data-theme="dark"] #wholediv .scr-row select._select, html[data-theme="dark"] #maincontent #scr-detail-box select._select, html[data-theme="dark"] #maincontent .scr-row select._select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } /* full_numbers: First/Prev/Next/Last are direct ; page numbers live in span (jquery.dataTables) */ html.dark #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled), html.dark #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled), html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled), html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled) { background-color: var(--invest3-row-alt) !important; color: var(--invest3-link) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled):hover, html.dark #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled):hover, html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled):hover, html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_button:not(.paginate_active):not(.paginate_button_disabled):hover { background-color: var(--invest3-row-hover) !important; color: var(--invest3-link-hover) !important; } html.dark #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_active, html.dark #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_active, html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_active, html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_active { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_button_disabled, html.dark #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_button_disabled, html[data-theme="dark"] #wholediv #scr-result-box #dt-results .dataTables_paginate a.paginate_button_disabled, html[data-theme="dark"] #maincontent #scr-result-box #dt-results .dataTables_paginate a.paginate_button_disabled { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; opacity: 0.55; } html.dark #wholediv .formcenter .title_list ul li.current a, html.dark #wholediv .formcenter .title_list ul li:hover a, html.dark #maincontent .formcenter .title_list ul li.current a, html.dark #maincontent .formcenter .title_list ul li:hover a, html[data-theme="dark"] #wholediv .formcenter .title_list ul li.current a, html[data-theme="dark"] #wholediv .formcenter .title_list ul li:hover a, html[data-theme="dark"] #maincontent .formcenter .title_list ul li.current a, html[data-theme="dark"] #maincontent .formcenter .title_list ul li:hover a { border-bottom-color: var(--invest3-primary) !important; } /* * Form Center (support/formcenter.php): .template_t.formcenter — h1 is outside .main; .tab-content is outside .template_t .main. */ html.dark #wholediv #maincontent .template_t.formcenter > .title > h1, html.dark #wholediv .template_t.formcenter > .title > h1, html.dark #maincontent .template_t.formcenter > .title > h1, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter > .title > h1, html[data-theme="dark"] #wholediv .template_t.formcenter > .title > h1, html[data-theme="dark"] #maincontent .template_t.formcenter > .title > h1 { color: var(--invest3-text) !important; -webkit-text-fill-color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter .tab-content, html.dark #wholediv .template_t.formcenter .tab-content, html.dark #maincontent .template_t.formcenter .tab-content, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .tab-content, html[data-theme="dark"] #wholediv .template_t.formcenter .tab-content, html[data-theme="dark"] #maincontent .template_t.formcenter .tab-content { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter .tab-content .banner_title, html.dark #wholediv .template_t.formcenter .tab-content .banner_title, html.dark #maincontent .template_t.formcenter .tab-content .banner_title, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .tab-content .banner_title, html[data-theme="dark"] #wholediv .template_t.formcenter .tab-content .banner_title, html[data-theme="dark"] #maincontent .template_t.formcenter .tab-content .banner_title { color: var(--invest3-text) !important; } /* * Form Center upload tab (t_uploadcenter.php): Fine Uploader (#fileuploader) + .upload_history + DataTables .display2. */ html.dark #wholediv #maincontent .template_t.formcenter #uploadcenter .upload_history .banner_title, html.dark #wholediv .template_t.formcenter #uploadcenter .upload_history .banner_title, html.dark #maincontent .template_t.formcenter #uploadcenter .upload_history .banner_title, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #uploadcenter .upload_history .banner_title, html[data-theme="dark"] #wholediv .template_t.formcenter #uploadcenter .upload_history .banner_title, html[data-theme="dark"] #maincontent .template_t.formcenter #uploadcenter .upload_history .banner_title { color: var(--invest3-text) !important; -webkit-text-fill-color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-wrapper, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-wrapper, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper { background: var(--invest3-row-alt) !important; background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper b, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-wrapper b, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper b, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper b, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-wrapper b, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-wrapper b { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-area, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-area, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border: 1px dashed var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area.qq-upload-drop-area-active, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-area.qq-upload-drop-area-active, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area.qq-upload-drop-area-active, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area.qq-upload-drop-area-active, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-area.qq-upload-drop-area-active, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-area.qq-upload-drop-area-active { background: var(--invest3-ds-tint-blue) !important; background-color: var(--invest3-ds-tint-blue) !important; border-color: var(--invest3-primary) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content b, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-content b, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content b, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content b, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-content b, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content b { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content span, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-content span, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content span, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content span, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-drop-content span, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-drop-content span { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-drop-processing, html.dark #wholediv .template_t.formcenter #fileuploader .qq-drop-processing, html.dark #maincontent .template_t.formcenter #fileuploader .qq-drop-processing, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-drop-processing, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-drop-processing, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-drop-processing { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader select#upload_accts, html.dark #wholediv #maincontent .template_t.formcenter #fileuploader select.file-type, html.dark #wholediv .template_t.formcenter #fileuploader select#upload_accts, html.dark #wholediv .template_t.formcenter #fileuploader select.file-type, html.dark #maincontent .template_t.formcenter #fileuploader select#upload_accts, html.dark #maincontent .template_t.formcenter #fileuploader select.file-type, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader select#upload_accts, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader select.file-type, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader select#upload_accts, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader select.file-type, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader select#upload_accts, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader select.file-type { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-list li, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-list li, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-list li, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-list li, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-list li, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-list li { background-color: var(--invest3-ds-elev-03) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-success, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-success, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-success, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-success, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-success, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-success { background-color: var(--invest3-ds-tint-blue) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-fail, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-fail, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-fail, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-fail, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-fail, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-list li.qq-upload-fail { background-color: var(--invest3-error-bg) !important; color: var(--invest3-error-text) !important; border-color: var(--invest3-error-border) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-size, html.dark #wholediv .template_t.formcenter #fileuploader .qq-upload-size, html.dark #maincontent .template_t.formcenter #fileuploader .qq-upload-size, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-upload-size, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-upload-size, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-upload-size { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t.formcenter #fileuploader .qq-progress-bar, html.dark #wholediv .template_t.formcenter #fileuploader .qq-progress-bar, html.dark #maincontent .template_t.formcenter #fileuploader .qq-progress-bar, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #fileuploader .qq-progress-bar, html[data-theme="dark"] #wholediv .template_t.formcenter #fileuploader .qq-progress-bar, html[data-theme="dark"] #maincontent .template_t.formcenter #fileuploader .qq-progress-bar { background: var(--invest3-primary) !important; background-image: none !important; } html.dark #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 thead th, html.dark #wholediv .template_t.formcenter #uploadcenter table.display2 thead th, html.dark #maincontent .template_t.formcenter #uploadcenter table.display2 thead th, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 thead th, html[data-theme="dark"] #wholediv .template_t.formcenter #uploadcenter table.display2 thead th, html[data-theme="dark"] #maincontent .template_t.formcenter #uploadcenter table.display2 thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td, html.dark #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td, html.dark #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td, html[data-theme="dark"] #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td, html[data-theme="dark"] #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody tr:hover td, html.dark #wholediv .template_t.formcenter #uploadcenter table.display2 tbody tr:hover td, html.dark #maincontent .template_t.formcenter #uploadcenter table.display2 tbody tr:hover td, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody tr:hover td, html[data-theme="dark"] #wholediv .template_t.formcenter #uploadcenter table.display2 tbody tr:hover td, html[data-theme="dark"] #maincontent .template_t.formcenter #uploadcenter table.display2 tbody tr:hover td { background-color: var(--invest3-row-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a, html.dark #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td a, html.dark #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a, html[data-theme="dark"] #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td a, html[data-theme="dark"] #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:hover, html.dark #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:focus-visible, html.dark #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td a:hover, html.dark #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td a:focus-visible, html.dark #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:hover, html.dark #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:hover, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:focus-visible, html[data-theme="dark"] #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td a:hover, html[data-theme="dark"] #wholediv .template_t.formcenter #uploadcenter table.display2 tbody td a:focus-visible, html[data-theme="dark"] #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:hover, html[data-theme="dark"] #maincontent .template_t.formcenter #uploadcenter table.display2 tbody td a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv #maincontent .template_t.formcenter .tab-content p, html.dark #wholediv .template_t.formcenter .tab-content p, html.dark #maincontent .template_t.formcenter .tab-content p, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .tab-content p, html[data-theme="dark"] #wholediv .template_t.formcenter .tab-content p, html[data-theme="dark"] #maincontent .template_t.formcenter .tab-content p { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t.formcenter .tab-content .content td, html.dark #wholediv .template_t.formcenter .tab-content .content td, html.dark #maincontent .template_t.formcenter .tab-content .content td, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .tab-content .content td, html[data-theme="dark"] #wholediv .template_t.formcenter .tab-content .content td, html[data-theme="dark"] #maincontent .template_t.formcenter .tab-content .content td { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey), html.dark #wholediv .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey), html.dark #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey), html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey), html[data-theme="dark"] #wholediv .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey), html[data-theme="dark"] #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey) { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):hover, html.dark #wholediv #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):focus-visible, html.dark #wholediv .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):hover, html.dark #wholediv .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):focus-visible, html.dark #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):hover, html.dark #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):hover, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):focus-visible, html[data-theme="dark"] #wholediv .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):hover, html[data-theme="dark"] #wholediv .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):focus-visible, html[data-theme="dark"] #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):hover, html[data-theme="dark"] #maincontent .template_t.formcenter .tab-content a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-action):not(.btn-clear-blue):not(.btn-clear-grey):focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv #maincontent .template_t.formcenter table.table_template thead th, html.dark #wholediv .template_t.formcenter table.table_template thead th, html.dark #maincontent .template_t.formcenter table.table_template thead th, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template thead th, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template thead th, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } /* Download center: category subtitle in (e.g. sub_title in parentheses). */ html.dark #wholediv #maincontent .template_t.formcenter #downloadcenter table.table_template thead th span, html.dark #wholediv .template_t.formcenter #downloadcenter table.table_template thead th span, html.dark #maincontent .template_t.formcenter #downloadcenter table.table_template thead th span, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter #downloadcenter table.table_template thead th span, html[data-theme="dark"] #wholediv .template_t.formcenter #downloadcenter table.table_template thead th span, html[data-theme="dark"] #maincontent .template_t.formcenter #downloadcenter table.table_template thead th span { color: var(--invest3-text-secondary) !important; -webkit-text-fill-color: var(--invest3-text-secondary) !important; } html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody td, html.dark #wholediv .template_t.formcenter table.table_template tbody td, html.dark #maincontent .template_t.formcenter table.table_template tbody td, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody td, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody td, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody td { color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody tr:hover td, html.dark #wholediv .template_t.formcenter table.table_template tbody tr:hover td, html.dark #maincontent .template_t.formcenter table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody tr:hover td, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody tr:hover td { background-color: var(--invest3-row-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody td a, html.dark #wholediv .template_t.formcenter table.table_template tbody td a, html.dark #maincontent .template_t.formcenter table.table_template tbody td a, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody td a, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody td a, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody td a { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody td a:hover, html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody td a:focus-visible, html.dark #wholediv .template_t.formcenter table.table_template tbody td a:hover, html.dark #wholediv .template_t.formcenter table.table_template tbody td a:focus-visible, html.dark #maincontent .template_t.formcenter table.table_template tbody td a:hover, html.dark #maincontent .template_t.formcenter table.table_template tbody td a:focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody td a:hover, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody td a:focus-visible, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody td a:hover, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody td a:focus-visible, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody td a:hover, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody td a:focus-visible { color: var(--invest3-link-hover) !important; } /* Apply buttons: stdlink + btn-secondary — link-blue fills; text = inverted surface (ds elev-01), same as .invest3-submit. */ html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary, html.dark #wholediv .template_t.formcenter table.table_template tbody td a.btn.btn-secondary, html.dark #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody td a.btn.btn-secondary, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary { background-color: var(--invest3-ds-link-secondary) !important; background: var(--invest3-ds-link-secondary) !important; color: var(--invest3-ds-elev-01) !important; -webkit-text-fill-color: var(--invest3-ds-elev-01) !important; border-color: var(--invest3-ds-link-secondary) !important; } html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:hover, html.dark #wholediv #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:focus-visible, html.dark #wholediv .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:hover, html.dark #wholediv .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:focus-visible, html.dark #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:hover, html.dark #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:focus-visible, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:hover, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:focus-visible, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:hover, html[data-theme="dark"] #wholediv .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:focus-visible, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:hover, html[data-theme="dark"] #maincontent .template_t.formcenter table.table_template tbody td a.btn.btn-secondary:focus-visible { background-color: var(--invest3-ds-link-primary) !important; background: var(--invest3-ds-link-primary) !important; color: var(--invest3-ds-elev-01) !important; -webkit-text-fill-color: var(--invest3-ds-elev-01) !important; border-color: var(--invest3-ds-link-primary) !important; } html.dark #wholediv #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey, html.dark #wholediv .template_t.formcenter .right_4 div.blurb.fbg-grey, html.dark #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey, html[data-theme="dark"] #wholediv .template_t.formcenter .right_4 div.blurb.fbg-grey, html[data-theme="dark"] #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey { background: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey h4, html.dark #wholediv .template_t.formcenter .right_4 div.blurb.fbg-grey h4, html.dark #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey h4, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey h4, html[data-theme="dark"] #wholediv .template_t.formcenter .right_4 div.blurb.fbg-grey h4, html[data-theme="dark"] #maincontent .template_t.formcenter .right_4 div.blurb.fbg-grey h4 { background: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .template_t.formcenter .video_box.box .video-thumbnail.bg-darkblue, html.dark #wholediv .template_t.formcenter .video_box.box .video-thumbnail.bg-darkblue, html.dark #maincontent .template_t.formcenter .video_box.box .video-thumbnail.bg-darkblue, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .video_box.box .video-thumbnail.bg-darkblue, html[data-theme="dark"] #wholediv .template_t.formcenter .video_box.box .video-thumbnail.bg-darkblue, html[data-theme="dark"] #maincontent .template_t.formcenter .video_box.box .video-thumbnail.bg-darkblue { background-color: var(--invest3-primary) !important; } html.dark #wholediv #maincontent .template_t.formcenter .video_box.box .video-thumbnail .thumbnail-title, html.dark #wholediv .template_t.formcenter .video_box.box .video-thumbnail .thumbnail-title, html.dark #maincontent .template_t.formcenter .video_box.box .video-thumbnail .thumbnail-title, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .video_box.box .video-thumbnail .thumbnail-title, html[data-theme="dark"] #wholediv .template_t.formcenter .video_box.box .video-thumbnail .thumbnail-title, html[data-theme="dark"] #maincontent .template_t.formcenter .video_box.box .video-thumbnail .thumbnail-title { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv #maincontent .template_t.formcenter .video_box.box .thumbnail-time, html.dark #wholediv .template_t.formcenter .video_box.box .thumbnail-time, html.dark #maincontent .template_t.formcenter .video_box.box .thumbnail-time, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .video_box.box .thumbnail-time, html[data-theme="dark"] #wholediv .template_t.formcenter .video_box.box .thumbnail-time, html[data-theme="dark"] #maincontent .template_t.formcenter .video_box.box .thumbnail-time { color: rgba(255, 255, 255, 0.88) !important; } html.dark #wholediv #maincontent .template_t.formcenter .right_4 .aot_ifm .main, html.dark #wholediv .template_t.formcenter .right_4 .aot_ifm .main, html.dark #maincontent .template_t.formcenter .right_4 .aot_ifm .main, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .right_4 .aot_ifm .main, html[data-theme="dark"] #wholediv .template_t.formcenter .right_4 .aot_ifm .main, html[data-theme="dark"] #maincontent .template_t.formcenter .right_4 .aot_ifm .main { color: var(--invest3-text-muted) !important; } html.dark #wholediv #maincontent .template_t.formcenter .right_4 .aot_ifm .main a.stdlink, html.dark #wholediv .template_t.formcenter .right_4 .aot_ifm .main a.stdlink, html.dark #maincontent .template_t.formcenter .right_4 .aot_ifm .main a.stdlink, html[data-theme="dark"] #wholediv #maincontent .template_t.formcenter .right_4 .aot_ifm .main a.stdlink, html[data-theme="dark"] #wholediv .template_t.formcenter .right_4 .aot_ifm .main a.stdlink, html[data-theme="dark"] #maincontent .template_t.formcenter .right_4 .aot_ifm .main a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .education.big_banner .video_section li.active > a, html.dark #wholediv .education.big_banner .video_section li:hover > a, html[data-theme="dark"] #wholediv .education.big_banner .video_section li.active > a, html[data-theme="dark"] #wholediv .education.big_banner .video_section li:hover > a { border-bottom-color: var(--invest3-primary) !important; } /* * IRA overview (#/content/ira/…): .retirement.big_banner — hero, thumbnails, #calendar, .ira-greybox, #calculator. */ html.dark #wholediv .retirement.big_banner .big_banner_header, html.dark #maincontent .retirement.big_banner .big_banner_header, html[data-theme="dark"] #wholediv .retirement.big_banner .big_banner_header, html[data-theme="dark"] #maincontent .retirement.big_banner .big_banner_header { color: var(--invest3-link) !important; } /* Subtitle: redesign #4D4F5C is for light UI; on dark canvas use token secondary text. */ html.dark #wholediv .retirement.big_banner .big_banner_subtitle, html.dark #maincontent .retirement.big_banner .big_banner_subtitle, html[data-theme="dark"] #wholediv .retirement.big_banner .big_banner_subtitle, html[data-theme="dark"] #maincontent .retirement.big_banner .big_banner_subtitle { color: var(--invest3-text-muted) !important; } html.dark #wholediv .retirement.big_banner .thumbnail_title, html.dark #wholediv .retirement.big_banner a.thumbnail_title, html.dark #maincontent .retirement.big_banner .thumbnail_title, html.dark #maincontent .retirement.big_banner a.thumbnail_title, html[data-theme="dark"] #wholediv .retirement.big_banner .thumbnail_title, html[data-theme="dark"] #wholediv .retirement.big_banner a.thumbnail_title, html[data-theme="dark"] #maincontent .retirement.big_banner .thumbnail_title, html[data-theme="dark"] #maincontent .retirement.big_banner a.thumbnail_title { color: var(--invest3-link) !important; } html.dark #wholediv .retirement.big_banner a.thumbnail_title:hover, html.dark #wholediv .retirement.big_banner a.thumbnail_title:focus-visible, html.dark #maincontent .retirement.big_banner a.thumbnail_title:hover, html.dark #maincontent .retirement.big_banner a.thumbnail_title:focus-visible, html[data-theme="dark"] #wholediv .retirement.big_banner a.thumbnail_title:hover, html[data-theme="dark"] #wholediv .retirement.big_banner a.thumbnail_title:focus-visible, html[data-theme="dark"] #maincontent .retirement.big_banner a.thumbnail_title:hover, html[data-theme="dark"] #maincontent .retirement.big_banner a.thumbnail_title:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .retirement.big_banner .thumbnails .box p, html.dark #maincontent .retirement.big_banner .thumbnails .box p, html[data-theme="dark"] #wholediv .retirement.big_banner .thumbnails .box p, html[data-theme="dark"] #maincontent .retirement.big_banner .thumbnails .box p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .retirement.big_banner #calendar, html.dark #maincontent .retirement.big_banner #calendar, html[data-theme="dark"] #wholediv .retirement.big_banner #calendar, html[data-theme="dark"] #maincontent .retirement.big_banner #calendar { border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .retirement.big_banner .ira-greybox, html.dark #wholediv .retirement.big_banner #calculator, html.dark #maincontent .retirement.big_banner .ira-greybox, html.dark #maincontent .retirement.big_banner #calculator, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox, html[data-theme="dark"] #wholediv .retirement.big_banner #calculator, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox, html[data-theme="dark"] #maincontent .retirement.big_banner #calculator { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; box-shadow: 0 1px 4px var(--invest3-shadow-40) !important; } html.dark #wholediv .retirement.big_banner .ira-greybox-left, html.dark #maincontent .retirement.big_banner .ira-greybox-left, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox-left, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox-left { border-right-color: var(--invest3-card-border) !important; } html.dark #wholediv .retirement.big_banner .ira-greybox a, html.dark #maincontent .retirement.big_banner .ira-greybox a, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox a, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox a { color: var(--invest3-link) !important; } html.dark #wholediv .retirement.big_banner .ira-greybox .promo-text, html.dark #maincontent .retirement.big_banner .ira-greybox .promo-text, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox .promo-text, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox .promo-text { color: var(--invest3-text-muted) !important; } html.dark #wholediv .retirement.big_banner .ira-greybox-right .bg_orange, html.dark #wholediv .retirement.big_banner .ira-greybox-right a.btn.btn-action, html.dark #maincontent .retirement.big_banner .ira-greybox-right .bg_orange, html.dark #maincontent .retirement.big_banner .ira-greybox-right a.btn.btn-action, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox-right .bg_orange, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox-right a.btn.btn-action, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox-right .bg_orange, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox-right a.btn.btn-action { background-color: var(--invest3-primary) !important; background-image: none !important; border-color: var(--invest3-primary) !important; color: var(--invest3-text) !important; } html.dark #wholediv .retirement.big_banner .ira-greybox-right a.btn.btn-action:hover, html.dark #wholediv .retirement.big_banner .ira-greybox-right a.btn.btn-action:focus-visible, html.dark #maincontent .retirement.big_banner .ira-greybox-right a.btn.btn-action:hover, html.dark #maincontent .retirement.big_banner .ira-greybox-right a.btn.btn-action:focus-visible, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox-right a.btn.btn-action:hover, html[data-theme="dark"] #wholediv .retirement.big_banner .ira-greybox-right a.btn.btn-action:focus-visible, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox-right a.btn.btn-action:hover, html[data-theme="dark"] #maincontent .retirement.big_banner .ira-greybox-right a.btn.btn-action:focus-visible { background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv .retirement.big_banner #calculator h3, html.dark #wholediv .retirement.big_banner #calculator p, html.dark #wholediv .retirement.big_banner #calculator b, html.dark #maincontent .retirement.big_banner #calculator h3, html.dark #maincontent .retirement.big_banner #calculator p, html.dark #maincontent .retirement.big_banner #calculator b, html[data-theme="dark"] #wholediv .retirement.big_banner #calculator h3, html[data-theme="dark"] #wholediv .retirement.big_banner #calculator p, html[data-theme="dark"] #wholediv .retirement.big_banner #calculator b, html[data-theme="dark"] #maincontent .retirement.big_banner #calculator h3, html[data-theme="dark"] #maincontent .retirement.big_banner #calculator p, html[data-theme="dark"] #maincontent .retirement.big_banner #calculator b { color: var(--invest3-text) !important; } html.dark #wholediv .retirement.big_banner .calculator-title-left, html.dark #wholediv .retirement.big_banner .calculator-title-right, html.dark #maincontent .retirement.big_banner .calculator-title-left, html.dark #maincontent .retirement.big_banner .calculator-title-right, html[data-theme="dark"] #wholediv .retirement.big_banner .calculator-title-left, html[data-theme="dark"] #wholediv .retirement.big_banner .calculator-title-right, html[data-theme="dark"] #maincontent .retirement.big_banner .calculator-title-left, html[data-theme="dark"] #maincontent .retirement.big_banner .calculator-title-right { color: var(--invest3-text) !important; } html.dark #wholediv .retirement.big_banner #ret_cal td, html.dark #maincontent .retirement.big_banner #ret_cal td, html[data-theme="dark"] #wholediv .retirement.big_banner #ret_cal td, html[data-theme="dark"] #maincontent .retirement.big_banner #ret_cal td { color: var(--invest3-text-muted) !important; } html.dark #wholediv .retirement.big_banner #ret_cal input, html.dark #maincontent .retirement.big_banner #ret_cal input, html[data-theme="dark"] #wholediv .retirement.big_banner #ret_cal input, html[data-theme="dark"] #maincontent .retirement.big_banner #ret_cal input { background-color: var(--invest3-canvas) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .retirement.big_banner #ret_cal #result, html.dark #maincontent .retirement.big_banner #ret_cal #result, html[data-theme="dark"] #wholediv .retirement.big_banner #ret_cal #result, html[data-theme="dark"] #maincontent .retirement.big_banner #ret_cal #result { color: var(--invest3-text) !important; } html.dark #wholediv .retirement.big_banner h3, html.dark #maincontent .retirement.big_banner h3, html[data-theme="dark"] #wholediv .retirement.big_banner h3, html[data-theme="dark"] #maincontent .retirement.big_banner h3 { color: var(--invest3-text) !important; } html.dark #wholediv .retirement.big_banner .education-title, html.dark #wholediv .retirement.big_banner .education-subtitle, html.dark #maincontent .retirement.big_banner .education-title, html.dark #maincontent .retirement.big_banner .education-subtitle, html[data-theme="dark"] #wholediv .retirement.big_banner .education-title, html[data-theme="dark"] #wholediv .retirement.big_banner .education-subtitle, html[data-theme="dark"] #maincontent .retirement.big_banner .education-title, html[data-theme="dark"] #maincontent .retirement.big_banner .education-subtitle { color: var(--invest3-link) !important; } html.dark #wholediv .retirement.big_banner .important-dates, html.dark #maincontent .retirement.big_banner .important-dates, html[data-theme="dark"] #wholediv .retirement.big_banner .important-dates, html[data-theme="dark"] #maincontent .retirement.big_banner .important-dates { color: var(--invest3-text-muted) !important; } html.dark #wholediv .retirement.big_banner #education p, html.dark #maincontent .retirement.big_banner #education p, html[data-theme="dark"] #wholediv .retirement.big_banner #education p, html[data-theme="dark"] #maincontent .retirement.big_banner #education p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .retirement.big_banner #basics ul li, html.dark #wholediv .retirement.big_banner #financial ul li, html.dark #maincontent .retirement.big_banner #basics ul li, html.dark #maincontent .retirement.big_banner #financial ul li, html[data-theme="dark"] #wholediv .retirement.big_banner #basics ul li, html[data-theme="dark"] #wholediv .retirement.big_banner #financial ul li, html[data-theme="dark"] #maincontent .retirement.big_banner #basics ul li, html[data-theme="dark"] #maincontent .retirement.big_banner #financial ul li { color: var(--invest3-text-muted) !important; } /* * Mobile app page (content/trading/mobile.php): .mobile.big_banner — carousel, feature list, etc. * (.big_banner_bg hero + .big_banner_header / .big_banner_subtitle use legacy light styling in dark mode.) */ html.dark #wholediv .mobile.big_banner h3, html.dark #maincontent .mobile.big_banner h3, html[data-theme="dark"] #wholediv .mobile.big_banner h3, html[data-theme="dark"] #maincontent .mobile.big_banner h3 { color: var(--invest3-text) !important; border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #wholediv .mobile.big_banner .big_banner_bg_bottom, html.dark #maincontent .mobile.big_banner .big_banner_bg_bottom, html[data-theme="dark"] #wholediv .mobile.big_banner .big_banner_bg_bottom, html[data-theme="dark"] #maincontent .mobile.big_banner .big_banner_bg_bottom { border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mobile .app_feature_bg, html.dark #maincontent .mobile .app_feature_bg, html[data-theme="dark"] #wholediv .mobile .app_feature_bg, html[data-theme="dark"] #maincontent .mobile .app_feature_bg { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mobile #app_feature_list h4, html.dark #maincontent .mobile #app_feature_list h4, html[data-theme="dark"] #wholediv .mobile #app_feature_list h4, html[data-theme="dark"] #maincontent .mobile #app_feature_list h4 { color: var(--invest3-text) !important; } /* #app_feature_list: link primary for items; selected uses link secondary (--invest3-link-hover / ds-link-secondary) */ #wholediv .mobile #app_feature_list li.app_feature, #maincontent .mobile #app_feature_list li.app_feature { color: var(--invest3-link) !important; } #wholediv .mobile #app_feature_list li.app_feature.on, #maincontent .mobile #app_feature_list li.app_feature.on { color: var(--invest3-link-hover) !important; font-weight: 600 !important; } html.dark #wholediv .mobile #app_feature_description, html.dark #maincontent .mobile #app_feature_description, html[data-theme="dark"] #wholediv .mobile #app_feature_description, html[data-theme="dark"] #maincontent .mobile #app_feature_description { color: var(--invest3-text-muted) !important; } html.dark #wholediv .mobile #app_feature_description h4, html.dark #maincontent .mobile #app_feature_description h4, html[data-theme="dark"] #wholediv .mobile #app_feature_description h4, html[data-theme="dark"] #maincontent .mobile #app_feature_description h4 { color: var(--invest3-link) !important; } html.dark #wholediv .mobile #app_feature_description ul li, html.dark #maincontent .mobile #app_feature_description ul li, html[data-theme="dark"] #wholediv .mobile #app_feature_description ul li, html[data-theme="dark"] #maincontent .mobile #app_feature_description ul li { color: var(--invest3-text) !important; } html.dark #wholediv .mobile.big_banner .carousel-control span, html.dark #maincontent .mobile.big_banner .carousel-control span, html[data-theme="dark"] #wholediv .mobile.big_banner .carousel-control span, html[data-theme="dark"] #maincontent .mobile.big_banner .carousel-control span { filter: brightness(0) invert(1); opacity: 0.92; } /* * redesign.css home columns: .list is #FFF and wins if theme loads before redesign/tailwind. * These rules match or beat .list / .title_list / .list table and orderbar .box_hd borders. */ :is(html.dark, html[data-theme="dark"]) #wholediv .list { background: var(--invest3-card) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35); } :is(html.dark, html[data-theme="dark"]) #wholediv .power_list .yellow, :is(html.dark, html[data-theme="dark"]) #wholediv .due_list .yellow { background: var(--invest3-card) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .title_list, :is(html.dark, html[data-theme="dark"]) #wholediv .title_list_nav { background: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .title_list_nav .left ul { background: var(--invest3-title-bar) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .title_list h6, :is(html.dark, html[data-theme="dark"]) #wholediv .title_list_nav h6, :is(html.dark, html[data-theme="dark"]) #wholediv .download_account .right_4 h6, :is(html.dark, html[data-theme="dark"]) #wholediv .taxblurb .right_4 h6 { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .list .header_list, :is(html.dark, html[data-theme="dark"]) #wholediv .list .header_list table, :is(html.dark, html[data-theme="dark"]) #wholediv .list .header_list table th, :is(html.dark, html[data-theme="dark"]) #wholediv .list .header_list table td { background: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .list table th, :is(html.dark, html[data-theme="dark"]) #wholediv .list table td { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .list table th.green, :is(html.dark, html[data-theme="dark"]) #wholediv .list table td.green { color: #008a1b !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .list table th.red, :is(html.dark, html[data-theme="dark"]) #wholediv .list table td.red { color: #e51e1e !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .box_hd .content table td, :is(html.dark, html[data-theme="dark"]) #wholediv .box_hd .content table th { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .box_hd .content table th span { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .box_hd .content table .head_tb th { color: var(--invest3-text-muted) !important; border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .btn-white, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block .dashboard-block-title .tool ul li.assets a.btn-white, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block .dashboard-block-title .tool ul li.table a.btn-white { color: var(--invest3-text) !important; background: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .btn-white.current, :is(html.dark, html[data-theme="dark"]) #wholediv .btn-white:hover, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block .dashboard-block-title .tool ul li.assets a.btn-white.current, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block .dashboard-block-title .tool ul li.table a.btn-white.current, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block .dashboard-block-title .tool ul li.assets a.btn-white:hover, :is(html.dark, html[data-theme="dark"]) #wholediv .dashboard-column .dashboard-block .dashboard-block-title .tool ul li.table a.btn-white:hover { color: var(--invest3-primary) !important; border-color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .change_acon { background: var(--invest3-card) !important; } /* Header: language / account picker (Quick Links panel: see Investor home block above) */ :is(html.dark, html[data-theme="dark"]) #wholediv div.lang-switch { background: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv div.lang-opts { background: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border); } :is(html.dark, html[data-theme="dark"]) #wholediv div.lang-opts .text a { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv div.lang-opts .text a:first-child { border-bottom-color: var(--invest3-card-border) !important; } /* * Ghost / outline buttons: redesign uses #FFF + #346BAD; invest3 uses link + primary border * (settings tables, header, footer, order bar, etc.). */ html.dark #wholediv a.btn-clear-blue, html.dark #wholediv button.btn-clear-blue { background-color: transparent !important; color: var(--invest3-link) !important; border-color: var(--invest3-primary) !important; } html.dark #wholediv a.btn-clear-blue:hover, html.dark #wholediv a.btn-clear-blue:focus-visible, html.dark #wholediv button.btn-clear-blue:hover, html.dark #wholediv button.btn-clear-blue:focus-visible { color: var(--invest3-link-hover) !important; border-color: var(--invest3-primary-hover) !important; background-color: var(--invest3-primary-tint-16) !important; } /* * Solid primary (APPLY, SUBSCRIBE, watchlist SUBMIT, etc.): link-blue fill + inverted label (#101A21 / ds-elev-01). */ html.dark #wholediv a.btn.btn-primary, html.dark #wholediv button.btn.btn-primary, html.dark #wholediv input.btn.btn-primary, html[data-theme="dark"] #wholediv a.btn.btn-primary, html[data-theme="dark"] #wholediv button.btn.btn-primary, html[data-theme="dark"] #wholediv input.btn.btn-primary { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; background-image: none !important; border: 1px solid var(--invest3-primary) !important; text-shadow: none !important; box-shadow: none !important; } html.dark #wholediv a.btn.btn-primary:hover, html.dark #wholediv a.btn.btn-primary:focus-visible, html.dark #wholediv button.btn.btn-primary:hover, html.dark #wholediv button.btn.btn-primary:focus-visible, html.dark #wholediv input.btn.btn-primary:hover, html.dark #wholediv input.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv a.btn.btn-primary:hover, html[data-theme="dark"] #wholediv a.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv button.btn.btn-primary:hover, html[data-theme="dark"] #wholediv button.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv input.btn.btn-primary:hover, html[data-theme="dark"] #wholediv input.btn.btn-primary:focus-visible { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; background-image: none !important; } html.dark #wholediv a.btn.btn-primary span, html.dark #wholediv button.btn.btn-primary span, html[data-theme="dark"] #wholediv a.btn.btn-primary span, html[data-theme="dark"] #wholediv button.btn.btn-primary span { color: inherit !important; } /* Footer inside shell */ :is(html.dark, html[data-theme="dark"]) #wholediv .footer { border-top-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .footer a { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .footer ul li .service { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .footer span { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .footer1 { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; } /* Profile / settings: .set_form + .my_info (redesign.css #FFF, #DBE6F4 headers; orderbar #000 text) */ html.dark #wholediv .my_info, html.dark #wholediv .set_form { background: var(--invest3-card) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35); color: var(--invest3-text) !important; } /* * Personal Profile (#contact-wrapper): h1 is not under .template_t .main, so redesign’s #2A528E * stays on the dark canvas; tab row spans are #FFF in redesign — align to title-bar text token. * #contact-update uses #FFFAEA — pair with dark text and form controls when editing. */ html.dark #wholediv .settings > .title h1, html[data-theme="dark"] #wholediv .settings > .title h1 { color: var(--invest3-text) !important; } /* Title-row primary CTA (e.g. account status "Open a New Account"): plus.svg is white fill — match inverted CTA text (elev-01) on link-blue. */ html.dark #wholediv #maincontent .settings > .title ul.right button.btn.btn-primary img[src*="plus.svg"], html.dark #wholediv .settings > .title ul.right button.btn.btn-primary img[src*="plus.svg"], html.dark #maincontent .settings > .title ul.right button.btn.btn-primary img[src*="plus.svg"], html[data-theme="dark"] #wholediv #maincontent .settings > .title ul.right button.btn.btn-primary img[src*="plus.svg"], html[data-theme="dark"] #wholediv .settings > .title ul.right button.btn.btn-primary img[src*="plus.svg"], html[data-theme="dark"] #maincontent .settings > .title ul.right button.btn.btn-primary img[src*="plus.svg"] { filter: brightness(0); } html.dark #wholediv .settings .title_list ul li a:not(.btn), html.dark #wholediv .settings .title_list ul li a:not(.btn) span { color: var(--invest3-text) !important; } /* * Profile applications: Margin / Options upgrade, W-8BEN, CMA (#margin_upgrade + margin.css, w8ben.css, cma.js), * IRA Beneficiaries (.settings .margin-wrapper + beneficiary.css). Content uses legacy grays / #fff wells. */ :is(html.dark, html[data-theme="dark"]) #wholediv .settings .margin-wrapper { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .settings .margin-wrapper h3, :is(html.dark, html[data-theme="dark"]) #wholediv .settings .margin-wrapper h4, :is(html.dark, html[data-theme="dark"]) #wholediv .settings .margin-wrapper p, :is(html.dark, html[data-theme="dark"]) #wholediv .settings .margin-wrapper b { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv .settings .margin-wrapper a:not(.btn) { color: var(--invest3-link) !important; } /* * mysettings-linkaccount.htm: Help Center link must not use .stdlink — #maincontent a.stdlink is handled by * script.js (headerChange / in-shell navigation). .linkaccount-help-link is CSS-only; tokens track light/dark. */ #wholediv #linkaccount a.linkaccount-help-link { color: var(--invest3-link) !important; } #wholediv #linkaccount a.linkaccount-help-link:hover, #wholediv #linkaccount a.linkaccount-help-link:focus-visible { color: var(--invest3-link-hover) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #feip-warning, :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #feip-required { background-color: var(--invest3-warn-bg) !important; color: var(--invest3-text) !important; border-left-color: var(--invest3-primary) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #feip-warning img, :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #feip-required img { filter: brightness(0) invert(1); opacity: 0.88; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #status-wrapper { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #status-wrapper .status_error { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #status-wrapper .checkbox label { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #status-wrapper .checkbox input[type="checkbox"] { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #status-wrapper .checkbox input[type="checkbox"]:checked { background-color: var(--invest3-primary) !important; border-color: var(--invest3-primary) !important; } /* Options upgrade: e-sign agreement checkbox on dark row — brighter frame + saturated checked state. */ :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form #status-wrapper .checkbox input[type="checkbox"] { background-color: var(--invest3-ds-elev-04) !important; border-color: var(--invest3-ds-link-primary) !important; border-width: 2px !important; box-shadow: 0 0 0 1px var(--invest3-primary-tint-20) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form #status-wrapper .checkbox input[type="checkbox"]:checked { background-color: var(--invest3-ds-link-primary) !important; border-color: var(--invest3-ds-link-secondary) !important; box-shadow: 0 0 0 2px var(--invest3-primary-tint-42) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #resource-wrapper .title { border-bottom-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #resource-wrapper h4 { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #resource-wrapper a:not(.btn) { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .option-step.step-loading, :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .w8ben-step.step-loading, :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .cma-step.step-loading { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form label, :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form small { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form select, :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form input:not([type="checkbox"]):not([type="radio"]), :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form textarea { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #pageerror, :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma .app-wrapper.pageerror { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .form-group.has-error { background-color: var(--invest3-error-bg) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .form-group + hr, :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade #options-form hr { border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .level-table .level > *:first-child { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .level-table .level div:not(:nth-last-of-type(2)) { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .level-table .level:not(.level-def) { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .level-table .level.active { background-color: var(--invest3-warn-bg) !important; border-color: var(--invest3-primary-tint-42) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .level-table .level:not(.level-def) span { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .level-table .level.active label.selected-item { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .sign-placeholder .box { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .sign-placeholder .box label { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #margin_upgrade .form-button #btn-margin[disabled] { background-color: var(--invest3-ds-elev-04) !important; border-color: var(--invest3-ds-elev-04) !important; color: var(--invest3-text-muted) !important; } /* W-8BEN */ :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben label { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben input:not([type="checkbox"]):not([type="radio"]), :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben textarea, :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben select { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben input[disabled] { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben hr { border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben .address_part { background-color: var(--invest3-warn-bg) !important; border: 1px solid var(--invest3-card-border) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben .form-group.has-error { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben .form-group.has-error textarea, :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben .form-group.has-error select, :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben .form-group.has-error input { border-color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-w8ben #esigned-wrapper div { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #w8Modal table { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #w8Modal table label { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #w8Modal table hr { border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #w8Modal table.part1 td div { color: var(--invest3-text) !important; } /* CMA */ :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma .form-group label { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma input:not([type="checkbox"]):not([type="radio"]), :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma select, :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma textarea { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma input[disabled] { color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma hr { border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma .form-group.has-error { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma .shadow-box { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #form-cma .tooltiptext { background-color: var(--invest3-card) !important; border-color: var(--invest3-link) !important; color: var(--invest3-text) !important; } /* CMA review + cancel confirmation modals (cma_preview.php; base .modal-content is #fefefe in cma.css) */ :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal.modal, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal.modal { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .modal-content, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .modal-content { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .modal-body h2, :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .modal-content p { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .modal-body h2 { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .close, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .close { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .close:hover, :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .close:focus, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .close:hover, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .close:focus { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .btn.btn-clear-grey, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .btn.btn-clear-grey { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .btn.btn-clear-grey:hover, :is(html.dark, html[data-theme="dark"]) #wholediv #cancelModal .btn.btn-clear-grey:focus-visible, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .btn.btn-clear-grey:hover, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .btn.btn-clear-grey:focus-visible { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .modal-body td, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .modal-body b, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .modal-body p { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal table label { color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .modal-body hr { border-top-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .agreement-text, :is(html.dark, html[data-theme="dark"]) #wholediv #cmaModal .agreement-text strong { color: var(--invest3-text) !important; } /* IRA Beneficiaries */ :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-header, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-subheader, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-cat-header { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .btn-link { color: var(--invest3-link) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-cat hr { border-top-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-beneficiary { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-tab thead { background-color: var(--invest3-title-bar) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-tab tr { border-bottom-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-tab th, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-tab td { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form #ben-agreement-content { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form #ben-agreement-content h5 { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .ben-error, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form #ben-app-msg { color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form input.error, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form select.error { border-color: var(--invest3-accent) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form #ben-import-note, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form #ben-foot-note { border-top-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form input:not([type="checkbox"]):not([type="radio"]), :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form select, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form textarea { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form label { color: var(--invest3-text) !important; } :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .total, :is(html.dark, html[data-theme="dark"]) #wholediv #ben-form .total-number { color: var(--invest3-text) !important; } html.dark #wholediv #contact-wrapper #account-info td, html.dark #wholediv #contact-wrapper #contact-info td, html.dark #wholediv #contact-wrapper #contact-info th, html.dark #wholediv #contact-wrapper .my_info table tr th, html.dark #wholediv #contact-wrapper .my_info table tr td, html.dark #wholediv #contact-wrapper .my_info label { color: var(--invest3-text) !important; } html.dark #wholediv #contact-wrapper .my_info table tr th { background: var(--invest3-title-bar) !important; } html.dark #wholediv #contact-wrapper .my_info tr.yellow_bg td { background: var(--invest3-warn-bg) !important; color: var(--invest3-text) !important; } html.dark #wholediv #contact-wrapper .my_info { border-left-color: var(--invest3-card-border) !important; } html.dark #wholediv #contact-wrapper .my_info table tr td.left, html.dark #wholediv #contact-wrapper .my_info table tr th.left, html.dark #wholediv #contact-wrapper .my_info table tr td.right, html.dark #wholediv #contact-wrapper .my_info table tr.border_grey td { border-top-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #wholediv #contact-wrapper #contact-update, html.dark #wholediv #contact-wrapper #contact-update table, html.dark #wholediv #contact-wrapper .security_pin { background: var(--invest3-warn-bg) !important; color: var(--invest3-text) !important; } html.dark #wholediv #contact-wrapper #contact-update label, html.dark #wholediv #contact-wrapper #contact-update td, html.dark #wholediv #contact-wrapper #contact-update th, html.dark #wholediv #contact-wrapper #contact-update strong { color: var(--invest3-text) !important; } html.dark #wholediv #contact-wrapper #contact-update tr.has-error label { color: var(--invest3-accent) !important; } html.dark #wholediv #contact-wrapper #contact-update input:not([type="checkbox"]):not([type="radio"]), html.dark #wholediv #contact-wrapper #contact-update select, html.dark #wholediv #contact-wrapper #contact-update textarea { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv #contact-wrapper #contact-update .intl-tel-input input[type="tel"] { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; } html.dark #wholediv .set_form_line { border-right-color: var(--invest3-card-border) !important; } html.dark #wholediv .set_form div.left_side div.left_bor { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; } html.dark #wholediv .set_form table tr td, html.dark #wholediv .set_form table tr th { color: var(--invest3-text) !important; border-top-color: var(--invest3-card-border) !important; } /* mysettings-accountstatus.htm #cma-section: legacy ; amount on same baseline as 12px note */ #wholediv #cma-section font { display: inline; vertical-align: baseline; line-height: 1.45; } #wholediv #cma-section .cma-min-amt { display: inline; vertical-align: baseline; line-height: inherit; font-size: inherit; font-weight: inherit; color: var(--invest3-text); } html.dark #wholediv #cma-section font, html[data-theme="dark"] #wholediv #cma-section font { color: var(--invest3-text-muted) !important; } html.dark #wholediv #cma-section .cma-min-amt, html[data-theme="dark"] #wholediv #cma-section .cma-min-amt { color: var(--invest3-text) !important; } /* Plain text links in settings tables (e.g. Securities Lending) — td color was masking link blue */ html.dark #wholediv .set_form table tr td a:not(.btn), html.dark #wholediv .set_form table tr th a:not(.btn), html[data-theme="dark"] #wholediv .set_form table tr td a:not(.btn), html[data-theme="dark"] #wholediv .set_form table tr th a:not(.btn) { color: var(--invest3-link) !important; } html.dark #wholediv .set_form table tr td a:not(.btn):hover, html.dark #wholediv .set_form table tr td a:not(.btn):focus-visible, html.dark #wholediv .set_form table tr th a:not(.btn):hover, html.dark #wholediv .set_form table tr th a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv .set_form table tr td a:not(.btn):hover, html[data-theme="dark"] #wholediv .set_form table tr td a:not(.btn):focus-visible, html[data-theme="dark"] #wholediv .set_form table tr th a:not(.btn):hover, html[data-theme="dark"] #wholediv .set_form table tr th a:not(.btn):focus-visible { color: var(--invest3-link-hover) !important; } /* Section row headers inside settings forms: neutral elev-03 (distinct from .title_list tab bar = tint-blue). */ html.dark #wholediv .set_form div table tr th, html.dark #wholediv .set_form div table .th_bor th, html.dark #wholediv .set_form .header_bor th, html[data-theme="dark"] #wholediv .set_form div table tr th, html[data-theme="dark"] #wholediv .set_form div table .th_bor th, html[data-theme="dark"] #wholediv .set_form .header_bor th { background: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; opacity: 1 !important; } html.dark #wholediv .header_bor th, html[data-theme="dark"] #wholediv .header_bor th { background: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; opacity: 1 !important; } html.dark #wholediv .set_form div table .th_bor th, html[data-theme="dark"] #wholediv .set_form div table .th_bor th { border-top-color: var(--invest3-card-border) !important; } /* * Edit Account Nicknames / link accounts (table.link_aut): redesign + orderbar use #DBE6F4 / #e5e4e4 * with #003060 / #386199 — low contrast when .set_form card is already dark. */ html.dark #wholediv .settings .link_aut tr.header_total th { background: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; opacity: 1 !important; border-top-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .settings .link_aut tr.header th { background: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; } html.dark #wholediv .settings .link_aut tr.header_total th span { color: var(--invest3-text) !important; } html.dark #wholediv .settings .link_aut tr td { color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .set_form table tr.bor_white td, html.dark #wholediv .set_form table tr.bor_white th { border-top-color: var(--invest3-card) !important; } html.dark #wholediv .set_form table tr.bor_yellow td { border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv .set_form table tr.edit_bg td { background: var(--invest3-warn-bg) !important; color: var(--invest3-text) !important; } html.dark #wholediv .set_form table .center td { color: var(--invest3-text) !important; } html.dark #wholediv .set_form table td span[style*="666666"] { color: var(--invest3-text-muted) !important; } html.dark #wholediv .set_form #prof_div { color: var(--invest3-text-muted) !important; } /* * Settings rows (.set_form under .settings, and .my_info): all button-like controls * inside .set_form_line (orderbar sprites, bootstrap shadows, td text color). */ html.dark #wholediv .set_form_line a.btn, html.dark #wholediv .set_form_line button.btn, html.dark #wholediv .set_form_line input.btn { text-shadow: none !important; box-shadow: none !important; } html.dark #wholediv .set_form_line table a.btn { background-image: none !important; width: auto !important; min-width: 0 !important; float: none !important; } /* redesign.css floats EDIT right in settings tables; float:none above removed it and broke column alignment */ html.dark #wholediv .set_form_line .left_side a.edit.btn.btn-clear-blue, html.dark #wholediv .set_form_line .right_side button.edit.btn.btn-clear-blue, html[data-theme="dark"] #wholediv .set_form_line .left_side a.edit.btn.btn-clear-blue, html[data-theme="dark"] #wholediv .set_form_line .right_side button.edit.btn.btn-clear-blue { float: right !important; } html.dark #wholediv .set_form_line a.btn.btn-primary, html.dark #wholediv .set_form_line button.btn.btn-primary, html.dark #wholediv .set_form_line input.btn.btn-primary, html[data-theme="dark"] #wholediv .set_form_line a.btn.btn-primary, html[data-theme="dark"] #wholediv .set_form_line button.btn.btn-primary, html[data-theme="dark"] #wholediv .set_form_line input.btn.btn-primary { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; background-image: none !important; border: 1px solid var(--invest3-primary) !important; } html.dark #wholediv .set_form_line a.btn.btn-primary:hover, html.dark #wholediv .set_form_line a.btn.btn-primary:focus-visible, html.dark #wholediv .set_form_line button.btn.btn-primary:hover, html.dark #wholediv .set_form_line button.btn.btn-primary:focus-visible, html.dark #wholediv .set_form_line input.btn.btn-primary:hover, html.dark #wholediv .set_form_line input.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv .set_form_line a.btn.btn-primary:hover, html[data-theme="dark"] #wholediv .set_form_line a.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv .set_form_line button.btn.btn-primary:hover, html[data-theme="dark"] #wholediv .set_form_line button.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv .set_form_line input.btn.btn-primary:hover, html[data-theme="dark"] #wholediv .set_form_line input.btn.btn-primary:focus-visible { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; background-image: none !important; } html.dark #wholediv .set_form_line a.btn.btn-primary span, html.dark #wholediv .set_form_line button.btn.btn-primary span, html[data-theme="dark"] #wholediv .set_form_line a.btn.btn-primary span, html[data-theme="dark"] #wholediv .set_form_line button.btn.btn-primary span { color: inherit !important; } html.dark #wholediv .set_form_line a.btn-clear-blue, html.dark #wholediv .set_form_line button.btn-clear-blue { background-color: transparent !important; background-image: none !important; color: var(--invest3-link) !important; border: 1px solid var(--invest3-primary) !important; } html.dark #wholediv .set_form_line a.btn-clear-blue:hover, html.dark #wholediv .set_form_line a.btn-clear-blue:focus-visible, html.dark #wholediv .set_form_line button.btn-clear-blue:hover, html.dark #wholediv .set_form_line button.btn-clear-blue:focus-visible { color: var(--invest3-link-hover) !important; border-color: var(--invest3-primary-hover) !important; background-color: var(--invest3-primary-tint-16) !important; } html.dark #wholediv .set_form_line a.btn-clear-grey, html.dark #wholediv .set_form_line button.btn-clear-grey { background-color: transparent !important; background-image: none !important; color: var(--invest3-text-muted) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv .set_form_line a.btn-clear-grey:hover, html.dark #wholediv .set_form_line a.btn-clear-grey:focus-visible, html.dark #wholediv .set_form_line button.btn-clear-grey:hover, html.dark #wholediv .set_form_line button.btn-clear-grey:focus-visible { color: var(--invest3-text) !important; border-color: var(--invest3-text-muted) !important; background-color: var(--invest3-white-06) !important; } html.dark #wholediv .set_form_line .btn.btn-clear.btn-link, html.dark #wholediv .set_form_line .btn.btn-link { background: transparent !important; background-image: none !important; border-color: transparent !important; color: var(--invest3-link) !important; box-shadow: none !important; } html.dark #wholediv .set_form_line .btn.btn-clear.btn-link:hover, html.dark #wholediv .set_form_line .btn.btn-clear.btn-link:focus-visible, html.dark #wholediv .set_form_line .btn.btn-link:hover, html.dark #wholediv .set_form_line .btn.btn-link:focus-visible { color: var(--invest3-link-hover) !important; text-decoration: underline !important; } /* * FCGI body is injected into #maincontent (sibling of #headcontent). Two-ID selectors beat * .template_t .main a and .set_form table td inheritance for APPLY / SUBSCRIBE / watchlist CTAs / etc. */ html.dark #wholediv #maincontent a.btn.btn-primary, html.dark #wholediv #maincontent button.btn.btn-primary, html.dark #wholediv #maincontent input.btn.btn-primary, html[data-theme="dark"] #wholediv #maincontent a.btn.btn-primary, html[data-theme="dark"] #wholediv #maincontent button.btn.btn-primary, html[data-theme="dark"] #wholediv #maincontent input.btn.btn-primary { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; background-image: none !important; border: 1px solid var(--invest3-primary) !important; text-shadow: none !important; box-shadow: none !important; } html.dark #wholediv #maincontent a.btn.btn-primary:hover, html.dark #wholediv #maincontent a.btn.btn-primary:focus-visible, html.dark #wholediv #maincontent button.btn.btn-primary:hover, html.dark #wholediv #maincontent button.btn.btn-primary:focus-visible, html.dark #wholediv #maincontent input.btn.btn-primary:hover, html.dark #wholediv #maincontent input.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv #maincontent a.btn.btn-primary:hover, html[data-theme="dark"] #wholediv #maincontent a.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv #maincontent button.btn.btn-primary:hover, html[data-theme="dark"] #wholediv #maincontent button.btn.btn-primary:focus-visible, html[data-theme="dark"] #wholediv #maincontent input.btn.btn-primary:hover, html[data-theme="dark"] #wholediv #maincontent input.btn.btn-primary:focus-visible { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; background-image: none !important; } html.dark #wholediv #maincontent a.btn.btn-primary span, html.dark #wholediv #maincontent button.btn.btn-primary span, html[data-theme="dark"] #wholediv #maincontent a.btn.btn-primary span, html[data-theme="dark"] #wholediv #maincontent button.btn.btn-primary span { color: inherit !important; } html.dark #wholediv #maincontent a.btn-clear-blue, html.dark #wholediv #maincontent button.btn-clear-blue { background-color: transparent !important; background-image: none !important; color: var(--invest3-link) !important; border: 1px solid var(--invest3-primary) !important; } html.dark #wholediv #maincontent a.btn-clear-blue:hover, html.dark #wholediv #maincontent a.btn-clear-blue:focus-visible, html.dark #wholediv #maincontent button.btn-clear-blue:hover, html.dark #wholediv #maincontent button.btn-clear-blue:focus-visible { color: var(--invest3-link-hover) !important; border-color: var(--invest3-primary-hover) !important; background-color: var(--invest3-primary-tint-16) !important; } /* * Deposit/Transfer (fundmgmt): account dropdown, ACAT shell (#acats-new), transfer entry cards */ /* fundmgmt home + ACH sentinel: #errMsg (was inline #FF0000 / red) */ #wholediv #maincontent #errMsg { color: var(--invest3-error-text); } html.dark #wholediv #maincontent #errMsg, html[data-theme="dark"] #wholediv #maincontent #errMsg { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw .m, html[data-theme="dark"] #wholediv .deposit_withdraw .m { border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv .deposit_withdraw .title h1, html.dark #wholediv .deposit_withdraw > .title h1, html.dark #wholediv .deposit_withdraw h1.col-toggle, html.dark #wholediv .deposit_withdraw h1.col-toggle.open, html.dark #wholediv .deposit_withdraw h2, html.dark #wholediv .deposit_withdraw h3:not(.accordion-title), html.dark #wholediv .deposit_withdraw h4, html.dark #wholediv .deposit_withdraw .title_list_nav h6, html.dark #wholediv .deposit_withdraw .title_list h6, html[data-theme="dark"] #wholediv .deposit_withdraw .title h1, html[data-theme="dark"] #wholediv .deposit_withdraw > .title h1, html[data-theme="dark"] #wholediv .deposit_withdraw h1.col-toggle, html[data-theme="dark"] #wholediv .deposit_withdraw h1.col-toggle.open, html[data-theme="dark"] #wholediv .deposit_withdraw h2, html[data-theme="dark"] #wholediv .deposit_withdraw h3:not(.accordion-title), html[data-theme="dark"] #wholediv .deposit_withdraw h4, html[data-theme="dark"] #wholediv .deposit_withdraw .title_list_nav h6, html[data-theme="dark"] #wholediv .deposit_withdraw .title_list h6 { color: var(--invest3-text) !important; } /* * Fundmgmt: DataTables table.display — recurring (#recurring_transfers), transfer history, etc. * (datatables/style.css uses #F7F7F7 headers, #1A5795 text, #DDDCDC row lines.) */ html.dark #wholediv .deposit_withdraw:not(.ach_profile) .left_12 .maindiv, html[data-theme="dark"] #wholediv .deposit_withdraw:not(.ach_profile) .left_12 .maindiv { background-color: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; border-radius: 4px; box-shadow: 0 2px 12px var(--invest3-shadow-35); color: var(--invest3-text-muted); } html.dark #wholediv .deposit_withdraw table.display, html[data-theme="dark"] #wholediv .deposit_withdraw table.display { background-color: transparent !important; } html.dark #wholediv .deposit_withdraw table.display thead th, html[data-theme="dark"] #wholediv .deposit_withdraw table.display thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; border-right-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw table.display thead th.view, html[data-theme="dark"] #wholediv .deposit_withdraw table.display thead th.view { border-right-color: transparent !important; } html.dark #wholediv .deposit_withdraw table.display tbody td, html[data-theme="dark"] #wholediv .deposit_withdraw table.display tbody td { color: var(--invest3-text-muted) !important; border-bottom-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv .deposit_withdraw table.display tbody tr:hover > td, html[data-theme="dark"] #wholediv .deposit_withdraw table.display tbody tr:hover > td { background-color: var(--invest3-row-hover) !important; color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw table.display td.dataTables_empty, html[data-theme="dark"] #wholediv .deposit_withdraw table.display td.dataTables_empty { color: var(--invest3-text-muted) !important; background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .deposit_withdraw table.display tbody td a, html[data-theme="dark"] #wholediv .deposit_withdraw table.display tbody td a { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw table.display tbody td a:hover, html.dark #wholediv .deposit_withdraw table.display tbody td a:focus-visible, html[data-theme="dark"] #wholediv .deposit_withdraw table.display tbody td a:hover, html[data-theme="dark"] #wholediv .deposit_withdraw table.display tbody td a:focus-visible { color: var(--invest3-link-hover) !important; } /* * Symbol research: stocks/ETFs (stocks-etfs.php + tabs) and mutual funds (fund_symbol.php + quote|charts). * Root is class="tw symbol-research" — utilities may be direct children, so use .symbol-research :is(...) not .symbol-research .tw :is(...). */ html.dark #wholediv .symbol-research h1, html.dark #maincontent .symbol-research h1, html[data-theme="dark"] #wholediv .symbol-research h1, html[data-theme="dark"] #maincontent .symbol-research h1 { color: var(--invest3-text) !important; } html.dark #wholediv .symbol-research :is(.bg-gray-50), html.dark #maincontent .symbol-research :is(.bg-gray-50), html[data-theme="dark"] #wholediv .symbol-research :is(.bg-gray-50), html[data-theme="dark"] #maincontent .symbol-research :is(.bg-gray-50) { background-color: var(--invest3-card) !important; } html.dark #wholediv .symbol-research :is(.border-border-grey), html.dark #maincontent .symbol-research :is(.border-border-grey), html[data-theme="dark"] #wholediv .symbol-research :is(.border-border-grey), html[data-theme="dark"] #maincontent .symbol-research :is(.border-border-grey) { border-color: var(--invest3-card-border) !important; } html.dark #wholediv .symbol-research :is(.text-text-primary), html.dark #maincontent .symbol-research :is(.text-text-primary), html[data-theme="dark"] #wholediv .symbol-research :is(.text-text-primary), html[data-theme="dark"] #maincontent .symbol-research :is(.text-text-primary) { color: var(--invest3-text) !important; } html.dark #wholediv .symbol-research :is(.text-text-secondary), html.dark #maincontent .symbol-research :is(.text-text-secondary), html[data-theme="dark"] #wholediv .symbol-research :is(.text-text-secondary), html[data-theme="dark"] #maincontent .symbol-research :is(.text-text-secondary) { color: var(--invest3-text-secondary) !important; } html.dark #wholediv .symbol-research :is(.text-accent-blue), html.dark #maincontent .symbol-research :is(.text-accent-blue), html[data-theme="dark"] #wholediv .symbol-research :is(.text-accent-blue), html[data-theme="dark"] #maincontent .symbol-research :is(.text-accent-blue) { color: var(--invest3-link) !important; } html.dark #wholediv .symbol-research :is(.bg-white), html.dark #maincontent .symbol-research :is(.bg-white), html[data-theme="dark"] #wholediv .symbol-research :is(.bg-white), html[data-theme="dark"] #maincontent .symbol-research :is(.bg-white) { background-color: var(--invest3-card) !important; } html.dark #wholediv .symbol-research img.size-12.rounded-full.bg-white, html.dark #maincontent .symbol-research img.size-12.rounded-full.bg-white, html[data-theme="dark"] #wholediv .symbol-research img.size-12.rounded-full.bg-white, html[data-theme="dark"] #maincontent .symbol-research img.size-12.rounded-full.bg-white { filter: brightness(1.2) contrast(0.85); } html.dark #wholediv .symbol-research nav, html.dark #maincontent .symbol-research nav, html[data-theme="dark"] #wholediv .symbol-research nav, html[data-theme="dark"] #maincontent .symbol-research nav { border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .symbol-research div.border-b-0.bg-white, html.dark #maincontent .symbol-research div.border-b-0.bg-white, html[data-theme="dark"] #wholediv .symbol-research div.border-b-0.bg-white, html[data-theme="dark"] #maincontent .symbol-research div.border-b-0.bg-white { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .symbol-research :is(.border-\[\#d3dce6\]), html.dark #maincontent .symbol-research :is(.border-\[\#d3dce6\]), html[data-theme="dark"] #wholediv .symbol-research :is(.border-\[\#d3dce6\]), html[data-theme="dark"] #maincontent .symbol-research :is(.border-\[\#d3dce6\]) { border-color: var(--invest3-card-border) !important; } html.dark #wholediv .symbol-research :is(.text-\[\#454545\]), html.dark #maincontent .symbol-research :is(.text-\[\#454545\]), html[data-theme="dark"] #wholediv .symbol-research :is(.text-\[\#454545\]), html[data-theme="dark"] #maincontent .symbol-research :is(.text-\[\#454545\]) { color: var(--invest3-text) !important; } html.dark #wholediv .symbol-research #id-mstar-sal, html.dark #maincontent .symbol-research #id-mstar-sal, html[data-theme="dark"] #wholediv .symbol-research #id-mstar-sal, html[data-theme="dark"] #maincontent .symbol-research #id-mstar-sal { filter: invert(1) hue-rotate(180deg) !important; -webkit-filter: invert(1) hue-rotate(180deg) !important; } html.dark #wholediv .symbol-research #chart iframe, html.dark #maincontent .symbol-research #chart iframe, html[data-theme="dark"] #wholediv .symbol-research #chart iframe, html[data-theme="dark"] #maincontent .symbol-research #chart iframe { filter: invert(1) hue-rotate(180deg) !important; -webkit-filter: invert(1) hue-rotate(180deg) !important; } /* Stocks/ETFs overview quote: expand/collapse bar (stocks-etfs.php quote-box-template) */ html.dark #wholediv .symbol-research button:is(.bg-gray-200), html.dark #maincontent .symbol-research button:is(.bg-gray-200), html[data-theme="dark"] #wholediv .symbol-research button:is(.bg-gray-200), html[data-theme="dark"] #maincontent .symbol-research button:is(.bg-gray-200) { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; } html.dark #wholediv .symbol-research button:is(.bg-gray-200):hover, html.dark #maincontent .symbol-research button:is(.bg-gray-200):hover, html[data-theme="dark"] #wholediv .symbol-research button:is(.bg-gray-200):hover, html[data-theme="dark"] #maincontent .symbol-research button:is(.bg-gray-200):hover { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv .symbol-research button:is(.bg-gray-200):active, html.dark #maincontent .symbol-research button:is(.bg-gray-200):active, html[data-theme="dark"] #wholediv .symbol-research button:is(.bg-gray-200):active, html[data-theme="dark"] #maincontent .symbol-research button:is(.bg-gray-200):active { background-color: var(--invest3-ds-elev-04) !important; } /* * Mutual funds list (researchtools/mutual-funds fund_list.php): .mutualfund.tw + #tbl-res-mflist DataTables. * Fixes white .set_form search bar, tr.even white stripes, .set_form thead sort blues, length select + .ed2 footer. */ html.dark #wholediv .mutualfund h1, html.dark #maincontent .mutualfund h1, html[data-theme="dark"] #wholediv .mutualfund h1, html[data-theme="dark"] #maincontent .mutualfund h1 { color: var(--invest3-text) !important; } html.dark #wholediv .mutualfund .set_form, html.dark #maincontent .mutualfund .set_form, html[data-theme="dark"] #wholediv .mutualfund .set_form, html[data-theme="dark"] #maincontent .mutualfund .set_form { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv .mutualfund .searchBar, html.dark #maincontent .mutualfund .searchBar, html[data-theme="dark"] #wholediv .mutualfund .searchBar, html[data-theme="dark"] #maincontent .mutualfund .searchBar { color: var(--invest3-text) !important; } /* fundmgt.css / redesign.css use .mutualfund .set_form .searchBar (#eaeaea + bg_greyhead.gif) — higher specificity */ html.dark #wholediv .mutualfund .set_form .searchBar, html.dark #maincontent .mutualfund .set_form .searchBar, html[data-theme="dark"] #wholediv .mutualfund .set_form .searchBar, html[data-theme="dark"] #maincontent .mutualfund .set_form .searchBar { background: var(--invest3-row-alt) !important; background-color: var(--invest3-row-alt) !important; background-image: none !important; color: var(--invest3-text) !important; } html.dark #wholediv .mutualfund .searchBar input[type="text"], html.dark #wholediv .mutualfund .searchBar input[type="password"], html.dark #maincontent .mutualfund .searchBar input[type="text"], html.dark #maincontent .mutualfund .searchBar input[type="password"], html[data-theme="dark"] #wholediv .mutualfund .searchBar input[type="text"], html[data-theme="dark"] #wholediv .mutualfund .searchBar input[type="password"], html[data-theme="dark"] #maincontent .mutualfund .searchBar input[type="text"], html[data-theme="dark"] #maincontent .mutualfund .searchBar input[type="password"] { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mutualfund #fundFamily, html.dark #maincontent .mutualfund #fundFamily, html[data-theme="dark"] #wholediv .mutualfund #fundFamily, html[data-theme="dark"] #maincontent .mutualfund #fundFamily { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mutualfund .searchBar a.stdlink, html.dark #maincontent .mutualfund .searchBar a.stdlink, html[data-theme="dark"] #wholediv .mutualfund .searchBar a.stdlink, html[data-theme="dark"] #maincontent .mutualfund .searchBar a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .mutualfund .searchBar a.stdlink:hover, html.dark #wholediv .mutualfund .searchBar a.stdlink:focus-visible, html.dark #maincontent .mutualfund .searchBar a.stdlink:hover, html.dark #maincontent .mutualfund .searchBar a.stdlink:focus-visible, html[data-theme="dark"] #wholediv .mutualfund .searchBar a.stdlink:hover, html[data-theme="dark"] #wholediv .mutualfund .searchBar a.stdlink:focus-visible, html[data-theme="dark"] #maincontent .mutualfund .searchBar a.stdlink:hover, html[data-theme="dark"] #maincontent .mutualfund .searchBar a.stdlink:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .mutualfund .fund_list, html.dark #maincontent .mutualfund .fund_list, html[data-theme="dark"] #wholediv .mutualfund .fund_list, html[data-theme="dark"] #maincontent .mutualfund .fund_list { color: var(--invest3-text) !important; } html.dark #wholediv .mutualfund .fund_list a, html.dark #maincontent .mutualfund .fund_list a, html[data-theme="dark"] #wholediv .mutualfund .fund_list a, html[data-theme="dark"] #maincontent .mutualfund .fund_list a { color: var(--invest3-link) !important; } html.dark #wholediv .mutualfund .fund_list a:hover, html.dark #wholediv .mutualfund .fund_list a:focus-visible, html.dark #maincontent .mutualfund .fund_list a:hover, html.dark #maincontent .mutualfund .fund_list a:focus-visible, html[data-theme="dark"] #wholediv .mutualfund .fund_list a:hover, html[data-theme="dark"] #wholediv .mutualfund .fund_list a:focus-visible, html[data-theme="dark"] #maincontent .mutualfund .fund_list a:hover, html[data-theme="dark"] #maincontent .mutualfund .fund_list a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .mutualfund .ed2_fl > div, html.dark #maincontent .mutualfund .ed2_fl > div, html[data-theme="dark"] #wholediv .mutualfund .ed2_fl > div, html[data-theme="dark"] #maincontent .mutualfund .ed2_fl > div { background-color: transparent !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .mutualfund .ed2 .top, html.dark #wholediv .mutualfund .ed2 .bottom, html.dark #maincontent .mutualfund .ed2 .top, html.dark #maincontent .mutualfund .ed2 .bottom, html[data-theme="dark"] #wholediv .mutualfund .ed2 .top, html[data-theme="dark"] #wholediv .mutualfund .ed2 .bottom, html[data-theme="dark"] #maincontent .mutualfund .ed2 .top, html[data-theme="dark"] #maincontent .mutualfund .ed2 .bottom { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .mutualfund table.display, html.dark #maincontent .mutualfund table.display, html[data-theme="dark"] #wholediv .mutualfund table.display, html[data-theme="dark"] #maincontent .mutualfund table.display { background-color: transparent !important; } html.dark #wholediv .mutualfund table.display tr.even, html.dark #maincontent .mutualfund table.display tr.even, html[data-theme="dark"] #wholediv .mutualfund table.display tr.even, html[data-theme="dark"] #maincontent .mutualfund table.display tr.even { background-color: transparent !important; } html.dark #wholediv .mutualfund table.display thead th, html.dark #maincontent .mutualfund table.display thead th, html[data-theme="dark"] #wholediv .mutualfund table.display thead th, html[data-theme="dark"] #maincontent .mutualfund table.display thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; border-right-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .mutualfund table.display thead th.view, html.dark #maincontent .mutualfund table.display thead th.view, html[data-theme="dark"] #wholediv .mutualfund table.display thead th.view, html[data-theme="dark"] #maincontent .mutualfund table.display thead th.view { border-right-color: transparent !important; } html.dark #wholediv .mutualfund table.display thead th.sorting, html.dark #wholediv .mutualfund table.display thead th.sorting_asc, html.dark #wholediv .mutualfund table.display thead th.sorting_desc, html.dark #maincontent .mutualfund table.display thead th.sorting, html.dark #maincontent .mutualfund table.display thead th.sorting_asc, html.dark #maincontent .mutualfund table.display thead th.sorting_desc, html[data-theme="dark"] #wholediv .mutualfund table.display thead th.sorting, html[data-theme="dark"] #wholediv .mutualfund table.display thead th.sorting_asc, html[data-theme="dark"] #wholediv .mutualfund table.display thead th.sorting_desc, html[data-theme="dark"] #maincontent .mutualfund table.display thead th.sorting, html[data-theme="dark"] #maincontent .mutualfund table.display thead th.sorting_asc, html[data-theme="dark"] #maincontent .mutualfund table.display thead th.sorting_desc { background-color: var(--invest3-title-bar) !important; background-repeat: no-repeat !important; background-position: right 3px center !important; background-size: 9px !important; color: var(--invest3-link) !important; } html.dark #wholediv .mutualfund table.display thead th.sorting, html.dark #maincontent .mutualfund table.display thead th.sorting, html[data-theme="dark"] #wholediv .mutualfund table.display thead th.sorting, html[data-theme="dark"] #maincontent .mutualfund table.display thead th.sorting { background-image: url(/images/shared/sort_both.svg) !important; } html.dark #wholediv .mutualfund table.display thead th.sorting_asc, html.dark #maincontent .mutualfund table.display thead th.sorting_asc, html[data-theme="dark"] #wholediv .mutualfund table.display thead th.sorting_asc, html[data-theme="dark"] #maincontent .mutualfund table.display thead th.sorting_asc { background-image: url(/images/shared/sort_asc.svg) !important; } html.dark #wholediv .mutualfund table.display thead th.sorting_desc, html.dark #maincontent .mutualfund table.display thead th.sorting_desc, html[data-theme="dark"] #wholediv .mutualfund table.display thead th.sorting_desc, html[data-theme="dark"] #maincontent .mutualfund table.display thead th.sorting_desc { background-image: url(/images/shared/sort_desc.svg) !important; } html.dark #wholediv .mutualfund table.display tbody td, html.dark #maincontent .mutualfund table.display tbody td, html[data-theme="dark"] #wholediv .mutualfund table.display tbody td, html[data-theme="dark"] #maincontent .mutualfund table.display tbody td { color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv .mutualfund table.display tbody tr.even > td, html.dark #maincontent .mutualfund table.display tbody tr.even > td, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr.even > td, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr.even > td { background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .mutualfund table.display tbody tr.odd > td.sorting_1, html.dark #wholediv .mutualfund table.display tbody tr.odd > td.sorting_2, html.dark #wholediv .mutualfund table.display tbody tr.odd > td.sorting_3, html.dark #maincontent .mutualfund table.display tbody tr.odd > td.sorting_1, html.dark #maincontent .mutualfund table.display tbody tr.odd > td.sorting_2, html.dark #maincontent .mutualfund table.display tbody tr.odd > td.sorting_3, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr.odd > td.sorting_1, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr.odd > td.sorting_2, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr.odd > td.sorting_3, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr.odd > td.sorting_1, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr.odd > td.sorting_2, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr.odd > td.sorting_3 { background-color: var(--invest3-card) !important; } html.dark #wholediv .mutualfund table.display tbody tr.even > td.sorting_1, html.dark #wholediv .mutualfund table.display tbody tr.even > td.sorting_2, html.dark #wholediv .mutualfund table.display tbody tr.even > td.sorting_3, html.dark #maincontent .mutualfund table.display tbody tr.even > td.sorting_1, html.dark #maincontent .mutualfund table.display tbody tr.even > td.sorting_2, html.dark #maincontent .mutualfund table.display tbody tr.even > td.sorting_3, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr.even > td.sorting_1, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr.even > td.sorting_2, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr.even > td.sorting_3, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr.even > td.sorting_1, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr.even > td.sorting_2, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr.even > td.sorting_3 { background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .mutualfund table.display tbody tr:hover > td, html.dark #maincontent .mutualfund table.display tbody tr:hover > td, html[data-theme="dark"] #wholediv .mutualfund table.display tbody tr:hover > td, html[data-theme="dark"] #maincontent .mutualfund table.display tbody tr:hover > td { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv .mutualfund table.display tbody td a, html.dark #maincontent .mutualfund table.display tbody td a, html[data-theme="dark"] #wholediv .mutualfund table.display tbody td a, html[data-theme="dark"] #maincontent .mutualfund table.display tbody td a { color: var(--invest3-link) !important; } html.dark #wholediv .mutualfund table.display tbody td a:hover, html.dark #wholediv .mutualfund table.display tbody td a:focus-visible, html.dark #maincontent .mutualfund table.display tbody td a:hover, html.dark #maincontent .mutualfund table.display tbody td a:focus-visible, html[data-theme="dark"] #wholediv .mutualfund table.display tbody td a:hover, html[data-theme="dark"] #wholediv .mutualfund table.display tbody td a:focus-visible, html[data-theme="dark"] #maincontent .mutualfund table.display tbody td a:hover, html[data-theme="dark"] #maincontent .mutualfund table.display tbody td a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .mutualfund table.display td.dataTables_empty, html.dark #maincontent .mutualfund table.display td.dataTables_empty, html[data-theme="dark"] #wholediv .mutualfund table.display td.dataTables_empty, html[data-theme="dark"] #maincontent .mutualfund table.display td.dataTables_empty { color: var(--invest3-text-muted) !important; background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .mutualfund .dataTables_wrapper, html.dark #maincontent .mutualfund .dataTables_wrapper, html[data-theme="dark"] #wholediv .mutualfund .dataTables_wrapper, html[data-theme="dark"] #maincontent .mutualfund .dataTables_wrapper { color: var(--invest3-text-muted) !important; } html.dark #wholediv .mutualfund .dataTables_info, html.dark #wholediv .mutualfund .dataTables_length, html.dark #maincontent .mutualfund .dataTables_info, html.dark #maincontent .mutualfund .dataTables_length, html[data-theme="dark"] #wholediv .mutualfund .dataTables_info, html[data-theme="dark"] #wholediv .mutualfund .dataTables_length, html[data-theme="dark"] #maincontent .mutualfund .dataTables_info, html[data-theme="dark"] #maincontent .mutualfund .dataTables_length { color: var(--invest3-text-muted) !important; } html.dark #wholediv .mutualfund .dataTables_length select, html.dark #maincontent .mutualfund .dataTables_length select, html[data-theme="dark"] #wholediv .mutualfund .dataTables_length select, html[data-theme="dark"] #maincontent .mutualfund .dataTables_length select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mutualfund .ed2 .paging_full_numbers span a.paginate_button, html.dark #maincontent .mutualfund .ed2 .paging_full_numbers span a.paginate_button, html[data-theme="dark"] #wholediv .mutualfund .ed2 .paging_full_numbers span a.paginate_button, html[data-theme="dark"] #maincontent .mutualfund .ed2 .paging_full_numbers span a.paginate_button { background-color: var(--invest3-row-alt) !important; color: var(--invest3-link) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mutualfund .ed2 .paging_full_numbers span a.paginate_button:hover, html.dark #maincontent .mutualfund .ed2 .paging_full_numbers span a.paginate_button:hover, html[data-theme="dark"] #wholediv .mutualfund .ed2 .paging_full_numbers span a.paginate_button:hover, html[data-theme="dark"] #maincontent .mutualfund .ed2 .paging_full_numbers span a.paginate_button:hover { background-color: var(--invest3-row-hover) !important; color: var(--invest3-link-hover) !important; } html.dark #wholediv .mutualfund .ed2 .paging_full_numbers span a.paginate_active, html.dark #maincontent .mutualfund .ed2 .paging_full_numbers span a.paginate_active, html[data-theme="dark"] #wholediv .mutualfund .ed2 .paging_full_numbers span a.paginate_active, html[data-theme="dark"] #maincontent .mutualfund .ed2 .paging_full_numbers span a.paginate_active { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mutualfund .ed2 .paging_full_numbers a.paginate_button_disabled, html.dark #maincontent .mutualfund .ed2 .paging_full_numbers a.paginate_button_disabled, html[data-theme="dark"] #wholediv .mutualfund .ed2 .paging_full_numbers a.paginate_button_disabled, html[data-theme="dark"] #maincontent .mutualfund .ed2 .paging_full_numbers a.paginate_button_disabled { color: var(--invest3-text-muted) !important; opacity: 0.65; } html.dark #wholediv .mutualfund .dataTables_processing, html.dark #maincontent .mutualfund .dataTables_processing, html[data-theme="dark"] #wholediv .mutualfund .dataTables_processing, html[data-theme="dark"] #maincontent .mutualfund .dataTables_processing { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .mutualfund .icon-prospectus, html.dark #maincontent .mutualfund .icon-prospectus, html[data-theme="dark"] #wholediv .mutualfund .icon-prospectus, html[data-theme="dark"] #maincontent .mutualfund .icon-prospectus { filter: brightness(0) invert(1); opacity: 0.9; } /* * Analyst research hub (researchtools/analyst-research.php): tabs + .comp-wr.ed2 + arccomp DataTables (.tbl-res). */ html.dark #wholediv .analyst-research-page h1, html.dark #maincontent .analyst-research-page h1, html[data-theme="dark"] #wholediv .analyst-research-page h1, html[data-theme="dark"] #maincontent .analyst-research-page h1 { color: var(--invest3-text) !important; } html.dark #wholediv .analyst-research-page .ct.tw > .tt, html.dark #maincontent .analyst-research-page .ct.tw > .tt, html[data-theme="dark"] #wholediv .analyst-research-page .ct.tw > .tt, html[data-theme="dark"] #maincontent .analyst-research-page .ct.tw > .tt { color: var(--invest3-text) !important; } html.dark #wholediv .analyst-research-page .comp-wr.ed2, html.dark #maincontent .analyst-research-page .comp-wr.ed2, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr.ed2, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr.ed2 { background-color: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; border-radius: 4px; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv .analyst-research-page .comp-wr .hd.gh, html.dark #maincontent .analyst-research-page .comp-wr .hd.gh, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr .hd.gh, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr .hd.gh { background: var(--invest3-title-bar) !important; border-color: var(--invest3-card-border) !important; border-bottom: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv .analyst-research-page .comp-wr .hd.gh .tt_lbl, html.dark #wholediv .analyst-research-page .comp-wr .hd.gh .lbl, html.dark #maincontent .analyst-research-page .comp-wr .hd.gh .tt_lbl, html.dark #maincontent .analyst-research-page .comp-wr .hd.gh .lbl, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr .hd.gh .tt_lbl, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr .hd.gh .lbl, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr .hd.gh .tt_lbl, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr .hd.gh .lbl { color: var(--invest3-text) !important; } html.dark #wholediv .analyst-research-page .comp-wr input.fil, html.dark #wholediv .analyst-research-page .comp-wr input.cust_dt, html.dark #wholediv .analyst-research-page .comp-wr select.fil, html.dark #maincontent .analyst-research-page .comp-wr input.fil, html.dark #maincontent .analyst-research-page .comp-wr input.cust_dt, html.dark #maincontent .analyst-research-page .comp-wr select.fil, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr input.fil, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr input.cust_dt, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr select.fil, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr input.fil, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr input.cust_dt, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr select.fil { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .analyst-research-page .ed2 > .rw-wrap, html.dark #wholediv .analyst-research-page .comp-wr.ed2 > .rw-wrap, html.dark #maincontent .analyst-research-page .ed2 > .rw-wrap, html.dark #maincontent .analyst-research-page .comp-wr.ed2 > .rw-wrap, html[data-theme="dark"] #wholediv .analyst-research-page .ed2 > .rw-wrap, html[data-theme="dark"] #wholediv .analyst-research-page .comp-wr.ed2 > .rw-wrap, html[data-theme="dark"] #maincontent .analyst-research-page .ed2 > .rw-wrap, html[data-theme="dark"] #maincontent .analyst-research-page .comp-wr.ed2 > .rw-wrap { border-bottom: none !important; box-shadow: none !important; } html.dark #wholediv .analyst-research-page .ed2 .rw-wrap .lbl, html.dark #maincontent .analyst-research-page .ed2 .rw-wrap .lbl, html[data-theme="dark"] #wholediv .analyst-research-page .ed2 .rw-wrap .lbl, html[data-theme="dark"] #maincontent .analyst-research-page .ed2 .rw-wrap .lbl { color: var(--invest3-text) !important; } html.dark #wholediv .analyst-research-page a.lnk_fs, html.dark #maincontent .analyst-research-page a.lnk_fs, html[data-theme="dark"] #wholediv .analyst-research-page a.lnk_fs, html[data-theme="dark"] #maincontent .analyst-research-page a.lnk_fs { color: var(--invest3-link) !important; } html.dark #wholediv .analyst-research-page a.lnk_fs:hover, html.dark #wholediv .analyst-research-page a.lnk_fs:focus-visible, html.dark #maincontent .analyst-research-page a.lnk_fs:hover, html.dark #maincontent .analyst-research-page a.lnk_fs:focus-visible, html[data-theme="dark"] #wholediv .analyst-research-page a.lnk_fs:hover, html[data-theme="dark"] #wholediv .analyst-research-page a.lnk_fs:focus-visible, html[data-theme="dark"] #maincontent .analyst-research-page a.lnk_fs:hover, html[data-theme="dark"] #maincontent .analyst-research-page a.lnk_fs:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .analyst-research-page .sch_prompt, html.dark #maincontent .analyst-research-page .sch_prompt, html[data-theme="dark"] #wholediv .analyst-research-page .sch_prompt, html[data-theme="dark"] #maincontent .analyst-research-page .sch_prompt { color: var(--invest3-text-muted) !important; } html.dark #wholediv .analyst-research-page .sch-error, html.dark #maincontent .analyst-research-page .sch-error, html[data-theme="dark"] #wholediv .analyst-research-page .sch-error, html[data-theme="dark"] #maincontent .analyst-research-page .sch-error { color: var(--invest3-accent) !important; } html.dark #wholediv .analyst-research-page .ed2 .main, html.dark #maincontent .analyst-research-page .ed2 .main, html[data-theme="dark"] #wholediv .analyst-research-page .ed2 .main, html[data-theme="dark"] #maincontent .analyst-research-page .ed2 .main { background-color: transparent !important; color: var(--invest3-text-muted) !important; box-shadow: none !important; } html.dark #wholediv .analyst-research-page table.display, html.dark #maincontent .analyst-research-page table.display, html[data-theme="dark"] #wholediv .analyst-research-page table.display, html[data-theme="dark"] #maincontent .analyst-research-page table.display { background-color: transparent !important; } html.dark #wholediv .analyst-research-page table.display thead th, html.dark #maincontent .analyst-research-page table.display thead th, html[data-theme="dark"] #wholediv .analyst-research-page table.display thead th, html[data-theme="dark"] #maincontent .analyst-research-page table.display thead th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; border-right-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .analyst-research-page table.display thead th.view, html.dark #maincontent .analyst-research-page table.display thead th.view, html[data-theme="dark"] #wholediv .analyst-research-page table.display thead th.view, html[data-theme="dark"] #maincontent .analyst-research-page table.display thead th.view { border-right-color: transparent !important; } html.dark #wholediv .analyst-research-page table.display tbody td, html.dark #maincontent .analyst-research-page table.display tbody td, html[data-theme="dark"] #wholediv .analyst-research-page table.display tbody td, html[data-theme="dark"] #maincontent .analyst-research-page table.display tbody td { color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv .analyst-research-page table.display tbody tr:hover > td, html.dark #maincontent .analyst-research-page table.display tbody tr:hover > td, html[data-theme="dark"] #wholediv .analyst-research-page table.display tbody tr:hover > td, html[data-theme="dark"] #maincontent .analyst-research-page table.display tbody tr:hover > td { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv .analyst-research-page table.display td.dataTables_empty, html.dark #maincontent .analyst-research-page table.display td.dataTables_empty, html[data-theme="dark"] #wholediv .analyst-research-page table.display td.dataTables_empty, html[data-theme="dark"] #maincontent .analyst-research-page table.display td.dataTables_empty { color: var(--invest3-text-muted) !important; background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .analyst-research-page table.display tbody td a, html.dark #maincontent .analyst-research-page table.display tbody td a, html[data-theme="dark"] #wholediv .analyst-research-page table.display tbody td a, html[data-theme="dark"] #maincontent .analyst-research-page table.display tbody td a { color: var(--invest3-link) !important; } html.dark #wholediv .analyst-research-page table.display tbody td a:hover, html.dark #wholediv .analyst-research-page table.display tbody td a:focus-visible, html.dark #maincontent .analyst-research-page table.display tbody td a:hover, html.dark #maincontent .analyst-research-page table.display tbody td a:focus-visible, html[data-theme="dark"] #wholediv .analyst-research-page table.display tbody td a:hover, html[data-theme="dark"] #wholediv .analyst-research-page table.display tbody td a:focus-visible, html[data-theme="dark"] #maincontent .analyst-research-page table.display tbody td a:hover, html[data-theme="dark"] #maincontent .analyst-research-page table.display tbody td a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .analyst-research-page .dataTables_wrapper, html.dark #maincontent .analyst-research-page .dataTables_wrapper, html[data-theme="dark"] #wholediv .analyst-research-page .dataTables_wrapper, html[data-theme="dark"] #maincontent .analyst-research-page .dataTables_wrapper { color: var(--invest3-text-muted) !important; } html.dark #wholediv .analyst-research-page .dataTables_info, html.dark #wholediv .analyst-research-page .dataTables_length, html.dark #maincontent .analyst-research-page .dataTables_info, html.dark #maincontent .analyst-research-page .dataTables_length, html[data-theme="dark"] #wholediv .analyst-research-page .dataTables_info, html[data-theme="dark"] #wholediv .analyst-research-page .dataTables_length, html[data-theme="dark"] #maincontent .analyst-research-page .dataTables_info, html[data-theme="dark"] #maincontent .analyst-research-page .dataTables_length { color: var(--invest3-text-muted) !important; } html.dark #wholediv .analyst-research-page .dataTables_length select, html.dark #maincontent .analyst-research-page .dataTables_length select, html[data-theme="dark"] #wholediv .analyst-research-page .dataTables_length select, html[data-theme="dark"] #maincontent .analyst-research-page .dataTables_length select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button, html.dark #maincontent .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button, html[data-theme="dark"] #wholediv .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button, html[data-theme="dark"] #maincontent .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button { background-color: var(--invest3-row-alt) !important; color: var(--invest3-link) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button:hover, html.dark #maincontent .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button:hover, html[data-theme="dark"] #wholediv .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button:hover, html[data-theme="dark"] #maincontent .analyst-research-page .ed2 .paging_full_numbers span a.paginate_button:hover { background-color: var(--invest3-row-hover) !important; color: var(--invest3-link-hover) !important; } html.dark #wholediv .analyst-research-page .ed2 .paging_full_numbers span a.paginate_active, html.dark #maincontent .analyst-research-page .ed2 .paging_full_numbers span a.paginate_active, html[data-theme="dark"] #wholediv .analyst-research-page .ed2 .paging_full_numbers span a.paginate_active, html[data-theme="dark"] #maincontent .analyst-research-page .ed2 .paging_full_numbers span a.paginate_active { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .analyst-research-page .ed2 .paging_full_numbers a.paginate_button_disabled, html.dark #maincontent .analyst-research-page .ed2 .paging_full_numbers a.paginate_button_disabled, html[data-theme="dark"] #wholediv .analyst-research-page .ed2 .paging_full_numbers a.paginate_button_disabled, html[data-theme="dark"] #maincontent .analyst-research-page .ed2 .paging_full_numbers a.paginate_button_disabled { color: var(--invest3-text-muted) !important; opacity: 0.65; } html.dark #wholediv .analyst-research-page .dataTables_processing, html.dark #maincontent .analyst-research-page .dataTables_processing, html[data-theme="dark"] #wholediv .analyst-research-page .dataTables_processing, html[data-theme="dark"] #maincontent .analyst-research-page .dataTables_processing { background-color: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } /* * Screeners hub (researchtools/screeners.php .tw.screeners-hub + tabs.php): Tailwind .text-accent-blue / nav border-[#d3dce6]. */ html.dark #wholediv #maincontent .screeners-hub > div:first-child h1, html.dark #maincontent .screeners-hub > div:first-child h1, html[data-theme="dark"] #wholediv #maincontent .screeners-hub > div:first-child h1, html[data-theme="dark"] #maincontent .screeners-hub > div:first-child h1 { color: var(--invest3-text) !important; -webkit-text-fill-color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .screeners-hub .tw nav, html.dark #maincontent .screeners-hub .tw nav, html[data-theme="dark"] #wholediv #maincontent .screeners-hub .tw nav, html[data-theme="dark"] #maincontent .screeners-hub .tw nav { border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv #maincontent .screeners-hub .tw a.text-accent-blue, html.dark #maincontent .screeners-hub .tw a.text-accent-blue, html[data-theme="dark"] #wholediv #maincontent .screeners-hub .tw a.text-accent-blue, html[data-theme="dark"] #maincontent .screeners-hub .tw a.text-accent-blue { color: var(--invest3-link) !important; -webkit-text-fill-color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .screeners-hub .tw a.text-accent-blue:hover, html.dark #wholediv #maincontent .screeners-hub .tw a.text-accent-blue:focus-visible, html.dark #maincontent .screeners-hub .tw a.text-accent-blue:hover, html.dark #maincontent .screeners-hub .tw a.text-accent-blue:focus-visible, html[data-theme="dark"] #wholediv #maincontent .screeners-hub .tw a.text-accent-blue:hover, html[data-theme="dark"] #wholediv #maincontent .screeners-hub .tw a.text-accent-blue:focus-visible, html[data-theme="dark"] #maincontent .screeners-hub .tw a.text-accent-blue:hover, html[data-theme="dark"] #maincontent .screeners-hub .tw a.text-accent-blue:focus-visible { color: var(--invest3-link-hover) !important; -webkit-text-fill-color: var(--invest3-link-hover) !important; } html.dark #wholediv #maincontent .screeners-hub .tw a[aria-current="page"], html.dark #maincontent .screeners-hub .tw a[aria-current="page"], html[data-theme="dark"] #wholediv #maincontent .screeners-hub .tw a[aria-current="page"], html[data-theme="dark"] #maincontent .screeners-hub .tw a[aria-current="page"] { color: var(--invest3-text) !important; -webkit-text-fill-color: var(--invest3-text) !important; } /* * DRIP — Dividend Reinvestment (templates/*/content/drip.php): .drip, .control-section, .drip_table, switch, dialogs. * .drip > .title > h1: --invest3-text (redesign’s global h1 #2A528E otherwise wins). All themes — token flips on html.dark. */ #wholediv #maincontent .drip > .title > h1, #wholediv .drip > .title > h1, #wholediv .template_t .main .drip > .title > h1, html.dark #wholediv #maincontent .drip > .title > h1, html.dark #wholediv .drip > .title > h1, html.dark #wholediv .template_t .main .drip > .title > h1, html[data-theme="dark"] #wholediv #maincontent .drip > .title > h1, html[data-theme="dark"] #wholediv .drip > .title > h1, html[data-theme="dark"] #wholediv .template_t .main .drip > .title > h1 { color: var(--invest3-text) !important; } html.dark #wholediv #maincontent .drip .title_list a.learn-more, html.dark #wholediv #maincontent .drip .title_list a.learn-more:link, html.dark #wholediv #maincontent .drip .title_list a.learn-more:visited, html.dark #wholediv .drip .title_list a.learn-more, html.dark #wholediv .drip .title_list a.learn-more:link, html.dark #wholediv .drip .title_list a.learn-more:visited, html[data-theme="dark"] #wholediv #maincontent .drip .title_list a.learn-more, html[data-theme="dark"] #wholediv #maincontent .drip .title_list a.learn-more:link, html[data-theme="dark"] #wholediv #maincontent .drip .title_list a.learn-more:visited, html[data-theme="dark"] #wholediv .drip .title_list a.learn-more, html[data-theme="dark"] #wholediv .drip .title_list a.learn-more:link, html[data-theme="dark"] #wholediv .drip .title_list a.learn-more:visited { color: var(--invest3-link) !important; } html.dark #wholediv #maincontent .drip .title_list a.learn-more:hover, html.dark #wholediv #maincontent .drip .title_list a.learn-more:focus-visible, html.dark #wholediv #maincontent .drip .title_list a.learn-more:active, html.dark #wholediv .drip .title_list a.learn-more:hover, html.dark #wholediv .drip .title_list a.learn-more:focus-visible, html.dark #wholediv .drip .title_list a.learn-more:active, html[data-theme="dark"] #wholediv #maincontent .drip .title_list a.learn-more:hover, html[data-theme="dark"] #wholediv #maincontent .drip .title_list a.learn-more:focus-visible, html[data-theme="dark"] #wholediv #maincontent .drip .title_list a.learn-more:active, html[data-theme="dark"] #wholediv .drip .title_list a.learn-more:hover, html[data-theme="dark"] #wholediv .drip .title_list a.learn-more:focus-visible, html[data-theme="dark"] #wholediv .drip .title_list a.learn-more:active { color: var(--invest3-link-hover) !important; } html.dark #wholediv .drip .control-section, html.dark #maincontent .drip .control-section, html[data-theme="dark"] #wholediv .drip .control-section, html[data-theme="dark"] #maincontent .drip .control-section { background: var(--invest3-title-bar) !important; } html.dark #wholediv .drip .control-section .select-account label, html.dark #maincontent .drip .control-section .select-account label, html[data-theme="dark"] #wholediv .drip .control-section .select-account label, html[data-theme="dark"] #maincontent .drip .control-section .select-account label { color: var(--invest3-text) !important; } html.dark #wholediv .drip .control-section .enroll-account label, html.dark #maincontent .drip .control-section .enroll-account label, html[data-theme="dark"] #wholediv .drip .control-section .enroll-account label, html[data-theme="dark"] #maincontent .drip .control-section .enroll-account label { color: var(--invest3-text) !important; } html.dark #wholediv .drip .control-section .enroll-status, html.dark #maincontent .drip .control-section .enroll-status, html[data-theme="dark"] #wholediv .drip .control-section .enroll-status, html[data-theme="dark"] #maincontent .drip .control-section .enroll-status { color: var(--invest3-text-muted) !important; } html.dark #wholediv .drip .control-section #acctnum, html.dark #maincontent .drip .control-section #acctnum, html[data-theme="dark"] #wholediv .drip .control-section #acctnum, html[data-theme="dark"] #maincontent .drip .control-section #acctnum { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .drip label.radio-inline[style*="green"], html.dark #maincontent .drip label.radio-inline[style*="green"], html[data-theme="dark"] #wholediv .drip label.radio-inline[style*="green"], html[data-theme="dark"] #maincontent .drip label.radio-inline[style*="green"] { color: var(--invest3-text) !important; } html.dark #wholediv .drip label.radio-inline[style*="#0066cc"], html.dark #wholediv .drip label.radio-inline[style*="#0066CC"], html.dark #maincontent .drip label.radio-inline[style*="#0066cc"], html.dark #maincontent .drip label.radio-inline[style*="#0066CC"], html[data-theme="dark"] #wholediv .drip label.radio-inline[style*="#0066cc"], html[data-theme="dark"] #wholediv .drip label.radio-inline[style*="#0066CC"], html[data-theme="dark"] #maincontent .drip label.radio-inline[style*="#0066cc"], html[data-theme="dark"] #maincontent .drip label.radio-inline[style*="#0066CC"] { color: var(--invest3-link) !important; } html.dark #wholediv .drip label.radio-inline[style*="#F44336"], html.dark #maincontent .drip label.radio-inline[style*="#F44336"], html[data-theme="dark"] #wholediv .drip label.radio-inline[style*="#F44336"], html[data-theme="dark"] #maincontent .drip label.radio-inline[style*="#F44336"] { color: var(--invest3-accent) !important; } html.dark #wholediv .drip .preview-buttons, html.dark #maincontent .drip .preview-buttons, html[data-theme="dark"] #wholediv .drip .preview-buttons, html[data-theme="dark"] #maincontent .drip .preview-buttons { border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv .drip .preview-buttons .btn-clear-grey, html.dark #maincontent .drip .preview-buttons .btn-clear-grey, html[data-theme="dark"] #wholediv .drip .preview-buttons .btn-clear-grey, html[data-theme="dark"] #maincontent .drip .preview-buttons .btn-clear-grey { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .drip table.drip_table thead th, html.dark #wholediv .drip table.drip_table.dataTable thead th, html.dark #wholediv .drip .dataTables_scrollHead thead th, html.dark #maincontent .drip table.drip_table thead th, html.dark #maincontent .drip table.drip_table.dataTable thead th, html.dark #maincontent .drip .dataTables_scrollHead thead th, html[data-theme="dark"] #wholediv .drip table.drip_table thead th, html[data-theme="dark"] #wholediv .drip table.drip_table.dataTable thead th, html[data-theme="dark"] #wholediv .drip .dataTables_scrollHead thead th, html[data-theme="dark"] #maincontent .drip table.drip_table thead th, html[data-theme="dark"] #maincontent .drip table.drip_table.dataTable thead th, html[data-theme="dark"] #maincontent .drip .dataTables_scrollHead thead th { color: var(--invest3-text) !important; background: var(--invest3-title-bar) !important; } html.dark #wholediv .drip .drip_table tr td, html.dark #maincontent .drip .drip_table tr td, html[data-theme="dark"] #wholediv .drip .drip_table tr td, html[data-theme="dark"] #maincontent .drip .drip_table tr td { color: var(--invest3-text) !important; border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv .drip .drip_table tr td:nth-child(1), html.dark #maincontent .drip .drip_table tr td:nth-child(1), html[data-theme="dark"] #wholediv .drip .drip_table tr td:nth-child(1), html[data-theme="dark"] #maincontent .drip .drip_table tr td:nth-child(1) { color: var(--invest3-link) !important; } html.dark #wholediv .drip .drip_table tr:last-child, html.dark #maincontent .drip .drip_table tr:last-child, html[data-theme="dark"] #wholediv .drip .drip_table tr:last-child, html[data-theme="dark"] #maincontent .drip .drip_table tr:last-child { border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .drip .drip_table tbody tr:hover > td, html.dark #maincontent .drip .drip_table tbody tr:hover > td, html[data-theme="dark"] #wholediv .drip .drip_table tbody tr:hover > td, html[data-theme="dark"] #maincontent .drip .drip_table tbody tr:hover > td { background-color: var(--invest3-row-hover) !important; } html.dark #wholediv .drip .edit-enrollment, html.dark #maincontent .drip .edit-enrollment, html[data-theme="dark"] #wholediv .drip .edit-enrollment, html[data-theme="dark"] #maincontent .drip .edit-enrollment { background-color: var(--invest3-warn-bg) !important; } /* DRIP enroll toggle: #ccc track on title bar is low contrast; use link token (colors/outline only — no position/size). */ html.dark #wholediv .drip .switch .slider, html.dark #maincontent .drip .switch .slider, html[data-theme="dark"] #wholediv .drip .switch .slider, html[data-theme="dark"] #maincontent .drip .switch .slider { background-color: rgba(0, 0, 0, 0.22) !important; box-shadow: inset 0 0 0 2px var(--invest3-link) !important; } html.dark #wholediv .drip .switch input:checked + .slider, html.dark #maincontent .drip .switch input:checked + .slider, html[data-theme="dark"] #wholediv .drip .switch input:checked + .slider, html[data-theme="dark"] #maincontent .drip .switch input:checked + .slider { background-color: var(--invest3-link) !important; box-shadow: none !important; } html.dark #wholediv .drip .switch input:focus + .slider, html.dark #wholediv .drip .switch input:focus-visible + .slider, html.dark #maincontent .drip .switch input:focus + .slider, html.dark #maincontent .drip .switch input:focus-visible + .slider, html[data-theme="dark"] #wholediv .drip .switch input:focus + .slider, html[data-theme="dark"] #wholediv .drip .switch input:focus-visible + .slider, html[data-theme="dark"] #maincontent .drip .switch input:focus + .slider, html[data-theme="dark"] #maincontent .drip .switch input:focus-visible + .slider { outline: 2px solid var(--invest3-link-hover) !important; outline-offset: 2px !important; } /* Beat redesign .drip input:focus+.slider box-shadow so unchecked keeps link inset ring */ html.dark #wholediv .drip .switch input:focus:not(:checked) + .slider, html.dark #wholediv .drip .switch input:focus-visible:not(:checked) + .slider, html.dark #maincontent .drip .switch input:focus:not(:checked) + .slider, html.dark #maincontent .drip .switch input:focus-visible:not(:checked) + .slider, html[data-theme="dark"] #wholediv .drip .switch input:focus:not(:checked) + .slider, html[data-theme="dark"] #wholediv .drip .switch input:focus-visible:not(:checked) + .slider, html[data-theme="dark"] #maincontent .drip .switch input:focus:not(:checked) + .slider, html[data-theme="dark"] #maincontent .drip .switch input:focus-visible:not(:checked) + .slider { box-shadow: inset 0 0 0 2px var(--invest3-link) !important; } html.dark #wholediv .drip .switch input:checked:focus + .slider, html.dark #wholediv .drip .switch input:checked:focus-visible + .slider, html.dark #maincontent .drip .switch input:checked:focus + .slider, html.dark #maincontent .drip .switch input:checked:focus-visible + .slider, html[data-theme="dark"] #wholediv .drip .switch input:checked:focus + .slider, html[data-theme="dark"] #wholediv .drip .switch input:checked:focus-visible + .slider, html[data-theme="dark"] #maincontent .drip .switch input:checked:focus + .slider, html[data-theme="dark"] #maincontent .drip .switch input:checked:focus-visible + .slider { background-color: var(--invest3-link) !important; box-shadow: none !important; } html.dark #wholediv .drip .dataTables_wrapper, html.dark #maincontent .drip .dataTables_wrapper, html[data-theme="dark"] #wholediv .drip .dataTables_wrapper, html[data-theme="dark"] #maincontent .drip .dataTables_wrapper { color: var(--invest3-text-muted) !important; } html.dark #wholediv .drip .dataTables_info, html.dark #wholediv .drip .dataTables_length, html.dark #maincontent .drip .dataTables_info, html.dark #maincontent .drip .dataTables_length, html[data-theme="dark"] #wholediv .drip .dataTables_info, html[data-theme="dark"] #wholediv .drip .dataTables_length, html[data-theme="dark"] #maincontent .drip .dataTables_info, html[data-theme="dark"] #maincontent .drip .dataTables_length { color: var(--invest3-text-muted) !important; } html.dark #wholediv .drip .dataTables_length select, html.dark #maincontent .drip .dataTables_length select, html[data-theme="dark"] #wholediv .drip .dataTables_length select, html[data-theme="dark"] #maincontent .drip .dataTables_length select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } /* jQuery UI dialogs (DRIP confirmations / preview — markup in drip.php) */ /* jquery-ui.css: .ui-dialog { padding: .2em } + .ui-widget-content white bg = light “frame” in dark mode */ html.dark .ui-dialog.ui-widget-content, html[data-theme="dark"] .ui-dialog.ui-widget-content { padding: 0 !important; background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; background-image: none !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark .ui-dialog .ui-dialog-titlebar.ui-widget-header, html[data-theme="dark"] .ui-dialog .ui-dialog-titlebar.ui-widget-header { background: var(--invest3-title-bar) !important; background-color: var(--invest3-title-bar) !important; background-image: none !important; color: var(--invest3-text) !important; border: none !important; border-bottom: 1px solid var(--invest3-card-border) !important; padding: 10px 14px !important; } html.dark .ui-dialog .ui-dialog-title, html[data-theme="dark"] .ui-dialog .ui-dialog-title { margin: 0 12px 0 0 !important; } html.dark .ui-dialog .ui-dialog-content.ui-widget-content, html.dark .ui-dialog .ui-dialog-content, html[data-theme="dark"] .ui-dialog .ui-dialog-content.ui-widget-content, html[data-theme="dark"] .ui-dialog .ui-dialog-content { background: var(--invest3-card) !important; background-color: var(--invest3-card) !important; background-image: none !important; color: var(--invest3-text) !important; padding: 12px 16px !important; } html.dark .ui-dialog .ui-dialog-buttonpane, html[data-theme="dark"] .ui-dialog .ui-dialog-buttonpane { background: var(--invest3-card) !important; background-image: none !important; border-top: 1px solid var(--invest3-card-border) !important; border-top-color: var(--invest3-card-border) !important; margin: 0 !important; padding: 10px 12px !important; } html.dark .ui-dialog .ui-dialog-buttonpane button.ui-button, html[data-theme="dark"] .ui-dialog .ui-dialog-buttonpane button.ui-button { background-image: none !important; } html.dark .ui-dialog-buttonset .ui-button:first-child, html[data-theme="dark"] .ui-dialog-buttonset .ui-button:first-child { color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; background: var(--invest3-row-alt) !important; } html.dark .ui-dialog-buttonset .ui-button:last-child, html[data-theme="dark"] .ui-dialog-buttonset .ui-button:last-child { color: var(--invest3-ds-elev-01) !important; background-color: var(--invest3-primary) !important; border-color: var(--invest3-primary) !important; } html.dark #wholediv .deposit_withdraw .maindiv .btn.btn-action, html.dark #wholediv .deposit_withdraw .maindiv a.btn.btn-action, html[data-theme="dark"] #wholediv .deposit_withdraw .maindiv .btn.btn-action, html[data-theme="dark"] #wholediv .deposit_withdraw .maindiv a.btn.btn-action { background-color: var(--invest3-primary) !important; border: 1px solid var(--invest3-primary) !important; color: var(--invest3-text) !important; background-image: none !important; } html.dark #wholediv .deposit_withdraw .maindiv .btn.btn-action:hover, html.dark #wholediv .deposit_withdraw .maindiv .btn.btn-action:focus-visible, html.dark #wholediv .deposit_withdraw .maindiv a.btn.btn-action:hover, html.dark #wholediv .deposit_withdraw .maindiv a.btn.btn-action:focus-visible, html[data-theme="dark"] #wholediv .deposit_withdraw .maindiv .btn.btn-action:hover, html[data-theme="dark"] #wholediv .deposit_withdraw .maindiv .btn.btn-action:focus-visible, html[data-theme="dark"] #wholediv .deposit_withdraw .maindiv a.btn.btn-action:hover, html[data-theme="dark"] #wholediv .deposit_withdraw .maindiv a.btn.btn-action:focus-visible { background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; color: var(--invest3-text) !important; } /* * ACH bank profile (profile_setting): .maindiv + injected .ach_setup / #ach_setup_div * (intro, instructions, forms, bluebox) — base.css #9FBCE2 borders + redesign white cards. */ html.dark #wholediv .deposit_withdraw.ach_profile .maindiv, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile .maindiv { background-color: var(--invest3-card) !important; border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35); } html.dark #wholediv .deposit_withdraw.ach_profile #ach_instruction_div.bluetop, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile #ach_instruction_div.bluetop { border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw .ach_setup h3, html.dark #wholediv .deposit_withdraw .ach_setup h4, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup h3, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup h4 { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .ach_setup h3[style*="#009900"], html.dark #wholediv .deposit_withdraw .ach_setup h3[style*="009900"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup h3[style*="#009900"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup h3[style*="009900"] { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .ach_setup p, html.dark #wholediv .deposit_withdraw .ach_setup ul.step, html.dark #wholediv .deposit_withdraw .ach_setup ul.step li, html.dark #wholediv .deposit_withdraw .ach_setup .address, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup p, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup ul.step, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup ul.step li, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .address { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .address strong, html.dark #wholediv .deposit_withdraw .ach_setup strong, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .address strong, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup strong { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .steps, html.dark #wholediv .deposit_withdraw .freeacat .steps, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .steps, html[data-theme="dark"] #wholediv .deposit_withdraw .freeacat .steps { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .ach_setup a.links, html.dark #wholediv .deposit_withdraw .ach_setup a.stdlink, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup a.links, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .btn-action, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .btn-action { background-color: var(--invest3-primary) !important; border: 1px solid var(--invest3-primary) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .btn-action:hover, html.dark #wholediv .deposit_withdraw .ach_setup .btn-action:focus-visible, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .btn-action:hover, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .btn-action:focus-visible { background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw.ach_profile #ach_setup_div, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile #ach_setup_div { background: var(--invest3-card) !important; color: var(--invest3-text-muted) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35); } html.dark #wholediv .deposit_withdraw #ach_setup_div form[name="ach_gencode"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div form[name="ach_gencode"] { background: var(--invest3-warn-bg) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .ach_setup.bluebox, html.dark #wholediv .deposit_withdraw #ach_setup_div .ach_setup.bluebox, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup.bluebox, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div .ach_setup.bluebox { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; border-top-color: var(--invest3-primary) !important; } html.dark #wholediv .deposit_withdraw #ach_setup_div input[type="text"], html.dark #wholediv .deposit_withdraw #ach_setup_div input[type="tel"], html.dark #wholediv .deposit_withdraw #ach_setup_div input[type="password"], html.dark #wholediv .deposit_withdraw #ach_setup_div select, html.dark #wholediv .deposit_withdraw #ach_setup_div textarea, html.dark #wholediv .deposit_withdraw .ach_setup input[type="text"], html.dark #wholediv .deposit_withdraw .ach_setup input[type="tel"], html.dark #wholediv .deposit_withdraw .ach_setup input[type="password"], html.dark #wholediv .deposit_withdraw .ach_setup select, html.dark #wholediv .deposit_withdraw .ach_setup textarea, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div input[type="text"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div input[type="tel"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div input[type="password"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div select, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div textarea, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup input[type="text"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup input[type="tel"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup input[type="password"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup select, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup textarea { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw .ach_setup input[name="verification_code"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup input[name="verification_code"] { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw.ach_profile #ach_ineligible_div .inner, html.dark #wholediv .deposit_withdraw.ach_profile #ach_summary_div .inner, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile #ach_ineligible_div .inner, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile #ach_summary_div .inner { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw.ach_profile .tbl_note, html.dark #wholediv .deposit_withdraw.ach_profile #ach_footnotes, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile .tbl_note, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile #ach_footnotes { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw.ach_profile #ach_footnotes b[style*="color:red"], html.dark #wholediv .deposit_withdraw.ach_profile #ach_footnotes b[style*="color: red"], html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile #ach_footnotes b[style*="color:red"], html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile #ach_footnotes b[style*="color: red"] { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw.ach_profile .message.yellowbox, html.dark #wholediv .deposit_withdraw .yellowbox, html[data-theme="dark"] #wholediv .deposit_withdraw.ach_profile .message.yellowbox, html[data-theme="dark"] #wholediv .deposit_withdraw .yellowbox { background-color: var(--invest3-warn-bg) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .yellowbox a.stdlink, html[data-theme="dark"] #wholediv .deposit_withdraw .yellowbox a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .yellowbox strong, html[data-theme="dark"] #wholediv .deposit_withdraw .yellowbox strong { color: var(--invest3-text) !important; } /* Wire (redesign .js-wire-intra / .wire-setup / .application .ftlayer — cream #FFFAEA) */ html.dark #wholediv .deposit_withdraw .js-wire-intra, html[data-theme="dark"] #wholediv .deposit_withdraw .js-wire-intra { background-color: var(--invest3-warn-bg) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .wire-setup, html[data-theme="dark"] #wholediv .deposit_withdraw .wire-setup { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .wire-setup a.actions, html.dark #wholediv .deposit_withdraw .wire-setup a.stdlink, html[data-theme="dark"] #wholediv .deposit_withdraw .wire-setup a.actions, html[data-theme="dark"] #wholediv .deposit_withdraw .wire-setup a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .wire-setup h4.subttl, html[data-theme="dark"] #wholediv .deposit_withdraw .wire-setup h4.subttl { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .application .ftlayer, html[data-theme="dark"] #wholediv .deposit_withdraw .application .ftlayer { background: rgba(16, 26, 33, 0.72) !important; } /* * Wire deposit (wire_deposit.php .domestic / .international): fundmgt.css table.table_template * uses light thead/hover (#FFF); inline colors; override for dark shell. */ html.dark #wholediv .deposit_withdraw .domestic, html.dark #wholediv .deposit_withdraw .international, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic, html[data-theme="dark"] #wholediv .deposit_withdraw .international { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .domestic a.links, html.dark #wholediv .deposit_withdraw .international a.links, html.dark #wholediv .deposit_withdraw .domestic a:not(.btn), html.dark #wholediv .deposit_withdraw .international a:not(.btn), html[data-theme="dark"] #wholediv .deposit_withdraw .domestic a.links, html[data-theme="dark"] #wholediv .deposit_withdraw .international a.links, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic a:not(.btn), html[data-theme="dark"] #wholediv .deposit_withdraw .international a:not(.btn) { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .domestic ul.wire_header font[color*="6600"], html.dark #wholediv .deposit_withdraw .international ul.wire_header font[color*="6600"], html[data-theme="dark"] #wholediv .deposit_withdraw .domestic ul.wire_header font[color*="6600"], html[data-theme="dark"] #wholediv .deposit_withdraw .international ul.wire_header font[color*="6600"] { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw .domestic ul.wire_header font[color*="6600"] strong, html.dark #wholediv .deposit_withdraw .international ul.wire_header font[color*="6600"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic ul.wire_header font[color*="6600"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international ul.wire_header font[color*="6600"] strong { color: inherit !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template, html.dark #wholediv .deposit_withdraw .international table.table_template, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template { border-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template thead th, html.dark #wholediv .deposit_withdraw .international table.table_template thead th, html.dark #wholediv .deposit_withdraw .domestic table.table_template > thead > tr > th, html.dark #wholediv .deposit_withdraw .international table.table_template > thead > tr > th, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template thead th, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template thead th, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template > thead > tr > th, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template > thead > tr > th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr td, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr td { color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td strong, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr td strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr td strong { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="003366"], html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="003366"], html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="003366"], html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="003366"] { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="003366"] strong, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="003366"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="003366"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="003366"] strong { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="FF0000"], html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="ff0000"], html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="FF0000"], html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="ff0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="FF0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="FF0000"] { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="FF0000"] strong, html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="ff0000"] strong, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="FF0000"] strong, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="ff0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr td font[color*="FF0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr td font[color*="FF0000"] strong { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw .domestic > p > font[color*="FF0000"], html.dark #wholediv .deposit_withdraw .domestic > p > font[color*="ff0000"], html.dark #wholediv .deposit_withdraw .international > p > font[color*="FF0000"], html.dark #wholediv .deposit_withdraw .international > p > font[color*="ff0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .domestic > p > font[color*="FF0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .international > p > font[color*="FF0000"] { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw .domestic > p > font[color*="FF0000"] strong, html.dark #wholediv .deposit_withdraw .domestic > p > font[color*="ff0000"] strong, html.dark #wholediv .deposit_withdraw .international > p > font[color*="FF0000"] strong, html.dark #wholediv .deposit_withdraw .international > p > font[color*="ff0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic > p > font[color*="FF0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international > p > font[color*="FF0000"] strong { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover, html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td { background-color: var(--invest3-row-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="003366"], html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="003366"] strong, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="003366"], html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="003366"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="003366"], html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="003366"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="003366"], html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="003366"] strong { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="FF0000"], html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="ff0000"], html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="FF0000"] strong, html.dark #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="ff0000"] strong, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="FF0000"], html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="ff0000"], html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="FF0000"] strong, html.dark #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="ff0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="FF0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="ff0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="FF0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic table.table_template tbody tr:hover td font[color*="ff0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="FF0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="ff0000"], html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="FF0000"] strong, html[data-theme="dark"] #wholediv .deposit_withdraw .international table.table_template tbody tr:hover td font[color*="ff0000"] strong { color: var(--invest3-accent) !important; } html.dark #wholediv .deposit_withdraw .domestic ol li, html.dark #wholediv .deposit_withdraw .international ol li, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic ol li, html[data-theme="dark"] #wholediv .deposit_withdraw .international ol li { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic p, html.dark #wholediv .deposit_withdraw .international p, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic p, html[data-theme="dark"] #wholediv .deposit_withdraw .international p { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic p.boldtext, html.dark #wholediv .deposit_withdraw .international p.boldtext, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic p.boldtext, html[data-theme="dark"] #wholediv .deposit_withdraw .international p.boldtext { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw .domestic ol li b, html.dark #wholediv .deposit_withdraw .international ol li b, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic ol li b, html[data-theme="dark"] #wholediv .deposit_withdraw .international ol li b { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #ach_setup_div .form-group p[style*="#666666"], html.dark #wholediv .deposit_withdraw #ach_setup_div p[style*="#666666"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div .form-group p[style*="#666666"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div p[style*="#666666"] { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #ach_setup_div em.step_lbl, html.dark #wholediv .deposit_withdraw .ach_setup em.step_lbl, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div em.step_lbl, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup em.step_lbl { color: var(--invest3-link-hover) !important; } html.dark #wholediv .deposit_withdraw .tbl_note b[style*="#003366"], html.dark #wholediv .deposit_withdraw .tbl_note b[style*="003366"], html[data-theme="dark"] #wholediv .deposit_withdraw .tbl_note b[style*="#003366"], html[data-theme="dark"] #wholediv .deposit_withdraw .tbl_note b[style*="003366"] { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #ach_setup_div .form-group label, html.dark #wholediv .deposit_withdraw .ach_setup .form-group label, html.dark #wholediv .deposit_withdraw .ach_setup label.radio-inline, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div .form-group label, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .form-group label, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup label.radio-inline { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .form-control, html.dark #wholediv .deposit_withdraw #ach_setup_div .form-control, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .form-control, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div .form-control { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .ach-info, html.dark #wholediv .deposit_withdraw #ach_setup_div .ach-info, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .ach-info, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div .ach-info { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .error.bs-callout-danger, html.dark #wholediv .deposit_withdraw .ach_setup .ach-error, html.dark #wholediv .deposit_withdraw #ach_setup_div .error.bs-callout-danger, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .error.bs-callout-danger, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .ach-error, html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div .error.bs-callout-danger { background-color: var(--invest3-error-bg) !important; border-color: var(--invest3-error-border) !important; color: var(--invest3-error-text) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .ach_preview_form, html.dark #wholediv .deposit_withdraw .ach_setup .ach_preview_form td, html.dark #wholediv .deposit_withdraw .ach_setup .ach_preview_form p, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .ach_preview_form, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .ach_preview_form td, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .ach_preview_form p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .ach_preview_form span, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .ach_preview_form span { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .lnks a, html.dark #wholediv .deposit_withdraw .ach_setup .actions a, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .lnks a, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .actions a { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .ach_setup .chg_info, html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup .chg_info { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .ach_setup[style*="9FBCE2"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup[style*="9FBCE2"] { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv .deposit_withdraw #ach_setup_div input[type="checkbox"], html.dark #wholediv .deposit_withdraw #ach_setup_div input[type="radio"], html.dark #wholediv .deposit_withdraw .ach_setup input[type="checkbox"], html.dark #wholediv .deposit_withdraw .ach_setup input[type="radio"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div input[type="checkbox"], html[data-theme="dark"] #wholediv .deposit_withdraw #ach_setup_div input[type="radio"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup input[type="checkbox"], html[data-theme="dark"] #wholediv .deposit_withdraw .ach_setup input[type="radio"] { accent-color: var(--invest3-primary); } /* Fund history — display criteria (#display_critieria): orderbar PNG + #104070 labels on white */ html.dark #wholediv .deposit_withdraw .history_sel, html[data-theme="dark"] #wholediv .deposit_withdraw .history_sel { background-color: var(--invest3-card) !important; background-image: none !important; border: 1px solid var(--invest3-card-border) !important; border-left-color: var(--invest3-card-border) !important; border-right-color: var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35); border-radius: 4px; } html.dark #wholediv .deposit_withdraw .history_sel .main, html.dark #wholediv .deposit_withdraw .sel.history_sel .main, html[data-theme="dark"] #wholediv .deposit_withdraw .history_sel .main, html[data-theme="dark"] #wholediv .deposit_withdraw .sel.history_sel .main { background: transparent !important; background-image: none !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .history_sel .main.plain > label:first-of-type, html[data-theme="dark"] #wholediv .deposit_withdraw .history_sel .main.plain > label:first-of-type { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .history_sel .main.plain > label:not(:first-of-type), html[data-theme="dark"] #wholediv .deposit_withdraw .history_sel .main.plain > label:not(:first-of-type) { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #display_critieria select, html.dark #wholediv .deposit_withdraw .history_sel .main select.conditions, html[data-theme="dark"] #wholediv .deposit_withdraw #display_critieria select, html[data-theme="dark"] #wholediv .deposit_withdraw .history_sel .main select.conditions { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw #display_critieria input[type="checkbox"], html[data-theme="dark"] #wholediv .deposit_withdraw #display_critieria input[type="checkbox"] { accent-color: var(--invest3-primary); } html.dark #wholediv .deposit_withdraw #fundmgmt-accountId, html.dark #wholediv .deposit_withdraw .title_list .accts_wr select, html[data-theme="dark"] #wholediv .deposit_withdraw #fundmgmt-accountId, html[data-theme="dark"] #wholediv .deposit_withdraw .title_list .accts_wr select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw #acats-new, html.dark #wholediv .deposit_withdraw #transfer-entry-page, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new, html[data-theme="dark"] #wholediv .deposit_withdraw #transfer-entry-page { background-color: transparent !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #transfer-entry-page .transfer-entry-title, html[data-theme="dark"] #wholediv .deposit_withdraw #transfer-entry-page .transfer-entry-title { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #transfer-entry-page .transfer-entry-content, html[data-theme="dark"] #wholediv .deposit_withdraw #transfer-entry-page .transfer-entry-content { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #transfer-entry-page #acat-entry, html.dark #wholediv .deposit_withdraw #transfer-entry-page #rollover-entry, html[data-theme="dark"] #wholediv .deposit_withdraw #transfer-entry-page #acat-entry, html[data-theme="dark"] #wholediv .deposit_withdraw #transfer-entry-page #rollover-entry { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-row-alt) !important; } /* * ACAT ineligible banner (#acat-ineligible): acat.css uses light grey + pale blue border — washes out on dark card. */ html.dark #wholediv .deposit_withdraw #acat-ineligible, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-ineligible { background-color: var(--invest3-info-bg) !important; border-color: var(--invest3-primary-tint-42) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #acat-ineligible a, html.dark #wholediv .deposit_withdraw #acat-ineligible a.stdlink, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-ineligible a, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-ineligible a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acat-ineligible a:hover, html.dark #wholediv .deposit_withdraw #acat-ineligible a:focus-visible, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-ineligible a:hover, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-ineligible a:focus-visible { color: var(--invest3-link-hover) !important; } /* * ACAT type mismatch modal (#acat-type-mismatch): acat.css uses #fefefe panel, light gray rails, dark body copy. */ html.dark #wholediv .deposit_withdraw #acats-new #acat-type-mismatch.modal, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #acat-type-mismatch.modal { background-color: var(--invest3-shadow-72) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .modal-content, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .modal-content { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 16px 48px var(--invest3-shadow-55) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .modal-title, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .modal-title { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .modal-subtitle, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .modal-subtitle { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .gray-box, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .gray-box { border-top-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; background-color: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .gray-box > div[style*="font-size"], html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .gray-box > div[style*="font-size"] { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .steps-ins, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .steps-ins { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-card) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .step-title, html.dark #wholediv .deposit_withdraw #acat-type-mismatch .text-wrapper-4, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .step-title, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .text-wrapper-4 { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .span, html.dark #wholediv .deposit_withdraw #acat-type-mismatch .open-a-corresponding, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .span, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .open-a-corresponding { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .italic, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .italic { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .div-2 ol, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .div-2 ol { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch .line, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .line { opacity: 0.85; filter: brightness(1.15); } /* Step number circles (.overlap-group): acat.css uses orange — use primary blue in dark */ html.dark #wholediv .deposit_withdraw #acat-type-mismatch .overlap-group, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch .overlap-group { background-color: var(--invest3-primary) !important; } html.dark #wholediv .deposit_withdraw #acats-new #acat-type-mismatch .close:hover, html.dark #wholediv .deposit_withdraw #acats-new #acat-type-mismatch .close:focus, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #acat-type-mismatch .close:hover, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #acat-type-mismatch .close:focus { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch #acat-open-acct, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch #acat-open-acct { background-color: var(--invest3-primary) !important; border-color: var(--invest3-primary) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #acat-type-mismatch #acat-open-acct:hover, html.dark #wholediv .deposit_withdraw #acat-type-mismatch #acat-open-acct:focus-visible, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch #acat-open-acct:hover, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-type-mismatch #acat-open-acct:focus-visible { background-color: var(--invest3-primary-hover) !important; border-color: var(--invest3-primary-hover) !important; } html.dark #wholediv .deposit_withdraw #acats-new .step1 h1, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step1 h1 { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acats-new .search-bar, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .search-bar { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .deposit_withdraw #acats-new #id-participant, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-participant { background-color: transparent !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #acats-new .firm, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .firm { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-row-alt) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acats-new .other-options, html.dark #wholediv .deposit_withdraw #acats-new .other-options div, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .other-options, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .other-options div { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acats-new .what-type, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .what-type { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acats-new .step2 h4, html.dark #wholediv .deposit_withdraw #acats-new .step3 h4, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step2 h4, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step3 h4 { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acats-new label, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new label { color: var(--invest3-text-muted) !important; } /* Step 3 Full/Partial transfer radios: brighter labels + dark-appropriate selected chip (acat.css uses #E2EFFF / #4489DD). */ html.dark #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-wrapper, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-wrapper { border-color: var(--invest3-card-border) !important; background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-label, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-label { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-wrapper.radio-checked, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-wrapper.radio-checked { border-color: var(--invest3-primary) !important; background-color: var(--invest3-primary-tint-20) !important; } html.dark #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-wrapper.radio-checked .radio-label, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-transfer-type-wr .radio-wrapper.radio-checked .radio-label { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acats-new .step2 input, html.dark #wholediv .deposit_withdraw #acats-new .step2 select, html.dark #wholediv .deposit_withdraw #acats-new .step3 input, html.dark #wholediv .deposit_withdraw #acats-new .step3 select, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step2 input, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step2 select, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step3 input, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step3 select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw #acats-new select, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new select { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-primary) !important; background-image: none !important; } /* Account type dropdown: match other fields (subtle border, not primary ring on every select). */ html.dark #wholediv .deposit_withdraw #acats-new #acct-type, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #acct-type { background-color: var(--invest3-row-alt) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } /* * Partial transfer step 3: option / mutual fund expand rows (#opt-expand-*, #mf-expand-*). * acat.css sets td:nth-child(2) to #f4f4f4; override for dark canvas + readable controls. */ html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand td:nth-child(2), html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand td:nth-child(2), html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand td:nth-child(2), html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand td:nth-child(2) { background-color: var(--invest3-row-alt) !important; border: 1px solid var(--invest3-card-border) !important; border-radius: 4px; } html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand label.bl, html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand label.bl, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand label.bl, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand label.bl { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand td:nth-child(2) label:not(.bl), html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand td:nth-child(2) label:not(.bl) { color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand input[disabled]:not([type="radio"]), html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .opt-expand input[disabled]:not([type="radio"]) { background-color: var(--invest3-card) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; opacity: 1 !important; } html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand select.js-mf-family, html.dark #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand select.js-mf-fund, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand select.js-mf-family, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #id-partial-sub-body .mf-expand select.js-mf-fund { border-color: var(--invest3-card-border) !important; } /* * Partial cash amount (#cashAmountInput): focus ring on the outer span (:focus-within), not on #id-partial-cash-amount. */ #wholediv .deposit_withdraw #acats-new #cashAmountInput { display: inline-flex; align-items: center; border-radius: 4px; border: 1px solid var(--invest3-card-border); background-color: var(--invest3-card); color: var(--invest3-text); padding: 10px !important; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #wholediv .deposit_withdraw #acats-new #cashAmountInput:focus-within { border-color: var(--invest3-primary); box-shadow: 0 0 0 1px var(--invest3-primary); } #wholediv .deposit_withdraw #acats-new #cashAmountInput #id-partial-cash-amount { background-color: transparent !important; color: var(--invest3-text) !important; border: 0 !important; box-shadow: none !important; outline: none !important; } #wholediv .deposit_withdraw #acats-new #cashAmountInput #id-partial-cash-amount:focus, #wholediv .deposit_withdraw #acats-new #cashAmountInput #id-partial-cash-amount:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; } #wholediv .deposit_withdraw #acats-new #cashAmountInput #id-partial-cash-amount::placeholder { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acats-new #cashAmountInput, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #cashAmountInput { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #wholediv .deposit_withdraw #acats-new #cashAmountInput:focus-within, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #cashAmountInput:focus-within { border-color: var(--invest3-primary) !important; box-shadow: 0 0 0 1px var(--invest3-primary) !important; } html.dark #wholediv .deposit_withdraw #acats-new #cashAmountInput #id-partial-cash-amount, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new #cashAmountInput #id-partial-cash-amount { background-color: transparent !important; color: var(--invest3-text) !important; border-color: transparent !important; } /* * Partial transfer symbol field: show focus on .security-details-symbol-wr, not on the inner input. */ #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr { display: inline-flex; align-items: center; flex-wrap: nowrap; border-radius: 4px; border: 1px solid var(--invest3-card-border); background-color: var(--invest3-card); padding: 3px 8px 3px 6px; min-height: 32px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr:focus-within { border-color: var(--invest3-primary); box-shadow: 0 0 0 1px var(--invest3-primary); } #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr input[id^="js-security-details-symbol-"] { background-color: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--invest3-text) !important; outline: none !important; } #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr input[id^="js-security-details-symbol-"]:focus, #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr input[id^="js-security-details-symbol-"]:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; } #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr input[id^="js-security-details-symbol-"]::placeholder { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr { background-color: var(--invest3-row-alt) !important; } html.dark #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr input[id^="js-security-details-symbol-"], html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .security-details-symbol-wr input[id^="js-security-details-symbol-"] { background-color: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--invest3-text) !important; border-color: transparent !important; outline: none !important; } html.dark #wholediv .deposit_withdraw #acats-new hr, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new hr { background-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw #acats-new .tooltip .tooltiptext, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .tooltip .tooltiptext { background: var(--invest3-card) !important; color: var(--invest3-link) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 24px var(--invest3-shadow-45) !important; } html.dark #wholediv .deposit_withdraw #acats-new .step-btn, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step-btn { border-color: var(--invest3-primary) !important; color: var(--invest3-link) !important; background-color: transparent !important; } html.dark #wholediv .deposit_withdraw #acats-new .step-btn:disabled, html[data-theme="dark"] #wholediv .deposit_withdraw #acats-new .step-btn:disabled { color: var(--invest3-text-muted) !important; background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; } /* * ACAT sidebar: .right_4 .blurb.fbg-grey (FAQ + Track transfer) — redesign forces white card + blue h4 bar. */ html.dark #wholediv .deposit_withdraw .right_4 div.blurb.fbg-grey, html[data-theme="dark"] #wholediv .deposit_withdraw .right_4 div.blurb.fbg-grey { background: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; border-radius: 4px; } html.dark #wholediv .deposit_withdraw .right_4 div.blurb.fbg-grey h4, html[data-theme="dark"] #wholediv .deposit_withdraw .right_4 div.blurb.fbg-grey h4 { background: var(--invest3-title-bar) !important; color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acat-faq, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acat-faq .frame, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .frame { color: var(--invest3-link) !important; box-sizing: border-box !important; max-width: 100% !important; padding: 0.75em 0.65em !important; } html.dark #wholediv .deposit_withdraw #acat-faq .col-toggle, html.dark #wholediv .deposit_withdraw #acat-faq .col-toggle .toggle-indent-second, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .col-toggle, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .col-toggle .toggle-indent-second { color: var(--invest3-link) !important; } /* * ACAT sidebar FAQ (blurb.php): acat.css uses ::before + / unicode; on dark theme those often * disappear (stacking / font). Match funds_availability_info FAQ: SVG + padding, no pseudo text. */ html.dark #wholediv .deposit_withdraw #acat-faq .col-toggle, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .col-toggle { box-sizing: border-box !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 4px !important; background-repeat: no-repeat !important; background-size: 11px !important; background-position: 2px 4px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Crect x='0.75' y='0.75' width='10.5' height='10.5' rx='1' stroke='%236FA6F8'/%3E%3Cpath d='M6 3.25v5.5M3.25 6h5.5' stroke='%236FA6F8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") !important; } html.dark #wholediv .deposit_withdraw #acat-faq .col-toggle.open, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .col-toggle.open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Crect x='0.75' y='0.75' width='10.5' height='10.5' rx='1' stroke='%236FA6F8'/%3E%3Cpath d='M3.25 6h5.5' stroke='%236FA6F8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") !important; } html.dark #wholediv .deposit_withdraw #acat-faq .col-toggle::before, html.dark #wholediv .deposit_withdraw #acat-faq .open::before, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .col-toggle::before, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .open::before { content: none !important; display: none !important; } html.dark #wholediv .deposit_withdraw #acat-faq .col-content, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .col-content { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw #acat-faq .col-content a, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq .col-content a { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw #acat-faq hr, html[data-theme="dark"] #wholediv .deposit_withdraw #acat-faq hr { border-top-color: var(--invest3-card-border) !important; } /* Track transfer: inline #787E7E / #4489DD on blurb.php — beat inline with !important */ html.dark #wholediv .deposit_withdraw .right_4 .video_box.box > div, html[data-theme="dark"] #wholediv .deposit_withdraw .right_4 .video_box.box > div { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .right_4 .video_box.box a, html[data-theme="dark"] #wholediv .deposit_withdraw .right_4 .video_box.box a { color: var(--invest3-link) !important; } /* * Deposit/Withdraw home: #104070 / #2A528E headings fail contrast on dark card; FAQ +/- icons need brighter stroke. */ html.dark #wholediv .deposit_withdraw .sub_header, html.dark #wholediv .deposit_withdraw .sub_header1, html.dark #wholediv .deposit_withdraw .domestic .sub_header, html.dark #wholediv .deposit_withdraw .international .sub_header, html[data-theme="dark"] #wholediv .deposit_withdraw .sub_header, html[data-theme="dark"] #wholediv .deposit_withdraw .sub_header1, html[data-theme="dark"] #wholediv .deposit_withdraw .domestic .sub_header, html[data-theme="dark"] #wholediv .deposit_withdraw .international .sub_header { color: var(--invest3-link-hover) !important; } html.dark #wholediv .deposit_withdraw .funds_availability_info.main, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info.main { background-color: var(--invest3-card) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv .deposit_withdraw .funds_availability_info .faq > p, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq > p { color: var(--invest3-link-hover) !important; } html.dark #wholediv .deposit_withdraw .funds_availability_info .faq > h1, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq > h1 { color: var(--invest3-link) !important; display: flex !important; align-items: center !important; line-height: 1.35 !important; margin-top: 0.35em !important; margin-bottom: 0.35em !important; background-repeat: no-repeat !important; background-size: 11px !important; /* Vertically center icon in row; flex keeps label aligned with icon */ background-position: left center !important; /* Brighter stroke than #06c default SVG (square-plus / square-minus) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Crect x='0.75' y='0.75' width='10.5' height='10.5' rx='1' stroke='%236FA6F8'/%3E%3Cpath d='M6 3.25v5.5M3.25 6h5.5' stroke='%236FA6F8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") !important; } html.dark #wholediv .deposit_withdraw .funds_availability_info .faq > h1.collapse, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq > h1.collapse { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Crect x='0.75' y='0.75' width='10.5' height='10.5' rx='1' stroke='%236FA6F8'/%3E%3Cpath d='M3.25 6h5.5' stroke='%236FA6F8' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") !important; } /* Body copy like #acat-faq .col-content; method names in stay link blue */ html.dark #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content, html.dark #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content li, html.dark #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content .note, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content li, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content .note { color: var(--invest3-text-muted) !important; } html.dark #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content strong, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content strong { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content a, html[data-theme="dark"] #wholediv .deposit_withdraw .funds_availability_info .faq .faq_content a { color: var(--invest3-link) !important; } html.dark #wholediv .deposit_withdraw .fundmgmt .left, html[data-theme="dark"] #wholediv .deposit_withdraw .fundmgmt .left { border-right-color: var(--invest3-card-border) !important; } html.dark #wholediv .deposit_withdraw .fundmgmt .right, html[data-theme="dark"] #wholediv .deposit_withdraw .fundmgmt .right { border-left-color: var(--invest3-card-border) !important; } /* Deposit sidebar: Quick Links arrow (list-blue-arrow #06c → invest3 link blue) */ html.dark #wholediv .deposit_withdraw .right_4 ul.arrow_ul li, html[data-theme="dark"] #wholediv .deposit_withdraw .right_4 ul.arrow_ul li { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath d='M4%2C0%2C8%2C5H0Z' transform='translate(5) rotate(90)' fill='%236FA6F8'/%3E%3C/svg%3E") !important; } /* * Fixed Income (Bexdata LoginPage iframe): no vendor dark theme. Dark mode only: invert composite * approximates a dark UI; hues skew, logos/images may look wrong — acceptable tradeoff for legacy shell. */ html.dark #wholediv .fixedincome .template_t .left_12, html[data-theme="dark"] #wholediv .fixedincome .template_t .left_12, html.dark #maincontent .fixedincome .template_t .left_12, html[data-theme="dark"] #maincontent .fixedincome .template_t .left_12 { box-shadow: none !important; } html.dark #wholediv .fixedincome .template_t .left_12 > div > a, html[data-theme="dark"] #wholediv .fixedincome .template_t .left_12 > div > a, html.dark #maincontent .fixedincome .template_t .left_12 > div > a, html[data-theme="dark"] #maincontent .fixedincome .template_t .left_12 > div > a { color: var(--invest3-link) !important; } html.dark #wholediv .fixedincome .trading_disclaimer, html[data-theme="dark"] #wholediv .fixedincome .trading_disclaimer, html.dark #maincontent .fixedincome .trading_disclaimer, html[data-theme="dark"] #maincontent .fixedincome .trading_disclaimer { color: var(--invest3-text-muted) !important; } html.dark #wholediv .fixedincome #iframe_fixedincome, html[data-theme="dark"] #wholediv .fixedincome #iframe_fixedincome, html.dark #maincontent .fixedincome #iframe_fixedincome, html[data-theme="dark"] #maincontent .fixedincome #iframe_fixedincome { filter: invert(1) hue-rotate(180deg) !important; -webkit-filter: invert(1) hue-rotate(180deg) !important; } /* * Securities Lending enrollment (#/content/lending/enroll): .securitiesloan — orange SVG #f18043, * legacy blues (#386EBF / #3C548B), FAQ chevrons; align with invest3 link tokens for contrast. */ html.dark #wholediv .securitiesloan, html[data-theme="dark"] #wholediv .securitiesloan { color: var(--invest3-text-muted) !important; } html.dark #wholediv .securitiesloan .banner .jumbo-title, html[data-theme="dark"] #wholediv .securitiesloan .banner .jumbo-title { color: var(--invest3-text) !important; } html.dark #wholediv .securitiesloan .banner .jumbo-title font, html.dark #wholediv .securitiesloan .banner font[color="#fca261"], html.dark #wholediv .securitiesloan .banner font[color*="fca261"], html[data-theme="dark"] #wholediv .securitiesloan .banner .jumbo-title font, html[data-theme="dark"] #wholediv .securitiesloan .banner font[color="#fca261"], html[data-theme="dark"] #wholediv .securitiesloan .banner font[color*="fca261"] { color: var(--invest3-link) !important; } html.dark #wholediv .securitiesloan .banner p, html[data-theme="dark"] #wholediv .securitiesloan .banner p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .securitiesloan .steps-title, html.dark #wholediv .securitiesloan .subtitle h2, html.dark #wholediv .securitiesloan .top-stocks h2, html[data-theme="dark"] #wholediv .securitiesloan .steps-title, html[data-theme="dark"] #wholediv .securitiesloan .subtitle h2, html[data-theme="dark"] #wholediv .securitiesloan .top-stocks h2 { color: var(--invest3-text) !important; } html.dark #wholediv .securitiesloan .steps, html[data-theme="dark"] #wholediv .securitiesloan .steps { color: var(--invest3-text-muted) !important; } html.dark #wholediv .securitiesloan .steps .box p b, html[data-theme="dark"] #wholediv .securitiesloan .steps .box p b { color: var(--invest3-link) !important; } /* SVG fill #f18043 → blue (hue-shift) */ html.dark #wholediv .securitiesloan .steps .box img[src*="icon-securities-lending"], html[data-theme="dark"] #wholediv .securitiesloan .steps .box img[src*="icon-securities-lending"] { filter: brightness(1.06) saturate(1.08) hue-rotate(172deg); } html.dark #wholediv .securitiesloan .subtitle p, html.dark #wholediv .securitiesloan #enroll p, html.dark #wholediv .securitiesloan #equity-ineligible p, html[data-theme="dark"] #wholediv .securitiesloan .subtitle p, html[data-theme="dark"] #wholediv .securitiesloan #enroll p, html[data-theme="dark"] #wholediv .securitiesloan #equity-ineligible p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .securitiesloan a.stdlink, html.dark #wholediv .securitiesloan #faq a, html.dark #wholediv .securitiesloan #disclosure a, html[data-theme="dark"] #wholediv .securitiesloan a.stdlink, html[data-theme="dark"] #wholediv .securitiesloan #faq a, html[data-theme="dark"] #wholediv .securitiesloan #disclosure a { color: var(--invest3-link) !important; } html.dark #wholediv .securitiesloan a.stdlink:hover, html.dark #wholediv .securitiesloan a.stdlink:focus-visible, html.dark #wholediv .securitiesloan #faq a:hover, html.dark #wholediv .securitiesloan #faq a:focus-visible, html.dark #wholediv .securitiesloan #disclosure a:hover, html.dark #wholediv .securitiesloan #disclosure a:focus-visible, html[data-theme="dark"] #wholediv .securitiesloan a.stdlink:hover, html[data-theme="dark"] #wholediv .securitiesloan a.stdlink:focus-visible, html[data-theme="dark"] #wholediv .securitiesloan #faq a:hover, html[data-theme="dark"] #wholediv .securitiesloan #faq a:focus-visible, html[data-theme="dark"] #wholediv .securitiesloan #disclosure a:hover, html[data-theme="dark"] #wholediv .securitiesloan #disclosure a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .securitiesloan #disclosure p, html.dark #wholediv .securitiesloan #faq > a > p, html.dark #wholediv .securitiesloan #agreement h3, html[data-theme="dark"] #wholediv .securitiesloan #disclosure p, html[data-theme="dark"] #wholediv .securitiesloan #faq > a > p, html[data-theme="dark"] #wholediv .securitiesloan #agreement h3 { color: var(--invest3-text) !important; } html.dark #wholediv .securitiesloan .fa-plus, html.dark #wholediv .securitiesloan .fa-minus, html[data-theme="dark"] #wholediv .securitiesloan .fa-plus, html[data-theme="dark"] #wholediv .securitiesloan .fa-minus { -webkit-text-stroke: 0 transparent !important; color: var(--invest3-link) !important; } html.dark #wholediv .securitiesloan #disclosure li, html.dark #wholediv .securitiesloan #faqs, html.dark #wholediv .securitiesloan #faqs p, html.dark #wholediv .securitiesloan #faqs li, html[data-theme="dark"] #wholediv .securitiesloan #disclosure li, html[data-theme="dark"] #wholediv .securitiesloan #faqs, html[data-theme="dark"] #wholediv .securitiesloan #faqs p, html[data-theme="dark"] #wholediv .securitiesloan #faqs li { color: var(--invest3-text-muted) !important; } html.dark #wholediv .securitiesloan .form, html[data-theme="dark"] #wholediv .securitiesloan .form { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .securitiesloan #enroll button, html.dark #wholediv .securitiesloan #equity-ineligible button, html.dark #wholediv .securitiesloan .open-in-new-window, html[data-theme="dark"] #wholediv .securitiesloan #enroll button, html[data-theme="dark"] #wholediv .securitiesloan #equity-ineligible button, html[data-theme="dark"] #wholediv .securitiesloan .open-in-new-window { background-color: var(--invest3-primary) !important; border-color: transparent !important; color: var(--invest3-text) !important; } html.dark #wholediv .securitiesloan #enroll button:hover, html.dark #wholediv .securitiesloan #enroll button:focus-visible, html.dark #wholediv .securitiesloan .open-in-new-window:hover, html.dark #wholediv .securitiesloan .open-in-new-window:focus-visible, html[data-theme="dark"] #wholediv .securitiesloan #enroll button:hover, html[data-theme="dark"] #wholediv .securitiesloan #enroll button:focus-visible, html[data-theme="dark"] #wholediv .securitiesloan .open-in-new-window:hover, html[data-theme="dark"] #wholediv .securitiesloan .open-in-new-window:focus-visible { background-color: var(--invest3-primary-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv .securitiesloan .status-msg, html.dark #wholediv .securitiesloan #enroll h3, html.dark #wholediv .securitiesloan #equity-ineligible h3, html.dark #wholediv .securitiesloan #agreement h4, html[data-theme="dark"] #wholediv .securitiesloan .status-msg, html[data-theme="dark"] #wholediv .securitiesloan #enroll h3, html[data-theme="dark"] #wholediv .securitiesloan #equity-ineligible h3, html[data-theme="dark"] #wholediv .securitiesloan #agreement h4 { color: var(--invest3-link) !important; } html.dark #wholediv .securitiesloan #agreement .form > p, html[data-theme="dark"] #wholediv .securitiesloan #agreement .form > p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .securitiesloan input[type="text"], html[data-theme="dark"] #wholediv .securitiesloan input[type="text"] { background-color: var(--invest3-row-alt) !important; border: 1px solid var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #wholediv .securitiesloan #agreement img[src*="doc_icon"], html[data-theme="dark"] #wholediv .securitiesloan #agreement img[src*="doc_icon"] { filter: brightness(1.35) contrast(1.05); } /* * Tax Center (/content/myaccount/taxcenter/) + same shell as IRA / security docs: * .left_4 .nav-menu, .right_12|.left_12 > .content-bordered (base.css #003366 / #CCC / white cards). */ /* Floated .left_4 + .right_12: without clearing, .template_t height collapses and columns overlap footer / mis-measure. */ html.dark #wholediv .template_t::after, html[data-theme="dark"] #wholediv .template_t::after { content: ""; display: table; clear: both; } html.dark #wholediv .left_4 .nav-menu, html[data-theme="dark"] #wholediv .left_4 .nav-menu { position: static !important; top: auto !important; left: auto !important; transform: none !important; box-sizing: border-box; background-color: var(--invest3-card) !important; border: 1px solid var(--invest3-card-border) !important; border-radius: 4px; box-shadow: 0 2px 12px var(--invest3-shadow-35); padding: 14px 12px; margin-bottom: 20px; } html.dark #wholediv .left_4 .nav-menu a, html.dark #wholediv .left_4 .nav-menu ul li a, html[data-theme="dark"] #wholediv .left_4 .nav-menu a, html[data-theme="dark"] #wholediv .left_4 .nav-menu ul li a { color: var(--invest3-link) !important; display: block !important; } html.dark #wholediv .left_4 .nav-menu b, html[data-theme="dark"] #wholediv .left_4 .nav-menu b { color: inherit !important; } html.dark #wholediv .left_4 .nav-menu a:hover, html.dark #wholediv .left_4 .nav-menu ul li a:hover, html.dark #wholediv .left_4 .nav-menu a:focus-visible, html.dark #wholediv .left_4 .nav-menu ul li a:focus-visible, html[data-theme="dark"] #wholediv .left_4 .nav-menu a:hover, html[data-theme="dark"] #wholediv .left_4 .nav-menu ul li a:hover, html[data-theme="dark"] #wholediv .left_4 .nav-menu a:focus-visible, html[data-theme="dark"] #wholediv .left_4 .nav-menu ul li a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .left_4 .nav-menu a.current, html.dark #wholediv .left_4 .nav-menu .current, html[data-theme="dark"] #wholediv .left_4 .nav-menu a.current, html[data-theme="dark"] #wholediv .left_4 .nav-menu .current { background-color: var(--invest3-row-alt) !important; color: var(--invest3-link) !important; } html.dark #wholediv .left_4 .nav-menu .hr-grey-menu:first-child, html[data-theme="dark"] #wholediv .left_4 .nav-menu .hr-grey-menu:first-child { border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv .left_4 > div:not(.nav-menu):not(.blurb), html[data-theme="dark"] #wholediv .left_4 > div:not(.nav-menu):not(.blurb) { color: var(--invest3-text-muted) !important; } html.dark #wholediv .left_4 > div:not(.nav-menu):not(.blurb) a, html.dark #wholediv .left_4 > div:not(.nav-menu):not(.blurb) b, html[data-theme="dark"] #wholediv .left_4 > div:not(.nav-menu):not(.blurb) a, html[data-theme="dark"] #wholediv .left_4 > div:not(.nav-menu):not(.blurb) b { color: var(--invest3-link) !important; } html.dark #wholediv .left_4 > div:not(.nav-menu):not(.blurb) b, html[data-theme="dark"] #wholediv .left_4 > div:not(.nav-menu):not(.blurb) b { color: var(--invest3-text) !important; } html.dark #wholediv .left_12 > .content-bordered, html.dark #wholediv .right_12 > .content-bordered, html[data-theme="dark"] #wholediv .left_12 > .content-bordered, html[data-theme="dark"] #wholediv .right_12 > .content-bordered { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; box-shadow: 0 2px 12px var(--invest3-shadow-35); } html.dark #wholediv .content-bordered h3, html[data-theme="dark"] #wholediv .content-bordered h3 { color: var(--invest3-text) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .content-bordered h4, html[data-theme="dark"] #wholediv .content-bordered h4 { color: var(--invest3-text) !important; } html.dark #wholediv .content-bordered p, html.dark #wholediv .content-bordered li, html.dark #wholediv .content-bordered td, html.dark #wholediv .content-bordered th, html.dark #wholediv .content-bordered i, html[data-theme="dark"] #wholediv .content-bordered p, html[data-theme="dark"] #wholediv .content-bordered li, html[data-theme="dark"] #wholediv .content-bordered td, html[data-theme="dark"] #wholediv .content-bordered th, html[data-theme="dark"] #wholediv .content-bordered i { color: var(--invest3-text-muted) !important; } html.dark #wholediv .content-bordered a, html.dark #wholediv .content-bordered a.stdlink, html[data-theme="dark"] #wholediv .content-bordered a, html[data-theme="dark"] #wholediv .content-bordered a.stdlink { color: var(--invest3-link) !important; } html.dark #wholediv .content-bordered a:hover, html.dark #wholediv .content-bordered a:focus-visible, html[data-theme="dark"] #wholediv .content-bordered a:hover, html[data-theme="dark"] #wholediv .content-bordered a:focus-visible { color: var(--invest3-link-hover) !important; } html.dark #wholediv .content-bordered strong, html.dark #wholediv .content-bordered b, html[data-theme="dark"] #wholediv .content-bordered strong, html[data-theme="dark"] #wholediv .content-bordered b { color: var(--invest3-text) !important; } html.dark #wholediv .content-bordered .border-box, html[data-theme="dark"] #wholediv .content-bordered .border-box { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; box-shadow: none !important; } html.dark #wholediv .content-bordered .fbg-grey, html.dark #wholediv .content-bordered .row.fbg-grey, html[data-theme="dark"] #wholediv .content-bordered .fbg-grey, html[data-theme="dark"] #wholediv .content-bordered .row.fbg-grey { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .content-bordered .hr-grey-menu, html.dark #wholediv .content-bordered .hr-grey-menu-slim, html[data-theme="dark"] #wholediv .content-bordered .hr-grey-menu, html[data-theme="dark"] #wholediv .content-bordered .hr-grey-menu-slim { border-top-color: var(--invest3-card-border) !important; } html.dark #wholediv .content-bordered table.table_template thead th, html.dark #wholediv .content-bordered table.table_template tbody th, html[data-theme="dark"] #wholediv .content-bordered table.table_template thead th, html[data-theme="dark"] #wholediv .content-bordered table.table_template tbody th { background-color: var(--invest3-title-bar) !important; color: var(--invest3-text) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .content-bordered table.table_template tbody tr td, html[data-theme="dark"] #wholediv .content-bordered table.table_template tbody tr td { color: var(--invest3-text-muted) !important; border-color: var(--invest3-card-border) !important; } html.dark #wholediv .content-bordered table.table_template tbody tr:hover, html.dark #wholediv .content-bordered table.table_template tbody tr:hover td, html[data-theme="dark"] #wholediv .content-bordered table.table_template tbody tr:hover, html[data-theme="dark"] #wholediv .content-bordered table.table_template tbody tr:hover td { background-color: var(--invest3-row-hover) !important; color: var(--invest3-text) !important; } html.dark #wholediv .content-bordered table.table_template tfoot td, html.dark #wholediv .content-bordered table.table_template tfoot th, html[data-theme="dark"] #wholediv .content-bordered table.table_template tfoot td, html[data-theme="dark"] #wholediv .content-bordered table.table_template tfoot th { background-color: var(--invest3-card) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text-muted) !important; } html.dark #wholediv .content-bordered table.table_template caption, html[data-theme="dark"] #wholediv .content-bordered table.table_template caption { color: var(--invest3-link) !important; } html.dark #wholediv .content-bordered .accordion-repeat, html[data-theme="dark"] #wholediv .content-bordered .accordion-repeat { border-top-color: var(--invest3-card-border) !important; border-bottom-color: var(--invest3-card-border) !important; } html.dark #wholediv .content-bordered .accordion-repeat .accordion-title, html[data-theme="dark"] #wholediv .content-bordered .accordion-repeat .accordion-title { color: var(--invest3-text) !important; } html.dark #wholediv .content-bordered .accordion-repeat .accordion-content, html.dark #wholediv .content-bordered .accordion-repeat .accordion-content p, html.dark #wholediv .content-bordered .accordion-repeat .accordion-content li, html[data-theme="dark"] #wholediv .content-bordered .accordion-repeat .accordion-content, html[data-theme="dark"] #wholediv .content-bordered .accordion-repeat .accordion-content p, html[data-theme="dark"] #wholediv .content-bordered .accordion-repeat .accordion-content li { color: var(--invest3-text-muted) !important; } /* Light PNG +/- icons are low-contrast on dark card; use simple SVG glyphs. */ html.dark #wholediv .content-bordered .accordion-repeat .accordion-open, html[data-theme="dark"] #wholediv .content-bordered .accordion-repeat .accordion-open { /* fill = --invest3-ds-text-tertiary (#9699a0) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239699A0' d='M7 1h2v14H7zM1 7h14v2H1z'/%3E%3C/svg%3E"); } html.dark #wholediv .content-bordered .accordion-repeat .accordion-close, html[data-theme="dark"] #wholediv .content-bordered .accordion-repeat .accordion-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239699A0' d='M1 7h14v2H1z'/%3E%3C/svg%3E"); } html.dark #wholediv .content-bordered #ret_cal input, html.dark #wholediv .content-bordered #ret_cal select, html.dark #wholediv .content-bordered .selectedDatepicker, html.dark #wholediv .content-bordered #tax_download select, html.dark #wholediv .content-bordered #tax_download input[type="text"], html[data-theme="dark"] #wholediv .content-bordered #ret_cal input, html[data-theme="dark"] #wholediv .content-bordered #ret_cal select, html[data-theme="dark"] #wholediv .content-bordered .selectedDatepicker, html[data-theme="dark"] #wholediv .content-bordered #tax_download select, html[data-theme="dark"] #wholediv .content-bordered #tax_download input[type="text"] { background-color: var(--invest3-row-alt) !important; border-color: var(--invest3-card-border) !important; color: var(--invest3-text) !important; } html.dark #wholediv .content-bordered #result, html[data-theme="dark"] #wholediv .content-bordered #result { color: var(--invest3-text) !important; } html.dark #wholediv .content-bordered #pageerror, html[data-theme="dark"] #wholediv .content-bordered #pageerror { color: var(--invest3-error-text) !important; } html.dark #wholediv .content-bordered #tax_download input[type="radio"], html[data-theme="dark"] #wholediv .content-bordered #tax_download input[type="radio"] { accent-color: var(--invest3-primary); } html.dark #wholediv .content-bordered font[style*="color:red"], html.dark #wholediv .content-bordered font[style*="color: red"], html[data-theme="dark"] #wholediv .content-bordered font[style*="color:red"], html[data-theme="dark"] #wholediv .content-bordered font[style*="color: red"] { color: var(--invest3-accent) !important; } html.dark #wholediv .content-bordered [style*="background:#F3F9FF"], html.dark #wholediv .content-bordered [style*="background: #F3F9FF"], html[data-theme="dark"] #wholediv .content-bordered [style*="background:#F3F9FF"], html[data-theme="dark"] #wholediv .content-bordered [style*="background: #F3F9FF"] { background-color: var(--invest3-info-bg) !important; color: var(--invest3-text-muted) !important; } /* * Online Security Center (/content/education/onlinesecurity/*): .security hub + subpages. * redesign.css hides .banner… .content and applies light card shadows; restore hero + tokens. */ html.dark #wholediv .banner.custom_securityonlinesecurity .content, html.dark #wholediv .banner.custom_securityprotectyourself .content, html.dark #wholediv .banner.custom_securityonlineprotectionguarantee .content, html.dark #wholediv .banner.custom_securityreportfraud .content, html.dark #wholediv .banner.custom_securityspotfraud .content, html[data-theme="dark"] #wholediv .banner.custom_securityonlinesecurity .content, html[data-theme="dark"] #wholediv .banner.custom_securityprotectyourself .content, html[data-theme="dark"] #wholediv .banner.custom_securityonlineprotectionguarantee .content, html[data-theme="dark"] #wholediv .banner.custom_securityreportfraud .content, html[data-theme="dark"] #wholediv .banner.custom_securityspotfraud .content { display: block !important; width: 100% !important; min-height: 148px !important; height: auto !important; background-color: var(--invest3-ds-elev-03) !important; background-image: none !important; border: 1px solid var(--invest3-card-border) !important; border-radius: 4px; box-shadow: 0 2px 12px var(--invest3-shadow-35); box-sizing: border-box; } html.dark #wholediv .banner.custom_securityonlinesecurity .banner_text h1, html.dark #wholediv .banner.custom_securityprotectyourself .banner_text h1, html.dark #wholediv .banner.custom_securityonlineprotectionguarantee .banner_text h1, html.dark #wholediv .banner.custom_securityreportfraud .banner_text h1, html.dark #wholediv .banner.custom_securityspotfraud .banner_text h1, html[data-theme="dark"] #wholediv .banner.custom_securityonlinesecurity .banner_text h1, html[data-theme="dark"] #wholediv .banner.custom_securityprotectyourself .banner_text h1, html[data-theme="dark"] #wholediv .banner.custom_securityonlineprotectionguarantee .banner_text h1, html[data-theme="dark"] #wholediv .banner.custom_securityreportfraud .banner_text h1, html[data-theme="dark"] #wholediv .banner.custom_securityspotfraud .banner_text h1 { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .security > .content, html[data-theme="dark"] #wholediv .security > .content { background-color: transparent !important; color: var(--invest3-text); } html.dark #wholediv .security .right_12, html.dark #wholediv .security .border-box, html[data-theme="dark"] #wholediv .security .right_12, html[data-theme="dark"] #wholediv .security .border-box { box-shadow: 0 2px 12px var(--invest3-shadow-35) !important; } html.dark #wholediv .security .blurb, html.dark #wholediv .security .blurb p, html[data-theme="dark"] #wholediv .security .blurb, html[data-theme="dark"] #wholediv .security .blurb p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .security .blurb a, html[data-theme="dark"] #wholediv .security .blurb a { color: var(--invest3-link) !important; } html.dark #wholediv .security .blurb b, html[data-theme="dark"] #wholediv .security .blurb b { color: var(--invest3-text) !important; } html.dark #wholediv .security .border-box p, html[data-theme="dark"] #wholediv .security .border-box p { color: var(--invest3-text-muted) !important; } html.dark #wholediv .security .border-box a, html[data-theme="dark"] #wholediv .security .border-box a { color: var(--invest3-link) !important; } html.dark #wholediv .security .border-box a b, html[data-theme="dark"] #wholediv .security .border-box a b { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv #paperless .paperless-title, html[data-theme="dark"] #wholediv #paperless .paperless-title { color: var(--invest3-ds-text-primary) !important; } html.dark #wholediv .security .icon-security, html[data-theme="dark"] #wholediv .security .icon-security { filter: brightness(1.12) contrast(1.06); } html.dark #wholediv #paperless img.paperless-icon[src$=".svg"], html[data-theme="dark"] #wholediv #paperless img.paperless-icon[src$=".svg"] { filter: brightness(1.25) saturate(1.05); } html.dark #wholediv .security.spotfraud .section-header, html[data-theme="dark"] #wholediv .security.spotfraud .section-header { color: var(--invest3-text) !important; } html.dark #wholediv .security.spotfraud hr, html[data-theme="dark"] #wholediv .security.spotfraud hr { border-top-color: var(--invest3-card-border) !important; } /* * DRIP — page h1 (dark): explicit #id + child chain + -webkit-text-fill-color so redesign h1 / any * later sheet cannot leave #2A528E or inherited link tint on the title. */ html.dark div#wholediv > div#maincontent > div.drip > div.title > h1, html.dark div#wholediv div#maincontent div.drip div.title > h1, html.dark div#wholediv div#maincontent div.template_t div.main div.drip div.title > h1, html[data-theme="dark"] div#wholediv > div#maincontent > div.drip > div.title > h1, html[data-theme="dark"] div#wholediv div#maincontent div.drip div.title > h1, html[data-theme="dark"] div#wholediv div#maincontent div.template_t div.main div.drip div.title > h1 { color: var(--invest3-ds-text-primary) !important; -webkit-text-fill-color: var(--invest3-ds-text-primary) !important; }