:root {
    --page-background: #f8f9fa;
    --page-text: black;
    --long: #008600;
    --long-dark: #005700;
    --long-text: #008600;
    --long-light-text: black;
    --short: rgba(255, 5, 5, 0.85);
    --short-dark: #b20505;
    --short-light-text: black;
    --multi-scan: #4d00d1;
    --white: rgba(247, 237, 227, 0.75);
    --sector: hsla(170, 56%, 23%, 1);
    --sector-dark: #0b2823;
    --sector-light-text: black;
    --common: black;
    --common-header: white;
    --action-yellow: hsla(34, 95%, 47%, 1);
    --light-gray: rgba(163, 167, 174, 0.6);
    --flat: rgba(100, 149, 237, .54);
    --background-long: #ffffff;
    --background-short: #080000;
    --background-flat: #030507;
    --background-sector: #020807;
    --action-button: rgb(76, 82, 97);
    --bs-btn-close-color: black;
}

.value-red {
    color: red !important;
}

.value-flat {
    color: transparent;
}

.value-green {
    color: #080 !important;
}

.value-yellow {
    color: darkorange !important;
}

.action-button {
    float: left;
    margin: 1px;
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--action-button);
    border-color: white;
    color: white !important;
    margin-top: 0px;
    height: 21px;
}

.action-button:hover {
     cursor: pointer !important;
     background-color: var(--white);
     color: black !important;
     border-color: black;
 }

 #button-guide {
    margin-left: 0;
 }
 
.action-button-guide-mobile {
    display: block;
    color: white !important;
    background-color: rgba(56, 132, 255, 1) !important;
    z-index: 2030;
}

.action-button-guide-mobile:hover {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}

.action-button-patreon-mobile {
    display: block;
    color: white !important;
    background-color: #ff424d;
    z-index: 2030;
}

.action-button-discord-mobile {
    display: block;
    color: white;
    background-color: hsla(227, 58%, 65%, 1.0);
    z-index: 2030;
}

.action-button-new:hover {
    background: black !important;
}

.action-button-new:hover {
    background: none !important;
    font-weight: bold;
    color: var(--action-yellow) !important;
    cursor: pointer;
}

.action-button-new:hover {
    background: none !important;
}

#share-code {
    width: 300px;
}

#import {
    left: 726px;
    position: absolute;
    top: 32px;
    width: 100px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 11px;
}

.user-dot {
    margin-left: 3px;
    margin-right: -2px;
    color: lime !important;
}

.supporter-dot {
    margin-left: 3px;
    margin-right: -2px;
    color: #ff424d !important;
}

#user-count {
    left: 325px;
    position: absolute;
    top: 31px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
    width: 500px;
    text-align: right;
}

#market-events {
    left: 593px;
    position: absolute;
    top: 31px;
    width: 100px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
}

.news-event-time {
    float: left;
    width: 170px;
}

.news-event-title {
    float: left;
    font-weight: 600;
}

.calendar-day-title {
    float: none;
    font-size: 16px;
    font-weight: 900;
}

.calendar-day {
    float: none;
    margin-bottom: 13px;
}

.news-row {
    float: none;
    padding-bottom: 3px;
}

.news-row-high {
    color: var(--short);
}

.news-row-medium {
    color: var(--action-yellow);
}

.news-row-low {
    color: var(--common);
}

#dark-mode-switch {
    left: 835px;
    position: absolute;
    top: 31px;
    width: 100px;
    z-index: 500;
}

#dark-mode-switch-modal {
    margin-left: 8px;
    margin-top: -11px;
    padding-bottom: 14px;
}

#sun {
    float: left;
    margin-right: 6px;
    margin-top: 3px;
    color: var(--common);
    cursor: pointer;
}

#switch {
    float: left;
    cursor: pointer;
}

.switch-settings {
    margin-top: -9px;
    cursor: pointer !important;
}

.custom-switch .custom-control-input.custom-control-input-lg + .custom-control-label::before {
    cursor: pointer;
}

.custom-switch .custom-control-input.custom-control-input-lg + .custom-control-label::after {
    cursor: pointer;
}

#switch-text-sun {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    z-index: 2030;
    margin-right: 6px;
}

#switch-text-moon {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    z-index: 2030;
    margin-left: -3px;
}

#switch-text-settings {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    margin-left: 63px;
    margin-top: -4px;
}

#switch-text:hover {
    text-decoration: underline;
}

#moon {
    float: left;
    margin-left: 4px;
    margin-right: 6px;
    margin-top: 3px;
    color: var(--common);
    cursor: pointer;
}

.action-button-dark-mode-toggle {
    cursor: pointer;
    margin-right: 30px;
}

.grid-header-region-long {
    background-color: var(--page-background);
}

.grid-header-region-short {
    background-color: var(--page-background);
}

.grid-header-region-flat {
    background-color: var(--page-background);
}

.grid-header-region-sector {
    background-color: var(--page-background);
}

.grid-header-symbol {
    padding-left: 0px !important;
    text-decoration: none !important;
    width: 95px !important;
    padding-left: 42px !important;
    text-decoration: underline !important;
}

.grid-header-symbol {
    padding-left: 0px !important;
    text-decoration: none !important;
    padding-left: 42px !important;
    text-decoration: underline !important;
}

.scan-defs-text {
    color: antiquewhite;
}

.scan-defs-text {
    clear: both;
    font-size: 11px;
    margin-top: -4px;
    margin-bottom: 5px;
    padding: 0px;
    padding-top: 4px;
    padding-left: 7px;
    margin-left: 139px;
    width: 677px;
    height: 23px;
    text-overflow: clip;
    overflow: hidden;
    text-shadow: 1px 1px 2px black;
}

.scan-defs-text-long {
    color: var(--common-header);
    font-weight: 700 !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, hsl(241deg 78% 10%) 97%);
}

.scan-defs-text-long {
    margin-top: -4px;
    width: 719px;
    height: 24px;
    margin-left: 136px;
    background: rgb(0,87,0);
    background: linear-gradient(90deg, rgba(0,87,0,1) 0%, rgba(0,87,0,0) 97%);
}

.scan-defs-text-long {
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, hsl(241deg 78% 10%) 97%);
}

.scan-defs-text-long {
    background: rgb(0,87,0);
    background: linear-gradient(90deg, rgba(0,87,0,1) 0%, rgba(0,87,0,0) 97%);
}

.scan-defs-text-short {
    background-color: var(--short-dark);
    color: var(--common-header);
    font-weight: 700 !important;
}

.scan-defs-text-short {
    background: rgb(178,5,5);
    background: linear-gradient(90deg, rgba(178,5,5,1) 0%, rgba(0,0,0,0) 100%);
    margin-top: -4px;
    width: 719px;
    height: 24px;
    margin-left: 136px;
}

.scan-defs-text-short {
    background: rgb(178,5,5);
    background: linear-gradient(90deg, rgba(178,5,5,1) 0%, rgba(0,0,0,0) 100%);
}

.scan-defs-text-flat {
    background-color: rgba(100, 148, 237, 0.33);
    color: antiquewhite !important;
    font-weight: 700 !important;
}

.scan-defs-text-flat {
    border: solid 1px var(--flat);
    border-left: solid 1px var(--flat);
    border-bottom: solid 1px var(--flat);
    border-right: solid 1px var(--flat);
    margin-top: -5px;
    width: 719px;
    height: 24px;
    margin-left: 136px;
}

.scan-defs-text-sector {
    background-color: var(--sector);
    color: antiquewhite !important;
    font-weight: 700 !important;
}

.scan-defs-text-sector {
    border: solid 1px var(--sector);
    border-left: solid 1px var(--sector);
    border-bottom: solid 1px var(--sector);
    border-right: solid 1px var(--sector);
    margin-top: -5px;
    width: 677px;
    height: 24px;
    margin-left: 136px;
}

.scan-defs-text-custom {
    background-color: var(--custom);
    font-weight: 700 !important;
}

.scan-defs-text-custom {
    color: white !important;
    border: solid 1px var(--custom);
    border-left: solid 1px var(--custom);
    border-bottom: solid 1px var(--custom);
    border-right: solid 1px var(--custom);
    margin-top: -5px;
    width: 677px;
    height: 24px;
}

.scan-title {
    float: left;
    padding-top: 2px;
    max-width: 98px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.watchlist-label {
    text-overflow: clip;
    overflow: hidden;
}

.watchlist-label {
    border: none;
    border-bottom: 1px solid;
    border-color: transparent;
    width: 135px;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    padding-left: 7px;
    border-right: 1px solid;
}

.featured-scan {
    margin-left: 0px;
    padding-left: 0px;
    margin-right: 2px;
    font-size: 9px;
}

.popular-flame {
    float: right;
    margin-right: 2px;
}

.featured-scan-wrapper {
    float: right;
    margin-right: 0px;
}

#tab-short {
    #background-color: var(--short);
}

#tab-short {
    color: black;
    width: 128PX;
    #background-color: hsla(0, 100%, 52%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    margin-left: 0px;
    margin-top: 0px;
}

#tab-short {
    #background-color: hsla(0, 100%, 52%, .7);
}

.screener-grid-symbol-news {
    width: 23px;
    text-overflow: clip;
    display: flex;
    margin-left: 0px;
    color: var(--page-background) !important;
    visibility: hidden;
}

.screener-grid-symbol-news-highlight {
    color: orange;
    visibility: visible;
}

.screener-grid-symbol-news-highlight-long {
    color: gray;
    visibility: visible;
}

.screener-grid-symbol-news-highlight-short {
    color: gray;
    visibility: visible;
}

.screener-grid-symbol {
    width: 69px;
    text-overflow: clip;
    display: flex;
}

.symbol-link {
    font-weight: 600;
}

.symbol-link-short {
    color: var(--short);
    font-weight: bold;
}

.symbol-link-sector {
    color: var(--sector);
    font-weight: bold;
}

.symbol-link-long {
    color: var(--long-text);
    font-weight: bold;
}

#ticker-search {
    width: 103px;
    height: 22px;
    float: left;
    font-size: 11px;
    margin-right: 8px;
    margin-left: 4px;
    margin-top: 4px;
    border-radius: 2px;
    background-color: white !important;
    #color: var( --common) !important;
    border-color: #707470;
    border: 1px solid;
    padding-left: 5px;
    font-weight: 1000;
    /* text-transform: uppercase; */
    margin-left: 5px;
}

.mini-grid-search {
    width: 135px;
    float: left;
    margin-left: 0px;
    margin-top: -4px;
}

#search-results-clear-mini {
    color: var(--common);
    padding-left: 5px;
    cursor: pointer;
    margin-left: -32px;
    margin-top: 8px;
}

.watchlist-heading-group {
    background-color: red;
    padding: 20px;
}

.watchlist-label-search-Sector {
    background-color: rgba(26,91,81,1);
    height: 34px;
    width: 135px;
    /* margin-left: 2px; */
    border-color: rgba(183, 189, 183, 0.5);
    border: none !important;
    margin-bottom: -5px;
    margin-top: 2px;
}

.watchlist-label-search-Up {
    background-color: rgb(0,134,0);
    height: 34px;
    width: 135px;
    /* margin-left: 2px; */
    border-color: rgba(183, 189, 183, 0.5);
    border: none !important;
    margin-bottom: -6px;
    margin-top: 2px;
}

.watchlist-label-search-Down {
    background-color: rgb(217,4,4);
    height: 34px;
    width: 135px;
    /* margin-left: 2px; */
    border: none !important;
    margin-bottom: -6px;
    margin-top: 2px;
}

/* 2026-07-22: make the search box the containing block for the absolute clear-X
   so the X scrolls with the menu instead of staying pinned to the viewport. */
.watchlist-label-search-Up,
.watchlist-label-search-Down,
.watchlist-label-search-Sector,
.watchlist-label-search-Flat,
.watchlist-label-search-sector {
    position: relative;
}

.watchlist-label-disabled-long {
    background-color: hsla(120, 100%, 26%, 0.25) !important;
    color: gray;
    border-color: dimgray;
}

.watchlist-label-disabled-short {
    color: dimgray !important;
    border-color: dimgray !important;
    background-color: rgba(255, 5, 5, 0.10);
}

.watchlist-label-disabled-sector {
    color: dimgray !important;
    border-color: dimgray;
    background-color: hsla(170, 56%, 23%, .10);
}

.watchlist-label-search-sector {
    background-color: hsla(170, 56%, 23%, .10);
    height: 34px;
    width: 135px;
    margin-left: 2px;
    border: 1px solid;
    margin-bottom: 0px;
    margin-top: 2px;
}

.watchlist-label-disabled:hover {
    cursor: auto !important;
}

.grid-row:hover {
    outline: 2px solid gray;
}

.grid-row-selected-long {
    outline: 2px solid var(--long);
}

.grid-row-selected-sector {
    outline: 1px solid var(--sector);
}

.grid-row-selected-short {
    outline: 1px solid var(--short);
}

.filter-region {
    border: 1px solid #444;
    border-radius: 6px;
    color: antiquewhite !important;
    margin-bottom: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
}

.modal-body {
    background-color: #ffffff !important;
    overflow-y: scroll;
    max-height: 84vh !important;
    color: var(--common);
}

.text-white {
    color: var(--common) !important;
}

.modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 16px 20px !important;
}

.modal-footer {
    background-color: #ffffff !important;
    justify-content: flex-start !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 16px 20px !important;
    gap: 10px !important;
}

#filter-intro {
    color: var(--common) !important;
}

#filter-intro {
    cursor: pointer;
    margin-bottom: 10px;
}

.modal-title {
    color: var(--common) !important;
    font-weight: 600 !important;
    font-size: 1.35rem !important;
}

.modal-header .close,
.modal-header .btn-close,
.modal-header button[aria-label="Close"] {
    color: #666 !important;
    opacity: 0.8 !important;
    font-size: 1.2rem !important;
}

.modal-header .close:hover,
.modal-header .btn-close:hover,
.modal-header button[aria-label="Close"]:hover {
    color: #000 !important;
    opacity: 1 !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#filtered-out-criteria {
    color: var(--common);
}

#filtered-out-criteria {
    clear: both;
    font-family: monospace;
    font-size: 11px;
    padding-top: 4px;
    padding-bottom: 2px;
    margin-bottom: 0;
    line-height: 1.5;
    padding-right: 24px;
    overflow: hidden;
    /* Flush-left like multi-scan: removed the legacy 41px indent. */
}

#filtered-out-criteria.filter-summary-expanded {
    overflow: visible;
    max-height: none;
}

#filtered-out-criteria.filter-summary-collapsed .filter-summary-content {
    max-height: 3.6em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

#filtered-out-criteria.filter-summary-expanded .filter-summary-content {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

/* When a parent passes OnEditFilter to <ShowFilters>, the whole filter
   summary becomes a clickable target that opens the filter modal. */
#filtered-out-criteria.filter-summary-clickable {
    cursor: pointer;
}
#filtered-out-criteria.filter-summary-clickable:hover .filter-display-heading {
    text-decoration: underline;
}

.filter-summary-toggle {
    position: absolute;
    right: 4px;
    top: 2px;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    z-index: 1;
    line-height: 1;
    background: rgba(80,80,80,0.85);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.3);
}

.filter-summary-toggle:hover {
    background: rgba(60,60,60,0.95);
    border-color: rgba(255,255,255,0.6);
}

#filtered-out-show-without {
    color: var(--action-yellow);
}

#filtered-out-show-without {
    float: left;
    cursor: pointer;
    margin-left: 3px;
    font-style: italic;
}

.filtered-out {
    color: var(--action-yellow);
    font-weight: 700;
}

::-webkit-scrollbar-track-piece {
    background-color: #ccc8bb;
}

::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #aaa59c;
}

::-webkit-scrollbar-corner {
    background: #aaa59c;
    scrollbar-color: auto transparent;
}

.grid-row-stripe-sector:nth-child(odd) {
    background: linear-gradient(90deg, rgba(131, 197, 190, 0.11) 0%, rgba(131, 197, 190, 0.11) 60%, transparent 100%);
}

.grid-row-stripe-long:nth-child(odd) {
    background: linear-gradient(90deg, rgba(0, 46, 4, 0.05) 0%, rgba(0, 46, 4, 0.05) 80%, transparent 100%);
}

.grid-row-stripe-short:nth-child(odd) {
    background: linear-gradient(90deg, rgba(133, 0, 0, 0.05) 0%, rgba(133, 0, 0, 0.05) 80%, transparent 100%);
}

.grid-row-stripe-flat:nth-child(odd) {
    background: linear-gradient(90deg, rgba(6, 23, 55, 0.22) 0%, rgba(6, 23, 55, 0.22) 80%, transparent 100%);
}

.tippy-content {
    background-color: var(--page-background) !important;
    color: var(--common);
    box-shadow: rgba(0,0,0,0.25) 0px 10px 40px;
    width: 350px;
    border: 1px solid;
    border-color: white;
    z-index: 99999;
}

.not-starred-long:hover {
    color: black;
    cursor: pointer;
}

.not-starred-short {
    color: gray;
    cursor: pointer;
}

.not-starred-short:hover {
    color: black;
    cursor: pointer;
}

.not-starred-sector {
    color: gray;
    cursor: pointer;
}

.not-starred-sector:hover {
    color: black;
    cursor: pointer;
}

.is-starred-yellow {
    color: var(--action-yellow);
}

.is-starred-green {
    color: hsla(120, 100%, 30%, 1);
}

.is-starred-red {
    color: red;
}

.form-group {
    color: var(--common);
}

.blazored-toast-success {
    background-color: green;
}

.blazored-toast-warning {
    background-color: rgba(255, 5, 5, 0.67);
}

.blazored-toast-error {
    background-color: rgba(255, 5, 5, 0.67);
}

#search-results {
    background-color: var(--page-background) !important;
    color: var(--common);
    border-color: hsl(34, 78%, 91%, 45%) !important;
    border: 1px solid;
    box-shadow: rgba(0,0,0,0.25) 0px 10px 40px;
    z-index: 100 !important;
    min-width: 400px !important;
    margin-top: -4px;
    max-width: 649px;
    min-height: 317px;
    position: fixed;
    z-index: 5000 !important;
    padding: 9px;
}

#search-results {
    z-index: 100 !important;
}

#search-results {
    min-width: 500px;
    z-index: 5000 !important;
}

.search-result-group-label:hover {
    font-weight: bold;
}

.search-result-group-label:hover {
    cursor: pointer;
}

#windows-link {
    color: var(--common);
}

.chart-selection-built-in {
    color: rgba(100, 149, 237, 1);
    border-color: rgba(100, 149, 237, 1);
}

.chart-selection-built-in:hover {
    color: white;
    background-color: rgba(100, 149, 237, 1);
    border-color: rgba(100, 149, 237, 1);
}

.chart-selection-built-in-selected {
    color: white;
    background-color: rgba(100, 149, 237, 1);
    border-color: rgba(100, 149, 237, 1);
}

.chart-selection-red {
    color: var(--short);
    border-color: var(--short);
}

.chart-selection-red:hover {
    color: white;
    background-color: var(--short);
    border-color: var(--short);
}

.chart-selection-red-selected {
    color: white;
    background-color: var(--short);
    border-color: var(--short);
}

.custom-select {
    font-size: 14px !important;
    margin-top: 2px;
    float: left;
    width: 204px !important;
}

.loading-spin-overlay {
    background-color: var(--page-background);
}

.loading-spin-overlay {
    position: fixed;
    z-index: 5000 !important;
    height: 100%;
    width: 100%;
}

.spinner-center {
    background-color: var(--page-background);
}

.spinner-center {
    position: fixed;
    visibility: visible;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    text-align: center;
    min-width: 300px;
}

.loading-spinner {
    color: var(--long-text);
    font-weight: bold;
    width: 10px;
    height: 10px;
}

.action-button-new {
    color: var(--action-yellow) !important;
    background-color: var(--page-background);
}

.action-button-new {
    color: var(--action-yellow) !important;
    position: relative;
}

.whats-new-button {
}

.whats-new-alert {
    color: #ff9800;
    margin-left: 4px;
}

/* What's New modal body — scroll long release notes, inherit theme colors. */
.whats-new-modal-body {
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.5;
    /* !important beats the centered-modal .modal-body { font-size:15px !important } rule */
    font-size: 14px !important;
}
.whats-new-modal-body h1,
.whats-new-modal-body h2,
.whats-new-modal-body h3,
.whats-new-modal-body h4 {
    margin-top: 0;
    font-size: 15px;
}
.whats-new-modal-body ul {
    padding-left: 20px;
}
.whats-new-modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.action-button-donate {
    color: white !important;
    border-color: #ff424d !important;
    background-color: #ff424d !important;
}

.action-button-donate {
    float: none;
    width: 132px;
    margin-top: -5px;
    height: 28px;
    font-size: 12px;
    padding-top: 0px;
    margin-top: -181px;
    font-weight: normal !important;
    border: 0px;
    height: 0px;
    /* 2026-07-22: absolute so this 0-height, -181px-margin hack element is OUT of the
       #menu-region scroll flow — in-flow it created phantom empty scroll space at the
       top of the now-overflow menu ("blocked out" area). Position/visual unchanged. */
    position: absolute;
}

.action-button-donate {
    margin-top: -5px;
    height: 28px;
    margin-top: -181px;
    height: 0px;
}

.action-button-contact {
    color: white;
    border-color: hsla(227, 58%, 65%, 0.78);
    background-color: hsla(227, 58%, 65%, 1.0);
}

.action-button-contact {
    float: none;
    width: 132px;
    margin-top: 0px !important;
    text-align: center;
    height: 28px;
    font-size: 9px !important;
    padding-top: 0px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-top: 0px;
}

.action-button-contact {
    margin-top: 0px !important;
    margin-top: 0px;
}

.action-button-contact:hover {
    background-color: hsla(227, 58%, 65%, .8);
    border-color: hsla(227, 58%, 89%, 0.8);
    color: white !important;
}

.watchlist-label-long {
    color: var(--long-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
}

.watchlist-label-custom-long {
    color: var(--long-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
    padding: 2px;
    padding-left: 6px;
}

.watchlist-label-short {
    color: var(--short-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
}

.watchlist-label-custom-short {
    color: var(--short-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
    padding: 2px;
    padding-left: 6px;
}

.watchlist-label-sector-selected {
    background: hsla(170, 56%, 33%, .12);
    color: hsl(170, 56%, 33%) !important;
    border-left: 3px solid hsl(170, 56%, 33%);
    padding-left: 6px;
    font-weight: 600;
    border-color: var(--sector) !important;
    border: 1px solid;
    font-weight: 900;
}

.watchlist-label-sector {
    color: var(--common);
    border-color: rgba(183, 189, 183, 0.5);
!important;
}

.watchlist-label-selected-long {
    background: var(--zb-green-tint);
    color: var(--zb-green) !important;
    border-left: 3px solid var(--zb-green);
    padding-left: 6px;
    font-weight: 600;
}

.watchlist-label-selected-short {
    background: var(--zb-red-tint);
    color: var(--zb-red) !important;
    border-left: 3px solid var(--zb-red);
    padding-left: 6px;
    font-weight: 600;
}

.watchlist-label-selected-custom-long {
    background: var(--zb-green-tint);
    color: var(--zb-green) !important;
    border-left: 3px solid var(--zb-green);
    padding-left: 6px;
    font-weight: 600;
}

.watchlist-label-selected-custom-short {
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
    color: white !important;
    padding-left: 6px;
    border: 1px solid;
    padding-left: 5px;
}

.watchlist-label-selected-custom {
    background-color: var(--sector);
    color: white !important;
    padding-left: 6px;
    border: 1px solid var(--sector);
    padding-left: 5px;
}

.main-bg-long {
    background-color: var(--page-background);
}

.main-bg-short {
    background-color: var(--page-background);
}

.main-bg-flat {
    background-color: var(--page-background);
}

.main-bg-sector {
    background-color: var(--page-background);
}

.pop-time {
    color: var(--action-yellow);
}

.pop-time {
    font-size: 10px;
    padding-top: 3px;
    margin-right: 4px;
    max-width: 20px;
    overflow: hidden;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    background-color: var(--page-background) !important;
    color: var(--page-text);
    min-width: 600px;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: -10px;
}

/* Phone viewport: drop the 600px desktop floor so the document tracks
   the actual viewport width. Note: this doesn't fix horizontal scroll
   on phones by itself — the page's actual scroll viewport is .main-bg
   (a position: fixed wrapper), not body, so the overflow-x rule lives
   there. This rule is just about not forcing the document wider than
   the screen. */
@media (max-width: 599px) {
    html, body {
        min-width: 0;
    }
}

#grid-header-label-rsrw {
    margin-left: 408px;
    margin-top: -10px;
    text-decoration: none !important;
    margin-bottom: -3px !important;
}

#grid-header-label-filler {
    width: 63px;
    height: 5px;
}

#grid-header-label-volume {
    margin-left: 310px;
    margin-top: -6px;
    text-decoration: none !important;
    margin-bottom: -6px !important;
}

.grid-header {
    float: left;
    font-size: 11px;
    color: var(--common) !important;
    font-weight: bold !important;
    cursor: pointer;
    max-height: 20px;
    margin-bottom: 1px;
    text-overflow: clip;
    overflow: hidden;
    /* Keep the header text and its sort icon on one line — if too wide the
       right edge (icon) clips instead of the icon wrapping to a second row. */
    white-space: nowrap;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

#sector-link {
    color: var(--common);
}

#sector-link {
    position: absolute;
    left: 200px;
    cursor: pointer;
}

.icon-custom-long {
    color: var(--common);
    position: absolute;
    left: 98px;
}

.custom-scan-icon-top {
    left: 145px !important;
}

.icon-custom-short {
    color: var(--common);
}

.icon-long {
    color: var(--long);
}

#support-split {
    background-color: var(--page-background);
}

#support-split {
    width: 2px;
    height: 25px;
    position: fixed;
    left: 134px;
    top: -2px;
}

.tab-sector {
    color: white;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
    background-color: rgba(74, 252, 234, 1);
    font-weight: 700;
}

.tab-sector {
    color: white;
    border-color: var(--long-text) !important;
    width: 47px;
    height: 26px;
    border: 0px solid;
    float: left;
    margin: 0px;
    margin-right: 0px;
    font-size: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--white);
    border-color: var(--white);
    text-align: center;
    cursor: pointer;
    overflow: clip;
    display: flex;
    align-items: center;
}

.tab-sector {
    color: white;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
}

.tab-sector-short {
    background-color: rgba(255, 5, 5, 0.8) !important;
    border-color: var(--short) !important;
    color: white !important;
    cursor: pointer;
}

.tab-sector-short:hover {
    border-color: antiquewhite !important;
}

.tab-sector-long {
    background-color: rgba(0, 255, 0, .8) !important;
    border-color: var(--long) !important;
    color: white !important;
    cursor: pointer;
}

.tab-sector-long:hover {
    border-color: antiquewhite !important;
}

.tab-sector-flat {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: white !important;
    cursor: pointer;
}

#tab-flat {
    color: white;
    width: 128px;
    border-color: var(--flat) !important;
    background-color: rgba(100, 149, 237, .99);
}

.grid-news {
    color: var(--common);
}

@media only screen and (min-width: 1000px) {
    #filter-region-left-col {
        float: left;
        width: 382px;
    }

    #filter-region-right-col {
        float: right;
        width: 372px;
    }
}

@media only screen and (max-width: 9999px) {
    /* Stack columns vertically and make all filter regions full width */
    #filter-region-left-col,
    #filter-region-right-col {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        display: block !important;
        clear: both !important;
    }

    .chart-toggle-overlay {
    }

    .filter-region,
    #filter-fund,
    #filter-price,
    #filter-volume,
    #filter-pattern,
    #filter-intraday,
    #filter-daily,
    #filter-sector,
    #filter-trend {
        width: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    #filter-daily,
    #filter-sector,
    #filter-trend {
        margin-top: 10px;
    }

    #filter-trend {
        height: 118px;
    }

    #header-right-section {
        position: absolute !important;
        top: 49px !important;
        width: 520px !important;
        left: 144px;
        justify-content: flex-start !important;
    }

    #updated {
        margin-top: 9px;
        position: absolute;
        left: 127px;
        top: 33px !important;
    }

    #updated-time {
        margin-top: -14px !important;
    }

    #logo {
        top:19px !important;
    }

    #header-text {
        top:9px !important;
        height: auto;
        margin-left: 5px;
        width: calc(100% - 10px);
        position: relative;
    }

    /* Ensure back-to-top button is visible at small viewports */
    .filter-back-to-top {
        right: 20px !important;
        bottom: 20px !important;
    }
}

/*@media only screen and (min-width: 999px) {*/
/*    #filter-region-left-col {*/
/*        float: left;*/
/*        width: 382px;*/
/*    }*/

/*}*/

#sidebar {
    width: 17px;
    cursor: pointer;
    background-color: var(--action-button);
    color: white !important;
    float: left;
    margin-top: 0px;
    margin-right: 3px;
    margin-left: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 1px;
    height: 21px;
    padding-top: 1px;
    padding-left: 3px;
}

#sidebar {
    padding-left: 1px;
    padding-left: 3px;
}

#sidebar:hover {
    cursor: pointer !important;
    background-color: white !important;
    color: black !important;
    border-color: black;
}

.sidebar-collapsed {
    left: 7px !important;
    padding-left: 2px !important;
}

.sidebar-expanded {
    left: 141px !important;
}

#top-menu-mobile {
    visibility: hidden;
}

#menu-mobile-direction {
    width: 142px;
    float: left;
    margin-top: 20px;
}

#menu-mobile-watchlists {
    width: 207px;
    float: left;
    margin-left: 5px;
    margin-top: 20px;
}

#charts {
    margin-right: 0px;
    position: fixed;
    background-color: var(--page-background) !important;
    top: 20px;
    z-index: 20;
    min-width:350px;
    margin-top:5px;
}

#charts-top-bar {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 8px;
    margin-bottom: 4px;
}

#charts-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#charts-disclaimer {
    font-size: 11px;
    color: var(--common) !important;
    text-align: left;
}


@media (max-width: 1200px) {
    #charts-top-bar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    #charts-disclaimer {
        text-align: left;
        margin-bottom: 4px;
    }
}

#updated-time {
    margin-top: 0px;
}

#updated-time-text {
    float:left;
}

#delayed-status {
    float: left;
    color: var(--action-yellow) !important
}

.delayed-data {
    /*
    color: var(--action-yellow);
    font-weight: bold;
    */
}

.delayed-data-link {
    color: var(--action-yellow) !important;
    font-weight: bold;
}

.icon-delayed {
    color: var(--action-yellow) !important;
}

#delayed-status:hover {
    cursor: pointer;
}

#titlebar {
    margin-bottom: 3px;
    margin-top: 3px;
}

a {
    color: var(--common) !important;
    text-decoration: underline;
}

.disclaimer a {
    color: var(--common) !important;
    text-decoration: underline;
}

.debug {
    color: var(--common) !important;
    font-size: 9px;
    margin-top: 10px;
}

a:link {
    text-decoration: underline;
}

#loading-text {
    margin: 10px;
    color: var(--white) !important;
}

.tab-content {
    padding-top: 0px !important;
}

#watchlist {
    float: left;
    margin-left: 5px;
    margin-top: -20px;
    min-width: 758px;
}

#reload {
    background-color: var(--white);
    margin-top: 3px;
    margin-left: 2px;
}

#button-region {
    margin-right: 30px;
}

.split-button-primary {
    color: white;
    background-color: black;
    color: var(--white);
    border-color: var(--white);
    height: 22px;
    padding-top: 0px;
    border-radius: 0px;
    margin-top: 1px;
}

.split-button-primary {
    color: white;
    color: var(--white);
}

.split-button-head {
    color: white;
    background-color: black;
    color: var(--white);
    border-color: var(--white);
    height: 22px;
    padding-top: 0px;
    border-radius: 0px;
    margin-top: 1px;
}

.split-button-head {
    color: white;
    color: var(--white);
}

.sector-labels {
    font-size: 11px;
    text-align: right;
    margin-left: 2px;
    margin-bottom: -11px;
}

.grid-cell-heading-val-1 {
    margin-left: 187px;
}

.grid-cell-heading-val-2 {
    margin-left: 25px;
}

.sector-link-selected {
    color: var(--action-yellow) !important;
    text-shadow: 0 0 3px #FFFFFF;
}

.filter-criteria-display-quick-filter {
    display: inline;
}

.grid-sort {
    padding-left: 4px;
    text-decoration: none !important;
}

.new-icon {
    float: right;
}

#sector-minimized {
    left: 99px !important;
    position: absolute;
    height: 26px !important;
    border: 1px solid;
    width: 21px;
    cursor: pointer;
    background-color: hsla(170, 56%, 23%, .7);
    border-color: hsla(170, 56%, 23%, .7);
    color: white;
    margin-top: 28px;
    margin-right: 3px;
    margin-left: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 4px;
    height: 23px;
    font-size: 12px;
    padding-top: 3px;
    font-weight: 200;
}

#sector-minimized {
    height: 26px !important;
    height: 23px;
}

#sectors {
    position: absolute;
    top: 56px;
    left: 564px;
    font-size: 8px;
    border: none;
    height: 60px;
    width: 300px;
}

#market-status {
    margin-top: 17px;
}

.market-status-icon-long {
    color: var(--common-header) !important;
    float: right;
}

.market-status-icon-flat {
    color: var(--common-header) !important;
    float: right;
}

.market-status-icon-short {
    color: var(--common-header) !important;
    float: right;
}

#market-ticker-status-long {
    color: var(--common-header);
    font-weight: bold;
}

#market-ticker-status-short {
    color: var(--common-header);
    font-weight: bold;
}

#market-ticker-status-flat {
    color: var(--common-header);
    font-weight: bold;
}

#market-status-timer {
    margin-left: 30px;
    margin-top: -2px;
}

#right-arrow {
    width: 30px;
}

.action-button-flip {
    float: right;
    height: 27px;
    margin: 1px;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    text-align: center;
}

.volume-container {
    position: relative;
    float: right;
    top: -10px;
    left: 38px;
}

#sector-text {
    float: left;
    left: 12px;
    position: relative;
}

#sector-market-indicator {
    float: left;
}

#sector-market-indicator-section {
    left: 8px;
    position: relative;
    width: 34px;
}

.volume-bar-7 {
    top: 0px;
}

.volume-bar-6 {
    top: 3px;
}

.volume-bar-5 {
    top: 6px;
}

.volume-bar-4 {
    top: 9px;
}

.volume-bar-3 {
    top: 12px;
}

.volume-bar-2 {
    top: 15px;
}

.volume-bar-1 {
    top: 18px;
}

.volume-bar {
    background-color: antiquewhite;
    height: 1px;
    width: 4px;
    overflow: clip;
    position: absolute;
}

.action-button-forward {
    width: 22px !important;
}

.alerts-on {
    background-color: rgb(255,168,9);
    color: black !important;
}

.action-button-share {
    background-color: none !important;
    color: white !important;
    float: right;
    height: 27px;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    text-align: center;
    border: 0px;
}

.action-button-share {
    color: white !important;
    color: white;
}

.action-button-share:hover {
    background-color: white !important;
    border-color: white !important;
    color: black;
}

.contact {
    width: 131px;
    text-align: center;
    color: white;
    border: 1px solid;
    border-color: white;
    cursor: pointer;
}

.contact:hover {
    background-color: white;
    color: black;
}

.action-button-donate:hover {
    color: var(--common-header) !important;
}

#donate-text {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: white !important;
    background-color: #ff424d !important;
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
}

#member-top-bar {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: white !important;
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
}

.donate-hidden {
    visibility: hidden;
}

#donate-content {
    float: left;
    cursor: pointer;
}

#donate-content-logged-in {
    background-color: green !important;
}

.sector-bar-close {
    display: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    margin-top: -18px;
    position: fixed;
    margin-left: 288px;
    color: var(--common);
    position: absolute;
}

.sector-bar-close {
    display: none;
    display: var(--fa-display,inline-block);
    position: fixed;
    position: absolute;
}

.donate-bar-close {
    margin-left: 10px;
    z-index: 5000 !important;
    cursor: pointer;
    font-size: 10px;
    padding-top: 3px;
}

#contact-text {
    font-weight: 500 !important;
    text-align: center;
    margin-left: 3px;
    line-height: 17px;
    font-size: 12px;
    margin-top: 6px;
}

#donate-icon {
    float: right;
    margin-top: 7px;
    font-size: 13px;
    margin-right: -1px;
    margin-left: 1px;
}

#main-content {
    padding-top: 0x;
}

#contact-icon {
    float: right;
    margin-top: 4px;
    font-size: 13px;
    margin-right: -2px;
}

#move-mouse-label {
    float: left;
}

#mouse-coords {
    margin-top: 5px;
    font-style: italic;
    margin-bottom: 6px;
}

#mouse-settings-footer {
    clear: both;
    padding-top: 5px;
    font-style: italic;
}

#mouse-instructions {
    margin-top: 11px;
    margin-bottom: 10px;
    background-color: yellow;
    color: black;
}

#move-mouse-setting {
    margin-top: 10px;
    margin-left: 5px;
}

#move-mouse-radio {
    float: left;
    margin-left: 15px;
}

#move-mouse-pixels {
    float: left;
    margin-top: -4px;
}

#mouse-px {
    float: left;
    margin-left: 5px;
}

.setting-row {
    clear: both;
}

.filter-entry-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0px;
    min-height: 32px;
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}

.filter-entry-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.filter-tooltip-icon {
    font-size: 11px;
    color: #777;
    margin-left: 4px;
    flex-shrink: 0;
    pointer-events: none;
}

.filter-entry-row.has-value .filter-entry-row-first-col {
    flex: 0 1 auto;
    min-width: 0;
}

.filter-entry-row.has-value .filter-entry-row-second-col {
    flex: 0 0 auto;
    margin-left: 8px;
}

.filter-modal {
    width: 100%;
    max-width: 1100px;
}

.filter-region-header {
    width: 100%;
    padding: 8px 12px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-region-header::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.filter-region-header-long {
    background: linear-gradient(135deg, rgba(0, 134, 0, 0.8) 0%, rgba(0, 87, 0, 0.9) 100%);
}

.filter-region-header-long::before {
    background-color: #4caf50;
}

.filter-region-header-short {
    background: linear-gradient(135deg, rgba(200, 30, 30, 0.8) 0%, rgba(150, 20, 20, 0.9) 100%);
}

.filter-region-header-short::before {
    background-color: #ff5252;
}

.filter-region-header-flat {
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.7) 0%, rgba(70, 110, 180, 0.8) 100%);
}

.filter-region-header-flat::before {
    background-color: #64b5f6;
}

.filter-region-header-sector {
    background: linear-gradient(135deg, rgba(38, 90, 80, 0.8) 0%, rgba(20, 60, 55, 0.9) 100%);
}

.filter-region-header-sector::before {
    background-color: #26a69a;
}

.filter-region-header-multiscan {
    background: linear-gradient(135deg, rgba(100, 50, 180, 0.8) 0%, rgba(77, 0, 209, 0.9) 100%);
}

.filter-region-header-multiscan::before {
    background-color: #b388ff;
}

.filter-region-header-custom {
    background: linear-gradient(135deg, rgba(237, 137, 54, 0.8) 0%, rgba(200, 100, 30, 0.9) 100%);
}

.filter-region-header-custom::before {
    background-color: var(--action-yellow);
}

.filter-region-content {
    padding: 10px 12px;
    margin-bottom: 0px;
    overflow: hidden;
}

/* Sub-groups flow vertically within each super-group */
.filter-subgroup-grid {
    display: flex;
    flex-direction: column;
}

/* Super-groups layout */
.filter-columns-container {
    display: block;
}

/* Filter search input */
.filter-search-input {
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.filter-search-input::-webkit-search-decoration,
.filter-search-input::-webkit-search-cancel-button {
    display: none;
}

/* Expand/Collapse all buttons row */
.filter-group-toggles-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-expand-collapse {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.filter-expand-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    transition: all 0.15s ease;
    font-weight: 500;
}

.filter-expand-btn:hover {
    background: #e5e5e5;
    color: #333;
    border-color: #aaa;
}

/* Super-group arrow (in region header) */
.filter-supergroup-arrow {
    transition: transform 0.15s;
}

.filter-supergroup-arrow.expanded {
    transform: rotate(90deg);
}

/* Sub-group collapsible sections */
.filter-subgroup {
    margin-bottom: 1px;
}

.filter-subgroup-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    cursor: pointer !important;
    font-size: inherit;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border-radius: 3px;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.filter-subgroup-header * {
    cursor: pointer !important;
}

.filter-subgroup-header:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}

.filter-subgroup-header.has-active {
    color: inherit;
}

.filter-subgroup-header.has-active:hover {
    background: rgba(79, 195, 247, 0.06);
}

.filter-subgroup-arrow {
    font-size: 8px;
    width: 10px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.15s, opacity 0.15s;
}

.filter-subgroup-header:hover .filter-subgroup-arrow {
    opacity: 0.8;
}

.filter-subgroup-arrow.expanded {
    transform: rotate(90deg);
}

.filter-subgroup-name {
    flex: 0 0 auto;
    font-size:13px;
}

.filter-subgroup-count {
    background: var(--action-yellow);
    color: white !important;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    display: inline-block;
    line-height: 14px;
    margin-left: 4px;
    font-size: 10px !important;
}

.filter-or-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    margin-left: 6px;
    border-radius: 3px;
    background: rgba(255, 152, 0, 0.15);
    color: rgba(255, 152, 0, 0.85);
    border: 1px solid rgba(255, 152, 0, 0.25);
    cursor: help;
    flex-shrink: 0;
}

.filter-subgroup-content {
    padding: 2px 0 4px 0px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    margin-left: 4px;
    margin-bottom: 2px;
}

/* Nested (third-level) sub-groups */
.filter-subgroup-nested {
    margin-left: 0px;
    margin-top: 2px;
}

.filter-subgroup-nested > .filter-subgroup-header {
    font-size: inherit;
    padding: 4px 14px;
    color: var(--common);
}

.filter-subgroup-nested .filter-subgroup-content {
    font-size: 12px;
}

.filter-subgroup-nested > .filter-subgroup-header.has-active {
    color: inherit;
}

/* Ungrouped filters at bottom of a group — flush left, visually separated */
.filter-ungrouped {
    margin-top: 2px;
    padding-top: 2px;
    padding-left: 0px;
    margin-left: -10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-entry-row-first-col {
    display: flex;
    align-items: center;
    min-height: 27px;
    flex: 0 0 auto;
}

.filter-entry-row-second-col {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    flex-shrink: 0;
}

.filter-value {
    float: left !important;
    width: 72px !important;
    font-size: 12px;
    height: 23px !important;
}

.filter-on-long {
    color: white;
    border-color: var(--long);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--long);
}

#filter-scan-direction {
    float: right;
}

.filter-direction-long {
    border-color: var(--long);
    background-color: var(--long);
}

.filter-direction-short {
    border-color: var(--short);
    background-color: var(--short);
}

.filter-on-short {
    color: white;
    border-color: var(--long);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--short);
}

.filter-on-sector {
    color: white;
    border-color: var(--sector);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--sector);
}

.filter-on-multiscan {
    color: white;
    border-color: var(--multi-scan);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--multi-scan);
}

.filter-disabled {
    color: dimgray;
    border-color: dimgray;
    cursor: not-allowed;
}

#filtered {
    clear: both;
    padding-top: 5px;
    padding-left: 2px;
    min-width: 500px;
}

#filtered::after {
    content: "";
    display: table;
    clear: both;
}

.filtered-custom {
    margin-left: 144px;
}

.filtered-custom-scan {
    margin-left: 144px;
}

#filtered-out {
    float: left;
    cursor: pointer;
}

.filter-display-heading {
    font-weight: bold;
    display: inline;
}

.filter-criteria-display {
    display: inline;
}

.filter-criteria-advanced {
    display: inline;
}

.filter-criteria-advanced-label {
    color: var(--action-yellow);
    font-size: 11px;
}

.filter-criteria-expression {
    font-size: 11px;
    line-height: 1.6;
    word-break: break-word;
    max-width: 603px;
}

#custom-scan-settings {
    clear: both;
    margin-bottom: -6px;
    padding-top: 1px;
    margin-left: -4px;
}

.filter-entry-row > .form-check {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    flex: 0 0 auto;
}

.filter-desc {
    padding-left: 7px;
    white-space: nowrap;
    flex: 0 0 auto;
    /*width: 66px;*/
    overflow: hidden;
    color: var(--common);
    font-size:12px;
    padding-right:5px;
}

.ticker-entry-delay {
    float: left;
    margin-left: 25px;
    margin-bottom: 11px;
}

#ticker-entry-delay-time {
    float: left;
    width: 75px;
    height: 25px;
    margin-left: 8px;
    margin-right: 8px;
}

#entry-caption {
    float: left;
}

.copy-button {
    float: right;
}

.action-button-custom {
    height: 27px;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    float: right;
    border-color: var(--action-button);
}

.action-button-yellow {
    color: lightyellow;
    border-color: lightyellow;
}

.intro-text {
    font-weight: 700;
}

#header-text-mobile {
    display: none;
}

#header-text {
    color: var(--common);
    float: left;
    position: absolute;
    margin-left: 140px;
    width: 350px;
    top: 21px;
    font-size: 11px;
    height: 41px;
    vertical-align: middle;
    line-height: 19px;
}

#header-center-text {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 200;
}

.mini-grid-search-container {
    display: block;
}

#grid-heading-buttons {
    display: flex;
    align-items: center;
    padding-top: 3px;
    margin-right: 20px;
    max-width:744px;
    margin-left: 135px;
    margin-bottom: 0px;
    overflow: hidden;
    margin-top: -2px;
}

.grid-buttons-left {
    display: flex;
    align-items: center;
}

.grid-buttons-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.grid-buttons-right {
    display: flex;
    align-items: center;
}

.grid-heading-buttons-multi-scan {
    margin-left: 0px !important;
    margin-top: 5px !important;
    max-width: 900px !important;
    width:900px;
}

.grid-heading {
    margin-bottom: 5px;
    margin-left: 3px;
    clear: both;
}

#share-url {
    font-size: 16px;
    font-family: monospace;
    color: var(--common) !important;
}

#show-chart {
    position: fixed;
    left: 501px;
    margin-right: 2px;
    width: 377px;
    margin-top: 4px;
}

.menu-divider {
    clear: both;
    height: 1px;
    width: 580px;
    color: var(--white);
    background-color: var(--white);
}

.menu-divider-top {
    margin-top: 15px;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
    margin-right: 10px;
}

.search-result-row {
    background-color: hsla(39, 100%, 86%, .7) !important;
}

.search-result-group-label {
    border: none;
    margin: 2px;
    font-size: 13px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
}

.search-result-group-title {
    text-decoration: underline;
}

.search-result-ticker-heading {
    margin-top: 10px;
    font-size: 14px;
    margin-left: 15px;
    margin-bottom: 10px;
}

.search-result-flag {
    cursor: pointer;
    font-size: 15px;
    opacity: 0.4;
    margin-top: -17px;
    margin-left: 4px;    
}

.search-result-flag:hover {
    opacity: 0.7;
}

.search-result-flag.is-starred-green,
.search-result-flag.is-starred-red,
.search-result-flag.is-starred-yellow {
    opacity: 1;
}

.search-result-ticker-heading-chart-info {
    margin-top: -10px;
    font-size: 14px;
    margin-left: 9px;
    width: 200px;
    float: left;
}

.search-result-ticker-heading-second-row {
    margin-top: 10px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
    margin-top: -9px;
}

.search-result-ticker-heading-second-row {
    margin-top: 10px;
    margin-top: -9px;
}

.search-result-ticker-heading-second-row-chart-info {
    margin-top: 10px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
    margin-top: -9px;
    float: left;
}

.search-result-ticker-heading-second-row-chart-info {
    margin-top: 10px;
    margin-top: -9px;
}

#search-results-close {
    float: right;
    font-size: 20px;
}

.search-result-ticker-heading-third-row {
    margin-top: 7px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
}

.search-result-ticker-heading-third-row-chart-info {
    margin-top: 7px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
    width: 1000px;
    margin-left: 270px;
    position: fixed;
}

.search-result-ticker-heading-third-row-chart-info {
    margin-left: 15px;
    margin-left: 270px;
}

#chart-ticker-row {
    height: 55px;
}

.search-results-symbol {
    font-size: 24px;
    font-weight: bold;
    margin-right: 4px;
}

#search-result-news-list-header {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}

#mobile-ticker-search {
    left: 365px !important;
    position: absolute !important;
    top: 80px !important;
    z-index: 2000;
    width: 74px !important;
    width: 100px;
    top: 78px !important;
    height: 30px;
    float: left;
    font-size: 10px;
    margin-right: 8px;
    margin-left: -2px;
    border-radius: 2px;
    border: 1px solid #ced4da;
    padding-left: 5px;
}

::placeholder {
    color: var(--light-gray) !important;
    font-weight: normal;
}

.watchlist-label-search {
    padding: 5px;
    border: 1px solid;
    width: 132px;
    margin: 2px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
}

.watchlist-label-search:hover {
    background-color: none !important;
}

.watchlist-custom-scan-icon {
    float: right;
    margin-top: 3px;
    margin-left: 20px;
}

.grid-heading-text {
    clear: both;
    color: white;
    background-color: var(--long-text);
    font-size: 13px;
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 0px;
    padding-left: 7px;
    margin-left: 136px;
    width: 742px;
    height: 34px;
}

#sector-strength-heading {
    margin-left: 10px;
    float: left;
    margin-top: 8px;
    font-size: 12px;
    position: relative;
    z-index: 1500;
    text-shadow: 1px 1px 2px black;
}

/* Sector view: the title (e.g. "Technology - XLK") is short, so the fixed 470px heading width
   pushed the Strength/RVol text right into the action buttons (#show-chart at left:501px). Let
   the title be content-width so the strength text sits right after it, and hide the duplicate
   copy that lives inside the (masked/clipped) title. (2026-07-23) */
.main-bg-sector #heading-text {
    width: auto;
    max-width: 470px;
    -webkit-mask-image: none;
    mask-image: none;
}
.main-bg-sector #heading-text #sector-strength-heading {
    display: none;
}

.separator {
    font-weight: normal !important;
}

#heading-text {
    font-size: 14px;
    padding-top: 6px;
    overflow: hidden;
    max-height: 31px;
    float: left;
    font-weight: 700;
    min-width: 130px;
    /* 2026-07-22: FIXED width (not max-width) + right-edge fade (gradient mask). Fixed
       width keeps the fade zone at a constant spot on the right, so SHORT headings never
       reach it (no unnecessary fade) while long descriptions fade before the buttons.
       Tune: `width` = how far right the text reaches; the `40px` = fade length.
       2026-07-23: 470 -> 350 (custom titles ran under the buttons), then -> 400 so the text
       stays solid 50px further before the fade (the faded tail can run toward #show-chart at
       left:501 since it's transparent by then). */
    width: 400px;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.view-industries {
    font-weight: normal !important;
    text-decoration: underline;
    cursor: pointer;
}

.grid-heading-text-long {
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.grid-heading-text-multiscan {
    background: rgb(77,0,209);
    background: linear-gradient(90deg, rgba(77,0,209,1) 0%, rgba(248,249,250,1) 88%);
    margin-left: 2px;
}

.grid-heading-text-multiscan {
    background: rgb(77,0,209);
    background: linear-gradient(90deg, rgba(77,0,209,1) 0%, rgba(248,249,250,1) 88%);
}

.grid-heading-text-intro {
    background: hsla(53, 100%, 79%, 1);
    background: linear-gradient(90deg, rgba(56, 132, 255, 1) 0%, rgba(248,249,250,1) 88%);
    margin-left: 2px;
}

.grid-heading-text-intro {
    background: hsla(53, 100%, 79%, 1);
    background: linear-gradient(90deg, rgba(56, 132, 255, 1) 0%, rgba(248,249,250,1) 88%);
}

.grid-heading-text-short {
    background: rgb(178,5,5);
    background: rgb(217,4,4);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.grid-heading-text-flat {
    background-color: var(--flat);
    color: antiquewhite !important;
    border-left: solid 1px var(--flat);
    border-right: solid 1px var(--flat);
}

.grid-heading-text-sector {
    color: antiquewhite !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.grid-heading-text-sector {
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.grid-heading-text-custom {
    background-color: var(--custom);
    color: white !important;
    border-left: solid 1px var(--custom);
    border-right: solid 1px var(--custom);
    border-bottom: solid 1px var(--custom);
}

#grid-heading-text-flag {
    background-color: var(--long-text);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs {
    color: antiquewhite !important;
    border-color: black !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: antiquewhite !important;
    border-color: black !important;
}

.nav-tabs .nav-link {
    margin-bottom: -1px !important;
    border: 1px solid var(--white) !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    font-size: 12px !important;
    color: var(--white) !important;
    padding: 3px !important;
    width: 100px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-tabs {
    border-bottom: 1px solid var(--white) !important;
}

.tab-chevron {
    padding-left: 2px;
    padding-right: 1px;
}

.tab-container-collapse {
    height: 38px;
    overflow: hidden;
    width: 600px;
}

#tab-container {
    margin-left: 3px;
}

#modal-tabs {
    width: 472px;
    margin-bottom: 15px;
}

.modal-content {
    min-width: 550px;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden;
}

#filter-scan-name {
    margin-bottom: 15px;
}

#modal-tabs > li > a.active {
    color: #495057 !important;
}

.header {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    position: fixed;
    height: 60px !important;
    overflow: hidden;
    z-index: 10;
}

.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}

.mainInner {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}

.mainInner div {
    display: table-cell;
    vertical-align: middle;
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 1.25px;
}

.sidebar-open {
    transform: translateX(0px) !important;
}

.sidebar-closed {
    transform: translateX(-108px) !important;
}

#sidebarMenu {
    left: 0;
    margin-top: 10px;
    transform: translateX(0px);
    transition: transform 0ms;
    margin-left: -5px;
    /*max-width: 200px;*/
}

.menu-region-hidden {
    display: none;
}

.sidebarMenuInner {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li {
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li span {
    display: block;
    font-size: 14px;
    color: var(--long-common);
}

.sidebarMenuInner li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: -27px;
    left: 2px;
    height: 12px;
    width: 18px;
    color: antiquewhite;
}

.sidebarIconToggle {
    height: 100%;
    width: 100%;
    height: 12px;
    width: 18px;
}

.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.30);
}

.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.30);
}

.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
    color: rgba(255, 255, 255, 0.30);
}

.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.30);
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 7px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

#menu-region {
    float: left;
    position: fixed;
    z-index: 10;
    /* 2026-07-22: was top:179px, which relied on the donate button's -181px margin
       pulling the menu up. That's now position:absolute (out of scroll flow), so the
       menu no longer gets pulled up — top set to -2px to restore the original position
       (179 - 181 pull = -2). Tune this single value to shift the menu vertically. */
    top: -2px;
    /* 2026-07-22: independent menu scroll. Was width:50px (the 135px scan labels
       overflowed it visibly); widened to fit them so overflow-y:auto doesn't clip
       horizontally, and bounded the height so a long scan list (146 scans) scrolls
       within the sidebar, separately from the grid. A very thin (4px) scrollbar so
       it doesn't eat into the label width or the grid gap. Grid clears at 150px. */
    width: 148px;
    max-height: calc(100vh - 8px); /* top(-2) + ~10px bottom gap */
    overflow-y: auto;
    overflow-x: hidden;
    /* 2026-07-22: hide the menu scrollbar (matches the page); scroll still works by
       wheel/trackpad. */
    scrollbar-width: none;                                    /* Firefox */
    -ms-overflow-style: none;                                 /* legacy Edge/IE */
}
#menu-region::-webkit-scrollbar { display: none; }           /* WebKit (Chrome/Edge/WebView2) */

.menu-title {
    background-color: var(--long);
    text-align: right;
}

#grid-region {
    position: relative;
    top: -10px;
    left: -5px;
    margin-top: -2px;
}

#right-blocker {
    background-color: black;
    position: fixed;
    left: 773px;
    width: 1000px;
    height: 5000px;
    z-index: 3;
    display: none;
}

.right-blocker-lower {
    background-color: black;
    position: fixed;
    left: 773px;
    width: 1000px;
    height: 5000px;
    z-index: 3;
}

#left-blocker {
    background-color: black;
    position: fixed;
    left: 0px;
    width: 11px;
    height: 5000px;
    z-index: 3;
    display: none;
}

#top-menu {
    position: absolute;
    top: 84px;
    margin-left: 0px;
    min-width: 900px;
    z-index: 500;
}

.menu-button {
    float: left;
    margin: 0px;
    margin-right: 2px;
    font-size: 12px;
    padding: 3px 0px 3px 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--white);
    text-align: center;
    cursor: pointer;
}

#tab-sector-top-row {
    height: 25px;
    margin-bottom: 3px;
    margin-left: 11px;
    width: 300px;
}

#tab-sector-bottom-row {
    height: 25px;
    position: absolute;
    width: 300px;
    margin-left: 11px;
}

.tab-sector-backdrop {
    color: white;
    width: 47px;
    height: 26px;
    border: 0px solid;
    float: left;
    margin: 0px;
    font-size: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--white);
    border-color: var(--white);
    background-color: black !important;
    text-align: center;
    cursor: pointer;
    overflow: clip;
    display: flex;
    align-items: center;
}

.tab-sector-backdrop {
    color: white;
    color: var(--white);
}

#tab-close-button {
    width: 30px;
    border-color: rgba(255, 255, 255, 0.30);
}

#tab-home {
    color: black;
    width: 85px;
    #background-color: rgba(56, 132, 255, .8);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#tab-home:hover {
    background-color: rgba(56, 132, 255, 1) !important;
    cursor: pointer;
    color: white !important;
}

.tab-home-selected {
    background-color: rgba(56, 132, 255, 1) !important;
    cursor: pointer;
    color: white !important;
}

#tab-multiscan {
    color: black;
    #border-color: hsla(262, 100%, 41%, 1);
    width: 102px;
    #background-color: hsla(262, 100%, 41%, .8);
    font-weight: 500 !important;
    font-size: 13px;
    position: relative;
    z-index: 5000;
}

#tab-multiscan:hover {
    background-color: hsla(262, 100%, 41%, 1) !important;
    color: white !important;
    cursor: pointer;
}

.tab-multiscan-selected {
    background-color: hsla(262, 100%, 41%, 1) !important;
    color: white !important;
    cursor: pointer;
}

#tab-long {
    color: black;
    width: 130PX;
    #background-color: hsla(120, 100%, 26%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#tab-long:hover {
    background-color: hsla(120, 100%, 26%, 1);
    color: white !important;
    cursor: pointer;
}

.tab-long-selected {
    background-color: hsla(120, 100%, 26%, 1) !important;
    color: white !important;
    cursor: pointer;
    font-weight: 700;
}

#tab-short:hover {
    background-color: hsla(0, 100%, 52%, 1);
    color: white !important;
    cursor: pointer;
}

.tab-short-selected {
    background-color: hsla(0, 100%, 52%, 1) !important;
    color: white !important;
    cursor: pointer;
}

#tab-sector {
    color: black;
    width: 70px;
    #background-color: hsla(170, 56%, 23%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

.tab-sector-selected {
    color: white !important;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
    background-color: hsla(170, 56%, 23%, 1);
    font-weight: 700;
}

.tab-sector-selected {
    color: white !important;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
}

#tab-sector:hover {
    background-color: hsla(170, 56%, 23%, .7);
    color: white !important;
    cursor: pointer;
}

#tab-account {
    color: black;
    width: 83px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    border-color: black;
    border: none !important;
    margin-left: 2px;
}

#tab-account:hover {
    color: white;
    background-color: hsla(116, 76%, 44%,1) !important;
}

.tab-account-selected {
    color: white;
    font-weight: 700;
}

#tab-log-in {
    color: black;
    width: 69px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    border-color: black;
    border: 0px solid;
    margin-right: 17px;
}

#tab-log-in:hover {
    color: white;
    background-color: var(--action-button) !important;
}

#tab-turbo {
    color: black !important;
    width: 110px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    background-color: #ffd500 !important;
}

#tab-turbo:hover {
    background-color: #ffe14b !important;
}

.tab-turbo-selected {
    color: white;
    background-color: hsla(116, 76%, 44%,1) !important;
    width: 118px;
    font-weight: 700;
}

#tab-alerts {
    color: black;
    width: 69px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    #border-color: black;
    #border: 1px solid;
}

#tab-settings {
    color: black;
    width: 80px;
    font-weight: 700;
    height: 26px;
}

#tab-settings:hover {
    color: white;
    background-color: var(--action-button) !important;
}

#tab-settings-selected {
    color: white;
    background-color: var(--action-button) !important;
    width: 118px;
    font-weight: 700;
}

#tab-alerts:hover {
    background-color: rgb(255,168,9) !important;
}

#tab-alerts:hover {
    color: white;
}

.tab-alerts-selected {
    color: black !important;
    background-color: #ffd500 !important;
    width: 118px;
    font-weight: 700;
}

.tab-flat-selected {
    background-color: var(--flat) !important;
    border-color: var(--flat) !important;
    color: white !important;
    cursor: pointer;
}

#tab-flat:hover {
    background-color: var(--flat) !important;
    border-color: var(--flat) !important;
    color: white !important;
    cursor: pointer;
}

#tabs > li.nav-item.tab-long > a {
    color: var(--long-text) !important;
    border-color: var(--long-text) !important;
    width: 135px;
}

#tabs > li.nav-item.tab-long > a.active {
    background-color: var(--long-text);
    color: antiquewhite !important;
}

#tabs > li.nav-item.tab-short > a {
    color: var(--short) !important;
    border-color: var(--short) !important;
    width: 136px;
}

#tabs > li.nav-item.tab-short > a.active {
    background-color: var(--short);
    color: antiquewhite !important;
}

#tabs > li.nav-item.tab-flat > a {
    color: var(--flat) !important;
    border-color: var(--flat) !important;
    width: 120px;
}

#tabs > li.nav-item.tab-flat > a.active {
    background-color: var(--flat);
    color: antiquewhite !important;
}

#tabs > li.nav-item.tab-custom > a {
    color: var(--custom-text) !important;
    border-color: var(--custom) !important;
    width: 70px;
}

#tabs > li.nav-item.tab-custom > a.active {
    background-color: var(--custom);
    color: white !important;
}

.tab-short > a {
    color: var(--short) !important;
    border-color: var(--short) !important;
}

.tab-long > a {
    color: var(--long-text);
    border-color: var(--long-text);
}

.tab-flat > a {
    color: var(--flat) !important;
    border-color: var(--flat) !important;
}

.watchlist-label-custom {
    color: var(--custom-text);
    border-color: var(--custom);
}

.watchlist-label-custom-selected {
    background-color: var(--custom);
    border-color: var(--custom);
    color: white;
}

.watchlist-subhead {
    /* border: none; */
    /* border: 1px solid; */
    width: 135px;
    /* margin: 2px; */
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: antiquewhite;
    font-weight: bold;
    margin-top: 8px;
    border-right: 1px solid rgba(183, 189, 183, 1);
    border-color: rgba(183, 189, 183, 0.5);
}

.watchlist-subhead-sector {
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(0,0,0,0) 100%);
    font-weight: 900;
}

.watchlist-subhead-long {
    background: linear-gradient(90deg, rgb(0, 134, 0) 0%, rgba(0, 134, 0, 0.21) 97%);
    font-weight: 900;
}

.watchlist-subhead-short {
    background: linear-gradient(90deg, rgb(217, 4, 4) 0%, rgba(0, 0, 0, 0) 100%);
    font-weight: 900;
}

.group-count {
    float: right;
    width: 25px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* border: 1px solid; */
    border-color: var(--long);
    /* background-color: var(--long); */
    font-size: 10px;
    color: var(--common);
    /* background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%); */
    font-weight: bold;
}

.group-count-long {
    border-color: var(--long);
    /* background-color: #bdddc4; */
}

.group-count-short {
    /* border-color: var(--short); */
    /* background-color: var(--short); */
}

.group-count-flat {
    border-color: var(--flat);
    background-color: var(--flat);
}

.group-count-sector {
    border-color: var(--sector);
    /* background-color: var(--sector); */
}

.watchlist-label:hover {
    cursor: pointer;
    /* faux-bold: thickens strokes WITHOUT changing glyph metrics. Real
       font-weight:900 here changed text width on hover, re-wrapping long
       scan names and juddering the whole menu. */
    text-shadow: 0 0 0.65px currentColor, 0 0 0.65px currentColor;
}

/*.watchlist-label-short:hover {*/
/*    cursor: pointer;*/
/*    text-decoration:underline !important;*/
/*}*/

/*.watchlist-label-long:hover {*/
/*    cursor: pointer;*/
/*    font-weight:900;*/
/*}*/

/*.watchlist-label-sector:hover {*/
/*    cursor: pointer;*/
/*    text-decoration:underline !important;;*/
/*}*/

#standard-region {
    float: left;
    margin-bottom: 10px;
    padding: 0px;
    margin-top: -12px;
    width: 600px;
    overflow: hidden;
}

.disclaimer {
    font-style: italic;
    color: dimgray;
    margin-bottom: 3px;
    margin-left: 5px;
    width: 127px;
    font-size: 11px;
    margin-top: 19px;
    line-height: 14px;
    border-top: 1px solid;
    border-color: #cccccc;
    padding-top: 8px;
}

.disclaimer p {
    margin-top: 3px;
    margin-bottom: 8px;
}

.disclaimer-mini {
    width: 800px;
    line-height: 16px;
    margin-left: 10px;
    display: none;
}

#whats-new {
    position: absolute;
    left: 354px;
    top: 3px;
    font-size: 10px !important;
    width: 86px;
}

#updated {
    color: var(--common);
    font-style: italic;
    font-size: 11px;
    z-index: 10;
    margin-top: 9px;
    position: absolute;
    left: 144px;
    top: 47px;
    width:350px;
}

/*
.updated-desktop {
    left: 203px !important;
    top: 49px !important;
}
*/

#updated-mini {
    color: var(--common);
    font-style: italic;
    font-size: 10px;
    z-index: 10;
    margin-left: 10px !important;
    margin-top: 5px;
}

#version {
    font-style: italic;
    color: dimgray;
    margin-bottom: 3px;
    margin-left: 5px;
    width: 127px;
    font-size: 11px;
    margin-top: 10px;
    margin-bottom: 8px;
    line-height: 14px;
}

#version {
    margin-bottom: 3px;
    margin-bottom: 8px;
}

#add-region {
    float: left;
    border: none;
    padding: 3px;
    margin-left: 3px;
    border-width: 2px;
    color: forestvar(--long-text);
    font-weight: bold;
}

#filter-entry-scan-name {
    margin-right: 18px !important;
    margin-top: 7px !important;
    width: 200px !important;
    clear: both;
}

.modal {
    max-height: 100vh;
}

#add-ticker-text {
    background-color: black;
    color: var(--long-text);
    border: 1px solid;
}

#scan-name {
    width: 200px;
    height: 30px;
    margin-left: 0px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

#scan-name:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

/* description input: identical treatment to the name box, just wider */
#scan-description {
    width: 320px;
    height: 30px;
    margin-left: 6px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    background: transparent;
    color: inherit;
}

#scan-description:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

#add {
    width: 51px;
    height: 26px;
}

#flag {
    background-color: var(--long-text);
}

.intro-modal {
    font-size: 15px;
    min-width: 400px;
    overflow-y: hidden;
    color: var(--common);
    padding: 22px !important;
}

.settings-modal {
    font-size: 15px;
    min-width: 400px !important;
    overflow-y: hidden;
    color: var(--common);
    padding: 12px !important;
}

.donate-modal {
    font-size: 15px;
    color: var(--common);
}

#donate-link {
    font-weight: bold;
}

#patreon-text-logo {
    float: left;
    height: 13px;
    padding-left: 5px;
    color: white;
    font-size: 13px;
    margin-top: 3px;
    margin-left: 13px;
    font-weight: 500;
}

#patreon-link {
    margin-left: 30px;
    color: white !important;
}

#user-guide-icon {
    position: relative;
    top: 0px;
    left: 1px;
}

#multi-scan-icon {
    position: relative;
    top: 0px;
    left: 2px;
}

#alert-icon {
    position: relative;
    top: 0px;
    left: 2px;
}

.alert-icon {
    position: relative;
    top: 0px;
    left: 2px;
}

.alerts-actions {
    margin-left: 19px;
    width: 500px;
    padding-bottom: 18px;
}

#intro-icon {
    position: relative;
    top: 0px;
    left: 8px;
}

#patreon-icon {
    position: fixed;
    top: 5px;
    left: 117px;
}

#kofi-link {
    margin-left: 10px;
}

#patreon-logo {
    width: 120px;
    background-color: gray;
    float: left;
    margin-right: 10px;
}

#patreon-logo-intro {
    width: 120px;
    background-color: gray;
    float: right;
    margin-right: 10px;
    margin-left: 2px;
    margin-top: 9px;
}

#patreon-logo-small {
    width: 100px;
    margin-top: 20px;
}

#kofi-logo-small {
    margin-top: 5px;
    width: 100px;
    margin-bottom: 5px;
}

#kofi-logo-dark {
    height: 35px;
    background-color: gray;
    float: left;
    margin-right: 6px;
}

#kofi-logo-light {
    height: 35px;
    background-color: gray;
    float: left;
    margin-right: 21px;
}

.chart-selection-button {
    border: 1px solid;
    float: left;
    margin: 5px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 203px;
    height: 40px;
    padding-top: 9px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    padding-left: 10px;
}

.chart-selection-button {
    font-size: 13px;
    padding-left: 5px;
    font-size: 15px;
    padding-left: 10px;
}

.chart-selection-text {
    font-size: 15px;
    align-items: center;
    color: var(--common);
    display: flex;
    height: 40px;
    margin-top: 6px;
    padding-left: 8px;
}

.chart-selection-hint {
    font-size: 12px;
    color: var(--common);
    opacity: 0.6;
    padding: 6px 0 2px;
}

/* ---- Pop-out window (single scan in its own browser window) ---- */
.popout-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.popout-selector-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
/* Combo sized to content; the ScanCombo info (i) icon sits inline right after it
   (not pushed to the far edge). */
.popout-selector-bar .scan-combo-container { flex: 0 0 auto; min-width: 0; }
.popout-selector-bar .scan-combo-toggle { min-width: 180px; justify-content: flex-start; }
/* Pin the scan name to the left (was centered, leaving a big left gap); arrow to the right. */
.popout-selector-bar .scan-combo-text { flex: 0 1 auto; text-align: left; }
.popout-selector-bar .scan-combo-arrow { margin-left: auto; }
.popout-selector-bar .mini-grid-info { flex: 0 0 auto; }
/* Last-update stamp: sits just right of the combo; the alert/copy group still
   pushes to the far edge via its own margin-left:auto. */
.popout-updated {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    opacity: 0.7;
    color: var(--page-text);
    white-space: nowrap;
    overflow: hidden;
}
.popout-updated a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
.popout-updated a:hover { opacity: 1; }
.popout-alert-btn {
    flex: 0 0 auto;
    margin-left: auto;   /* push the alert + copy group to the right */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    color: var(--page-text);
    white-space: nowrap;
}
.popout-alert-btn.alerts-on {
    color: #ffb300;
    border-color: rgba(255, 179, 0, 0.5);
}
.popout-alert-btn:hover { border-color: #ffb300; }
.popout-copy-btn {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 4px 7px;
    opacity: 0.65;
    color: var(--page-text);
}
.popout-copy-btn:hover { opacity: 1; }
.popout-grid-container {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    padding: 2px 8px;
}
.popout-loading {
    padding: 40px;
    text-align: center;
    opacity: 0.6;
}

/* Full-screen Turbo upsell shown when a free user opens a pop-out over the cap. */
.popout-upsell {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 0;
}
.popout-upsell-card {
    max-width: 380px;
    text-align: center;
    color: var(--page-text);
    padding: 28px 26px;
    border-radius: 12px;
    background: rgba(255, 179, 0, 0.06);
    border: 1px solid rgba(255, 179, 0, 0.28);
}
.popout-upsell-icon {
    font-size: 34px;
    color: #ffb300;
    margin-bottom: 12px;
}
.popout-upsell-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}
.popout-upsell-card p {
    font-size: 13.5px;
    line-height: 1.55;
    opacity: 0.85;
    margin: 0 0 20px;
}
.popout-upsell-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1400;
    background: #ffb300;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.popout-upsell-btn:hover { background: #ffc233; }
.popout-upsell-btn:active { transform: translateY(1px); }

.chart-selection-text-windows {
    margin-left: 217px;
}

.chart-selection-button-region {
    width: 100%;
    clear: both;
    float: none;
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
}

.chart-selection-gray {
    color: var(--common) !important;
    border-color: var(--common) !important;
}

.chart-selection-green {
    color: var(--green);
    border-color: var(--green);
}

.chart-selection-green:hover {
    color: var(--green);
    background-color: var(--green);
    border-color: var(--green);
}

.chart-selection-green-selected {
    color: var(--common) !important;
    background-color: var(--green);
    border-color: var(--green);
}

.chart-settings-step {
    font-weight: bold;
    color: green;
    margin-left: 10px;
}

.chart-settings-step-complete {
    color: green;
    font-weight: bold;
    margin-left: 10px;
}

#auto-click-location {
    margin-top: 10px;
}

.chart-settings-step-description {
    margin-bottom: 15px;
    color: var(--common);
    margin-left: 25px;
}

#chart-settings-title {
    font-weight: bold;
    margin-bottom: 17px;
    color: var(--common);
}

#modal-button {
    float: right;
}

.intro-bullet {
    clear: both;
    padding: 3px;
}

.intro-headline {
    font-weight: bold;
    margin-top: 12px;
}

.indent {
    margin-left: 25px;
}

#intro-logo {
    float: right;
    height: 30px;
}

#intro-flag {
    clear: both;
    float: right;
    width: 94px;
    margin-right: 25px;
}

#intro-list {
    list-style-position: outside;
}

#intro-unflagged {
    float: right;
    clear: both;
    margin-right: 10px;
}

#intro-count {
    float: right;
    margin-right: 10px;
}

#tabs {
    clear: left;
    margin-top: 12px;
    float: left;
    margin-bottom: -6px;
}

#logo {
    position: absolute;
    height: 58px;
    left: 0px;
    top: 27px;
    background-color: none;
    padding: 5px;
    width: 135px;
    text-align: center;
    cursor: pointer;
    z-index: 2500;
}

#logo-image {
    height: 41px;
    padding-left: 8px;
    padding-top: 3px;
}

#logo-intro {
    height: 46px;
    left: 18px;
    top: 9px;
    background-color: none;
    padding: 10px;
    width: 136px;
    float: right;
    margin-bottom: 30px;
}

#boot-logo-light {
    height: 70px;
    margin-left: 11px;
}

#boot-logo-dark {
    height: 70px;
}

.side-menu-header {
    float: left;
    display: none;
}

#header-content {
    position: absolute;
    top: 17px;
    left: 527px;
    width: 314px;
    height: 14px;
    overflow: clip;
}

.windows-promo {
    float: left;
    color: var(--common);
    font-size: 12px;
}

#header {
    max-width: 600px;
    float: none;
}

#top-text {
    float: left;
    color: var(--white);
    margin-left: 2px;
    line-height: 16px;
    margin-top: 0px;
    flex-wrap: nowrap;
}

.watchlist-picker {
    margin-bottom: 5px;
    bhvn margin-left: 5px;
    margin-top: 5px;
    background-color: black;
    color: var(--long-text);
    font-size: 13px;
}

.styled-input {
    color: var(--long-text);
}

.screener-grid {
    margin: 0px;
    padding: 0px;
    margin-top: 36px;
}

.col-header-content {
    font-size: 11px;
    text-overflow: clip;
}

.col-title {
    text-align: center;
}

.col-title-text {
    overflow: clip !important;
}

.col-title-text {
    color: var(--common);
}

.main-region {
    margin-left: 3px;
    padding-top: 5px;
    margin-top: 117px;
    /* width: 97vw; */
    -webkit-user-select: none;
    -moz-user-select: none;
}

.grid-row {
    clear: both;
    overflow: auto;
    cursor: pointer;
    margin-left: 150px;
    width: 100vw;
}

.highlight {
    background-color: hsla(46, 79%, 66%, 0.12) !important;
}

#grid-expand {
    margin-left: 590px;
    margin-top: 4px;
    margin-bottom: -26px;
    background-color: black;
    cursor: pointer;
    border: 1px solid;
    color: var(--white) !important;
    border-color: var(--white) !important;
    height: 24px;
    overflow: auto;
    align-items: baseline;
    width: 24px;
    text-align: center;
    z-index: 10;
    position: relative;
}

#grid-expand:hover {
    background-color: var(--white);
    color: black;
}

#grid-collapse {
    position: fixed;
    cursor: pointer;
    border: 1px solid;
    float: left;
    margin-top: -8px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    color: var(--white);
    border-color: var(--white);
    z-index: 10;
    background-color: black;
}

#grid-collapse:hover {
    background-color: var(--white);
    color: black;
}

#sector-icons {
    margin-top: 11px;
    margin-bottom: 35px;
}

.sector-intro {
    margin-bottom: 10px;
    width: 600px;
}

/* Default extra large modal sizing */
.modal-xl {
    max-width: 950px;
}

#sector-columns {
    clear: both;
    column-count: 2;
    column-gap: 0px;
    width: 612px;
}

.sector-region {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
    width: 300px;
    margin-bottom: 5px;
    break-inside: avoid;
}

.sector-strength-container {
    width: 100%;
}

.sector-region-scroll {
    max-height: 200px;
    overflow-y: scroll;
}

.sector-region-long {
    background-color: rgba(0, 255, 0, .11);
}

.sector-region-short {
    background-color: rgba(255, 5, 5, 0.11);
}

.grid-row-sector-heading {
    font-weight: bold;
    border-bottom: 1px solid gray;
    max-width: 275px;
    position: sticky;
    padding-top: 10px;
    top: 0;
    position: -webkit-sticky;
    z-index: 2;
}

.grid-row-sector-heading {
    position: sticky;
    position: -webkit-sticky;
}

.grid-cell-sector-heading {
    position: absolute;
    margin-top: -14px;
    font-size: 16px;
    overflow: clip;
    height: 28px;
}

.grid-row-sector {
    margin: 3px;
    font-size: 12px;
    max-width: 270px;
}

.sector-heading {
    margin-left: -149px;
}

.grid-cell {
    float: left;
    color: var(--common);
    letter-spacing: -0.5px;
}

.grid-cell-sector {
    width: 160px;
}

.grid-cell-industry {
    width: 200px;
}

.grid-cell-indent {
    padding-left: 20px;
}

.grid-cell-val {
    width: 50px;
    text-align: right;
}

#grid-bounds-container {
    clear: both;
    height: 73vh;
}

.main-bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0px;
    margin-left: 0px;
    padding-left: 0px;
    /* 2026-07-22: the page itself no longer scrolls — the menu (#menu-region) and grid
       (.ticker-container) scroll in their own containers. overflow:hidden so a wheel over
       the top menu area can't fall through and scroll the whole page. Full-screen views
       (Account/Alerts/filters) that can exceed the viewport carry their own overflow. */
    overflow: hidden;
}

.grid-header-region-custom {
    margin-top: 30px !important;
}

#grid-bounds {
    margin-left: 134px;
    white-space: nowrap;
    padding-left: 4px;
    height: 100vh !important;
}

#grid-bounds-max {
    margin-left: 91px;
    white-space: nowrap;
    background-color: black;
    overflow-x: scroll;
    padding-left: 47px;
    height: 100vh !important;
}

.grid-header-region {
    padding-top: 10px;
    position: sticky;
    top: -1px;
    display: flex;
    z-index: 2;
    margin-left: 144px;
    margin-bottom: 3px;
    margin-top: 5px;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.tv-chart {
    width: 1000px;
    height: 700px;
}

.chart {
    background-color: orange;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:focus, .btn-primary.focus {
    box-shadow: none;
}

.btn-primary {
    color: #fff !important;
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

.btn-primary:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

.btn-secondary {
    color: #374151 !important;
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

.btn-secondary:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
}

.btn-danger {
    color: #fff !important;
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

.btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

.button-hidden {
    display: none;
}

.button-visible {
    display: block;
}

.play-icon {
    float: right;
    margin-left: 6px;
}

#flip-buttons {
    display: flex;
    align-items: center;
}

.column-edit-button {
    margin-left: 2px;
    margin-top: 4px;
    margin-left: 3px;
}

.column-select {
    width: 100%;
    margin-bottom: 3px;
    margin-top: 3px !important;
    min-height: 39px;
    overflow: visible;
}

/* Column Select Tree Dropdown */
.column-select-dropdown {
    position: relative;
    width: 100%;
    overflow: visible;
}

.d-flex.align-items-center.column-select {
    overflow: visible;
}

.column-select-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.column-select-search {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 13px;
    color: #ddd;
    background: #1e1e2e;
    outline: none;
    transition: border-color 0.2s;
    cursor: pointer;
}

.column-select-search:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
    cursor: text;
}

.column-select-search.has-value::placeholder {
    color: #ccc;
    opacity: 1;
}

.column-select-search::placeholder {
    color: #888;
}

.column-select-chevron {
    position: absolute;
    right: 8px;
    font-size: 10px;
    color: #999;
    pointer-events: none;
}

.column-select-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1049;
}

.column-select-dropdown-menu {
    position: fixed;
    min-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: #1e1e2e;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1050;
    margin-top: 2px;
}

.column-select-dropdown-menu .builder-field-option {
    color: #ddd;
}

.column-select-dropdown-menu .builder-field-option:hover {
    background: #2a2a3e;
    color: #fff;
}

.column-select-dropdown-menu .builder-field-option.selected {
    background: #333355;
    color: var(--action-yellow);
}

.column-select-dropdown-menu .builder-field-supergroup {
    background: #252535;
    color: #888;
}

.column-select-dropdown-menu .builder-field-subgroup {
    color: var(--action-yellow);
}

.column-select-highlight-long {
    background-color: var(--long-text);
}

.column-select-highlight-short {
    background-color: var(--short);
}

.column-select-highlight-flat {
    background-color: var(--flat);
}

.custom-select-long {
    background-color: var(--long) !important;
}

.custom-select-custom {
    background-color: var(--custom) !important;
    color: white !important;
}

.custom-select-short {
    background-color: var(--short) !important;
}

.custom-select-flat {
    background-color: var(--flat) !important;
}

.check-center {
    width: 100%;
    text-align: center;
}

.screener-flag {
    width: 20px;
    height: 20px;
}

.screener-flag {
    outline: none !important;
    border: none !important;
    text-decoration: none;
    box-shadow: none !important;
    -webkit-appearance: none;
}

.row-selected-sectpr {
    background-color: var(--sector);
    color: antiquewhite !important;
    font-weight: bold !important;
}

.row-selected-long {
    background-color: var(--long);
    color: var(--common-header) !important;
    font-weight: bold !important;
}

.row-selected-short {
    background-color: var(--short);
    color: var(--common-header) !important;
    font-weight: bold !important;
}

.row-selected-sector {
    background-color: var(--sector);
    color: var(--common-header) !important;
    font-weight: bold !important;
    border-color: white;
    border: 1px solid;
}

.row-selected-custom {
    background-color: var(--custom);
    color: var(--common-header) !important;
    font-weight: bold !important;
    border-color: white;
    border: 1px solid;
}

.row-selected-flat {
    background-color: var(--flat);
    color: var(--common-header) !important;
    font-weight: bold !important;
}

.add-flag {
    width: 20px;
    height: 20px;
    margin-top: -20px;
    outline: none !important;
    border: none !important;
    text-decoration: none;
    box-shadow: none !important;
    -webkit-appearance: none;
}

#flag-buttons {
    float: left;
    margin-top: 2px;
    margin-left: 0px;
}

.value-indicator {
    margin-right: 0px;
    float: left;
    margin-left: -14px;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.age {
    font-size: 10px;
    padding-top: 3px;
    margin-right: 4px;
    width: 21px;
    padding-left: 4px;
    max-width: 21px;
    overflow: hidden;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.trend-indicator {
    margin-left: -45px;
}

.price-pop-bell {
    margin-left: 7px;
}

.private-icon {
    margin-top: 2px;
    margin-right: 5px;
    position: relative;
    margin-bottom: -5px;
}

.news-alert-low {
    background-color: var(--action-yellow);
    vertical-align: middle;
    margin-bottom: -14px;
    height: 33px;
    color: var(--common);
}

.news-alert-high {
    background-color: var(--short);
    vertical-align: middle;
    margin-bottom: -14px;
    height: 33px;
    color: var(--common);
}

.action-button:hover {
    cursor: pointer !important;
    background-color: var(--white);
    color: black !important;
    border-color: black;
}

.price-pop-alert-row:hover {
    cursor: pointer;
    text-decoration: underline;
}

.price-pop-alert-row-Up {
    background-color: var(--long);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.price-pop-alert-row-Down {
    background-color: var(--short);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.price-pop-alert-row-None {
    background-color: var(--action-button);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.price-pop-alert-row-Sector {
    background-color: var(--action-button);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.news-alert-text {
    padding-top: 6px;
    padding-left: 10px;
    float: left;
    font-size: 14px;
    max-height: 33px;
    overflow: clip;
    color: var(--common-header);
}

.price-pop-text {
    padding-top: 6px;
    padding-left: 10px;
    float: left;
    color: white;
    font-size: 11px;
}

.price-pop-text:hover {
    cursor: pointer;
    text-decoration: underline;
}

.flag {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-top: 6px;
    padding-right: 0px;
    height: 15px;
    width: 15px;
}

.not-starred-long {
    color: gray;
    cursor: pointer;
}

.news-link {
    color: var(--common) !important;
}

.news-item {
    font-size: 12px;
    margin-bottom: 5px;
}

.pop-news-item {
    font-size: 13px;
    margin-bottom: 8px;
    margin-left: -10px;
}

.tippy-box {
    width: 300px !important;
    max-width: 1000px !important;
    z-index: 9999;
}

[id*="tippy"] {
    margin-left: 75px !important;
}

.tippy-arrow {
    visibility: hidden;
}

.tooltip-delay {
    font-size: 12px;
}

.tooltip-symbol-block {
    margin-left: 10px;
    margin-bottom: 10px;
}

.tooltip-appears-on-header {
    margin-left: 10px;
    margin-bottom: 3px;
}

.pop-appears-on-list {
    font-size: 13px;
    margin-bottom: 0px;
    margin-left: 10px;
}

.fundamentals {
    max-width: 300px !important;
    background-color: red;
}

.screener-grid-symbol-header {
    padding-left: 23px;
    width: 94px;
}

.screener-grid-age {
    width: 23px;
    text-overflow: clip;
    display: flex;
    margin-left: -23px;
    text-decoration: underline;
}

.screener-grid-signal {
    width: 35px;
    text-overflow: clip;
}

.screener-grid-volume {
    width: 48px;
    padding: 0px;
    color: var(--common);
    overflow: visible;
}

.screener-grid-avg-volume {
    width: 48px;
    padding: 0px;
    color: var(--common);
    overflow: visible;
}

.screener-grid-flag {
    text-overflow: clip;
    font-weight: bold;
    margin-left: -14px;
}

.flag-column {
    margin-left: 0px;
    margin-top: 0px;
    width: 20px;
}

.age-column {
    margin-left: 4px;
    margin-top: 0px;
    width: 30px;
}

.screener-grid-close {
    width: 55px;
    padding: 0px;
    color: var(--common);
    overflow: visible;
}

.weeklies {
    color: hsla(219, 79%, 57%, 1);
    font-weight: bold;
    margin-left: 0px;
    font-size: 11px;
    padding-top: 3px;
    margin-right: 5px;
    min-width: 11px;
}

.earnings {
    color: hsla(219, 79%, 57%, 1) !important;
    font-weight: bold;
    margin-left: 0px;
    font-size: 11px;
    padding-top: 3px;
    margin-left: -35px;
    margin-right: 0px;
    min-width: 11px;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.earnings {
    margin-left: 0px;
    margin-left: -35px;
}

.earnings-display {
    background-color: yellow;
    font-weight: bold;
}

.earnings-box {
    font-weight: bold;
}

.earnings-loss {
    color: red !important;
}

.earnings-win {
    color: limegreen !important;
}

.screener-grid-sector {
    width: 75px;
    padding: 0px;
    color: var(--common);
    overflow: clip;
}

.screener-grid-sector-contents {
    width: 65px;
    padding: 0px;
    color: var(--common);
    overflow: clip;
    height: 20px;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.screener-grid-change {
    width: 45px;
    padding: 0px;
    overflow: visible;
}

.screener-grid-atr {
    width: 50px;
    padding: 0px;
    overflow: visible;
}

.screener-grid-rsrw {
    width: 44px;
    padding: 0px;
}

.screener-grid-rvol {
    width: 45px;
    padding: 0px;
    color: var(--common);
}

.screener-grid-rrvol {
    width: 45px;
    max-width: 75px;
    padding: 0px;
}

.screener-grid-sma {
    width: 50px;
    padding: 0px;
    color: var(--common);
}

#watchlist > div.grid > table > thead > tr > th.screener-grid-rrvol > div > button > div.col-title-text {
    margin-left: 0px;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary {
    display: none;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

tradingview_dca51 {
    width: 912px;
    background-color: black;
}

.tradingview-widget-container {
    margin-left: -20px;
}

#ying-yang {
    color: white;
}

#loading-spinner {
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 2px;
    margin-right: 5px;
}

#spinner-container {
    margin-left: 0px;
}

.spinner-color {
    color: var(--common) !important;
}

#loading {
    float: left;
    color: var(--common);
}

.filter-check-bold {
    font-weight: bold;
    color: var(--common);
    font-size:13px;
    margin-left: 6px;
}

.filter-check {
    color: var(--common) !important;
    font-size:12px;
    margin-left: 6px;
}

/* Override Blazorise purple checkbox color */

.filter-entry-row .form-check-input:checked,
.filter-region-content .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.filter-entry-row .form-check-input:focus,
.filter-region-content .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

.filter-save-long {
    color: white;
    background-color: var(--long) !important;
    border-color: var(--long) !important;
}

.filter-save-multiscan {
    background-color: #4d00d1 !important;
    border-color: #4d00d1 !important;
}

.icon-red {
    color: var(--short);
}

.icon-selected {
    color: antiquewhite !important;
}

.search-icon {
    /* 2026-07-22: absolute relative to the search box so it scrolls with the menu
       (was position:fixed, pinned to viewport). */
    padding-right: 10px;
    left: 116px;
    top: 8px;
    position: absolute !important;
    width: 20px;
    color: white !important;
}

.mini-grid-search-icon {
    margin-top: 10px !important;
    width: 20px;
    margin-left: 8px;
}

.mini-grid-search-icon:hover {
    cursor: pointer;
}

.search-icon:hover {
    cursor: pointer;
}

#search-results-clear {
    /* 2026-07-22: absolute relative to the search box (now position:relative) so it
       scrolls up with the menu instead of pinning to the viewport (was position:fixed). */
    position: absolute;
    left: 90px;
    top: 8px;
    color: var(--common);
}

.no-search-results {
    margin-top: 10px;
    font-size: 14px;
}

#search-results-clear:hover {
    cursor: pointer;
}

#grid-news {
    width: 649px;
    min-height: 317px;
    margin-left: 138px;
    top: 500px;
    position: sticky;
    z-index: 0;
    padding: 9px;
    margin-top: -10px;
}

.search-results-mini {
    margin-top: 23px !important;
}

#search-results-news {
    margin-top: 10px;
    color: var(--common);
}

#search-result-news-list {
    list-style-position: outside;
    margin-left: 10px;
}

#search-results-close:hover {
    cursor: pointer;
}

#results-heading {
    font-size: 19px;
    font-weight: bold;
    margin-left: 14px;
}

::selection {
    background-color: antiquewhite;
    color: black;
}

.filter-save-short {
    color: white;
    background-color: var(--short) !important;
    border-color: var(--short) !important;
}

.filter-save-flat {
    color: white;
    background-color: var(--flat) !important;
    border-color: var(--flat) !important;
}

.filter-save-sector {
    color: white;
    background-color: var(--sector) !important;
    border-color: var(--sector) !important;
}

.filter-heading-multiscan {
    font-weight: bold;
}

.filter-heading-long {
    color: var(--long) !important;
    font-weight: bold;
}

.filter-heading-short {
    color: var(--short) !important;
    font-weight: bold;
}

.filter-heading-special {
    color: var(--flat) !important;
    font-weight: bold;
}

.filter-heading-sector {
    color: var(--sector) !important;
    font-weight: bold;
}

#warning-bar {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: black;
    background: rgb(255,168,9);
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
    font-weight: bold;
}

.warning-bar-blue {
    background: rgb(56,132,255) !important;
    color: white !important;
    clear: both;
}

.warning-bar-blue a {
    color: white !important;
}

.warning-bar-dismiss {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

.warning-bar-dismiss:hover {
    opacity: 1;
}

.warning-bar-close {
    cursor: pointer;
    font-size: 10px;
    float: right;
    padding-top: 3px;
    text-shadow: none;
    color: black;
}

/* Alert Settings Modal */
.alert-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.alert-setting-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.alert-setting-sub {
    padding-left: 24px;
    border-bottom: none;
    padding-top: 0;
    margin-top: -8px;
}
.alert-toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 16px;
}
.alert-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.alert-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.25s ease;
}
.alert-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
}
.alert-toggle input:checked + .alert-toggle-slider {
    background-color: #4caf50;
}
.alert-toggle input:checked + .alert-toggle-slider::before {
    transform: translateX(20px);
}

/* Mobile: the modal can be wider than the viewport, so a right-aligned toggle/
   control ends up off-screen. Stack each row vertically — label on top, control
   left-aligned below — so the toggle/Connect/etc. is always visible. */
@media (max-width: 800px) {
    .alert-setting-row {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }
    .alert-setting-row > div:first-child {
        width: 100%;
        min-width: 0;
    }
}

/* Market Ticker Bar */
#market-ticker-bar {
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
    padding: 2px 14px 4px 14px;
    width: 360px;
    cursor: pointer !important;
    left: 535px;
    top: 29px;
    z-index: 3000;
    position: absolute;
    overflow: hidden;
    height: 40px;
    transition: height 0.2s ease, box-shadow 0.2s ease;
}

#market-ticker-bar:hover {
    height: auto;
    min-height: 50px;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 3001;
}
#market-ticker-bar:hover .market-ticker-more {
    position: static;
    background: none;
    padding-left: 0;
    display: block;
    margin-top: 20px;
}

@media (max-width: 600px) {
    #market-ticker-bar {
        display: none;
    }
}

.market-ticker-bar {
    background: #f0f0f5;
    color: #222;
}

.market-ticker-bullish { border-left: 3px solid #00c853; }
.market-ticker-bearish { border-left: 3px solid #ff1744; }
.market-ticker-neutral { border-left: 3px solid #ffc107; }

.market-ticker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 6px;
}

.market-ticker-dot-pulse {
    animation: market-pulse 2s ease-in-out infinite;
}

.market-ticker-bullish .market-ticker-dot,
.market-ticker-dot-bullish { background-color: #00c853; }
.market-ticker-bearish .market-ticker-dot,
.market-ticker-dot-bearish { background-color: #ff1744; }
.market-ticker-neutral .market-ticker-dot,
.market-ticker-dot-neutral { background-color: #ffc107; }

@keyframes market-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes market-slide-in {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.market-ticker-slide {
    animation: market-slide-in 0.5s ease-out;
}

.market-ticker-time {
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.market-ticker-label {
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

.market-ticker-headline {
    font-weight: bold;
    color: #111;
}

.market-ticker-message {
    flex-grow: 1;
}

.market-ticker-more {
    color: #1a73e8;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    position: absolute;
    right: 8px;
    top: 20px;
    background: #f0f0f5;
    padding-left: 6px;
}

.market-ticker-more:hover {
    color: #1557b0;
}

.market-ticker-close {
    position: absolute;
    top: 2px;
    right: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.5;
    line-height: 1;
    padding: 0 3px;
}

.market-ticker-close:hover {
    opacity: 1;
}

/* Market Update Modal */
.market-update-item {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 3px solid #666;
    background: rgba(255,255,255,0.05);
}

.market-update-bullish { border-left-color: #00c853; }
.market-update-bearish { border-left-color: #ff1744; }
.market-update-neutral { border-left-color: #ffc107; }

.market-update-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11pt;
    opacity: 0.7;
}

.market-update-direction {
    font-weight: bold;
    margin-left: auto;
}

.market-update-bullish .market-update-direction { color: #00c853; }
.market-update-bearish .market-update-direction { color: #ff1744; }
.market-update-neutral .market-update-direction { color: #ffc107; }

.market-update-message {
    font-size: 11pt;
    line-height: 1.4;
}

.market-update-time {
    font-size: 11pt;
}

.market-update-latest {
    background: rgba(0,0,0,0.06);
    outline: 2px solid #222;
    outline-offset: -2px;
    border-left-width: 5px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.install-link {
    color: white !important;
}

#data-error {
    color: red;
    float: left;
    margin-left: 5px;
}

.spin-label {
    color: var(--long);
    font-weight: 500;
}

.center {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.error-message {
    background-color: darkred;
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    width: 100%;
}

.error-button {
    float: left;
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    cursor: pointer;
}

.overlay-visible {
    display: block;
}

#long-overlay {
    width: 892px;
    margin-top: 35px;
    margin-left: 14px;
}

#overlay-close-button {
    top: 98px;
    position: fixed;
    left: 799px;
    background-color: #4472c4 !important;
}

#overlay-windows-link {
    top: 526px;
    position: fixed;
    left: 126px;
    width: 248px;
    height: 20px;
    z-index: 3000;
}

.spin-label-boot {
    color: #16c60c;
    font-weight: bold;
}

.spin-label-boot-loading {
    color: #16c60c !important;
    font-weight: bold;
}

.spin-label-boot:after {
    content: var(--blazor-load-percentage-text);
}

.private-group-text {
    padding-bottom: 10px;
    font-weight: 700;
}

#password {
    width: 100px;
}

#private-group {
    width: 500px;
    height: 500px;
    margin-left: 150px;
    margin-top: 20px;
    color: var(--common);
}

#button-chart-targets {
    float: none;
    width: 140px;
    margin-left: 15px;
    margin-bottom: 10px;
}

#button-unlock {
    float: right;
    margin-top: 2px;
}

.private-password {
    width: 236px;
}

#daily-void-symbol {
    width: 1275px !important;
    min-width: 1275px !important;
    overflow: hidden;
    text-overflow: clip;
    padding-top: 6px;
}

#daily-void-input {
    width: 70px;
    margin-left: 5px;
    float: left !important;
    height: 25px;
    margin-right: 2px;
    font-weight: 700;
    background-color: var(--page-background);
    color: var(--common);
}

.void-spacer {
    width: 142px;
}

.void-last-price {
    float: left;
    margin-right: 10px;
    width: 45px;
}

.void-span {
    float: left;
    margin-right: 10px;
    width: 110px;
}

.void-size {
    float: left;
    margin-right: 10px;
    width: 30px;
}

.void-size .grid-header {
    margin-left: -10px;
}

.void-level {
    float: left;
    margin-right: 10px;
    width: 130px;
}

#button-daily-void {
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    padding-top: 2px;
}

#button-daily-void-dark-mode {
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    padding-top: 2px;
}

.stockchartloader {
    border: 6px solid var(--common);
    border-top: 6px solid var(--common);
    width: 40px;
    height: 40px;
    position: absolute;
    top: 46%;
    left: 46%;
    border-radius: 50%;
    -webkit-animation: loader 2s linear infinite;
    animation: loader 2s linear infinite;
}

.void-news {
    margin-top: -3px !important;
    cursor: pointer;
    margin-left: 0 !important;
    margin-right: 5px;
}

.void-select {
    float: left;
    margin-top: -7px;
}

.void-select-symbol {
    float: left;
    margin-top: -7px;
}

.void-direction-button {
    margin: 0px;
}

.daily-void-heading {
    float: left;
    margin-left: 5px;
    font-size: 18px !important;
    font-weight: 900;
    margin-right: 10px;
}

.daily-void-label {
    float: left;
    margin-left: 10px;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 4px;
    margin-right: 10px;
}

.void-flag-ticker {
    margin-top: 0px;
    margin-left: 5px;
    position: fixed;
    top: 77px;
    z-index: 3000;
    left: 220px;
}

.void-news-region {
    margin-left: -28px !important;
    margin-right: 0px;
    float: left;
}

#void-logo {
    left: 0px;
    margin-top: -4px !important;
    background-color: none;
    width: 100px;
    text-align: center;
    float: left;
}

#void-logo-image {
    height: 30px;
}

#fresh-void-results {
    color: yellow;
    font-weight: 700;
}

.void-starred {
    color: orange;
}

#StockChart_ChartTitle {
    font-weight: 700;
    font-size: 18px;
}

#StockChart_stockChart_Title {
    height: 32px;
}

#sub-filtered-out {
    font-weight: 700;
    font-size: 14px;
    color: white !important;
    background-color: rgba(255, 66, 76, 1.0);
    padding: 5px;
}

#sub-show-results {
    font-weight: 400;
    color: var(--common) !important;
    padding-left: 5px;
    padding-top: 5px;
}

#sub-show-results a {
    font-weight: 400;
    color: var(--common) !important;
}

.subscribe-link {
    color: white !important;
}

#donate-text-filtered {
    text-align: left;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: white !important;
    cursor: pointer;
    margin-left: 150px;
    margin-top: 10px;
}

#sub-filter-patreon {
    float: right;
    position: relative;
    margin-right: 10px;
    margin-top: 8px;
}

#minute-chart-container {
    margin-left: -10px;
    margin-top: 5px;
}

#daily-chart-container {
    margin-left: -10px;
    margin-top: 5px;
}

.lds-ellipsis {
    display: inline-block;
    position: fixed;
    top: 50px;
    left: 20px;
    width: 80px;
    height: 80px;
    z-index: 5002;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    z-index: 5002;
    border-radius: 50%;
    background: var(--long);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
}

.select-long {
    background-color: rgba(0, 255, 0, 0.3);
}

.select-short {
    background-color: rgba(255, 5, 5, 0.3);
}

.chart-not-found {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--page-background);
    position: absolute;
    top: 10px;
    width: 100%;
    height: 500px;
    z-index: 5000;
    padding-top: 9px;
}

#chart-spinner-background {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 700;
    z-index: 5001;
    background-color: var(--page-background);
    position: absolute;
    top: 10px;
    width: 100%;
    height: 500px;
    padding-top: 9px;
}

#big-grid-container {
    margin-left: 145px;
    margin-top: 15px;
    min-width: 200px;
    /* Definite viewport-based height (height:100% never resolved — ancestors aren't bounded),
       so the grid fills the panel AND .ticker-container inside can scroll when a scan has more
       rows than fit. The page (.main-bg) no longer scrolls, so this must. Matches the -150 the
       app uses for _gridHeight. (2026-07-23) */
    height: calc(100vh - 150px);
}

#mini-grid-container {
    margin-left: 5px;
    margin-top: 15px;
    width: 100vw;
    max-width: 878px;
    min-width: 200px;
}

/* 2026-07-22: multi-scan wide mode — drop the 878px cap; the exact width is set inline
   from _gridWidth (full window minus a reserved chart panel when charts are on). */
#mini-grid-container.mini-grid-wide {
    max-width: none;
    /* The page (.main-bg) doesn't scroll, so a tall multi-scan grid (more panels than fit the
       viewport) needs its own vertical scroll — otherwise the lower panels are clipped. Thin
       scrollbar to match the rest of the app. (2026-07-23) */
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
#mini-grid-container.mini-grid-wide::-webkit-scrollbar { width: 6px; }
#mini-grid-container.mini-grid-wide::-webkit-scrollbar-track { background: transparent; }
#mini-grid-container.mini-grid-wide::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 3px; }
#mini-grid-container.mini-grid-wide:hover::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.55); }

/* Multi-scan layout settings — gear button + popover (shown when charts are off). */
/* Inline in the toolbar (it's an .action-button) — just an anchor for the popover. */
.multiscan-settings-wrap {
    position: relative;
    display: inline-block;
}
.multiscan-gear.mcs-gear-active { outline: 1px solid #4f8ef7; }
.multiscan-settings-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 1001;                 /* above the grid panels and the backdrop */
    background: var(--page-background);
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}
.mcs-popover-row { display: flex; align-items: center; gap: 8px; }
.mcs-popover-hint { margin-top: 8px; font-size: 11px; opacity: 0.6; color: var(--page-text); }

/* Multi-scan layout modal rows. */
.mcs-modal-row { display: flex; align-items: center; gap: 12px; }
.mcs-modal-label { min-width: 70px; font-weight: 600; }
.mcs-modal-hint { margin-top: 12px; font-size: 12px; opacity: 0.7; line-height: 1.5; }

/* Clarify layout-columns vs data-columns confusion, with a jump link to the data
   column customizer. Only rendered inside the multi-scan Edit Layout modal. */
.mcs-modal-note {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(79, 142, 247, 0.10);
    border: 1px solid rgba(79, 142, 247, 0.30);
    font-size: 12px;
    line-height: 1.5;
}
.mcs-modal-note > i { color: #4f8ef7; margin-top: 2px; }
.mcs-jump-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #4f8ef7;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.mcs-jump-link:hover { text-decoration: underline; }
.mcs-jump-link i { font-size: 10px; margin-left: 3px; }
.mcs-note-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0 2px;
    margin-left: auto;
    align-self: flex-start;
    font-size: 13px;
    line-height: 1;
}
.mcs-note-close:hover { opacity: 1; }

/* Footer: destructive reset kept small + far from the primary Done button so it
   isn't mistaken for a save/confirm action. */
.mcs-modal-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mcs-reset-link {
    background: none;
    border: none;
    cursor: pointer;
    color: #c0392b;
    opacity: 0.65;
    font-size: 12px;
    padding: 4px 6px;
}
.mcs-reset-link:hover { opacity: 1; text-decoration: underline; }
.mcs-reset-link i { margin-right: 4px; font-size: 11px; }

/* Multi-scan column selector (Auto / 1-6). */
.multiscan-col-select {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.multiscan-col-select .mcs-label {
    color: var(--page-text);
    opacity: 0.7;
    margin-right: 4px;
}
.multiscan-col-select .mcs-btn {
    min-width: 34px;
    padding: 2px 8px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 4px;
    background: transparent;
    /* Inherit the modal's (light) text color — var(--page-text) resolved dark here,
       leaving the unselected On/Off + column buttons unreadable on the dark modal. */
    color: inherit;
    cursor: pointer;
    line-height: 1.4;
}
.multiscan-col-select .mcs-btn:hover {
    border-color: #4f8ef7;
}
.multiscan-col-select .mcs-btn.mcs-active {
    background: #4f8ef7;
    border-color: #4f8ef7;
    color: #fff;
}
/* Turbo-gated column buttons (4-6 for free users): gold tint + dimmed. */
.multiscan-col-select .mcs-btn.mcs-btn-turbo {
    border-color: rgba(255, 179, 0, 0.5);
    color: #ffb300;
    opacity: 0.75;
}
.multiscan-col-select .mcs-btn.mcs-btn-turbo:hover {
    border-color: #ffb300;
    opacity: 1;
}

/* Friendly Turbo note in the Add Scan modal when a free user hits the scan limit. */
.scan-limit-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255, 179, 0, 0.10);
    border: 1px solid rgba(255, 179, 0, 0.30);
    font-size: 13px;
    line-height: 1.5;
}
.scan-limit-note > i { color: #ffb300; margin-top: 2px; }

/* One-time "Expand columns" what's-new popup. */
.mcs-intro {
    text-align: center;
    padding: 8px 14px 6px;
    color: var(--page-text);
}
.mcs-intro-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: #4f8ef7;
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.mcs-intro-cols {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    height: 46px;
    margin-bottom: 16px;
}
.mcs-intro-cols span {
    width: 26px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #6ba4ff, #4f8ef7);
    transform-origin: bottom;
    animation: mcs-intro-grow 0.5s ease-out both;
}
.mcs-intro-cols span:nth-child(1) { height: 60%; animation-delay: 0.00s; }
.mcs-intro-cols span:nth-child(2) { height: 100%; animation-delay: 0.08s; }
.mcs-intro-cols span:nth-child(3) { height: 75%; animation-delay: 0.16s; }
.mcs-intro-cols span:nth-child(4) { height: 88%; animation-delay: 0.24s; }
@keyframes mcs-intro-grow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mcs-intro-cols span { animation: none; }
}
.mcs-intro-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}
.mcs-intro-text {
    font-size: 13.5px;
    line-height: 1.55;
    opacity: 0.85;
    max-width: 340px;
    margin: 0 auto 20px;
}
.mcs-intro-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.mcs-intro-try {
    min-width: 150px;
    padding: 9px 20px;
    border: none;
    border-radius: 6px;
    background: #4f8ef7;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.mcs-intro-try:hover { background: #3d7de8; }
.mcs-intro-try i { margin-left: 6px; font-size: 12px; }
.mcs-intro-dismiss {
    border: none;
    background: transparent;
    color: var(--page-text);
    opacity: 0.6;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}
.mcs-intro-dismiss:hover { opacity: 0.9; }

.mini-grid {
    padding: 5px;
    overflow-x: clip;
    text-overflow: clip;
    height: 95%;
    /* overflow-y: scroll; */
}

.mini-grid-full {
    padding: 5px;
    height: 100%;
}

.mini-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    margin: -5px -5px 0 -5px;
    padding: 0 5px 0 2px;
    border-radius: 4px 4px 0 0;
}

.mini-grid-header-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.mini-grid-title {
    font-weight: bold;
    cursor: move;
    color: white;
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    height: 100%;
}

.mini-grid-row {
    clear: both;
    overflow: hidden;
    text-overflow: clip;
    cursor: pointer;
    margin-left: 0px;
    width: 100%;
    height: 20px;
}

.mini-grid-row:hover {
    outline: 2px solid gray;
}

.mini-grid-row-small {
    /* width: 1500px !important; */
}

.mini-grid-row-selected-long {
    outline: 2px solid var(--long);
}

.mini-grid-row-selected-sector {
    outline: 1px solid var(--sector);
}

.mini-grid-row-selected-short {
    outline: 1px solid var(--short);
}

.mini-grid-header-region {
    top: -1px;
    display: flex;
    z-index: 2;
    margin-bottom: 3px;
    padding-left: 1px;
    min-width: 550px;
    /* width: 1500px !important; */
}

.mini-grid-heading-text-long {
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.mini-grid-heading-text-short {
    background: rgb(178,5,5);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.mini-grid-heading-text-sector {
    color: antiquewhite !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.mini-grid-heading-text-sector {
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.mini-grid-settings {
    color: white;
    cursor: pointer !important;
    text-shadow: 0 0 3px #000000;
    padding: 4px 2px 4px 3px;
}

.mini-grid-info {
    cursor: pointer;
    margin-left: 6px;
    flex-shrink: 0;
}

#multi-scan-intro {
    padding-top: 1px;
    margin-left: 415px;
    color: var(--common);
}

#mini-private-group {
    width: 100%;
    height: 100%;
    margin-left: 10px;
    margin-top: 20px;
    color: var(--common);
}

.action-button-add-multi-scan {
    background-color: hsla(262, 100%, 41%, .7) !important;
    color: white !important;
    float: right;
    height: 27px;
    border-color: hsla(262, 100%, 41%, .7) !important;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    text-align: center;
}

.action-button-add-multi-scan {
    color: white !important;
    color: white;
}

.action-button-add-multi-scan:hover {
    background-color: white !important;
    color: black !important;
}

.warning-bar-mini-grid {
    margin-left: 2px !important;
    width: 868px !important;
}

.filtered-mini-grid {
    margin-left: 5px;
    /* Was -9px which crammed the filter line up against the toolbar.
       Positive value gives breathing room above the "Filtering all scans"
       header in the multi-scan view. */
    margin-top: 8px;
}

/* 2026-07-22: multi-scan — let the "Filtering all scans" summary use the full toolbar
   width (out to the Discord button edge) instead of cramming into ~490px and wrapping.
   Right edge lines up with the Discord button; the Edit/Explain controls pin flush right
   and the summary text fills the space up to them. */
#filtered.filtered-mini-grid {
    width: 888px;
    max-width: 888px;
}
#filtered.filtered-mini-grid #filtered-out-criteria {
    position: relative;
}
#filtered.filtered-mini-grid .funnel-controls {
    right: 4px;             /* Explain Results flush with the Discord button's right edge */
}
/* Override the single-scan padding (which reserves ~460px and crammed the text) so the
   summary fills the width up to just before the far-right controls (~190px cluster). */
#filtered.filtered-mini-grid #filtered-out-criteria .filter-summary-content {
    padding-right: 190px;
}

.mini-grid-select {
    font-size: 10px !important;
    width: 180px !important;
    float: none;
    height: 18px !important;
    padding: 0px !important;
    padding-left: 5px !important;
}

.mini-grid-select-container {
    margin: 0;
    padding: 3px 0 0 0;
    height: 20px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Scan Combo Dropdown with Tabs */
.scan-combo-container {
    display: inline-flex;
    align-items: center;
    height: 26px;
    vertical-align: middle;
    margin-top: 1px;
    margin-left: 2px;
}

.scan-combo-dropdown {
    position: relative;
    display: flex !important;
    align-items: center !important;
    height: 100%;
}

.scan-combo-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px;
    height: 22px !important;
    min-width: 120px;
    max-width: 220px;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 11px;
    font-weight: bold;
    line-height: 1 !important;
    color: white !important;
    background-color: rgba(40, 40, 60, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

.scan-combo-toggle:hover {
    background-color: rgba(60, 60, 90, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.scan-combo-toggle.show,
.scan-combo-toggle[aria-expanded="true"] {
    height: 22px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
}

.scan-combo-toggle::after {
    display: none !important; /* Hide default Blazorise arrow */
}

.scan-combo-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-combo-arrow {
    font-size: 8px;
    opacity: 0.8;
}

.scan-combo-menu {
    min-width: 280px !important;
    max-width: 320px !important;
    max-height: 800px !important;
    padding: 0 !important;
    background-color: #1a1a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

.scan-combo-search {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-combo-search-input {
    width: 100%;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    outline: none;
}

.scan-combo-search-input:focus {
    border-color: rgba(100, 150, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.15);
}

.scan-combo-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.scan-combo-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-combo-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.scan-combo-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.05);
}

.scan-combo-tab.active {
    color: white;
    border-bottom-color: var(--long);
}

.scan-combo-tab:last-child.active {
    border-bottom-color: var(--short);
}

.scan-combo-tab-count {
    font-size: 10px;
    font-weight: normal;
    opacity: 0.7;
    margin-left: 4px;
}

.scan-combo-list {
    max-height: 600px;
    overflow-y: auto;
    padding: 4px 0;
}

.scan-combo-list::-webkit-scrollbar {
    width: 12px;
}

.scan-combo-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.scan-combo-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.scan-combo-section-header,
.scan-combo-category-header {
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scan-combo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.scan-combo-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.scan-combo-item.selected {
    background-color: rgba(100, 150, 255, 0.2);
    color: white;
}

.scan-combo-item-icon {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.scan-combo-item-icon.featured {
    color: #ffd700;
}

.scan-combo-item-icon.private {
    font-size: 10px;
}

.scan-combo-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-combo-item-count {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.scan-combo-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

/* Loading state for grid panels */
.mini-grid.loading {
    position: relative;
}

.mini-grid.loading .ticker-container {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.mini-grid-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.mini-grid-loading-spinner::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.long-menu-visible {
    display: block;
}

#long-menu-bg {
    padding: 10px;
    padding-top: 0px;
}

#long-menu {
    display: none;
    height: 85vh;
    max-width: 800px;
    min-width: 560px;
    overflow-y: scroll;
    overflow-x: clip;
    z-index: 1000;
    position: absolute;
    left: 138px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(0,130,0,0.25) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--long);
    animation: fadeIn .25s;
}

#long-menu:hover {
    display: block;
}

#short-menu-bg {
    padding: 10px;
    padding-top: 0px;
}

#short-menu {
    display: none;
    height: 85vh;
    max-width: 800px;
    min-width: 560px;
    overflow-y: scroll;
    overflow-x: clip;
    z-index: 1000;
    position: absolute;
    left: 284px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(178, 5, 5, .25) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--short);
    animation: fadeIn .25s;
}

#short-menu:hover {
    display: block;
}

#sectort-menu-bg {
    padding: 10px;
    padding-top: 0px;
}

#sector-menu {
    display: none;
    height: 348px;
    max-width: 800px;
    min-width: 307px;
    z-index: 1000;
    position: absolute;
    left: 458px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(26,91,81,.25) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
}

#sector-menu:hover {
    display: block;
}

#alerts-menu {
    display: none;
    width: 286px;
    z-index: 1000;
    position: absolute;
    left: 530px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(255,168,9,.35) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
    max-height: 90vh;
    overflow-y: auto;
}

#alerts-menu {
    max-width: 800px;
    min-width: 183px;
}

#alerts:hover {
    display: block;
}

#settings-menu {
    display: none;
    height: auto;
    max-width: 800px;
    min-width: 176px;
    z-index: 1000;
    position: absolute;
    left: 601px;
    top: 108px;
    background-color: white;
    box-shadow: rgb(76, 82, 97, .35) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
}

#settings-menu:hover {
    display: block;
}

/* Settings menu is no longer made responsive at mid/small viewports — the
   full-width treatment rendered oddly. It now always uses the desktop dropdown
   positioning above. (The Settings entry is already hidden from the mobile menu.)

@media only screen and (max-width: 768px) {
    #settings-menu {
        left: 10px;
        top: 60px;
        right: 10px;
        min-width: unset;
        max-width: unset;
        width: calc(100% - 20px);
        z-index: 2000;
    }
}
*/

#account-menu {
    display: none;
    height: 102px;
    max-width: 800px;
    min-width: 167px;
    z-index: 1000;
    position: absolute;
    left: 685px;
    top: 109px;
    background-color: white;
    box-shadow: rgb(76, 82, 97, .35) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
}

.top-menu-row {
    border-bottom: 1px solid;
    border-color: rgba(183, 189, 183, 0.5);
    padding: 2px;
    cursor: pointer;
    min-height: 23px;
    font-size: 13px;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-menu-row-long:hover .top-menu-heading {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-long:hover .top-menu-title-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-long:hover .top-menu-label-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-long:hover {
    color: white !important;
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.top-menu-row-long:hover {
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.top-menu-row-short:hover .top-menu-heading {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-short:hover .top-menu-title-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-short:hover .top-menu-label-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-short:hover {
    color: white !important;
    background: rgb(217,4,4);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-short:hover {
    background: rgb(217,4,4);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-sector:hover .top-menu-title-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-sector:hover .top-menu-label-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-sector:hover {
    color: white !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-alerts:hover {
    color: white !important;
    background: rgb(255,168,9);
    background: linear-gradient(90deg, rgba(255,168,9,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-alerts:hover {
    background: rgb(255,168,9);
    background: linear-gradient(90deg, rgba(255,168,9,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-settings:hover {
    color: white !important;
    background: rgb(76,82,97);
    background: linear-gradient(90deg, rgba(76,82,97,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-settings:hover {
    background: rgb(76,82,97);
    background: linear-gradient(90deg, rgba(76,82,97,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-account:hover {
    color: white !important;
    background: hsla(116, 76%, 44%,1);
    background: linear-gradient(90deg, hsla(116, 76%, 44%,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-account:hover {
    background: hsla(116, 76%, 44%,1);
    background: linear-gradient(90deg, hsla(116, 76%, 44%,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-heading {
    font-weight: bold;
    font-size: 13px;
    /*margin-left: 0px !important;*/
    margin-top: 4px;
    padding-left: 10px;
}

.top-menu-heading-long {
    color: white;
    background: linear-gradient(90deg, rgb(0, 134, 0) 0%, rgba(0, 134, 0, 0.21) 97%);
    font-weight: 900;
}

.top-menu-heading-short {
    color: white;
    background: linear-gradient(90deg, rgb(217, 4, 4) 0%, rgba(0, 0, 0, 0) 100%);
    font-weight: 900;
}

.top-menu-heading-sector {
    color: var(--short);
}

.top-menu-title {
    width: 153px;
    overflow: clip;
    float: left;
    margin-left: 10px;
    font-weight: 500;
}

.top-menu-title-disabled {
    color: lightgray !important;
}

.top-menu-label {
    width: 350px;
    text-overflow: clip;
    overflow: hidden;
    float: right;
}

.top-menu-label-sector {
    width: 100px;
}

.top-menu-label-disabled {
    color: lightgray !important;
}

.patreon-logo-landing-dark {
    display: none;
    width: 120px;
    margin-left: 3px;
}

.patreon-logo-landing-light {
    display: none;
    width: 120px;
    margin-left: 3px;
    margin-top: 0px;
}

.landing-features-columns {
    width: 650px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
}

.brick {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 300px;
    margin: 0 auto;
}

.masonry {
    --masonry-gap: 16px; /* space between bricks */
    --masonry-brick-width: 325px;
    display: flex; /* flexbox masonry */
    flex-wrap: wrap;
    gap: var(--masonry-gap);
    justify-content: center; /* center as they wrap */
    align-items: flex-start;
    text-align: center;
    margin-left: 0; /* no negative offset needed */
}

.masonry > * {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap);
}

.masonry > * {
    margin-bottom: initial;
}

.masonry > * {
    margin-bottom: var(--masonry-gap);
}

@supports(grid-template-rows: masonry) {
    .masonry {
        display: grid;
        gap: var(--masonry-gap);
        grid-template-rows: masonry;
        grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
        align-tracks: stretch;
    }
}




#loading-long-overlay {
    width: 892px;
    margin-top: 35px;
    margin-left: 14px;
}

#loading-overlay-close-button {
    top: 98px;
    position: fixed;
    left: 799px;
    background-color: #4472c4 !important;
}

#loading-overlay-windows-link {
    top: 526px;
    position: fixed;
    left: 126px;
    width: 248px;
    height: 20px;
    z-index: 3000;
}

#loading-watchlist {
    float: left;
    margin-left: 5px;
    margin-top: -20px;
    min-width: 758px;
}

#loading-logo {
    position: absolute;
    height: 58px;
    left: 0px;
    top: 24px;
    background-color: none;
    padding: 5px;
    width: 132px;
    text-align: center;
}

#loading-logo-image {
    height: 47px;
}

#loading-standard-region {
    float: left;
    margin-bottom: 10px;
    padding: 0px;
    margin-top: -12px;
    width: 600px;
    overflow: hidden;
}

#loading-header-text {
    color: var(--common);
    float: left;
    position: absolute;
    margin-left: 140px;
    width: 350px;
    top: 32px;
    font-size: 11px;
    height: 41px;
    vertical-align: middle;
    line-height: 19px;
}

#loading-header-center-text {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#loading-whats-new {
    position: absolute;
    left: 354px;
    top: 3px;
    font-size: 10px !important;
    width: 86px;
}

#loading-updated {
    color: var(--common);
    font-style: italic;
    font-size: 11px;
    z-index: 10;
    margin-left: 4px;
    margin-top: 5px;
    position: absolute;
    left: 423px;
    top: 51px;
    text-align: right;
    width: 140px;
}

#loading-sectors {
    position: absolute;
    top: 56px;
    left: 564px;
    font-size: 8px;
    border: none;
    height: 60px;
    width: 300px;
}

#loading-tab-sector-top-row {
    height: 25px;
    margin-bottom: 3px;
    margin-left: 11px;
    width: 300px;
}

#loading-tab-sector-bottom-row {
    height: 25px;
    position: absolute;
    width: 300px;
    margin-left: 11px;
}

#loading-top-menu {
    position: absolute;
    top: 84px;
    margin-left: 0px;
    width: 580px;
}

#loading-tab-home {
    color: white;
    border-color: hsla(262, 100%, 41%, 1);
    width: 132px;
    background-color: hsla(262, 100%, 41%, .8);
    font-weight: 500 !important;
    font-size: 13px;
}

#loading-tab-long {
    color: white;
    width: 144px;
    background-color: hsla(120, 100%, 26%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#loading-tab-short {
    color: white;
    width: 144px;
    background-color: hsla(0, 100%, 52%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    margin-left: 0px;
    margin-top: 0px;
}

#loading-tab-sector {
    color: white;
    width: 142px;
    background-color: hsla(170, 56%, 23%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#loading-donate-text {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: white !important;
    background-color: #ff424d !important;
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
}

#loading-donate-content {
    float: left;
    cursor: pointer;
}

#loading-main-content {
    display: flex;
    /* Was justify-content: center, which docked the 875px-wide
       landing content block in the middle of the viewport. flex-start
       parks it against the left edge so the whole page reads as
       left-aligned on wide viewports. The container itself still
       caps at 875px wide, so very wide screens just get unused
       space on the right rather than the center-stage layout.
       Desktop overrides this back to center (its window opens at
       1950px wide, where flex-start reads as badly off-center) via
       wwwroot/css/desktop.css, loaded after this file. */
    justify-content: flex-start;
    align-items: flex-start;
}

#loading-user-count {
    left: 643px;
    position: absolute;
    top: 31px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
    width: 300px;
}

#loading-market-events {
    left: 805px;
    position: absolute;
    top: 55px;
    width: 100px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
}

#loading-market-events {
    left: 575px;
    top: 31px;
}

#loading-market-events {
    left: 805px;
    top: 55px;
}

#loading-dark-mode-switch {
    left: 824px;
    position: absolute;
    top: 31px;
    width: 100px;
    z-index: 500;
}

#loading-switch-text-moon {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    z-index: 2030;
    margin-left: -3px;
}

#loading-mobile-ticker-search {
    left: 365px !important;
    position: absolute !important;
    top: 80px !important;
    z-index: 2000;
    width: 74px !important;
    width: 100px;
    height: 33px;
    float: left;
    font-size: 10px;
    margin-right: 8px;
    margin-left: -2px;
    border-radius: 2px;
    border: 1px solid #ced4da;
    padding-left: 5px;
}

#loading-mobile-ticker-search {
    width: 74px !important;
    width: 100px;
}

#wave-table {
    max-width: 908px;
    min-width: 400px;
    width: 100vw;
}

#wave-table td {
    display: flex;
    justify-content: center;
    align-items: center;
}

#waves {
    display: flex;
    justify-content: center;
    align-items: center;
}

#waves {
    left: 50vw;
    margin-top: 8px;
    margin-bottom: 11px;
    text-align: center;
}

.wave {
    width: 1px;
    height: 30px; /* 1/3 shorter loading bars */
    float: left;
    padding-left: 3px;
    padding-right: 6px;
    animation: wave 1s linear infinite;
    border-radius: 0px;
    background: linear-gradient(45deg, #16c60c, var(--page-background));
}

.wave:nth-child(2) {
    animation-delay: 0.1s;
}

.wave:nth-child(3) {
    animation-delay: 0.2s;
}

.wave:nth-child(4) {
    animation-delay: 0.3s;
}

.wave:nth-child(5) {
    animation-delay: 0.4s;
}

.wave:nth-child(6) {
    animation-delay: 0.5s;
}

.wave:nth-child(7) {
    animation-delay: 0.6s;
}

.wave:nth-child(8) {
    animation-delay: 0.7s;
}

.wave:nth-child(9) {
    animation-delay: 0.8s;
}

.wave:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes wave {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

#intro-header {
    height: 17px;
    font-size: 16px;
    font-weight: 900;
    color: var(--common);
    margin-top: 24px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 15px;
    width: 100%;
    text-align: left;
    min-width: 350px;
}

.intro-sidebar {
    margin-left: -4px !important;
}

.combined-rectangle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    border: 3px solid #ff424d;
    border-radius: 20px;
    width: 92%;
    margin-left: 20px;
    box-sizing: border-box;
}

.combined-rectangle-text {
    flex: 1;
    margin-right: 15px;
    font-size: 14px;
}

.combined-rectangle-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
}

.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.spinner-container-mini-grid {
    text-align: center;
    padding: 50px;
    color: #666;
}

.grid-footer {
    color: var(--common);
}

.collapsed {
    display: none !important;
}

.watchlist-subhead .fa-chevron-down {
    transition: transform 0.2s ease;
    float: right;
    margin-top: 4px;
}

.watchlist-subhead:hover {
    cursor: pointer;
}

.watchlist-subhead[data-heading] .fa-chevron-down {
    transform: rotate(0deg);
}

.watchlist-subhead[data-heading].expanded .fa-chevron-down {
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0px !important;
}

i.fa.fa-chevron-right.subhead-chevron {
    margin-top: 3px;
    float: right;
    font-weight: bold;
    color: black;
}

i.fa.fa-chevron-down.subhead-chevron {
    margin-top: 2px;
    float: right;
    color: black !important;
    font-weight: b;
}

.menu-flag {
    float: right;
    padding-top: 9px;
    padding-left: 5px;
}

.alerts-view {
    /* Line the grid up with the "Recent Alerts" heading (#intro-header has the
       same parent and margin-left: 20px). */
    padding-left: 20px;
}

.alerts-edit {
}

.alerts-view-mini {
    padding-left: 11px;
    padding-right: 10px;
}

.watchlist-row {
    clear: both;
    margin-left: 19px;
    margin-bottom: 9px;
    width: 600px;
    padding-bottom: 8px;
    color: var(--common);
}

.watchlist-item {
    margin-left: 106px;
    color: var(--common);
    padding-top: 6px;
}

.alert-edit {
    float: left;
    width: 90px;
}

#alerts-intro {
    color: var(--common);
}

.price-pops-header {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 7px !important;
    color: var(--common) !important;
}

.price-pops-header:hover {
    cursor: pointer !important;
    text-decoration: underline;
}

.alert-contents {
    max-height: 30vh;
    text-overflow: clip;
    width: 214px;
    overflow-x: auto;
}

.alert-new {
    font-style: italic;
    font-weight: normal;
}

.blazored-toast-close {
    float: right;
}

.blazored-toast {
    width: 21em !important;
}

.blazored-toast {
    color: var(--common) !important;
}

.blazored-toast .blazored-toast-progressbar > span {
    background-color: hsla(116, 76%, 44%,1) !important;
}

.price-pop-text-mini {
    font-size: 11px !important;
}

.alert-contents-mini {
    min-width: 270px;
    padding-bottom: 15px;
}

/* Fluid columns: fit as many ~270px columns as the available width allows,
   capped at 3 by max-width. This replaces the old fixed width:845px + a 880px
   breakpoint, which dropped to 2 columns on any window narrower than 880px even
   when there was clearly room for a third. Cards fill their column (below). */
.alerts-masonry {
    /* Target ~290px columns and cap the grid at ~1040px so 3 columns grow to
       ~330px when there's room — wide enough that the "… Jun-26 9:52 AM ET"
       timestamp stays on one line instead of wrapping. Columns expand to fill,
       and the cap keeps it at 3 across; it gracefully drops to 2 (still wide)
       on narrower windows. */
    column-width: 230px;
    column-gap: 1rem;
    width: 100%;
    max-width: 880px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    /* Cap the alerts area to the actual viewport — the app's main content area
       is wider than a phone screen, so width:100% children would otherwise
       overflow to the right. */
    .alerts-view {
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-right: 18px;   /* right-side margin so cards don't touch the edge */
    }
    .alerts-masonry {
        column-count: 1;     /* stack the alert regions on small / mobile screens */
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Cards are inline-block/270px by default, so they sit side-by-side. Make
       each region a full-width block that fills (not exceeds) the column. */
    .alerts-masonry .alerts-toast {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Release the 270px floor so the rows fit narrow screens. */
    .alerts-masonry .alert-contents-mini {
        min-width: 0;
    }
}

.alerts-area {
    margin-top: 10px;
}

.alerts-toast {
    display: inline-block;
    width: 270px;
    margin: 0 0 1rem;
    break-inside: avoid;
}

/* Alert tiles in the draggable/resizable GridStack dashboard: fill the panel
   (override the masonry's fixed 270px), header is the drag handle, and the alert
   list scrolls inside the fixed cell. The gray box comes from
   .grid-stack-item-content (chart-style absolute inset → naturally contains it). */
.gs-alert-panel .alerts-toast {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}
/* The miniscan-style header bar (drag handle is .mini-grid-title inside it). */
.gs-alert-panel .alerts-toast .mini-grid-header {
    flex: 0 0 auto;
}
.gs-alert-panel .alerts-toast .alert-contents-mini {
    flex: 1 1 auto;
    min-width: 0;   /* release the 270px floor so it fits narrow panels */
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px;
}

/* Collapsed placeholder shown when the alerts dashboard has zero alerts. */
.alerts-empty-region {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    opacity: 0.5;
    border: 1px dashed rgba(128, 128, 128, 0.4);
    border-radius: 6px;
}

/* Alert tile header: a fixed dark gradient so the white title/icons stay
   legible in BOTH light and dark mode (the old direction-tinted header went
   white-on-light and vanished in light mode). Applies in the menu and grid. */
.alerts-tile-header {
    background: linear-gradient(135deg, #33476b 0%, #1b2940 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Sit flush at the top of the card (the inherited .mini-grid-header negative
       margins are for the multiscan panel's padding, which we don't have here). */
    margin: 0;
    border-radius: 4px 4px 0 0;
}

/* Full-view tiles are static cards (gray box like multiscan), one per scan with
   alerts, flowing into the masonry columns — no GridStack drag/resize. */
.alerts-masonry .alerts-toast {
    /* Fill the (fluid) column instead of the default fixed 270px so the column
       count is driven by the container's column-width, not the card width. */
    display: block;
    width: auto;
    background: var(--page-background);
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    overflow: hidden;
    vertical-align: top;
    box-sizing: border-box;
}
.alerts-masonry .alerts-toast .alert-contents-mini {
    padding: 4px 6px;
    min-width: 0;   /* release the 270px floor so the card matches its column */
    max-width:271px
}
.alerts-tile-header .mini-grid-title,
.alerts-tile-header .mini-grid-title .alert-new {
    color: #ffffff;
}
.alerts-tile-header .mini-grid-title {
    padding-left: 8px;   /* a little breathing room before the scan name */
    gap: 4px;
    min-width: 0;        /* allow the name to shrink so the ellipsis engages */
    cursor: pointer;     /* clicking launches the scan — not a drag handle anymore */
}
/* If the scan name is too long, truncate it with an ellipsis — the (count) and
   the trash icon stay visible, and the full name is in the title tooltip. */
.alerts-tile-header .alerts-tile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.alerts-tile-header .alert-new {
    flex: 0 0 auto;      /* the count never shrinks; only the name truncates */
}
.alerts-tile-header .mini-grid-header-icons,
.alerts-tile-header .mini-grid-settings {
    color: #cdd6e8;
}
.alerts-tile-header .mini-grid-settings:hover {
    color: #ffffff;
}

.clear-button {
    margin-top: 3px;
    float: right;
}

.alerts-toolbar {
    margin-bottom: 15px;
    height: 20px;
    margin-top: 10px;
    width: 213px;
}

#tv-charts {
    /*padding-top: 22px;*/
}

.column-select-column {
    width: 320px;
    overflow: visible;
}

.ticker-container {
    overflow-y: auto;
    overflow-x: auto;
    height: 90%;
    /* 90% suits the multi-scan mini panels (header row above the grid). A full-screen
       grid has no header inside .mini-grid-full, so 90% left a dead strip at the bottom
       — fill it. Applies to the pop-out and the main full-screen scan. (2026-07-23) */
    /* 2026-07-22: very thin scrollbar, matching the scan menu. */
    scrollbar-width: thin;                                    /* Firefox */
    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
/* WebKit (Chrome/Edge/WebView2): a very small, subtle scrollbar for the grid */
.ticker-container::-webkit-scrollbar { width: 4px; height: 4px; }
.ticker-container::-webkit-scrollbar-track { background: transparent; }
.ticker-container::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 2px; }
.ticker-container:hover::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.55); }

/* Full-screen grids (pop-out + main scan) have no in-grid header, so the grid fills
   the whole area — removes the ~10% gap at the bottom. */
.mini-grid-full .ticker-container { height: 100%; }

#loading-intro-text {
    text-align: left;
    width: 95%;
    min-width: 500px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
}

#loading {
    padding-top:20px;
    padding-left:5px;
    margin-left:20px !important;
}

#loading-intro-text {
    color: var(--common);
}

/* On small/mobile screens release the 500px floor so the Active Alerts intro
   text wraps to the viewport instead of running off the right edge. Placed
   after the base rules so it wins the cascade. */
@media (max-width: 768px) {
    #loading-intro-text {
        min-width: 0;
        width: auto;
        max-width: 100vw;
        box-sizing: border-box;
    }
}

.chart-boundary {
    margin-top: 10px;
}

.symbol-link-recent {
    font-weight: 100 !important;
    color: #8f9491 !important;
}

.me-2 {
    margin-right: 0px;
}

.account-promo {
    background: #ffd500;
    color: black !important;
    margin-bottom: -6px;
    margin-top: 8px;
    font-size: 11px;
    /* 2026-07-22: fit the defined menu width (was overflowing past it). */
    min-width: 0;
    width: 135px;
    max-width: 135px;
    box-sizing: border-box;
    white-space: normal;
}

.account-promo:hover {
    background: yellow;
    color: black !important;
}

#sector-spacer {
    height: 7px;
}

.account-promo-wide {
    background: linear-gradient(90deg, #ffd500, rgba(0,0,0,0) 100%);
    color: black !important;
    margin-bottom: 4px;
    margin-top: 0px;
    margin-left: 6px !important;
    padding: 1px;
    border-color: rgba(183, 189, 183, 0.5);
    font-size: 11px;
    width: 876px;
    padding-left: 6px;
}

.account-promo-wide:hover {
    cursor: pointer !important;
}

.build-scan {
    /*background-color:var(--action-yellow);*/
}

.addToScans {
    margin-left: 5px;
    padding-top: 6px;
    padding-bottom: 5px;
}

/* GridStack.js Styles */
.grid-stack {
    background: transparent;
    --gs-item-margin: 10px; /* Gap between grid items */
}

.grid-stack > .grid-stack-item {
    z-index: 100 !important;
}

.grid-stack-item-content {
    background: var(--page-background);
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    overflow: hidden;
    position: absolute;
    /* Inset creates visual gaps between panels */
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.gs-grid-panel {
    z-index: 100 !important;
}

.gs-grid-panel .grid-stack-item-content {
    padding: 0;
    overflow: hidden !important;
    box-sizing: border-box;
    /* Inset creates visual gaps between panels for resize handles */
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 10px !important;
    bottom: 10px !important;
}

/* Hide any scrollbars on the outer panel container */
.gs-grid-panel .grid-stack-item-content::-webkit-scrollbar {
    display: none;
}

/* Make mini-grid fill the GridStack panel */
.gs-grid-panel .mini-grid {
    height: 100% !important;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
    box-sizing: border-box;
}

/* In GridStack panels, mini-grid has padding:0, so remove negative margins
   that would push the header outside bounds when overflow changes to visible */
.gs-grid-panel .mini-grid-header {
    margin: 0;
    border-radius: 4px 4px 0 0;
}

/* Header row needs to clear floats */
.gs-grid-panel .mini-grid-title {
    clear: none;
}

.gs-grid-panel .mini-grid-header-region {
    clear: both;
}

/* Ticker container - fills remaining space below header */
.gs-grid-panel .ticker-container {
    position: absolute !important;
    top: 26px !important; /* Below title bar */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100% - 26px) !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Header is sticky at top, scrolls horizontally with content */
.gs-grid-panel .mini-grid-header-region {
    position: -webkit-sticky; /* Safari prefix */
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--page-background);
    min-width: -webkit-max-content; /* Safari prefix */
    min-width: max-content;
    white-space: nowrap;
}

.gs-grid-panel .mini-grid-row {
    min-width: -webkit-max-content; /* Safari prefix */
    min-width: max-content;
    white-space: nowrap;
    cursor: pointer;
}

/* Ensure header region doesn't inherit drag cursor */
.gs-grid-panel .mini-grid-header-region {
    cursor: default;
}


/* Scrollbars for ticker container - larger and easier to grab */
.gs-grid-panel .ticker-container::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.6);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.8);
    background-clip: padding-box;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.2);
}

/* Ensure default cursor in scroll area, not drag cursor */
.gs-grid-panel .ticker-container {
    cursor: default;
}

/* GridStack resize handles - larger for easier grabbing */
.grid-stack-item > .ui-resizable-handle {
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    z-index: 200 !important;
}

/* Edge handles - positioned in the gap area outside scrollbars */
.grid-stack-item > .ui-resizable-s {
    height: 8px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.grid-stack-item > .ui-resizable-n {
    height: 6px !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

.grid-stack-item > .ui-resizable-e {
    width: 8px !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

.grid-stack-item > .ui-resizable-w {
    width: 8px !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Corner handles - small to not interfere with scrollbars or header */
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw,
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw {
    width: 10px !important;
    height: 6px !important;
    background: transparent !important;
    z-index: 201 !important;
}

/* GridStack placeholder styling */
.grid-stack-placeholder > .placeholder-content {
    background-color: rgba(77, 0, 209, 0.1);
    border: 2px dashed #4d00d1;
    border-radius: 4px;
}

/* Scan Select Autocomplete Styling */
.scan-select-autocomplete {
    width: 100%;
}

.scan-select-autocomplete .dropdown-menu {
    max-height: 90vh;
    min-height: 500px;
    height: 60vh;
    overflow-y: auto;
    position: fixed !important;
    z-index: 9999 !important;
    width: 300px !important;
    max-width: 300px !important;
}

/* Mini grid header autocomplete */
.mini-grid-autocomplete {
    display: inline-flex;
    align-items: center;
    min-width: 180px;
    max-width: 250px;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
}

.mini-grid-autocomplete::after {
    content: "▼";
    font-size: 12px;
    color: white;
    margin-left: 6px;
    opacity: 0.8;
}

.mini-grid-autocomplete .form-control,
.mini-grid-autocomplete input,
.mini-grid-autocomplete input[type="text"],
.mini-grid-autocomplete input.form-control {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 6px !important;
    font-size: 12px;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-weight: bold;
    cursor: pointer;
    line-height: 18px !important;
}

.mini-grid-autocomplete .form-control::placeholder,
.mini-grid-autocomplete input::placeholder {
    color: rgba(255,255,255,0.9) !important;
    opacity: 1;
}

/* Mini grid autocomplete dropdown */
.mini-grid-autocomplete .dropdown-menu {
    max-height: 70vh;
    min-height: 300px;
    overflow-y: auto;
    z-index: 999999 !important;
    width: 250px !important;
    max-width: 250px !important;
    pointer-events: auto !important;
}

.mini-grid-autocomplete .dropdown-menu .dropdown-item,
.mini-grid-autocomplete .dropdown-menu a,
.mini-grid-autocomplete .dropdown-menu [role="option"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 6px 12px;
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.mini-grid-autocomplete .dropdown-menu .dropdown-item:hover,
.mini-grid-autocomplete .dropdown-menu a:hover,
.mini-grid-autocomplete .dropdown-menu [role="option"]:hover,
.mini-grid-autocomplete .dropdown-menu .active {
    background-color: rgba(77, 0, 209, 0.3) !important;
}

/* Allow dropdown to escape grid panel when open */
.grid-stack-item:has(.dropdown-menu.show) {
    overflow: visible !important;
    z-index: 999998 !important;
}

.grid-stack-item-content:has(.dropdown-menu.show) {
    overflow: visible !important;
}

.mini-grid:has(.dropdown-menu.show),
.ticker-container:has(.dropdown-menu.show),
.mini-grid-header-region:has(.dropdown-menu.show) {
    overflow: visible !important;
}

.scan-option {
    display: block;
    width: 100%;
    cursor: pointer;
}

.scan-option.select-long {
    color: var(--common);
}

.scan-option.select-short {
    color: var(--common);
}

.scan-option.select-header {
    color: var(--common);
    font-weight: bold;
    background-color: var(--light-gray);
    pointer-events: none;
}

/* Allow autocomplete dropdown to overflow modal */
.modal-content {
    overflow: visible !important;
}

.filter-modal-body {
    overflow: visible !important;
}

.filter-search-container {
    /* display: inline-block;*/
    width: 100%;
    /* float: right; */
}

.filter-search-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    /* width: 20px; */
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#loaded-content {
    width:880px !important;
}


#my-account {
    padding-left: 20px;
    padding-top: 17px;
}

.turbo-title-text {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.turbo-active {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(247, 147, 30, 0.1)) !important;
    border-color: #ff6b35 !important;
    color: var(--bs-dark) !important;
}

.turbo-inactive {
    background: rgba(108, 117, 125, 0.1) !important;
    border-color: #6c757d !important;
}

.turbo-status-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 17px;
}

.turbo-status-text {
    flex: 1;
}

.turbo-active-status-text {
    color: var(--common);
    font-weight: 600;
}

.turbo-button {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.turbo-button-active {
    background: white;
    color: #ff6b35;
    border: 1px solid #ff6b35;
}

.turbo-button-active:hover {
    background: #ff6b35;
    color: white;
}

.turbo-button-inactive {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    border: 1px solid transparent;
}

.turbo-button-inactive:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}


.step-wizard {
    margin-bottom: 30px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 91vw;
    max-width: 844px;
}

.step-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #dee2e6;
}

.step-nav-item {
    padding: 15px 30px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.2s ease;
}

.step-nav-item.active {
    color: #ff6b35;
    border-bottom-color: #ff6b35;
}

.step-nav-item.completed {
    color: #28a745;
}

.step-nav-item:hover:not(.active) {
    color: #495057;
}

.step-content {
    min-height: 400px;
    padding: 15px 0;
    color: var(--common);
}

.agreement-text {
    height: 300px;
    overflow-y: auto;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--common);
    background: rgba(0, 0, 0, 0.03);
}

.step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-step {
    min-width: 120px;
}

.account-summary {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 91vw;
}

.account-summary h4 {
    color: var(--common);
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: bold;
}

.account-summary p {
    margin-bottom: 8px;
    color: var(--text-secondary, #888);
    font-size: 15px;
    line-height: 1.5;
}

.step-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #dee2e6;
}

.step-nav-item {
    padding: 15px 30px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.2s ease;
}

.step-nav-item.active {
    color: #ff6b35;
    border-bottom-color: #ff6b35;
}

.step-nav-item.completed {
    color: #28a745;
}

.step-nav-item:hover:not(.active) {
    color: #495057;
}

.step-content {
    min-height: 400px;
    padding: 15px 0;
    color: var(--common);
}

.agreement-text {
    height: 300px;
    overflow-y: auto;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--common);
    background: rgba(0, 0, 0, 0.03);
}

.step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-step {
    min-width: 120px;
}

.account-summary {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 91vw;
    max-width: 844px;
}

.account-summary h4 {
    color: var(--common);
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: bold;
}

.account-summary p {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.5;
}


.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

#filter-scan-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

#filter-scan-direction {
    display: flex;
    gap: 5px;
}

/* Filter toolbar - search + toggles row */
.filter-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.filter-fields {
    position: relative;
}

.filter-toggles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Filter Group Toggles */
.filter-group-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.filter-group-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    transition: all 0.15s ease;
}

.filter-group-toggle:hover {
    background: #e5e5e5;
    color: #333;
    border-color: #aaa;
}

.filter-group-toggle.has-filters {
    border-color: var(--action-yellow);
    background: rgba(237, 137, 54, 0.1);
}

.filter-group-toggle.has-filters .filter-group-toggle-name {
    color: var(--action-yellow);
}

.filter-group-toggle.has-filters:hover {
    background: rgba(237, 137, 54, 0.2);
}

.filter-group-toggle-name {
    font-weight: 500;
}

.filter-group-toggle-count {
    background: var(--action-yellow);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* Light mode filter group toggles */
.filter-modal-light .filter-group-toggles {
    border-bottom-color: #ddd;
}

.filter-modal-light .filter-group-toggle {
    background: #f0f0f0;
    border-color: #ccc;
    color: #555;
}

.filter-modal-light .filter-group-toggle:hover {
    background: #e0e0e0;
    color: #333;
    border-color: #aaa;
}

.filter-modal-light .filter-group-toggle.has-filters {
    border-color: var(--action-yellow);
    background: rgba(237, 137, 54, 0.1);
}

.filter-modal-light .filter-group-toggle.has-filters .filter-group-toggle-name {
    color: #b36b00;
}

.filter-modal-light .filter-group-toggle.has-filters:hover {
    background: rgba(237, 137, 54, 0.15);
}

/* Filter Summary */
.filter-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 0;
    background: rgba(237, 137, 54, 0.1);
    border: 1px solid rgba(237, 137, 54, 0.3);
    border-radius: 6px;
    min-height: 40px;
}

.filter-summary-label {
    color: var(--action-yellow);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

/* dialog-only: the bare class leaked this 60px scroll box onto the main
   Filtering bar (the odd stray scrollbar) — scope it to the modal summary */
.filter-summary .filter-summary-content {
    flex: 1;
    font-size: 11px;
    line-height: 1.4;
    max-height: 60px;
    overflow-y: auto;
}

.filter-summary-none {
    color: #888;
    font-style: italic;
}

.filter-summary-text {
    color: #4fc3f7;
    font-family: monospace;
    word-break: break-word;
}

.filter-summary-clear {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #666;
    border-radius: 4px;
    color: #999;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.filter-summary-clear:hover {
    background: rgba(255, 85, 85, 0.2);
    border-color: #ff5555;
    color: #ff5555;
}

.filter-summary-clear i {
    margin-right: 4px;
}

/* Light mode filter summary */
.filter-modal-light .filter-summary {
    background: rgba(237, 137, 54, 0.08);
    border-color: rgba(237, 137, 54, 0.25);
}

.filter-modal-light .filter-summary-label {
    color: #b36b00;
}

.filter-modal-light .filter-summary-none {
    color: #999;
}

.filter-modal-light .filter-summary-text {
    color: #0066cc;
}

.filter-modal-light .filter-summary-clear {
    border-color: #ccc;
    color: #666;
}

.filter-modal-light .filter-summary-clear:hover {
    background: rgba(255, 85, 85, 0.1);
    border-color: #ff5555;
    color: #cc0000;
}

/* Light mode filter regions */
.filter-modal-light .filter-region {
    border-color: #ddd;
    background: rgba(0, 0, 0, 0.03);
}

.filter-modal-light .filter-region-header {
    color: white;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.filter-modal-light .filter-region-content {
    color: #333;
}

.filter-search-input {
    flex: 1;
    min-width: 120px;
    max-width: 340px;
    padding: 4px 10px 4px 32px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
    color: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.filter-search-input::placeholder {
    color: #999;
    font-style: italic;
}

.filter-search-input:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

.filter-modal-body {
    height: 95vh;
    position: relative;
    width: 100%;
    overflow-y: auto !important;
    max-height: 84vh !important;
}

/* Make filter modal dialog expand */
.modal:has(.filter-modal-body) .modal-dialog {
    max-width: 90vw !important;
    width: 850px !important;
}

.modal:has(.filter-modal-body) .modal-content {
    width: 100% !important;
}

/* Two-column layout container for filter regions */
.filter-columns-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
}

.filter-columns-container #filter-region-left-col {
    flex: 1 1 0 !important;
    max-width: 380px !important;
    min-width: 0 !important;
}

.filter-columns-container #filter-region-right-col {
    flex: 1 1 0 !important;
    max-width: 380px !important;
    min-width: 0 !important;
}

/* Stack filter columns vertically at smaller breakpoints */
@media (max-width: 800px) {
    /* Force all modals to be responsive */
    .modal.show .modal-dialog,
    .modal .modal-dialog,
    .modal-xl,
    .modal-lg,
    .modal-dialog,
    .modal-dialog-centered,
    .modal-dialog-scrollable {
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
        margin: 16px auto !important;
    }

    .modal:has(.filter-modal-body) .modal-dialog {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        margin: 16px auto !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .modal-body {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .modal-footer {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .modal-header {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .filter-modal-body {
        max-height: 80vh !important;
        padding: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Ensure filter regions don't overflow */
    .filter-region {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Ensure specific elements don't overflow */
    .filter-modal-body .filter-summary,
    .filter-modal-body .filter-group-toggles,
    .filter-modal-body .filter-toolbar,
    .filter-modal-body .filter-mode-tabs,
    .filter-modal-body #filter-intro {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .filter-columns-container {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .filter-columns-container #filter-region-left-col,
    .filter-columns-container #filter-region-right-col {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Make filter summary wrap on mobile */
    .filter-summary {
        flex-wrap: wrap !important;
    }

    .filter-summary-label {
        flex-basis: 100% !important;
        margin-bottom: 5px !important;
    }

    /* Compact filter toolbar on mobile */
    .filter-toolbar {
        flex-wrap: wrap !important;
    }

    .filter-toggles-row {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .filter-group-toggles {
        gap: 4px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .filter-group-toggle {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .filter-expand-btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    .filter-search-input {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }

    /* Compact modal header on mobile */
    .filter-modal-body .modal-title,
    .filter-modal-body h5 {
        font-size: 16px !important;
    }

    /* Shrink font sizes on mobile for more content */
    .filter-region-header {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .filter-entry-row {
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .filter-entry-row-first-col,
    .filter-entry-label {
        font-size: 12px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .filter-entry-row-second-col {
        flex: 0 0 auto !important;
    }

    .filter-region-content {
        padding: 6px 8px !important;
        overflow-x: hidden !important;
    }

    .filter-value {
        font-size: 11px !important;
        width: 55px !important;
        height: 20px !important;
    }

    #filter-intro {
        font-size: 12px !important;
    }

    .modal-title {
        font-size: 16px !important;
    }

    .filter-summary {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .filter-summary-label {
        font-size: 11px !important;
    }

    .btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

.filter-back-to-top {
    position: fixed;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--action-yellow);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s, opacity 0.3s;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
}

.filter-back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.filter-back-to-top:hover {
    transform: scale(1.1);
    background: #e09900;
}

#header-right-section {
    position: absolute;
    top: 49px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    text-align: left;
    justify-content: flex-start;
    left: 144px;
    margin-top: 5px;
}

.header-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--common);
}

.header-item.clickable {
    cursor: pointer;
}

.header-item.dark-mode-toggle {
    gap: 0px;
    margin-top: 4px;
    margin-left: 5px;
}

.header-item i {
    cursor: pointer;
}

.action-button-new {
    padding-left: 0px;
    color: white;
    font-size: 11px;
    font-weight: bold !important;
    border: none;
    text-decoration: underline !important;
    margin-left: 0px;
    margin-top: 0px;
    padding-right: 5px;
}

.action-button-new {
}

.customer-account-section {
    max-width: 840px;
}

/* ========================================
   Filter Modal Mode Tabs
   ======================================== */
.filter-mode-tabs {
    display: flex;
    gap: 0;
    margin: 15px 0;
    border-bottom: 1px solid #ddd;
}

.filter-mode-tab {
    padding: 8px 16px;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.filter-mode-tab:hover {
    color: #333;
}

.filter-mode-tab.active {
    color: #000;
    border-bottom-color: var(--action-yellow);
}

.filter-mode-tab i {
    margin-right: 6px;
}

.beta-label {
    font-size: 0.7em;
    color: #e74c3c;
    font-weight: 500;
    margin-left: 4px;
}

/* ========================================
   Builder Tab Styles
   ======================================== */
.builder-tab {
    padding: 15px 0;
}

.builder-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.builder-match-label {
    color: #666;
    font-size: 14px;
}

.builder-operator-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.builder-operator-btn {
    padding: 6px 12px;
    cursor: pointer;
    background: #f5f5f5;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
}

.builder-operator-btn:hover {
    background: #e8e8e8;
}

.builder-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.builder-conditions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.builder-condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.builder-not-toggle {
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #999;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 40px;
}

.builder-not-toggle:hover {
    background: #f0f0f0;
    border-color: #aaa;
    color: #666;
}

    .builder-not-toggle.active {
        background: #c53030 !important;
        border-color: #c53030 !important;
        color: white !important;
    }

.builder-not-toggle.active:hover {
    background: #9b2c2c;
    border-color: #9b2c2c;
}

.builder-field-select {
    flex: 2;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

/* Custom field dropdown */
.builder-field-dropdown {
    flex: 2;
    min-width: 200px;
    position: relative;
}

.builder-field-search {
    width: 100%;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.builder-field-search:focus {
    outline: none;
    border-color: var(--action-yellow);
}

.builder-field-search::placeholder {
    color: #999;
}

input.builder-field-search.has-value::placeholder {
    color: #333 !important;
}

.builder-field-dropdown-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.builder-field-category {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--action-yellow);
    background: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

.builder-field-supergroup {
    padding: 6px 10px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #e5e5e5;
    margin-top: 2px;
    background: #fafafa;
}
.builder-field-supergroup:first-child {
    border-top: none;
    margin-top: 0;
}

.builder-field-subgroup {
    padding: 3px 10px 2px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--action-yellow);
}

.builder-field-option {
    padding: 5px 12px 5px 26px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.builder-field-option:hover {
    background: #f0f0f0;
    color: #000;
}

.builder-field-option.selected {
    background: #e8f0ff;
    color: var(--action-yellow);
}

.builder-field-no-results {
    padding: 10px 12px;
    font-size: 13px;
    color: #999;
    font-style: italic;
}

.builder-comparison-select {
    width: 70px;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

.builder-value-input {
    width: 80px;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.builder-value-suffix {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    padding-left: 4px;
}

.builder-bool-label {
    color: #999;
    font-size: 13px;
    padding: 0 4px;
}

.builder-bool-select {
    width: 80px;
    padding: 6px 8px;
    background: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

.builder-bool-select:hover {
    border-color: #666;
}

.builder-remove-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
}

.builder-remove-btn:hover {
    color: #ff5555;
}

.builder-actions {
    margin-top: 15px;
}

.builder-add-btn {
    padding: 8px 16px;
    background: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.builder-add-btn:hover {
    background: #555;
}

.builder-add-btn i {
    margin-right: 6px;
}

.builder-preview {
    margin-top: 20px;
    padding: 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
}

.builder-preview-label {
    color: #888;
    font-size: 12px;
    margin-bottom: 6px;
}

.builder-preview-expression {
    color: #4fc3f7;
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
}

/* Builder Groups */
.builder-groups {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.builder-group {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    transition: opacity 0.2s ease;
}

.builder-group.disabled {
    opacity: 0.4 !important;
}

.builder-group.disabled .builder-group-toggle {
    opacity: 1 !important;
}

.builder-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.builder-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Stylized Toggle Switch for Group Enable/Disable */
.builder-group-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.builder-group-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.builder-group-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(200, 200, 210, 0.7);
    border: 1px solid rgba(180, 180, 190, 0.5);
    border-radius: 20px;
    transition: all 0.25s ease;
}

.builder-group-toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: #999;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.builder-group-toggle:hover .builder-group-toggle-slider {
    border-color: rgba(160, 160, 170, 0.6);
}

.builder-group-toggle:hover .builder-group-toggle-slider:before {
    background: #777;
}

.builder-group-toggle input:checked + .builder-group-toggle-slider {
    background: var(--action-yellow);
    border-color: var(--action-yellow);
}

.builder-group-toggle input:checked + .builder-group-toggle-slider:before {
    transform: translateX(16px);
    background: white;
}

.builder-group-toggle input:focus + .builder-group-toggle-slider {
    box-shadow: 0 0 0 2px rgba(255, 200, 50, 0.3);
}

.builder-group-label {
    color: #666;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.2s;
}

.builder-group-label:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.builder-group-name-input {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    background: #fff;
    color: #333;
    border: 1px solid var(--action-yellow);
    border-radius: 3px;
    padding: 2px 6px;
    width: 120px;
    outline: none;
}

.builder-group-operator-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.builder-group-operator-btn {
    padding: 4px 10px;
    cursor: pointer;
    background: #fff;
    color: #666;
    font-size: 12px;
    transition: all 0.2s;
}

.builder-group-operator-btn:hover {
    background: #f0f0f0;
}

.builder-group-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.builder-group-remove-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
}

.builder-group-remove-btn:hover {
    color: #ff5555;
}

.builder-group-actions-header {
    display: flex;
    gap: 4px;
}

.builder-group-clone-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
}

.builder-group-clone-btn:hover {
    color: var(--action-yellow);
}

.builder-group-actions {
    margin-top: 10px;
}

.builder-add-condition-btn {
    padding: 6px 12px;
    background: #fff;
    color: #666;
    border: 1px dashed #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.builder-add-condition-btn:hover {
    background: #f0f0f0;
    color: #333;
    border-color: #aaa;
}

.builder-add-condition-btn i {
    margin-right: 5px;
}

.builder-group-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.builder-group-separator-text {
    background: var(--action-yellow);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.builder-add-group-btn {
    padding: 8px 16px;
    background: #fff;
    color: #666;
    border: 1px dashed #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.builder-add-group-btn:hover {
    background: #f0f0f0;
    color: #333;
    border-color: var(--action-yellow);
}

.builder-add-group-btn i {
    margin-right: 6px;
}

/* ========================================
   Light Mode - Filter Modal
   ======================================== */
.filter-modal-light .filter-mode-tabs {
    border-bottom-color: #ddd;
}

.filter-modal-light .filter-mode-tab {
    color: #666;
}

.filter-modal-light .filter-mode-tab:hover {
    color: #333;
}

.filter-modal-light .filter-mode-tab.active {
    color: #000;
    border-bottom-color: var(--action-yellow);
}

.filter-modal-light .beta-label {
    color: #d63031;
}

/* Light Mode - Builder Tab */
.filter-modal-light .builder-tab {
    color: #333;
}

.filter-modal-light .builder-match-label {
    color: #666;
}

.filter-modal-light .builder-operator-toggle {
    border-color: #ccc;
}

.filter-modal-light .builder-operator-btn {
    background: #f5f5f5;
    color: #666;
}

.filter-modal-light .builder-operator-btn:hover {
    background: #e8e8e8;
}

.filter-modal-light .builder-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.filter-modal-light .builder-group {
    background: #f8f8f8;
    border-color: #ddd;
}

.filter-modal-light .builder-group.disabled {
    opacity: 0.4;
}

.filter-modal-light .builder-group.disabled .builder-group-toggle {
    opacity: 1;
}

.filter-modal-light .builder-group-toggle-slider {
    background: rgba(200, 200, 210, 0.7);
    border-color: rgba(180, 180, 190, 0.5);
}

.filter-modal-light .builder-group-toggle-slider:before {
    background: #999;
}

.filter-modal-light .builder-group-toggle:hover .builder-group-toggle-slider:before {
    background: #777;
}

.filter-modal-light .builder-group-label {
    color: #666;
}

.filter-modal-light .builder-group-label:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.filter-modal-light .builder-group-name-input {
    background: #fff;
    color: #333;
    border-color: var(--action-yellow);
}

.filter-modal-light .builder-group-operator-toggle {
    border-color: #ccc;
}

.filter-modal-light .builder-group-operator-btn {
    background: #fff;
    color: #666;
}

.filter-modal-light .builder-group-operator-btn:hover {
    background: #f0f0f0;
}

.filter-modal-light .builder-group-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.filter-modal-light .builder-group-remove-btn {
    color: #999;
}

.filter-modal-light .builder-group-remove-btn:hover {
    color: #ff5555;
}

.filter-modal-light .builder-group-clone-btn {
    color: #999;
}

.filter-modal-light .builder-group-clone-btn:hover {
    color: var(--action-yellow);
}

.filter-modal-light .builder-conditions {
    background: #fff;
    border: 1px solid #e0e0e0;
}

.filter-modal-light .builder-condition-row {
    background: #f5f5f5;
}

.filter-modal-light .builder-not-toggle {
    background: #fff;
    border-color: #ccc;
    color: #999;
}

.filter-modal-light .builder-not-toggle:hover {
    background: #f0f0f0;
    border-color: #aaa;
    color: #666;
}

.filter-modal-light .builder-not-toggle.active {
    background: #c53030;
    border-color: #c53030;
    color: white;
}

.filter-modal-light .builder-field-select,
.filter-modal-light .builder-comparison-select,
.filter-modal-light .builder-value-input {
    background: #fff;
    color: #333;
    border-color: #ccc;
}

.filter-modal-light .builder-remove-btn {
    color: #999;
}

.filter-modal-light .builder-remove-btn:hover {
    color: #ff5555;
}

.filter-modal-light .builder-value-suffix {
    color: #666;
}

.filter-modal-light .builder-bool-label {
    color: #666;
}

.filter-modal-light .builder-bool-select {
    background: #fff;
    color: #333;
    border-color: #ccc;
}

/* Light Mode - Custom field dropdown */
.filter-modal-light .builder-field-search {
    background: #fff;
    color: #333;
    border-color: #ccc;
}

.filter-modal-light .builder-field-search:focus {
    border-color: var(--action-yellow);
}

.filter-modal-light .builder-field-search::placeholder {
    color: #888;
}

.filter-modal-light input.builder-field-search.has-value::placeholder {
    color: #333 !important;
}

.filter-modal-light .builder-field-dropdown-menu {
    background: #fff;
    border-color: #ccc;
}

.filter-modal-light .builder-field-category {
    background: #f5f5f5;
    color: #b8860b;
}

.filter-modal-light .filter-subgroup-header {
    color: rgba(0, 0, 0, 0.85);
}

.filter-modal-light .builder-field-supergroup {
    background: #f5f5f5;
    color: #888;
}

.filter-modal-light .builder-field-subgroup {
    color: #b8860b;
}

.filter-modal-light .builder-field-option {
    color: #333;
}

.filter-modal-light .builder-field-option:hover {
    background: #f0f0f0;
    color: #000;
}

.filter-modal-light .builder-field-option.selected {
    background: #f0f0f0;
    color: #b8860b;
}

.filter-modal-light .builder-field-no-results {
    color: #999;
}

.filter-modal-light .builder-add-condition-btn,
.filter-modal-light .builder-add-group-btn {
    background: #fff;
    color: #666;
    border-color: #ccc;
}

.filter-modal-light .builder-add-condition-btn:hover,
.filter-modal-light .builder-add-group-btn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: var(--action-yellow);
}

.filter-modal-light .builder-group-separator-text {
    background: var(--action-yellow);
    color: white;
}

.filter-modal-light .builder-preview {
    background: #f0f0f0;
    border-color: #ddd;
}

.filter-modal-light .builder-preview-label {
    color: #666;
}

.filter-modal-light .builder-preview-expression {
    color: #0066cc;
}

/* Light Mode - Script Editor */
.filter-modal-light .script-editor-textarea {
    background: #fff;
    color: #0066cc;
    border-color: #ccc;
}

.filter-modal-light .script-editor-textarea::placeholder {
    color: #999;
}

.filter-modal-light .script-status.valid {
    color: #2e7d32;
}

.filter-modal-light .script-status.invalid {
    color: #c62828;
}

.filter-modal-light .script-editor-help {
    background: #f5f5f5;
}

.filter-modal-light .script-help-header {
    color: #666;
}

.filter-modal-light .script-category-header {
    background: #e8e8e8;
    color: #333;
}

.filter-modal-light .script-category-header:hover {
    background: #ddd;
}

.filter-modal-light .script-category-header i {
    color: #666;
}

.filter-modal-light .script-field-item:hover {
    background: #e8e8e8;
}

.filter-modal-light .script-field-name {
    color: #0066cc;
}

.filter-modal-light .script-field-type {
    color: #999;
}

.filter-modal-light .script-operator,
.filter-modal-light .script-function {
    background: #e8e8e8;
    color: #0066cc;
}

.filter-modal-light .script-operator:hover,
.filter-modal-light .script-function:hover {
    background: #ddd;
}

.filter-modal-light .script-example {
    background: #e8e8e8;
    color: #666;
}

.filter-modal-light .script-example:hover {
    background: #ddd;
    color: #333;
}

/* ========================================
   Script Editor Styles
   ======================================== */
.script-editor {
    display: flex;
    gap: 20px;
    padding: 15px 0;
}

.script-editor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.script-editor-textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    background: #1a1a1a;
    color: #4fc3f7;
    border: 1px solid #444;
    border-radius: 6px;
    font-family: monospace;
    font-size: 14px;
    resize: vertical;
}

.script-editor-textarea::placeholder {
    color: #666;
}

.script-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.script-validate-btn {
    padding: 8px 16px;
    background: var(--action-yellow);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.script-validate-btn:hover {
    filter: brightness(1.1);
}

.script-validate-btn i {
    margin-right: 6px;
}

.script-status {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.script-status.valid {
    color: #4caf50;
}

.script-status.invalid {
    color: #f44336;
}

.script-editor-help {
    width: 280px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding: 10px;
    background: #222;
    border-radius: 6px;
}

.script-help-header {
    color: #aaa;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.script-field-categories {
    margin-bottom: 15px;
}

.script-field-category {
    margin-bottom: 5px;
}

.script-category-header {
    padding: 6px 8px;
    background: #333;
    color: #ddd;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.script-category-header:hover {
    background: #444;
}

.script-category-header i {
    font-size: 10px;
    color: #888;
}

.script-category-fields {
    padding: 5px 0 5px 10px;
}

.script-field-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    border-radius: 3px;
}

.script-field-item:hover {
    background: #333;
}

.script-field-name {
    color: #4fc3f7;
    font-family: monospace;
}

.script-field-type {
    color: #666;
    font-size: 10px;
}

.script-help-section {
    margin-bottom: 15px;
}

.script-operators,
.script-functions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.script-operator,
.script-function {
    padding: 4px 8px;
    background: #333;
    color: #4fc3f7;
    font-family: monospace;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}

.script-operator:hover,
.script-function:hover {
    background: #444;
}

.script-examples {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.script-example {
    padding: 6px 8px;
    background: #333;
    color: #aaa;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
}

.script-example:hover {
    background: #444;
    color: white;
}

/* Chart toggle buttons - overlay on chart */
.chart-wrapper {
    position: relative;
    overflow: hidden;
    /* Hidden by default so the chart + Zen buttons never paint before the TradingView widget
       is ready — tv.js fades each wrapper in (opacity:1) on chartReady (with a 12s safety
       fallback). Avoids the first-load flicker where the panel showed, hid, then faded in. */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.chart-toggle-overlay {
    position: absolute;
    top: 45px;
    right: 3px;
    z-index: 100;
    display: flex;
    gap: 4px;
}

.chart-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 12px;
    background-color: rgba(76, 82, 97, 0.7);
    border: 1px solid transparent;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.chart-toggle-btn:hover {
    background-color: rgba(76, 82, 97, 1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.view-targets-btn {
    border: none;
    outline: none;
    background-clip: padding-box;
}

.view-targets-btn:hover {
    border: none;
    filter: brightness(1.3);
}

.chart-toggle-btn.active {
    background-color: rgba(0, 134, 0, 0.8);
    color: white;
    border-color: rgba(0, 200, 0, 0.5);
}

.chart-toggle-btn.active:hover {
    background-color: rgba(0, 134, 0, 1);
}

/* Responsive chart toggle buttons - hide text on small charts */
@media (max-width: 1300px) {
    .chart-toggle-overlay {
        top: 50px;
        left: auto;
        right: 60px;
        flex-direction: column;
    }

    .chart-toggle-btn {
        font-size: 0;
        padding: 4px 6px;
    }

    .chart-toggle-btn i {
        font-size: 12px;
    }
}

/* Filter Builder intro popup overlay */
.filter-builder-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.filter-builder-intro-popup {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 12px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 193, 7, 0.1);
    overflow: hidden;
}

.filter-builder-intro-header {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.05) 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 193, 7, 0.2);
}

.filter-builder-intro-header i {
    color: #ffc107;
    font-size: 24px;
}

.filter-builder-intro-header span {
    color: #ffc107;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-builder-intro-body {
    padding: 24px;
    color: #e0e0e0;
}

.filter-builder-intro-body h3 {
    color: white;
    font-size: 22px;
    margin: 0 0 12px 0;
    font-weight: 600;
}

.filter-builder-intro-body p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: #b0b0b0;
}

.filter-builder-intro-body ul {
    margin: 0 0 16px 0;
    padding-left: 0;
    list-style: none;
}

.filter-builder-intro-body li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
}

.filter-builder-intro-body li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ffc107;
    font-weight: bold;
}

.filter-builder-intro-body li strong {
    color: white;
}

.filter-builder-intro-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: center;
}

.filter-builder-intro-got-it {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a2e;
    border: none;
    padding: 12px 40px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-builder-intro-got-it:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 193, 7, 0.4);
}

/* ===== Modern Modal Dialog Styles (Light Mode Default) ===== */

/* Modal backdrop */
.modal-backdrop.show {
    opacity: 0.5 !important;
    backdrop-filter: blur(4px);
}

/* Animation for all modals */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Confirmation dialog sizing */
.modal.show .modal-dialog.modal-dialog-centered.modal-dialog-scrollable {
    max-width: 420px;
}

/* Modal content - Light mode (default) */
.modal.show .modal-dialog.modal-dialog-centered .modal-content {
    background: #f7f8fa !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 20px 24px 16px !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-title {
    color: #1a1a2e !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-header .btn-close {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-header .btn-close:hover {
    opacity: 1;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-body {
    padding: 20px 24px !important;
    color: #4a5568 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer {
    background: rgba(0, 0, 0, 0.03) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 16px 24px !important;
    gap: 12px;
}

/* Modern button styling for dialogs - Light mode */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn {
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    min-width: 80px;
}

/* Primary/Confirm button */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Secondary/Cancel button - Light mode */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-secondary {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e0 !important;
    color: #4a5568 !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-secondary:hover {
    background: #cbd5e0 !important;
    border-color: #a0aec0 !important;
    color: #2d3748 !important;
}

/* Danger button for destructive actions */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-danger:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.form-switch {
    padding-top:1px;
}

/* ------------------------------------------------------------------
   Phones: make modals true full-screen instead of a cramped floating
   card. On a narrow viewport the centered "card" left the page (scan
   grid) visible around it and squeezed the content into a thin column.
   Full-screen + reduced padding + a wrapping footer fixes both. Placed
   last in the file and flagged !important so it wins over the earlier
   ≤800px card rules and the higher-specificity centered-modal rules.
   Background stays whatever the theme rules set (opaque), so the page
   no longer shows through. ------------------------------------------ */
@media (max-width: 600px) {
    .modal.show .modal-dialog,
    .modal .modal-dialog,
    .modal-dialog,
    .modal-dialog-centered,
    .modal-dialog-scrollable,
    .modal-lg,
    .modal-xl,
    .modal:has(.filter-modal-body) .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
    }

    .modal.show .modal-dialog .modal-content,
    .modal.show .modal-dialog.modal-dialog-centered .modal-content,
    .modal-content {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Body grows and scrolls; header/footer stay pinned. */
    .modal.show .modal-dialog.modal-dialog-centered .modal-body,
    .modal-body,
    .whats-new-modal-body {
        flex: 1 1 auto !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    /* Tighter horizontal padding reclaims content width on a phone. */
    .modal.show .modal-dialog.modal-dialog-centered .modal-header,
    .modal.show .modal-dialog.modal-dialog-centered .modal-body,
    .modal.show .modal-dialog.modal-dialog-centered .modal-footer,
    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Let the footer wrap so a long link + button don't crush together. */
    .modal-footer {
        flex-wrap: wrap !important;
    }
    .whats-new-see-all {
        margin-right: 0 !important;
        width: 100%;
    }
}

/* ---- "Explain Results" filter funnel (ShowFilters + FilterModal) ---- */
.funnel-explain-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 134px;                 /* fixed: "Explain Results" and "Hide" same size (monospace needs the room) */
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    color: #fff !important;
    background: rgba(80,80,80,0.85) !important;   /* exact match to .filter-summary-toggle */
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
/* keep the overflow chevron visible next to the pill when both render */
/* toggle stays at its native right:4px; the pill sits to its left */

.funnel-panel {
    margin: 4px 8px 8px 0;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 12.5px;
    max-width: 560px;
    font-family: monospace;
}
.funnel-panel-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.funnel-panel-sub { opacity: .75; }
.funnel-panel-close { margin-left: 10px; cursor: pointer; font-weight: bold; }
.funnel-row { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.funnel-count { font-family: Consolas, monospace; white-space: nowrap; }
.funnel-killer { color: #e05555; font-weight: 600; }


/* funnel pill: anchor to the Filtering bar itself and keep summary text clear of it.
   min-height so a one-line summary is still tall enough for the pill (it was getting
   clipped by the collapsed bar / header gradient above). */
#filtered-out-criteria { min-height: 28px; }
/* the pill + chevron anchor to the full-width bar (#filtered) and align to the
   utility strip's right edge (Discord button): the strip caps at margin-left
   135px + max-width 744px, so its edge from #filtered's right (which starts at
   144px) is max(20px, 100% - 735px). */
#filtered { position: relative; }
/* the three controls pack right-aligned as ONE flex cluster whose right edge
   matches the utility strip's (Discord) edge — no reserved slots when the
   chevron doesn't render */
.funnel-controls {
    position: absolute;
    top: 8px;
    right: max(20px, calc(100% - 735px));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.funnel-controls .funnel-explain-btn,
.funnel-controls .filter-summary-toggle {
    position: static;
}
.funnel-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 58px;
    padding: 4px 0;
    font-size: 11px;
    line-height: 1;
    color: #fff !important;
    background: rgba(80,80,80,0.85) !important;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
#filtered-out-criteria .filter-summary-content { padding-right: calc(max(20px, 100% - 735px) + 260px); } /* cluster footprint + strip-edge offset */


/* ==== ported from the Refined Density branch: mega-menu (2026-07-08) ==== */
/* redesign tokens the mega-menu consumes — light defaults; dark.css overrides.
   Display/mono fonts fall back gracefully (webfonts ride the full redesign later). */
:root {
    --zb-text: #15182a;
    --zb-text-3: #9aa0ad;
    --zb-green: #0a8f4a;
    --zb-red: #d83a3a;
    --zb-purple: #7a5fd6;
    --zb-purple-tag-bg: rgba(122, 95, 214, .12);
    --zb-green-tint: rgba(10, 143, 74, .10);
    --zb-red-tint: rgba(216, 58, 58, .10);
    --zb-font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --zb-font-mono: 'Space Mono', Consolas, monospace;
}
.zb-tag-custom {
    flex: none;
    font-family: var(--zb-font-mono);
    font-size: 8.5px;
    letter-spacing: .04em;
    color: var(--zb-purple);
    background: var(--zb-purple-tag-bg);
    padding: 1px 5px;
    border-radius: 4px;
}


/* ============================================================
   REDESIGN 2026: mega-menu (Long/Short scan flyouts)
   ============================================================ */

/* the panel sizes to its columns instead of a fixed tall scroll list */
#long-menu,
#short-menu {
    /* definite width: the newspaper multi-column flow below needs one.
       ~4 columns of 240px; never sprawls past the viewport. */
    width: min(1080px, calc(100vw - 32px));
    min-width: 0;
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* mega rows: neutralize the legacy flyout hover (full direction gradient +
   forced white text — unreadable in light mode). The mega treatment tints
   only the NAME (rules below); the row itself gets a quiet wash. */
.mega-menu-item.top-menu-row-long:hover,
.mega-menu-item.top-menu-row-short:hover {
    background: rgba(127, 127, 127, 0.10) !important;
    color: inherit !important;
}

.mega-menu-columns {
    /* newspaper flow at ALL widths: groups stack vertically and fill columns,
       so 7+ concept groups use the panel's height instead of sprawling into
       7 side-by-side columns off the screen edge. */
    display: block;
    columns: 240px;
    column-gap: 8px;
    padding: 4px;
}

.mega-menu-col {
    width: auto;
    min-width: 0;
    break-inside: avoid;   /* a scan group never splits across columns */
    margin-bottom: 10px;
}

    .mega-menu-col .top-menu-heading {
        font-family: var(--zb-font-display);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        border-radius: 6px;
        padding: 6px 10px;
        margin: 0 0 4px 0;
    }

.mega-menu-item {
    display: block;
    padding: 5px 10px;
}

.mega-item-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mega-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--zb-text);
}

.mega-item-count {
    flex: none;
    font-family: var(--zb-font-mono);
    font-size: 11px;
    color: var(--zb-text-3);
}

.mega-item-badge {
    flex: none;
    font-size: 11px;
}

.mega-item-desc {
    font-size: 11px;
    line-height: 1.35;
    color: var(--zb-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-menu-item-disabled .mega-item-name,
.mega-menu-item-disabled .mega-item-count {
    color: var(--zb-text-3);
}

/* hover keeps the direction tint but must not recolor the quiet metadata */
.top-menu-row-long.mega-menu-item:hover .mega-item-name {
    color: var(--zb-green);
}

.top-menu-row-short.mega-menu-item:hover .mega-item-name {
    color: var(--zb-red);
}

/* columns stack on narrow viewports so the panel never overflows */
@media (max-width: 1150px) {
    .mega-menu-columns {
        flex-wrap: wrap;
    }
}
/* Mobile: the absolute pill cluster would crush the filter text (the reserved
   lane is ~280px). Below 768px the controls flow INLINE below the text and the
   text gets the full width back. */
@media (max-width: 768px) {
    .funnel-controls {
        position: static;
        display: flex;
        justify-content: flex-start;   /* left-aligned with the button strip / filter text */
        margin: 4px 0 2px 2px;
    }
    #filtered-out-criteria .filter-summary-content { padding-right: 8px; }
    #filtered-out-criteria { min-height: 0; }
}


/* Mobile filter dialog: the Name / Description / Direction row was forcing
   ~700px of min-width (two fixed inputs side by side) and squeezing the
   dialog off-screen. Stack and stretch under 800px (same breakpoint as the
   dialog's other mobile rules). */
@media (max-width: 800px) {
    #filter-scan-name { flex-wrap: wrap; row-gap: 6px; display: flex; align-items: center; }
    #scan-name, #scan-description {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;   /* padding stays inside — no overflow widening */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* one overflowing child widens the whole dialog's scroll width — belt & braces */
    .filter-modal-body { overflow-x: hidden !important; }

    /* 100vw includes the vertical scrollbar on desktop browsers — the dialog was
       exactly one scrollbar too wide. 100% (of the fixed full-width .modal) doesn't. */
    .modal.show .modal-dialog,
    .modal .modal-dialog,
    .modal-dialog {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
    #filter-scan-direction { flex-wrap: wrap; }
}


/* Mobile scan picker: mega menu replaces the scan combo */
#mobile-scan-button {
    position: relative;
    z-index: 1051;          /* stays tappable above the open panel — reliable close */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.mobile-scan-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#mobile-mega-menu {
    display: none;
    position: fixed;
    left: 8px;
    right: 8px;
    top: 122px;   /* below the combo/button row (~113px bottom) */
    bottom: 8px;
    z-index: 1050;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 6px;
}
#mobile-mega-menu.open { display: block; }


/* tap-anywhere-outside closes the mobile mega menu */
#mobile-mega-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgba(0,0,0,.25);
}
#mobile-mega-backdrop.open { display: block; }

/* the mobile direction combo + ticker search match the scan button's family */
#top-menu-mobile select.main-menu-select,
#top-menu-mobile .main-menu-select select {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}
#top-menu-mobile #mobile-ticker-search {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}


/* mobile direction picker: same JS-panel pattern as the scan menu */
#mobile-direction-button {
    position: relative;
    z-index: 1051;   /* above the backdrop, like the scan button — one tap always toggles */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.mobile-mini-menu {
    display: none;
    position: fixed;
    left: 8px;
    right: 8px;
    top: 122px;
    z-index: 1050;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 4px;
    max-height: 70vh;
    overflow-y: auto;
}
.mobile-mini-menu.open { display: block; }
.mobile-mini-row {
    padding: 11px 14px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,.15);
}
.mobile-mini-row:last-child { border-bottom: none; }
.mobile-mini-row:active { background: rgba(128,128,128,.12); }


/* current selection in the mega/scan menus: same language as the sidebar */
.mega-menu-item.mega-item-selected {
    border-left: 3px solid var(--zb-green);
    background: var(--zb-green-tint);
}
.mega-menu-item.mega-item-selected .mega-item-name {
    color: var(--zb-green);
    font-weight: 700;
}
.top-menu-row-short.mega-menu-item.mega-item-selected {
    border-left-color: var(--zb-red);
    background: var(--zb-red-tint);
}
.top-menu-row-short.mega-menu-item.mega-item-selected .mega-item-name {
    color: var(--zb-red);
}


/* Mobile: the def strip overlapped the wrapped scan title inside the green
   band (float layout in a capped-height bar). Hide the def line and keep the
   title to one ellipsized line - the description is in the menu anyway. */
@media (max-width: 768px) {
    .scan-defs-text { display: none; }
    #heading-text {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: calc(100% - 12px);
    }
}


/* Chart pop-out: the chart owns the whole window. .popout-view is a column flexbox at 100vh, so
   flex:1 + min-height:0 lets the chart shrink to the window rather than overflowing it (without
   min-height a flex item refuses to go below its content size).

   Padding on top only, none at the bottom, so the chart sits flush with the bottom edge.
   zbWatchChartPopout measures THIS element, so the padding is subtracted from the size handed to
   the widget automatically — do not also subtract it in JS. */
.popout-chart-view {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
    padding-top: 6px;
    padding-bottom: 0;
    box-sizing: border-box;
}

/* The wrapper fills; the chart itself is sized in pixels by tv.js (see resizeChart), so it is
   deliberately NOT forced to 100% here — inline px and a CSS override fight, and tv.js wins on
   the iframe anyway. */
.popout-chart-view > .chart-wrapper {
    width: 100%;
    height: 100%;
}

/* "Pop Out Chart" in the chart top bar. Deliberately quiet: it sits beside the data disclaimer,
   which is informational text, so a full button would shout over it. (2026-07-26) */
.chart-popout-btn {
    flex: 0 0 auto;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #3a3f4b);
    color: var(--text-muted, #9aa0ac);
    background: transparent;
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease;
}

.chart-popout-btn:hover {
    color: var(--text-color, #e6e8ec);
    border-color: var(--accent-color, #4f8ef7);
}

.chart-popout-btn i {
    margin-left: 4px;
    font-size: 10px;
}

/* Also used as a <button> in the chart settings modal, where it can be disabled until a ticker
   has been clicked (the pop-out is addressed by symbol). */
.chart-popout-btn:disabled,
.chart-popout-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    border-color: var(--border-color, #3a3f4b);
    color: var(--text-muted, #9aa0ac);
}

/* The chart pop-out is a full-window chart, so the "small chart" heuristic above
   (@media max-width:1300px -> stack the buttons and font-size:0 to hide their labels) is wrong
   here: a 900px pop-out trips it even though the chart owns the entire window. These selectors
   are more specific, so they win regardless of the media query. (2026-07-26) */
.popout-chart-view .chart-toggle-overlay {
    flex-direction: row;
    flex-wrap: nowrap;
    right: 60px;
    width: auto;
}

.popout-chart-view .chart-toggle-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 2px 6px;
}

.popout-chart-view .chart-toggle-btn i {
    font-size: 12px;
}