/*
 * odeModern.css - contemporary refresh (Task 6, 10/7/2026).
 * Adding this <link> to a page turns the refresh on for that page; removing it rolls the page back.
 * Load order: StyleRefresh.css -> Styles/odeCommon.css -> Styles/odeModern.css?v=N (bump N when this file changes).
 * Uses the --ode-* variables from odeCommon.css. !important is only used against inline styles
 * (asp:Panel BackColor, server-built rows, header tabs).
 * Sections: 1 Buttons and form fields, 2 Step boxes and expand/collapse rows, 3 Home page tiles, 4 Header and navigation.
 */

:root {
    --ode-m-border: #b9c0ca;        /* buttons and fields */
    --ode-m-border-soft: #dde1e6;   /* cards and rows */
    --ode-m-text: #1f2a3c;
    --ode-m-hover: #f2f5f9;
    --ode-m-row: #eef1f5;           /* expand/collapse header rows */
    --ode-m-row-hover: #e2e8f0;
    --ode-m-panel: #f8f9fb;         /* opened panel body */
    --ode-m-ring: rgba(47, 111, 214, .35);
    --ode-m-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}

/* ---------- 1. Buttons and form fields ---------- */
input.button, input.buttonRight {
    font: 600 12px/16px var(--ode-font-ui);
    padding: 4px 12px;
    border: 1px solid var(--ode-m-border);
    border-radius: 6px;
    background-color: #fff;
    color: var(--ode-m-text);
    cursor: pointer;
}
/* buttons with a fixed width (asp:Button Width=) keep their width; less side padding so the label fits. Matches the width
   property itself (first, or after a ";"), not border-width / min-width / max-width */
input.button:is([style^="width:" i], [style*=";width:" i], [style*="; width:" i]),
input.buttonRight:is([style^="width:" i], [style*=";width:" i], [style*="; width:" i]) { padding-left: 4px; padding-right: 4px; }
input.button:hover:enabled, input.buttonRight:hover:enabled { background-color: var(--ode-m-hover); border-color: #8f99a8; }
input.button:focus-visible, input.buttonRight:focus-visible { outline: 3px solid var(--ode-m-ring); outline-offset: 1px; }
input.button:disabled, input.buttonRight:disabled,
input.button.primary:disabled {
    /* same size as enabled: StyleRefresh's input.button:disabled (padding 2px 3px, Arial, normal line height) outranks
       input.button above, so a button the page disables during a postback got 6px shorter and the content below jumped */
    font: 600 12px/16px var(--ode-font-ui);
    padding: 4px 12px;
    background-color: #eef0f2;
    border-color: var(--ode-m-border-soft);
    color: #8a929c;
    cursor: default;
}
input.button:is([style^="width:" i], [style*=";width:" i], [style*="; width:" i]):disabled,
input.buttonRight:is([style^="width:" i], [style*=";width:" i], [style*="; width:" i]):disabled { padding-left: 4px; padding-right: 4px; }
/* a button the page disables only while an async postback runs (results lists: "Add All Results to Cart" on each product
   checkbox click; the page sets data-ode-busy) keeps its enabled look instead of flashing gray for a moment */
input.button[data-ode-busy]:disabled { background-color: #fff; border-color: var(--ode-m-border); color: var(--ode-m-text); cursor: wait; }
/* one main action per box */
input.button.primary { background-color: var(--ode-accent); border-color: var(--ode-accent); color: #fff; }
input.button.primary:hover:enabled { background-color: var(--ode-accent-dark); border-color: var(--ode-accent-dark); }

/* help "?" icons: the blue square Images/icon_help.png is drawn as an outlined question-circle (same look and color as the
   Font Awesome light icons next to it, e.g. Feedback). CSS only, no markup change (several are runat="server" HtmlImages):
   object-position moves the PNG out of the box and the SVG mask colors the background. */
img[src*="icon_help.png" i] {
    box-sizing: content-box;
    width: 17px; height: 17px;
    padding: 0; border: 0;
    object-position: -100px 0;
    background-color: var(--ode-accent-dark);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.6'/%3E%3Cpath d='M9.1 9.3a2.95 2.95 0 1 1 4.4 2.6c-.95.55-1.5 1.15-1.5 2.2v.6'/%3E%3Ccircle cx='12' cy='17.5' r='.6' fill='black'/%3E%3C/svg%3E") no-repeat 0 0 / 17px 17px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.6'/%3E%3Cpath d='M9.1 9.3a2.95 2.95 0 1 1 4.4 2.6c-.95.55-1.5 1.15-1.5 2.2v.6'/%3E%3Ccircle cx='12' cy='17.5' r='.6' fill='black'/%3E%3C/svg%3E") no-repeat 0 0 / 17px 17px;
}
a:hover > img[src*="icon_help.png" i], a:focus > img[src*="icon_help.png" i] { background-color: var(--ode-accent); }

/* text fields and drop-downs: keep their sizes (layouts depend on them), soften the border, add a focus ring */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
    border: 1px solid var(--ode-m-border);
    border-radius: 4px;
    background-color: #fff;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,
select:focus, textarea:focus {
    outline: 2px solid transparent;   /* invisible here; Windows High Contrast paints it (it drops the box-shadow) */
    border-color: var(--ode-accent);
    box-shadow: 0 0 0 3px rgba(47, 111, 214, .2);
}
input[type="text"]:disabled, select:disabled, textarea:disabled { background-color: #f3f4f6; color: #8a929c; }

/* ---------- 2. Step boxes and expand/collapse rows ---------- */
/* keep the "Step n." heading text and div.highlightedBox: the New user guide finds the step boxes by them */
h1, h2, h3 { font-family: var(--ode-font-ui); }
h2 { text-transform: none; font-weight: 600; font-size: 14px; color: #111; }

.highlightedBox {
    background-color: #fff;
    border: 1px solid var(--ode-m-border-soft);
    border-radius: 10px;
    box-shadow: var(--ode-m-shadow);
    padding: 2px 0 6px 3px;   /* same side padding as StyleRefresh: productSearch's 820px column has no room to spare */
}
/* step boxes around the 800px panels (CoordinatedObservationSearch, coverage/ODE_coverage) end with the panels instead of
   stretching across the window, like the fixed-width boxes on productSearch and the cart page */
.highlightedBox.odeBox800 { width: 806px; }
/* a box drawn as two halves (top: highlightedBoxOpenB, bottom: highlightedBoxOpenT), e.g. "Continue with checkout" */
.highlightedBoxOpenB, .highlightedBoxOpenT { background-color: #fff; border-color: var(--ode-m-border-soft); border-style: solid; border-left-width: 1px; border-right-width: 1px; }
.highlightedBoxOpenB { border-top-width: 1px; border-radius: 10px 10px 0 0; }
.highlightedBoxOpenT { border-bottom-width: 1px; border-radius: 0 0 10px 10px; box-shadow: var(--ode-m-shadow); }

/* Step 1 / Step 2 header rows (asp:Panel ..._header, BackColor + Outset border are inline) */
div[id^="pnl"][id$="_header"] {
    background-color: var(--ode-m-row) !important;
    border: 1px solid var(--ode-m-border-soft) !important;
    border-radius: 6px;
    margin-top: 3px;
}
div[id^="pnl"][id$="_header"]:hover { background-color: var(--ode-m-row-hover) !important; }
div[id^="pnl"][id$="_header"] > table td { padding-top: 3px; padding-bottom: 3px; }
div[id^="pnl"][id$="_header"] .fa-chevron-down, div[id^="pnl"][id$="_header"] .fa-chevron-up,
tr[id^="rcb__"] .fa-chevron-down, tr[id^="rcb__"] .fa-chevron-up { color: #4a5260 !important; }

/* opened panel bodies (asp:Panel BackColor="#f0f0f0", rendered inline) */
div[id^="pnl"][style*="background-color:#f0f0f0" i], #Div_pnlFindByLatLong_custom { background-color: var(--ode-m-panel) !important; }

/* 2b: parameter counts as a badge instead of "(Show Options - n Parameters Set)" (productSearch: odeParamLabel() in the
   page JS, paramLabel() in the code-behind); the "Show options" / "Hide options" text is muted */
div[id^="pnl"][id$="_header"] td[align="right"] { color: #5f6b7a; padding-right: 8px; white-space: nowrap; }
.odeParamCount {
    display: inline-block;
    margin-left: 4px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: #e8f0fe;
    color: #1f56b0;
    font: 600 11px/17px var(--ode-font-ui);
    white-space: nowrap;
    vertical-align: 1px;
}

/* Step 1 data set tree (rows built server-side with inline colors #C7C7C7 / #D9D9D9 / #F0F0F0): three clearly different
   shades so the eye can follow mission > instrument > processing level > product type */
tr[id^="rcb__"] > td { background-color: #e6ebf2 !important; padding-top: 2px; padding-bottom: 2px; }      /* instrument (+ CRISM primer) */
tr[id^="rcb__"][onclick^="hideShowMissionDataSets"] { border-top-color: #aab4c3 !important; }
tr[id^="rcb__"][onclick^="hideShowMissionDataSets"] > td { background-color: #d3dbe6 !important; }            /* mission */
tr[id^="rcb__"][onclick^="hideShowMissionDataSets"]:hover > td { background-color: #c5cfdd !important; }
tr[id^="rcb__processinglevel__"] > td { background-color: #fff !important; }                                 /* processing level */
tr[id^="rcb__processinglevel__"]:hover > td { background-color: var(--ode-m-hover) !important; }
tr[id^="rcb__"][id$="__"] > td, tr[id^="rcb__"][id$="Note"] > td, tr[id^="rcb__"][id$="TRDRSubsets"] > td {
    background-color: #f6f7f9 !important;                                                                     /* product types + notes */
}

/* Step 3 / Step 4 summary panel (productSearch) */
#dvInfoPanel {
    border-color: var(--ode-m-border-soft) !important;
    border-radius: 10px;
    box-shadow: var(--ode-m-shadow);
    background-color: #fff;
}
#dvInfoPanel #divHeader > div:first-child, #spNextStepsHeader {
    background-color: var(--ode-m-row) !important;
    border-radius: 6px;
}
#spNextStepsHeader { font-size: 14px !important; font-weight: 600 !important; }
/* map results list (iframe in the map's Results panel): titles match the map panel titles (odeModernMap.css) */
/* StyleRefresh's h2 padding-top (8px) is removed and the margin is 2px less than the panels' 10px because the table cell
   above it adds 2px - the text then lines up with the Layers / Filters titles */
h2.odeMapPanelTitle { font-size: 16px; line-height: 1.3; margin: 8px 0 8px 0; padding: 0; }
/* the titles and "Products Found" line up with the text in the summary card instead of the iframe edge (cells: inline padding 0) */
form.webMapView td:has(> h2.odeMapPanelTitle), form.webMapView td:has(> #lblProductCount) { padding-left: 8px !important; }
/* bold sub-heading labels in the heading font (body text stays Verdana for now):
   productSearch Step 3, searchResultsList.aspx + map/searchResultsListMap.aspx "Products Found" / "Search Result Notes" */
#divProductCount, #divHeaderFacetsTitle, #lblProductCount, #lblSpecialNotes { font-family: var(--ode-font-ui); font-weight: 600; font-size: 13px; color: #111; }
/* product counts: label regular, only the number (in <b>) semibold - "Products Found: 2,274" (lblProductCount is Font-Bold inline) */
#divProductCount, #lblProductCount { font-weight: 400 !important; }
#divProductCount b, #lblProductCount b { font-weight: 600; }
#lblSpecialNotes u { text-decoration: none; }   /* not a link (the "More details" link is next to it) */
/* Step 3 status box keeps its JS-set state colors; applied-filter chips (inline styles built in JS) */
#divFiltersCriteriaExists { border-radius: 6px; }
#divHeaderFacets > div {
    background-color: #e8f0fe !important;
    border-color: #b6c8ea !important;
    border-radius: 12px;
    color: #1f3a6e;
    padding: 2px 8px !important;
}
#divHeaderFacets > div:hover { background-color: #d7e4fb !important; border-color: #8fb0e3 !important; }

/* cart page: "Selection Totals" box (a table with an inline 2px border) */
table:has(> tbody > tr#rTotalFiles) {
    border: 1px solid var(--ode-m-border-soft) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 10px;
    background-color: var(--ode-m-panel);
}
table:has(> tbody > tr#rTotalFiles) > tbody > tr > td { padding: 4px 8px 6px 8px; }

/* cart request status page (DownloadCartStatus.aspx): details box as a card, label column muted, values dark */
.odeStatusCard {
    box-sizing: border-box;
    width: 474px !important;
    padding: 4px 12px 8px 12px;
    background-color: #fff;
    border: 1px solid var(--ode-m-border-soft) !important;
    border-radius: 10px;
    box-shadow: var(--ode-m-shadow);
}
.odeStatusCard > table { width: 100%; border-collapse: collapse; }
.odeStatusCard > table > tbody > tr > td { padding: 7px 0 6px 0; border-bottom: 1px solid #eef0f3; font: 13px/1.4 var(--ode-font-ui); color: var(--ode-m-text); }
.odeStatusCard > table > tbody > tr:last-child > td { border-bottom: 0; }
.odeStatusCard > table > tbody > tr > td > b { display: inline-block; min-width: 255px; font-weight: 400; color: #5f6b7a; }
/* status pill (CssClass set by statusPillClass() in DownloadCartStatus.aspx.cs) */
.odeStatusPill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.odeStatusPill:empty { display: none; }
.odeStatusDone { background-color: #e6f4ea; color: #1e7b3a; }
.odeStatusBusy { background-color: #fff4e0; color: #8a5a00; }
.odeStatusError { background-color: #fdecec; color: #a3191b; }
.odeStatusNone { background-color: #eef0f2; color: #4a5260; }

/* map results list (map/searchResultsListMap.aspx): "Selection Results Summary" grid as a card (inline #E0E0E0 bands) */
#gvResultSummary {
    border: 1px solid var(--ode-m-border-soft) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 10px;
    box-shadow: var(--ode-m-shadow);
    overflow: hidden;
}
#gvResultSummary > tbody > tr > th { background-color: var(--ode-m-row) !important; font: 600 12px/16px var(--ode-font-ui); color: var(--ode-m-text); padding: 6px 8px; }
#gvResultSummary > tbody > tr > td { padding: 6px 8px; border-top: 1px solid #eef0f3; }
#gvResultSummary > tbody > tr[style*="#E0E0E0" i] { background-color: #f6f7f9 !important; }
#gvResultSummary > tbody > tr:last-child > td { border-top: 1px solid #c9d0da; font-weight: 600; background-color: #fff; }   /* footer: Total Products Found */
#divNoLatLong > table { border: 1px solid var(--ode-m-border-soft) !important; border-collapse: separate !important; border-radius: 10px; }

/* cart page "Your cart is empty" overlay: the faded cart still shows behind it, but through a translucent background
   instead of opacity:.95 on the whole box (which also faded the cards and their icons) */
#dvCartCleared {
    opacity: 1 !important;
    background: rgba(255, 255, 255, .93) !important;
    border: 1px solid var(--ode-m-border-soft) !important;
    border-radius: 10px;
}

/* coordinated observation list (CoordinatedObservationList.aspx): observation grid + nested product grid
   (GridView inline #E0E0E0 header / alternating rows and 2px border) */
#gvCoordObs, table[id$="_gvLevel3"] {
    border: 1px solid var(--ode-m-border-soft) !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 10px;
}
#gvCoordObs > tbody > tr[style*="#E0E0E0" i], table[id$="_gvLevel3"] > tbody > tr[style*="#E0E0E0" i] { background-color: #f6f7f9 !important; }
#gvCoordObs > tbody > tr[style]:has(> th), table[id$="_gvLevel3"] > tbody > tr[style]:has(> th) { background-color: var(--ode-m-row) !important; }
#gvCoordObs > tbody > tr > th { font-family: var(--ode-font-ui); font-weight: 600; }
/* expand / collapse arrows (ImageButtons expand_black.gif / collapse_black.gif) drawn as chevrons like the other expand rows */
input[src*="expand_black.gif" i], input[src*="collapse_black.gif" i] {
    box-sizing: content-box;
    width: 14px; height: 14px; padding: 3px;
    border-radius: 4px;
    object-position: -100px 0;
    background-color: #4a5260;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
}
input[src*="collapse_black.gif" i] { transform: rotate(180deg); }
/* Windows High Contrast (forced colors) replaces background colors, which would leave the masked icons above (help "?",
   expand / collapse chevrons) and the new-tab icon (odeCommon.css) as empty boxes: draw them in the system colors */
@media (forced-colors: active) {
    img[src*="icon_help.png" i], a.odeNewTabLink .fa-external-link { forced-color-adjust: none; background-color: LinkText; }
    input[src*="expand_black.gif" i], input[src*="collapse_black.gif" i] { forced-color-adjust: none; background-color: ButtonText; }
}
input[src*="expand_black.gif" i]:hover, input[src*="collapse_black.gif" i]:hover { background-color: var(--ode-accent); }

/* coverage page: footprint coverage file popup (inline styles) */
#divFootPrintLinks {
    background-color: var(--ode-m-panel) !important;
    border-color: var(--ode-m-border) !important;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .25);
}
#divFootPrintLinks hr { border: 0; border-top: 1px solid var(--ode-m-border-soft); }
#divFootPrintLinks iframe { border: 1px solid var(--ode-m-border-soft); border-radius: 6px; }
/* the coverage popups are position:fixed (600x540 at 25% - 100px / 25% - 50px), so scrolling the page can't reach a part
   outside the window ([Close] is at the top right): in a narrow or short window they fit inside the window instead */
@media (max-width: 700px) {
    #divFootPrintLinks, #divFootprintInfo { left: 8px !important; right: 8px; width: auto !important; margin-left: 0 !important; }
    #divFootPrintLinks > div:last-child, #divFootprintInfo > div:last-child { width: auto !important; }
    #divFootPrintLinks iframe, #divFootprintInfo iframe { box-sizing: border-box; width: 100% !important; }
}
@media (max-height: 680px) {
    #divFootPrintLinks, #divFootprintInfo {
        top: 8px !important; bottom: 8px; height: auto !important; margin-top: 0 !important;
        display: flex; flex-direction: column;
    }
    #divFootPrintLinks > div:last-child, #divFootprintInfo > div:last-child {
        width: auto !important; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    }
    #divFootPrintLinks iframe, #divFootprintInfo iframe { flex: 1 1 auto; height: auto !important; min-height: 0; }
}

/* productDetail.aspx: "Share this PDS Product" popup, same look as the Feedback dialog (odeFeedback.css); position stays inline */
#divShareLinks.odeSharePop {
    box-sizing: border-box;
    width: 270px !important; height: auto !important;
    padding: 12px 14px 10px 16px;
    background-color: #fff !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    font: 13px/1.4 var(--ode-font-ui);
    color: var(--ode-text);
}
.odeSharePop > div { padding: 0 !important; width: auto !important; }
.odeSharePop > div:first-child { overflow: hidden; margin-bottom: 8px; }
.odeSharePop hr { display: none; }
.odeSharePop-title { font-size: 16px !important; font-weight: 600 !important; line-height: 28px; }
.odeSharePop a, .odeSharePop a:visited {
    display: block;
    padding: 6px 8px !important;
    border-radius: 8px;
    color: var(--ode-text) !important;
    text-decoration: none !important;
}
.odeSharePop a:hover, .odeSharePop a:focus { background-color: #eef3fb; color: var(--ode-accent-dark) !important; }
.odeSharePop a > i { width: 18px; margin-right: 4px; text-align: center; color: var(--ode-accent-dark); }
/* "Bookmark this search / product" panels (div#divSaveSearch on searchResultsList, map/searchResultsListMap,
   CoordinatedObservationList, productDetail; inline gray box): same look as the share popup. Position and width kept. */
#divSaveSearch {
    box-sizing: border-box;
    height: auto !important;
    padding: 8px 10px 10px 12px;
    background-color: #fff !important;
    border: 1px solid #d6d6d6 !important;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    font: 13px/1.4 var(--ode-font-ui);
    color: var(--ode-text);
}
#divSaveSearch > table { width: 100%; border-collapse: collapse; }
#divSaveSearch td { padding: 2px 0 6px 0; }
#divSaveSearch tr:first-child > td > b { font-size: 16px; font-weight: 600; line-height: 28px; }
#divSaveSearch input[type="text"] { box-sizing: border-box; padding: 3px 6px; margin: 2px 4px 0 0; }
a.odeBookmarkClose, a.odeBookmarkClose:visited { display: inline-block; padding: 2px 8px 4px 8px; border-radius: 6px;
    font-size: 20px; line-height: 22px; color: #444 !important; text-decoration: none !important; }
a.odeBookmarkClose:hover, a.odeBookmarkClose:focus { background-color: #f0f0f0; }

/* ---------- 3. Home page tiles (index.aspx; td.outlineThin cards are also used on tools.aspx and the empty cart page) ---------- */
td.outlineThin, div.outlineThin {
    background-color: #fff;
    border: 1px solid #a7b0bd;   /* Task 2: a bit more contrast than --ode-m-border-soft (Dan, 10/8/2026) */
    border-radius: 10px;
    box-shadow: var(--ode-m-shadow);
    padding: 6px 6px 8px 6px;
}
a.seTitle, a.seTitle:visited {
    font-family: var(--ode-font-ui);
    font-size: 14px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
}
a.seTitle:hover, a.seTitle:focus { color: #111; text-decoration: underline; }

/* flat icon in a tinted square (replaces the glossy Home*.png images on index.aspx) */
.odeTileIcon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin: 2px 4px 0 0; border-radius: 10px;
    font-size: 19px; line-height: 1;
}
.odeTileIcon-search { background-color: #fdf0e3; color: #b4621b; }
.odeTileIcon-new { background-color: #e5f4fb; color: #1279a8; }
.odeTileIcon-tools { background-color: #fdeaea; color: #c0392b; }
.odeTileIcon-help { background-color: #e8f0fe; color: #1f56b0; }
.odeTileIcon-folder { background-color: #fdf6dc; color: #a07800; }
.odeTileIcon-list { background-color: #f0ebfb; color: #6a3fb5; }
.odeTileIcon-cart { background-color: #eef0f2; color: #4a5260; }
.odeTileIcon-processing { background-color: #e6f4ea; color: #1e7b3a; }
.odeTileIcon-map { background-color: #e3f5f2; color: #0f766e; }
.odeTileIcon-tutorial { background-color: #ecebfd; color: #4338ca; }
.odeTileIcon-resources { background-color: #e3f5f2; color: #0f766e; }
/* tools.aspx: the same wrench, one color per tool so they read as different tools (the Footprint Coverage tile of each
   body shares one color); CoordObs keeps the red of .odeTileIcon-tools */
.odeTool-mola { background-color: #fdf0e3; color: #b4621b; }
.odeTool-lola { background-color: #e8f0fe; color: #1f56b0; }
.odeTool-diviner { background-color: #f0ebfb; color: #6a3fb5; }
.odeTool-mla { background-color: #e3f5f2; color: #0f766e; }
.odeTool-coverage { background-color: #e6f4ea; color: #1e7b3a; }
.odeTool-rest { background-color: #fdf6dc; color: #a07800; }

/* whole card clickable when all of its links go to one place: the title link is stretched over the card
   (td cards on index.aspx, div cards on the empty cart page) */
.odeTileLink { position: relative; transition: box-shadow .15s, border-color .15s; }
.odeTileLink a.seTitle::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 10px; }
.odeTileLink:hover { border-color: #9fb9e8; box-shadow: 0 4px 14px rgba(16, 24, 40, .10); }
.odeTileLink:hover a.seTitle { text-decoration: underline; }
.odeTileLink a.seTitle:focus-visible { outline: 0; }
.odeTileLink a.seTitle:focus-visible::after { outline: 3px solid var(--ode-m-ring); outline-offset: 2px; }

/* ---------- 4. Header and navigation (indexall.aspx, index.aspx, indexProductPage.aspx, Account pages) ---------- */
/* tabs keep their inline styles (so a page without this file looks as before); these rules override them */
.odeNavTab { background-color: transparent !important; vertical-align: bottom; }
.odeNavTab > a, .odeNavTab > a:visited {
    display: inline-block;
    font: 500 13px/18px var(--ode-font-ui) !important;
    color: #d7dbe2 !important;
    padding: 3px 12px 2px 12px !important;
    border-bottom: 3px solid transparent;
    border-radius: 4px 4px 0 0;
}
.odeNavTab > a:hover { color: #fff !important; background-color: rgba(255, 255, 255, .10); }
.odeNavTab > a:focus-visible { color: #fff !important; outline: 2px solid #4f8cff; outline-offset: -2px; }
.odeNavTabOn > a, .odeNavTabOn > a:visited { color: #fff !important; border-bottom-color: #4f8cff; }

/* "Beta" pill under the banner title on the beta site (span spBetaPill; code-behind shows it and uses the regular banner image) */
div:has(> .odeBetaPill) { position: relative; }
.odeBetaPill {
    position: absolute; left: 98px; top: 41px;   /* the title text in every *_ODE.jpg banner starts at x=98, ends at y=33 */
    padding: 2px 9px;
    border-radius: 999px;
    background-color: #1d4ed8;
    color: #fff;
    font: 600 10px/14px var(--ode-font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* product count on the header cart icon (span spCartBadge, set in code-behind by odeHeaderUi.setCartBadge) */
.odeCartBadge {
    position: absolute; top: -5px; left: 15px;   /* top-right corner of the icon (the Telerik menu item is position:relative) */
    min-width: 8px;
    padding: 1px 5px;
    border: 2px solid #000;
    border-radius: 999px;
    background-color: var(--ode-accent);
    color: #fff;
    font: 700 10px/12px var(--ode-font-ui);
    text-align: center;
    vertical-align: top;
    cursor: pointer;
}
.odeCartBadgeOver { background-color: #f59e0b; color: #1f1f1f; }
/* room for the badge between the cart icon and the Geosciences logo (only when the cart has products) */
#rmCart:has(.odeCartBadge) { margin-right: 20px; }

/* ---------- 5. Accessibility (Task 2, 10/8/2026) ---------- */
/* rows, panel headers and help spans that Scripts/odeA11y.js makes keyboard-operable (tabindex=0, role=button) */
[data-ode-kb]:focus { outline: 0; }
[data-ode-kb]:focus-visible { outline: 2px solid var(--ode-accent); outline-offset: -2px; }
/* tree rows that are now buttons (their cell, odeA11y.js): at least 24px high (WCAG 2.5.8); they were 23.8px (19px + 2px
   padding + border) */
td[data-ode-kb] { height: 19px; }
/* text contrast >= 4.5:1 (WCAG 1.4.3): StyleRefresh's link blue #4f5bcb is only 3.8-4.3:1 on the gray bands of the
   GridViews (#e0e0e0) and the productDetail view tabs (div#ibb..., lightgray); only those links get a darker blue (5:1+).
   Red notes (<font color="red">) were 2.9:1 on #dcdcdc. */
table[id^="gv"] a:link, table[id^="gv"] a:visited,
div[id^="ibb"]:not(.odeNavTab) > a:link, div[id^="ibb"]:not(.odeNavTab) > a:visited { color: #3b47b8; }
font[color="red" i] { color: #c00000; }

/* target size >= 24x24px (WCAG 2.5.8). Help "?" and Feedback icons: larger hit area, same position (negative margins) */
a:has(> img[src*="icon_help.png" i]) { display: inline-block; vertical-align: top; padding: 3.5px; margin: -3.5px; line-height: 0; }
a.odeFeedbackLink.odeFeedbackLink { padding: 4px; margin: -2px -1px -2px 0; }   /* doubled class: odeFeedback.css loads later */
/* GridView pager links ("2", "3", ">>") */
a[href*="'Page$"] { display: inline-block; min-width: 16px; padding: 4px; text-align: center; }
/* home page "Additional Tools" card: one link per line, each after a bullet image; 24px lines, and the inline padding
   makes each link's box 24px tall without moving the text */
img[src*="bullet8.png" i] + a { line-height: 24px; padding: 5.5px 0; }
/* card titles that are not stretched over a clickable card (home "Additional Tools", tools.aspx cards) */
td.outlineThin:not(.odeTileLink) a.seTitle { display: inline-block; padding: 3px 0; }
/* Data Set Browser: mission / instrument / data set links in the grid rows */
table[id^="gv"] a[href^="DataSetExplorer.aspx"] { display: inline-block; padding: 5px 0; }

/* each page's title is now an h1 (was the first h2; WCAG 1.3.1 / 2.4.6): same look as the h2 above */
h1.odePageTitle { text-transform: none; font-weight: 600; font-size: 14px; color: #111; }

/* "Skip to main content" (first link in the header): hidden until it gets keyboard focus (WCAG 2.4.1) */
/* the skip target (main landmark / first heading, tabindex=-1 set by odeA11y.js) gets focus but no ring around the whole page */
[role="main"][tabindex="-1"]:focus, h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
a.odeSkipLink { position: absolute; left: -9999px; top: 6px; z-index: 10000; }
a.odeSkipLink:focus { left: 8px; padding: 6px 12px; border-radius: 4px; background-color: #fff; color: #1f56b0 !important;
    font: 600 13px/18px var(--ode-font-ui); text-decoration: underline; outline: 2px solid #4f8cff; outline-offset: 2px; }

/* header user / cart menus (Telerik RadMenu) take focus: show it */
#rmUser:focus-visible, #rmCart:focus-visible { outline: 2px solid #4f8cff; outline-offset: 2px; border-radius: 4px; }

/* productSearch Step 4: the fixed-width buttons cut off their labels with larger text spacing (WCAG 1.4.12) */
#btnSearchC, #btnSearchToMapC { width: auto !important; white-space: normal; }
#btnSearchC { min-width: 140px; }
#btnSearchToMapC { min-width: 190px; }

/* productSearch: the Step 3 / Step 4 column (sticky flex item with overflow:auto) shrank to 0px in windows narrower than
   about 1020px, so it could not be scrolled to. It keeps 190px (its width in a 1024px window, so 1024px and wider do not change);
   below that the page scrolls sideways to it. */
div:has(> #dvInfoPanel) { min-width: 190px; }

/* cart checkout: "Need the files right away?" callout under the intro (DownloadCart.aspx #spListDownloads, 10/9/2026,
   Task 5 option C, link only). Shown by DownloadCart.aspx.cs only when the URL list is available. */
.odeCallout { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px 0; padding: 9px 12px;
    background-color: #eef4ff; border: 1px solid #c3d5f7; border-left: 4px solid var(--ode-accent); border-radius: 6px; color: #1c2b45; }
.odeCallout > .fal { font-size: 15px; line-height: 18px; color: var(--ode-accent-dark); }
.odeCallout b { font-weight: 600; }
.odeCallout a { font-weight: 600; white-space: nowrap; }
/* site announcement (planned outages, warnings) at the top of the home page and Product Search: the callout look, amber
   for style "warning". Built by App_Code/odeAnnouncement.cs from App_Data/odeAnnouncement.txt (10/12/2026). */
.odeAnnounce { box-sizing: border-box; max-width: 760px; margin: 4px 0 10px 0; line-height: 18px; }
.odeAnnounce a { white-space: normal; }
.odeAnnounceWarning { background-color: #fff7e6; border-color: #f0d29b; border-left-color: #d97706; color: #3b2a07; }
.odeAnnounceWarning > .fal { color: #b45309; }
/* cart checkout "Continue with checkout": the download estimate (or, over the size cap, the yellow note) sits on its own
   lines with a little room above the Continue button (the <br/> after the estimate left an empty line when it is hidden) */
#lblTotalDownloadEstimateLabel, #lblCartSizeWarning { display: block; margin-bottom: 10px; }
/* cart checkout Download Setup (DownloadCartSetup.aspx): "Processing your request" while Submit Request posts (it can take
   a while). Spinner like the search results "Loading search results" page; the overlay keeps the form from being changed.
   #divSubmitProcessing is an empty role="status" div (right under the Submit Request button) until showSubmitProcessing()
   fills it. The box sits over the button (not centered in the window: on a wide screen that was far right of the form). */
#divSubmitProcessing.odeProcessingOn { position: relative; height: 0; }
#divSubmitProcessing.odeProcessingOn::before {
    content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;
    background: rgba(255, 255, 255, .6); cursor: wait;
}
#divSubmitProcessing .odeProcessingBox {
    position: absolute; left: 0; bottom: -12px; z-index: 1001; cursor: wait;
    width: 340px; box-sizing: border-box; padding: 20px 28px; text-align: center;
    background: #fff; border: 1px solid #d6d6d6; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
    font: 14px/1.5 var(--ode-font-ui); color: var(--ode-text);
}
#divSubmitProcessing .odeSpinner {
    box-sizing: border-box; width: 44px; height: 44px; margin: 0 auto 12px;
    border: 5px solid #e3e6ea; border-top-color: var(--ode-accent); border-radius: 50%;
    animation: odeSpin 1s linear infinite;
}
@keyframes odeSpin { to { transform: rotate(360deg); } }
/* the submit failed (DownloadCartSetup.aspx.cs btnSubmitRequest_Click catch): message under the Submit Request button */
.odeSubmitError {
    display: block; max-width: 560px; margin-top: 10px; padding: 8px 12px;
    background: #fdecec; border: 1px solid #e3a5a5; border-radius: 8px;
    font: 13px/1.45 var(--ode-font-ui); color: #8a1c1c;
}
.odeSubmitError a { color: #8a1c1c; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { #divSubmitProcessing .odeSpinner { animation: none; } }   /* the box text says it is working */

/* ---------- 6. Reflow (Task 2, WCAG 1.4.10; option A = text pages only) ----------
   A page opts in with <body class="odeReflow">. The rules apply only below 760px (phones, or a desktop browser zoomed
   to about 200% and more), so the desktop layout does not change: the fixed-width layout tables and boxes shrink to
   the window and long words (product ids, file names) wrap. Search forms, result grids and the map are not opted in.
   The header (div[role=banner]) is left out here; it has its own narrow-window rules. */
@media (max-width: 760px) {
    body.odeReflow table[width]:not([role="banner"] *), body.odeReflow td[width]:not([role="banner"] *),
    body.odeReflow th[width]:not([role="banner"] *), body.odeReflow table[style*="width"]:not([role="banner"] *),
    body.odeReflow div[style*="width"]:not([role="banner"]):not([role="banner"] *):not([id^="RAD_SPLITTER"]):not([id^="RadSplitter"]),
    body.odeReflow td[style*="width"]:not([role="banner"] *), body.odeReflow input[type="text"][style*="width"],
    body.odeReflow input[type="password"][style*="width"] {
        width: auto !important; max-width: 100% !important; box-sizing: border-box;
    }
    body.odeReflow td:not([role="banner"] *), body.odeReflow th { white-space: normal !important; }
    body.odeReflow [role="main"] td, body.odeReflow [role="main"] th, body.odeReflow [role="main"] div,
    body.odeReflow [role="main"] span, body.odeReflow [role="main"] a { overflow-wrap: anywhere; }
    body.odeReflow [role="main"] img { max-width: 100%; height: auto; }
    body.odeReflow input[type="submit"], body.odeReflow input[type="button"] { max-width: 100%; white-space: normal; height: auto !important; }
    body.odeReflow hr { max-width: 100%; }
    /* home page tiles: one column (the tile table, its rows and the tiles become blocks) */
    body.odeReflow table:has(> tbody > tr > td.outlineThin), body.odeReflow table:has(> tbody > tr > td.outlineThin) > tbody,
    body.odeReflow tr:has(> td.outlineThin) { display: block; }
    body.odeReflow td.outlineThin { display: block; margin-bottom: 8px; }
    /* productDetail file lists (Product Files & Labels / Referenced / Browse / Derived / CTX RDR): the floated 500px boxes
       shrank to their content and sat side by side, overlapping; they stack at full width instead */
    body.odeReflow #dProductFiles, body.odeReflow #dProductFiles > div, body.odeReflow #dDerivedFiles,
    body.odeReflow #divASUCTX { float: none !important; width: auto !important; }
    body.odeReflow #dProductFiles table[id^="gvProductFiles"], body.odeReflow #dDerivedFiles table[id^="gvProductFiles"],
    body.odeReflow #dvProductDetails, body.odeReflow #divASUCTX > table { float: none !important; width: 100% !important; }
    /* productDetail browse image viewer (iframe width="550") made the page wider than the window */
    body.odeReflow #ifDZ { max-width: 100%; }
    /* productDetail "Share this PDS Product" popup: its inline left:240px and the 270px width ran past the window's
       right edge (sideways scroll); it starts at the left and is never wider than the window */
    body.odeReflow #divShareLinks.odeSharePop { left: 8px !important; max-width: calc(100vw - 16px) !important; }
}

/* header below 800px (narrow windows, phones, desktop zoom 200%+): the 825px banner shrinks to the window instead of
   being cut off on the right (the Geosciences logo reached 795px). Logo scales down, the user / cart / Geosciences block
   stays on the right, the tabs wrap. The Telerik pane is 105px high: from 600px down, where "Help & Resources" wraps to a
   second row, the tabs are tighter and the logo smaller so both rows fit (checked every 10px from 320 to 1000px).
   The pane keeps overflow:visible (as on wide windows): the user and cart menus drop down below it. */
@media (max-width: 800px) {
    div[role="banner"] { width: auto !important; }
    #imgODEBanner { width: clamp(140px, calc(100vw - 190px), 320px); height: auto; }
    .odeBetaPill { left: 26.5%; top: 52%; }
    div[role="banner"] > div[style*="float:right"] { padding-right: 6px !important; padding-top: 4px !important; }
    div[role="banner"] > div[style*="float:right"] img { max-width: 72px; height: auto; }
    #divReturnToLive { padding: 2px 0 0 6px !important; }
    div[role="banner"] > table[role="navigation"] { clear: both; height: auto !important; }
    div[role="banner"] > table[role="navigation"] td { white-space: normal !important; }
    .odeNavTab > a, .odeNavTab > a:visited { padding: 3px 6px 2px 6px !important; font-size: 12px !important; }
}
@media (max-width: 600px) {
    #imgODEBanner { width: clamp(140px, calc(100vw - 190px), 280px); }
    div[role="banner"] > div[style*="float:right"] { padding-top: 0 !important; }
    .odeNavTab > a, .odeNavTab > a:visited { padding: 2px 6px 1px 6px !important; line-height: 16px !important; }
}