/* The new look (opt-in). Loaded only when the hf_theme cookie is new, new-light or new-dark (hedgeHeader.php puts it on
   <html data-theme>), after global.css; nobody on the Classic look downloads it. Everything here is scoped to
   html[data-theme^="new"], so even if it were loaded by mistake it would change nothing for Classic.

   Colors: global.css writes every color as var(--hf-<role>, <classic color>). This file gives the roles their new-look
   values: light below, dark further down (for new-dark, and for new, which follows the device). The rest of the file
   reshapes the shared pieces: type, header, tabs, buttons, tables, tooltips, footer. Page-specific layouts come later. */

/* ---------- Colors: light ---------- */
html[data-theme^="new"] {
    color-scheme: light;
    --hf-page-bg: #f1f3f5;
    --hf-surface: #ffffff;
    --hf-surface-alt: #f6f7f9;
    --hf-surface-sunken: #eceff2;
    --hf-table-head-bg: #e3e8ee; /* a step darker than the page (#ebeef2 before 2026-10-26 nearly matched it) */
    --hf-table-head-text: #3f4954; /* the headers' labels, darker than muted text on that band; the dark theme keeps its muted */
    --hf-row-hover: #f4f7fb;
    --hf-row-hover-border: #e2e6ea;
    --hf-text: #262c33;
    --hf-text-strong: #15191e;
    --hf-text-muted: #5b6672;
    --hf-text-faint: #8a949f;
    --hf-text-inverse: #ffffff;
    --hf-link: #1d5fb8;
    --hf-border: #e2e6ea;
    --hf-border-light: #eef0f3;
    --hf-border-strong: #c9d0d7;
    --hf-focus: #1d5fb8;
    --hf-accent: #1d5fb8;
    --hf-accent-bg: #eef4fc;
    --hf-accent-border: #c8dbf3;
    --hf-on-accent: #ffffff; /* text on an accent fill (buttons, tags): white here, dark on the dark theme's pale blue */
    --hf-brand: #f5b400;
    --hf-on-brand: #1a1a1a;
    --hf-highlight-bg: #fff4d1;
    --hf-pos: #0b7a43;
    --hf-pos-bg: #e2f3e9;
    --hf-neg: #c0362c;
    --hf-neg-bg: #fbe6e4;
    --hf-warn-text: #8a5300;
    --hf-fill-strong: #2d333b;
    --hf-fill-muted: #b8c0c9;
    --hf-menu-bg: #1f2329;
    --hf-menu-text: #e9ecef;
    --hf-menu-border: #2d333b;
    --hf-menu-hover-bg: #2d333b;
    --hf-modal-bg: #1f2329;
    --hf-modal-text: #e9ecef;
    --hf-overlay: #0f1216;
    --hf-btn-bg: #ffffff;
    --hf-btn-text: #15191e;
    --hf-hint-bg: #fff4d1;
    --hf-hint-text: #15191e;
    --hf-hint-border: #f5b400;
    --hf-datatip-bg: #1f2329;
    --hf-datatip-text: #f1f3f5;
    --hf-datatip-link: #9cc4ff;
    /* a tooltip over a window (tip_modal, global.js: the Columns window's descriptions), which is as dark as the tooltips:
       the hints' yellow, as the descriptions' own box was before it was retired */
    --hf-modaltip-bg: var(--hf-hint-bg);
    --hf-modaltip-text: var(--hf-hint-text);
    --hf-modaltip-border: var(--hf-hint-border);
    /* the notes at the bottom (hf_toast): the tooltips' dark here; the dark theme's own, as the tooltips' sat too close to the page */
    --nl-toast-bg: #1f2329;
    --nl-toast-line: transparent;
    --hf-footer-bg: #1f2329;
    --hf-footer-text: #a4adb8;
    --hf-hero-bg: #1f2329;
    --hf-hero-text: #e9ecef;
    /* not roles global.css uses: shared by this file only */
    --nl-shadow: 0 6px 24px rgba(16, 24, 40, .12), 0 1px 3px rgba(16, 24, 40, .08);
    --nl-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --nl-font-table: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', Arial, sans-serif;
    /* table cells: Plex at its regular width, a hair heavier than regular (the variable font's 450). The condensed cut at
       400 read soft on Windows: narrow digits close up and thin strokes blur. Headers, chips and map labels stay condensed. */
    --nl-font-data: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Colors: dark (new-dark, or new on a device set to dark) ---------- */
html[data-theme="new-dark"] {
    color-scheme: dark;
    --hf-page-bg: #161a20;
    --hf-surface: #1c2128;
    --hf-surface-alt: #222831;
    --hf-surface-sunken: #2a313b;
    --hf-table-head-bg: #29303a;
    --hf-table-head-text: #aab3bf;
    --hf-row-hover: #252c35;
    --hf-row-hover-border: #3b4451;
    --hf-text: #d9dee4;
    --hf-text-strong: #f1f3f5;
    --hf-text-muted: #aab3bf;
    --hf-text-faint: #808b98;
    --hf-text-inverse: #ffffff;
    --hf-link: #82b2f5;
    --hf-border: #2b323c;
    --hf-border-light: #252b34;
    --hf-border-strong: #3b4451;
    --hf-focus: #82b2f5;
    --hf-accent: #82b2f5;
    --hf-accent-bg: #1d2a3b;
    --hf-accent-border: #2c4363;
    --hf-on-accent: #0f1216;
    --hf-brand: #f7b700;
    --hf-on-brand: #1a1a1a;
    --hf-highlight-bg: #3a3115;
    --hf-pos: #45c283;
    --hf-pos-bg: #173326;
    --hf-neg: #f06a5f;
    --hf-neg-bg: #3a1d1b;
    --hf-warn-text: #f0b45a;
    --hf-fill-strong: #c5ccd5;
    --hf-fill-muted: #4a535f;
    --hf-menu-bg: #0f1216;
    --hf-menu-text: #e7eaee;
    --hf-menu-border: #232830;
    --hf-menu-hover-bg: #232830;
    --hf-modal-bg: #222831;
    --hf-modal-text: #e7eaee;
    --hf-overlay: #000000;
    --hf-btn-bg: #222831;
    --hf-btn-text: #e7eaee;
    --hf-hint-bg: #3a3115;
    --hf-hint-text: #f1f3f5;
    --hf-hint-border: #a07a00;
    --hf-datatip-bg: #2d343e;
    --hf-datatip-text: #f1f3f5;
    --hf-datatip-link: #9cc4ff;
    --hf-modaltip-bg: #3a434f; /* a shade up from the window, as the notes' (a white card glared) */
    --hf-modaltip-text: #f1f3f5;
    --hf-modaltip-border: #5b6676;
    --nl-toast-bg: #3a434f;
    --nl-toast-line: #5b6676;
    --hf-footer-bg: #0f1216;
    --hf-footer-text: #8e98a4;
    --hf-hero-bg: #0f1216;
    --hf-hero-text: #e7eaee;
    --nl-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="new"] {
        color-scheme: dark;
        --hf-page-bg: #161a20;
        --hf-surface: #1c2128;
        --hf-surface-alt: #222831;
        --hf-surface-sunken: #2a313b;
        --hf-table-head-bg: #29303a;
        --hf-table-head-text: #aab3bf;
        --hf-row-hover: #252c35;
        --hf-row-hover-border: #3b4451;
        --hf-text: #d9dee4;
        --hf-text-strong: #f1f3f5;
        --hf-text-muted: #aab3bf;
        --hf-text-faint: #808b98;
        --hf-text-inverse: #ffffff;
        --hf-link: #82b2f5;
        --hf-border: #2b323c;
        --hf-border-light: #252b34;
        --hf-border-strong: #3b4451;
        --hf-focus: #82b2f5;
        --hf-accent: #82b2f5;
        --hf-accent-bg: #1d2a3b;
        --hf-accent-border: #2c4363;
        --hf-on-accent: #0f1216;
        --hf-brand: #f7b700;
        --hf-on-brand: #1a1a1a;
        --hf-highlight-bg: #3a3115;
        --hf-pos: #45c283;
        --hf-pos-bg: #173326;
        --hf-neg: #f06a5f;
        --hf-neg-bg: #3a1d1b;
        --hf-warn-text: #f0b45a;
        --hf-fill-strong: #c5ccd5;
        --hf-fill-muted: #4a535f;
        --hf-menu-bg: #0f1216;
        --hf-menu-text: #e7eaee;
        --hf-menu-border: #232830;
        --hf-menu-hover-bg: #232830;
        --hf-modal-bg: #222831;
        --hf-modal-text: #e7eaee;
        --hf-overlay: #000000;
        --hf-btn-bg: #222831;
        --hf-btn-text: #e7eaee;
        --hf-hint-bg: #3a3115;
        --hf-hint-text: #f1f3f5;
        --hf-hint-border: #a07a00;
        --hf-datatip-bg: #2d343e;
        --hf-datatip-text: #f1f3f5;
        --hf-datatip-link: #9cc4ff;
        --hf-modaltip-bg: #3a434f;
        --hf-modaltip-text: #f1f3f5;
        --hf-modaltip-border: #5b6676;
        --nl-toast-bg: #3a434f;
        --nl-toast-line: #5b6676;
        --hf-footer-bg: #0f1216;
        --hf-footer-text: #8e98a4;
        --hf-hero-bg: #0f1216;
        --hf-hero-text: #e7eaee;
        --nl-shadow: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
    }
}

/* ---------- Type ---------- */
html[data-theme^="new"] body { font-family: var(--nl-font); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--hf-text); }
html[data-theme^="new"] h1, html[data-theme^="new"] h2, html[data-theme^="new"] h3, html[data-theme^="new"] h4 { font-family: var(--nl-font); color: var(--hf-text-strong); letter-spacing: -.01em; }
html[data-theme^="new"] h1 { font-weight: 600; }
html[data-theme^="new"] h2 { font-weight: 600; }
html[data-theme^="new"] a:hover { color: var(--hf-link); text-decoration: underline; }
/* where the keyboard is (Tab; a click doesn't show it): a thin line, 1.5px since Oct 2026 (2px read loud) */
html[data-theme^="new"] :focus-visible { outline: 1.5px solid var(--hf-focus); outline-offset: 2px; }
/* text boxes, focused: their own border in the brand color with a soft glow, as the sign-in box. Not the blue ring above
   (a text box matches :focus-visible on a click too, so it showed a ring a little outside its border), nor the search
   plugin's blue border (.typeahead__field input:focus, global.css). Boxes with a frame of their own (the menu's and the
   home page's search) keep it */
html[data-theme^="new"] :is(input:not([type=checkbox], [type=radio], [type=range], [type=button], [type=submit], [type=reset], [type=file], [type=color], [type=image]), textarea):focus {
    outline: none; border-color: var(--hf-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hf-brand) 25%, transparent); }
html[data-theme^="new"] :is(#nl_fw_mstar, #cssmenu li.nl-follow > a, #cssmenu li.nl-follow > button, #cssmenu li.loginContainer > button) { outline: none !important; -webkit-tap-highlight-color: transparent; }
html[data-theme^="new"] :is(#nl_fw_mstar, #cssmenu li.nl-follow > a, #cssmenu li.nl-follow > button, #cssmenu li.loginContainer > button):focus-visible { background: rgba(255, 255, 255, .12); border-radius: 8px; }
/* nor global.css's frame for the bar's focused buttons (#menuContainer button:focus, 2px of blue and a glow): the phone's
   star and search showed it after every tap. The star, open, says so with a line under it (the phone's bar, below) */
html[data-theme^="new"] :is(#nl_fw_mstar, #searchMob):focus { border: 0 !important; box-shadow: none !important; }
/* the account menu: its picture's item is 45px, the bar 46: the menu from its bottom, with no gap to lose the hover in */
html[data-theme^="new"] #cssmenu li.loginContainer > ul { top: 100%; }

/* ---------- Page: a lighter grey around the content, which stays white ---------- */
html[data-theme^="new"] #content .wrap-content { background-color: var(--hf-page-bg); } /* as in the mockup: the page color behind everything, panels and tables on the surface color (Classic's content column is white) */

/* ---------- Header: 46px charcoal bar, the transparent logo ---------- */
html[data-theme^="new"] header { background: var(--hf-menu-bg); }
html[data-theme^="new"] .logo img { width: 217px; height: 46px; margin-left: 11px; } /* the old logo's 11px of its own background, trimmed from the new file */
html[data-theme^="new"] #cssmenu > ul > li > a { font-family: var(--nl-font); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* Plex at 14px is wider than Classic's 13px, so less padding keeps the search box on the bar */
@media screen and (min-width: 1001px) {
    html[data-theme^="new"] #cssmenu > ul > li > a { padding-left: 11px; padding-right: 11px; }
    html[data-theme^="new"] #cssmenu > ul > li.has-sub > a { padding-right: 24px; }
    html[data-theme^="new"] #cssmenu > ul > li.following_menu > a { padding-right: 11px; } /* no chevron on the star */
}
html[data-theme^="new"] #cssmenu > ul > li:hover { background: var(--hf-menu-hover-bg) !important; }
html[data-theme^="new"] #cssmenu > ul > li:hover > a { color: var(--hf-menu-text); }
html[data-theme^="new"] #cssmenu > ul > li.following_menu:hover > a .icon-star:before { color: var(--hf-brand); }
/* a small chevron instead of the plus sign */
@media screen and (min-width: 1001px) {
    html[data-theme^="new"] #cssmenu > ul > li.has-sub > a:before, html[data-theme^="new"] #cssmenu > ul > li > a.hasSub:before { display: none; }
    html[data-theme^="new"] #cssmenu > ul > li.has-sub > a:after { top: 19px; right: 10px; width: 6px; height: 6px; background: none; border-right: 1.5px solid var(--hf-menu-text); border-bottom: 1.5px solid var(--hf-menu-text); transform: rotate(45deg); opacity: .65; }
    html[data-theme^="new"] #cssmenu > ul > li.has-sub:hover > a:after { background: none; }
}
html[data-theme^="new"] #cssmenu ul ul { border: 1px solid var(--hf-menu-border); border-top: 0; border-radius: 0 0 8px 8px; overflow: hidden; box-shadow: var(--nl-shadow); }
html[data-theme^="new"] #cssmenu ul ul li a { font-family: var(--nl-font); font-size: 14px; }
html[data-theme^="new"] #cssmenu ul ul li:hover > a, html[data-theme^="new"] #cssmenu ul ul li a:hover { background: var(--hf-menu-hover-bg); color: var(--hf-menu-text); text-decoration: none; }
html[data-theme^="new"] #cssmenu ul ul li a:before { color: var(--hf-brand); }
/* a dropdown opened by a click, a tap or the keyboard (.menu_open, hf_menu_init in global.js), as on hover */
/* the phone menu's close X in the bar's text color, as its three lines are (Classic's is the page's surface: white, but
   near the bar's own color on the dark theme) */
html[data-theme^="new"] .button.menu-opened::before, html[data-theme^="new"] .button.menu-opened::after { background: var(--hf-menu-text); }
html[data-theme^="new"] #cssmenu > ul > li.menu_open { background: var(--hf-menu-hover-bg) !important; }
html[data-theme^="new"] #cssmenu > ul > li.menu_open > a { color: var(--hf-menu-text); }
html[data-theme^="new"] #cssmenu > ul > li.following_menu.menu_open > a .icon-star:before { color: var(--hf-brand); }
@media screen and (min-width: 1001px) {
    html[data-theme^="new"] #cssmenu > ul > li.has-sub.menu_open > a:after { background: none; }
}
/* the phone menu: a pressed row in the bar's own grey, not Classic's bright blue */
@media screen and (max-width: 1000px) {
    html[data-theme^="new"] #cssmenu ul li:hover, html[data-theme^="new"] #cssmenu ul ul li:hover { background: var(--hf-menu-hover-bg) !important; }
    /* and it scrolls in itself, as the star's panel does: it hangs from the fixed bar, so the page's scroll never reached
       what ran past the screen (ETFs' last items, at 845px on a 760px phone) */
    html[data-theme^="new"] #cssmenu > ul { max-height: calc(100vh - 46px); max-height: calc(100dvh - 46px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Following: the panel under the star (nl_follow_panel in newlook.js) ---------- */
html[data-theme^="new"] #cssmenu { --nl-fw-muted: color-mix(in srgb, var(--hf-menu-text) 62%, var(--hf-menu-bg)); --nl-fw-red: #d93025; }
/* the count of new alerts, on the star's shoulder */
html[data-theme^="new"] #cssmenu .nl-fw-badge { position: absolute; top: 8px; left: 19px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
    background: var(--nl-fw-red); color: #fff; font: 700 10.5px/17px var(--nl-font); letter-spacing: 0; text-align: center; box-shadow: 0 0 0 2px var(--hf-menu-bg); pointer-events: none; }
html[data-theme^="new"] #cssmenu > ul > li.nl-follow:hover .nl-fw-badge, html[data-theme^="new"] #cssmenu > ul > li.nl-follow.menu_open .nl-fw-badge, html[data-theme^="new"] #nl_fw_mstar[aria-expanded="true"] .nl-fw-badge { box-shadow: 0 0 0 2px var(--hf-menu-hover-bg); }
html[data-theme^="new"] #cssmenu .nl-fw-badge[hidden] { display: none; }
/* at phone widths the star is in the bar, between search and the hamburger, with a panel of its own under the bar; the
   item in the hamburger's list goes */
html[data-theme^="new"] .nl-fw-mstar, html[data-theme^="new"] .nl-fw-sheet { display: none; }
@media screen and (max-width: 1000px) {
    html[data-theme^="new"] #cssmenu > ul > li.nl-follow { display: none; }
    html[data-theme^="new"] #cssmenu .nl-fw-mstar { display: block; position: absolute; top: 0; right: 45px; z-index: 12399994; width: 42px; height: 46px; padding: 0; border: 0; background: none; color: var(--hf-brand); cursor: pointer; }
    html[data-theme^="new"] #cssmenu .nl-fw-mstar[aria-expanded="true"] { background: var(--hf-menu-hover-bg); }
    /* open: a line in the brand color along its foot, joining it to its panel, as a tab is to its page */
    html[data-theme^="new"] #cssmenu .nl-fw-mstar[aria-expanded="true"]::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--hf-brand); }
    html[data-theme^="new"] #cssmenu .nl-fw-mstar .icon-star:before { margin: 0; font-size: 19px; color: var(--hf-brand); }
    html[data-theme^="new"] #cssmenu .nl-fw-mstar .nl-fw-badge { top: 7px; left: 22px; }
    /* search in a box the star's size, its icon centred: it sat 8px from the top at its own height, 3px above the star and
       the hamburger */
    html[data-theme^="new"] #cssmenu:has(.nl-fw-mstar) #searchMob { right: 81px; top: 0; width: 42px; height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; }
    html[data-theme^="new"] #cssmenu:has(.nl-fw-mstar) #searchMob::before { margin: 0; }
    html[data-theme^="new"] #cssmenu .nl-fw-sheet:not([hidden]) { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 1000001; max-height: calc(100vh - 46px); overflow-y: auto; overscroll-behavior: contain; /* a swipe in it never scrolls the page under it */
        background: var(--hf-menu-bg); border-top: 1px solid var(--hf-menu-border); box-shadow: var(--nl-shadow); }
}
/* the dropdown's single item holds the panel: its own height and colors rather than a menu row's */
html[data-theme^="new"] #cssmenu li.following_menu > ul.nl-fw-ul > li.nl-fw-li { height: auto; background: var(--hf-menu-bg) !important; border: 0; }
html[data-theme^="new"] .nl-fw { box-sizing: border-box; width: 360px; padding: 14px 18px 16px; font: 14px/1.4 var(--nl-font); color: var(--hf-menu-text); text-align: left; cursor: default; }
html[data-theme^="new"] .nl-fw[data-cols="2"] { width: 520px; }
html[data-theme^="new"] .nl-fw[data-cols="3"] { width: 720px; }
html[data-theme^="new"] #cssmenu .nl-fw a { display: block; width: auto; height: auto; padding: 0; border: 0; line-height: inherit; font: inherit; color: inherit; background: none; white-space: normal; overflow: visible; text-decoration: none; }
html[data-theme^="new"] #cssmenu .nl-fw a:hover { background: none; color: inherit; text-decoration: none; }
html[data-theme^="new"] .nl-fw h3 { margin: 0; padding: 0; border: 0; font: 600 12px/1.4 var(--nl-font); color: var(--nl-fw-muted); letter-spacing: 0; text-transform: none; }
html[data-theme^="new"] .nl-fw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
html[data-theme^="new"] .nl-fw-head b { font-size: 15px; font-weight: 600; }
html[data-theme^="new"] .nl-fw-head span { display: flex; gap: 16px; }
/* the panel's own links (Manage, "and 4 more, see all", the tracker) are the brand's yellow, apart from the rows they lead past */
html[data-theme^="new"] #cssmenu .nl-fw-head a, html[data-theme^="new"] #cssmenu .nl-fw a.nl-fw-all, html[data-theme^="new"] #cssmenu .nl-fw-more a, html[data-theme^="new"] #cssmenu .nl-fw a.nl-fw-find { color: var(--hf-brand); font-size: 13px; font-weight: 500; }
html[data-theme^="new"] #cssmenu .nl-fw-head a:hover, html[data-theme^="new"] #cssmenu .nl-fw a.nl-fw-all:hover, html[data-theme^="new"] #cssmenu .nl-fw-more a:hover, html[data-theme^="new"] #cssmenu .nl-fw a.nl-fw-find:hover { color: var(--hf-brand); text-decoration: underline; }
html[data-theme^="new"] #cssmenu .nl-fw a.nl-fw-all { margin-top: 6px; }
/* new alerts: a band across the panel, above the lists */
html[data-theme^="new"] .nl-fw-news { margin: 0 -18px 14px; padding: 10px 18px 10px; background: color-mix(in srgb, var(--hf-menu-text) 5%, var(--hf-menu-bg)); border-top: 1px solid var(--hf-menu-border); border-bottom: 1px solid var(--hf-menu-border); }
html[data-theme^="new"] .nl-fw-news h3 { margin-bottom: 4px; }
html[data-theme^="new"] #cssmenu a.nl-fw-alert { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 6px; }
html[data-theme^="new"] #cssmenu a.nl-fw-alert:hover { background: var(--hf-menu-hover-bg); }
html[data-theme^="new"] .nl-fw-alert > span:nth-child(2) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-theme^="new"] .nl-fw-alert time { font-size: 12px; color: var(--nl-fw-muted); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-fw-alert .nl-fw-dot { align-self: start; margin: 6px 0 0; } /* on the first line of a title that wraps */
html[data-theme^="new"] .nl-fw-more { display: flex; justify-content: space-between; gap: 16px; margin-top: 4px; }
html[data-theme^="new"] .nl-fw-more:empty { display: none; }
html[data-theme^="new"] #cssmenu .nl-fw-more a.nl-fw-phone { margin-left: auto; color: var(--nl-fw-muted); font-weight: 400; }
/* the lists: a column per kind */
html[data-theme^="new"] .nl-fw-cols { display: flex; gap: 28px; }
html[data-theme^="new"] .nl-fw-col { flex: 1 1 0; min-width: 0; }
html[data-theme^="new"] .nl-fw[data-cols="3"] .nl-fw-col[data-kind="funds"] { flex-grow: 1.35; }
html[data-theme^="new"] .nl-fw-col h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
html[data-theme^="new"] .nl-fw-col h3 em { margin-left: 3px; font-style: normal; font-weight: 400; }
html[data-theme^="new"] #cssmenu a.nl-fw-row { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 4px 8px; border-radius: 6px; }
html[data-theme^="new"] #cssmenu a.nl-fw-row:hover, html[data-theme^="new"] #cssmenu a.nl-fw-chip:hover { background: var(--hf-menu-hover-bg); }
html[data-theme^="new"] .nl-fw-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme^="new"] .nl-fw-av { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; overflow: hidden; border-radius: 6px;
    background: var(--hf-menu-hover-bg); color: var(--nl-fw-muted); font: 600 11px var(--nl-font); }
html[data-theme^="new"] .nl-fw-col[data-kind="congress"] .nl-fw-av { border-radius: 50%; }
html[data-theme^="new"] .nl-fw-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-theme^="new"] .nl-fw-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; padding-top: 2px; }
html[data-theme^="new"] #cssmenu a.nl-fw-chip { position: relative; padding: 4px 0; border-radius: 6px; background: color-mix(in srgb, var(--hf-menu-text) 7%, var(--hf-menu-bg));
    text-align: center; font: 600 13px/20px var(--nl-font-data); letter-spacing: .01em; white-space: nowrap; overflow: visible; }
/* what a new alert is about */
html[data-theme^="new"] .nl-fw-dot { flex: none; display: inline-block; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--nl-fw-red); }
html[data-theme^="new"] .nl-fw-chip .nl-fw-dot { position: absolute; top: -3px; right: -3px; box-shadow: 0 0 0 2px var(--hf-menu-bg); }
html[data-theme^="new"] .nl-fw-empty { margin: 0 0 10px; color: var(--nl-fw-muted); }
html[data-theme^="new"] .nl-fw-eg { opacity: .55; } /* the example lists for someone following nothing yet */
html[data-theme^="new"] #cssmenu .nl-fw a.nl-fw-find { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 6px; background: var(--hf-brand); color: var(--hf-on-brand); font-weight: 600; text-decoration: none; }
html[data-theme^="new"] .nl-fw :focus-visible { outline: 2px solid var(--hf-brand); outline-offset: 1px; }
@media screen and (max-width: 1000px) {
    /* in the phone's sheet: its full width, the kinds one under another */
    html[data-theme^="new"] .nl-fw, html[data-theme^="new"] .nl-fw[data-cols] { width: 100%; padding: 14px 16px 18px; }
    html[data-theme^="new"] .nl-fw-news { margin: 0 -16px 14px; padding: 10px 16px; }
    html[data-theme^="new"] .nl-fw-cols { flex-direction: column; gap: 16px; }
    html[data-theme^="new"] #cssmenu a.nl-fw-row { padding: 7px 8px; }
    html[data-theme^="new"] .nl-fw-chips { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
    html[data-theme^="new"] #cssmenu a.nl-fw-chip { padding: 7px 0; }
}
/* search: a slim rounded field in the bar, 34px tall and centred in the 46px bar, the box and its button one piece */
html[data-theme^="new"] #menuSearchForm { margin-top: 6px; }
html[data-theme^="new"] #menuSearch .typeahead__query input, html[data-theme^="new"] #menuSearch input { font-family: var(--nl-font); background: #2d333b; color: #e9ecef; border: 1px solid transparent; border-radius: 8px 0 0 8px; }
html[data-theme^="new"] #menuSearch input::placeholder { color: #a4adb8; }
html[data-theme^="new"] #menuSearch .typeahead__query input { box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 12px; font-size: 14px; line-height: 32px; }
html[data-theme^="new"] #menuSearch .typeahead__button button, html[data-theme^="new"] #menuSearch .typeahead__filter button { background: #2d333b; color: #e9ecef; border-color: transparent; }
html[data-theme^="new"] #menuSearch .typeahead__button button { box-sizing: border-box; height: 34px; min-height: 34px; padding: 0 12px; border-radius: 0 8px 8px 0; }
/* focused: one yellow ring round the box and its button, both a shade lighter. Classic's 2px focus border and glow on the
   header's inputs (!important, global.css) came out blue with a yellow glow here, and the look's focus outline went round
   both: three rings. */
html[data-theme^="new"] #menuContainer #menuSearch input:focus { border-color: transparent !important; box-shadow: none !important; outline: none; }
html[data-theme^="new"] #menuSearch .typeahead__field { border-radius: 8px; transition: box-shadow .15s; }
html[data-theme^="new"] #menuSearch .typeahead__field:focus-within { box-shadow: 0 0 0 1.5px var(--hf-brand); }
html[data-theme^="new"] #menuSearch .typeahead__field:focus-within :is(input, button) { background: #353c45; }
/* the / key that goes to the box, while it's empty (not on touch screens) */
html[data-theme^="new"] .hfs-kbd { position: absolute; right: 8px; top: 50%; z-index: 4; transform: translateY(-50%); box-sizing: border-box; min-width: 18px; height: 20px; padding: 0 5px;
    border: 1px solid #4a525c; border-radius: 4px; background: none; color: #a4adb8; font: 500 12px/18px var(--nl-font); text-align: center; pointer-events: none; }
html[data-theme^="new"] input:focus ~ .hfs-kbd, html[data-theme^="new"] input:not(:placeholder-shown) ~ .hfs-kbd { display: none; }
/* room for it after "Search" (Classic's box is 70px wide until focused) */
@media (hover: hover) and (min-width: 960px) {
    html[data-theme^="new"] #menuSearch input.hfs-has-kbd { width: 104px; padding-right: 32px; }
    html[data-theme^="new"] #menuSearch input.hfs-has-kbd:focus { padding-right: 12px; }
}
@media (hover: none), screen and (max-width: 959px) { html[data-theme^="new"] .hfs-kbd { display: none; } }
html[data-theme^="new"] .typeahead__list, html[data-theme^="new"] .typeahead__dropdown { border-radius: 8px; box-shadow: var(--nl-shadow); overflow: hidden; font-family: var(--nl-font); }
/* ---------- Search results (hf_search in newlook.js): a panel under the box, kinds as small headings, the filter as chips ---------- */
html[data-theme^="new"] .hfs-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000002; box-sizing: border-box; width: 100%; min-width: 280px; max-height: min(72vh, 600px);
    overflow-y: auto; padding: 6px; background: var(--hf-surface); color: var(--hf-text); border: 1px solid var(--hf-border); border-radius: 10px; box-shadow: var(--nl-shadow);
    font: 14px/1.35 var(--nl-font); text-align: left; letter-spacing: 0; text-transform: none; }
html[data-theme^="new"] .hfs-pop[hidden] { display: none; }
html[data-theme^="new"] .hfs-pop.hfs-bar { left: auto; right: 0; width: 360px; }
html[data-theme^="new"] .hfs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 8px; margin-bottom: 2px; border-bottom: 1px solid var(--hf-border-light); }
html[data-theme^="new"] .hfs-chip { padding: 3px 11px; border: 1px solid var(--hf-border); border-radius: 999px; background: var(--hf-surface); color: var(--hf-text-muted); font: 500 12.5px/1.4 var(--nl-font); cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .hfs-chip:hover { border-color: var(--hf-border-strong); color: var(--hf-text-strong); }
html[data-theme^="new"] .hfs-chip[aria-pressed="true"] { background: var(--hf-accent-bg); border-color: var(--hf-accent-border); color: var(--hf-accent); }
html[data-theme^="new"] .hfs-gh { padding: 8px 10px 3px; font: 600 12px/1.3 var(--nl-font); color: var(--hf-text-faint); }
html[data-theme^="new"] .hfs-opt, html[data-theme^="new"] .hfs-all { display: flex; align-items: center; gap: 10px; min-height: 36px; box-sizing: border-box; padding: 6px 10px; border-radius: 7px;
    color: var(--hf-text-strong); text-decoration: none; cursor: pointer; }
html[data-theme^="new"] .hfs-opt:hover, html[data-theme^="new"] .hfs-all:hover { color: var(--hf-text-strong); text-decoration: none; }
html[data-theme^="new"] .hfs-opt[aria-selected="true"], html[data-theme^="new"] .hfs-all[aria-selected="true"] { background: var(--hf-row-hover); }
html[data-theme^="new"] .hfs-sym { flex: none; min-width: 62px; font: 600 13.5px var(--nl-font-data); }
html[data-theme^="new"] .hfs-sym b { font-weight: inherit; text-decoration: underline; text-decoration-color: var(--hf-border-strong); text-underline-offset: 3px; }
html[data-theme^="new"] .hfs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hf-text); }
html[data-theme^="new"] .hfs-name b, html[data-theme^="new"] .hfs-sub b { font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .hfs-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html[data-theme^="new"] .hfs-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .hfs-av { position: relative; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: 6px; background: var(--hf-surface-sunken); box-shadow: inset 0 0 0 1px var(--hf-border-light); }
html[data-theme^="new"] .hfs-group[aria-labelledby$="_congress"] .hfs-av, html[data-theme^="new"] .hfs-group[aria-labelledby$="_insiders"] .hfs-av { border-radius: 50%; }
html[data-theme^="new"] .hfs-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-theme^="new"] .hfs-ini { display: flex; align-items: center; justify-content: center; height: 100%; font: 600 11px var(--nl-font); color: var(--hf-text-muted); }
html[data-theme^="new"] .hfs-all { margin-top: 4px; border-top: 1px solid var(--hf-border-light); border-radius: 0 0 7px 7px; color: var(--hf-link); font-weight: 500; }
html[data-theme^="new"] .hfs-all:hover { color: var(--hf-link); }
html[data-theme^="new"] .hfs-msg { padding: 12px 10px; color: var(--hf-text-muted); }
/* focused empty, the recent ones: Popular this week and Clear history by the heading (and Recent searches by the popular
   ones', back), a search page query with a magnifier for its face */
html[data-theme^="new"] .hfs-gh { display: flex; align-items: center; justify-content: space-between; }
html[data-theme^="new"] .hfs-acts { display: flex; gap: 2px; margin: -3px -4px -3px 8px; }
html[data-theme^="new"] .hfs-act { padding: 2px 6px; border: 0; border-radius: 4px; background: none; box-shadow: none; color: var(--hf-link); font: 500 12px/1.3 var(--nl-font); white-space: nowrap; cursor: pointer; }
html[data-theme^="new"] .hfs-act:hover { text-decoration: underline; }
html[data-theme^="new"] .hfs-av.hfs-round { border-radius: 50%; }
html[data-theme^="new"] .hfs-av.hfs-qic { box-shadow: none; background: var(--hf-text-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 15l5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15 15l5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
html[data-theme^="new"] .hfs-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the rest of the top result after what's typed, faint (what's typed is the box's own text, under the hint's clear copy) */
html[data-theme^="new"] .hfs-hint { position: absolute; z-index: 3; overflow: hidden; white-space: pre; pointer-events: none; color: var(--hf-text-faint); }
html[data-theme^="new"] .hfs-hint span { color: transparent; }
html[data-theme^="new"] #menuSearch .hfs-hint { color: #6f7a86; }
@media screen and (max-width: 1000px) {
    /* the bar's box fills the bar on phones (Classic's is 240px), the results under it the screen's width */
    html[data-theme^="new"] .hfs-pop.hfs-bar { left: 0; right: 0; width: auto; min-width: 0; }
    html[data-theme^="new"] .hfs-opt { min-height: 42px; }
}
/* small phones: the panel's own padding off, so the five kind chips fit on one line (the rows keep theirs) */
@media screen and (max-width: 400px) {
    html[data-theme^="new"] .hfs-pop { padding: 0; }
}
@media screen and (max-width: 959px) {
    html[data-theme^="new"] #menuSearchForm { right: 0; box-sizing: border-box; padding: 0 8px; }
    html[data-theme^="new"] #menuSearch .typeahead__query input, html[data-theme^="new"] #menuSearch .typeahead__query input.searchFocused { width: 100% !important; }
}

/* ---------- Logging in (nl_login_window and nl_login_welcome in newlook.js): one dark window in both looks, Google's button,
   the email box, Log in with a passkey; the welcome with Remember me and the passkey offer. My Account's Passkeys card ---------- */
html[data-theme^="new"] #loginModal { --nl-lg-muted: #a4adb8; --nl-lg-line: #3a424c; --nl-lg-field: #2d333b; --nl-lg-ok: #8fdcae; --nl-lg-err: #ffb4ab;
    box-sizing: border-box; padding: 0; border: 1px solid var(--nl-lg-line); border-radius: 14px; background: var(--hf-modal-bg); color: var(--hf-modal-text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45); font: 15px/1.45 var(--nl-font); }
html[data-theme^="new"] #loginModal :is(.nl-login, #login_welcome) { padding: 22px 24px 20px !important; color: var(--hf-modal-text) !important; text-align: left; }
html[data-theme^="new"] #loginModal h2 { margin: 0 28px 16px 0; padding: 0; border: 0; font: 600 20px/1.3 var(--nl-font); color: #fff; letter-spacing: -.01em; }
/* simplemodal's close link (empty in Classic): an × in the corner */
html[data-theme^="new"] #loginModal .modalCloseImg { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; z-index: 2; }
html[data-theme^="new"] #loginModal .modalCloseImg::before, html[data-theme^="new"] #loginModal .modalCloseImg::after { content: ''; position: absolute; left: 9px; top: 15px;
    width: 14px; height: 2px; border-radius: 1px; background: var(--nl-lg-muted); transform: rotate(45deg); }
html[data-theme^="new"] #loginModal .modalCloseImg::after { transform: rotate(-45deg); }
html[data-theme^="new"] #loginModal .modalCloseImg:hover { background: rgba(255, 255, 255, .08); }
/* a welcome on a page that couldn't be loaded again (nl_login_welcome): as Classic's, its links are the way out */
html[data-theme^="new"] #loginModal.nl-login-stale .modalCloseImg { display: none; }
/* the note after a One Tap login (nl_one_tap_note): Remember me in it. Bold words in notes on the text's line (global.css's
   reset puts b at the top of it) */
html[data-theme^="new"] #hf_toast { background: var(--nl-toast-bg); border: 1px solid var(--nl-toast-line); }
html[data-theme^="new"] #hf_toast :is(b, .nl-toast-act) { vertical-align: baseline; }
html[data-theme^="new"] #hf_toast .nl-toast-act { margin: 2px 0 0 4px; padding: 3px 10px; border: 0; border-radius: 6px; background: var(--hf-brand); color: var(--hf-on-brand);
    font: 600 13px/1.5 var(--nl-font); cursor: pointer; box-shadow: none; white-space: nowrap; }
html[data-theme^="new"] #hf_toast .nl-toast-act:disabled { opacity: .7; cursor: default; }
html[data-theme^="new"] #loginModal a { color: var(--hf-datatip-link); }
html[data-theme^="new"] .nl-login-google { display: flex; justify-content: center; min-height: 44px; }
/* Google's button is a frame whose page says light: on the dark theme's page the browser backed it with white, a white box
   round the dark button. The frame says light too, as the Chart tab's widgets do */
html[data-theme^="new"] .nl-login-google iframe { color-scheme: light; }
/* One Tap's frame (nl_one_tap) the same: on a desktop in its box at the top right, on a phone a sheet of its own at the bottom.
   Its card is Google's own, light */
html[data-theme^="new"] :is(#credential_picker_container iframe, iframe#credential_picker_iframe) { color-scheme: light; }
/* nor the site's focus ring (:focus-visible above): Google moves the focus into its frame by itself, now and then, and the
   ring went round the whole card; Google shows its own focus inside it */
html[data-theme^="new"] :is(#credential_picker_container, #credential_picker_container iframe, iframe#credential_picker_iframe):is(:focus, :focus-visible) { outline: none; }
html[data-theme^="new"] .nl-login-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; color: var(--nl-lg-muted); font-size: 13px; }
html[data-theme^="new"] .nl-login-or::before, html[data-theme^="new"] .nl-login-or::after { content: ''; flex: 1; height: 1px; background: var(--nl-lg-line); }
html[data-theme^="new"] #nl_login_form label { display: block; margin: 0 0 6px; font: 500 13px var(--nl-font); color: var(--nl-lg-muted); }
html[data-theme^="new"] #nl_login_email { box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 12px; border: 1px solid #4a525c; border-radius: 8px;
    background: var(--nl-lg-field); color: #f1f3f5; font: 16px var(--nl-font); box-shadow: none; } /* 16px: smaller makes an iPhone zoom in */
html[data-theme^="new"] #nl_login_email::placeholder { color: #7d8793; }
html[data-theme^="new"] #nl_login_email:focus { outline: none; border-color: var(--hf-brand); box-shadow: 0 0 0 3px rgba(245, 180, 0, .25); }
html[data-theme^="new"] #nl_login_ts { margin-top: 8px; }
html[data-theme^="new"] #loginModal .nl-login-send { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 10px 0 0;
    padding: 0 16px; border: 0; border-radius: 8px; background: var(--hf-brand); color: var(--hf-on-brand); font: 600 15px var(--nl-font); cursor: pointer; box-shadow: none; }
html[data-theme^="new"] #loginModal .nl-login-send:hover { background: #ffc629; }
html[data-theme^="new"] #loginModal .nl-login-send:disabled { opacity: .7; cursor: default; }
html[data-theme^="new"] .nl-login-pk { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 44px; margin: 14px 0 0;
    padding: 0 16px; border: 1px solid #4a525c; border-radius: 8px; background: transparent; color: #e9ecef; font: 500 15px var(--nl-font); cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .nl-login-pk:hover { background: rgba(255, 255, 255, .06); border-color: #5d6670; }
/* the passkey key (Lucide's key-round), in the text's color */
html[data-theme^="new"] .nl-login-key { flex: none; display: inline-block; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.586%2017.414A2%202%200%200%200%202%2018.828V21a1%201%200%200%200%201%201h3a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h1a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h.172a2%202%200%200%200%201.414-.586l.814-.814a6.5%206.5%200%201%200-4-4z%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%277.5%27%20r%3D%27.5%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.586%2017.414A2%202%200%200%200%202%2018.828V21a1%201%200%200%200%201%201h3a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h1a1%201%200%200%200%201-1v-1a1%201%200%200%201%201-1h.172a2%202%200%200%200%201.414-.586l.814-.814a6.5%206.5%200%201%200-4-4z%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%277.5%27%20r%3D%27.5%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
/* as the device knows it (nl_pk_way): a face for Face ID and Windows Hello, a fingerprint for Touch ID and Android (Lucide's scan-face, fingerprint) */
html[data-theme^="new"] .nl-login-key.nl-k-face { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207V5a2%202%200%200%201%202-2h2%27%2F%3E%3Cpath%20d%3D%27M17%203h2a2%202%200%200%201%202%202v2%27%2F%3E%3Cpath%20d%3D%27M21%2017v2a2%202%200%200%201-2%202h-2%27%2F%3E%3Cpath%20d%3D%27M7%2021H5a2%202%200%200%201-2-2v-2%27%2F%3E%3Cpath%20d%3D%27M8%2014s1.5%202%204%202%204-2%204-2%27%2F%3E%3Cpath%20d%3D%27M9%209h.01%27%2F%3E%3Cpath%20d%3D%27M15%209h.01%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207V5a2%202%200%200%201%202-2h2%27%2F%3E%3Cpath%20d%3D%27M17%203h2a2%202%200%200%201%202%202v2%27%2F%3E%3Cpath%20d%3D%27M21%2017v2a2%202%200%200%201-2%202h-2%27%2F%3E%3Cpath%20d%3D%27M7%2021H5a2%202%200%200%201-2-2v-2%27%2F%3E%3Cpath%20d%3D%27M8%2014s1.5%202%204%202%204-2%204-2%27%2F%3E%3Cpath%20d%3D%27M9%209h.01%27%2F%3E%3Cpath%20d%3D%27M15%209h.01%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
html[data-theme^="new"] .nl-login-key.nl-k-finger { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2010a2%202%200%200%200-2%202c0%201.02-.1%202.51-.26%204%27%2F%3E%3Cpath%20d%3D%27M14%2013.12c0%202.38%200%206.38-1%208.88%27%2F%3E%3Cpath%20d%3D%27M17.29%2021.02c.12-.6.43-2.3.5-3.02%27%2F%3E%3Cpath%20d%3D%27M2%2012a10%2010%200%200%201%2018-6%27%2F%3E%3Cpath%20d%3D%27M2%2016h.01%27%2F%3E%3Cpath%20d%3D%27M21.8%2016c.2-2%20.131-5.354%200-6%27%2F%3E%3Cpath%20d%3D%27M5%2019.5C5.5%2018%206%2015%206%2012a6%206%200%200%201%20.34-2%27%2F%3E%3Cpath%20d%3D%27M8.65%2022c.21-.66.45-1.32.57-2%27%2F%3E%3Cpath%20d%3D%27M9%206.8a6%206%200%200%201%209%205.2v2%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2010a2%202%200%200%200-2%202c0%201.02-.1%202.51-.26%204%27%2F%3E%3Cpath%20d%3D%27M14%2013.12c0%202.38%200%206.38-1%208.88%27%2F%3E%3Cpath%20d%3D%27M17.29%2021.02c.12-.6.43-2.3.5-3.02%27%2F%3E%3Cpath%20d%3D%27M2%2012a10%2010%200%200%201%2018-6%27%2F%3E%3Cpath%20d%3D%27M2%2016h.01%27%2F%3E%3Cpath%20d%3D%27M21.8%2016c.2-2%20.131-5.354%200-6%27%2F%3E%3Cpath%20d%3D%27M5%2019.5C5.5%2018%206%2015%206%2012a6%206%200%200%201%20.34-2%27%2F%3E%3Cpath%20d%3D%27M8.65%2022c.21-.66.45-1.32.57-2%27%2F%3E%3Cpath%20d%3D%27M9%206.8a6%206%200%200%201%209%205.2v2%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
html[data-theme^="new"] #loginModal .nl-login-msg { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--nl-lg-ok); }
html[data-theme^="new"] #loginModal .nl-login-msg.nl-login-err { color: var(--nl-lg-err); }
html[data-theme^="new"] #loginModal #nl_login_note { margin: -4px 0 14px; }
html[data-theme^="new"] #loginModal .nl-login-msg b { color: #fff; }
/* the link went out: only the message stays */
html[data-theme^="new"] .nl-login-sent :is(.nl-login-google, .nl-login-or, #nl_login_form, .nl-login-pk, #nl_login_note) { display: none; }
html[data-theme^="new"] .nl-login-sent #nl_login_fb { margin-top: 0; }
/* a code went out instead (the iPhone's Home Screen app, nl_code_step): its box, as the email one, the digits spaced */
html[data-theme^="new"] #nl_code_form label { display: block; margin: 0 0 6px; font: 500 13px var(--nl-font); color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-code-sent { margin: 0 0 16px; color: var(--hf-modal-text); }
html[data-theme^="new"] #nl_login_code { box-sizing: border-box; width: 100%; height: 50px; margin: 0; padding: 0 12px; border: 1px solid #4a525c; border-radius: 8px;
    background: var(--nl-lg-field); color: #f1f3f5; font: 600 24px var(--nl-font); letter-spacing: .3em; text-align: center; box-shadow: none; }
html[data-theme^="new"] #nl_login_code::placeholder { color: #5d6670; }
html[data-theme^="new"] #nl_login_code:focus { outline: none; border-color: var(--hf-brand); box-shadow: 0 0 0 3px rgba(245, 180, 0, .25); }
html[data-theme^="new"] #loginModal .nl-code-again { margin: 14px 0 0; font-size: 14px; text-align: center; }
html[data-theme^="new"] .nl-login-sent #nl_code_form + #nl_login_fb { margin-top: 12px; }
html[data-theme^="new"] #loginModal .nl-welcome-kept { margin: 0 0 4px; } /* the welcome after a code: remembered already */
/* the welcome */
html[data-theme^="new"] #loginModal .nl-welcome-who { margin: -10px 0 16px; color: var(--nl-lg-muted); font-size: 14px; overflow-wrap: anywhere; }
html[data-theme^="new"] #loginModal #remember_me { margin: 0; }
html[data-theme^="new"] #loginModal #remember_me .nl-login-msg { margin-top: 0; }
html[data-theme^="new"] #loginModal ul.nl-welcome-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; }
html[data-theme^="new"] #loginModal ul.nl-welcome-links li { margin: 0; padding: 0; list-style: none; }
/* Contact (nl_contact in newlook.js): the login's window, its fields and button; the topics as chips, the check, what happened */
html[data-theme^="new"] #loginModal .nl-ct-lede { margin: -8px 0 16px; font-size: 14px; color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-ct-wait { margin: 10px 0 6px; text-align: center; color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-ct-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
html[data-theme^="new"] #loginModal .nl-ct-topics button { padding: 5px 11px; border: 1px solid #4a525c; border-radius: 999px; background: transparent; color: #d6dbe1;
    font: 500 13px var(--nl-font); cursor: pointer; box-shadow: none; }
html[data-theme^="new"] #loginModal .nl-ct-topics button:hover { border-color: #6b7581; color: #fff; }
html[data-theme^="new"] #loginModal .nl-ct-topics button[aria-checked="true"] { border-color: var(--hf-brand); background: rgba(245, 180, 0, .14); color: #ffd666; }
html[data-theme^="new"] #loginModal .nl-ct-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html[data-theme^="new"] #loginModal .nl-ct-form label { display: block; margin: 0 0 12px; font: 500 13px var(--nl-font); color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-ct-form :is(input, textarea) { display: block; box-sizing: border-box; width: 100%; margin: 6px 0 0; padding: 0 12px; border: 1px solid #4a525c;
    border-radius: 8px; background: var(--nl-lg-field); color: #f1f3f5; font: 16px var(--nl-font); box-shadow: none; } /* 16px: smaller makes an iPhone zoom in */
html[data-theme^="new"] #loginModal .nl-ct-form input { height: 44px; }
html[data-theme^="new"] #loginModal .nl-ct-form textarea { min-height: 128px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
html[data-theme^="new"] #loginModal .nl-ct-form :is(input, textarea)::placeholder { color: #7d8793; }
html[data-theme^="new"] #loginModal .nl-ct-form :is(input, textarea):focus { outline: none; border-color: var(--hf-brand); box-shadow: 0 0 0 3px rgba(245, 180, 0, .25); }
html[data-theme^="new"] #loginModal .nl-ct-msg { margin-bottom: 4px !important; }
html[data-theme^="new"] #loginModal .nl-ct-count { min-height: 18px; font-size: 12.5px; text-align: right; color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-ct-from { margin: 0 0 12px; font-size: 14px; color: var(--nl-lg-muted); overflow-wrap: anywhere; }
html[data-theme^="new"] #loginModal .nl-ct-from b { color: #fff; font-weight: 600; }
html[data-theme^="new"] #loginModal .nl-ct-check { min-height: 78px; margin: 2px 0 4px; }
html[data-theme^="new"] #loginModal .nl-ct-form .nl-login-err { margin: 6px 0 0; }
html[data-theme^="new"] #loginModal .nl-ct-done { padding: 6px 0 2px; text-align: center; }
html[data-theme^="new"] #loginModal .nl-ct-done > b { display: block; margin: 10px 0 4px; font: 600 18px var(--nl-font); color: #fff; }
html[data-theme^="new"] #loginModal .nl-ct-done p { margin: 0 0 16px; color: var(--nl-lg-muted); overflow-wrap: anywhere; }
html[data-theme^="new"] #loginModal .nl-ct-done p b { color: #fff; }
html[data-theme^="new"] .nl-ct-ok { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(143, 220, 174, .14); }
html[data-theme^="new"] .nl-ct-ok::before { content: ''; width: 18px; height: 10px; margin-top: -4px; border-left: 3px solid var(--nl-lg-ok); border-bottom: 3px solid var(--nl-lg-ok); transform: rotate(-45deg); }
@media screen and (max-width: 480px) {
    /* the window fits a small phone, Send clear of an ad at the foot (nl_contact puts it near the top): the name and email
       side by side (the email the wider), the message shorter */
    html[data-theme^="new"] #loginModal .nl-ct-two { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
    html[data-theme^="new"] #loginModal .nl-ct-form textarea { height: 112px; min-height: 84px; }
    html[data-theme^="new"] #loginModal .nl-ct-lede { margin-bottom: 12px; }
}
html[data-theme^="new"] .nl-pk-offer { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--nl-lg-line); border-radius: 10px; background: rgba(255, 255, 255, .04); }
html[data-theme^="new"] .nl-pk-offer > b { display: block; font: 600 15px/1.35 var(--nl-font); color: #fff; }
html[data-theme^="new"] .nl-pk-offer > p { margin: 4px 0 0; color: #c3cad2; font-size: 13.5px; line-height: 1.45; }
html[data-theme^="new"] .nl-pk-offer.nl-pk-done > b { color: var(--nl-lg-ok); }
html[data-theme^="new"] .nl-pk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
html[data-theme^="new"] .nl-pk-make { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: #f1f3f5;
    color: #15191e; font: 600 14px var(--nl-font); cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .nl-pk-make:hover { background: #fff; }
html[data-theme^="new"] .nl-pk-make:disabled { opacity: .7; cursor: default; }
html[data-theme^="new"] .nl-pk-later { padding: 6px 2px; border: 0; background: none; color: var(--nl-lg-muted); font: 500 14px var(--nl-font); cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .nl-pk-later:hover { color: #fff; }
/* My Account's card */
html[data-theme^="new"] ul.nl-pk-rows { margin: 4px 0 0; padding: 0; list-style: none; }
html[data-theme^="new"] ul.nl-pk-rows li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 0; list-style: none; border-top: 1px solid var(--hf-border-light); }
html[data-theme^="new"] ul.nl-pk-rows li:first-child { border-top: 0; }
html[data-theme^="new"] ul.nl-pk-rows li > .nl-login-key { color: var(--hf-text-muted); }
html[data-theme^="new"] ul.nl-pk-rows li > div { flex: 1; min-width: 0; }
html[data-theme^="new"] ul.nl-pk-rows b { display: block; font-size: 14.5px; font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] ul.nl-pk-rows small { display: block; font-size: 13px; color: var(--hf-text-muted); }
html[data-theme^="new"] ul.nl-pk-rows .ac-btn { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
html[data-theme^="new"] .nl-pk-none { margin-top: 0; }
html[data-theme^="new"] .nl-pk-msg { margin: 12px 0 0; font-size: 13.5px; color: var(--hf-neg); }
html[data-theme^="new"] .nl-pk-msg.nl-pk-ok { color: var(--hf-pos); }
/* the logout page (logoutDev.php): Classic's button was the inverse fill with white text, white on light grey in the dark theme */
html[data-theme^="new"] .nl-out { box-sizing: border-box; max-width: 480px; margin: 40px auto; padding: 28px 28px 26px; border: 1px solid var(--hf-border);
    border-radius: 14px; background: var(--hf-surface); text-align: center; }
html[data-theme^="new"] .nl-out h1 { margin: 0 0 8px; padding: 0; border: 0; font: 700 24px/1.3 var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-out p { margin: 0; color: var(--hf-text-muted); font-size: 15px; line-height: 1.5; }
html[data-theme^="new"] .nl-out-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
html[data-theme^="new"] :is(.nl-out-go, .nl-out-in) { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 42px; padding: 0 20px;
    border-radius: 8px; font: 600 15px var(--nl-font); text-decoration: none; cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .nl-out-go { border: 1px solid var(--hf-brand); background: var(--hf-brand); color: var(--hf-on-brand); }
html[data-theme^="new"] .nl-out-go:hover { background: color-mix(in srgb, var(--hf-brand) 85%, #fff); color: var(--hf-on-brand); text-decoration: none; }
html[data-theme^="new"] .nl-out-in { border: 1px solid var(--hf-border-strong); background: var(--hf-surface); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-out-in:hover { border-color: var(--hf-text-muted); }

/* ---------- Tabs: an underline, not boxes ---------- */
html[data-theme^="new"] .tab { font-family: var(--nl-font); font-size: 14px; font-weight: 500; color: var(--hf-text-muted); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: 0; }
html[data-theme^="new"] .tab:hover { color: var(--hf-text-strong); }
/* Classic sets the selected tab's box with !important, hence these */
html[data-theme^="new"] .tab.selectedTab, html[data-theme^="new"] .selectedTab { color: var(--hf-text-strong); background: none; border: 0 !important; border-bottom: 3px solid var(--hf-brand) !important; }
html[data-theme^="new"] .tab:before { color: inherit; }
/* the line reaches 2px up under the tabs, rather than the tabs reaching down over it: the tab row is a scroll box and clipped
   whatever hung below it (the selected tab's underline). Tabs paint over the line: their row is positioned, and the selected
   tab is raised for rows that aren't. */
html[data-theme^="new"] .tabBorder { border-top: 2px solid var(--hf-border); margin-top: -2px; }
html[data-theme^="new"] .tab.selectedTab { position: relative; z-index: 1; }
/* boxes that scroll sideways (tabs, tables, statements, the alert feed; init_scroll_strip in global.js) show their arrows
   without Classic's edge fades, which ran from the surface to clear white and left a pale band on the dark look */
html[data-theme^="new"] .strip_can_left::before, html[data-theme^="new"] .strip_can_right::after { display: none; }

/* ---------- Buttons: outlined, rounded; Follow is the one filled button ---------- */
html[data-theme^="new"] .table_filter_button { font-family: var(--nl-font); font-size: 13px; font-weight: 500; color: var(--hf-text-strong); background: var(--hf-surface); border: 1px solid var(--hf-border-strong); border-radius: 6px; padding: 4px 10px; }
html[data-theme^="new"] .table_filter_button:hover { border-color: var(--hf-text-faint); background: var(--hf-surface); }
/* the pages under a table (insertPagination, global.js): the rows shown, then Previous, Next and Top as the site's buttons, which
   stand out from the page (Classic's grey boxes didn't); the first page's Previous, which does nothing, dimmed */
html[data-theme^="new"] .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--hf-text-muted); }
/* in a table's sideways scroll box (the line is put after the table, inside it): held at its left, so the pages stay in view
   with the table scrolled right; the notes under it too */
html[data-theme^="new"] .scrollWrapper > :is(.pagination, .pagination_extra_text) { position: sticky; left: 0; }
html[data-theme^="new"] .pagination button { margin: 0; padding: 5px 12px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong);
    font: 500 13.5px var(--nl-font); cursor: pointer; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
html[data-theme^="new"] .pagination button:hover:not(:disabled, .pagination_off) { border-color: var(--hf-accent); color: var(--hf-accent); }
html[data-theme^="new"] .pagination button:is(:disabled, .pagination_off) { opacity: .45; cursor: default; box-shadow: none; }
html[data-theme^="new"] .new_actionbtn { font-family: var(--nl-font); font-weight: 600; font-size: 13px; color: var(--hf-btn-text); background: var(--hf-btn-bg); border: 1px solid var(--hf-border-strong); border-radius: 6px; padding: 4px 10px; line-height: 16px; }
html[data-theme^="new"] .new_actionbtn:hover, html[data-theme^="new"] .new_actionbtn.active { background: var(--hf-surface-alt); color: var(--hf-text-strong); border-color: var(--hf-text-faint); }
html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="1"] { background: var(--hf-brand); border-color: var(--hf-brand); color: var(--hf-on-brand); }
html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="0"] { background: var(--hf-btn-bg); border-color: var(--hf-border-strong); color: var(--hf-btn-text); }
/* their hover (Nov 2026): Follow a shade deeper with a soft glow; Following says what a click does, Unfollow, in red. Colors
   only: a filter, a lift or a turning plus had the button redrawn as a layer, and its plus went soft. Pointers that hover
   only: a phone would keep the hover after a tap. */
html[data-theme^="new"] .new_actionbtn[data-follow_unfollow] { transition: box-shadow .15s, color .15s, border-color .15s, background-color .15s; }
@media (hover: hover) {
    html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="1"]:hover { background-color: color-mix(in srgb, var(--hf-brand) 88%, #000);
        border-color: color-mix(in srgb, var(--hf-brand) 88%, #000); box-shadow: 0 2px 8px rgba(245, 180, 0, .35); }
    html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="0"]:hover { border-color: var(--hf-neg); color: var(--hf-neg); }
    html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="0"]:hover::after { content: 'Unfollow'; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme^="new"] .new_actionbtn[data-follow_unfollow] { transition: none; } }
html[data-theme^="new"] .new_actionbtn.unlock { background: var(--hf-brand); border-color: var(--hf-brand); color: var(--hf-on-brand); }
/* Unlock (formatPremiumButton in global.js, and the pages' own): the brand's tint with the level's small red number, filled
   on hover, where a grey outline sat among the figures unnoticed */
html[data-theme^="new"] { --nl-unl-bg: #fff4cc; --nl-unl-line: #efc54a; --nl-unl-text: #6e4c00; }
html[data-theme="new-dark"] { --nl-unl-bg: rgba(245, 180, 0, .14); --nl-unl-line: rgba(245, 180, 0, .55); --nl-unl-text: #ffd666; }
@media (prefers-color-scheme: dark) { html[data-theme="new"] { --nl-unl-bg: rgba(245, 180, 0, .14); --nl-unl-line: rgba(245, 180, 0, .55); --nl-unl-text: #ffd666; } }
html[data-theme^="new"] .new_actionbtn:has(> .unlock_sup) { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px 4px 7px; border: 1px solid var(--nl-unl-line);
    border-radius: 999px; background: var(--nl-unl-bg); color: var(--nl-unl-text); font-weight: 600; line-height: 18px; transition: background .12s, color .12s, border-color .12s; }
html[data-theme^="new"] .new_actionbtn:has(> .unlock_sup):hover { background: var(--hf-brand); border-color: var(--hf-brand); color: var(--hf-on-brand); }
html[data-theme^="new"] .new_actionbtn:has(> .unlock_sup) .unlock_sup { color: var(--hf-neg); font-weight: 700; }
html[data-theme^="new"] .new_actionbtn:has(> .unlock_sup):hover .unlock_sup { color: inherit; }
/* "Level 1" in place of Unlock¹ (nl_unlock_label, newlook.js): the level in the button's own text, on one line */
html[data-theme^="new"] .new_actionbtn:has(> .nl-unl-lvl) { white-space: nowrap; }
html[data-theme^="new"] .new_actionbtn .unlock_sup.nl-unl-lvl { color: inherit; font-weight: inherit; }
/* the upgrade window (nl_upgrade_window): the login's dark window, the lock beside its heading */
html[data-theme^="new"] .nl-up-lock { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(245, 180, 0, .14); }
html[data-theme^="new"] .nl-up-lock::before { content: ''; width: 18px; height: 18px; background: var(--hf-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
html[data-theme^="new"] #loginModal .nl-up h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
html[data-theme^="new"] #loginModal .nl-up-text { margin: 0 0 12px; font-size: 14px; color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-up-text b { color: #fff; }
html[data-theme^="new"] #loginModal .nl-up-list { margin: 0 0 14px; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.4; color: #e9ecef; }
html[data-theme^="new"] #loginModal .nl-up-list li { position: relative; margin: 0; padding: 4px 0 4px 26px; list-style: none; }
html[data-theme^="new"] #loginModal .nl-up-list li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 11px; height: 6px; border-left: 2px solid var(--hf-brand);
    border-bottom: 2px solid var(--hf-brand); transform: rotate(-45deg); }
html[data-theme^="new"] #loginModal .nl-up-price { margin: 0 0 4px; font-size: 14px; color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-up-price b { font-size: 18px; color: #fff; vertical-align: baseline; } /* not top (b, elsewhere): the rest of the line sits on its foot */
html[data-theme^="new"] #loginModal a.nl-up-go { text-decoration: none; }
html[data-theme^="new"] #loginModal .nl-up-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 12px; font-size: 13.5px; color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-up-alt button { padding: 0; border: 0; background: none; color: var(--hf-datatip-link); font: inherit; cursor: pointer; box-shadow: none; }
html[data-theme^="new"] #loginModal .nl-up-alt .nl-up-later { color: var(--nl-lg-muted); }
html[data-theme^="new"] #loginModal .nl-up-alt button:hover { text-decoration: underline; }

/* ---------- Tables: hairlines between rows instead of a dotted grid; numbers line up ---------- */
html[data-theme^="new"] .dataTable { font-family: var(--nl-font-table); font-variant-numeric: tabular-nums; border: 1px solid var(--hf-border-strong); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: visible; overflow: clip; background: var(--hf-surface); } /* clip, not hidden: hidden would make the table the scroll box its pinned (sticky) columns stick to, so they never stuck */
html[data-theme^="new"] .dataTable td { border: 0; border-bottom: 1px solid var(--hf-border); }
/* the last column's figures off the table's right edge, which right-aligned ones touched (a cell has no padding on its right).
   The rows are built of the columns on show only; the header keeps the others, hidden, after them (reorder_columns, global.js) */
html[data-theme^="new"] .dataTable > tbody > tr > td:last-child, html[data-theme^="new"] .dataTable > thead > tr > th:nth-last-child(1 of [data-visible="1"]) { padding-right: 12px; }
html[data-theme^="new"] .dataTable td.nl-wrap { white-space: normal; line-height: 1.3; } /* a column narrowed so that longer text wraps (a sector) */
html[data-theme^="new"] .dataTable tr:last-child td { border-bottom: 0; }
/* headers in the condensed face too: the columns' widths are fixed, and regular Plex wrapped "Average Buy Price" */
html[data-theme^="new"] .dataTable th { border: 0; border-bottom: 1px solid var(--hf-border-strong); color: var(--hf-table-head-text, var(--hf-text-muted)); font-family: var(--nl-font-table); font-size: 13px; font-weight: 500; }
html[data-theme^="new"] .dataTable thead { background: var(--hf-table-head-bg); }
/* the column groups (global.js: the buttons over a table that switch its set of columns): a strip on the table's top edge,
   as wide as the table and in its header's color, so the buttons read as part of it; the chosen group in the brand's
   amber, as Follow is. The strip's inline width (the columns' total when the table was set up) gives way. */
html[data-theme^="new"] [id$="_col_groups_ctr"] { box-sizing: border-box; width: auto !important; max-width: 100%; padding: 6px; border: 1px solid var(--hf-border-strong) !important; border-bottom: 0 !important; border-radius: 8px 8px 0 0; background: var(--hf-table-head-bg); }
html[data-theme^="new"] [id$="_col_groups_ctr"] ~ :is(.scrollWrapper, .nl-ph-host > .scrollWrapper) > table.dataTable { border-top-left-radius: 0; border-top-right-radius: 0; }
html[data-theme^="new"] .new_actionbtn.col_group_btn.active, html[data-theme^="new"] .new_actionbtn.col_group_btn.active:hover { background: var(--hf-brand); border-color: var(--hf-brand); color: var(--hf-on-brand); }
/* the buttons in one row that scrolls sideways where they don't fit (nl_cg_strip): on two lines the chosen one touched the
   one under it; the arrows (init_scroll_strip) sit on the row's edges, sized to the buttons */
html[data-theme^="new"] [id$="_col_groups_ctr"].nl-cg-strip { position: relative; }
html[data-theme^="new"] .nl-cg-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
html[data-theme^="new"] .nl-cg-scroll::-webkit-scrollbar { display: none; }
html[data-theme^="new"] .nl-cg-scroll > .col_group_btn { flex: none; margin: 0; }
html[data-theme^="new"] .nl-cg-strip > .strip_arrow { width: 26px; height: 26px; font-size: 12px; }
html[data-theme^="new"] .nl-cg-strip > .strip_left { left: 2px; }
html[data-theme^="new"] .nl-cg-strip > .strip_right { right: 2px; }
/* the same groups as tabs in the Columns window: Classic's 11px (inline) was hard to read on the window's dark ground */
html[data-theme^="new"] .tab.tabCols { font-size: 13px !important; padding: 4px 8px; color: inherit; opacity: .7; }
html[data-theme^="new"] .tab.tabCols:hover, html[data-theme^="new"] .tab.tabCols.selectedTab { color: inherit; opacity: 1; }
html[data-theme^="new"] .tab.tabCols:not(.selectedTab) { border: 0 !important; border-bottom: 3px solid transparent !important; }
html[data-theme^="new"] .dataTable tr:hover td { border-top: 0; border-bottom: 1px solid var(--hf-border); background-color: var(--hf-row-hover) !important; }
html[data-theme^="new"] .dataTable tr:last-child:hover td { border-bottom: 0; }
/* the fund and stock pages' Date headers: on one line (with a saved layout's extra columns the tables don't stretch, and Chrome
   wrapped the sort mark under it), without Classic's 10-15px of room after the ⓘ */
html[data-theme^="new"] .dataTable th[data-field="quarter"] { white-space: nowrap; }
html[data-theme^="new"] .dataTable th[data-field="quarter"] .icon-info-circled { margin-right: 0 !important; } /* as when not hovered: a border there grew the table a pixel, pushing what's under it (the fund page's Largest Sells) */
html[data-theme^="new"] .dataTable a { font-weight: 500; }
/* the values: 14px (Classic's .big is 16px); linked names and tickers semibold */
html[data-theme^="new"] .dataTable .big, html[data-theme^="new"] .dataTable .greenBig, html[data-theme^="new"] .dataTable .redBig, html[data-theme^="new"] .dataTable .notSoBig { font-size: 14px; } /* whole pixels: 14.5 rendered softer */
html[data-theme^="new"] .dataTable .big a { font-weight: 600; }

/* the wide stock tables span the content width, lining up with the panels above (myDataTree sets each table's width to
   the sum of its columns; with table-layout: fixed, columns keep at least their widths, so on phones they still scroll).
   Other tables fill the width only when their columns (--hf-cols-w, from myDataTree) take 85% of it or more (a card's take
   87-98%); narrower ones keep their columns' width, as in Classic: stretched, a table of few columns spread its values
   apart (the Congress trades: 699px of columns at 1080). The clamp is the switch: 0 below 85%, the rest of the width above. */
html[data-theme^="new"] .scrollWrapper > table.dataTable {
    width: calc(var(--hf-cols-w, 100%) + clamp(0px, (var(--hf-cols-w, 100%) - 85%) * 1000, 100% - var(--hf-cols-w, 100%))) !important; }
html[data-theme^="new"] table.dataTable.nl-stock-table { width: 100% !important; }
/* ...unless marked nl-cols-w: as wide as its columns. The insider tracker and My Tracker's insider trades (878px of columns
   at 1080; Trade 220, as a trade's two lines run to 194px): stretched, the room left one column (Filed, then Trade) a wide
   gap; before the two-line Stock cell (Oct 2026) the tracker kept its columns' width, 846px then */
html[data-theme^="new"] table.dataTable.nl-stock-table.nl-cols-w { width: var(--hf-cols-w, 100%) !important; }
/* a table the page scrolls (nl_page_head_fit, NL_PAGE_HEADS in newlook.js): no box where it fits the width, its header held under
   the site's bar (45px: tucked under its bottom edge) and at the top once the bar slides away (header.nav-up, hasScrolled()
   in global.js). Clipped sideways rather than a scroll box, which would hold the header inside it (the ETF pages' tables). */
html[data-theme^="new"] .scrollWrapper.nl-page-head { height: auto !important; overflow: clip visible !important; }
html[data-theme^="new"] .scrollWrapper.nl-page-head > table.dataTable > thead { top: 45px; transition: top .2s ease; }
/* html.nl-bar-up: the bar slid away, set on the root by global.js as it watches the bar (:has(header.nav-up) was, and a phone
   was seen with a header left 46px down, the bar gone and the rows showing through the gap) */
html[data-theme^="new"].nl-bar-up .scrollWrapper.nl-page-head > table.dataTable > thead { top: -1px; }
/* the fund and Congress member pages hold their tables in a box with overflow: hidden, a scroll box the header stuck to
   (45px down it, a gap over the header, and no further); clip cuts the same sideways without being one, flow-root keeps its
   block. Nothing cut downwards: More filters' panel opens in the box, over the table, and a filter that left few rows or
   none cut it off at the box's foot (Nov 2026) */
html[data-theme^="new"] .nl-table-strip[style*="overflow:hidden"] { overflow: clip visible !important; display: flow-root; }
/* a wider table (nl_float_head): no taller than its rows, still scrolling sideways, and a copy of its header held under the
   bar, over the real one (its top border tucked under the bar, as the held header's is) */
html[data-theme^="new"] .scrollWrapper.nl-page-wide { height: auto !important; }
html[data-theme^="new"] .nl-ph-float { position: sticky; top: 44px; z-index: 6; transition: top .2s ease; }
html[data-theme^="new"].nl-bar-up .nl-ph-float { top: -2px; }
html[data-theme^="new"] .nl-ph-host:not(.nl-ph-on) > .nl-ph-float { display: none; }
html[data-theme^="new"] .nl-ph-host.nl-ph-low > .nl-ph-float { visibility: hidden; } /* the real header still well in view (nl_float_head) */
html[data-theme^="new"] .nl-ph-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
html[data-theme^="new"] .nl-ph-scroll::-webkit-scrollbar { display: none; }
html[data-theme^="new"] .nl-ph-float table.dataTable { margin: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html[data-theme^="new"] .nl-ph-float table.dataTable > thead { position: static; visibility: visible; }
/* ...or, where the browser can (nl_ph_sda, newlook.js), its own header moved down it as the page scrolls past: an animation on
   the box's place in the window (its numbers per table, there), the window's top taken as the bar's foot (45px, as the held
   header's; -1px once the bar slides away, eased as the bar is). Not inherited: passed down, every check of the bar's state
   restyled the whole table (2,500 elements, 20ms, several times a second as it scrolled) */
@property --nl-ph-top { syntax: '<length>'; inherits: false; initial-value: 45px; }
html[data-theme^="new"] .scrollWrapper.nl-ph-sda { view-timeline: --nl-ph block; view-timeline-inset: var(--nl-ph-top) 0px; transition: --nl-ph-top .2s ease; }
html[data-theme^="new"].nl-bar-up .scrollWrapper.nl-ph-sda { --nl-ph-top: -1px; }
/* ...and on a touch screen, once the page comes to rest on it, a box the screen's height that scrolls both ways (nl_box_set,
   newlook.js), its own header sticky at its top: under the bar while it shows, at the very top once it's gone */
html[data-theme^="new"] .scrollWrapper.nl-page-wide.nl-box-on { box-sizing: border-box; height: 100vh !important; height: 100dvh !important;
    padding-bottom: var(--nl-foot-ad, 0px); } /* room under the last row for an ad pinned to the window's foot (nl_foot_ad) */
html[data-theme^="new"] .scrollWrapper.nl-box-on > table.dataTable > thead { top: 45px; transition: top .2s ease; animation: none !important; }
html[data-theme^="new"].nl-bar-up .scrollWrapper.nl-box-on > table.dataTable > thead { top: -1px; }
/* it neither bounces at its top or foot nor hands a swipe to the page itself: nl_box_edge moves the page with the finger, the
   rest of the swipe that got there included (.nl-box-edge: undone by then, until the next touch) */
html[data-theme^="new"] .scrollWrapper.nl-box-on, html[data-theme^="new"] .scrollWrapper.nl-box-edge { overscroll-behavior-y: none; }
/* its header slides down into place as the box takes over from a page that had gone past it (on a touch screen without the
   scroll-driven header nothing held it meanwhile: nl_box_set) */
@keyframes nl-head-in { from { transform: translateY(-100%); } }
html[data-theme^="new"] .scrollWrapper.nl-box-on.nl-box-in > table.dataTable > thead { animation: nl-head-in .22s ease-out !important; }
@media (prefers-reduced-motion: reduce) { html[data-theme^="new"] .scrollWrapper.nl-box-on.nl-box-in > table.dataTable > thead { animation: none !important; } }
/* a table's header waits for its columns (hf-built, reorder_columns in global.js): drawn before, it showed every column of every
   group squeezed into the width (Hot Stocks, Dividend Aristocrats) while the saved layout and the data loaded */
html[data-theme^="new"] table.dataTable[data-options]:not(.hf-built) > thead { visibility: hidden; }

/* the Stock cell (nl_format_stock): the ticker over the company name */
html[data-theme^="new"] .dataTable .nl-stock { display: flex; flex-direction: column; justify-content: center; height: 50px; min-width: 0; line-height: 1.3; }
html[data-theme^="new"] .dataTable .nl-tk { font-size: 14.5px; font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .dataTable .nl-co { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 400; color: var(--hf-text-muted); }
html[data-theme^="new"] .dataTable a.nl-tk:hover, html[data-theme^="new"] .dataTable a.nl-co:hover { color: var(--hf-link); }
html[data-theme^="new"] .dataTable .nl-stock .followed_star { font-size: 11px; }
html[data-theme^="new"] .dataTable .nl-stock > span { white-space: nowrap; }
/* the pinned name columns folding as the table scrolls sideways (nl_pin_fold, newlook.js): each one's right --nl-cut-<field>
   pixels are covered, and it slides --nl-shift-<field> left as the pinned ones before it fold (its sticky left takes it). Its cells keep their width;
   their background and contents stop short of the edge (the background a gradient of the cell's own color, --nl-pin-bg
   from global.js, sized; the contents a narrower box, names ending in dots), so the scrolled columns show there, and the
   cell's drop shadow falls on the new edge. Not clip-path: Firefox kept a sticky cell's clip with the scrolling content
   mid-scroll, so the column vanished and came back (Oct 2026). A new folding field goes in each list below */
html[data-theme^="new"] .dataTable.nl-pin-cut :is(td[data-pin="symbol"], th[data-field="symbol"]) { --nl-cut: var(--nl-cut-symbol, 0px); --nl-shift: var(--nl-shift-symbol, 0px); }
html[data-theme^="new"] .dataTable.nl-pin-cut :is(td[data-pin="fundName"], th[data-field="fundName"]) { --nl-cut: var(--nl-cut-fundName, 0px); --nl-shift: var(--nl-shift-fundName, 0px); }
html[data-theme^="new"] .dataTable.nl-pin-cut :is(td[data-pin="insiderName"], th[data-field="insiderName"]) { --nl-cut: var(--nl-cut-insiderName, 0px); --nl-shift: var(--nl-shift-insiderName, 0px); }
html[data-theme^="new"] .dataTable.nl-pin-cut :is(td[data-pin="filer"], th[data-field="filer"]) { --nl-cut: var(--nl-cut-filer, 0px); --nl-shift: var(--nl-shift-filer, 0px); }
html[data-theme^="new"] .dataTable.nl-pin-cut :is(td[data-pin="symbol"], td[data-pin="fundName"], td[data-pin="insiderName"], td[data-pin="filer"]) {
    background-color: transparent !important; background-image: linear-gradient(var(--nl-pin-bg), var(--nl-pin-bg)) !important; }
html[data-theme^="new"] .dataTable.nl-pin-cut :is(th[data-field="symbol"][style*="sticky"], th[data-field="fundName"][style*="sticky"], th[data-field="insiderName"][style*="sticky"], th[data-field="filer"][style*="sticky"]) {
    background-color: transparent !important; background-image: linear-gradient(var(--hf-table-head-bg), var(--hf-table-head-bg)) !important; }
html[data-theme^="new"] .dataTable.nl-pin-cut :is(td[data-pin="symbol"], td[data-pin="fundName"], td[data-pin="insiderName"], td[data-pin="filer"], th[data-field="symbol"][style*="sticky"], th[data-field="fundName"][style*="sticky"], th[data-field="insiderName"][style*="sticky"], th[data-field="filer"][style*="sticky"]) {
    background-size: calc(100% - var(--nl-cut)) 100% !important; background-repeat: no-repeat !important; } /* the slide: their sticky left (hf_pinned_lefts, global.js) */
html[data-theme^="new"] .dataTable.nl-pin-cut :is(td[data-pin="symbol"], td[data-pin="fundName"], td[data-pin="insiderName"], td[data-pin="filer"], th[data-field="symbol"][style*="sticky"], th[data-field="fundName"][style*="sticky"], th[data-field="insiderName"][style*="sticky"], th[data-field="filer"][style*="sticky"]) > * {
    max-width: calc(100% - var(--nl-cut)); overflow: hidden; }
html[data-theme^="new"] .dataTable .nl-pin-th { display: inline-block; max-width: 100%; white-space: nowrap; vertical-align: middle; }
/* The pinned columns' edge: a shadow on the last one's right side. Not the drop-shadow filter global.js gives every pinned
   cell: Chrome draws each filtered cell as a surface of its own, and scrolling, some rows' edge went missing (Nov 2026); the
   earlier pinned columns' shadow fell on the next pinned one anyway. In dark a line with it, as a shadow hardly shows there */
html[data-theme^="new"] { --nl-pin-edge: 3px 0 3px -2px rgba(0, 0, 0, .22); }
html[data-theme="new-dark"] { --nl-pin-edge: 1px 0 0 var(--hf-border-strong), 3px 0 4px -1px rgba(0, 0, 0, .55); }
@media (prefers-color-scheme: dark) { html[data-theme="new"] { --nl-pin-edge: 1px 0 0 var(--hf-border-strong), 3px 0 4px -1px rgba(0, 0, 0, .55); } }
html[data-theme^="new"] .dataTable :is(td[data-pin], th[style*="sticky"]) { filter: none !important; }
html[data-theme^="new"] .dataTable td[data-pin]:not(:has(+ td[data-pin])),
html[data-theme^="new"] .dataTable th[data-visible="1"][style*="sticky"]:not(:has(~ th[data-visible="1"][style*="sticky"])) { box-shadow: var(--nl-pin-edge); }
/* the Fund cell (nl_fund_cell): the fund over its manager, each cut short with an ellipsis */
html[data-theme^="new"] .dataTable .nl-fund { display: flex; flex-direction: column; justify-content: center; height: 50px; min-width: 0; line-height: 1.3; }
html[data-theme^="new"] .dataTable .nl-fund > span { display: flex; align-items: center; gap: 4px; min-width: 0; }
html[data-theme^="new"] .dataTable .nl-fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .dataTable .nl-mgr { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .dataTable .nl-fn:hover, html[data-theme^="new"] .dataTable .nl-mgr:hover { color: var(--hf-link); }
html[data-theme^="new"] .dataTable .nl-fund .followed_star { flex: none; font-size: 11px; }
html[data-theme^="new"] .dataTable .nl-fund .nl-fl-fresh { flex: none; border: 0; font-size: 13px; color: var(--hf-warn-text); cursor: help; } /* the fund lists: no holdings on file the quarter before (nl_fund_fresh) */

/* % of portfolio in a fund's holdings (nl_pp_cell): the weight over a bar scaled to the fund's largest holding */
html[data-theme^="new"] .dataTable .nl-pp { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 50px; }
html[data-theme^="new"] .dataTable .nl-pp i { display: block; width: 72px; max-width: 100%; height: 4px; border-radius: 2px; background: var(--hf-border-light); }
html[data-theme^="new"] .dataTable .nl-pp b { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: var(--hf-accent); opacity: .55; }

/* ownership history (nl_own_cell): a bar per quarter, the latest darker; a tooltip lists the shares */
html[data-theme^="new"] .nl-own-wrap { display: flex; align-items: center; justify-content: center; height: 50px; }
html[data-theme^="new"] .nl-own-cell { position: relative; display: inline-flex; gap: 3px; height: 34px; padding: 0 2px; cursor: help; }
/* 11px each; six or more (a 13D/G trade adds one: nl-own-many) narrower, in the width five take (--nl-own-w, nl_own_cell) */
html[data-theme^="new"] .nl-own-cell i { position: relative; display: block; flex: none; width: var(--nl-own-w, 11px); height: 100%; }
html[data-theme^="new"] .nl-own-cell.nl-own-many { gap: 2px; }
html[data-theme^="new"] .nl-own-cell i b { position: absolute; left: 0; right: 0; background: var(--hf-text-faint); opacity: .75; border-radius: 2px 2px 0 0; }
html[data-theme^="new"] .nl-own-cell i:last-of-type b { background: var(--hf-text-muted); opacity: 1; }
html[data-theme^="new"] .nl-own-cell i.zero b { background: var(--hf-border-strong); }
html[data-theme^="new"] .nl-own-cell i.neg b { background: var(--hf-neg); border-radius: 0 0 2px 2px; }
html[data-theme^="new"] .nl-own-cell:hover i b { opacity: 1; }
html[data-theme^="new"] .nl-own-zero { position: absolute; left: 0; right: 0; height: 1px; background: var(--hf-border-strong); } /* net ownership's zero line */

/* Classic sets Lato or Roboto on some cells and labels; one family everywhere here */
html[data-theme^="new"] .dataTable td, html[data-theme^="new"] .dataTable .fundName, html[data-theme^="new"] .fundName { font-family: var(--nl-font-data); font-weight: 450; }

/* the insider page's trades (nl_ins_* in newlook.js): each cell's fact on top, its detail in smaller grey under it */
html[data-theme^="new"] .nl-ins-cell { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.35; }
html[data-theme^="new"] .nl-ins-cell > span:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
html[data-theme^="new"] .nl-ins-cell > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme^="new"] .nl-ins-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--hf-text-muted); }
/* a role whose tooltip lists more: underlined as every tooltip is (.hasTooltip's dashed border, under its words only); a dotted
   underline of its own as well drew two lines (Nov 2026) */
html[data-theme^="new"] .nl-ins-roles { width: fit-content; max-width: 100%; cursor: help; }
html[data-theme^="new"] .nl-ins-what { font-weight: 600; white-space: nowrap; }
html[data-theme^="new"] :is(.nl-ins-what, .nl-ins-sub).nl-ins-buy { color: var(--hf-pos); }
html[data-theme^="new"] :is(.nl-ins-what, .nl-ins-sub).nl-ins-sell { color: var(--hf-neg); }
html[data-theme^="new"] .nl-ins-what .icon-info-circled { margin-left: 2px; }
html[data-theme^="new"] .nl-ins-kind { color: var(--hf-text-muted); font-weight: 500; }
html[data-theme^="new"] .nl-ins-held { font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-ins-tag { flex: none; padding: 0 5px; border: 1px solid var(--hf-border-strong); border-radius: 4px; font-size: 11px; font-weight: 500; line-height: 16px; color: var(--hf-text-muted); cursor: help; }
html[data-theme^="new"] .nl-ins-date { font-size: 13px; white-space: nowrap; }
/* the Congress tables (nl_cg_*): the Stock cell's Call / Put tag, small, beside the ticker; Classic's asset icon on the left; the trade's own two lines; dates over their faded year */
html[data-theme^="new"] .nl-cg-stock .indicator { margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 600; line-height: 15px; }
html[data-theme^="new"] .nl-cg-icon > div { display: inline-block; text-align: left !important; }
/* Congress: what an asset with no ticker is, and an owner other than the member (nl_cg_asset, nl_cg_owner), as tags in the
   theme's colors on any row's tint */
html[data-theme^="new"] .nl-cg-tag { display: inline-block; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--hf-text) 24%, var(--hf-surface)); border-radius: 4px;
    background: color-mix(in srgb, var(--hf-text) 9%, var(--hf-surface)); color: var(--hf-text-muted); font: 600 11px/16px var(--nl-font); white-space: nowrap; vertical-align: 2.5px; cursor: help; }
/* (mixed from the text's color: the theme's greys were the hovered row's in the dark theme, and the tag vanished; up 2.5px,
   its middle on the figure's digits beside it) */
html[data-theme^="new"] .nl-cg-tag.nl-cg-asset { font-size: 12px; line-height: 18px; color: var(--hf-text); vertical-align: 1px; }
html[data-theme^="new"] .nl-cg-trade > span:first-child { display: block; }
html[data-theme^="new"] .nl-cg-date > span:first-child { font-size: 13.5px; white-space: nowrap; }
html[data-theme^="new"] .nl-cg-date .nl-ins-sub { font-size: 12px; color: var(--hf-text-faint); }
/* an option's terms under its trade or name ("Strike: $100, Exp: Jun 17, '27": nl_option_terms), a little apart and smaller */
html[data-theme^="new"] .nl-opt-terms { display: block; margin-top: 5px; font-size: 12px; line-height: 1.3; color: var(--hf-text-muted); }
/* a member's page: the head's four figures (the fund page's strip, which holds six: .nl-stats.nl-cg-stats outweighs its
   columns, set later in this file), two by two on narrower screens; the Net Worth tab's cards, two to a line */
html[data-theme^="new"] .nl-cg-stats dd small { display: block; margin: 2px 0 0; } /* a figure's range under it */
html[data-theme^="new"] .nl-stats.nl-cg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media screen and (max-width: 1000px) {
    html[data-theme^="new"] .nl-stats.nl-cg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-theme^="new"] .nl-stats.nl-cg-stats > div { border-left: 1px solid var(--hf-border); border-top: 1px solid var(--hf-border); }
    html[data-theme^="new"] .nl-stats.nl-cg-stats > div:nth-child(odd) { border-left: 0; }
    html[data-theme^="new"] .nl-stats.nl-cg-stats > div:nth-child(-n+2) { border-top: 0; }
}
/* Where the Money Is: one bar, a type's name inside its part when it fits (nl_mix_fit), then the types in aligned columns */
html[data-theme^="new"] .nl-mix-bar { display: flex; height: 26px; margin: 2px 0 10px; border-radius: 6px; overflow: hidden; background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-mix-bar > span { flex: none; display: flex; align-items: center; justify-content: center; min-width: 2px; height: 100%; overflow: hidden; box-shadow: 2px 0 0 var(--hf-surface); }
html[data-theme^="new"] .nl-mix-bar em { padding: 0 6px; font: 600 12px var(--nl-font); white-space: nowrap; }
html[data-theme^="new"] .nl-mix-bar em[hidden] { display: none; }
html[data-theme^="new"] .nl-mix-list { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-mix-list td { padding: 6px 0; border-bottom: 1px solid var(--hf-border-light); }
html[data-theme^="new"] .nl-mix-list tr:last-child td { border-bottom: 0; }
html[data-theme^="new"] .nl-mix-list td:first-child { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-mix-list td:first-child i { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 2px; vertical-align: -1px; }
html[data-theme^="new"] .nl-mix-list td:nth-child(2) { width: 60px; text-align: right; font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-mix-list td:nth-child(3) { width: 76px; text-align: right; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-cg-nw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
html[data-theme^="new"] .nl-cg-nw > .nl-panel { padding: 12px 16px 14px; }
html[data-theme^="new"] .nl-cg-nw h2 { margin: 0 0 8px; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-cg-nw { grid-template-columns: minmax(0, 1fr); }
}
/* the price sparkline: global.css gives its fill a translucent blue, which a solid role color can't carry */
html[data-theme^="new"] .sparkline-area { fill: var(--hf-accent); fill-opacity: .14; }
html[data-theme^="new"] .css-sparkline:hover .sparkline-area { fill-opacity: .24; }
html[data-theme^="new"] .sparkline-path { stroke: var(--hf-accent); }
/* treemap labels (drawn as SVG text with a serif default) */
html[data-theme^="new"] #topHolders text, html[data-theme^="new"] .d3plus_label text, html[data-theme^="new"] svg text.d3plus_label { font-family: var(--nl-font) !important; font-weight: 600; }

/* ---------- Hints for new visitors (the yellow bubbles) and tooltips ---------- */
html[data-theme^="new"] .HF_tip { font-family: var(--nl-font); font-size: 12px; line-height: 1.4; border-radius: 8px; box-shadow: var(--nl-shadow); }
html[data-theme^="new"] .HF_tip > .close, html[data-theme^="new"] .close_circle { border-radius: 50%; }
/* hot stocks' Volume Surge tab: two lines, not five (HF_tips places a tip 56px left of the tab's middle, hence the arrow) */
html[data-theme^="new"] .HF_tip[data-tipid="hot_volume_surge"] { width: 180px; }
html[data-theme^="new"] .HF_tip[data-tipid="hot_volume_surge"]::after { left: 58px; }
/* phones: the tab is the right half of the row (its tip's anchor at the middle of the screen), so the tip ends 20px from
   the screen's edge, its arrow under the tab's middle, rather than running off the page */
@media screen and (max-width: 600px) {
    html[data-theme^="new"] .HF_tip[data-tipid="hot_volume_surge"] { width: 180px; left: auto !important; right: calc(20px - 50vw); }
    html[data-theme^="new"] .HF_tip[data-tipid="hot_volume_surge"]::after { left: auto; right: calc(25vw - 16px); margin-left: 0; }
}
html[data-theme^="new"] #tooltipAll, html[data-theme^="new"] #tooltipImages, html[data-theme^="new"] #tooltipCharts, html[data-theme^="new"] .qtip { font-family: var(--nl-font); border-radius: 8px; box-shadow: var(--nl-shadow); }

/* ---------- Notes and charts on the fund page's other tabs ---------- */
html[data-theme^="new"] .score .stars-inactive.blank { color: var(--hf-border-strong); } /* the empty signal squares (AI tab): the text color glared in the dark look */
html[data-theme^="new"] .hf-locked-box { font-size: 13.5px; line-height: 1.5; }
/* the radar (RadarChart in global.js, Performance History): its labels and grid in the theme's colors, readable in dark */
html[data-theme^="new"] #radar text { fill: var(--hf-text-muted) !important; }
html[data-theme^="new"] #radar .level-lines, html[data-theme^="new"] #radar .axis-lines { stroke: var(--hf-border-strong) !important; }

/* the AI tab: insights a little larger than Classic's 12px, and the banner (nl_ai_banner) as a themed card */
html[data-theme^="new"] #insights_table { font-size: 13.5px !important; }
html[data-theme^="new"] #ai_insight a { font-weight: 600; } /* the stock page's AI Summary: its tickers stand out, as linked tickers do elsewhere */
html[data-theme^="new"] .nl-ai-card { display: block; max-width: 460px; margin: 0 auto; padding: 16px 16px 10px; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); text-decoration: none; }
html[data-theme^="new"] .nl-ai-card:hover { border-color: var(--hf-accent-border); text-decoration: none; box-shadow: var(--nl-shadow); }
html[data-theme^="new"] .nl-ai-card.nl-ai-static:hover { border-color: var(--hf-border); box-shadow: none; } /* AI-stock-picks' own picture, not a link */
/* AI-stock-picksDev.php's top: what the picks are, beside the picture; one above the other on a phone */
html[data-theme^="new"] .nl-aip-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: center; margin: 2px 0 20px; }
html[data-theme^="new"] .nl-aip-head p { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--hf-text); }
html[data-theme^="new"] .nl-aip-head .nl-ai-card { max-width: none; margin: 0; }
@media (max-width: 760px) {
    html[data-theme^="new"] .nl-aip-head { grid-template-columns: 1fr; gap: 14px; }
}
html[data-theme^="new"] .nl-ai-title { display: block; font-size: 16px; font-weight: 600; color: var(--hf-text-strong); text-align: center; }
html[data-theme^="new"] .nl-ai-flow { display: block; width: 100%; height: auto; margin-top: 6px; font-family: var(--nl-font); }
html[data-theme^="new"] .nl-ai-node { fill: var(--hf-surface-alt); stroke: var(--hf-border-strong); stroke-width: 1.5; }
html[data-theme^="new"] .nl-ai-out { fill: var(--hf-pos-bg); stroke: var(--hf-pos); }
html[data-theme^="new"] .nl-ai-big { fill: var(--hf-text-strong); font-size: 27px; font-weight: 700; text-anchor: middle; }
html[data-theme^="new"] .nl-ai-out-t { fill: var(--hf-pos); font-size: 32px; }
html[data-theme^="new"] .nl-ai-small { fill: var(--hf-text-muted); font-size: 16px; text-anchor: middle; }
/* the picture shrinks to a phone's width (about two thirds), so its words are set larger there */
@media (max-width: 600px) {
    html[data-theme^="new"] .nl-ai-big { font-size: 30px; }
    html[data-theme^="new"] .nl-ai-out-t { font-size: 35px; }
    html[data-theme^="new"] .nl-ai-small { font-size: 18px; }
}
/* AI-stock-picksDev.php's two tabs: centred, on one line (a narrow phone's tabs a little tighter; at 320px the row scrolls) */
html[data-theme^="new"] .nl-aip-tabs { display: flex; }
html[data-theme^="new"] .nl-aip-tabs > .tab:first-child { margin-left: auto; }
html[data-theme^="new"] .nl-aip-tabs > .tab:last-child { margin-right: auto; }
@media (max-width: 400px) {
    html[data-theme^="new"] .nl-aip-tabs > .tab { padding-left: 8px; padding-right: 8px; font-size: 13.5px; }
}
html[data-theme^="new"] .nl-ai-arrow { fill: none; stroke: var(--hf-text-faint); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* the AUM tab's breakdowns (nl_aum_bars): a row per category with its share and amount, in place of the pies */
html[data-theme^="new"] .nl-aum-bars { padding: 4px 0 8px; }
html[data-theme^="new"] .nl-aum-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 3px 10px; padding: 6px 0; line-height: 1.3; border-bottom: 1px solid var(--hf-border-light); font-size: 13.5px; }
html[data-theme^="new"] .nl-aum-k { color: var(--hf-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme^="new"] .nl-aum-row > b { font-weight: 600; color: var(--hf-text-strong); font-variant-numeric: tabular-nums; text-align: right; } /* the figures in a fixed right column: every bar the same length, the numbers aligned */
html[data-theme^="new"] .nl-aum-bar { display: block; height: 6px; border-radius: 3px; background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-aum-bar i { display: block; height: 100%; border-radius: 3px; background: var(--hf-accent); }
html[data-theme^="new"] .nl-aum-amt { font-size: 12.5px; color: var(--hf-text-muted); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Stock page tabs: charts and widgets on cards, like the fund page's panels, so the page color stays the same on
   every tab and what's drawn on white in Classic is still drawn on white ---------- */
/* Short Interest and Financials: each .si_panel (a heading over a chart, list or statement) is a card */
html[data-theme^="new"] .si_panel { padding: 12px 16px 14px; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); }
html[data-theme^="new"] .si_panel > h2:first-child { margin-top: 0; }
/* a table in a card (Short Interest History) runs to the card's edges, the card being its frame, so it keeps its width */
html[data-theme^="new"] .si_panel > div[style*="position"] { margin: 0 -16px; }
html[data-theme^="new"] .si_panel > div[style*="position"] .dataTable { border-right: 0; border-left: 0; border-radius: 0; }
/* Short Interest: the cards in two columns with even gutters and even heights (Classic floats them, padded on the right) */
html[data-theme^="new"] #tabShortInterest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 12px; }
html[data-theme^="new"] #tabShortInterest > * { grid-column: 1 / -1; }
html[data-theme^="new"] #tabShortInterest > .col-1-2 { grid-column: auto; float: none; width: auto; margin: 0; padding: 0; }
html[data-theme^="new"] #tabShortInterest > .col-1-2 > .si_panel { box-sizing: border-box; height: 100%; }
html[data-theme^="new"] #tabShortInterest > .si_kpis { margin: 0; }
html[data-theme^="new"] .si_score_bar { background: var(--hf-border); } /* the surface-alt track all but vanished on the card */
/* Financials' sliders (valuation, favorability, momentum) alike: a track that shows on the card, the 5-year band on it */
html[data-theme^="new"] .fin_val_track { background: var(--hf-border); }
html[data-theme^="new"] .fin_val_band { background: var(--hf-accent-border); }
html[data-theme^="new"] .fin_val_dot { box-shadow: 0 0 0 2px var(--hf-surface); }
html[data-theme^="new"] :is(.fin_hl_grid, .fin_two, .fin_three, .fin_stack) { gap: 16px; }
html[data-theme^="new"] .fin_stmt_panel { margin-top: 16px; }
/* Buys vs. Sells, Ownership Trends, Buy Prices, Summary and Chart (and the insider page's Trends): each block (heading, "Showing" menu, chart or table) is a card, like the
   Short Interest panels. The tab is a grid of six tracks (thirds span two, halves three), so cards get even gutters, line up
   with the page's edges and match heights along a row. Classic floats the blocks with padding on the right. */
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding-top: 12px; }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > * { grid-column: 1 / -1; }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) { float: none; width: auto; min-width: 0; box-sizing: border-box; margin: 0 !important; padding: 12px 16px 14px;
    border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); overflow: hidden; }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > .col-1-2 { grid-column: span 3; }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > .col-1-3 { grid-column: span 2; }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) > h2:first-child { margin-top: 0; }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) .my_charts { margin: 0 !important; padding: 0 !important; } /* Classic pads the right of each chart, for its float */
/* ad slots stay off cards (an ad under a card's content, as on Chart, stays in it); the empty column Classic keeps for its floats goes */
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3):has(> .deedee:only-child) { padding: 0; border: 0; background: none; } /* a column that is just an ad */
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > .col-1-2:not(:has(*)) { display: none; }
/* a table in a card runs to the card's edges and fills its width, the card being its frame */
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) > div[style*="position"] { margin: 0 -16px; }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) > div[style*="position"]:last-child { margin-bottom: -14px; } /* to the bottom edge too, unless a note follows (Summary) */
/* the Chart tab's widgets draw on a clear background (nl_chart_widgets); their pages have no color-scheme, and on the dark theme's
   page the browser would back the frames with white, so the frames say light, as their pages do */
html[data-theme^="new"] #tabSummary iframe { color-scheme: light; }
/* the X Follow button and Facebook's Like (social_buttons.php): their frames' pages are light, so on the dark look the browser
   painted the frames white around the buttons; a frame set to the same scheme as its page stays see-through */
html[data-theme^="new"] :is(iframe.twitter-follow-button, .fb-like iframe) { color-scheme: light; }
/* cards that take a row (stockDev.php): Chart's price card where the Financials tab replaces the financials widget, Buy
   Prices' table with its range column, Summary's who-owns bar */
html[data-theme^="new"] :is(#tabSummary, #tabAvgBP, #tabOwnershipStats) > .col-1-2.nl-wide { grid-column: 1 / -1; }
/* Summary: the tab's title sits close over its first card */
html[data-theme^="new"] #tabOwnershipStats > h2 { margin: 0 0 -8px; }
/* Summary: who owns the company (stockDev.php), one bar of institutions, insiders and everyone else, with its key */
html[data-theme^="new"] .nl-own-bar { display: flex; height: 22px; margin: 2px 0 12px; border-radius: 5px; overflow: hidden; background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-own-bar span { flex: none; height: 100%; box-shadow: 2px 0 0 var(--hf-surface); }
html[data-theme^="new"] .nl-own-inst { --nl-own: var(--hf-accent); }
html[data-theme^="new"] .nl-own-ins { --nl-own: var(--hf-brand); }
html[data-theme^="new"] .nl-own-rest { --nl-own: var(--hf-border-strong); }
html[data-theme^="new"] .nl-own-bar span { background: var(--nl-own); }
html[data-theme^="new"] .nl-own-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
html[data-theme^="new"] .nl-own-key li { position: relative; padding-left: 17px; font-size: 13.5px; line-height: 1.4; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-own-key li::before { content: ''; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 2px; background: var(--nl-own); }
html[data-theme^="new"] .nl-own-key b { font-weight: 600; }
html[data-theme^="new"] .nl-own-pct { margin-left: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-own-n { display: block; font-size: 12.5px; color: var(--hf-text-muted); }
/* activist investors' line under the key, their holdings opening under it (newlook.js) */
html[data-theme^="new"] .nl-own-act { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hf-border); }
html[data-theme^="new"] .nl-own-act p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-own-act p b { font-weight: 600; }
html[data-theme^="new"] .nl-own-act p i { margin-left: -4px; }
html[data-theme^="new"] .nl-own-act-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--hf-link); cursor: pointer; }
html[data-theme^="new"] .nl-own-act-btn:hover { text-decoration: underline; }
html[data-theme^="new"] .nl-own-act-list { margin-top: 10px; overflow-x: auto; }
html[data-theme^="new"] .nl-own-act-all { display: block; width: fit-content; margin-top: 6px; font-size: 12.5px; }
/* Buy Prices, the chart card's views (nl_bp_views in newlook.js): cost basis (an SVG), top holders (Chart.js), # of funds
   (stock.js's histogram); the switch shows one */
html[data-theme^="new"] .nl-bpv-off { display: none !important; }
html[data-theme^="new"] .nl-bpv { margin-top: 6px; }
html[data-theme^="new"] .nl-bpv-head { margin: 4px 0 8px; font-size: 14px; line-height: 1.45; color: var(--hf-text); }
html[data-theme^="new"] .nl-bpv-head b { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-bpv-head .t-pos { color: var(--hf-pos); }
html[data-theme^="new"] .nl-bpv-head .t-neg { color: var(--hf-neg); }
html[data-theme^="new"] .nl-bpv svg { display: block; overflow: visible; font-family: var(--nl-font); }
html[data-theme^="new"] .nl-bpv-grid { stroke: var(--hf-border-light); }
html[data-theme^="new"] .nl-bpv-axis { font-size: 11px; fill: var(--hf-text-muted); }
html[data-theme^="new"] .nl-bpv-price { fill: none; stroke: var(--hf-accent); stroke-width: 2; stroke-linejoin: round; }
html[data-theme^="new"] .nl-bpv-dot { fill: var(--hf-accent); stroke: var(--hf-surface); stroke-width: 2; pointer-events: none; }
html[data-theme^="new"] .nl-bpv-hover { fill: transparent; cursor: crosshair; }
html[data-theme^="new"] .nl-bpv-bar { fill: var(--hf-accent); fill-opacity: .8; cursor: help; }
html[data-theme^="new"] .nl-bpv-bar.nl-bpv-in { fill: var(--hf-pos); }
html[data-theme^="new"] .nl-bpv-bar.nl-bpv-under { fill: var(--hf-neg); }
html[data-theme^="new"] .nl-bpv-bar:hover { fill-opacity: 1; }
html[data-theme^="new"] .nl-bpv-now { stroke: var(--hf-text-strong); stroke-width: 1.5; stroke-dasharray: 6 5; pointer-events: none; }
html[data-theme^="new"] .nl-bpv-med { stroke: var(--hf-text-muted); stroke-width: 1.5; stroke-dasharray: 2 4; pointer-events: none; }
html[data-theme^="new"] .nl-bpv-medtag { fill: var(--hf-surface); stroke: var(--hf-text-muted); }
html[data-theme^="new"] .nl-bpv-medtext { font-size: 11px; font-weight: 600; fill: var(--hf-text-strong); }
/* the chart over the table (the table's ranges read better once the chart has shown the spread) */
html[data-theme^="new"] #tabAvgBP > .col-1-2:has(> #stock_average_buys_distribution) { order: -1; }
html[data-theme^="new"] .nl-bpv-tag { fill: var(--hf-text-strong); }
html[data-theme^="new"] .nl-bpv-tagtext { font-size: 11px; font-weight: 600; fill: var(--hf-surface); }
html[data-theme^="new"] .nl-bpv-chart { position: relative; height: 340px; }
html[data-theme^="new"] .nl-bpv-note, html[data-theme^="new"] .nl-bpv-none { margin: 8px 0 0; font-size: 12.5px; color: var(--hf-text-muted); }
@media screen and (max-width: 640px) { html[data-theme^="new"] .nl-bpv-chart { height: 300px; } }
/* Buy Prices, the first table's range column (nl_bp_range_cell in newlook.js), drawn as one plot down the rows: its cells
   lose their padding and the lines between them, and each draws the same gridlines and dashed current price line at full
   height, so they run on unbroken; the header labels the gridlines and tags the current price. In each row the 5th to
   95th percentile is a thin bar, the middle half a thick one with the median a notch in it, its price under the notch. */
html[data-theme^="new"] #stock_avgBP_summary td:has(> .nl-bpr-cell) { padding: 0; border-bottom-color: transparent; }
html[data-theme^="new"] #stock_avgBP_summary tbody td:first-child { white-space: normal; line-height: 15px; } /* phones narrow the groups' column (stockDev.php): their names wrap */
html[data-theme^="new"] #stock_avgBP_summary th[data-field="bp_range"] { padding-left: 0; padding-right: 0; vertical-align: bottom; }
html[data-theme^="new"] .nl-bpr-title { display: block; padding: 0 5px; }
html[data-theme^="new"] .nl-bpr-axis { position: relative; display: block; height: 18px; margin-top: 2px; }
html[data-theme^="new"] .nl-bpr-axis span { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 11px; line-height: 14px; font-weight: 400; color: var(--hf-text-muted); white-space: nowrap; }
html[data-theme^="new"] .nl-bpr-axis .nl-bpr-nowtag { padding: 0 5px; border-radius: 3px; background: var(--hf-text-strong); color: var(--hf-surface); font-weight: 600; }
html[data-theme^="new"] :is(.nl-bpr-axis, .nl-bpr-cell) .nl-bpr-start { transform: none; margin-left: -4px; }
html[data-theme^="new"] :is(.nl-bpr-axis, .nl-bpr-cell) .nl-bpr-end { transform: translateX(-100%); margin-left: 4px; }
html[data-theme^="new"] .nl-bpr-cell { position: relative; height: 50px; cursor: help; outline-offset: -2px; }
html[data-theme^="new"] .nl-bpr-cell > i { position: absolute; } /* the bar's parts, not the lock in a locked row's Unlock */
html[data-theme^="new"] .nl-bpr-grid { top: 0; bottom: 0; width: 1px; background: var(--hf-border-light); }
html[data-theme^="new"] .nl-bpr-now { top: 0; bottom: 0; width: 0; margin-left: -0.5px; border-left: 1px dashed var(--hf-text-strong); } /* thin: it ran through the medians' marks and values (BILL) */
html[data-theme^="new"] .nl-bpr-span { top: 15px; height: 3px; border-radius: 2px; background: var(--hf-accent-border); }
html[data-theme^="new"] .nl-bpr-mid { top: 10px; height: 13px; border-radius: 3px; background: var(--hf-accent); }
html[data-theme^="new"] .nl-bpr-med { top: 10px; height: 13px; width: 2px; margin-left: -1px; background: var(--hf-surface); }
html[data-theme^="new"] .nl-bpr-val { position: absolute; top: 27px; transform: translateX(-50%); font-size: 12px; line-height: 15px; font-weight: 600; color: var(--hf-text-strong); white-space: nowrap;
    text-shadow: 0 0 2px var(--hf-surface), 0 0 3px var(--hf-surface), 0 0 4px var(--hf-surface); } /* the current price's line breaks around it */
/* the scale again under the table (nl_bp_ranges' footer row), and a firm line between the range and Funds in Profit */
html[data-theme^="new"] #stock_avgBP_summary .nl-bpr-foot td { height: auto; padding: 0; border: 0; background: var(--hf-table-head-bg); }
html[data-theme^="new"] #stock_avgBP_summary .nl-bpr-foot .nl-bpr-axis { margin: 0; height: 22px; }
html[data-theme^="new"] #stock_avgBP_summary .nl-bpr-foot .nl-bpr-axis span { bottom: 4px; }
html[data-theme^="new"] #stock_avgBP_summary :is(th[data-field="ovu"], td:has(> .nl-bpr-cell) + td) { border-left: 2px solid var(--hf-border-strong); }
html[data-theme^="new"] .nl-bpr-none { color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-bpr-key { margin: 10px 0 0; font-size: 12.5px; line-height: 20px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-bpr-key span { display: inline-block; vertical-align: middle; margin: 0 5px 0 14px; }
html[data-theme^="new"] .nl-bpr-key span:first-child { margin-left: 0; }
html[data-theme^="new"] .nl-bpr-k-span { width: 16px; height: 3px; border-radius: 2px; background: var(--hf-accent-border); }
html[data-theme^="new"] .nl-bpr-k-mid { width: 16px; height: 11px; border-radius: 3px; background: var(--hf-accent); }
html[data-theme^="new"] .nl-bpr-k-med { width: 12px; height: 11px; border-radius: 3px; background: linear-gradient(90deg, var(--hf-accent) 5px, var(--hf-surface) 5px 7px, var(--hf-accent) 7px); }
/* two charts on one card with a switch between them (nl_merge_cards): Ownership Trends' options, Buys vs. Sells' buys and
   sells. The switch sits under the heading; where a card is wide enough, at the end of the "Showing" line under it */
/* stacked over the "Showing" form, which table_filter positions while it loads: floated beside it, the switch was under it,
   and only its edge took a click */
html[data-theme^="new"] .nl-opt-switch { position: relative; z-index: 1; width: fit-content; margin: 0 0 8px; }
html[data-theme^="new"] .nl-opt-card .nl-opt-view > h2:first-child { margin-top: 0; }
html[data-theme^="new"] .nl-opt-view[hidden] { display: none; }
@media screen and (min-width: 1100px) {
    html[data-theme^="new"] .nl-opt-switch { float: right; margin: -3px 0 0 12px; }
}
/* Buys vs. Sells: the tiles over the charts (nl_bvs_draw in newlook.js), under the menu the by-size table had and the quarter
   they show; the ratings card and the ad beside it share the row the by-size table shared */
html[data-theme^="new"] .nl-bvs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-theme^="new"] .nl-bvs-bar form { display: flex; align-items: center; gap: 6px; min-width: 0; }
html[data-theme^="new"] .nl-bvs-bar form > label { flex: none; margin: 0; white-space: nowrap; }
html[data-theme^="new"] .nl-bvs-bar form > select { flex: 0 1 auto; min-width: 0; }
html[data-theme^="new"] .nl-bvs-q { flex: none; font-size: 13px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-bvs-kpis { margin: 10px 0 0; }
/* as tall as their few lines (Short Interest's tiles hold more, hence its 124px); loading, about as tall as loaded */
html[data-theme^="new"] .nl-bvs-kpis .si_tile { min-height: 0; padding-bottom: 10px; }
html[data-theme^="new"] .nl-bvs-kpis .si_tile.si_loading { min-height: 88px; }
html[data-theme^="new"] .nl-bvs-kpis .si_tile_value { line-height: 30px; }
html[data-theme^="new"] .nl-bvs-kpis .si_tile_value small { margin: 0 5px; }
html[data-theme^="new"] .nl-bvs-none { margin-top: 10px; }
/* the stock page's Summary tab: the funds' figures as tiles, two a row in their half beside the ad (nl_stock_summary) */
html[data-theme^="new"] .nl-sum-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; }
html[data-theme^="new"] .nl-sum-kpis .si_tile { min-height: 0; padding-bottom: 10px; box-shadow: none; }
html[data-theme^="new"] .nl-sum-kpis .si_tile.si_loading { min-height: 92px; }
html[data-theme^="new"] .nl-sum-kpis .si_tile_value { font-size: 24px; line-height: 30px; }
html[data-theme^="new"] .nl-sum-kpis .si_tile_value small { margin: 0 5px; }
html[data-theme^="new"] .nl-sum-kpis .si_tile_sub .nl-up, html[data-theme^="new"] .nl-sum-kpis .si_tile_sub .nl-down { font-weight: 600; }
html[data-theme^="new"] .nl-sum-lock { display: flex; align-items: center; min-height: 30px; margin: 2px 0; } /* the Median Breakeven tile above the visitor's level */
html[data-theme^="new"] .nl-sum > h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: 0; }
html[data-theme^="new"] .nl-sum-q { font-size: 13px; font-weight: 400; color: var(--hf-text-muted); }
/* the Summary tab's Signals (stockDev.php), beside the tiles: lines of two figures with their split under them; a line above
   the visitor's level shows the level instead (its figures aren't sent), its split striped */
html[data-theme^="new"] .nl-sig > h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-top: 0; }
html[data-theme^="new"] .nl-sig section + section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hf-border-light); }
html[data-theme^="new"] .nl-sig h3 { margin: 0 0 4px; font: 600 13px/1.4 var(--nl-font); color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-sig h3 .icon-info-circled { margin-left: 2px; }
html[data-theme^="new"] .nl-sig ul.nl-sig-rows { margin: 0; padding: 0; list-style: none; }
html[data-theme^="new"] .nl-sig .nl-sig-rows li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 0 12px; margin: 0; padding: 5px 0 0; list-style: none; }
html[data-theme^="new"] .nl-sig-l { font-size: 14px; color: var(--hf-text-strong); white-space: nowrap; }
html[data-theme^="new"] .nl-sig-v { justify-self: end; font-size: 13.5px; color: var(--hf-text-muted); text-align: right; }
html[data-theme^="new"] .nl-sig-v b { font-weight: 600; }
html[data-theme^="new"] .nl-sig-v span { margin: 0 2px; font-size: 12px; }
html[data-theme^="new"] .nl-sig .t-pos { color: var(--hf-pos); }
html[data-theme^="new"] .nl-sig .t-neg { color: var(--hf-neg); }
html[data-theme^="new"] .nl-sig-rows :is(.nl-split, .nl-net) { grid-column: 1 / -1; margin: 5px 0 4px; }
html[data-theme^="new"] .nl-sig-rows .nl-split-lock { display: flex; justify-content: center; align-items: center; overflow: visible; margin: 14px 0 12px;
    background: repeating-linear-gradient(-45deg, var(--hf-border-light) 0 5px, var(--hf-surface-sunken) 5px 10px); } /* its lock in the middle of it */
html[data-theme^="new"] .nl-sig-unl { justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border: 1px solid var(--nl-unl-line); border-radius: 999px;
    background: var(--nl-unl-bg); color: var(--nl-unl-text); font: 600 12px/16px var(--nl-font); cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .nl-sig-unl::before { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
html[data-theme^="new"] .nl-sig-unl:hover { background: var(--hf-brand); border-color: var(--hf-brand); color: var(--hf-on-brand); }
html[data-theme^="new"] .nl-sig-si { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--hf-text); }
html[data-theme^="new"] .nl-sig-si b { font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-sig .nl-sig-more { display: block; width: fit-content; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--hf-link); font: 600 13px var(--nl-font); cursor: pointer; box-shadow: none; text-decoration: none; }
html[data-theme^="new"] .nl-sig .nl-sig-more:hover { text-decoration: underline; }
/* the buys' share of the two, green against red */
html[data-theme^="new"] .nl-split { display: flex; height: 6px; margin: 6px 0 7px; border-radius: 3px; background: var(--hf-neg); overflow: hidden; }
html[data-theme^="new"] .nl-split b { flex: none; background: var(--hf-pos); box-shadow: 2px 0 0 var(--hf-surface); }
html[data-theme^="new"] .nl-split-none { background: var(--hf-border-light); }
/* buys against sells as a net bar (nl_bvs_bar, $hf_bvs_net): a tick in the middle, the side that won filled toward its end */
html[data-theme^="new"] .nl-net { position: relative; display: block; height: 6px; margin: 6px 0 7px; border-radius: 3px; background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-net i { position: absolute; top: 0; bottom: 0; min-width: 2px; }
html[data-theme^="new"] .nl-net i.pos { left: 50%; border-radius: 0 3px 3px 0; background: var(--hf-pos); }
html[data-theme^="new"] .nl-net i.neg { right: 50%; border-radius: 3px 0 0 3px; background: var(--hf-neg); }
html[data-theme^="new"] .nl-net::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--hf-text-muted); }
html[data-theme^="new"] .nl-net-none::after { display: none; }
/* in a table cell, between the two figures (format_bvs): the size of the bar it replaces */
html[data-theme^="new"] .range52OuterCont > .nl-net { flex: none; width: 66px; height: 8px; margin: 0; border-radius: 4px; }
html[data-theme^="new"] .range52OuterCont > .nl-net i.pos { border-radius: 0 4px 4px 0; }
html[data-theme^="new"] .range52OuterCont > .nl-net i.neg { border-radius: 4px 0 0 4px; }
html[data-theme^="new"] #tabBuyersSellers > .col-1-3 { grid-column: span 3; }
html[data-theme^="new"] #tabBuyersSellers > .col-1-3[hidden] { display: none; } /* Classic's columns set their display */
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-bvs-q { display: none; } /* the menu needs the width; the tiles' "2026 Q1: ..." lines date them */
}
/* a line under a chart saying what it adds up to (nl_chart_caption): where Buy Prices' funds paid against today's price,
   and the share of the company Ownership Trends' funds own */
html[data-theme^="new"] .nl-chart-cap { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-chart-cap:empty { display: none; }
html[data-theme^="new"] .nl-chart-cap b { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-chart-cap .t-pos { color: var(--hf-pos); }
html[data-theme^="new"] .nl-chart-cap .t-neg { color: var(--hf-neg); }
html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) > div[style*="position"] .dataTable { width: 100% !important; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; }
/* AI: the summary on a card like the page's others (white; the blue tint clashed with the grey page, Oct 2026). Its box is
   styled inline, hence !important */
html[data-theme^="new"] #tabInsights .col-1-2 > div:first-child { padding: 2px 16px 14px !important; border: 1px solid var(--hf-border); border-radius: 10px !important; background: var(--hf-surface) !important; }
@media screen and (max-width: 900px) {
    html[data-theme^="new"] #tabShortInterest { grid-template-columns: minmax(0, 1fr); }
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) { grid-template-columns: minmax(0, 1fr); }
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) { grid-column: 1 / -1; }
}
/* phones: a card's heading, its "Showing" line and its chart's legend (nl_bar_chart in newlook.js) each keep to one line at 360px */
@media screen and (max-width: 640px) {
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) { padding: 10px 12px 12px; }
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3):has(> .deedee:only-child) { padding: 0; }
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) > div[style*="position"] { margin: 0 -12px; }
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) > div[style*="position"]:last-child { margin-bottom: -12px; }
    html[data-theme^="new"] .nl-opt-switch { margin-bottom: 6px; }
    /* the longest, "Total GOOGL Shares Owned by Institutions", is 19.9em: 15px fills a 360px phone's card, and narrower phones scale it down */
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) h2,
    html[data-theme^="new"] .si_panel > h2 { font-size: min(15px, 4.15vw); } /* and Short Interest's and Financials' panels, alike */
    /* Cash Flow's key: its two columns share the panel (at 150px each, the second was cut at a 360px phone's edge) */
    html[data-theme^="new"] .fin_flow_key { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    /* The stock page on phones: its cards keep their look with 10px inside (16px cost a phone about 34px of its width:
       Financials' statements showed a column and a bit, Price vs. fair value wrapped, the squeeze score's label broke), and
       12px between them; a table runs to its card's edges, as above. A card that only holds an ad has none (above). */
    html[data-theme^="new"] .hf-stock-page :is(.si_panel, .nl-mf-card, :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3)) { padding: 10px; }
    html[data-theme^="new"] .hf-stock-page :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3):has(> .deedee:only-child) { padding: 0; }
    html[data-theme^="new"] .hf-stock-page :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends, #tabShortInterest, .nl-mf, .fin_hl_grid, .fin_two, .fin_three, .fin_stack) { gap: 12px; }
    html[data-theme^="new"] .hf-stock-page .fin_stmt_panel, html[data-theme^="new"] .hf-stock-page .fin_row2 { margin-top: 12px; }
    html[data-theme^="new"] .hf-stock-page :is(.si_panel, :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3)) > div[style*="position"] { margin: 0 -10px; }
    html[data-theme^="new"] .hf-stock-page :is(.si_panel, :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3)) > div[style*="position"]:last-child { margin-bottom: -10px; }
    html[data-theme^="new"] .nl-own-key { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    /* "Squeeze Score 41 / 100" and its bar on one line: the bar takes what's left (Classic's fixed 140px broke the label) */
    html[data-theme^="new"] .si_score_head { white-space: nowrap; }
    html[data-theme^="new"] .si_score_bar { flex: 1 1 auto; min-width: 48px; max-width: 140px; }
    /* the label, then the menu in what's left: a long choice ("Strongly outperforming Funds (4+ Stars)") is cut at the card's edge */
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) form.table_filter_form:has(> select) { display: flex; align-items: center; gap: 6px; }
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) form.table_filter_form > label { flex: none; margin: 0; white-space: nowrap; }
    html[data-theme^="new"] :is(#tabBuyersSellers, #tabOwnershipTrends, #tabAvgBP, #tabOwnershipStats, #tabSummary, #tabTrends) > :is(.col-1-2, .col-1-3) form.table_filter_form > select { flex: 0 1 auto; min-width: 0; max-width: 100%; }
}

/* Table filters: the name box and its Filter button the same height, side by side */
html[data-theme^="new"] .table_filter_form input[type="text"].table_filter { box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text); vertical-align: middle; }
html[data-theme^="new"] .table_filter_form input[type="text"].table_filter:focus { border-color: var(--hf-brand); } /* the text boxes' focus (top of the file) */
html[data-theme^="new"] .table_filter_form input[type="text"].table_filter + .table_filter_button { box-sizing: border-box; height: 30px; vertical-align: middle; }
@media screen and (max-width: 640px) {
    /* phones: the name box takes a line of its own, wide, with the button at its end (52px: the button and the space before it) */
    html[data-theme^="new"] .table_filter_form input[type="text"].table_filter { width: calc(100% - 52px) !important; margin: 8px 0 0 !important; }
    html[data-theme^="new"] .table_filter_form input[type="text"].table_filter + .table_filter_button { margin-top: 8px; }
}

/* ---------- Table filters (prototype; nl_filter_bar in newlook.js): the one-click choices and the filters' chips over
   the table; More filters, left of Columns, opens a panel of everything else ---------- */
html[data-theme^="new"] .nl-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 10px; font-family: var(--nl-font); }
html[data-theme^="new"] .nl-fbar:not(:has(.nl-fseg, .nl-finline)):has(> .nl-fchips:empty) { display: none; } /* a form with no choices and nothing set */
html[data-theme^="new"] .nl-fbusy :is(.nl-fseg, .nl-finline) { opacity: .6; transition: opacity .15s; } /* while the server answers */
/* filters drawn in the bar (data-nl-inline, nl_finline): label and menu side by side, a tickbox before its label */
html[data-theme^="new"] .nl-finline { flex: none; gap: 6px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-finline .nl-fselect { width: auto; max-width: 260px; }
/* filters kept on one line (data-nl-row: Market Cap and Include ETFs), Market Cap's menu narrow so they fit a phone */
html[data-theme^="new"] .nl-finline-row { display: inline-flex; flex: none; align-items: center; gap: 14px; }
html[data-theme^="new"] .nl-finline .nl-fsel-market_cap { max-width: 140px; }
html[data-theme^="new"] .nl-finline .icon-info-circled { margin: 0 -2px 0 -4px; }
html[data-theme^="new"] .nl-finline .nl-ftip { cursor: help; } /* data-nl-tipline: underlined as every tooltip is (.hasTooltip) */
html[data-theme^="new"] .nl-fcheck { gap: 7px; color: var(--hf-text); cursor: pointer; }
html[data-theme^="new"] .nl-fcheck input { width: 16px; height: 16px; margin: 0; accent-color: var(--hf-accent); cursor: pointer; }
/* the one-click choices, drawn like the mockup's Comfortable/Compact switch (.nl-seg): a bordered row, divided, the chosen one sunken */
html[data-theme^="new"] .nl-fseg { display: inline-flex; border: 1px solid var(--hf-border-strong); border-radius: 6px; overflow: hidden; background: var(--hf-surface); }
/* global.css makes every nav 100% wide at phone widths, meant for the header's menu: the page's own (this switch) as wide as
   they are (block ones fill the line anyway) */
@media screen and (max-width: 1000px) {
    html[data-theme^="new"] #content nav { width: auto; }
}
html[data-theme^="new"] .nl-fseg button { height: 30px; padding: 0 12px; border: 0; border-radius: 0; background: var(--hf-surface); color: var(--hf-text-muted); font: 500 13px var(--nl-font); white-space: nowrap; cursor: pointer; }
/* a locked choice's ¹ or ² (table_filter, global.js) is 18px in Classic: on a choice or a toggle it lifted the label; here
   it's the label's size and takes no line height */
html[data-theme^="new"] :is(.nl-fseg button, .nl-fpill) .premium_sup { position: relative; top: 2px; margin-left: 1px; font-size: 1em; line-height: 0; }
html[data-theme^="new"] .nl-fseg button + button { border-left: 1px solid var(--hf-border-strong); }
html[data-theme^="new"] .nl-perf-w { margin: 0 0 10px; } /* the fund page's returns table: Manager-Weighted | Equal-Weighted (nl_perf_rows) */
html[data-theme^="new"] .nl-fseg button:hover { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-fseg button[aria-pressed="true"] { background: var(--hf-surface-sunken); color: var(--hf-text-strong); font-weight: 600; }
html[data-theme^="new"] :is(.nl-fselect, .nl-fseg button, .nl-fpill, .nl-fchip button, .nl-fclear):focus-visible { outline: 2px solid var(--hf-focus); outline-offset: 1px; }
html[data-theme^="new"] .nl-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-theme^="new"] .nl-fchips:empty { display: none; }
html[data-theme^="new"] .nl-fchip { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; height: 26px; padding: 0 3px 0 10px; border: 1px solid var(--hf-border-strong); border-radius: 13px; background: var(--hf-surface); color: var(--hf-text-strong); font-size: 12.5px; } /* white on the grey page (a tinted fill vanished on it) */
html[data-theme^="new"] .nl-fchip button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--hf-text-muted); font-size: 15px; line-height: 20px; cursor: pointer; }
html[data-theme^="new"] .nl-fchip button:hover { background: var(--hf-surface-sunken); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-fclear { padding: 0 4px; border: 0; background: none; color: var(--hf-link); font: 12.5px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-fclear:hover { text-decoration: underline; }
/* the button, styled like Columns and Export beside it, with a count of the filters set */
html[data-theme^="new"] .nl-fmore[aria-expanded="true"] { border-color: var(--hf-accent); }
html[data-theme^="new"] .nl-fcount { display: inline-block; box-sizing: border-box; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--hf-accent); color: var(--hf-surface); font-size: 11.5px; font-weight: 600; line-height: 18px; text-align: center; vertical-align: 1px; }
html[data-theme^="new"] .nl-fcount:empty { display: none; }
html[data-theme^="new"] .nl-fmore-short { display: none; }
/* the panel, under the button and over the table, as on a phone on every screen: a phone's width (370px), two to a line,
   each menu with its label beside it and filling its half, the search boxes named inside them; the institution type, the
   toggles and a menu its label squeezes take a line. Wider screens had layouts of their own, page by page (one to a line,
   menus as wide as their choices, three to a line), and setting one page's undid another's: Nov 2026 */
html[data-theme^="new"] .nl-fpanel { position: absolute; z-index: 30; left: 0; box-sizing: border-box; width: min(370px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px 10px;
    padding: 10px 12px 12px; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); box-shadow: var(--nl-shadow); font-family: var(--nl-font); white-space: normal; }
html[data-theme^="new"] .nl-fpanel[hidden] { display: none; }
html[data-theme^="new"] .nl-ffield { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 13px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-fpanel .nl-ffield { font-size: 12.5px; }
html[data-theme^="new"] .nl-ffield > span { flex: none; white-space: nowrap; }
html[data-theme^="new"] .nl-ffield > :is(.nl-fsearch, .nl-fselect) { flex: 1 1 auto; min-width: 0; }
html[data-theme^="new"] .nl-f-text > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* the placeholder says it; the label still names the box */
html[data-theme^="new"] :is(.nl-f-scope, .nl-fwide, .nl-fchecks) { grid-column: 1 / -1; }
html[data-theme^="new"] .nl-fchecks > div { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-theme^="new"] .nl-fsearch { position: relative; display: block; }
html[data-theme^="new"] .nl-fsearch::before { content: ''; position: absolute; top: 50%; left: 10px; width: 15px; height: 15px; margin-top: -7.5px; background: var(--hf-text-faint); pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'11'%20cy%3D'11'%20r%3D'8'%2F%3E%3Cpath%20d%3D'm21%2021-4.3-4.3'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'11'%20cy%3D'11'%20r%3D'8'%2F%3E%3Cpath%20d%3D'm21%2021-4.3-4.3'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
html[data-theme^="new"] .nl-fsearch input, html[data-theme^="new"] .nl-fselect { box-sizing: border-box; width: 100%; height: 30px; margin: 0; border: 1px solid var(--hf-border-strong); border-radius: 7px; background: var(--hf-surface); color: var(--hf-text-strong); font: 13.5px var(--nl-font); }
html[data-theme^="new"] .nl-fsearch input { padding: 0 8px 0 30px; }
/* a checkbox shown as a two-way switch (nl_fflip: the insider tracker's All Trades | Informative), on a line of its own */
html[data-theme^="new"] .nl-fflip { grid-column: 1 / -1; gap: 8px; }
html[data-theme^="new"] .nl-fflip .nl-fseg { flex: none; }
/* ...or sharing it with the control a page pairs it with (data-nl-flip-with: the tracker's ticker box), which takes what's
   left; like the toggles, the line counts for nothing in the panel's width */
html[data-theme^="new"] .nl-frow { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; width: 0; min-width: 100%; }
html[data-theme^="new"] .nl-frow > .nl-ffield:not(.nl-fflip) { flex: 1 1 0; min-width: 90px; }
html[data-theme^="new"] .nl-frow > .nl-fflip { flex: none; }
html[data-theme^="new"] .nl-fselect { padding: 0 6px 0 9px; cursor: pointer; }
html[data-theme^="new"] .nl-fpill { height: 28px; padding: 0 12px; border: 1px solid var(--hf-border-strong); border-radius: 14px; background: var(--hf-surface); color: var(--hf-text-muted); font: 500 13px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-fpill[aria-pressed="true"] { border-color: var(--hf-accent-border); background: var(--hf-accent-bg); color: var(--hf-text-strong); }
/* the bar replaces the Filter button's hint, and the fund page's moves tag (the choices show it) */
html[data-theme^="new"] .nl-has-fbar :is(.HF_tip[data-tipid="filter"], #nl_filter_tag) { display: none; }
/* the "For table info" hint goes beside its ⓘ, where the row is empty, rather than above it, over the choices */
html[data-theme^="new"] .nl-has-fbar .HF_tip[data-tipid="info"] { left: 26px !important; top: -6px; bottom: auto; } /* centered on the ⓘ (its anchor sits 3px above the icon) */
html[data-theme^="new"] .nl-has-fbar .HF_tip[data-tipid="info"]::after { top: 50%; left: -8px; margin: -6px 0 0; border: 6px solid transparent; border-right: 8px solid var(--hf-hint-border, #333); border-left: 0; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-fseg { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
    html[data-theme^="new"] .nl-fmore-long { display: none; }
    html[data-theme^="new"] .nl-fmore-short { display: inline; }
    html[data-theme^="new"] .nl-fseg button { flex: 1 0 auto; padding: 0 10px; }
    html[data-theme^="new"] .nl-fpanel { width: 100%; }
    html[data-theme^="new"] .nl-ffield { font-size: 12.5px; }
    /* phones have no room beside the ⓘ once More filters joins the row: the hint goes under it */
    html[data-theme^="new"] .nl-has-fbar .HF_tip[data-tipid="info"] { left: -66px !important; top: 26px; } /* clear of the Columns hint beside it */
    html[data-theme^="new"] .nl-has-fbar .HF_tip[data-tipid="info"]::after { top: auto; bottom: 100%; left: 69px; right: auto; margin: 0; border: 6px solid transparent; border-bottom: 8px solid var(--hf-hint-border, #333); border-top: 0; }
}

/* ---------- Stock page, Money Flow (nl_money_flow in newlook.js): the flows diagram and the three maps on cards ---------- */
html[data-theme^="new"] .nl-mf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 12px; }
html[data-theme^="new"] .nl-mf > * { grid-column: 1 / -1; }
html[data-theme^="new"] .nl-mf > .nl-mf-half { grid-column: auto; }
html[data-theme^="new"] .nl-mf-card { padding: 12px 16px 14px; border-radius: 10px; }
html[data-theme^="new"] .nl-mf-card[hidden] { display: none; }
html[data-theme^="new"] .nl-mf-card h2 { margin-top: 0; }
/* the diagram's two headings, over its two sides */
html[data-theme^="new"] .nl-mf-heads { display: flex; justify-content: space-between; gap: 24px; }
html[data-theme^="new"] .nl-mf-heads h2 { flex: 1 1 0; margin-bottom: 2px; font-size: 15px; }
html[data-theme^="new"] .nl-mf-heads h2:last-child { text-align: right; }
html[data-theme^="new"] .nl-mf-flow { min-height: 300px; }
html[data-theme^="new"] .nl-mf-flow svg { display: block; overflow: visible; font-family: var(--nl-font); }
/* money leaving a stock is red, money arriving green, as Classic colored the two charts */
html[data-theme^="new"] .nl-mf-in :is(.nl-mf-band, .nl-mf-node) { fill: var(--hf-neg); }
html[data-theme^="new"] .nl-mf-out :is(.nl-mf-band, .nl-mf-node) { fill: var(--hf-pos); }
html[data-theme^="new"] .nl-mf-band { fill-opacity: .26; transition: fill-opacity .12s; }
html[data-theme^="new"] .nl-mf-row:hover .nl-mf-band { fill-opacity: .55; }
html[data-theme^="new"] .nl-mf-row { cursor: pointer; }
html[data-theme^="new"] .nl-mf-row text { font-size: 13px; fill: var(--hf-text-strong); }
html[data-theme^="new"] .nl-mf-tk { font-weight: 600; }
html[data-theme^="new"] .nl-mf-pct { font-size: 12px; fill: var(--hf-text-muted); }
html[data-theme^="new"] .nl-mf-row a:hover .nl-mf-tk { fill: var(--hf-link); }
html[data-theme^="new"] .nl-mf-center { fill: var(--hf-text-strong); }
html[data-theme^="new"] .nl-mf-sym { font-size: 14px; font-weight: 700; fill: var(--hf-text-strong); }
html[data-theme^="new"] .nl-mf-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-mf-map { height: 360px; }
html[data-theme^="new"] .nl-mf-half .nl-mf-map { height: 300px; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-mf { grid-template-columns: minmax(0, 1fr); }
    html[data-theme^="new"] .nl-mf > .nl-mf-half { grid-column: 1 / -1; }
    html[data-theme^="new"] .nl-mf-card { padding: 10px 12px 12px; }
    html[data-theme^="new"] .nl-mf-card > h2 { font-size: 16px; } /* "Funds that Invest in GOOGL also Invest in" and its icon fit a phone line */
    html[data-theme^="new"] .nl-mf-heads { gap: 12px; }
    html[data-theme^="new"] .nl-mf-heads h2 { font-size: 13.5px; white-space: nowrap; }
    /* each heading has half a phone's width: the short wording (stockDev.php's data-short) keeps it to a line */
    html[data-theme^="new"] .nl-mf-heads h2[data-short] > .nl-mf-long { display: none; }
    html[data-theme^="new"] .nl-mf-heads h2[data-short]::before { content: attr(data-short); }
    html[data-theme^="new"] .nl-mf-row text { font-size: 12px; }
    html[data-theme^="new"] .nl-mf-pct { font-size: 11px; }
    html[data-theme^="new"] .nl-mf-map { height: 300px; }
    html[data-theme^="new"] .nl-mf-half .nl-mf-map { height: 260px; }
}

/* ---------- Footer ---------- */
html[data-theme^="new"] .copyright { font-family: var(--nl-font); }
html[data-theme^="new"] .copyright a { color: var(--hf-footer-text); }
html[data-theme^="new"] .copyright a:hover { color: var(--hf-menu-text); }
html[data-theme^="new"] .look_footer a { margin: 0 2px; }
/* the back-to-top button: Classic's amber square under its white arrow. global.css colors it with the highlight role, the new
   look's pale tint, on which the arrow all but vanished */
html[data-theme^="new"] .cd-top { background-color: var(--hf-brand); }

/* ---------- Code samples (13F_API.php, highlight.js's default theme: a light grey box, dark red strings) ---------- */
/* the light theme keeps the theme's own colors (the fallbacks); the dark theme sets a dark box and light inks below */
html[data-theme^="new"] .hljs { background: var(--nl-code-bg, #f3f3f3); color: var(--nl-code-text, #444); }
html[data-theme^="new"] .hljs-comment { color: var(--nl-code-comment, #697070); }
html[data-theme^="new"] :is(.hljs-punctuation, .hljs-tag) { color: var(--nl-code-punct, #444a); }
html[data-theme^="new"] .hljs-tag :is(.hljs-attr, .hljs-name) { color: var(--nl-code-text, #444); }
html[data-theme^="new"] :is(.hljs-deletion, .hljs-number, .hljs-quote, .hljs-selector-class, .hljs-selector-id, .hljs-string, .hljs-template-tag, .hljs-type, .hljs-section, .hljs-title) { color: var(--nl-code-string, #800); }
html[data-theme^="new"] :is(.hljs-link, .hljs-operator, .hljs-regexp, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-symbol, .hljs-template-variable, .hljs-variable) { color: var(--nl-code-var, #ab5656); }
html[data-theme^="new"] .hljs-literal { color: var(--nl-code-literal, #695); }
html[data-theme^="new"] :is(.hljs-addition, .hljs-built_in, .hljs-bullet, .hljs-code) { color: var(--nl-code-builtin, #397300); }
html[data-theme^="new"] .hljs-meta { color: var(--nl-code-meta, #1f7199); }
html[data-theme^="new"] .hljs-meta .hljs-string { color: var(--nl-code-meta-str, #38a); }
html[data-theme="new-dark"] { --nl-code-bg: #222831; --nl-code-text: #d9dee4; --nl-code-comment: #8a949f; --nl-code-punct: #d9dee4aa; --nl-code-string: #f29b8c;
    --nl-code-var: #e5a5a5; --nl-code-literal: #9ccf7f; --nl-code-builtin: #a3d47a; --nl-code-meta: #74b5dd; --nl-code-meta-str: #86c6ea; }
@media (prefers-color-scheme: dark) { html[data-theme="new"] { --nl-code-bg: #222831; --nl-code-text: #d9dee4; --nl-code-comment: #8a949f; --nl-code-punct: #d9dee4aa;
    --nl-code-string: #f29b8c; --nl-code-var: #e5a5a5; --nl-code-literal: #9ccf7f; --nl-code-builtin: #a3d47a; --nl-code-meta: #74b5dd; --nl-code-meta-str: #86c6ea; } }

/* ---------- Fund page: header, stats strip, treemap + this quarter's moves (fundDev.php's new-look branches) ---------- */
/* heatmap colors (hf_color in sf-loadDev.js): Classic's, as its maps show them (d3plus draws #393939, #1ca41c and #be0000 at
   0.9 opacity over white), in light and dark alike: brighter is a bigger move. White text on every tile */
html[data-theme^="new"] { --hf-heat-neg: #c41a1a; --hf-heat-flat: #4c4c4c; --hf-heat-pos: #33ad33; --hf-heat-ink: #fff; --hf-pie-a: #1d5fb8; --hf-pie-b: #aab3bf; }
html[data-theme^="new"] #topTenConc { margin-left: 8px; vertical-align: -3px; }
html[data-theme="new-dark"] { --hf-pie-a: #82b2f5; --hf-pie-b: #3b4451; }
@media (prefers-color-scheme: dark) { html[data-theme="new"] { --hf-pie-a: #82b2f5; --hf-pie-b: #3b4451; } }
/* the price chart under a row: the breakeven line (light keeps Classic's purple) and the line between adjacent boxes */
html[data-theme="new-dark"] { --hf-chart-ref: #a99cff; --hf-chart-sep: rgba(255, 255, 255, .4); }
@media (prefers-color-scheme: dark) { html[data-theme="new"] { --hf-chart-ref: #a99cff; --hf-chart-sep: rgba(255, 255, 255, .4); } }

html[data-theme^="new"] .nl-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 16px; flex-wrap: wrap; }
html[data-theme^="new"] .nl-who { display: flex; align-items: center; gap: 14px; flex: 1 1 420px; min-width: 0; }
html[data-theme^="new"] .nl-who .hedgeImageBigNew { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
html[data-theme^="new"] .nl-h1 { font-size: 26px; line-height: 1.2; margin: 0; border: 0; padding: 0; }
/* a Classic page title in the new look's size (the insider profile's, which was Classic's 32px) */
html[data-theme^="new"] .h1.nl-h1-page { font-size: 26px; line-height: 1.3; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .h1.nl-h1-page { font-size: 21px; }
}
html[data-theme^="new"] .nl-sub { color: var(--hf-text-muted); font-size: 15px; margin-top: 2px; }
html[data-theme^="new"] .nl-actions { display: flex; align-items: center; gap: 8px; }
html[data-theme^="new"] .nl-actions .new_actionbtn { padding: 7px 14px; font-size: 14px; }
html[data-theme^="new"] .nl-share i:before { margin: 0 6px 0 0; }
html[data-theme^="new"] .nl-stats { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 0 6px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 8px; }
html[data-theme^="new"] .nl-stats > div { padding: 10px 14px; border-left: 1px solid var(--hf-border); min-width: 0; }
html[data-theme^="new"] .nl-stats > div:first-child { border-left: 0; }
html[data-theme^="new"] .nl-stats dt { font-size: 13px; line-height: 18px; color: var(--hf-text-muted); white-space: nowrap; }
html[data-theme^="new"] .nl-stats dt i:before { font-size: 13px; }
html[data-theme^="new"] .nl-stats dd { margin: 2px 0 0; font-size: 19px; line-height: 26px; font-weight: 600; color: var(--hf-text-strong); white-space: nowrap; }
html[data-theme^="new"] .nl-stats dd.green { color: var(--hf-pos); }
html[data-theme^="new"] .nl-stats dd.red { color: var(--hf-neg); }
html[data-theme^="new"] .nl-stats dd small { font-size: 12.5px; font-weight: 400; color: var(--hf-text-muted); margin-left: 4px; }
html[data-theme^="new"] .nl-stats .score { display: inline-block; vertical-align: -2px; }
/* stock pages: Classic's two lines, tightened: the H1 with its link to the insider page, then the company with small buttons */
html[data-theme^="new"] .nl-head-stock { display: block; margin: 0 0 6px; }
/* the stock, insider and ETF asset pages' titles: as big as other pages' (26px), and no bigger than fits one line: their
   width in em (--nl-h1-em, from the ticker's or asset's length, the page) into the width less the gutters */
html[data-theme^="new"] :is(.nl-head-stock .nl-h1, .h1.nl-h1-fit) { font-size: min(26px, calc((100vw - 60px) / var(--nl-h1-em, 22))); line-height: 1.3; }
/* the separator: a drawn bar (the "|" stays in the text for Classic's H1 wording), clearer than the light glyph */
html[data-theme^="new"] .nl-h1-sep { display: inline-block; width: 2px; height: .8em; margin: 0 .4em 0 .3em; border-radius: 1px; background: var(--hf-text-faint); color: transparent; overflow: hidden; vertical-align: -.06em; }
html[data-theme^="new"] .nl-h1-link { font-weight: 500; color: var(--hf-link); }
html[data-theme^="new"] .nl-h1-alt { white-space: nowrap; } /* "| Insider Trading" wraps as one, never leaving the bar behind */
html[data-theme^="new"] .nl-h1-alt, html[data-theme^="new"] .nl-h1-link { vertical-align: baseline; } /* Classic tops the H1's span and link, which lifted the smaller phone text */
html[data-theme^="new"] .nl-subrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-top: 2px; }
html[data-theme^="new"] .nl-subrow .nl-sub { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
html[data-theme^="new"] .nl-subrow .nl-actions { flex: none; gap: 6px; }
/* the insider page: the 6 months' summary in the company's place, wrapping, with the buttons level with its first line.
   Phones keep only Follow there, leaving the summary the room (the Congress trades table has its own Share) */
html[data-theme^="new"] .nl-subrow-wrap { align-items: flex-start; }
html[data-theme^="new"] .nl-subrow-wrap .nl-sub { white-space: normal; overflow: visible; line-height: 1.4; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .hf-insider-page .nl-subrow .nl-share { display: none; }
}
/* the alert cards keep Classic's font, Roboto (loaded on every page), for their tags, titles and lines */
html[data-theme^="new"] .alert_card { font-family: 'Roboto', Helvetica, sans-serif; }
/* the alert cards' side tags keep Classic's colors, white on green / red / blue (its fallbacks in global.css: the theme's
   deeper pos/neg read heavier, and dark's text-inverse is dark) */
html[data-theme^="new"] :is(.af_tag_buy, .af_tag_sell, .af_tag_neutral) { color: #fff; }
html[data-theme^="new"] .af_tag_buy { background: #2e9e4f; }
html[data-theme^="new"] .af_tag_sell { background: #d43b3b; }
html[data-theme^="new"] .af_tag_neutral { background: #3b6fd4; }
/* the dark theme: the alerts' tags tinted, their words in the color (solid red and blue under white words glared on the dark
   card), and the ticker's chip edged (it was the card's own grey) */
html[data-theme="new-dark"] :is(.af_tag_buy, .af_tag_sell, .af_tag_neutral, .af_recommended) { background: color-mix(in srgb, var(--nl-af) 20%, var(--hf-surface)); color: var(--nl-af); }
html[data-theme="new-dark"] :is(.af_tag_buy, .af_recommended) { --nl-af: var(--hf-pos); }
html[data-theme="new-dark"] .af_tag_sell { --nl-af: var(--hf-neg); }
html[data-theme="new-dark"] .af_tag_neutral { --nl-af: var(--hf-accent); }
html[data-theme="new-dark"] .af_tag_ticker { background: var(--hf-surface-sunken); box-shadow: inset 0 0 0 1px var(--hf-border-strong); }
@media (prefers-color-scheme: dark) {
    html[data-theme="new"] :is(.af_tag_buy, .af_tag_sell, .af_tag_neutral, .af_recommended) { background: color-mix(in srgb, var(--nl-af) 20%, var(--hf-surface)); color: var(--nl-af); }
    html[data-theme="new"] :is(.af_tag_buy, .af_recommended) { --nl-af: var(--hf-pos); }
    html[data-theme="new"] .af_tag_sell { --nl-af: var(--hf-neg); }
    html[data-theme="new"] .af_tag_neutral { --nl-af: var(--hf-accent); }
    html[data-theme="new"] .af_tag_ticker { background: var(--hf-surface-sunken); box-shadow: inset 0 0 0 1px var(--hf-border-strong); }
}
/* the insider page's tiles (nl_insider_tiles), under a line with the period's switch on the left */
html[data-theme^="new"] .nl-ins-head { margin: 10px 0 0; }
html[data-theme^="new"] .nl-ins-head[hidden] { display: none; }
html[data-theme^="new"] .nl-ins-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-ins-bar .nl-seg button { min-width: 38px; }
html[data-theme^="new"] .nl-ins-kpis { margin-top: 8px; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-ins-kpis .si_tile { padding: 8px 10px 10px; }
    html[data-theme^="new"] .nl-ins-kpis .si_tile_label { font-size: 12px; line-height: 16px; }
    html[data-theme^="new"] .nl-ins-kpis .si_tile_value { font-size: 20px; line-height: 28px; }
    html[data-theme^="new"] .nl-ins-kpis .si_tile_value small { margin: 0 4px; }
}
/* the insider page's trade chart, on a card, its choices over it (nl_insider_chart) */
html[data-theme^="new"] .nl-ins-chart { margin: 10px 0 14px; padding: 12px 16px 6px; border-radius: 10px; }
html[data-theme^="new"] .nl-ins-chart .my_charts { margin-bottom: 0 !important; }
html[data-theme^="new"] .nl-form-off { display: none !important; }
html[data-theme^="new"] .nl-ins-fbar { margin: 0 0 6px; align-items: center; }
html[data-theme^="new"] .nl-ins-fbar > .icon-info-circled { margin-left: 4px; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .hf-stock-page .nl-ins-chart { margin: 8px 0 12px; padding: 10px 10px 4px; } /* a card, as the stock page's others on phones */
    html[data-theme^="new"] .nl-ins-fbar .nl-fseg { flex: 1 1 auto; }
}
html[data-theme^="new"] .nl-subrow .nl-actions .new_actionbtn { height: 22px; padding: 0 8px; font-size: 12px; line-height: 20px; }
/* the icon's box fills the button's height and centers its glyph (inline, it sat on the text's baseline, a little high) */
html[data-theme^="new"] .nl-subrow .nl-actions .new_actionbtn i { display: inline-flex; align-items: center; align-self: stretch; }
html[data-theme^="new"] .nl-subrow .nl-actions .new_actionbtn i::before, html[data-theme^="new"] .nl-subrow .nl-actions .new_actionbtn::before { display: block; width: 12px; height: 12px; margin-right: 4px; }

html[data-theme^="new"] .nl-overview { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; margin: 6px 0 16px; align-items: stretch; }
html[data-theme^="new"] .nl-panel { background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 8px; position: relative; min-width: 0; }
html[data-theme^="new"] .nl-tm { padding: 8px; overflow: hidden; }
html[data-theme^="new"] .nl-tm-help { position: absolute; top: 4px; right: 4px; z-index: 3; }
html[data-theme^="new"] .nl-moves { padding: 4px 14px; }
html[data-theme^="new"] .nl-move { padding: 10px 0; border-top: 1px solid var(--hf-border); }
html[data-theme^="new"] .nl-move:first-child { border-top: 0; }
html[data-theme^="new"] .nl-move-h { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 6px; }
html[data-theme^="new"] .nl-move-h b { color: var(--hf-text-strong); font-weight: 600; }
html[data-theme^="new"] .nl-count { font-size: 13px; font-weight: 600; color: var(--hf-text-muted); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 4px; max-height: 20px; overflow: hidden; } /* one line: chips that would wrap are cut */
html[data-theme^="new"] .nl-chips a { font-family: var(--nl-font-table); font-size: 12px; font-weight: 600; padding: 0 7px; border-radius: 3px; line-height: 20px; }
html[data-theme^="new"] .nl-chips.pos a { background: var(--hf-pos-bg); color: var(--hf-pos); }
html[data-theme^="new"] .nl-chips.neg a { background: var(--hf-neg-bg); color: var(--hf-neg); }
html[data-theme^="new"] .nl-chips a:hover { text-decoration: none; filter: brightness(.95); }
/* phones: the map stands alone, and the panel sits in the Largest Trades tab, a row per kind with its tickers beside it */
html[data-theme^="new"] .nl-overview-solo { grid-template-columns: minmax(0, 1fr); }
html[data-theme^="new"] .nl-moves-compact { margin: 0 0 18px; padding: 2px 12px; }
html[data-theme^="new"] .nl-moves-compact .nl-move { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
html[data-theme^="new"] .nl-moves-compact .nl-move-h { flex: none; width: 104px; margin: 0; font-size: 13.5px; }
html[data-theme^="new"] .nl-moves-compact .nl-count { display: none; }
html[data-theme^="new"] .nl-moves-compact .nl-chips { flex: 1; min-width: 0; }
/* the breadcrumb above the fund's header */
html[data-theme^="new"] .nl-crumbs { margin: 0 0 -6px; font-size: 13px; color: var(--hf-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme^="new"] .nl-crumbs a { color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-crumbs a:hover { color: var(--hf-link); }

/* the Performance History table's new-look cells (nl_format_3y_return, nl_format_rank_bar in newlook.js): the 3-year
   total over the yearly rate, and the rank as a bar with the average fund marked */
html[data-theme^="new"] .dataTable .nl-ret { display: flex; flex-direction: column; justify-content: center; height: 50px; line-height: 1.25; }
html[data-theme^="new"] .dataTable .nl-ret b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .dataTable .nl-ret small { font-size: 12.5px; color: var(--hf-text-muted); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .dataTable .nl-ret-na { color: var(--hf-text-faint); }
/* the screener's two-line cells (Price vs Fair Value, Market Favorability: nl_sc_fv, nl_sc_favor), at its rows' height */
html[data-theme^="new"] .dataTable .nl-sc-two { height: auto; white-space: nowrap; }
html[data-theme^="new"] .dataTable .nl-sc-two b { font-size: 14.5px; }
html[data-theme^="new"] .dataTable .nl-sc-two small { font-size: 12px; }
html[data-theme^="new"] .dataTable .nl-rankcell { display: flex; align-items: center; gap: 12px; height: 50px; padding-right: 8px; }
html[data-theme^="new"] .nl-rank-bar { position: relative; flex: none; width: 110px; height: 8px; border-radius: 4px; background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-rank-bar b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
html[data-theme^="new"] .nl-rank-above { background: var(--hf-pos); }
html[data-theme^="new"] .nl-rank-below { background: var(--hf-neg); opacity: .8; }
html[data-theme^="new"] .nl-rank-bar i { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--hf-text-strong); }
html[data-theme^="new"] .nl-rank-v { color: var(--hf-text-muted); font-size: 13px; white-space: nowrap; }
html[data-theme^="new"] .nl-rank-v b { color: var(--hf-text-strong); font-weight: 600; }

/* the Portfolio Structure tab (nl_portfolio_structure, newlook.js): the sector list beside the chart over time, then the
   holdings-by-sector treemap */
html[data-theme^="new"] .nl-ss { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; margin: 6px 0 18px; align-items: start; }
html[data-theme^="new"] .nl-sector-list { padding: 6px 14px 10px; }
html[data-theme^="new"] .nl-sl-head, html[data-theme^="new"] .nl-sl-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 46px; align-items: center; gap: 10px; }
html[data-theme^="new"] .nl-sl-head { padding: 6px 0; border-bottom: 1px solid var(--hf-border); font-size: 12px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-sl-head span + span { text-align: right; }
html[data-theme^="new"] .nl-sl-row { padding: 6px 0; border-bottom: 1px solid var(--hf-border-light); font-size: 13.5px; }
html[data-theme^="new"] .nl-sl-row { cursor: pointer; }
html[data-theme^="new"] .nl-sl-row:hover, html[data-theme^="new"] .nl-sl-row.nl-sl-focus { background: var(--hf-row-hover); }
html[data-theme^="new"] .nl-sl-row[aria-pressed="true"] { background: var(--hf-accent-bg); }
html[data-theme^="new"] .nl-sl-row[aria-pressed="true"] .nl-sl-name { font-weight: 600; }
html[data-theme^="new"] .nl-sl-toggle { display: none; width: 100%; margin-top: 2px; padding: 6px 0 0; border: 0; background: none; color: var(--hf-link); font: 500 13.5px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-sector-h.nl-has-tip { cursor: help; }
html[data-theme^="new"] .nl-sl-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-sl-name i { flex: none; width: 10px; height: 10px; border-radius: 2px; }
html[data-theme^="new"] .nl-sl-val { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--nl-font-table); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-sl-val b { display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--hf-border-light); }
html[data-theme^="new"] .nl-sl-val u { display: block; height: 100%; margin-left: auto; border-radius: 2px; }
html[data-theme^="new"] .nl-sl-chg { text-align: right; font-family: var(--nl-font-table); font-size: 13px; }
html[data-theme^="new"] .nl-up { color: var(--hf-pos); }
html[data-theme^="new"] .nl-down { color: var(--hf-neg); }
html[data-theme^="new"] .nl-sl-flat { color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-sl-note { padding-top: 8px; font-size: 12px; color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-sl-toggle + .nl-sl-note { padding-top: 4px; }
html[data-theme^="new"] .nl-sector-chart { position: relative; height: 380px; box-sizing: border-box; padding: 12px 12px 6px; }
html[data-theme^="new"] .nl-sector-panel #nl_sector_map { flex: 1; min-width: 0; height: 460px; }
html[data-theme^="new"] .nl-sector-group { position: absolute; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--nl-sector) 60%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--nl-sector) 14%, var(--hf-surface)); }
html[data-theme^="new"] .nl-sector-h { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; overflow: hidden; white-space: nowrap; font-size: 12.5px; line-height: 22px; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-sector-h::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--nl-sector); }
html[data-theme^="new"] .nl-sector-h b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
html[data-theme^="new"] .nl-sector-h span { flex: none; font-family: var(--nl-font-table); color: var(--hf-text-muted); }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-sector-list:not(.nl-sl-open) .nl-sl-row:nth-child(n+7) { display: none; } /* the head row, then the top 5 */
    html[data-theme^="new"] .nl-sl-toggle { display: block; }
}
@media screen and (max-width: 1000px) {
    html[data-theme^="new"] .nl-ss { grid-template-columns: minmax(0, 1fr); }
    html[data-theme^="new"] .nl-sector-chart { height: 300px; }
    html[data-theme^="new"] .nl-sector-panel #nl_sector_map { height: 560px; }
}

/* the holdings map (nl_treemap, newlook.js): fills the panel's height, which the moves panel sets */
html[data-theme^="new"] .nl-tm { display: flex; }
html[data-theme^="new"] .nl-tm #topHolders { flex: 1; min-width: 0; height: auto !important; min-height: 275px; }
html[data-theme^="new"] .nl-treemap { position: relative; }
/* the ticker in the middle of its tile and the numbers under it, where the eye goes (they sat in opposite corners) */
html[data-theme^="new"] .nl-tile { position: absolute; box-sizing: border-box; overflow: hidden; border-radius: 3px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; row-gap: 2px; color: var(--hf-heat-ink); white-space: nowrap; font-family: var(--nl-font); }
html[data-theme^="new"] .nl-tile b { font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
html[data-theme^="new"] .nl-tile span { display: flex; justify-content: center; align-items: center; column-gap: 6px; font-family: var(--nl-font-table); line-height: 1.25; opacity: .85; }
html[data-theme^="new"] .nl-tile span i { font-style: normal; white-space: nowrap; }
html[data-theme^="new"] .nl-tile:hover, html[data-theme^="new"] .nl-tile:focus-visible { color: var(--hf-heat-ink); text-decoration: none; box-shadow: inset 0 0 0 2px var(--hf-heat-ink); }
html[data-theme^="new"] .nl-tile:focus-visible { outline: 0; }

/* the new look's tooltip (nl_tip): dark in both themes, so its colors are fixed */
#nl_tip { position: fixed; z-index: 100000; max-width: 330px; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; background: var(--hf-datatip-bg, #1f2329); color: #d9dee4; font: 13px/1.45 var(--nl-font, sans-serif); box-shadow: var(--nl-shadow); pointer-events: none; text-align: left;
    --hf-pos: #5fd39a; --hf-neg: #ff8a80; } /* Classic's tooltip texts color trades with these roles */
#nl_tip.interactive { pointer-events: auto; }
#nl_tip[hidden] { display: none; }
#nl_tip b, #nl_tip strong { color: #fff; font-weight: 600; }
#nl_tip .t-h { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nl_tip .t-h a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#nl_tip .t-dim { color: #aab3bf; font-weight: 400; font-size: 12.5px; }
#nl_tip .t-pos { color: var(--hf-pos); font-weight: 600; }
#nl_tip .t-neg { color: var(--hf-neg); font-weight: 600; }
#nl_tip .t-note { color: #b8c0c9; font-size: 12px; line-height: 1.4; margin: 1px 0 3px; }
#nl_tip .t-note table { margin-top: 2px; }
#nl_tip .t-note th, #nl_tip .t-note td { padding: 0 10px 0 0; font-size: 12px; color: #b8c0c9; font-weight: 400; }
#nl_tip .t-note > br { display: none; } /* the gap before the trades table */
#nl_tip .t-sector { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: #c5ccd5; }
#nl_tip .t-sector i { flex: none; width: 8px; height: 8px; border-radius: 2px; }
/* the same look in the site's tooltip box (#tooltipImages, dark in both looks): the fund lists' holdings (nl_fund_strip) */
.nl-tt { --hf-pos: #5fd39a; --hf-neg: #ff8a80; color: #d9dee4; font: 13px/1.45 var(--nl-font, sans-serif); }
.nl-tt b { color: #fff; font-weight: 600; }
.nl-tt .t-h { margin-bottom: 2px; font-size: 14px; font-weight: 600; color: #fff; }
.nl-tt .t-h a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nl-tt .t-pos { color: var(--hf-pos); font-weight: 600; }
.nl-tt .t-neg { color: var(--hf-neg); font-weight: 600; }
/* Latest Activity's (nl_la_tip): the average price, its label as the ownership bars' tooltip's quarters, over the trades */
.nl-la .nl-la-avg { margin-bottom: 6px; color: #fff; }
.nl-la .nl-la-avg span, .nl-la .nl-la-t th, .nl-la .nl-la-t td:first-child { font-size: 12.5px; font-weight: 400; color: #b8c0c9; }
.nl-la .nl-la-t { border-collapse: collapse; }
.nl-la .nl-la-t :is(th, td) { padding: 1px 16px 1px 0; text-align: left; white-space: nowrap; }
.nl-la .nl-la-t :is(th, td):last-child { padding-right: 0; font-variant-numeric: tabular-nums; }
#nl_tip .t-charts { display: flex; gap: 18px; align-items: flex-start; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 11.5px; color: #aab3bf; }
#nl_tip .t-rows td { padding: 0 14px 0 0; font-size: 12.5px; color: #b8c0c9; }
#nl_tip .t-rows td:last-child { padding: 0; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
#nl_tip .t-rows tr:last-child td { font-weight: 600; color: #fff; }
/* the ownership bars' list (nl_own_cell): the shares, then each one's change */
#nl_tip .t-rows3 td:nth-child(2) { padding-right: 0; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
/* a Chart.js chart's lines (nl_chart_tip, the stock page): the series' color, its label in the tooltip's grey, the figure in white */
#nl_tip .t-cl { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#nl_tip .t-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; }
#nl_tip .t-lb { font-weight: 400; }
html[data-theme^="new"] #tooltipCharts .tt-k { color: #d9dee4; } /* the Buy Prices chart's own (stock.js): the same */
html[data-theme^="new"] #tooltipCharts .tt-v { color: #fff !important; }
#nl_tip .t-rows3 td:last-child { padding-left: 14px; }
#nl_tip .t-rows .t-up { color: var(--hf-pos); }
#nl_tip .t-rows .t-down { color: var(--hf-neg); }
/* Buy Prices' top holders (nl_bpv_top): the funds under the pointer, a row each, their names linking to the funds */
/* the S&P comparison chart's tooltip (nl_perf_tip): a section per kind of number, values right-aligned, green or red; the
   tooltip is dark in both looks, so the dark look's greens and reds */
#nl_tip .t-k { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 2px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .12); color: #aab3bf; font-size: 12px; }
#nl_tip .t-h + .t-k { margin-top: 2px; padding-top: 0; border-top: 0; }
/* the line above the quarter's own numbers: everything under it is that quarter */
#nl_tip .t-k-q { margin-top: 9px; padding-top: 8px; border-top: 2px solid rgba(156, 196, 255, .55); }
#nl_tip .t-k span { color: #8a949f; }
#nl_tip .t-pf { width: 100%; border-collapse: collapse; }
#nl_tip .t-pf td { padding: 1px 0; font-size: 13px; color: #e6e9ed; white-space: nowrap; }
#nl_tip .t-pf td:first-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; padding-right: 16px; }
#nl_tip .t-pf td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
#nl_tip .t-pf .t-up { color: #45c283; }
#nl_tip .t-pf .t-dn { color: #f06a5f; }
#nl_tip .t-sw { display: inline-block; width: 16px; margin: 0 7px 0 0; vertical-align: middle; }
#nl_tip .t-st b { display: inline-block; min-width: 46px; color: #fff; }
#nl_tip .t-st .t-dim { margin-left: 4px; }
#nl_tip:has(.t-hold) { max-width: min(480px, calc(100vw - 16px)); }
#nl_tip .t-hold { border-collapse: collapse; }
#nl_tip .t-hold th { padding: 0 14px 4px 0; font-size: 11.5px; font-weight: 400; color: #aab3bf; text-align: left; white-space: nowrap; }
#nl_tip .t-hold td { padding: 3px 14px 3px 0; font-size: 12.5px; color: #fff; vertical-align: top; font-variant-numeric: tabular-nums; }
#nl_tip .t-hold :is(th, td):not(:first-child) { white-space: nowrap; }
#nl_tip .t-hold :is(th, td):last-child { padding-right: 0; text-align: right; }
#nl_tip .t-hold tr + tr td { border-top: 1px solid rgba(255, 255, 255, .1); }
#nl_tip .t-hold a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
#nl_tip .t-hold a:hover { text-decoration-color: #fff; }
#nl_tip .nl-own { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 4px; }
#nl_tip .nl-own i { width: 11px; background: #7d8896; border-radius: 1px 1px 0 0; }
#nl_tip .nl-own i:last-child { background: #fff; }
#nl_tip .nl-own-lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: #8e98a4; margin-top: 2px; }
#nl_tip .sparkline-svg { position: static; display: block; width: 90px; height: 34px; margin-top: 4px; } /* global.css positions it inside a table cell */
#nl_tip .sparkline-path { stroke: #d5dbe2; fill: none; }
#nl_tip .sparkline-area { fill: #d5dbe2; fill-opacity: .14; }

/* the filter tag above the holdings table (a count in the moves panel, or the Filter form, sets it) */
html[data-theme^="new"] .nl-filter-tag { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 1px 3px 1px 10px; border-radius: 13px; background: var(--hf-accent-bg); border: 1px solid var(--hf-accent-border); color: var(--hf-text-strong); font: 500 13px/20px var(--nl-font); vertical-align: middle; }
html[data-theme^="new"] .nl-filter-tag[hidden] { display: none; }
html[data-theme^="new"] .nl-filter-tag button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--hf-text-muted); cursor: pointer; display: grid; place-items: center; }
html[data-theme^="new"] .nl-filter-tag button:hover { background: var(--hf-surface-sunken); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-filter-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* under the table, when a plan that filters only the loaded holdings shows the 5 largest moves of a kind (newlook.js) */
html[data-theme^="new"] .nl-top5-note { position: sticky; left: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 6px; padding: 10px 12px 10px 14px; border: 1px solid var(--hf-accent-border); border-radius: 8px; background: var(--hf-accent-bg); color: var(--hf-text-strong); font-size: 14px; line-height: 1.4; }
html[data-theme^="new"] .nl-top5-note[hidden] { display: none; }
html[data-theme^="new"] .nl-top5-note .new_actionbtn { flex: none; width: auto; display: inline-block; margin: 0; padding: 6px 16px; text-decoration: none; }

/* the price chart under a row: the same look whether or not the pointer is over it (the row hover is for rows), and
   as wide as the table (Classic fixes it at 1060px, wider than this look's holdings table, whose edge clipped the right axis) */
html[data-theme^="new"] .dataTable tr.ph-detail-row > td, html[data-theme^="new"] .dataTable tr.ph-detail-row:hover > td { background-color: var(--hf-accent-bg) !important; border-top: 0; border-bottom: 1px solid var(--hf-border); cursor: default; }
html[data-theme^="new"] .ph-chart-box { width: auto; }

/* tables that scroll sideways (nl_table_arrows): an arrow by the first rows and a fade down the right edge */
html[data-theme^="new"] .scroll.scrollRight, html[data-theme^="new"] .scroll.scrollLeft { display: none !important; }
html[data-theme^="new"] .nl-table-strip { position: relative; }
html[data-theme^="new"] .nl-table-strip > .strip_arrow { top: 76px; transform: none; }
html[data-theme^="new"] .nl-table-strip > .strip_right { right: 8px; }
html[data-theme^="new"] .nl-table-strip > .strip_left, html[data-theme^="new"] .nl-table-strip.strip_can_left::before { display: none; }
html[data-theme^="new"] .nl-table-strip.nl-strip-used > .strip_arrow, html[data-theme^="new"] .nl-table-strip.nl-strip-used::after { display: none !important; } /* scrolled once: they know */

/* rows with a price chart open it on click (newlook.js) */
html[data-theme^="new"] .dataTable tbody tr:has(.ph-trigger) { cursor: pointer; }

@media screen and (max-width: 1000px) {
    html[data-theme^="new"] .nl-overview { grid-template-columns: minmax(0, 1fr); }
    html[data-theme^="new"] .nl-stats { grid-template-columns: repeat(3, 1fr); }
    html[data-theme^="new"] .nl-stats > div:nth-child(4) { border-left: 0; }
    html[data-theme^="new"] .nl-stats > div:nth-child(n+4) { border-top: 1px solid var(--hf-border); }
}
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-who { flex-basis: 100%; gap: 12px; }
    html[data-theme^="new"] .nl-who .hedgeImageBigNew { width: 52px; height: 52px; }
    html[data-theme^="new"] .nl-h1 { font-size: 21px; }
    html[data-theme^="new"] .nl-sub { font-size: 13.5px; }
    html[data-theme^="new"] .nl-actions { width: 100%; }
    html[data-theme^="new"] .nl-stats { grid-template-columns: repeat(2, 1fr); }
    html[data-theme^="new"] .nl-stats > div { border-left: 1px solid var(--hf-border); border-top: 1px solid var(--hf-border); padding: 9px 12px; }
    html[data-theme^="new"] .nl-stats > div:nth-child(odd) { border-left: 0; }
    html[data-theme^="new"] .nl-stats > div:nth-child(-n+2) { border-top: 0; }
    html[data-theme^="new"] .nl-stats > div:nth-child(4) { border-left: 1px solid var(--hf-border); } /* the 3-column rule above drops it */
    html[data-theme^="new"] .nl-actions .new_actionbtn { flex: 1; }
    /* on a phone, 10px gutters; "GOOGL Insider Trading & Congress | Hedge Funds" 15.7px at 360, "AAPL Hedge Fund Activity" 18.4px */
    html[data-theme^="new"] :is(.nl-head-stock .nl-h1, .h1.nl-h1-fit) { font-size: max(12px, min(21px, calc((100vw - 20px) / var(--nl-h1-em, 22)))); } /* never smaller than before (12px): the longest asset name wraps at 360 */
    html[data-theme^="new"] .nl-head-stock .nl-h1-alt { font-size: .86em; }
    html[data-theme^="new"] .nl-subrow .nl-actions { width: auto; } /* the rules above stretch the fund page's buttons across */
    html[data-theme^="new"] .nl-subrow .nl-actions .new_actionbtn { flex: none; }
    html[data-theme^="new"] .nl-subrow .nl-sub { font-size: 12.5px; }
    html[data-theme^="new"] .nl-stats dd { font-size: 17px; }
    html[data-theme^="new"] .nl-tm #topHolders { min-height: 320px; } /* small tiles need the height to show their numbers */
}

/* ---------- Icons: line icons in place of the icon font (the mockup's set; Classic keeps the font) ---------- */
/* every swapped glyph becomes a mask of its SVG, filled with the text color; --nl-icon says which */
html[data-theme^="new"] :is(.icon-th-large, .icon-exchange-1-rot, .customicon-sparkles, .icon-chart-pie, .icon-chart-line, .icon-money, .icon-manager, .icon-doc-text, .icon-filter, .icon-columns, .icon-download, .icon-share, .icon-info-circled, .icon-question-circle-o, .icon-ccw, .icon-up, .icon-down, .icon-pin, .icon-move)::before,
html[data-theme^="new"] .new_actionbtn:is([data-follow_unfollow], [data-enabled="1"]) i::before {
    content: ''; display: inline-block; box-sizing: content-box; width: 16px; height: 16px; min-width: 0; padding: 0; margin: 0 6px 0 0;
    vertical-align: -3px; font-size: 16px; background: currentColor; filter: none; rotate: none;
    -webkit-mask: var(--nl-icon) center / contain no-repeat; mask: var(--nl-icon) center / contain no-repeat;
}
html[data-theme^="new"] .icon-th-large { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'14'%20y%3D'3'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'14'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3Crect%20x%3D'3'%20y%3D'14'%20width%3D'7'%20height%3D'7'%20rx%3D'1'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-exchange-1-rot { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2020V4M3%208l4-4%204%204M17%204v16M13%2016l4%204%204-4'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .customicon-sparkles { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9z'%2F%3E%3Cpath%20d%3D'M19%2015l.8%202.2L22%2018l-2.2.8L19%2021l-.8-2.2L16%2018l2.2-.8z'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-chart-pie { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21.2%2015.9A10%2010%200%201%201%208%202.8'%2F%3E%3Cpath%20d%3D'M22%2012A10%2010%200%200%200%2012%202v10z'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-chart-line { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm22%207-8.5%208.5-5-5L2%2017'%2F%3E%3Cpath%20d%3D'M16%207h6v6'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-manager { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-doc-text { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z'%2F%3E%3Cpath%20d%3D'M14%202v6h6M16%2013H8M16%2017H8'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-filter { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%203H2l8%209.5V19l4%202v-8.5z'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-columns { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'18'%20height%3D'18'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M12%203v18'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-download { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4M7%2010l5%205%205-5M12%2015V3'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-share { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'18'%20cy%3D'5'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'6'%20cy%3D'12'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'19'%20r%3D'3'%2F%3E%3Cpath%20d%3D'm8.6%2013.5%206.8%204M15.4%206.5l-6.8%204'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-info-circled { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M12%201.5a10.5%2010.5%200%201%200%200%2021a10.5%2010.5%200%201%200%200-21zM10.4%2010h3.2v8.2h-3.2zM12%204.6a2%202%200%201%200%200%204a2%202%200%201%200%200-4z'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-question-circle-o { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M9.1%209a3%203%200%200%201%205.8%201c0%202-3%203-3%203M12%2017h.01'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-ccw { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208'%2F%3E%3Cpath%20d%3D'M3%203v5h5'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-up { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'm5%2012%207-7%207%207M12%2019V5'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-down { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M19%2012l-7%207-7-7'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-pin { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2017v5M9%2010.8a2%202%200%200%201-1.1%201.8l-1.8.9A2%202%200%200%200%205%2015.2V16a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-.8a2%202%200%200%200-1.1-1.8l-1.8-.9A2%202%200%200%201%2015%2010.8V7a1%201%200%200%201%201-1%202%202%200%200%200%200-4H8a2%202%200%200%200%200%204%201%201%200%200%201%201%201z'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-move { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'9'%20cy%3D'5'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'12'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'19'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'5'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'12'%20r%3D'1'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'19'%20r%3D'1'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="1"] i { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%205v14M5%2012h14'%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="0"] i { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E"); }
/* while a follow saves (data-follow_unfollow="2", global.js) the icon is a turning arc: with no icon set for that state the
   mask above failed and painted a solid square. Classic spins its font glyph by turning the <i>, which here would swing
   the icon's margin around too, so the arc turns instead */
html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="2"] i { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%3E%3Cpath%20d%3D'M21%2012a9%209%200%201%201-6.2-8.56'%2F%3E%3C%2Fsvg%3E"); animation: none; margin-right: 0; }
html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="2"] i::before { animation: nl-spin .8s linear infinite; }
@keyframes nl-spin { to { transform: rotate(360deg); } }
/* a table waiting on the server (nl_table_busy). The cover has no height, so nothing moves. Each part starts a moment late,
   so a quick answer shows nothing but its new rows; the rows come back at once, with no fade */
html[data-theme^="new"] table.dataTable.nl-busy > tbody:not(:has(.nl-skel)) { opacity: .4; pointer-events: none; transition: opacity .15s ease .2s; }
html[data-theme^="new"] .nl-busy-cover { position: sticky; left: 0; top: 0; z-index: 7; width: 100%; height: 0; pointer-events: none; }
html[data-theme^="new"] .nl-busy-bar { position: absolute; left: 0; right: 0; top: 25px; height: 3px; overflow: hidden; background: color-mix(in srgb, var(--hf-brand) 25%, transparent); animation: nl-busy-in .15s ease-out .12s backwards; }
html[data-theme^="new"] .nl-busy-bar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: var(--hf-brand); animation: nl-busy-run 1.2s cubic-bezier(.45, .05, .55, .95) infinite; }
html[data-theme^="new"] .nl-busy-note { position: absolute; left: 50%; top: 72px; display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 34px; padding: 0 14px 0 12px; border-radius: 6px; transform: translateX(-50%);
    background: var(--hf-datatip-bg); color: var(--hf-datatip-text); font-size: 13.5px; white-space: nowrap; animation: nl-busy-in .15s ease-out .3s backwards; }
/* the Ownership column's bars, in small: the last one, the darker one there, in the brand color */
html[data-theme^="new"] .nl-busy-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; }
html[data-theme^="new"] .nl-busy-mark i { display: block; width: 4px; height: 100%; border-radius: 1.5px 1.5px 0 0; background: var(--hf-text-faint); transform-origin: bottom; animation: nl-busy-rise 1s ease-in-out infinite; }
html[data-theme^="new"] .nl-busy-mark i:nth-child(2) { animation-delay: .12s; }
html[data-theme^="new"] .nl-busy-mark i:nth-child(3) { animation-delay: .24s; }
html[data-theme^="new"] .nl-busy-mark i:nth-child(4) { animation-delay: .36s; }
html[data-theme^="new"] .nl-busy-mark i:nth-child(5) { animation-delay: .48s; background: var(--hf-brand); }
html[data-theme^="new"] tr.nl-skel td { height: 50px; padding: 0 8px; }
html[data-theme^="new"] tr.nl-skel i { display: block; height: 11px; max-width: 76%; border-radius: 2px; background: var(--hf-surface-sunken); animation: nl-busy-glow 1.4s ease-in-out infinite; }
html[data-theme^="new"] tr.nl-skel:nth-child(even) i { max-width: 58%; }
/* A table that loads its own rows (a filter form, not one waiting for a button) holds the stand-ins' room from the first
   paint: its box is as tall as the header (27px and a border) and 8 stand-ins (51px) until the first answer is in (hf-loaded)
   or real rows are. Stand-ins put in once the page had drawn pushed what's under the table down and the rows moved it again,
   twice the spinner's layout shift (Nov 2026); now only the rows' difference moves it. Fewer for a page of 5 and busy_rows
   (each value used needs its line here) */
html[data-theme^="new"] div:has(> table.dataTable[data-options*="filter_form_id"]:not(.hf-loaded, [data-options*="build_on_button_click:1"], [data-options*="busy_cover:0"])):not(:has(> table > tbody > tr:not(.nl-skel))) {
    min-height: calc(var(--nl-busy-head, 28px) + var(--nl-busy-rows, 8) * 51px); }
html[data-theme^="new"] div:has(> table.dataTable > thead > tr + tr) { --nl-busy-head: 56px; }
html[data-theme^="new"] div:has(> table.dataTable[data-options*="limit_per_page:5,"]) { --nl-busy-rows: 5; }
html[data-theme^="new"] div:has(> table.dataTable[data-options*="busy_rows:3,"]) { --nl-busy-rows: 3; }
html[data-theme^="new"] div:has(> table.dataTable[data-options*="busy_rows:6,"]) { --nl-busy-rows: 6; }
@keyframes nl-busy-in { from { opacity: 0; } }
@keyframes nl-busy-run { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
@keyframes nl-busy-rise { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes nl-busy-glow { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
    html[data-theme^="new"] .nl-busy-bar::before { width: 100%; animation: none; }
    html[data-theme^="new"] .nl-busy-mark i, html[data-theme^="new"] tr.nl-skel i { animation: none; }
    html[data-theme^="new"] .nl-busy-mark i:nth-child(odd) { transform: scaleY(.6); }
}
@media (prefers-reduced-motion: reduce) { html[data-theme^="new"] .new_actionbtn[data-follow_unfollow="2"] i::before { animation-duration: 2.4s; } }
html[data-theme^="new"] .new_actionbtn[data-enabled="1"] i { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E"); }
/* ---------- Icons, the rest: every class still on the icon font, drawn in the same line style as the set above; with these the
   new look never loads the font. Filled where filled says something: the rating star, the heart, the rating blocks ---------- */
/* no icon's ::before uses the font in the new look: an empty one set in it still had the browser download it (for its
   line metrics), and every icon with a glyph is drawn now */
html[data-theme^="new"] :is([class^="icon-"], [class*=" icon-"])::before { font-family: inherit; }
html[data-theme^="new"] :is(.icon-search, .icon-value, .icon-building, .icon-fire, .icon-growth, .icon-fire-1, .icon-note, .icon-award, .icon-calendar, .icon-calculator, .icon-calc, .icon-temperatire, .icon-flow-tree, .icon-flow-merge, .icon-thumbs-up-alt, .icon-thumbs-down-alt, .icon-shuffle, .icon-fort-awesome, .icon-handshake-o, .icon-graduation-cap, .icon-balance-scale, .icon-balance-scale-big, .icon-wrench, .icon-wrench-big, .icon-money-1, .icon-dollar, .icon-users, .icon-user, .icon-chart-bar, .icon-chart-bar-1, .icon-question-circle-menu, .icon-question-circle-menu2, .icon-star, .icon-star-empty, .icon-google, .icon-twitter, .icon-facebook, .icon-linkedin, .icon-login, .icon-logout, .icon-list-bullet, .icon-spin6, .icon-plus, .icon-minus, .icon-heart, .icon-down-dir, .icon-up-dir, .icon-floppy, .icon-bell-alt, .icon-bell, .icon-menu, .icon-cog, .icon-sliders, .icon-lock, .icon-lock-open, .icon-exchange, .icon-exchange-1, .icon-exchange-rot, .icon-arrow-combo, .icon-arrow-combo-rot, .icon-blank, .icon-trash-empty, .icon-upload, .icon-info, .icon-docs, .icon-ok, .icon-ok-feature, .icon-ok-modal, .icon-tag, .icon-table, .icon-window-close, .icon-cancel, .icon-cancel-feature, .icon-ok-squared, .icon-bitcoin, .icon-silver-icon, .icon-th-large, .icon-exchange-1-rot, .icon-chart-pie, .icon-chart-line, .icon-manager, .icon-doc-text, .icon-filter, .icon-columns, .icon-download, .icon-share, .icon-info-circled, .icon-question-circle-o, .icon-ccw, .icon-up, .icon-down, .icon-pin, .icon-move, .icon-gold-bars-icon, .icon-attention, .icon-telegram, .icon-paper-plane)::before {
    content: ''; display: inline-block; box-sizing: content-box; width: 16px; height: 16px; min-width: 0; padding: 0; margin: 0 6px 0 0;
    vertical-align: -3px; font-size: 16px; font-family: inherit; background: currentColor; filter: none;
    -webkit-mask: var(--nl-icon) center / contain no-repeat; mask: var(--nl-icon) center / contain no-repeat;
}
/* the search button on phones (#searchMob): the bar's search box's magnifier, filled, its handle long and heavy (the line
   one's was short against its ring) */
html[data-theme^="new"] :is(.icon-search) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20250.313%20250.313%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M244.186%2C214.604l-54.379-54.378c-0.289-0.289-0.628-0.491-0.93-0.76c10.7-16.231%2C16.945-35.66%2C16.945-56.554C205.822%2C46.075%2C159.747%2C0%2C102.911%2C0S0%2C46.075%2C0%2C102.911c0%2C56.835%2C46.074%2C102.911%2C102.91%2C102.911c20.895%2C0%2C40.323-6.245%2C56.554-16.945c0.269%2C0.301%2C0.47%2C0.64%2C0.759%2C0.929l54.38%2C54.38c8.169%2C8.168%2C21.413%2C8.168%2C29.583%2C0C252.354%2C236.017%2C252.354%2C222.773%2C244.186%2C214.604z%20M102.911%2C170.146c-37.134%2C0-67.236-30.102-67.236-67.235c0-37.134%2C30.103-67.236%2C67.236-67.236c37.132%2C0%2C67.235%2C30.103%2C67.235%2C67.236C170.146%2C140.044%2C140.043%2C170.146%2C102.911%2C170.146z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-value, .icon-building) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%272.5%27%20width%3D%2716%27%20height%3D%2719%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M9.5%2021.5V18h5v3.5%27%2F%3E%3Crect%20x%3D%277.4%27%20y%3D%276%27%20width%3D%272.2%27%20height%3D%272.2%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2710.9%27%20y%3D%276%27%20width%3D%272.2%27%20height%3D%272.2%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2714.4%27%20y%3D%276%27%20width%3D%272.2%27%20height%3D%272.2%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%277.4%27%20y%3D%2710.4%27%20width%3D%272.2%27%20height%3D%272.2%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2710.9%27%20y%3D%2710.4%27%20width%3D%272.2%27%20height%3D%272.2%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2714.4%27%20y%3D%2710.4%27%20width%3D%272.2%27%20height%3D%272.2%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-fire) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cdefs%3E%3Cmask%20id%3D%27m%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27white%27%2F%3E%3Cpath%20d%3D%27M12%2021.2c-2.1%200-3.6-1.5-3.6-3.4%200-1.7%201-2.8%202-3.7.1%201%20.5%201.7%201.2%202-.2-2.2.5-3.8%201.7-5.2.5%202.2%202.3%203.3%202.3%206%200%202.6-1.6%204.3-3.6%204.3z%27%20fill%3D%27black%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%27url(%23m)%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M12.2%201.6c.5%203.6%203.3%205.4%204.9%207.6%201.4%201.9%202.4%203.8%202.4%206.1a7.5%207.5%200%200%201-15%200c0-2.7%201.4-4.7%203-6.3.2%201.7.9%202.9%202.1%203.5-.6-4.3.6-7.9%202.6-10.9z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-growth) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%274.6%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2719.4%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2719.4%27%20r%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M12%207.2V11M5%2016.8v-2.2a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202v2.2%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-fire-1, .icon-note) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021.5h15a2%202%200%200%200%202-2V4.5a2%202%200%200%200-2-2H8a2%202%200%200%200-2%202v15a2%202%200%200%201-2%202zm0%200a2%202%200%200%201-2-2V11a2%202%200%200%201%202-2h2%27%2F%3E%3Cpath%20d%3D%27M10%206.5h7v4h-7zM10%2014h7M10%2017.5h5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-award) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cpath%20d%3D%27M6.3%202.5h11.4v6a5.7%205.7%200%200%201-11.4%200z%27%2F%3E%3Crect%20x%3D%2710.8%27%20y%3D%2713.8%27%20width%3D%272.4%27%20height%3D%274.4%27%2F%3E%3Crect%20x%3D%276.8%27%20y%3D%2718.2%27%20width%3D%2710.4%27%20height%3D%273.3%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M6.3%204.6H3.8v1.6a4.1%204.1%200%200%200%203.7%204.1M17.7%204.6h2.5v1.6a4.1%204.1%200%200%201-3.7%204.1%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-calendar) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274.3%27%20width%3D%2719%27%20height%3D%2717.2%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M2.5%209.6h19M7.5%202.3v4M16.5%202.3v4%27%2F%3E%3Crect%20x%3D%275.7%27%20y%3D%2712.3%27%20width%3D%272.6%27%20height%3D%272.6%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2710.7%27%20y%3D%2712.3%27%20width%3D%272.6%27%20height%3D%272.6%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2715.7%27%20y%3D%2712.3%27%20width%3D%272.6%27%20height%3D%272.6%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%275.7%27%20y%3D%2716.6%27%20width%3D%272.6%27%20height%3D%272.6%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2710.7%27%20y%3D%2716.6%27%20width%3D%272.6%27%20height%3D%272.6%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2715.7%27%20y%3D%2716.6%27%20width%3D%272.6%27%20height%3D%272.6%27%20rx%3D%27.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-calculator, .icon-calc) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%272%27%20width%3D%2717%27%20height%3D%2720%27%20rx%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M3.5%207.4h17M7.94%207.4V22M12%207.4V22M16.06%207.4V22M3.5%2012.14h17M3.5%2016.88h12.56%27%20stroke-width%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-temperatire) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.6%204.6v9.5a4.6%204.6%200%201%201-5.2%200V4.6a2.6%202.6%200%200%201%205.2%200z%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717.6%27%20r%3D%272.2%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%2711.05%27%20y%3D%279%27%20width%3D%271.9%27%20height%3D%278%27%20rx%3D%27.9%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-flow-tree) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%274.6%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2719.4%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2719.4%27%20r%3D%272.4%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2719.4%27%20r%3D%272.4%27%2F%3E%3Cpath%20d%3D%27M12%207.2v9.8M4%2017v-2.4a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202V17%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-flow-merge) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%274.6%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%274.6%27%20r%3D%272.6%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2719.4%27%20r%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M5%207.2v2.2a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V7.2M12%2011.4v5.4%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-thumbs-up-alt) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2010v11.5M15%205.88%2014%2010h5.83a2%202%200%200%201%201.92%202.56l-2.33%208A2%202%200%200%201%2017.5%2022H4a2%202%200%200%201-2-2v-8a2%202%200%200%201%202-2h2.76a2%202%200%200%200%201.79-1.11L12%202a3.13%203.13%200%200%201%203%203.88z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-thumbs-down-alt) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cg%20transform%3D%27matrix(1%200%200%20-1%200%2024)%27%3E%3Cpath%20d%3D%27M7%2010v11.5M15%205.88%2014%2010h5.83a2%202%200%200%201%201.92%202.56l-2.33%208A2%202%200%200%201%2017.5%2022H4a2%202%200%200%201-2-2v-8a2%202%200%200%201%202-2h2.76a2%202%200%200%200%201.79-1.11L12%202a3.13%203.13%200%200%201%203%203.88z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-shuffle) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2017.5h1.6c1.3%200%202.5-.6%203.2-1.7l6.4-8.6A4%204%200%200%201%2016.4%205.5H21M18%202.5l3%203-3%203M2%206.5h1.9a4%204%200%200%201%203.4%201.9M21%2017.5h-4.7a4%204%200%200%201-3.2-1.6l-.6-.8M18%2014.5l3%203-3%203%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-fort-awesome) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2021.5h18M5%2021.5V10h14v11.5M8.5%2013v5M12%2013v5M15.5%2013v5M3.5%2010%2012%205l8.5%205M12%205V2.5h3.5v2H12%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-handshake-o) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278.2%27%20r%3D%275.3%27%2F%3E%3Ccircle%20cx%3D%278.2%27%20cy%3D%2714.8%27%20r%3D%275.3%27%2F%3E%3Ccircle%20cx%3D%2715.8%27%20cy%3D%2714.8%27%20r%3D%275.3%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-graduation-cap) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%209.5%2012%204.5%202%209.5l10%205z%27%2F%3E%3Cpath%20d%3D%27M6%2011.5V16c3%202.7%209%202.7%2012%200v-4.5M22%209.5v5.5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-balance-scale, .icon-balance-scale-big) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.8V21M7%2021.2h10M2.4%206.6h19.2M5.3%206.6%201.8%2014.8M5.3%206.6l3.5%208.2M18.7%206.6l-3.5%208.2M18.7%206.6l3.5%208.2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%273.6%27%20r%3D%271.8%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M1.2%2014.8h8.2a4.1%204.1%200%200%201-8.2%200zM14.6%2014.8h8.2a4.1%204.1%200%200%201-8.2%200z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-wrench, .icon-wrench-big) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-money-1) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%271.5%27%20y%3D%275.2%27%20width%3D%2721%27%20height%3D%2713.6%27%20rx%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M14.3%209.6A2.6%202.6%200%200%200%2012%208.5c-1.3%200-2.3.7-2.3%201.6%200%202.1%204.6%201.3%204.6%203.6%200%20.9-1%201.7-2.3%201.7-1.1%200-2-.5-2.4-1.3M12%207.1v1.4M12%2015.4v1.5%27%20stroke-width%3D%271.9%27%2F%3E%3Ccircle%20cx%3D%275.3%27%20cy%3D%2712%27%20r%3D%271.2%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2718.7%27%20cy%3D%2712%27%20r%3D%271.2%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-dollar) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202v20M17%205.5H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-users) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-user) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-chart-bar) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203v18h18M8%2017v-4M13%2017V7M18%2017v-7%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-chart-bar-1) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020v-3M9%2020v-7M14%2020V9M19%2020V4%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-question-circle-menu, .icon-question-circle-menu2, .icon-question-circle-o) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cdefs%3E%3Cmask%20id%3D%27m%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27white%27%2F%3E%3Cpath%20d%3D%27M8.9%209.4a3.2%203.2%200%200%201%206.2%201.1c0%202.1-3.1%202.6-3.1%204.2%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2718%27%20r%3D%271.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%27url(%23m)%27%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-star) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cpolygon%20points%3D%2712%202.5%2014.94%208.46%2021.5%209.41%2016.75%2014.04%2017.87%2020.58%2012%2017.5%206.13%2020.58%207.25%2014.04%202.5%209.41%209.06%208.46%2012%202.5%27%20stroke%3D%27black%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-star-empty) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolygon%20points%3D%2712%202.5%2014.94%208.46%2021.5%209.41%2016.75%2014.04%2017.87%2020.58%2012%2017.5%206.13%2020.58%207.25%2014.04%202.5%209.41%209.06%208.46%2012%202.5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-google) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.5%2012.2c0%204.9-3.4%208.3-8.4%208.3a8.5%208.5%200%201%201%205.8-14.7M20.5%2012h-8.3%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-twitter) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cpath%20d%3D%27M3.5%203.5h4.6l12.4%2017h-4.6z%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M20%203.5l-6.7%207.6M4%2020.5l6.7-7.6%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-facebook) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15.5%203H13a4%204%200%200%200-4%204v14M6%2010.5h8%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-linkedin) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%209.5V20M5%204.5h.01M10%2020v-10.5M10%2014a4%204%200%200%201%208%200v6%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-login) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4M10%2017l5-5-5-5M15%2012H3%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-logout) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4M16%2017l5-5-5-5M21%2012H9%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-list-bullet) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206h12M9%2012h12M9%2018h12%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%276%27%20r%3D%271.9%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2712%27%20r%3D%271.9%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%274%27%20cy%3D%2718%27%20r%3D%271.9%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-spin6) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2012a9%209%200%201%201-6.22-8.56%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-plus) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-minus) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-heart) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cpath%20d%3D%27M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-down-dir) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-up-dir) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%2015%206-6%206%206%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-floppy) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202z%27%2F%3E%3Cpath%20d%3D%27M17%2021v-8H7v8M7%203v5h8%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-bell-alt, .icon-bell) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9M10.3%2021a1.94%201.94%200%200%200%203.4%200%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-menu) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16M4%2012h16M4%2018h16%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-cog) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19.03%2010.46L21.92%2010.75L21.92%2013.25L19.03%2013.54L18.06%2015.88L19.90%2018.13L18.13%2019.90L15.88%2018.06L13.54%2019.03L13.25%2021.92L10.75%2021.92L10.46%2019.03L8.12%2018.06L5.87%2019.90L4.10%2018.13L5.94%2015.88L4.97%2013.54L2.08%2013.25L2.08%2010.75L4.97%2010.46L5.94%208.12L4.10%205.87L5.87%204.10L8.12%205.94L10.46%204.97L10.75%202.08L13.25%202.08L13.54%204.97L15.88%205.94L18.13%204.10L19.90%205.87L18.06%208.12z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-sliders) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%204h-7M10%204H3M21%2012h-9M8%2012H3M21%2020h-5M12%2020H3M14%202v4M8%2010v4M16%2018v4%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-lock) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%2711%27%20width%3D%2718%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-lock-open) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%2711%27%20width%3D%2718%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%209.9-1%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-exchange, .icon-exchange-1) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203%204%207l4%204M4%207h16M16%2021l4-4-4-4M20%2017H4%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-exchange-rot) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m21%2016-4%204-4-4M17%2020V4M3%208l4-4%204%204M7%204v16%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-arrow-combo, .icon-arrow-combo-rot) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m7%2015%205%205%205-5M7%209l5-5%205%205%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-blank) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-trash-empty) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2M10%2011v6M14%2011v6%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-upload) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4M17%208l-5-5-5%205M12%203v12%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-info, .icon-info-circled) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cdefs%3E%3Cmask%20id%3D%27m%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27white%27%2F%3E%3Cpath%20d%3D%27M12%2011.6v5.8%27%20stroke%3D%27black%27%20stroke-width%3D%272.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%277%27%20r%3D%271.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%27url(%23m)%27%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-docs) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%278%27%20y%3D%278%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-ok, .icon-ok-feature, .icon-ok-modal) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-tag) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12.59%202.59A2%202%200%200%200%2011.17%202H4a2%202%200%200%200-2%202v7.17a2%202%200%200%200%20.59%201.42l8.7%208.7a2.43%202.43%200%200%200%203.42%200l6.58-6.58a2.43%202.43%200%200%200%200-3.42z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-table) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3.5%203.5h17v4.2h-17z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M3%2011.2h18M3%2014.6h18M3%2018h18M9%207.7V21M15%207.7V21%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-window-close) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m15%209-6%206M9%209l6%206%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-cancel, .icon-cancel-feature) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%206%206%2018M6%206l12%2012%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-ok-squared) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-bitcoin) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M11.77%2019.09c4.92.87%206.14-6.03%201.21-6.9m-1.21%206.9L5.86%2018.05m5.91%201.04-.35%201.97m1.56-8.87c4.93.87%206.14-6.02%201.22-6.89m-1.22%206.89-3.94-.69m5.16-6.2L8.29%204.26m5.91%201.04.35-1.97M7.48%2020.36l3.13-17.72%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-silver-icon) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cpath%20d%3D%27M1.2%2021.05%202.9%2014.15h6.8l1.7%206.9zM12.6%2021.05l1.7-6.9h6.8l1.7%206.9zM6.5%2013.25l1.7-6.9h7.6l1.7%206.9z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-th-large) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%277.5%27%20height%3D%277.5%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2713.5%27%20y%3D%273%27%20width%3D%277.5%27%20height%3D%277.5%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2713.5%27%20y%3D%2713.5%27%20width%3D%277.5%27%20height%3D%277.5%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2713.5%27%20width%3D%277.5%27%20height%3D%277.5%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-exchange-1-rot) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2020V4M3%208l4-4%204%204M17%204v16M13%2016l4%204%204-4%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-chart-pie) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.2%2015.9A10%2010%200%201%201%208%202.8%27%2F%3E%3Cpath%20d%3D%27M22%2012A10%2010%200%200%200%2012%202v10z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-chart-line) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m22%207-8.5%208.5-5-5L2%2017%27%2F%3E%3Cpath%20d%3D%27M16%207h6v6%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-manager) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%276.5%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M5%2021v-2.5A4.5%204.5%200%200%201%209.5%2014h5a4.5%204.5%200%200%201%204.5%204.5V21M12%2014l-1.2%202.2L12%2021l1.2-4.8z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-doc-text) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%27%2F%3E%3Cpath%20d%3D%27M14%202v6h6M16%2013H8M16%2017H8%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-filter) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%203H2l8%209.5V19l4%202v-8.5z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-columns) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M12%203v18%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-download) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4M7%2010l5%205%205-5M12%2015V3%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-share) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%275%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2719%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27m8.6%2013.5%206.8%204M15.4%206.5l-6.8%204%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-ccw) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.6%2015.4A8.6%208.6%200%201%200%206.2%206%27%2F%3E%3Cpath%20d%3D%27M2.6%203.2v5.2h5.2%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-up) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012%207-7%207%207M12%2019V5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-down) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M19%2012l-7%207-7-7%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-pin) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2017v5M9%2010.8a2%202%200%200%201-1.1%201.8l-1.8.9A2%202%200%200%200%205%2015.2V16a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-.8a2%202%200%200%200-1.1-1.8l-1.8-.9A2%202%200%200%201%2015%2010.8V7a1%201%200%200%201%201-1%202%202%200%200%200%200-4H8a2%202%200%200%200%200%204%201%201%200%200%201%201%201z%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-move) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%275%27%20r%3D%271.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2712%27%20r%3D%271.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2719%27%20r%3D%271.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%275%27%20r%3D%271.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2712%27%20r%3D%271.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2719%27%20r%3D%271.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-gold-bars-icon) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2.2%2021.2%203.7%2015.4h6.4l1.5%205.8zM12.4%2021.2l1.5-5.8h6.4l1.5%205.8zM7.3%2012.6l1.5-5.8h6.4l1.5%205.8z%27%20stroke-width%3D%271.3%27%20stroke-linejoin%3D%27miter%27%20stroke-miterlimit%3D%2710%27%2F%3E%3Cpath%20d%3D%27M19.6%201.4000000000000004C20.14%203.8600000000000003%2020.14%203.8600000000000003%2022.6%204.4C20.14%204.94%2020.14%204.94%2019.6%207.4C19.060000000000002%204.94%2019.060000000000002%204.94%2016.6%204.4C19.060000000000002%203.8600000000000003%2019.060000000000002%203.8600000000000003%2019.6%201.4000000000000004z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M4.4%204.2C4.796%206.0040000000000004%204.796%206.0040000000000004%206.6000000000000005%206.4C4.796%206.796%204.796%206.796%204.4%208.600000000000001C4.0040000000000004%206.796%204.0040000000000004%206.796%202.2%206.4C4.0040000000000004%206.0040000000000004%204.0040000000000004%206.0040000000000004%204.4%204.2z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-attention) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cdefs%3E%3Cmask%20id%3D%27m%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27white%27%2F%3E%3Cpath%20d%3D%27M12%208.8v4.8%27%20stroke%3D%27black%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717.7%27%20r%3D%271.5%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%27url(%23m)%27%20fill%3D%27black%27%3E%3Cpath%20d%3D%27M10.27%203.2a2%202%200%200%201%203.46%200l8.7%2015.1A2%202%200%200%201%2020.7%2021.3H3.3a2%202%200%200%201-1.73-3z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] :is(.icon-telegram, .icon-paper-plane) { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m22%202-7%2020-4-9-9-4zM22%202%2011%2013%27%2F%3E%3C%2Fsvg%3E"); }
/* their sizes by place: the rating stars and blocks (the filled row over the empty one, clipped to the score: the same box
   for both keeps them lined up), the small star by what you follow, the phone bar's star, the spinner turning on its centre */
html[data-theme^="new"] .score :is(.icon-star, .icon-star-empty)::before { width: 15px; height: 15px; margin: 0 2px 0 0; vertical-align: -2px; }
html[data-theme^="new"] .score .icon-blank::before { width: 12px; height: 12px; margin: 0 2px 0 0; vertical-align: -1px; }
html[data-theme^="new"] .followed_star::before { width: 11px; height: 11px; margin: 0 0 0 3px; vertical-align: 0; }
html[data-theme^="new"] #cssmenu .nl-fw-mstar .icon-star::before { width: 19px; height: 19px; margin: 0; }
html[data-theme^="new"] .icon-spin6::before { margin: 0; }
/* the Columns list (column_customizer, global.js): its 290px tables as wide as the window's box instead (288px there, so a
   scrollbar showed under them on every page) */
html[data-theme^="new"] #loginModal table.column_picker { width: 100% !important; }
html[data-theme^="new"] #loginModal .strip_arrow.strip_right { right: 0; } /* its groups' arrow: 6px past the edge, it scrolled the window sideways (Dividend Aristocrats) */
html[data-theme^="new"] #loginModal .strip_arrow.strip_left { left: 0; }
/* the Columns list's pin: outlined while the column scrolls, solid in the brand colour once it's pinned */
html[data-theme^="new"] .icon-pin.iconButton.active { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cpath%20d%3D%27M12%2017v5M9%2010.8a2%202%200%200%201-1.1%201.8l-1.8.9A2%202%200%200%200%205%2015.2V16a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-.8a2%202%200%200%200-1.1-1.8l-1.8-.9A2%202%200%200%201%2015%2010.8V7a1%201%200%200%201%201-1%202%202%200%200%200%200-4H8a2%202%200%200%200%200%204%201%201%200%200%201%201%201z%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); color: var(--hf-brand); }
/* the round signal badges (short squeeze signals, the financials' highlights): the bare symbol, centred in its circle */
html[data-theme^="new"] .si_sig_icon { display: inline-flex; align-items: center; justify-content: center; }
html[data-theme^="new"] .si_sig_icon::before { width: 13px; height: 13px; margin: 0; vertical-align: 0; }
/* the ! and i as bold text (a scaled mask blurred at this size), the tick a little bolder and 1px lower */
html[data-theme^="new"] .si_sig_icon:is(.icon-attention, .icon-info)::before { content: '!'; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; font: 700 18px/1 var(--nl-font); font-size: 18px !important; } /* Classic sets 12px !important */
html[data-theme^="new"] .si_sig_icon.icon-info::before { content: 'i'; }
html[data-theme^="new"] .si_sig_icon.icon-ok { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%273.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .si_sig_icon.icon-ok::before { position: relative; top: 1px; }
/* the financials' notes: a grey i on a circle that stands out from the card (the old one hardly showed, in both looks) */
html[data-theme^="new"] .fin_hl_info .si_sig_icon { background: var(--hf-border-strong); color: var(--hf-text-muted); }
html[data-theme^="new"] .tab.icon-down-dir { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.25%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m22%2017-8.5-8.5-5%205L2%207%27%2F%3E%3Cpath%20d%3D%27M16%2017h6v-6%27%2F%3E%3C%2Fsvg%3E"); } /* the stock page's Short Interest tab: a falling line, not a dropdown's chevron */
/* the search boxes: the plugin's stylesheet set Lato on them, which had the browser fetch it for the hint or the / key */
html[data-theme^="new"] .typeahead__container { font-family: var(--nl-font); }
/* sizes by place: table buttons, tabs, the small ⓘ/? in headers and labels, the arrows in table cells */
html[data-theme^="new"] .table_filter_button::before { width: 15px; height: 15px; }
html[data-theme^="new"] .tab::before { width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; }
html[data-theme^="new"] :is(.icon-info-circled, .icon-question-circle-o)::before { width: 14px; height: 14px; margin: 0 2px; vertical-align: -2px; }
html[data-theme^="new"] th :is(.icon-info-circled, .icon-question-circle-o)::before { width: 12px; height: 12px; margin: 0 0 0 3px; vertical-align: -1px; } /* fits beside a header without wrapping it */
html[data-theme^="new"] th :is(.icon-info-circled, .icon-question-circle-o) { vertical-align: baseline; } /* on the text's line: the reset's top put it at the top of the line box on iPhones */
html[data-theme^="new"] .cellContainer :is(.icon-up, .icon-down)::before { width: 13px; height: 13px; margin: 0 3px 0 0; vertical-align: -1px; }
html[data-theme^="new"] .customicon-sparkles::before { font-size: 16px !important; } /* Classic sets 18px !important for its emoji glyph */
/* the header's Share and Follow: 16px icons and the mockup's 36px buttons, on phones too (Classic shrinks button icons to 10px there) */
html[data-theme^="new"] .nl-actions .new_actionbtn { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 36px; box-sizing: border-box; padding: 0 14px; }
html[data-theme^="new"] .nl-actions .new_actionbtn i::before, html[data-theme^="new"] .nl-actions .new_actionbtn::before { width: 16px; height: 16px; margin-right: 6px; vertical-align: 0; }

/* ---------- Display settings (the gear by each table's buttons, and the footer link; newlook.js) ---------- */
html[data-theme^="new"] .nl-gear { padding: 4px 7px; vertical-align: middle; line-height: 0; }
html[data-theme^="new"] .nl-gear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html[data-theme^="new"] .nl-gear[aria-expanded="true"] { border-color: var(--hf-text-faint); background: var(--hf-surface-alt); }
html[data-theme^="new"] .nl-pop { position: fixed; z-index: 100001; width: 310px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px 14px 6px; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); color: var(--hf-text); box-shadow: var(--nl-shadow); font: 14px/1.4 var(--nl-font); text-align: left; }
html[data-theme^="new"] .nl-pop[hidden] { display: none; }
html[data-theme^="new"] .nl-pop h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hf-border); font-size: 13.5px; }
html[data-theme^="new"] .nl-opt small { display: block; color: var(--hf-text-muted); font-size: 12px; }
html[data-theme^="new"] .nl-seg { display: inline-flex; flex: none; border: 1px solid var(--hf-border-strong); border-radius: 6px; overflow: hidden; }
html[data-theme^="new"] .nl-seg button { height: 28px; padding: 0 10px; border: 0; background: var(--hf-surface); color: var(--hf-text-muted); font: 13px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-seg button + button { border-left: 1px solid var(--hf-border-strong); }
html[data-theme^="new"] .nl-seg button[aria-pressed="true"] { background: var(--hf-surface-sunken); color: var(--hf-text-strong); font-weight: 600; }

/* the Share menu (nl_share, desktop): Copy link, Post on X */
html[data-theme^="new"] .nl-menu { width: auto; min-width: 160px; padding: 6px; }
html[data-theme^="new"] .nl-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--hf-text-strong); font: 14px var(--nl-font); text-align: left; cursor: pointer; }
html[data-theme^="new"] .nl-menu button:hover, html[data-theme^="new"] .nl-menu button:focus-visible { background: var(--hf-surface-alt); }

/* Charts in rows: Hide. The cell keeps a dash; a row click still opens its price chart */
html[data-theme^="new"][data-rowcharts="hide"] .dataTable .nl-own-wrap, html[data-theme^="new"][data-rowcharts="hide"] .dataTable .ph-spark-cell, html[data-theme^="new"][data-rowcharts="hide"] .HF_tip[data-tipid="ph_chart_tip"] { display: none; }
html[data-theme^="new"][data-rowcharts="hide"] .dataTable td:has(> .nl-own-wrap)::after, html[data-theme^="new"][data-rowcharts="hide"] .dataTable td:has(> .ph-spark-cell)::after { content: '\2013'; color: var(--hf-text-faint); }

/* Density: Compact, on every page. Shorter rows, a tighter fund header and moves panel; tabs lose their icons (an
   icon-only tab keeps its), table buttons keep theirs */
html[data-theme^="new"][data-density="compact"] .dataTable td { height: 36px; }
html[data-theme^="new"][data-density="compact"] .dataTable .cellContainer { height: 36px; line-height: 36px; }
html[data-theme^="new"][data-density="compact"] .dataTable .fundName { line-height: 34px; }
html[data-theme^="new"][data-density="compact"] .dataTable .hedgeImage { width: 32px; height: 32px; }
html[data-theme^="new"][data-density="compact"] .dataTable .nl-stock { height: 36px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
html[data-theme^="new"][data-density="compact"] .dataTable .nl-stock > span { flex: none; }
html[data-theme^="new"][data-density="compact"] .dataTable .nl-co { min-width: 0; }
html[data-theme^="new"][data-density="compact"] .nl-own-wrap { height: 36px; }
html[data-theme^="new"][data-density="compact"] .nl-own-cell { height: 22px; gap: 2px; }
html[data-theme^="new"][data-density="compact"] .nl-own-cell i { width: 8px; }
html[data-theme^="new"][data-density="compact"] .dataTable .ph-spark-cell { height: 36px; }
html[data-theme^="new"][data-density="compact"] .dataTable .css-sparkline, html[data-theme^="new"][data-density="compact"] .dataTable .sparkline-svg { height: 26px; }
html[data-theme^="new"][data-density="compact"] .nl-head { margin: 8px 0 12px; }
html[data-theme^="new"][data-density="compact"] .nl-who .hedgeImageBigNew { width: 44px; height: 44px; }
html[data-theme^="new"][data-density="compact"] .nl-h1 { font-size: 22px; }
html[data-theme^="new"][data-density="compact"] .nl-sub { font-size: 14px; }
html[data-theme^="new"][data-density="compact"] .nl-stats > div { padding: 7px 12px; }
html[data-theme^="new"][data-density="compact"] .nl-stats dd { font-size: 17px; line-height: 22px; }
html[data-theme^="new"][data-density="compact"] .tab:not(:empty)::before { display: none; }
html[data-theme^="new"][data-density="compact"] .tab { padding-top: 7px; padding-bottom: 7px; }
html[data-theme^="new"][data-density="compact"] .nl-overview { gap: 12px; margin-bottom: 12px; }
html[data-theme^="new"][data-density="compact"] .nl-tm #topHolders { min-height: 220px; }
html[data-theme^="new"][data-density="compact"] .nl-moves { padding: 2px 12px; }
html[data-theme^="new"][data-density="compact"] .nl-move { padding: 6px 0; }
html[data-theme^="new"][data-density="compact"] .nl-move-h { margin-bottom: 4px; font-size: 13px; }
@media screen and (max-width: 640px) { html[data-theme^="new"][data-density="compact"] .nl-tm #topHolders { min-height: 280px; } } /* phones still need the height for tile numbers */

/* ---------- Motion: respect the device setting ---------- */
@media (prefers-reduced-motion: reduce) {
    html[data-theme^="new"] *, html[data-theme^="new"] *:before, html[data-theme^="new"] *:after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- The largest buys / sells and consensus lists (nl_list_* in newlook.js; Largest-Hedge-Fund-Buys,
   largest-insider-buys, largest-congress-stock-buys, consensus-stock-buys and stocks.php) ---------- */
/* each side's row: its Buys | Sells switch, then its filters (data-nl-inline: nl_filter_bar puts them between the two) */
html[data-theme^="new"] .nl-side-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 6px; }
html[data-theme^="new"] .nl-side-head > .nl-fbar { margin: 0; }
/* A list page's lists (Buys | Sells, the hedge fund lists, Most Traded | Volume Surge, Largest Stakes | Latest Trades): tabs,
   on a line of their own over the filters, as the stock page's are (an underline, not boxes). A two-way switch read as a
   filter on one list. The line under them is the row's inset shadow, so the selected tab's underline paints over it and no
   scroll box clips what hangs below. Buttons (nl_list_sides, the filter bar's data-nl-tabs radios) or links (the fund lists). */
html[data-theme^="new"] .nl-list-tabs { display: flex; flex: 0 0 100%; gap: 0; margin: 0 0 4px; padding: 0; box-shadow: inset 0 -2px 0 var(--hf-border); }
html[data-theme^="new"] .nl-list-tabs > :is(button, a) { flex: none; display: inline-flex; align-items: center; gap: 4px; height: auto; margin: 0; padding: 8px 17px 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    background: none; color: var(--hf-text-muted); font: 500 14px/20px var(--nl-font); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .nl-list-tabs > :is(button, a):first-child { padding-left: 2px; }
html[data-theme^="new"] .nl-list-tabs > :is(button, a):hover { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-list-tabs > :is([aria-selected="true"], [aria-current="page"]) { color: var(--hf-text-strong); font-weight: 600; border-bottom-color: var(--hf-brand); }
html[data-theme^="new"] .nl-list-tabs > :is(button, a):focus-visible { outline: 2px solid var(--hf-focus); outline-offset: -2px; }
/* the ETF pages' asset switcher (etf.php) stays a switch of links, as the fund lists' was */
html[data-theme^="new"] .nl-fseg.nl-fund-nav a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; background: var(--hf-surface); color: var(--hf-text-muted); font: 500 13px var(--nl-font); white-space: nowrap; text-decoration: none; }
html[data-theme^="new"] .nl-fseg.nl-fund-nav a + a { border-left: 1px solid var(--hf-border-strong); }
html[data-theme^="new"] .nl-fseg.nl-fund-nav a:hover { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-fseg.nl-fund-nav a[aria-current="page"] { background: var(--hf-surface-sunken); color: var(--hf-text-strong); font-weight: 600; }
html[data-theme^="new"] .nl-fseg.nl-fund-nav a:focus-visible { outline: 2px solid var(--hf-focus); outline-offset: -2px; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-fseg.nl-fund-nav a { flex: 1 0 auto; justify-content: center; padding: 0 10px; } /* links fill the switch as the buttons do */
}
@media screen and (max-width: 600px) {
    html[data-theme^="new"] .nl-list-tabs { gap: 0; }
    html[data-theme^="new"] .nl-list-tabs > :is(button, a) { flex: 1 1 auto; justify-content: center; padding: 8px 8px 9px; }
    html[data-theme^="new"] .nl-list-tabs > :is(button, a):first-child { padding-left: 8px; }
}
html[data-theme^="new"] .nl-side[hidden], html[data-theme^="new"] [data-nl-side][hidden] { display: none; }
/* rows grow with the buyers' table, so every cell starts at the top, the ticker level with the table's headings */
html[data-theme^="new"] .dataTable.nl-list-table td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; text-overflow: ellipsis; } /* a cell of text too long for it (a sector) ends in "…" */
/* as tall as the cells' content: Classic's 50px cell plus that padding made every row 69px around two lines (the insider
   tracker, Nov 2026); a buyers' table is taller than 50px anyway */
html[data-theme^="new"] .dataTable.nl-list-table td { height: auto; }
html[data-theme^="new"] .dataTable.nl-list-table .nl-stock { height: auto; }
html[data-theme^="new"] .dataTable.nl-list-table td.td_large { height: auto; }
html[data-theme^="new"] .dataTable.nl-list-table .cellContainer { height: auto; line-height: 1.35; } /* Classic's cells center one 50px line */ /* Classic's 75px rows for its wrapped top 3, kept by some extra columns */
html[data-theme^="new"] .nl-lv { font-weight: 600; color: var(--hf-text-strong); }
/* the 52-week range: green from the low to the price, red from there to the high (Classic's colors), a marker standing
   out of the bar at the price, the close over it */
html[data-theme^="new"] .nl-r52 { display: inline-grid; grid-template-columns: auto 58px auto; align-items: center; column-gap: 7px; font-size: 12px; line-height: 1.35; color: var(--hf-text-muted); }
/* today's price over the tick: in the bar's column, its middle where the tick is (left, nl_range52), free to run over the
   figures' columns on either side, which are empty on its line */
html[data-theme^="new"] .nl-r52-px { grid-area: 1 / 2; justify-self: start; position: relative; transform: translateX(-50%); white-space: nowrap; margin-bottom: 1px; font-size: 12.5px; color: var(--hf-text); }
html[data-theme^="new"] .nl-r52 > :not(.nl-r52-px) { grid-row: 2; } /* the low, the bar and the high on the line under it, in that order */
html[data-theme^="new"] .nl-r52-bar { position: relative; height: 8px; border-radius: 4px; background: var(--hf-neg, #c51a1a); }
html[data-theme^="new"] .nl-r52-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px 0 0 4px; background: var(--hf-pos, #33ae33); }
html[data-theme^="new"] .nl-r52-bar b { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--hf-text-strong); }
html[data-theme^="new"] .nl-r52-na { color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-fc { white-space: nowrap; } /* Median Breakeven (nl_fund_cost): the price and its % on one line */
/* Classic's range and split bars (formatYearRange, format_bvs in sf-load.js: the 52-week range in other tables, buys vs
   sells, funds in profit vs underwater) drawn as the lists' bar: 8px, the tick standing out at the price or the split */
html[data-theme^="new"] .range52OuterCont { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 0 auto; font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .range52OuterCont > :is(.yearMin, .yearMax) { float: none; margin: 0; }
html[data-theme^="new"] .range52Cont { position: relative; flex: none; float: none; width: 66px; height: 8px; margin: 0; border-radius: 4px; }
html[data-theme^="new"] .range52 { position: relative; height: 8px; border-radius: 4px 0 0 4px; }
html[data-theme^="new"] .range52 .slider { position: absolute; top: -4px; right: -1.5px; float: none; width: 3px; height: 16px; margin: 0; padding: 0; border-radius: 1px; background: var(--hf-text-strong); }
/* the largest buyers / sellers: a grid in the cell (nl_list_who), its columns aligned row to row */
html[data-theme^="new"] .nl-by { display: inline-block; text-align: left; white-space: normal; }
html[data-theme^="new"] .nl-by-g { display: grid; column-gap: 0; font-size: 12.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-by-r { display: contents; }
html[data-theme^="new"] .nl-by-r[hidden] { display: none; }
html[data-theme^="new"] .nl-by-r > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; padding: 1px 0; } /* the cells, not spans inside them (the party tag) */
html[data-theme^="new"] .nl-by-r > span:first-child, html[data-theme^="new"] .nl-by-r > span.nl-by-l { text-align: left; }
html[data-theme^="new"] .nl-by-r > span + span { padding-left: 12px; } /* the space between columns, inside the cells (nl_list_who) */
html[data-theme^="new"] .nl-by-h > span { padding: 0 0 3px; font: 500 11.5px var(--nl-font-table); color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-by-role { color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-dd-sum { margin: 0 0 5px; font-size: 13px; line-height: 1.35; color: var(--hf-text-muted); } /* Double Downs: the line over its funds (nl_dd_who) */
html[data-theme^="new"] .nl-dd-sum b { color: var(--hf-text-strong); font-weight: 600; }
html[data-theme^="new"] .nl-by-more { margin-top: 2px; font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-by-more:empty { display: none; }
html[data-theme^="new"] :is(.nl-by-next, .nl-by-fewer) { color: var(--hf-link); cursor: pointer; }
html[data-theme^="new"] :is(.nl-by-next, .nl-by-fewer):hover { text-decoration: underline; }
/* a mini table's line under the pointer (desktop): its cells tinted (they meet: the space between columns is their padding),
   the line's ends a little past the text */
html[data-theme^="new"] { --nl-mini-hover: color-mix(in srgb, var(--hf-accent) 14%, var(--hf-surface)); }
@media (hover: hover) {
    html[data-theme^="new"] .nl-by-r:not(.nl-by-h):hover > span { background: var(--nl-mini-hover); }
    html[data-theme^="new"] .nl-by-r:not(.nl-by-h):hover > span:first-child { box-shadow: -5px 0 0 var(--nl-mini-hover); border-radius: 3px 0 0 3px; }
    html[data-theme^="new"] .nl-by-r:not(.nl-by-h):hover > span:last-child { box-shadow: 5px 0 0 var(--nl-mini-hover); border-radius: 0 3px 3px 0; }
    html[data-theme^="new"] .nl-by-r:not(.nl-by-h):hover > span:only-child { box-shadow: -5px 0 0 var(--nl-mini-hover), 5px 0 0 var(--nl-mini-hover); border-radius: 3px; }
}
/* tables inside a table's cells (double downs' funds): the row hover above is the outer row's, and reached their cells too,
   each getting a border that made the whole mini table taller; their own lines are tinted as the grids' are */
html[data-theme^="new"] .dataTable tr:hover td table td { border-bottom: 0; background-color: transparent !important; }
@media (hover: hover) {
    html[data-theme^="new"] .dataTable td table tr:hover > td { background-color: var(--nl-mini-hover) !important; }
}
/* Congress members' party */
html[data-theme^="new"] .nl-party { display: inline-block; min-width: 15px; padding: 0 3px; border-radius: 3px; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; color: #fff; background: var(--hf-text-muted); }
html[data-theme^="new"] .nl-party-D { background: #3b6fd4; }
html[data-theme^="new"] .nl-party-R { background: #d43b3b; }

/* ---------- The hedge fund lists (nl_fund_* in newlook.js; top-hedge-funds, largest-hedge-funds, popular-hedge-funds) ---------- */
/* the three lists' switch: links to each page, drawn as the filters' segments, in the row with the menus */
html[data-theme^="new"] table.dataTable.nl-fund-list { width: 100% !important; } /* fills its box, as the other lists */
html[data-theme^="new"] .dataTable.nl-fund-list td { vertical-align: middle; }
/* the strips of tickers stand apart from the numbers before them */
html[data-theme^="new"] .dataTable.nl-fund-list :is(td.nl-fs-td, th[data-field="portSnapshot"], th[data-field="top_buys"], th[data-field="top_sells"]) { padding-left: 18px; }
/* the Fund cell: the photo, or the fund's initials, beside the fund and its manager */
html[data-theme^="new"] .nl-fl { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-theme^="new"] .dataTable .nl-fl .nl-fund { flex: 1 1 auto; height: 44px; }
html[data-theme^="new"] .dataTable .nl-fl-img { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border: 0; border-radius: 8px; text-decoration: none; }
html[data-theme^="new"] .nl-fl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-theme^="new"] .dataTable .nl-fl-ini { background: var(--hf-surface-sunken); box-shadow: inset 0 0 0 1px var(--hf-border-light); color: var(--hf-text-muted); font: 600 13px var(--nl-font); letter-spacing: .02em; }
/* 3-Year Return: the total over the yearly rate, the path beside them */
/* the line just after the numbers (their width kept, so the lines start level), the cell a link to the performance history */
html[data-theme^="new"] .nl-fret { display: flex; align-items: center; gap: 12px; border-bottom: 0; } /* no tooltip underline: the line invites the hover */
/* room from the column before (# of Holdings, right-aligned: its figure ran into the return), its header with it */
html[data-theme^="new"] .dataTable :is(td:has(.nl-fret), th[data-field="weighted3YPerfTop20"], th[data-field="3YPerfTop20"]) { padding-left: 18px; }
html[data-theme^="new"] .dataTable a.nl-fret { color: inherit; font-weight: inherit; text-decoration: none; }
html[data-theme^="new"] a.nl-fret:hover .nl-fspark polyline { stroke-width: 2.3; }
html[data-theme^="new"] .nl-fret-v { display: flex; flex-direction: column; min-width: 66px; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-fret-v b { font-size: 15px; font-weight: 600; }
html[data-theme^="new"] .nl-fret-v small { font-size: 12.5px; font-weight: 400; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-fret-yrs { margin-left: 5px; font-size: 11.5px; font-style: normal; color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-fspark { flex: none; overflow: visible; }
html[data-theme^="new"] .nl-fspark polyline { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
html[data-theme^="new"] .nl-fspark line { stroke: var(--hf-border-strong); stroke-width: 1; stroke-dasharray: 2 2; }
html[data-theme^="new"] .nl-fspark circle { fill: currentColor; }
/* its hover text (#tooltipImages, dark in both looks): the last 4 quarters as a small table */
html[data-theme^="new"] #tooltipImages .nl-tq { min-width: 176px; }
html[data-theme^="new"] #tooltipImages .nl-tq-cap, html[data-theme^="new"] #tooltipImages .nl-tq-foot { font-size: 12px; opacity: .75; }
html[data-theme^="new"] #tooltipImages .nl-tq table { width: 100%; margin: 4px 0 6px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] #tooltipImages .nl-tq :is(th, td) { padding: 2px 0; text-align: left; }
html[data-theme^="new"] #tooltipImages .nl-tq :is(th, td) + :is(th, td) { text-align: right; }
html[data-theme^="new"] #tooltipImages .nl-tq th { font-size: 11.5px; font-weight: 500; opacity: .75; }
html[data-theme^="new"] #tooltipImages .nl-tq td { border-top: 1px solid color-mix(in srgb, var(--hf-datatip-text) 16%, transparent); }
html[data-theme^="new"] #tooltipImages .nl-tq tr.nl-tq-now td { font-weight: 600; } /* the latest, listed last */
html[data-theme^="new"] #tooltipImages .nl-tq-up { color: color-mix(in srgb, var(--hf-pos) 60%, #fff); } /* the light look's green and red are too dark on it */
html[data-theme^="new"] #tooltipImages .nl-tq-down { color: color-mix(in srgb, var(--hf-neg) 60%, #fff); }
html[data-theme^="new"] #tooltipImages .nl-tq-foot, html[data-theme^="new"] #tooltipImages .nl-tq-link { display: block; margin-top: 4px; }
/* top holdings, buys and sells: five tickers in a row, each over its weight or its change */
html[data-theme^="new"] .nl-fs { display: grid; grid-template-columns: repeat(5, 58px); column-gap: 6px; }
html[data-theme^="new"] .dataTable .nl-fs-i { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; border: 0; text-decoration: none; }
html[data-theme^="new"] .nl-fs-i b { font-size: 13.5px; font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-fs-i:hover b { color: var(--hf-link); }
html[data-theme^="new"] .nl-fs-i small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; color: var(--hf-text-muted); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-fs-i small.nl-up { color: var(--hf-pos); }
html[data-theme^="new"] .nl-fs-i small.nl-down { color: var(--hf-neg); }
html[data-theme^="new"] .nl-fmoves { align-items: flex-end; } /* a right-aligned column */
html[data-theme^="new"] .nl-fmoves > span:first-child { gap: 4px; color: var(--hf-text-faint); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-fmoves b { font-weight: 600; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-fl { gap: 8px; }
    html[data-theme^="new"] .dataTable .nl-fl-img { width: 36px; height: 36px; }
}

/* ---------- Hot stocks (nl_hot_surge in newlook.js; hot-stocks.php) ---------- */
/* Volume Surge: the last 25 days' $ volume as bars (this week's in full color, green up and red down days), the usual as a
   dashed line, the multiple beside them */
html[data-theme^="new"] .nl-hv { display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-bottom: 0; }
html[data-theme^="new"] .nl-hv svg { flex: none; overflow: visible; }
html[data-theme^="new"] .nl-hv rect { opacity: .3; }
html[data-theme^="new"] .nl-hv rect.nl-hv-wk { opacity: 1; }
html[data-theme^="new"] .nl-hv .nl-hv-up { fill: var(--hf-pos); }
html[data-theme^="new"] .nl-hv .nl-hv-dn { fill: var(--hf-neg); }
html[data-theme^="new"] .nl-hv line { stroke: var(--hf-text-muted); stroke-width: 1; stroke-dasharray: 3 2; }
html[data-theme^="new"] .nl-hv b { min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
/* the tag: Low and Normal quiet, then amber to deep orange as the trading runs further above usual (not green or red,
   which the bars use for the price) */
html[data-theme^="new"] .nl-hv-tag { display: inline-block; min-width: 66px; padding: 2px 6px; border-radius: 10px; font: 600 11.5px/1.3 var(--nl-font); text-align: center; white-space: nowrap; color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-hv-1 { box-shadow: inset 0 0 0 1px var(--hf-border); }
html[data-theme^="new"] .nl-hv-2 { background: var(--hf-surface-sunken); color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-hv-3 { background: color-mix(in srgb, var(--hf-brand) 32%, var(--hf-surface)); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-hv-4 { background: #f08c00; color: #fff; }
html[data-theme^="new"] .nl-hv-5 { background: #d9480f; color: #fff; }
/* the ranking: Most Traded | Volume Surge; the period is Most Traded's only */
html[data-theme^="new"] .nl-side-head:has(.nl-list-tabs button[data-v="rel_volume"][aria-selected="true"]) .nl-finline:has(.nl-fsel-volume_period) { display: none; }
/* Volume Surge for a free visitor (nl_hot_loaded): made-up rows, blurred, under the first stock, and the way to unlock
   them; it stays in view when the table scrolls sideways */
html[data-theme^="new"] .nl-hot-lock { position: sticky; left: 0; width: 100%; }
html[data-theme^="new"] .nl-hot-locked > .pagination { display: none; } /* "1 - 1 of 100" and Next: the locked rows say it */
html[data-theme^="new"] .nl-hot-lock-rows { overflow: hidden; filter: blur(5px); opacity: .7; pointer-events: none; user-select: none; }
html[data-theme^="new"] .nl-hot-lock-row { display: grid; grid-template-columns: 136px 156px repeat(4, 90px); align-items: center; gap: 16px; height: 54px; padding: 0 8px; border-bottom: 1px solid var(--hf-border); }
html[data-theme^="new"] .nl-hot-lock-row b { display: block; height: 13px; border-radius: 4px; background: var(--hf-text-faint); } /* a ticker's place: a bar, no letters (nl_hot_loaded, nl_sc_loaded, nl_act_loaded) */
html[data-theme^="new"] .nl-hot-lock-row i { display: block; width: 70%; height: 9px; margin-top: 5px; border-radius: 5px; background: var(--hf-border-strong); }
html[data-theme^="new"] .nl-hot-lock-row > i { margin-top: 0; }
html[data-theme^="new"] .nl-hot-lock-cta { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px); padding: 16px 20px; transform: translate(-50%, -50%); border: 1px solid var(--hf-border-strong); border-radius: 10px; background: var(--hf-surface); box-shadow: var(--nl-shadow); }
html[data-theme^="new"] .nl-hot-lock-cta > i { font-size: 22px; color: var(--hf-brand); }
html[data-theme^="new"] .nl-hot-lock-cta b { display: block; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-hot-lock-cta span { display: block; margin-top: 2px; font-size: 13px; color: var(--hf-text-muted); }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-hot-lock-cta { flex-wrap: wrap; justify-content: center; text-align: center; }
}

/* ---------- Insider sentiment (insider-sentiment.php, its own styles in the page): the chart and the sector table on
   cards, as the tiles beside the chart are, rather than straight on the page's ground ---------- */
html[data-theme^="new"] .isent_chart { box-sizing: border-box; height: 300px; padding: 12px 14px 8px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
/* the tiles fill the chart's height, two rows (the page's margins lined them up with the drawn area of a bare chart) */
html[data-theme^="new"] .isent_tiles { margin: 0; }
@media (max-width: 900px) { html[data-theme^="new"] .isent_tiles { margin: 0 0 20px; } }
html[data-theme^="new"] .isent_scroll { margin-bottom: 26px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
html[data-theme^="new"] .isent_table th { background: var(--hf-table-head-bg); color: var(--hf-text-strong); border-bottom: 1px solid var(--hf-border); }
html[data-theme^="new"] .isent_table td { border-bottom: 1px solid var(--hf-border); }
html[data-theme^="new"] .isent_table tr:last-child td, html[data-theme^="new"] .isent_table td.isent_locked { border-bottom: 0; }
html[data-theme^="new"] .isent_table tr:hover td:not(.isent_locked) { background: var(--hf-row-hover); }
html[data-theme^="new"] .isent_table tr.isent_sel:hover td { background: var(--hf-accent-bg); }
/* ---------- Dividend aristocrats (nl_div_* in newlook.js; dividend-aristocrats.php) ---------- */
/* 10-Year Dividends: a bar a year, the current yearly rate last in the accent */
html[data-theme^="new"] .nl-dh { display: inline-flex; vertical-align: middle; border-bottom: 0; }
html[data-theme^="new"] .nl-dh svg { overflow: visible; }
html[data-theme^="new"] .nl-dh rect { fill: var(--hf-accent); opacity: .4; }
html[data-theme^="new"] .nl-dh rect.nl-dh-now { fill: var(--hf-brand); opacity: 1; }
html[data-theme^="new"] .nl-ins-cell.nl-dright { align-items: flex-end; border-bottom: 0; } /* right-aligned columns */
html[data-theme^="new"] .nl-dright b { font-weight: 600; }
/* the insider and short interest lists' figures (nl_list_two, left-aligned): semibold, and a detail's tooltip underlined
   under its words only, not across the column */
html[data-theme^="new"] .nl-list-two b { font-weight: 600; }
html[data-theme^="new"] .nl-list-two > .nl-ins-sub.hasTooltip { width: fit-content; max-width: 100%; }
html[data-theme^="new"] #dividend_aristocrats :is(td.nl-gap-l, th[data-field="sector"]) { padding-left: 20px; } /* off the right-aligned dates before it */

/* a fund's Filing Diagnostics tab (fundDev.php's own styles): the opening box a card set off by the accent, where its pale blue all
   but matched the page; the button's words the theme's own for the accent (white on the dark theme's pale blue was faint) */
html[data-theme^="new"] .hf-errors-container { font-family: var(--nl-font); }
html[data-theme^="new"] .hf-errors-container .hf-hero { padding: 14px 20px; border: 1px solid var(--hf-border); border-left: 4px solid var(--hf-accent); background: var(--hf-surface); }
html[data-theme^="new"] .hf-errors-container .hf-hero p { color: var(--hf-text); }
html[data-theme^="new"] .hf-cta button { color: var(--hf-on-accent); font-family: var(--nl-font); font-weight: 600; }
html[data-theme^="new"] .hf-cta button:hover { background: color-mix(in srgb, var(--hf-accent) 85%, var(--hf-text-strong)); }

/* ---------- ETF pages (nl_etf_* in newlook.js; etf.php) ---------- */
/* the asset switcher: a switch per kind (Crypto, Commodities, Stock Markets, Bonds), named, wrapping; one row of 17 ran
   past the page. Phones: each kind on its own line, its switch scrolling sideways */
html[data-theme^="new"] .nl-etf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; flex: 1 1 100%; }
html[data-theme^="new"] .nl-etf-all { font-size: 13.5px; font-weight: 500; }
html[data-theme^="new"] .nl-etf-grp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
html[data-theme^="new"] .nl-etf-grp-name { font-size: 12.5px; color: var(--hf-text-muted); white-space: nowrap; }
/* Compare All Assets (the /etf page): a tile beside the switches on a computer, as tall as their three lines; a button under them on a phone */
html[data-theme^="new"] .nl-side-head:has(> .nl-etf-allbox) { flex-wrap: nowrap; align-items: stretch; }
html[data-theme^="new"] .nl-side-head:has(> .nl-etf-allbox) > .nl-etf-nav { flex: 1 1 auto; align-content: center; }
html[data-theme^="new"] a.nl-etf-allbox { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 200px; box-sizing: border-box; padding: 12px 16px;
    border: 1px solid var(--hf-border); border-radius: 12px; background: var(--hf-surface); color: var(--hf-text-strong); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
html[data-theme^="new"] a.nl-etf-allbox:hover { border-color: var(--hf-accent); box-shadow: var(--nl-shadow); text-decoration: none; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-etf-allbox b { font: 600 16px/1.25 var(--nl-font); }
html[data-theme^="new"] .nl-etf-allbox small { font-size: 12.5px; line-height: 1.35; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-etf-allico { width: 22px; height: 22px; margin-bottom: 4px; background: var(--hf-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%273%27%20y%3D%273%27%20rx%3D%271%27%2F%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%2714%27%20y%3D%273%27%20rx%3D%271%27%2F%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%2714%27%20y%3D%2714%27%20rx%3D%271%27%2F%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%273%27%20y%3D%2714%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%273%27%20y%3D%273%27%20rx%3D%271%27%2F%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%2714%27%20y%3D%273%27%20rx%3D%271%27%2F%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%2714%27%20y%3D%2714%27%20rx%3D%271%27%2F%3E%3Crect%20width%3D%277%27%20height%3D%277%27%20x%3D%273%27%20y%3D%2714%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-side-head:has(> .nl-etf-allbox) { flex-direction: column; }
    html[data-theme^="new"] a.nl-etf-allbox { flex-direction: row; align-items: center; gap: 10px; width: auto; padding: 10px 14px; }
    html[data-theme^="new"] .nl-etf-allbox small { display: none; }
    html[data-theme^="new"] .nl-etf-allico { margin: 0; }
}
@media screen and (max-width: 640px) {
    html[data-theme^="new"] .nl-etf-nav { gap: 8px; }
    html[data-theme^="new"] .nl-etf-grp { display: grid; grid-template-columns: 96px minmax(0, 1fr); flex: 1 1 100%; }
    html[data-theme^="new"] .nl-etf-grp > .nl-fseg { justify-self: start; max-width: 100%; }
}
html[data-theme^="new"] .nl-etf-share { display: flex; align-items: center; gap: 8px; }
html[data-theme^="new"] .nl-etf-share > span { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--hf-surface-sunken); overflow: hidden; }
html[data-theme^="new"] .nl-etf-share i { display: block; height: 100%; border-radius: 4px; background: var(--hf-accent); }
html[data-theme^="new"] .nl-etf-share b { flex: none; min-width: 40px; text-align: right; font-weight: 600; color: var(--hf-text-strong); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .dataTable .nl-etf-tk { font-weight: 600; }
html[data-theme^="new"] .nl-etf-more { font-size: 12.5px; color: var(--hf-text-muted); white-space: nowrap; } /* the rest of the institution's ETFs, listed in its tooltip */
html[data-theme^="new"] .nl-etf-tabs { margin-top: 18px; }
/* the ETF page's tables: no box of their own on a wide screen, so their headers stay in view under the bar (46px) as the
   page scrolls and no scrollbar sits over the last column; narrower, where the columns don't fit, a box no taller than it
   needs, its header held at its top */
html[data-theme^="new"] .nl-etf-scroll { height: auto; max-height: 75vh; overflow: auto; }
html[data-theme^="new"] .nl-etf-scroll > .dataTable :is(th, td) { padding-right: 10px; } /* the last column's figures off the table's edge */
@media (min-width: 1100px) {
    html[data-theme^="new"] .nl-etf-scroll { max-height: none; overflow: clip visible; }
    html[data-theme^="new"] .nl-etf-scroll > table.dataTable > thead { top: 45px; transition: top .2s ease; }
    html[data-theme^="new"].nl-bar-up .nl-etf-scroll > table.dataTable > thead { top: -1px; } /* the bar slid away on the way down (hasScrolled(), global.js) */
}
/* Value Held's "of" the ETF's size; Dollars Bought / Sold's bar (nl_etf_held, nl_etf_dollars) */
html[data-theme^="new"] .nl-etf-of { font-size: 12.5px; font-weight: 400; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-etf-split { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 3px; font-size: 12.5px; white-space: nowrap; border-bottom: 0; }
html[data-theme^="new"] .nl-dright .nl-etf-split b { font-weight: 500; }
html[data-theme^="new"] .nl-etf-bar { position: relative; flex: none; width: 60px; height: 6px; border-radius: 3px; background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-etf-bar i { position: absolute; top: 0; bottom: 0; min-width: 2px; } /* a net of 1% still shows its side */
html[data-theme^="new"] .nl-etf-bar i.pos { left: 50%; border-radius: 0 3px 3px 0; background: var(--hf-pos); }
html[data-theme^="new"] .nl-etf-bar i.neg { right: 50%; border-radius: 3px 0 0 3px; background: var(--hf-neg); }
html[data-theme^="new"] .nl-etf-bar::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--hf-text-muted); }
/* the Trends tab's two charts (nl_etf_trends): cards of the stock page's chart tabs (#tabBuyersSellers), the switch beside
   each heading, a line on what the view counts under it */
html[data-theme^="new"] .nl-etf-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
html[data-theme^="new"] .nl-etf-chart-head h2 { margin: 0; }
html[data-theme^="new"] .nl-etf-chart-note { min-height: 4.35em; margin: 6px 0 10px; font-size: 13px; line-height: 1.45; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-etf-chart-box { position: relative; }
html[data-theme^="new"] #tabBuyersSellers > .etfhub_unlock { margin: 0; }
/* off the right-aligned or centered column before them: Share of Total's bar, ETFs Held's tickers */
html[data-theme^="new"] #etf_members :is(td.nl-gap-l, th[data-field="held_share"]), html[data-theme^="new"] #etf_holders :is(td.nl-gap-l, th[data-field="etfs"]) { padding-left: 20px; }

/* ---------- The portfolio tool (portfolio-builderDev.php, nl_pt_* and nl_bal_* in newlook.js): two steps side by side,
   then the result's summary and table ---------- */
html[data-theme^="new"] .nl-pt-intro { max-width: 760px; margin: 0 0 12px; line-height: 1.55; }
html[data-theme^="new"] .nl-pt-switch { margin: 2px 0 16px; }
html[data-theme^="new"] .nl-pt-switch button { height: 34px; padding: 0 16px; font-size: 14px; }
html[data-theme^="new"] .nl-pt-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; margin-bottom: 18px; }
@media (max-width: 900px) { html[data-theme^="new"] .nl-pt-steps { grid-template-columns: minmax(0, 1fr); } }
html[data-theme^="new"] .nl-pt-card { min-width: 0; padding: 16px 18px 18px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; }
html[data-theme^="new"] .nl-pt-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 16px/1.3 var(--nl-font); color: var(--hf-text-strong); }
/* the step's number: the two cards are done in order */
html[data-theme^="new"] .nl-pt-h span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--hf-text-strong); color: var(--hf-surface); font-size: 13px; }
html[data-theme^="new"] .nl-pt-search { margin: 0 0 12px; }
html[data-theme^="new"] .nl-pt-search .typeahead__container { max-width: 420px; }
html[data-theme^="new"] .nl-pt-quick, html[data-theme^="new"] .nl-pt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html[data-theme^="new"] .nl-pt-quick { margin: 0 0 14px; font-size: 13.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pt-quick select { max-width: 100%; }
html[data-theme^="new"] .nl-pt-tool select { height: 30px; padding: 0 6px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 14px var(--nl-font); max-width: 100%; }
html[data-theme^="new"] .nl-pt-form .nl-pt-row { margin-top: 2px; }
html[data-theme^="new"] .nl-pt-form .nl-pt-row > label, html[data-theme^="new"] .nl-pt-sub label { color: var(--hf-text-strong); font-weight: 500; }
html[data-theme^="new"] .nl-pt-sub { display: inline-flex; align-items: center; gap: 8px; }
html[data-theme^="new"] .nl-pt-sub[hidden] { display: none; }
/* the chosen strategy's description, where Classic had a tooltip by each choice */
html[data-theme^="new"] .nl-pt-desc { margin: 6px 0 14px; font-size: 13px; line-height: 1.5; color: var(--hf-text-muted); max-width: 620px; }
html[data-theme^="new"] .nl-pt-desc:empty { display: none; }
/* the fund weight boxes: only once the funds have weights of their own (use_equal_weights() enables them) */
html[data-theme^="new"] .nl-pt-fw { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 13.5px; }
html[data-theme^="new"] .nl-pt-fw:not(:has(input[type="checkbox"]:enabled)) { display: none; }
html[data-theme^="new"] .nl-pt-go { height: 36px; margin-top: 4px; padding: 0 18px; border: 1px solid var(--hf-accent); border-radius: 6px; background: var(--hf-surface); color: var(--hf-accent); font: 600 14px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-pt-go:hover { background: var(--hf-accent-bg); }
html[data-theme^="new"] .nl-pt-go:disabled { opacity: .5; cursor: default; }
html[data-theme^="new"] .nl-pt-listhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin: 0 0 8px; font-size: 13.5px; }
html[data-theme^="new"] .nl-pt-count { color: var(--hf-text-muted); font-size: 13px; }
html[data-theme^="new"] .nl-pt-funds { max-height: 420px; overflow: auto; }
html[data-theme^="new"] #funds_selected td { height: auto; padding-top: 6px; padding-bottom: 6px; }
html[data-theme^="new"] #funds_selected .screener_slidercells .fund_weight_slider { margin-top: 0 !important; }
/* the fund weights (shown once "Weigh all funds equally" is unticked): centred in the row, not at its top under Classic's
   65px baseline cell, with each value as small text over its handle, as the screener's, so the first row's isn't cut off */
html[data-theme^="new"] #funds_selected td.screener_slidercells { height: auto !important; vertical-align: middle !important; padding-top: 16px; }
html[data-theme^="new"] #funds_selected .noUi-tooltip { bottom: 100%; margin-bottom: 1px; padding: 0; border: 0; background: none; color: var(--hf-text-strong); font: 600 11.5px/1.2 var(--nl-font); white-space: nowrap; }
html[data-theme^="new"] .nl-pt-x { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--hf-text-faint); cursor: pointer; }
html[data-theme^="new"] .nl-pt-x:hover { color: var(--hf-neg); background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-pt-paste-l { display: block; margin: 0 0 6px; font-size: 13.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pt-paste { box-sizing: border-box; width: 100%; max-width: 420px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 14px/1.4 var(--nl-font-data); resize: vertical; }
html[data-theme^="new"] .nl-pt-file { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px dashed var(--hf-border-strong); border-radius: 6px; font-size: 13px; color: var(--hf-text-muted); cursor: pointer; }
html[data-theme^="new"] .nl-pt-file:hover { color: var(--hf-text-strong); border-color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-pt-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
html[data-theme^="new"] .nl-pt-file:has(input:focus-visible) { outline: 2px solid var(--hf-focus); outline-offset: 1px; } /* the keyboard's, not a click's */
html[data-theme^="new"] .nl-pt-ta-sym { display: inline-block; min-width: 60px; font-weight: 600; }
/* the result: a line of facts, the sectors, what to do next */
html[data-theme^="new"] .nl-pt-summary { margin: 0 0 12px; padding: 14px 16px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; }
html[data-theme^="new"] .nl-pt-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 14.5px; color: var(--hf-text); }
html[data-theme^="new"] .nl-pt-facts b { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-pt-facts b.nl-up { color: var(--hf-pos); }
html[data-theme^="new"] .nl-pt-facts b.nl-down { color: var(--hf-neg); }
html[data-theme^="new"] .nl-pt-facts > i { width: 1px; height: 14px; background: var(--hf-border-strong); }
html[data-theme^="new"] .nl-pt-none { margin: 8px 0 0; font-size: 13px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pt-sec { margin: 12px 0 0; }
html[data-theme^="new"] .nl-pt-secbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-pt-secbar i { display: block; height: 100%; }
html[data-theme^="new"] .nl-pt-secbar i + i { box-shadow: inset 1px 0 var(--hf-surface); }
html[data-theme^="new"] .nl-pt-seckey { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pt-seckey span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html[data-theme^="new"] .nl-pt-seckey i { width: 9px; height: 9px; border-radius: 2px; }
html[data-theme^="new"] .nl-pt-seckey b { color: var(--hf-text-strong); font-weight: 600; }
html[data-theme^="new"] { --nl-pt-s0: #1d5fb8; --nl-pt-s1: #2a9d8f; --nl-pt-s2: #e0a100; --nl-pt-s3: #7b5cc4; --nl-pt-s4: #d0614b; --nl-pt-s5: #5f8f2f; --nl-pt-s6: #9aa3ad; }
html[data-theme="new-dark"] { --nl-pt-s0: #5b9bf0; --nl-pt-s1: #4cc2b2; --nl-pt-s2: #f2bd3a; --nl-pt-s3: #a58cf0; --nl-pt-s4: #ec8a76; --nl-pt-s5: #8fbd5a; --nl-pt-s6: #6c7682; }
@media (prefers-color-scheme: dark) { html[data-theme="new"] { --nl-pt-s0: #5b9bf0; --nl-pt-s1: #4cc2b2; --nl-pt-s2: #f2bd3a; --nl-pt-s3: #a58cf0; --nl-pt-s4: #ec8a76; --nl-pt-s5: #8fbd5a; --nl-pt-s6: #6c7682; } }
html[data-theme^="new"] .nl-pt-s0 { background: var(--nl-pt-s0); } html[data-theme^="new"] .nl-pt-s1 { background: var(--nl-pt-s1); }
html[data-theme^="new"] .nl-pt-s2 { background: var(--nl-pt-s2); } html[data-theme^="new"] .nl-pt-s3 { background: var(--nl-pt-s3); }
html[data-theme^="new"] .nl-pt-s4 { background: var(--nl-pt-s4); } html[data-theme^="new"] .nl-pt-s5 { background: var(--nl-pt-s5); }
html[data-theme^="new"] .nl-pt-s6 { background: var(--nl-pt-s6); }
html[data-theme^="new"] .nl-pt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* the table: a weight bar, the weights on one scale, what you hold */
html[data-theme^="new"] .nl-pt-w { display: flex; align-items: center; gap: 8px; }
html[data-theme^="new"] .nl-pt-w > span { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--hf-surface-sunken); overflow: hidden; }
html[data-theme^="new"] .nl-pt-w i { display: block; height: 100%; border-radius: 4px; background: var(--hf-accent); }
html[data-theme^="new"] .nl-pt-w b { flex: none; min-width: 48px; text-align: right; font-weight: 600; color: var(--hf-text-strong); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-pt-hold { font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-pt-rng { position: relative; height: 22px; margin: 0 6px; }
html[data-theme^="new"] .nl-pt-rng::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 1px; background: var(--hf-border-strong); }
html[data-theme^="new"] .nl-pt-rng b { position: absolute; top: 3px; width: 3px; height: 16px; margin-left: -1px; border-radius: 1px; }
html[data-theme^="new"] .nl-pt-rng b.nl-pt-rng-you { top: 0; width: 4px; height: 22px; margin-left: -2px; background: var(--hf-text-strong); z-index: 1; }
html[data-theme^="new"] .nl-bal-in { box-sizing: border-box; width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 14px var(--nl-font-data); text-align: right; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] :is(#port_builder, #nl_bal_table) :is(td.nl-gap-l, th[data-field="sector"]) { padding-left: 20px; } /* off the right-aligned figures before it */
@media (max-width: 600px) { html[data-theme^="new"] .nl-pt-facts > i { display: none; } } /* a divider would end a wrapped line */
html[data-theme^="new"] .nl-pt-more { border-bottom: 1px dashed var(--hf-text-faint); cursor: help; } /* the rest of a trade list, in its tooltip */
/* ---------- The stock screener (stock-screenerDev.php, nl_sc_* in newlook.js): ideas, the filters by section, the chips of
   what's set, then the results ---------- */
html[data-theme^="new"] .nl-sc-intro { max-width: 760px; margin: 0 0 14px; line-height: 1.55; }
html[data-theme^="new"] .nl-sc-ideas { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-theme^="new"] .nl-sc-idea { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--hf-border-strong); border-radius: 17px; background: var(--hf-surface); color: var(--hf-text-strong); font: 500 13.5px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-sc-idea:hover { border-color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-sc-idea[aria-pressed="true"] { border-color: var(--hf-accent); background: var(--hf-accent-bg); font-weight: 600; }
html[data-theme^="new"] .nl-sc-idea .premium_sup { position: relative; top: -4px; margin-left: 2px; font-size: 11px; line-height: 0; }
html[data-theme^="new"] .nl-sc-idea-desc { max-width: 760px; margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-sc-form { margin-top: 16px; }
html[data-theme^="new"] .nl-sc-card { padding: 12px 16px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; }
html[data-theme^="new"] .nl-sc-who { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 13.5px; }
html[data-theme^="new"] .nl-sc-who > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html[data-theme^="new"] .nl-sc-who label { color: var(--hf-text-strong); font-weight: 500; }
html[data-theme^="new"] .nl-sc select { height: 30px; padding: 0 6px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 14px var(--nl-font); max-width: 100%; }
html[data-theme^="new"] .nl-sc-tabs { margin-top: 12px; }
/* how many filters a section (or an insider period) has set */
html[data-theme^="new"] .nl-sc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--hf-accent); color: var(--hf-surface); font: 600 11.5px var(--nl-font); vertical-align: 1px; }
html[data-theme^="new"] .nl-sc-n:empty { display: none; }
html[data-theme^="new"] .nl-sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px 22px; margin-top: 10px; }
html[data-theme^="new"] .nl-sc-group { min-width: 0; }
html[data-theme^="new"] .nl-sc-gh { margin: 6px 0 0; font: 600 13px var(--nl-font); color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-sc-group table.dataTable { border: 0; background: none; font-size: 13px; }
html[data-theme^="new"] .nl-sc-group table.dataTable td { border-bottom: 1px solid var(--hf-border-light); background: none; }
html[data-theme^="new"] .nl-sc-group table.dataTable tr:last-child td { border-bottom: 0; }
html[data-theme^="new"] .nl-sc-periods { margin-top: 10px; }
html[data-theme^="new"] .nl-sc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 12px; }
html[data-theme^="new"] .nl-sc-count { font-size: 15px; color: var(--hf-text); }
html[data-theme^="new"] .nl-sc-count b { color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-sc-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 300px; }
html[data-theme^="new"] .nl-sc-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 3px 0 11px; border: 1px solid var(--hf-accent); border-radius: 14px; background: var(--hf-accent-bg); color: var(--hf-text); font-size: 13px; white-space: nowrap; }
html[data-theme^="new"] .nl-sc-chip b { color: var(--hf-text-strong); font-weight: 600; }
html[data-theme^="new"] .nl-sc-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--hf-text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
html[data-theme^="new"] .nl-sc-chip button:hover { background: var(--hf-border); color: var(--hf-text-strong); }
html[data-theme^="new"] #stock_screener :is(td.nl-gap-l, th:is([data-field="sector"], [data-field="short_date"], [data-field="fin_period"])) { padding-left: 20px; } /* off the right-aligned figures before them */
html[data-theme^="new"] .nl-sc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--hf-text-strong); font: 600 15px var(--nl-font); cursor: pointer; text-align: left; }
html[data-theme^="new"] .nl-sc-head i { color: var(--hf-text-muted); transition: transform .15s; }
html[data-theme^="new"] .nl-sc-head[aria-expanded="true"] i { transform: rotate(180deg); }
html[data-theme^="new"] .nl-sc-head:focus-visible { outline: 2px solid var(--hf-focus); outline-offset: 2px; border-radius: 4px; }
html[data-theme^="new"] .nl-sc-body { margin-top: 12px; }
html[data-theme^="new"] .nl-sc-body.nl-sc-closed { height: 0; margin: 0; overflow: hidden; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { html[data-theme^="new"] .nl-sc-head i { transition: none; } }
/* the saved screens, under the ideas; the actions beside the chips */
html[data-theme^="new"] .nl-sc-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
html[data-theme^="new"] .nl-sc-mine[hidden] { display: none; }
html[data-theme^="new"] .nl-sc-mine-l { font: 600 13px var(--nl-font); color: var(--hf-text-muted); margin-right: 2px; }
html[data-theme^="new"] .nl-sc-mine-list { display: contents; }
html[data-theme^="new"] .nl-sc-saved { display: inline-flex; align-items: center; }
html[data-theme^="new"] .nl-sc-saved .nl-sc-idea { border-radius: 17px 0 0 17px; border-right: 0; }
html[data-theme^="new"] .nl-sc-del { height: 34px; width: 30px; padding: 0 8px 0 4px; border: 1px solid var(--hf-border-strong); border-left: 0; border-radius: 0 17px 17px 0; background: var(--hf-surface); color: var(--hf-text-muted); font-size: 15px; cursor: pointer; }
html[data-theme^="new"] .nl-sc-saved .nl-sc-idea[aria-pressed="true"] + .nl-sc-del { border-color: var(--hf-accent); background: var(--hf-accent-bg); }
html[data-theme^="new"] .nl-sc-del:hover { color: var(--hf-neg); }
html[data-theme^="new"] .nl-sc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
html[data-theme^="new"] .nl-sc-acts button:disabled { opacity: .5; cursor: default; }
html[data-theme^="new"] .nl-sc-saveform { display: inline-flex; align-items: center; gap: 6px; }
html[data-theme^="new"] .nl-sc-saveform[hidden], html[data-theme^="new"] .nl-sc-acts [hidden] { display: none; }
html[data-theme^="new"] .nl-sc-saveform input { height: 28px; width: 190px; padding: 0 8px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 13.5px var(--nl-font); }
html[data-theme^="new"] .nl-sc-note { margin: 4px 0 6px; font-size: 12.5px; color: var(--hf-text-muted); }
/* the sliders: a thin track ending under the handles (a margin, not padding: padding on the slider drew the track past
   them), round handles, each handle's value as small text over it. Grey until a filter is set, then colored by what it
   means: green for buys, red for sells, green and red either side for a buys vs sells, blue for the rest. The table is
   let out of the clip the new look puts on tables, so the first row's values show. */
html[data-theme^="new"] .nl-sc-group table.dataTable { overflow: visible; }
html[data-theme^="new"] .nl-sc-group td { padding: 16px 8px 9px; vertical-align: top; }
html[data-theme^="new"] .nl-sc-group td:first-child { padding-top: 11px; white-space: normal; line-height: 1.3; } /* the name level with the track; a long one wraps */
html[data-theme^="new"] .nl-sc .slider_obj { height: 4px !important; margin: 0 9px !important; padding: 0 !important; }
html[data-theme^="new"] .nl-sc .noUi-target { height: 4px; border: 0; border-radius: 2px; background: var(--hf-surface-sunken); box-shadow: none; }
html[data-theme^="new"] .nl-sc .noUi-connects { width: 100%; margin: 0; border-radius: 2px; } /* not Classic's 16px past each end */
html[data-theme^="new"] .nl-sc .noUi-handle { top: -7px; right: -9px; width: 18px; height: 18px; border: 2px solid var(--nl-sc-c, var(--hf-accent)); border-radius: 50%; background: var(--hf-surface); box-shadow: none; cursor: grab; }
html[data-theme^="new"] .nl-sc .noUi-handle::before, html[data-theme^="new"] .nl-sc .noUi-handle::after { display: none; }
html[data-theme^="new"] .nl-sc .noUi-handle:focus-visible { outline: 2px solid var(--hf-focus); outline-offset: 2px; }
html[data-theme^="new"] .nl-sc .noUi-tooltip { bottom: 100%; margin-bottom: 1px; padding: 0; border: 0; background: none; color: var(--nl-sc-c, var(--hf-accent)); font: 600 11.5px/1.2 var(--nl-font); white-space: nowrap; }
html[data-theme^="new"] .nl-sc .noUi-tooltip * { color: inherit !important; }
html[data-theme^="new"] .nl-sc .noUi-pips { height: 0; padding: 0; color: var(--hf-text-faint); font-size: 11px; line-height: 1.2; }
html[data-theme^="new"] .nl-sc .noUi-marker { top: 3px; height: 7px !important; background: var(--hf-border-strong); } /* its foot shows under a handle */
html[data-theme^="new"] .nl-sc .noUi-value { top: 12px; transform: translateX(-50%); }
html[data-theme^="new"] .nl-sc-group td.nl-sc-pips { padding-bottom: 28px; }
/* the colors: --nl-sc-c for the handles and their values, the connects (the range set) by kind */
html[data-theme^="new"] .nl-sc .slider_obj { --nl-sc-c: var(--hf-accent); }
html[data-theme^="new"] .nl-sc .slider_obj.nl-sc-buy { --nl-sc-c: var(--hf-pos); }
html[data-theme^="new"] .nl-sc .slider_obj.nl-sc-sell { --nl-sc-c: var(--hf-neg); }
html[data-theme^="new"] .nl-sc .slider_obj.nl-sc-one.nl-sc-up { --nl-sc-c: var(--hf-pos); }
html[data-theme^="new"] .nl-sc .slider_obj.nl-sc-one.nl-sc-down { --nl-sc-c: var(--hf-neg); }
html[data-theme^="new"] .nl-sc .noUi-connect { background: var(--nl-sc-c) !important; }
html[data-theme^="new"] .nl-sc .nl-sc-one .noUi-connects .noUi-connect:first-child { background: var(--hf-pos) !important; }
html[data-theme^="new"] .nl-sc .nl-sc-one .noUi-connects .noUi-connect:last-child { background: var(--hf-neg) !important; }
html[data-theme^="new"] .nl-sc .slider_obj.nl-sc-any { --nl-sc-c: var(--hf-text-faint); }
html[data-theme^="new"] .nl-sc .nl-sc-any .noUi-connect, html[data-theme^="new"] .nl-sc .nl-sc-any.nl-sc-one .noUi-connects .noUi-connect { background: var(--hf-border-strong) !important; }
html[data-theme^="new"] .nl-sc .nl-sc-any .noUi-tooltip { font-weight: 500; }
/* the menus in a slider's place (the moving averages' order and crossings, the sector): side by side, wrapping, not cut */
html[data-theme^="new"] .nl-sc-group td div[style*="line-height"] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; line-height: normal !important; }
html[data-theme^="new"] .nl-sc-group td div[style*="line-height"] select { height: 28px; padding: 0 4px; font-size: 13px; min-width: 0; }
@media (max-width: 600px) {
    html[data-theme^="new"] .nl-sc-ideas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
    html[data-theme^="new"] .nl-sc-idea { flex: none; }
    html[data-theme^="new"] .nl-sc-acts { margin-left: 0; }
}
/* the groups' tables fit their column of the grid (the table code sets them 340px wide, past a 334px column), and the rows
   take their content's height (Classic's slider cells are 65px tall, for its bubbles) */
html[data-theme^="new"] .nl-sc-group table.dataTable { width: 100% !important; table-layout: fixed; }
html[data-theme^="new"] .nl-sc-group :is(th, td):first-child { width: 36% !important; }
html[data-theme^="new"] .nl-sc-group :is(th, td):last-child { width: auto !important; }
html[data-theme^="new"] .nl-sc-group td, html[data-theme^="new"] .nl-sc .screener_slidercells { height: auto !important; }
/* ---------- Compare Stocks (compare-stocksDev.php, nl_cmp_* in newlook.js): the stocks as chips over the funds and insider
   menus, the price chart with its legend, and the figures side by side (a column a stock, the names column held at the left
   when it scrolls) or the table, behind a switch ---------- */
html[data-theme^="new"] .nl-cmp [hidden] { display: none !important; }
html[data-theme^="new"] .nl-cmp-intro { max-width: 760px; margin: 0 0 12px; line-height: 1.55; }
html[data-theme^="new"] .nl-cmp-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
html[data-theme^="new"] .nl-cmp-pop-l { font-size: 13px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-cmp-pop .nl-sc-idea { height: 30px; padding: 0 12px; font-size: 13px; text-decoration: none; }
html[data-theme^="new"] .nl-cmp-card { margin: 0 0 14px; padding: 14px 16px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; }
html[data-theme^="new"] .nl-cmp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-theme^="new"] .nl-cmp-chips { display: contents; }
html[data-theme^="new"] .nl-cmp-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 3px 0 11px; border: 1px solid var(--hf-border-strong); border-radius: 16px; background: var(--hf-surface); font: 600 13.5px var(--nl-font); }
html[data-theme^="new"] .nl-cmp-chip i { width: 9px; height: 9px; border-radius: 50%; }
html[data-theme^="new"] .nl-cmp-chip a { color: var(--hf-text-strong); text-decoration: none; }
html[data-theme^="new"] .nl-cmp-chip a:hover { text-decoration: underline; }
html[data-theme^="new"] :is(.nl-cmp-chip, .nl-cmp-colhead) button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--hf-text-faint); font-size: 16px; line-height: 1; cursor: pointer; }
html[data-theme^="new"] :is(.nl-cmp-chip, .nl-cmp-colhead) button:hover { color: var(--hf-neg); background: var(--hf-surface-sunken); }
html[data-theme^="new"] .nl-cmp-search { flex: 1 1 220px; max-width: 320px; margin: 0; }
html[data-theme^="new"] .nl-cmp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
html[data-theme^="new"] .nl-cmp-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
html[data-theme^="new"] .nl-cmp-tools button:disabled { opacity: .5; cursor: default; }
html[data-theme^="new"] .nl-cmp-paste { margin-top: 12px; }
html[data-theme^="new"] .nl-cmp-who { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hf-border-light); font-size: 13.5px; }
html[data-theme^="new"] .nl-cmp-who > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html[data-theme^="new"] .nl-cmp-who label { color: var(--hf-text-strong); font-weight: 500; }
html[data-theme^="new"] .nl-cmp-tbar { margin: 0 0 12px; padding-top: 0; border-top: 0; } /* the menus above the table (the side by side view moves them into its headings) */
html[data-theme^="new"] .nl-cmp select { height: 30px; padding: 0 6px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 14px var(--nl-font); max-width: 100%; }
/* the chart: its names (a line's color, the change over the period) over it */
html[data-theme^="new"] .nl-cmp-chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
html[data-theme^="new"] .nl-cmp-h { margin: 0; font: 600 16px var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 10px 0 6px; }
html[data-theme^="new"] .nl-cmp-li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 2px; border: 0; background: none; color: var(--hf-text); font: 13px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-cmp-li i { width: 16px; height: 3px; border-radius: 2px; }
html[data-theme^="new"] .nl-cmp-li.nl-cmp-bench i { height: 0; border-top: 2px dashed; border-radius: 0; }
html[data-theme^="new"] .nl-cmp-li b { font-weight: 600; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-cmp-li[aria-pressed="false"] { opacity: .45; }
html[data-theme^="new"] .nl-cmp-li[aria-pressed="false"] b { text-decoration: line-through; }
html[data-theme^="new"] .nl-cmp-li:focus-visible { outline: 2px solid var(--hf-focus); outline-offset: 1px; border-radius: 4px; }
html[data-theme^="new"] .nl-cmp-ten { font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-cmp-canvas { position: relative; height: 300px; transition: opacity .15s; }
html[data-theme^="new"] .nl-cmp-busy .nl-cmp-canvas { opacity: .45; }
html[data-theme^="new"] .nl-cmp-note { margin: 8px 0 0; font-size: 12.5px; color: var(--hf-text-muted); }
/* the switch, and the key to the marked values */
html[data-theme^="new"] .nl-cmp-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 18px 0 10px; }
html[data-theme^="new"] .nl-cmp-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--hf-text-muted); }
/* the best of a line: a green tint, a green ring and its figures in bold green. A pale tint alone turned beige under a warm
   screen filter (Night Light); the ring and the text, saturated, stay green. Figures with colors of their own keep them */
html[data-theme^="new"] .nl-cmp { --nl-cmp-best-bg: color-mix(in srgb, var(--hf-pos) 12%, var(--hf-surface)); --nl-cmp-best-ring: color-mix(in srgb, var(--hf-pos) 75%, var(--hf-surface)); }
html[data-theme^="new"] .nl-cmp-key i { flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--nl-cmp-best-bg); box-shadow: inset 0 0 0 1.5px var(--nl-cmp-best-ring); }
/* side by side */
html[data-theme^="new"] .nl-cmp-scroll { overflow-x: auto; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); }
html[data-theme^="new"] .nl-cmp-grid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13.5px; }
html[data-theme^="new"] .nl-cmp-grid th:first-child { width: 170px; }
html[data-theme^="new"] .nl-cmp-grid :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--hf-border-light); background: var(--hf-surface); }
html[data-theme^="new"] .nl-cmp-grid thead th { padding: 12px 10px 10px; vertical-align: bottom; border-bottom: 1px solid var(--hf-border); text-align: center; }
html[data-theme^="new"] .nl-cmp-grid :is(.nl-cmp-corner, tbody th[scope="row"]) { position: sticky; left: 0; z-index: 1; text-align: left; }
html[data-theme^="new"] .nl-cmp-q { display: block; font: 400 12px/1.4 var(--nl-font); color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-cmp-colhead { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; gap: 0 6px; min-width: 0; }
html[data-theme^="new"] .nl-cmp-colhead i { width: 10px; height: 10px; border-radius: 50%; }
html[data-theme^="new"] .nl-cmp-colhead .nl-tk { font-size: 15px; font-weight: 700; }
html[data-theme^="new"] .nl-cmp-colhead .nl-co { grid-column: 1 / -1; overflow: hidden; font-size: 12px; font-weight: 400; color: var(--hf-text-muted); white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
html[data-theme^="new"] .nl-cmp-grid tbody th[scope="row"] { font-weight: 500; color: var(--hf-text); line-height: 1.35; }
html[data-theme^="new"] .nl-cmp-grid td { text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-cmp-grid td.nl-cmp-best { background: var(--nl-cmp-best-bg); box-shadow: inset 0 0 0 1.5px var(--nl-cmp-best-ring); color: var(--hf-pos); font-weight: 600; }
html[data-theme^="new"] .nl-cmp-grid .nl-sc-two small { margin-left: 8px; } /* the word and the figures of favorability and fair value, on one line here */
html[data-theme^="new"] .nl-cmp-grid tr:last-child > :is(th, td) { border-bottom: 0; }
html[data-theme^="new"] .nl-cmp-grid .nl-cmp-sech th { padding: 18px 10px 8px; border-bottom: 1px solid var(--hf-border); text-align: left; }
html[data-theme^="new"] .nl-cmp-grid tbody:first-of-type .nl-cmp-sech th { padding-top: 12px; }
html[data-theme^="new"] .nl-cmp-sticky { position: sticky; left: 10px; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: calc(100vw - 60px); }
html[data-theme^="new"] .nl-cmp-sticky b { font-size: 14px; font-weight: 700; color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-cmp-sticky > span:not(.nl-fseg, .nl-cmp-slot, .nl-cmp-by) { font-size: 12.5px; font-weight: 400; color: var(--hf-text-muted); }
/* the fund and insider menus in their sections' headings; the view fades while the table code fetches for a new choice */
html[data-theme^="new"] .nl-cmp-sticky.nl-cmp-menus { align-items: center; gap: 6px 8px; }
html[data-theme^="new"] .nl-cmp-sticky.nl-cmp-menus b { margin-right: 2px; }
html[data-theme^="new"] .nl-cmp-menus select { height: 28px; font-size: 13px; font-weight: 400; }
html[data-theme^="new"] .nl-cmp-by { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* "by" and its menu on one line */
html[data-theme^="new"] .nl-cmp-menus label { font-size: 12.5px; font-weight: 400; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-cmp-menus .icon-info-circled { margin-right: 4px; font-weight: 400; color: var(--hf-text-faint); }
html[data-theme^="new"] .nl-cmp-side { transition: opacity .15s; }
html[data-theme^="new"] .nl-cmp:has(#nl_cmp_form .form_disabler) .nl-cmp-side { opacity: .5; pointer-events: none; }
html[data-theme^="new"] .nl-cmp-per { align-self: center; }
html[data-theme^="new"] .nl-cmp-per button { height: 26px; padding: 0 9px; font-size: 12.5px; }
html[data-theme^="new"] .nl-cmp-locked td { padding: 6px 10px; }
html[data-theme^="new"] :is(.nl-cmp-empty, .nl-cmp-none) { margin: 10px 0; font-size: 13.5px; color: var(--hf-text-muted); }
/* the table, out of sight but laid out while the other view shows */
html[data-theme^="new"] .nl-cmp-tablewrap.nl-cmp-off { height: 0; overflow: hidden; visibility: hidden; }
@media (max-width: 600px) {
    html[data-theme^="new"] .nl-cmp-pop { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
    html[data-theme^="new"] .nl-cmp-pop .nl-sc-idea { flex: none; }
    html[data-theme^="new"] .nl-cmp-search { flex-basis: 100%; max-width: none; }
    html[data-theme^="new"] .nl-cmp-acts { margin-left: 0; }
    html[data-theme^="new"] .nl-cmp-canvas { height: 240px; }
    html[data-theme^="new"] .nl-cmp-grid th:first-child { width: 112px; }
    html[data-theme^="new"] .nl-cmp-grid :is(th, td) { padding: 8px 6px; }
    html[data-theme^="new"] .nl-cmp-grid { font-size: 13px; }
    /* the bars of a narrow column: the bar across it, its two figures under its ends (the 52-week range: the price over it) */
    html[data-theme^="new"] .nl-cmp-grid :is(.nl-r52, .range52OuterCont) { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "px px" "bar bar" "lo hi"; row-gap: 3px; width: 100%; margin: 0; }
    html[data-theme^="new"] .nl-cmp-grid .nl-r52-px { grid-area: px; justify-self: center; left: auto !important; transform: none; }
    html[data-theme^="new"] .nl-cmp-grid :is(.nl-r52 > span:nth-child(2), .range52OuterCont > .yearMin) { grid-area: lo; justify-self: start; }
    html[data-theme^="new"] .nl-cmp-grid :is(.nl-r52-bar, .range52Cont, .range52OuterCont > .nl-net) { grid-area: bar; width: 100%; }
    html[data-theme^="new"] .nl-cmp-grid :is(.nl-r52 > span:last-child, .range52OuterCont > .yearMax) { grid-area: hi; justify-self: end; }
}
/* ---------- The Earnings Payback Calculator (implied-price-earnings-ratioDev.php, nl_pb_* in newlook.js): the figures beside
   the answer and its chart, then the guide ---------- */
html[data-theme^="new"] .nl-pb [hidden] { display: none !important; }
html[data-theme^="new"] .nl-pb-intro { max-width: 760px; margin: 0 0 14px; line-height: 1.55; }
html[data-theme^="new"] .nl-pb-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: start; }
html[data-theme^="new"] .nl-pb-card { padding: 16px 18px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; }
html[data-theme^="new"] .nl-pb-field { margin: 0 0 14px; }
html[data-theme^="new"] .nl-pb-field > label, html[data-theme^="new"] .nl-pb-growth legend { display: block; margin: 0 0 6px; padding: 0; font: 600 13.5px var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-pb-opt { font-weight: 400; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pb-search { max-width: 100%; }
html[data-theme^="new"] .nl-pb input[type="number"] { box-sizing: border-box; height: 32px; padding: 0 8px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 15px var(--nl-font-data); }
html[data-theme^="new"] #nl_pb_pe { width: 110px; }
html[data-theme^="new"] .nl-pb :is(select, input[type=range], input[type=checkbox]):focus-visible { outline: 2px solid var(--hf-focus); outline-offset: 1px; }
/* the stock: its P/E and the growth figures to start from */
html[data-theme^="new"] .nl-pb-stock { margin: -4px 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--hf-surface-sunken); font-size: 13.5px; line-height: 1.45; }
html[data-theme^="new"] .nl-pb-sh { display: flex; align-items: baseline; gap: 8px; }
html[data-theme^="new"] .nl-pb-sh .nl-tk { font-size: 15px; font-weight: 700; }
html[data-theme^="new"] .nl-pb-sh span { overflow: hidden; color: var(--hf-text-muted); white-space: nowrap; text-overflow: ellipsis; }
html[data-theme^="new"] .nl-pb-x { flex: none; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--hf-text-faint); font-size: 16px; line-height: 1; cursor: pointer; }
html[data-theme^="new"] .nl-pb-x:hover { color: var(--hf-neg); background: var(--hf-surface); }
html[data-theme^="new"] .nl-pb-stock p { margin: 6px 0 0; }
html[data-theme^="new"] .nl-pb-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-theme^="new"] .nl-pb-use { height: 26px; padding: 0 10px; border: 1px solid var(--hf-border-strong); border-radius: 13px; background: var(--hf-surface); color: var(--hf-text); font: 12.5px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-pb-use:hover { border-color: var(--hf-accent); }
html[data-theme^="new"] .nl-pb-filled { font-size: 12.5px; color: var(--hf-text-muted); }
/* growth and discount: a slider and its number */
html[data-theme^="new"] .nl-pb-growth { margin: 0; padding: 0; border: 0; }
html[data-theme^="new"] .nl-pb-slider { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 6px 0; font-size: 13.5px; }
html[data-theme^="new"] .nl-pb-slider input[type="range"] { width: 100%; margin: 0; accent-color: var(--hf-accent); }
html[data-theme^="new"] .nl-pb-num { display: inline-flex; align-items: center; gap: 4px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pb-num input[type="number"] { width: 68px; text-align: right; }
/* Buy Prices: a locked group's lock in the middle of its range column (nl_bp_range_cell); and no tap highlight on the charts
   (phones drew a blue box round the whole chart when a dot was tapped) */
html[data-theme^="new"] .nl-bpr-unl { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); }
html[data-theme^="new"] :is(.nl-bpv-chart, .nl-bpv-chart canvas, .nl-bpv svg, .nl-bpr-cell) { -webkit-tap-highlight-color: transparent; outline: none; }
html[data-theme^="new"] .nl-pb-slider :disabled { opacity: .45; }
/* below Level 1 (nl_pb_lock): the form as it is, covered, with a note over it saying what Level 1 does here */
html[data-theme^="new"] .nl-pb-locked { position: relative; }
html[data-theme^="new"] .nl-pb-cover { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; box-shadow: none; }
html[data-theme^="new"] .nl-pb-lockmsg { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 14px;
    padding: 10px 12px; border: 1px solid var(--nl-unl-line); border-radius: 8px; background: var(--nl-unl-bg); color: var(--nl-unl-text); font-size: 14px; line-height: 1.4; }
html[data-theme^="new"] .nl-pb-locked :is(input, select, button):disabled { opacity: 1; }
html[data-theme^="new"] .nl-pb-locked .nl-pb-slider :disabled { opacity: 1; }
html[data-theme^="new"] .nl-pb-nwrap { position: relative; display: inline-block; }
html[data-theme^="new"] .nl-pb-check { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13.5px; color: var(--hf-text); cursor: pointer; }
html[data-theme^="new"] .nl-pb-disc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hf-border-light); }
html[data-theme^="new"] .nl-pb-disc label { font-weight: 600; color: var(--hf-text-strong); white-space: nowrap; }
/* the answer */
html[data-theme^="new"] .nl-pb-big { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--hf-text-strong); line-height: 1.05; }
html[data-theme^="new"] .nl-pb-big b { font: 700 46px var(--nl-font); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] #nl_pb_unit { font: 600 20px var(--nl-font); color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pb-what { margin: 4px 0 8px; font-size: 14px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-pb-facts { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
html[data-theme^="new"] .nl-pb-canvas { position: relative; height: 260px; }
html[data-theme^="new"] .nl-pb-need { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hf-border-light); font-size: 14px; line-height: 1.6; }
html[data-theme^="new"] .nl-pb-need select { height: 28px; margin: 0 2px; padding: 0 4px; border: 1px solid var(--hf-border-strong); border-radius: 6px; background: var(--hf-surface); color: var(--hf-text-strong); font: 14px var(--nl-font); }
html[data-theme^="new"] .nl-pb-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
html[data-theme^="new"] .nl-pb-acts a { text-decoration: none; }
/* the guide (was Valuing Growth Stocks) */
html[data-theme^="new"] .nl-pb-guide { max-width: 760px; margin: 32px 0 8px; line-height: 1.6; scroll-margin-top: 80px; }
html[data-theme^="new"] .nl-pb-guide h2 { margin: 0 0 4px; font: 700 22px var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-pb-guide h3 { margin: 22px 0 6px; font: 600 16px var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-pb-guide p { margin: 0 0 10px; }
html[data-theme^="new"] .nl-pb-guide ul { margin: 0 0 10px; padding-left: 20px; }
html[data-theme^="new"] .nl-pb-guide li { margin: 4px 0; list-style: disc; }
@media (max-width: 900px) {
    html[data-theme^="new"] .nl-pb-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    html[data-theme^="new"] .nl-pb-card { padding: 14px; }
    html[data-theme^="new"] .nl-pb-slider { grid-template-columns: 104px minmax(0, 1fr) auto; gap: 8px; }
    html[data-theme^="new"] .nl-pb-big b { font-size: 40px; }
    html[data-theme^="new"] .nl-pb-canvas { height: 220px; }
}
/* ---------- The hedge fund tracker (hedge-fund-trackerDev.php, nl_hft_* in newlook.js): smaller rating stars, the average cost
   right-aligned, the dates over their years ---------- */
html[data-theme^="new"] #hedge_fund_tracker .score { font-size: 12px; }
html[data-theme^="new"] #hedge_fund_tracker .score-wrap { height: 15px; }
html[data-theme^="new"] .nl-hft-num { align-items: flex-end; text-align: right; }
html[data-theme^="new"] .nl-hft-date { display: inline-flex; flex-direction: column; line-height: 1.3; white-space: nowrap; }
html[data-theme^="new"] .nl-hft-yr { font-size: 12px; color: var(--hf-text-faint); }

/* ---------- The search page (search.php): the box, the kinds as chips, each kind a list ---------- */
html[data-theme^="new"] .sr { max-width: 900px; }
html[data-theme^="new"] .sr-form { display: flex; gap: 8px; align-items: stretch; margin: 4px 0 18px; }
html[data-theme^="new"] .sr-form .typeahead__container { flex: 1 1 auto; max-width: 560px; }
html[data-theme^="new"] .sr-form input { box-sizing: border-box; width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--hf-border-strong); border-radius: 8px; background: var(--hf-surface); color: var(--hf-text-strong); font: 15px var(--nl-font); }
html[data-theme^="new"] .sr-none { color: var(--hf-text-muted); }
html[data-theme^="new"] .sr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
html[data-theme^="new"] .sr-jump a { padding: 4px 12px; border: 1px solid var(--hf-border); border-radius: 999px; color: var(--hf-text-strong); font-size: 13.5px; text-decoration: none; background: var(--hf-surface); }
html[data-theme^="new"] .sr-jump a:hover { border-color: var(--hf-border-strong); text-decoration: none; }
html[data-theme^="new"] .sr-jump em { margin-left: 2px; font-style: normal; color: var(--hf-text-muted); }
html[data-theme^="new"] .sr-kind { margin-bottom: 22px; padding: 6px 8px 8px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; }
html[data-theme^="new"] .sr-kind h2 { margin: 6px 8px 4px; font-size: 15px; }
html[data-theme^="new"] .sr-list { list-style: none; margin: 0; padding: 0; }
html[data-theme^="new"] .sr-list li[hidden] { display: none; }
html[data-theme^="new"] .sr-list a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 8px; border-radius: 7px; color: var(--hf-text-strong); text-decoration: none; }
html[data-theme^="new"] .sr-list a:hover { background: var(--hf-row-hover); text-decoration: none; color: var(--hf-text-strong); }
html[data-theme^="new"] .sr-sym { flex: none; min-width: 64px; font: 600 14px var(--nl-font-data); }
html[data-theme^="new"] .sr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html[data-theme^="new"] .sr-main b { font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-theme^="new"] .sr-main small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .sr-facts { flex: none; display: flex; gap: 14px; font-size: 13px; color: var(--hf-text-muted); font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .sr-av { position: relative; flex: none; width: 32px; height: 32px; overflow: hidden; border-radius: 6px; background: var(--hf-surface-sunken); box-shadow: inset 0 0 0 1px var(--hf-border-light); }
html[data-theme^="new"] .sr-av.sr-round { border-radius: 50%; }
html[data-theme^="new"] .sr-av > span { display: flex; align-items: center; justify-content: center; height: 100%; font: 600 11.5px var(--nl-font); color: var(--hf-text-muted); }
html[data-theme^="new"] .sr-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
html[data-theme^="new"] .sr-more { margin: 6px 8px 2px; padding: 0; border: 0; background: none; color: var(--hf-link); font: 500 13.5px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .sr-credit { font-size: 12px; color: var(--hf-text-faint); }
@media screen and (max-width: 640px) {
    /* phones: the photo or ticker on the left, the name, its line and the facts stacked beside it */
    html[data-theme^="new"] .sr-list a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
    html[data-theme^="new"] .sr-facts { grid-column: 2; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; }
}
/* My Tracker's followed Congress members (nl_cg_member, nl_cg_money) */
html[data-theme^="new"] .dataTable .nl-cg-face { border-radius: 50%; }
html[data-theme^="new"] .dataTable .nl-cg-face img { object-position: center 20%; }
html[data-theme^="new"] .nl-cg-money { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-cg-money small { font-size: 11.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-follow-who { margin: 4px 0 0; padding-top: 0; border-top: 0; }

/* the Following panel's button and tickers on hover; the example's tickers four on phones (two rows) */
html[data-theme^="new"] #cssmenu .nl-fw a.nl-fw-find:hover { background: color-mix(in srgb, var(--hf-brand) 82%, #fff); color: var(--hf-on-brand); text-decoration: none; }
html[data-theme^="new"] #cssmenu a.nl-fw-chip:hover { background: color-mix(in srgb, var(--hf-menu-text) 18%, var(--hf-menu-bg)); color: #fff; }
@media screen and (max-width: 1000px) {
    html[data-theme^="new"] .nl-fw-eg .nl-fw-chip:nth-child(n+5) { display: none; }
}
/* the dropdowns start at the bar's edge (46px), not under their item (48px, the star's 50px): the strip between let the
   pointer fall onto the page and close the menu on its way down, the star's most of all */
@media screen and (min-width: 1001px) {
    html[data-theme^="new"] #cssmenu > ul > li > ul { top: 46px; }
}
html[data-theme^="new"] :is(#nl_cmp_table, #stock_followed) :is(td.nl-gap-l, th:is([data-field="sector"], [data-field="short_date"], [data-field="fin_period"])) { padding-left: 20px; } /* off the right-aligned figures before them */
/* drawn menu icons: the money bag and the bank as Classic's (filled), an oil drum with hoops that show, ETH, Solana and XRP
   (their menu items, icon-chart-line in Classic), the S&P 500's candlesticks, a bond certificate and a REIT's house (icon-chart-line,
   icon-doc-text and icon-building in Classic), the light/dark switch */
html[data-theme^="new"] :is(.icon-bank, .icon-barrel-icon, .icon-contrast)::before { content: ''; display: inline-block; box-sizing: content-box; width: 16px; height: 16px; min-width: 0; padding: 0; margin: 0 6px 0 0;
    vertical-align: -3px; font-size: 16px; background: currentColor; filter: none; rotate: none; -webkit-mask: var(--nl-icon) center / contain no-repeat; mask: var(--nl-icon) center / contain no-repeat; }
html[data-theme^="new"] .icon-money { --nl-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%271 1 22 22%27%3E%3Cdefs%3E%3Cmask id%3D%27m%27%3E%3Crect width%3D%2724%27 height%3D%2724%27 fill%3D%27white%27%2F%3E%3Cpath d%3D%27M14.6 11.6c-.5-.9-1.5-1.5-2.6-1.5-1.5 0-2.6.8-2.6 1.9 0 2.6 5.3 1.5 5.3 4.2 0 1.2-1.2 2-2.7 2-1.2 0-2.2-.6-2.7-1.5M12 8.4v11.2%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%271.7%27 stroke-linecap%3D%27round%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg mask%3D%27url(%23m)%27 fill%3D%27black%27%3E%3Cpath d%3D%27M8.6 2.8h6.8l-1.9 3.4h-3z%27%2F%3E%3Cpath d%3D%27M10.2 7.2C6.5 9 3.8 12.9 3.8 16.6c0 3.5 2.9 5.1 8.2 5.1s8.2-1.6 8.2-5.1c0-3.7-2.7-7.6-6.4-9.4z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-bank { --nl-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%271 1 22 22%27%3E%3Cg fill%3D%27black%27%3E%3Cpath d%3D%27M12 1.8 2 7v2.2h20V7z%27%2F%3E%3Crect x%3D%273.6%27 y%3D%2710.4%27 width%3D%272.6%27 height%3D%277.6%27 rx%3D%27.4%27%2F%3E%3Crect x%3D%278.4%27 y%3D%2710.4%27 width%3D%272.6%27 height%3D%277.6%27 rx%3D%27.4%27%2F%3E%3Crect x%3D%2713%27 y%3D%2710.4%27 width%3D%272.6%27 height%3D%277.6%27 rx%3D%27.4%27%2F%3E%3Crect x%3D%2717.8%27 y%3D%2710.4%27 width%3D%272.6%27 height%3D%277.6%27 rx%3D%27.4%27%2F%3E%3Crect x%3D%272%27 y%3D%2719.2%27 width%3D%2720%27 height%3D%273%27 rx%3D%27.5%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-barrel-icon { --nl-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%271 1 22 22%27%3E%3Cdefs%3E%3Cmask id%3D%27b%27%3E%3Crect width%3D%2724%27 height%3D%2724%27 fill%3D%27white%27%2F%3E%3Cpath d%3D%27M4.6 5.2a7.4 2.7 0 0 0 14.8 0M4.6 10.6a7.4 2.7 0 0 0 14.8 0M4.6 15.8a7.4 2.7 0 0 0 14.8 0%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%271.4%27%2F%3E%3Ccircle cx%3D%2714.6%27 cy%3D%274.6%27 r%3D%271.35%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%27.9%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg mask%3D%27url(%23b)%27 fill%3D%27black%27%3E%3Cellipse cx%3D%2712%27 cy%3D%275%27 rx%3D%277.4%27 ry%3D%272.7%27%2F%3E%3Cpath d%3D%27M4.6 5v14.2a7.4 2.7 0 0 0 14.8 0V5z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-chart-line.nl-ic-eth { --nl-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%271 1 22 22%27%3E%3Cg fill%3D%27black%27%3E%3Cpath d%3D%27M12 1.5 5.2 12.4 12 16.3l6.8-3.9z%27%2F%3E%3Cpath d%3D%27M5.2 14 12 22.5l6.8-8.5L12 17.9z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-chart-line.nl-ic-sol { --nl-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%271 1 22 22%27%3E%3Cg fill%3D%27black%27%3E%3Cpath d%3D%27M7.2 4h13.6l-3.6 3.6H3.6z%27%2F%3E%3Cpath d%3D%27M3.6 10.2h13.6l3.6 3.6H7.2z%27%2F%3E%3Cpath d%3D%27M7.2 16.4h13.6l-3.6 3.6H3.6z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-chart-line.nl-ic-xrp { --nl-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%271 1 22 22%27%3E%3Cpath d%3D%27M3.5 4l5 4.9a5 5 0 0 0 7 0l5-4.9M3.5 20l5-4.9a5 5 0 0 1 7 0l5 4.9%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%272.4%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-chart-line.nl-ic-spx { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cpath%20d%3D%27M5.2%2010.6v10.2M12%206.4v10.2M18.8%202.4v10.2%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Cg%20fill%3D%27black%27%3E%3Crect%20x%3D%272.8%27%20y%3D%2712.8%27%20width%3D%274.8%27%20height%3D%275.8%27%20rx%3D%27.9%27%2F%3E%3Crect%20x%3D%279.6%27%20y%3D%278.6%27%20width%3D%274.8%27%20height%3D%276%27%20rx%3D%27.9%27%2F%3E%3Crect%20x%3D%2716.4%27%20y%3D%274.6%27%20width%3D%274.8%27%20height%3D%275.8%27%20rx%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-doc-text.nl-ic-bond { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cdefs%3E%3Cmask%20id%3D%27c%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27white%27%2F%3E%3Cpath%20d%3D%27M6%208.2h8.5M6%2011.4h5%27%20stroke%3D%27black%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%2714.6%27%20r%3D%274.3%27%20fill%3D%27black%27%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713.6%27%20rx%3D%271.6%27%20fill%3D%27black%27%20mask%3D%27url(%23c)%27%2F%3E%3Cg%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2716.6%27%20cy%3D%2714.6%27%20r%3D%272.9%27%2F%3E%3Cpath%20d%3D%27M14.5%2017l-.9%205%203-1.7%203%201.7-.9-5a3.9%203.9%200%200%201-4.2%200z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-building.nl-ic-reit { --nl-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%271%201%2022%2022%27%3E%3Cdefs%3E%3Cmask%20id%3D%27h%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20fill%3D%27white%27%2F%3E%3Cg%20fill%3D%27black%27%3E%3Crect%20x%3D%277.2%27%20y%3D%2711.4%27%20width%3D%272.8%27%20height%3D%272.6%27%20rx%3D%27.4%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2711.4%27%20width%3D%272.8%27%20height%3D%272.6%27%20rx%3D%27.4%27%2F%3E%3Crect%20x%3D%2710.4%27%20y%3D%2715.6%27%20width%3D%273.2%27%20height%3D%275.8%27%20rx%3D%27.4%27%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M12%202.6%202.3%2010.3l1.2%201.5%201.6-1.3v10.9h13.8V10.5l1.6%201.3%201.2-1.5z%27%20fill%3D%27black%27%20mask%3D%27url(%23h)%27%2F%3E%3C%2Fsvg%3E"); }
html[data-theme^="new"] .icon-contrast { --nl-icon: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%271 1 22 22%27%3E%3Ccircle cx%3D%2712%27 cy%3D%2712%27 r%3D%278.5%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%272%27%2F%3E%3Cpath d%3D%27M12 3.5a8.5 8.5 0 0 1 0 17z%27 fill%3D%27black%27%2F%3E%3C%2Fsvg%3E"); }

/* ---------- Homepage (index.php, nl_home_* in newlook.js) ----------
   A dark band under the bar with the title, the big search and examples to try; the eight lists as three cards; the funds
   table; then what's here and the free account (logged out) or what the user follows, at the top (logged in). */
html[data-theme^="new"] .nl-home-hero { padding: 46px 16px 34px; text-align: center; background: var(--nl-hero-bg, linear-gradient(180deg, #1f2329, #2d333b)); border-bottom: 1px solid var(--nl-hero-line, transparent); } /* dark in both themes, as the bar */
/* dark: lighter than the bar and the page, the light look's grey stood out as a slab. Here it carries on from the bar
   (#0f1216) and settles a step below the page, with a faint warmth from the search's yellow behind the box */
html[data-theme="new-dark"] { --nl-hero-bg: radial-gradient(55% 90% at 50% 62%, rgba(247, 183, 0, .07), transparent 70%), linear-gradient(180deg, #0f1216 0%, #131820 100%); --nl-hero-line: #232830; }
@media (prefers-color-scheme: dark) { html[data-theme="new"] { --nl-hero-bg: radial-gradient(55% 90% at 50% 62%, rgba(247, 183, 0, .07), transparent 70%), linear-gradient(180deg, #0f1216 0%, #131820 100%); --nl-hero-line: #232830; } }
html[data-theme^="new"] .nl-home-hero h1 { margin: 0 0 8px; font: 700 34px/1.2 var(--nl-font); color: #fff; letter-spacing: -.01em; }
html[data-theme^="new"] .nl-home-sub { margin: 0; font-size: 16px; color: #c9d0d7; }
html[data-theme^="new"] .nl-home-sub b { color: var(--hf-brand); }
html[data-theme^="new"] .nl-home #homeSearch { width: 100%; max-width: 640px; margin: 22px auto 0; }
html[data-theme^="new"] .nl-home #homeSearch .typeahead__field { display: flex; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); transition: box-shadow .15s; }
html[data-theme^="new"] .nl-home #homeSearch .typeahead__query { flex: 1 1 auto; }
html[data-theme^="new"] .nl-home #homeSearch .typeahead__query input { box-sizing: border-box; width: 100%; height: 52px; margin: 0; padding: 0 18px; border: 0 !important; border-radius: 10px 0 0 10px;
    background: #fff; color: #15191e; font: 16px var(--nl-font); line-height: 52px !important; box-shadow: none !important; outline: none !important; }
html[data-theme^="new"] .nl-home #homeSearch input::placeholder { color: #7b8590; }
html[data-theme^="new"] .nl-home #homeSearch .typeahead__button button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 52px; width: 60px; margin: 0; padding: 0;
    border: 0; border-radius: 0 10px 10px 0; background: var(--hf-brand); color: var(--hf-on-brand); line-height: 1 !important; cursor: pointer; }
html[data-theme^="new"] .nl-home #homeSearch .typeahead__button button i { display: block; margin: 0; }
html[data-theme^="new"] .nl-home #homeSearch .typeahead__query input:focus { box-shadow: none; } /* the frame glows */
html[data-theme^="new"] .nl-home #homeSearch .typeahead__field:focus-within { box-shadow: 0 0 0 2px var(--hf-brand), 0 0 22px 2px color-mix(in srgb, var(--hf-brand) 45%, transparent); }
html[data-theme^="new"] .nl-home .hfs-pop.hfs-home { top: calc(100% + 8px); text-align: left; }
html[data-theme^="new"] .nl-home-try { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; }
html[data-theme^="new"] .nl-home-try span { color: #a4adb8; margin-right: 2px; }
html[data-theme^="new"] .nl-home-try button { padding: 5px 13px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: none; color: #e9ecef; font: 500 13px var(--nl-font);
    cursor: pointer; box-shadow: none; transition: background .15s, border-color .15s; }
html[data-theme^="new"] .nl-home-try button:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }

html[data-theme^="new"] .nl-home-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; }
html[data-theme^="new"] .nl-home-card { box-sizing: border-box; padding: 12px 16px 6px; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); }
html[data-theme^="new"] .nl-home-card h2 { margin: 0 0 2px; font: 700 16px/1.3 var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-home-card a { display: block; padding: 6px 0; border-top: 1px solid var(--hf-border-light); text-decoration: none; }
html[data-theme^="new"] .nl-home-card h2 + a { border-top: 0; }
html[data-theme^="new"] .nl-home-card a b { display: block; font-weight: 600; font-size: 14px; color: var(--hf-link); }
html[data-theme^="new"] .nl-home-card a:hover b { text-decoration: underline; }

html[data-theme^="new"] .nl-home-funds h2 { margin: 10px 0 10px; font: 700 22px/1.3 var(--nl-font); color: var(--hf-text-strong); }

html[data-theme^="new"] .nl-home-more { margin: 12px 0 0; font-size: 15px; font-weight: 500; }
/* the Quarter column (nl_home_q): the quarter in grey; a fund that has filed the quarter coming in, as a tag in the brand color */
html[data-theme^="new"] .nl-hq { color: var(--hf-text-muted); font-size: 13.5px; }
html[data-theme^="new"] .nl-hq-new { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--hf-highlight-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hf-brand) 55%, transparent); color: var(--hf-text-strong); font-size: 13.5px; font-weight: 600; white-space: nowrap;border-bottom: none; }
html[data-theme^="new"] .nl-home-why { margin: 28px 0 10px; padding: 18px 20px; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); }
html[data-theme^="new"] .nl-home-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
html[data-theme^="new"] .nl-home-facts b { display: block; font: 700 19px/1.3 var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-home-facts span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-home-join { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hf-border-light); }
html[data-theme^="new"] .nl-home-join p { margin: 0; font-size: 15px; color: var(--hf-text); }
html[data-theme^="new"] .nl-home-join .new_actionbtn { flex: none; background: var(--hf-brand); border-color: var(--hf-brand); color: var(--hf-on-brand); font-weight: 600; }

html[data-theme^="new"] .nl-home-mine { margin: 22px 0 0; padding: 12px 16px; border: 1px solid var(--hf-border); border-radius: 10px; background: var(--hf-surface); }
html[data-theme^="new"] .nl-hm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
html[data-theme^="new"] .nl-hm-head h2 { margin: 0; font: 700 16px/1.3 var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-hm-head a { font-size: 13.5px; color: var(--hf-link); }
html[data-theme^="new"] .nl-hm-new { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--hf-brand); color: var(--hf-on-brand); font-weight: 600; }
html[data-theme^="new"] .nl-hm-list { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-theme^="new"] .nl-hm-i { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; max-width: 260px; height: 32px; padding: 0 12px 0 0; border: 1px solid var(--hf-border); border-radius: 999px;
    color: var(--hf-text); font-size: 13.5px; text-decoration: none; }
html[data-theme^="new"] .nl-hm-i span:not(.nl-fw-av) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-theme^="new"] .nl-hm-i:hover { border-color: var(--hf-border-strong); color: var(--hf-text-strong); text-decoration: none; }
html[data-theme^="new"] .nl-hm-sym, html[data-theme^="new"] .nl-hm-more { padding: 0 12px; font-weight: 600; }
html[data-theme^="new"] .nl-hm-more { color: var(--hf-link); }
html[data-theme^="new"] .nl-home-mine .nl-fw-av { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -1px 0 -1px 0; overflow: hidden; border-radius: 50%;
    background: var(--hf-surface-sunken); font: 600 10px var(--nl-font); color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-home-mine .nl-fw-av img { width: 100%; height: 100%; object-fit: cover; }
html[data-theme^="new"] .nl-hm-empty { margin: 0; font-size: 14px; color: var(--hf-text-muted); }

@media screen and (max-width: 760px) {
    html[data-theme^="new"] .nl-home-hero { padding: 28px 8px 22px; }
    html[data-theme^="new"] .nl-home-hero h1 { font-size: min(25px, 5.5vw); }
    html[data-theme^="new"] .nl-home-sub { font-size: 14.5px; }
    html[data-theme^="new"] .nl-home #homeSearch { margin-top: 18px; }
    html[data-theme^="new"] .nl-home #homeSearch .typeahead__query input { height: 46px; line-height: 46px !important; padding: 0 14px; font-size: 16px; }
    html[data-theme^="new"] .nl-home #homeSearch .typeahead__button button { height: 46px; }
    html[data-theme^="new"] .nl-home .hfs-pop.hfs-home { left: -8px; right: -8px; width: auto; min-width: 0; }
    html[data-theme^="new"] .nl-home-try { display: none; } /* the table of funds higher, clear of the ad fixed at the bottom */
    html[data-theme^="new"] .nl-home-facts { grid-template-columns: 1fr; gap: 10px; }
    /* The eight lists as one line of chips that scrolls sideways, not three cards (300px): the table of funds comes up to
       the first screen. Still the links, which a sixth of the phones' visits take (Nov 2026); the cards' headings go,
       the chips in their order */
    html[data-theme^="new"] .nl-home-cards { display: flex; gap: 8px; margin: 12px 0 0; padding: 0 10px 2px; overflow-x: auto; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
    html[data-theme^="new"] .nl-home-cards::-webkit-scrollbar { display: none; }
    html[data-theme^="new"] .nl-home-cards::after { content: ''; flex: 0 0 14px; } /* the last chip clear of the fade */
    html[data-theme^="new"] .nl-home-card { display: contents; }
    html[data-theme^="new"] .nl-home-card h2 { display: none; }
    html[data-theme^="new"] .nl-home-cards .nl-home-card a { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--hf-border); border-radius: 999px;
        background: var(--hf-surface); white-space: nowrap; }
    html[data-theme^="new"] .nl-home-card a b { font-size: 13.5px; }
    html[data-theme^="new"] .nl-home-card a:hover b { text-decoration: none; }
    html[data-theme^="new"] .nl-home-card a:active { border-color: var(--hf-border-strong); }
    html[data-theme^="new"] .nl-home-join { flex-direction: column; align-items: stretch; text-align: center; }
}

/* sortable columns' arrows (span.dataTable-sort in the header, global.js): drawn in the theme's colors, not Classic's
   sprite (images/datagrid_icons.png, its grey and blue made for a light header): two faint triangles while the column
   isn't sorted, one in the accent, pointing the way it's sorted, when it is */
html[data-theme^="new"] .dataTable-sort { display: inline-block; width: 10px; height: 14px; margin-left: 5px; padding: 0; vertical-align: -2px; background: var(--hf-text-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 1.2 8.6 5.6H1.4zM5 12.8 1.4 8.4h7.2z' stroke='black' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 1.2 8.6 5.6H1.4zM5 12.8 1.4 8.4h7.2z' stroke='black' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme^="new"] .dataTable-sort.dataTable-asc { background: var(--hf-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 3.6 9.2 9.4H.8z' stroke='black' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 3.6 9.2 9.4H.8z' stroke='black' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme^="new"] .dataTable-sort.dataTable-desc { background: var(--hf-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 10.4 .8 4.6h8.4z' stroke='black' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 10.4 .8 4.6h8.4z' stroke='black' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* the table's add-columns button (add_cols in global.js: the homepage's top buys and sells): Classic's dark square with the
   yellow +, and its yellow hint, beside the table's top right corner in a gutter the table leaves (a scrollbar inside the
   table's box covered it there) */
html[data-theme^="new"] .nl-has-add { margin-right: 26px; } /* the button's width: room for it where the table fills the box */
/* a phone, the table wider than the screen: the button in the scrolling box at the table's end (nl-add-in, add_pos in
   global.js), no gutter */
html[data-theme^="new"] .nl-has-add.nl-add-in { position: relative; margin-right: 0; }
/* a tab on the end of the header row (add_pos in global.js sets where): the table's top right corner squared to meet it */
html[data-theme^="new"] .nl-has-add > table.dataTable { border-top-right-radius: 0; }
html[data-theme^="new"] .table_add_btn { position: absolute; left: var(--nl-add-left, auto); top: var(--nl-add-top, 0); z-index: 6; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: var(--nl-add-h, 26px);
    margin: 0; padding: 0 0 2px; border-radius: 0 7px 7px 0; background: #2d333b; color: var(--hf-brand); font: 600 20px/1 var(--nl-font); cursor: pointer; } /* dark in both looks */
/* the hint's anchor (HF_tips, global.js): with the button, not in the flow below the table; its right edge at the button's left */
html[data-theme^="new"] div:has(> .HF_tip[data-tipid$="_add_cols"]) { position: absolute !important; right: calc(100% - var(--nl-add-left, 100%)); top: var(--nl-add-top, 0); z-index: 7; }
/* the hint itself: as wide as its lines (Richest Congress Members' "- Stock Performance" each on one line, where 100px wrapped
   them), centered on the button (13px: half of it) whatever its width, where HF_tips' left assumes 100px */
html[data-theme^="new"] .HF_tip[data-tipid$="_add_cols"] { width: max-content; max-width: 200px; padding-right: 12px; left: 13px !important; transform: translateX(-50%); } /* (room for the X, which overlaps the right edge) */
/* phones: the button is at the screen's edge, and a centered hint stuck out past it (the page scrolled sideways and the menu
   button went off screen). It ends at the button's right edge instead, its arrow over the button, its X on the left */
@media (max-width: 640px) {
    html[data-theme^="new"] .HF_tip[data-tipid$="_add_cols"] { left: auto !important; right: -26px; transform: none; padding: 0 5px 0 12px; }
    html[data-theme^="new"] .HF_tip[data-tipid$="_add_cols"]::after { left: auto; right: 7px; margin-left: 0; }
    html[data-theme^="new"] .HF_tip[data-tipid$="_add_cols"] > .close { right: auto; left: -10px; }
}
html[data-theme^="new"] .table_add_btn:hover { background: #3d4550; }

/* the fund page's charts (Performance History, AUM): on a card, as its tables, not straight on the page, where the
   shaded area hardly showed */
html[data-theme^="new"] :is(#performance_vs_snp, #aum_historical_chart) { box-sizing: border-box; padding: 14px 16px 10px !important; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 8px; }
html[data-theme^="new"] .nl-rank-bar.hasTooltip { border-bottom: 0; cursor: help; } /* the funds comparison bar: its tooltip, not an underline */

/* ---------- The fund page's "What drove the return" (nl_contrib_* in newlook.js): under the S&P chart, the stocks behind
   its line in percentage points, then the sectors, the concentration and the best and worst picks, as cards ---------- */
html[data-theme^="new"] .nl-contrib { margin: 22px 0 8px; }
html[data-theme^="new"] .nl-ct-head h2 { margin: 0 0 4px; }
html[data-theme^="new"] .nl-ct-head p { margin: 0 0 14px; color: var(--hf-text-muted); font-size: 14px; }
html[data-theme^="new"] .nl-ct-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
html[data-theme^="new"] .nl-ct-card { box-sizing: border-box; min-width: 0; padding: 14px 16px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 8px; }
html[data-theme^="new"] .nl-ct-main { grid-column: 1 / -1; }
html[data-theme^="new"] .nl-ct-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
html[data-theme^="new"] .nl-ct-card h3 { margin: 0 0 8px; font: 600 14px/1.3 var(--nl-font); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-ct-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(60px, 34%) 52px; align-items: center; gap: 8px; padding: 5px 0; color: var(--hf-text); text-decoration: none; font-size: 13.5px; }
html[data-theme^="new"] a.nl-ct-row:hover { text-decoration: none; background: var(--hf-row-hover); }
html[data-theme^="new"] .nl-ct-row > b { font: 600 13.5px var(--nl-font-data); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-ct-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-ct-bar { height: 10px; border-radius: 3px; background: var(--hf-surface-sunken); overflow: hidden; }
html[data-theme^="new"] .nl-ct-bar i { display: block; height: 100%; border-radius: 3px; }
html[data-theme^="new"] .nl-up-bg { background: var(--hf-pos); }
html[data-theme^="new"] .nl-down-bg { background: var(--hf-neg); }
html[data-theme^="new"] .nl-ct-val { text-align: right; font: 600 13.5px var(--nl-font-data); }
html[data-theme^="new"] .nl-ct-sec { grid-template-columns: minmax(0, 1fr) minmax(40px, 28%) 52px; }
html[data-theme^="new"] .nl-ct-sec .nl-ct-name { color: var(--hf-text); }
html[data-theme^="new"] .nl-ct-note, html[data-theme^="new"] .nl-ct-sub { margin: 8px 0 0; color: var(--hf-text-muted); font-size: 13px; }
html[data-theme^="new"] .nl-ct-sub { margin: -4px 0 8px; }
html[data-theme^="new"] .nl-ct-none { margin: 4px 0; color: var(--hf-text-faint); font-size: 13px; }
html[data-theme^="new"] .nl-ct-big { font: 700 32px/1.1 var(--nl-font); color: var(--hf-text-strong); margin: 4px 0 6px; }
html[data-theme^="new"] .nl-ct-card p { line-height: 1.45; }
html[data-theme^="new"] .nl-ct-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
html[data-theme^="new"] .nl-ct-pick { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 5px 0; text-decoration: none; color: var(--hf-text); }
html[data-theme^="new"] .nl-ct-pick b { font: 600 13.5px var(--nl-font-data); color: var(--hf-text-strong); }
html[data-theme^="new"] .nl-ct-pick span { justify-self: end; font: 600 13.5px var(--nl-font-data); }
html[data-theme^="new"] .nl-ct-pick small { grid-column: 1 / -1; color: var(--hf-text-faint); font-size: 12px; }
html[data-theme^="new"] a.nl-ct-pick:hover b { color: var(--hf-link); }
@media screen and (max-width: 760px) {
    html[data-theme^="new"] .nl-ct-grid, html[data-theme^="new"] .nl-ct-cols { grid-template-columns: 1fr; }
    html[data-theme^="new"] .nl-ct-row { grid-template-columns: 50px minmax(0, 1fr) 30% 50px; }
    html[data-theme^="new"] .nl-ct-sec { grid-template-columns: minmax(0, 1fr) 34% 50px; }
}

/* ---------- 13D filers (13d-filerDev.php, the stock page's 13D Filers tab; nl_bh_* in newlook.js) ---------- */
/* the filer's initials where a fund has its photo (a circle for a person), and what its stakes are, under the strip */
html[data-theme^="new"] .nl-bh-av { display: flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 8px; background: var(--hf-accent-bg); color: var(--hf-accent); font: 700 20px/1 var(--nl-font); letter-spacing: .02em; }
html[data-theme^="new"] .nl-bh-av.nl-bh-round { border-radius: 50%; }
html[data-theme^="new"] .nl-bh-note { max-width: 80ch; margin: 4px 0 18px; color: var(--hf-text-muted); font-size: 14.5px; line-height: 1.55; }
/* Filer (stock tab): the name, its kind and a group's other members under it */
html[data-theme^="new"] .nl-bh-who { display: flex; flex-direction: column; justify-content: center; min-height: 44px; line-height: 1.3; }
html[data-theme^="new"] .nl-bh-name { font-weight: 600; color: var(--hf-text-strong); text-decoration: none; }
html[data-theme^="new"] .nl-bh-name:hover { color: var(--hf-link); text-decoration: underline; }
html[data-theme^="new"] .nl-bh-who small { font-size: 12.5px; color: var(--hf-text-muted); }
html[data-theme^="new"] .dataTable.nl-pin-cut td[data-pin="filer"] .nl-bh-who > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* cut with dots as the column folds (nl_pin_fold) */
html[data-theme^="new"] .nl-bh-more { color: var(--hf-link); border-bottom: 1px dashed currentColor; cursor: help; }
/* % of Class: the figure over a bar out of 100%, and a Group tag */
html[data-theme^="new"] .nl-bh-pct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
html[data-theme^="new"] .nl-bh-pct b { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .nl-bh-bar { display: block; flex: 0 0 100%; max-width: 96px; height: 4px; border-radius: 2px; background: var(--hf-border-light); }
html[data-theme^="new"] .nl-bh-bar i { display: block; height: 100%; min-width: 2px; border-radius: 2px; background: var(--hf-accent); opacity: .6; }
html[data-theme^="new"] .nl-bh-grp { padding: 0 6px; border-radius: 999px; background: var(--hf-surface-sunken); color: var(--hf-text-muted); font-size: 11.5px; font-weight: 600; line-height: 18px; cursor: help; }
html[data-theme^="new"] .nl-bh-chg small .af_tag { margin-left: 2px; vertical-align: 1px; }
/* the figures with a tooltip are underlined under the figure only, not across the cell; the value at the cells' size;
   Latest Activity's tag goes under the shares when they don't fit beside it */
html[data-theme^="new"] .dataTable .nl-sc-two > b.hasTooltip, html[data-theme^="new"] .dataTable .nl-sc-two > b > .hasTooltip { align-self: flex-start; }
html[data-theme^="new"] .dataTable td[align="right"] .nl-sc-two > b.hasTooltip { align-self: flex-end; }
html[data-theme^="new"] .dataTable .nl-bh-val { font-size: 14.5px; font-variant-numeric: tabular-nums; }
html[data-theme^="new"] .dataTable .nl-bh-chg small { white-space: normal; line-height: 1.5; }
html[data-theme^="new"] .dataTable .nl-bh-chg b.nl-bh-amend { color: var(--hf-text-muted); font-weight: 500; }
html[data-theme^="new"] :is(#blockholder_stakes, #stock_blockholders) :is(td.nl-gap-l, th[data-field="percentChange"]) { padding-left: 18px; } /* off the right-aligned value before it */
html[data-theme^="new"] .dataTable a.nl-bh-sec { text-decoration: none; color: inherit; } html[data-theme^="new"] .dataTable a.nl-bh-sec .nl-hft-date > span:first-child { color: var(--hf-link); } html[data-theme^="new"] .dataTable a.nl-bh-sec:hover .nl-hft-date > span:first-child { text-decoration: underline; } /* Filed: to the filing on EDGAR */
/* Activist Stock Picks (nl_act_* in newlook.js): the holders' count under the ownership bar, the filing's month by Latest */
html[data-theme^="new"] .nl-bh-pct small.nl-act-n { flex: 0 0 100%; font-size: 12px; color: var(--hf-text-muted); line-height: 1.3; }
html[data-theme^="new"] .nl-by .nl-act-when { color: var(--hf-text-faint); font-size: 11.5px; }
html[data-theme^="new"] #activist_trades td.nl-gap-l { padding-left: 18px; } /* Filed, off the right-aligned cost before it */
/* tooltips without the dashed underline: the 52-week range bar, the group tag, the mini table's latest activity */
html[data-theme^="new"] :is(.nl-r52, .nl-bh-grp, .nl-act-latest).hasTooltip { border-bottom: 0; cursor: help; }
html[data-theme^="new"] #activist_stocks td.nl-act-stk { padding-right: 16px; } /* the mini table off the wrapper's edge */
/* Latest Trades' 3 newest, locked over the table (nl_act_loaded): the panel above the header, its rows flush */
html[data-theme^="new"] .nl-hot-lock.nl-act-lock-top { margin: 0 0 10px; }

/* ---------- The app (newlook.js's app section): the installed app's back button, the Add to Home Screen steps, and My
   Tracker's "Notifications on this device" card ---------- */
/* back: a chevron left of the logo (nl_back_button); at phone widths the logo gives up the room for it */
html[data-theme^="new"] #cssmenu .nl-back { float: left; position: relative; z-index: 124; width: 40px; height: 46px; padding: 0; border: 0; background: none; color: var(--hf-menu-text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
html[data-theme^="new"] #cssmenu .nl-back::before { content: ''; display: block; width: 24px; height: 24px; margin: 0 auto; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme^="new"] #cssmenu .nl-back:active { background: var(--hf-menu-hover-bg); }
html[data-theme^="new"] #cssmenu .nl-back:focus-visible { outline: none; background: rgba(255, 255, 255, .12); border-radius: 8px; }
@media screen and (max-width: 1000px) {
    html[data-theme^="new"].nl-has-back .logo img { width: 170px; height: auto; margin-top: 5px; margin-left: 6px; } /* 217 x 46 at 170: about 36px tall */
}
@media screen and (max-width: 360px) {
    html[data-theme^="new"].nl-has-back .logo img { width: 145px; margin-top: 7px; }
}
/* the steps for Add to Home Screen, in the Alerts tab's card */
html[data-theme^="new"] .nl-app-steps { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: nl-step; }
html[data-theme^="new"] .nl-app-steps li { position: relative; margin: 0 0 12px; padding-left: 34px; font-size: 15px; line-height: 1.5; counter-increment: nl-step; }
html[data-theme^="new"] .nl-app-steps li::before { content: counter(nl-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--hf-brand); color: var(--hf-on-brand); font: 600 13px/24px var(--nl-font); text-align: center; }
html[data-theme^="new"] .nl-app-share { width: 18px; height: 18px; vertical-align: -3px; color: #0a84ff; } /* the iPhone's own share icon, in its blue */
/* My Tracker, Alerts tab: the card (nl_push_card) */
html[data-theme^="new"] .nl-push { margin: 40px 0 8px; padding: 18px 20px 20px; background: var(--hf-surface); border: 1px solid var(--hf-border); border-radius: 10px; }
html[data-theme^="new"] .nl-push h2 { margin: 0 0 4px; }
html[data-theme^="new"] .nl-push-lead { margin: 0 0 16px; color: var(--hf-text-muted); font-size: 14px; line-height: 1.45; }
html[data-theme^="new"] .nl-push-state { min-height: 44px; font-size: 15px; line-height: 1.5; }
html[data-theme^="new"] .nl-push-state p { margin: 0; }
html[data-theme^="new"] .nl-push-state .nl-app-steps { margin-top: 12px; }
html[data-theme^="new"] .nl-push-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 6px;
    background: var(--hf-brand); color: var(--hf-on-brand); font: 600 15px var(--nl-font); cursor: pointer; }
html[data-theme^="new"] .nl-push-btn:hover { background: #ffc629; color: var(--hf-on-brand); text-decoration: none; } /* Telegram's is a link: not a link's blue, underlined */
html[data-theme^="new"] .nl-push-btn:focus-visible { outline: 2px solid var(--hf-focus); outline-offset: 2px; }
html[data-theme^="new"] .nl-push-btn .icon-bell::before { margin: 0; }
html[data-theme^="new"] .nl-push-state .nl-push-note { margin-top: 8px; color: var(--hf-text-muted); font-size: 14px; }
html[data-theme^="new"] .nl-push-state .nl-push-ok { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; color: var(--hf-pos); }
html[data-theme^="new"] .nl-push-tick { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--hf-pos); }
html[data-theme^="new"] .nl-push-tick::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--hf-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
html[data-theme^="new"] .nl-push-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
html[data-theme^="new"] .nl-push-link { min-height: 36px; padding: 0 2px; border: 0; background: none; color: var(--hf-link); font: 14px var(--nl-font); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px; }
html[data-theme^="new"] .nl-push-link:disabled { opacity: .5; cursor: default; }
html[data-theme^="new"] .nl-push-state .nl-push-warn { font-weight: 600; color: var(--hf-warn-text); }
html[data-theme^="new"] .nl-push-plan { margin: 16px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--hf-highlight-bg); color: var(--hf-text); font-size: 14px; } /* over both cards */
html[data-theme^="new"] .nl-push-state .nl-push-msg { margin-top: 10px; font-size: 14px; color: var(--hf-text); }
/* the Telegram card before it (my_tracker.php): the same card, its two steps numbered; the two side by side, as tall as each
   other, where there's room, else one over the other, 16px apart */
html[data-theme^="new"] .nl-push-pair { display: grid; gap: 16px; margin: 16px 0 8px; }
html[data-theme^="new"] .nl-push-pair > .nl-push { margin: 0; }
@media screen and (min-width: 800px) {
    html[data-theme^="new"] .nl-push-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html[data-theme^="new"] .nl-tg h2 { display: flex; align-items: center; gap: 8px; }
html[data-theme^="new"] .nl-tg-steps { margin: 0; padding-left: 22px; list-style: decimal; }
html[data-theme^="new"] .nl-tg-steps li { margin: 0 0 10px; padding-left: 4px; }
html[data-theme^="new"] .nl-tg-steps li:last-child { margin-bottom: 0; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-tg-steps .nl-push-btn { vertical-align: middle; text-decoration: none; }
html[data-theme^="new"] .nl-push-devices { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hf-border-light); }
html[data-theme^="new"] .nl-push-devices h3 { margin: 0 0 4px; font: 600 12px var(--nl-font); letter-spacing: .05em; text-transform: uppercase; color: var(--hf-text-muted); }
html[data-theme^="new"] .nl-push-devices ul { margin: 0; padding: 0; list-style: none; }
html[data-theme^="new"] .nl-push-devices li { display: flex; align-items: center; gap: 12px; min-height: 42px; border-bottom: 1px solid var(--hf-border-light); font-size: 14px; }
html[data-theme^="new"] .nl-push-devices li:last-child { border-bottom: 0; }
html[data-theme^="new"] .nl-push-dev { flex: 1; min-width: 0; }
html[data-theme^="new"] .nl-push-dev em { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--hf-accent-bg); color: var(--hf-accent); font-size: 12px; font-style: normal; white-space: nowrap; }
html[data-theme^="new"] .nl-push-when { color: var(--hf-text-muted); white-space: nowrap; }
@media screen and (max-width: 500px) {
    html[data-theme^="new"] .nl-push { padding: 16px 14px 18px; }
    html[data-theme^="new"] .nl-push-devices li { flex-wrap: wrap; gap: 0 12px; padding: 6px 0; }
    html[data-theme^="new"] .nl-push-dev { flex-basis: 100%; }
}

/* ---------- Help (nl_chat in newlook.js): a round button at the window's bottom right, the chat when someone's online, the
   contact window otherwise. Lifted over an ad pinned to the window's foot (--nl-chat-lift). Its name shows beside it on hover,
   with a × that puts it away; on a touch screen it comes and goes with the bar, so it isn't over what's being read. Over the
   desktop's side ad column (z-index 1000, global.css) and under the windows and hover texts (10000); on a touch screen under
   the bar (10), whose menu opens over the page ---------- */
html[data-theme^="new"] .nl-chat { position: fixed; right: 16px; bottom: calc(16px + var(--nl-chat-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 1001;
    transition: transform .2s ease, opacity .2s ease, bottom .2s ease; }
html[data-theme^="new"] .nl-chat[hidden] { display: none; }
html[data-theme^="new"] .nl-chat-btn { display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 50%;
    background: var(--hf-brand); color: var(--hf-on-brand); box-shadow: 0 4px 14px rgba(16, 24, 40, .22); cursor: pointer; }
html[data-theme^="new"] .nl-chat-btn::before { content: ''; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7.9%2020A9%209%200%201%200%204%2016.1L2%2022Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
html[data-theme^="new"] .nl-chat-btn:hover { filter: brightness(1.05); }
html[data-theme^="new"] .nl-chat-btn:focus-visible { outline: 2px solid var(--hf-focus); outline-offset: 2px; }
html[data-theme^="new"] .nl-chat-tip { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; background: var(--hf-text-strong); color: var(--hf-surface);
    font: 500 13px/1.3 var(--nl-font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
html[data-theme^="new"] .nl-chat-x { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; margin: 0; padding: 0; border: 1px solid var(--hf-border); border-radius: 50%;
    background: var(--hf-surface); color: var(--hf-text-muted); font: 600 13px/18px var(--nl-font); text-align: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
html[data-theme^="new"] .nl-chat:hover :is(.nl-chat-tip, .nl-chat-x), html[data-theme^="new"] .nl-chat:focus-within :is(.nl-chat-tip, .nl-chat-x) { opacity: 1; }
@media (hover: none) {
    html[data-theme^="new"] .nl-chat { z-index: 9; }
    html[data-theme^="new"] :is(.nl-chat-tip, .nl-chat-x) { display: none; }
    html[data-theme^="new"].nl-bar-up .nl-chat { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }
}