#legend {
    width: 261px;
    overflow-x: auto;
    resize: horizontal;
    max-height: 300px;
    overflow-y: scroll;
    margin-left: 1em;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}
#legend::-webkit-scrollbar {
    width: 7px;
}
#legend::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    background: color-mix(in srgb, var(--gray-900) 46%, transparent);
}
#legend #breakoutEntries > span {
    float: left;
    clear: both;
}
/* Legend rows (Select All + one per breakout colour): checkbox, marker, label on one 17px line. jQuery
   .show()/.hide() write an inline display on these spans to filter them, so they cannot become flex rows
   (a display:flex !important would also beat .hide()). Instead each piece is top-aligned with a measured
   offset. The checkbox (3.5px) centres on the label's x-height, like every checkbox row; the pin (0px)
   centres on the label's capital-to-baseline height instead, because its pointed tail hangs below the
   text -- centred on the x-height (1px) it read as sitting low (Lawrence, 2026-11-03).
   The legend_NNN.png pins carry ~3px of transparent padding per side at 16px, so 2px margins give an even
   ~5px visible gap box->pin->label; "Select All" has no pin, so its box carries the full 5px. */
#legend #breakoutEntries > span,
#legend #checkAllBreakoutEntriesLabel {
    line-height: 17px;
}
#legend #breakoutEntries > span > input,
#legend #checkAllBreakoutEntriesLabel > input {
    vertical-align: top;
    margin: 3.5px 2px 0 0;
}
#legend #checkAllBreakoutEntriesLabel > input {
    margin-right: 5px;
}
#legend #breakoutEntries > span > img {
    vertical-align: top;
    margin: 0 2px 0 0;
}
#legendDemographic, #legendCustomKml{
    display:flex;
    flex-direction: column;
    gap: .5rem;
}
.panoramaControl {
    background-color: var(--gray-900);
    opacity: .8;
    font-size: 12px;
    padding: 5px;
}
th.rfpData {
    background-color: var(--secondary);
}
/* RFP/Contract Data toggles check ORANGE on purpose (Lawrence, 2026-11-03): they turn on the orange
   th.rfpData columns in the Locations table, so the colour ties toggle to column. Native checkbox,
   only the accent changes (every other checkbox is var(--primary) via _overrides.scss). */
#settingsContent .rfpData input[type=checkbox] {
    accent-color: var(--secondary);
}
/* accent-color alone can't do it: Chrome picks the checkmark colour for contrast and draws a DARK
   check on a light accent like #F0773F. So only the CHECKED state is custom-drawn (13px, same box as
   the native one, white check); unchecked stays native so it matches every other section. */
#settingsContent .rfpData input[type=checkbox]:checked {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 13px;
    height: 13px;
    border: 0 !important;   /* conqueror.css: `input {border: 1px solid ... !important}`; a native box ignores it, appearance:none doesn't */
    border-radius: 2px;
    background: var(--secondary) url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3 6.8 5.4 9.2 10 4.2' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
/* Map settings panel checkbox rows (every section, RFP/Contract Data included): 400 weight, the
   app-wide checkbox-label weight from _general.scss; 1.4em rows with a 1px gap. The checkbox is a
   CHILD of the label, so Bootstrap's label margin-bottom and .settingsTabContent label's
   padding-bottom would otherwise add ~13px under every row. RFP/Contract Data used to be .FAinput
   font-icon checkboxes (orange when checked, baseline-aligned 15px glyph); it now uses the same
   native markup as every other section so alignment, gap and checked colour all match.
   A wrapped label (long Audience Data / vendor names) hangs under its own text, not under the box:
   padding-left 23px = the old 5px + 18px, and text-indent -18px pulls the first line (box + text)
   back out. Do NOT use flex for this: it splits the name's text node and the count <span>
   (" (17)", filled by mapping-common.js) into separate flex items, which drops the leading space
   and wraps the count onto its own line. The box's 2px margin-right + the markup's collapsed space
   (~3.1px at 12px Open Sans) = the 5px gap, so wrapped lines line up with the first line's text.
   vertical-align top + margin-top 3px centres the 13px box on the FIRST line's x-height (box mid
   9.5px), not the cap height: at 2px the box read as too high next to mostly-lowercase labels. */
#settingsContent .content label:has(> input[type=checkbox]),
#settingsContent .content label:has(> input[type=radio]) {   /* Heatmaps audience radios */
    display: block;
    font-weight: 400;
    line-height: normal;
    min-height: 1.4em;
    margin: 0 1em 1px 0;
    padding: 0 0 0 23px;
    text-indent: -18px;
}
#settingsContent .content label > input[type=checkbox] {
    vertical-align: top;
    margin: 3px 2px 0 0;
}
/* Same box, but the radio's label text is in a <span> and JSPX drops the whitespace before it, so
   there is no collapsed space to make up the gap: the radio carries the full 5px itself. */
#settingsContent .content label > input[type=radio] {
    vertical-align: top;
    margin: 3px 5px 0 0;
}
/* Map settings panel top block (map icon + intro + Share Map, divider, then the Vendors/Format/Display tabs)
   uses the same 10px gutter as the sections below (#settingsContent padding), so everything lines up 11px
   in from the panel edge (10px + the 1px border). This replaced inline styles on #settingsTop (5px padding,
   fixed 290px width) and the <hr> (80% wide, auto margins) in both map.jspx files.
   - The header h5 floats and .colWrap clears it, so top spacing has to live on .colWrap, not #settingsTop.
   - The icon/text columns are floats; the divider clears them and carries the spacing below them, because
     a margin above a cleared element is swallowed by the clearance.
   - The columns get explicit widths (66px icon, the rest for text): the old percentage widths plus a 10px
     gap no longer fit and dropped the text below the icon. */
#settingsTop {
    padding: 0 10px;
    margin-bottom: 0;
}
#settingsTop > .colWrap {
    padding-top: 10px;
}
#settingsTop .col4 {
    width: 32px;          /* the 66px icon dominated the panel; 32px reads as an icon beside the text */
    margin: 0 10px 10px 0;
}
#settingsTop .col34 {
    width: calc(100% - 42px);
    margin: 0 0 10px 0;
}
/* "Share Map" used to sit under the icon, in its column; at 32px it no longer fits there, so map.jspx
   places it after the text as its own full-width row. With it present the columns sit 6px above it
   and it carries the 10px down to the divider. (Brand RFP maps have no Share Map link.) */
#mapSharing:has(> #shareMapSpan) > .col4,
#mapSharing:has(> #shareMapSpan) > .col34 {
    margin-bottom: 6px;
}
#shareMapSpan {
    display: block;
    clear: both;
    padding-bottom: 10px;
}
#settingsTop hr {
    clear: both;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    margin: 0 0 10px;
}
#mapIntro {
    padding: 0;
    /* Optically top-align the text with the icon: the first line's leading put the capitals 3.2px below
       the icon's top edge (measured, 11px Open Sans); -3px leaves them 0.2px apart. */
    margin: -3px 0 0;
}
#settingsTabs > li:first-child {
    margin-left: 10px;   /* first tab 11px in, like the sections (was 6.5px) */
}
/* Keep "Share Map" (icon + label) on one line. */
#shareMapSpan a {
    white-space: nowrap;
}
/* The "Save Map Position / Clear" links picked up the 14px <p> default; match the Center:/Zoom: labels above it. */
#settingsContent .startingPositionActions {
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 1px;   /* the <p> default 16px left 24px under the links vs 9px under every other section */
    /* Save Map Position on the left, Clear on the right (no bullet). clear:both because a flex box will
       not sit beside the floated Center/Zoom labels -- it got squeezed into the 0px left beside them. */
    display: flex;
    justify-content: space-between;
    clear: both;
    margin-left: 5px;     /* line Save up with the Center:/Zoom: text (those labels pad 5px); Clear mirrors it */
    margin-right: 5px;
}
/* Map settings panel spacing: .settingsTabContent (10px) sat inside #settingsContent (10px), insetting
   every section ~20px per side in a 300px panel (258px of content). One 10px inset is enough. */
#settingsContent .settingsTabContent {
    padding: 0;
}
/* The blue section header already ends in a 2px border; the box's own 1px top border stacked a second
   line under it. Only boxes that follow a header lose it -- the Vendors/Format boxes have no header. */
#settingsContent a + .content.toggle {
    border-top: 0;
}
/* Section boxes slide open/closed (toggleContent in mapping-common.js). layout.css pads them 8px
   !important (it has to beat the app-wide `.content {padding-bottom: 0 !important}`), and jQuery's slide
   cannot animate an !important padding, so each box popped in as a 17px stub, then slid, then snapped.
   Keep the side padding; move the 8px top/bottom into spacers that the height animation clips. The
   ::after also clears the floated rows, as overflow:hidden already did. */
#settingsContent .content.toggle {
    padding: 0 8px !important;
}
#settingsContent .content.toggle::before,
#settingsContent .content.toggle::after {
    content: '';
    display: block;
    height: 8px;
    clear: both;
}
/* Demographic Shading column checkboxes (e.g. Household Income) are built by mapping-common.js as
   <ul id="demographicShadingColumns"><li><label><input/>Name</label></li>. Strip the app-wide list styling
   (`ul li` orange dot + 14px indent, `.content li` 14px/22px gray-700 text, the ul's own margins) so they
   are plain rows like every other checkbox. The JS appends the name with no space before it, so the box
   carries the whole 5px gap (the other rows get ~3px of it from the markup's collapsed space). */
#demographicShadingColumns {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Separate the shading columns (e.g. the Household Income brackets) from Show Demographic Shading /
   Show Legend below them. Only when a column row is visible: a single-column category hides its li. */
#demographicShadingColumns:has(> li:not([style*="none"])) {
    margin-bottom: 8px;
}
#demographicShadingColumns > li {
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    font-size: 12px;
    line-height: normal;
}
#settingsContent #demographicShadingColumns label > input[type=checkbox] {
    margin-right: 5px;
}
/* Even 10px rhythm under the Vendors/Format/Display tabs: the tab strip's 0.5em bottom margin
   (layout.css `#map-canvas ul.steps`) stacked on #settingsContent's 10px padding (15.5px), and the
   "expand all / collapse all" and "change colors" links (`p.TAR.MB5`) left only 5px above the first box. */
#map-canvas ul.steps#settingsTabs {
    margin-bottom: 0;
}
#settingsContent .settingsTabContent > p.TAR,
#settingsContent .settingsTabContent > p.TAR.MB5 {
    margin-bottom: 10px;
}
.ds_STREETVIEW a {
    cursor: pointer;
}

/* layout.css makes .ds_STREETVIEW display:block for the cell content; a block-level <th>
   stops stretching to the header row, which shows once the Action header wraps to two lines. */
#markerDetailContent th.ds_STREETVIEW {
    display: table-cell;
}
#panoramaSnapshotControl .orange {
    color: var(--secondary);
}
#panoramaSnapshotControl a.orange:hover {
    color: var(--secondary-light);
}
.panoramaControl a {
    display: inline-block !important;
    width: 206px;
}
#panoramaSnapshotControl .panoramaControl a[disabled="disabled"] {
    cursor: default;
}
#panoramaSnapshotControl .panoramaControl a[disabled="disabled"]:hover {
    text-decoration: none;
}
div#markerDetailContent > div.markerDetailTabContent.showScroll::-webkit-scrollbar {
    height: 6px;
    width: 6px;
    -webkit-appearance: none;
}
div#markerDetailContent > div.markerDetailTabContent.showScroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: darkslategrey;
}
.gm-style button {
    color: var(--gray-700) !important;
    min-width: auto;
    border: none !important;
    border-radius: inherit !important;
    box-shadow: none !important;
}
.gm-style button:hover {
    color: var(--gray-500) !important;
    background-color: var(--gray-800) !important;
}
.gm-style a {
    font-size: 1em !important;
}
button.gm-control-active {
    background: var(--gray-900) !important;
}
.gm-bundled-control button {
    background: #fff !important;
}
.gm-bundled-control-on-bottom button {
    background-color: var(--gray-800) !important;
}
.gm-compass, button.gm-compass-needle, button.gm-compass-turn, .gm-compass-needle img {
    background: transparent !important;
}
button.gm-compass-needle {
    left: 6px;
}
button.gm-compass-turn-opposite {
    left: -6px;
}
.markerDetail .disabledAction {
    color:var(--gray-400) !important;
    text-decoration: none;
    cursor: default;
}

#mapSideBarContainer[x-show-sidebar="true"] #sideBar {
    display: block !important;
    width: 420px;
    box-sizing: border-box;
    background-color: white;
    padding: 8px;
    background-color: var(--gray-100)
}

#markerDetailScrollTab[x-show-sidebar="true"] {
    margin-left: 338px;
}

#mapSideBarContainer[x-show-sidebar="true"] #mapContainer {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

#mapSideBarContainer[x-show-sidebar="true"] .ds_IMAGE.markerImageDiv {
    max-width: inherit !important;
    margin-top: 10px;
    margin-bottom: 12px;
    order: -1;
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent {
    max-height: 1000px !important;
    display: flex;
    flex-direction: column;
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent .infoWindowActions {
    display: flex;
    flex-flow: wrap;
    order: -1;
    margin-bottom: 12px;
    max-width: inherit !important;
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent .index {
    order: -1;
    display: block !important;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent .infoWindowActions div {
    margin: 0px;
    padding-left: 0px;
    padding-right: 1px;
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent .infoWindowActions div:not(:last-of-type)::after {
    content: '|';
    color: var(--link-color)
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent .infowindowImage[src*="gallery"] {
    max-width: inherit !important;
    width: 100%;
    margin: 0px;
    left: auto;
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent .ds_COMMB_ID {
    order: -2;
    text-align: center;
    font-size: 16px;
}

#mapSideBarContainer[x-show-sidebar="true"] .infowindowContent .markerImageDiv strong {
    display: none;
}

#mapSideBarContainer[x-show-sidebar="true"] {
    display: flex;
}

#mapSideBarContainer #sideBar #noLocationSelected {
    text-align: center;
    margin-top: 10px;
}

#mapSideBarContainer #sideBar #locationSelected {
    padding-top: 10px;
}

.audienceShading label:last-child {
    margin-bottom: 8px;
    padding-bottom: 5px;
}

#audiencePicker h4 {
    background: inherit;
    font-size: 12px;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

#audiencePicker .panel-heading {
    display: none;
}

.audienceMenu label {
    width: auto;
}

#audiencePicker .audiencePicker .audienceMenu > span {
    clear: both !important;
    float: left;
    margin-left: 0px;
}

#audiencePicker .audiencePicker .audienceMenu > span > a:last-child {
    margin-left: 21px;
}

#audiencePicker .audiencePicker .select2.select2-container {
    top: 7px;
}

#audiencePicker .audiencePicker {
    margin-top: 10px;
}

#settingsContent .content.audienceShading {
    padding-bottom: 7px !important;
}

#settingsContent .content .panel {
    margin-bottom: 0px;
}

#audiencePicker .audiencePicker .audienceMenu > label {
    width: auto;
    padding-left: 0px;
    padding-bottom: 5px;
}

.quantileStyles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quantileStyles > div {
    display: inline-block;
    width: 100%;
}

.legendContent {
    margin-bottom: 0.5rem;
}