/* Base styles — Phase 0 extraction from templates/index.html inline <style>.
   Rules are unchanged except that repeated color/radius/spacing literals in
   the desktop rules now reference the tokens in tokens.css (identical
   values). Media-query blocks are copied verbatim. */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 100dvh (with the 100vh fallback for older engines) tracks iOS Safari's
   collapsing URL bar, so full-height pages never overshoot the visible
   viewport. */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; height: 100vh; height: 100dvh; overflow: hidden; }
#header { flex: 0 0 auto; padding: var(--space-2) var(--space-4); background: var(--color-header-bg); color: #eee; display: flex; align-items: center; gap: var(--space-4); }
#header h1 { font-size: 18px; font-weight: 600; }
#header .file { color: #8888aa; font-size: 13px; }
#header select { padding: 4px 8px; border-radius: var(--radius-md); border: 1px solid #555; background: var(--color-panel-bg); color: #eee; font-size: 14px; }
/* Upload processing toast (upload.js post-modal poll writes it; empty most
   of the time). Fixed under the header's right edge — the trigger moved off
   the header into the nav, so the status no longer has a header slot. The
   old header layout's right-alignment came from #clear-all-btn's
   margin-left:auto; that button moved into the Parameters card and nothing
   in the header tail needs right-alignment now. */
#upload-status { position: fixed; top: 48px; right: 12px; z-index: 902; color: #cfd8ea; font-size: 12px; background: rgba(22, 33, 62, 0.95); padding: 6px 10px; border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
#upload-status:empty { display: none; }
.upload-modal { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:1000; justify-content:center; align-items:center; }
.upload-modal.open { display:flex; }
.upload-modal-content { background:var(--color-panel-bg); padding:24px; border-radius:var(--radius-lg); width:400px; color:#eee; }
.upload-modal-content h2 { margin-bottom:16px; font-size:16px; }
.upload-modal-content input[type=file] { margin-bottom:12px; }
.upload-modal-content button { padding:8px 16px; border:none; border-radius:var(--radius-md); cursor:pointer; margin-right:8px; }
.upload-modal-content .btn-upload { background:var(--color-accent); color:#fff; }
.upload-modal-content .btn-cancel { background:#444; color:#ccc; }
#flight-info { display: none; }
/* #body fills whatever the header leaves (flightview.css makes the flight
   page's body a flex column). No more `calc(100vh - 44px)`: that hard-coded
   the header height, and on mobile portrait the wrapped ~110px header pushed
   the bottom of #body (the chart's x-axis) below the viewport, clipped by
   body{overflow:hidden}. */
#body { display: flex; flex: 1 1 auto; min-height: 0; }
/* flight-info bar permanently hidden */
#sidebar { width: 380px; min-width: 200px; max-width: 60vw; overflow-y: auto; padding: var(--space-2); border-right: none; background: #fafafa; font-size: 13px; }
#sidebar-resize { width: 5px; cursor: col-resize; background: #ddd; flex-shrink: 0; }
#sidebar-resize:hover, #sidebar-resize.dragging { background: #99f; }
#sidebar details { margin-bottom: 6px; }
#sidebar summary { font-weight: 600; cursor: pointer; padding: 4px 0; user-select: none; }
#sidebar label { display: block; padding: 2px 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar label:hover { background: #e8e8ff; }
#sidebar input[type=checkbox] { margin-right: 4px; vertical-align: middle; }
#raw-filter { width: 100%; padding: 4px; margin: 4px 0; border: 1px solid #ccc; border-radius: var(--radius-sm); font-size: 12px; }
#chart-wrap { flex: 1; padding: var(--space-1); display: flex; flex-direction: column; gap: 0; overflow: hidden; }
#map { width: 100%; flex: 2; min-height: 80px; border: 1px solid #ccc; border-radius: var(--radius-md); }
#map-chart-resize { width: 100%; height: 5px; cursor: row-resize; background: #ddd; flex-shrink: 0; }
#map-chart-resize:hover, #map-chart-resize.dragging { background: #99f; }
#chart { width: 100%; flex: 3; min-height: 80px; }
/* ── Off-chart legend chip strip (components/legend_strip.js) ──
   Small viewports only: the Plotly legend is off there (chart.js
   applyMobileChartLayout — wrapped trace names + automargin eat the top of
   a short chart), so this strip below the chart names the traces instead.
   Deliberately OUTSIDE the Plotly div so its height can never feed
   automargin. Fixed 22px, one row forever: extra chips scroll horizontally
   rather than wrapping, so chart height stays predictable however many
   traces are on. Empty on desktop (chips render only on small viewports);
   :empty collapses it to zero height there. Shared by the flight chart
   (#chart-legend) and the insights trend chart (#ins-trend-chart-legend). */
.legend-strip { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 22px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
.legend-strip::-webkit-scrollbar { display: none; }
.legend-strip:empty { display: none; }
/* .legend-strip.mobile-hidden is scoped INSIDE the landscape media query
   alongside its #chart/#map/#gallery siblings (see below) — deliberately, so a
   JS regression that failed to clear the class could never hide the strip on
   desktop. Do not hoist it up here. */
.legend-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; padding: 2px 6px; font-size: 11px; line-height: 1; color: #445; cursor: pointer; border-radius: var(--radius-sm); }
.legend-chip:hover { background: #e8e8ff; }
/* aria-pressed is the toggle state (legend_strip.js): false = trace hidden
   ('legendonly') → dim the chip, same affordance as Plotly's own legend. */
.legend-chip[aria-pressed="false"] { opacity: 0.35; }
.legend-swatch { display: inline-block; width: 10px; height: 3px; border-radius: 1px; }
/* ── Floating chat overlay ── */
#chat-fab { position: fixed; bottom: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-accent); color: #fff; border: none; font-size: 22px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.25); z-index: 900; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, background 0.15s; }
#chat-fab:hover { background: var(--color-accent-hover); transform: scale(1.08); }
#chat-fab.has-unread { animation: chat-pulse 2s infinite; }
@keyframes chat-pulse { 0%,100% { box-shadow: 0 2px 10px rgba(0,0,0,0.25); } 50% { box-shadow: 0 2px 18px rgba(74,158,255,0.6); } }
#chat-overlay { display: none; position: fixed; bottom: 78px; right: 20px; width: 400px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px); background: #fff; border-radius: var(--radius-xl); box-shadow: 0 4px 24px rgba(0,0,0,0.2); z-index: 901; flex-direction: column; overflow: hidden; }
#chat-overlay.open { display: flex; }
#chat-header { display: flex; align-items: center; padding: 10px 14px; background: var(--color-header-bg); color: #eee; border-radius: var(--radius-xl) var(--radius-xl) 0 0; flex-shrink: 0; }
#chat-header-title { font-size: 14px; font-weight: 600; flex: 1; }
#chat-header button { background: transparent; border: none; color: #aaa; font-size: 13px; cursor: pointer; padding: 2px 8px; border-radius: var(--radius-md); }
#chat-header button:hover { color: #fff; background: rgba(255,255,255,0.1); }
#chat-messages { flex: 1; overflow-y: auto; padding: 10px 14px; font-size: 13px; }
#chat-messages .chat-msg { margin-bottom: 10px; line-height: 1.45; }
#chat-messages .chat-msg.user { text-align: right; }
#chat-messages .chat-msg.user .chat-bubble { background: #e3f2fd; display: inline-block; padding: 6px 12px; border-radius: 12px 12px 2px 12px; max-width: 85%; text-align: left; }
#chat-messages .chat-msg.assistant .chat-bubble { background: #f5f5f5; display: inline-block; padding: 6px 12px; border-radius: 12px 12px 12px 2px; max-width: 85%; text-align: left; }
#chat-messages .chat-msg.assistant .chat-bubble p { margin: 4px 0; }
#chat-messages .chat-msg.assistant .chat-bubble p:first-child { margin-top: 0; }
#chat-messages .chat-msg.assistant .chat-bubble p:last-child { margin-bottom: 0; }
#chat-messages .chat-msg.assistant .chat-bubble code { background: #e8e8e8; padding: 1px 4px; border-radius: var(--radius-sm); font-size: 12px; }
#chat-messages .chat-msg.assistant .chat-bubble ul, #chat-messages .chat-msg.assistant .chat-bubble ol { margin: 4px 0; padding-left: 20px; }
#chat-messages .chat-msg.assistant .chat-bubble strong { font-weight: 600; }
#chat-messages .chat-typing { color: #888; font-style: italic; font-size: 12px; padding: 4px 0; }
#chat-input-row { display: flex; gap: 4px; padding: 8px 10px; border-top: 1px solid #e0e0e0; background: #fafafa; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
#chat-input { flex: 1; padding: 7px 12px; border: 1px solid #ccc; border-radius: 18px; font-size: 13px; outline: none; resize: none; font-family: inherit; max-height: 80px; }
#chat-input:focus { border-color: var(--color-accent); }
#chat-send-btn { padding: 7px 16px; border: none; background: var(--color-accent); color: #fff; border-radius: 18px; font-size: 13px; cursor: pointer; font-weight: 600; }
#chat-send-btn:hover { background: var(--color-accent-hover); }
#chat-send-btn:disabled { background: #aaa; cursor: default; }
#metrics-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
#metrics-table th, #metrics-table td { padding: 2px 4px; border-bottom: 1px solid #e0e0e0; text-align: right; }
#metrics-table th { background: #eef; font-weight: 600; text-align: center; }
#metrics-table td:first-child { text-align: left; font-weight: 500; }
#metrics-table tr:hover { background: #f0f0ff; }
.group-btns { font-size: 11px; margin: 2px 0 4px; }
.group-btns button { font-size: 11px; padding: 1px 6px; margin-right: 4px; cursor: pointer; background: #e8e8e8; border: 1px solid #ccc; border-radius: var(--radius-sm); }
.group-btns button:hover { background: #d0d0ff; }
#loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 18px; color: #888; display: none; }
#raw-nav { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; }
#raw-nav button { font-size: 14px; padding: 2px 10px; cursor: pointer; background: #e8e8e8; border: 1px solid #ccc; border-radius: var(--radius-sm); }
#raw-nav button:hover { background: #d0d0ff; }
#raw-current { flex: 1; font-weight: 600; text-align: center; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#raw-pos { color: #888; font-size: 11px; text-align: center; }
#raw-signed-lbl { display: block; text-align: center; font-size: 12px; margin-top: 4px; cursor: pointer; }
#events-panel tr:hover td { background: #fff3e0; }
#anomalies-panel tr:hover td { background: #fce4ec; cursor: pointer; }
.anom-bar { display: inline-block; height: 8px; border-radius: 2px; vertical-align: middle; }
.anom-score { font-weight: 600; font-size: 10px; min-width: 32px; display: inline-block; text-align: right; }
.phase-legend.open .phase-legend-body { display: block !important; }
.phase-legend.open .phase-legend-toggle::after { content: ''; }
/* ── Shared top nav (base.html; rendered inline in #header on the flight page) ── */
#app-nav-bar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-header-bg); color: #eee; flex-shrink: 0; }
#app-nav-bar .app-nav-brand { font-size: 18px; font-weight: 600; }
.app-nav { display: flex; align-items: center; gap: var(--space-1); }
.app-nav a { color: #8888aa; text-decoration: none; font-size: 13px; padding: 3px 10px; border-radius: var(--radius-md); white-space: nowrap; }
.app-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.app-nav a.active { color: #fff; background: var(--color-panel-bg); }

/* ── Mobile hamburger button ── */
#mobile-menu-btn { display: none; background: transparent; border: none; color: #eee; font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1; }
#mobile-menu-btn:hover { color: #fff; }

/* ── Shared nav collapse (base.html pages: /flights, /approaches, /flags,
   /aircraft, /insights) ──
   On small viewports the 6-link .app-nav cannot fit the header row; it
   collapses behind #nav-menu-btn into a dropdown under the bar so the header
   stays one compact row. Scoped to #app-nav-bar so the flight page (whose
   nav lives in #header / #drawer-nav) is untouched. Desktop unchanged. */
#nav-menu-btn { display: none; background: transparent; border: none; color: #eee; font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1; }
#nav-menu-btn:hover { color: #fff; }
@media (max-width: 768px) {
    #app-nav-bar { position: relative; flex-wrap: nowrap; padding: 8px 10px; gap: 8px; }
    #app-nav-bar .app-nav-brand { font-size: 15px; white-space: nowrap; }
    #nav-menu-btn { display: block; }
    #app-nav-bar > .app-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--color-header-bg); padding: 4px 8px 10px;
        z-index: 950; box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }
    #app-nav-bar > .app-nav.open { display: flex; }
    #app-nav-bar > .app-nav a { padding: 10px; font-size: 14px; }
}

/* ── Nav links inside the flight page's sidebar drawer ──
   Desktop shows .app-nav inline in #header, so the drawer copy is hidden;
   the flight-page mobile blocks below swap them (header copy hidden, drawer
   copy shown) so navigation stays reachable via the hamburger drawer. */
#drawer-nav { display: none; border-bottom: 1px solid #ddd; margin-bottom: 8px; padding-bottom: 6px; }
#drawer-nav .app-nav { flex-direction: column; align-items: stretch; gap: 0; }
#drawer-nav .app-nav a { color: #345; font-size: 14px; padding: 9px 8px; }
#drawer-nav .app-nav a:hover { color: var(--color-accent); background: #e8e8ff; }
#drawer-nav .app-nav a.active { color: var(--color-accent); background: #e7eefb; }

/* ── Sidebar overlay backdrop ── */
#sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 499; }

/* ── Landscape map/chart toggle in header ── */
#mobile-view-toggle { display: none; padding: 4px 10px; border-radius: var(--radius-md); border: 1px solid #555;
    background: var(--color-panel-bg); color: #8cf; font-size: 11px; font-weight: 600; cursor: pointer; }

/* ── Mobile tab bar (hidden — using split view instead) ── */
#mobile-tabs { display: none; }

/* ── Mobile portrait: split screen (map top, chart bottom) ── */
@media (max-width: 768px) and (orientation: portrait) {
    #header { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
    /* The nav links move into the sidebar drawer (#drawer-nav) and the brand
       title goes — the header's job here is the flight selector + mode
       buttons, and dropping the two widest members is what gets it down to
       one compact row (the ~110-130px wrapped header ate the chart). */
    #header h1 { display: none; }
    #header > .app-nav { display: none; }
    #drawer-nav { display: block; }
    #mobile-menu-btn { display: block; }
    /* The "Aircraft:"/"Flight:" label text goes too — with two selects at the
       160px cap below, the text is what pushed the 401-470px-wide headers onto
       a second ~35px row. The selects are self-evident; font-size:0 (not
       display:none) keeps the labels' accessible names, and !important beats
       the labels' inline font-size:13px in templates/index.html. */
    #header label { font-size: 0 !important; }
    /* Wide enough for the option's "SN214 #1284 2026-08-16" prefix (~188px at
       13px incl. padding + arrow — measured); the route/duration tail may
       truncate. Headers 401-470px wide still fit menu + both selects + Chart
       on one row (~224px of room for this select at 401px). The ≤400px block
       below overrides this cap, and flight.js drops the SN### prefix there
       (NARROW_HEADER_MQ) — keep the three in sync. */
    /* 190px exactly cleared the measured 188px need on Linux Chrome/Arial — a
       2px margin that iOS's -apple-system metrics would eat over a 22-char
       label, re-clipping the date. The row has ~34px spare at 412px, so spend
       it here: 210px gives ~22px of font slack and still leaves one row. */
    #header select { font-size: 13px; max-width: 210px; }

    /* Sidebar becomes a slide-in drawer. Height comes from the body flex
       column (no hard-coded header arithmetic — the header may WRAP here).
       Anchored inside #body (position:relative below) rather than fixed to
       the viewport: #body starts exactly where the header ends whatever
       height the header wrapped to, so there is no top-offset constant to
       go stale (the old fixed top:44px overlapped a wrapped header). */
    #body { flex-direction: column; overflow: hidden; position: relative; }
    #sidebar {
        position: absolute; top: 0; left: 0; bottom: 0; width: 85vw !important;
        max-width: 360px !important; min-width: 0 !important;
        z-index: 500; background: #fafafa;
        transform: translateX(-100%); transition: transform 0.25s ease;
        overflow-y: auto; padding: 12px;
        box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    }
    #sidebar.mobile-open { transform: translateX(0); }
    #sidebar-backdrop.mobile-open { display: block; }
    #sidebar-resize { display: none; }

    /* Split screen: map top, chart bottom. 2:3 like desktop — the chart
       needs the larger share for its axis + legend chrome. */
    #chart-wrap { flex: 1; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
    #map { flex: 2; width: 100%; min-height: 0; border: none; border-radius: 0; }
    #map-chart-resize { display: none; }
    #chart { flex: 3; width: 100%; min-height: 0; }

    /* Sidebar content adjustments */
    #sidebar label { padding: 6px 0; font-size: 14px; }
    #sidebar summary { padding: 8px 0; font-size: 14px; }
    #sidebar input[type=checkbox] { width: 18px; height: 18px; }
    #events-panel, #anomalies-panel { font-size: 13px; }
    #raw-nav button { padding: 8px 14px; font-size: 16px; }
    #metrics-table { font-size: 12px; }
    #metrics-table th, #metrics-table td { padding: 4px 6px; }

    /* Upload modal responsive */
    .upload-modal-content { width: calc(100vw - 32px) !important; max-width: 400px; }

    /* Chat overlay responsive */
    #chat-overlay { width: calc(100vw - 16px); right: 8px; bottom: 16px; max-height: calc(100vh - 100px); }
    /* The floating FAB would sit exactly on the chart's bottom-right corner
       (x-axis ticks) in the portrait split screen — hide it. Chat stays
       reachable in landscape and on desktop. */
    #chat-fab { display: none; }

    #loading { font-size: 16px; }
}

/* ── Mobile landscape: full screen map or chart with toggle ── */
@media (max-width: 1024px) and (orientation: landscape) {
    #header { padding: 4px 10px; gap: 6px; flex-wrap: nowrap; }
    #header h1 { font-size: 13px; }
    /* Nav links live in the sidebar drawer here too (nowrap header — the
       450px .app-nav overflowed it). */
    #header > .app-nav { display: none; }
    #drawer-nav { display: block; }
    #mobile-menu-btn { display: block; }
    /* NOTE: no `font-size` for #header label here on purpose. index.html sets
       an INLINE font-size:13px on the two header labels, so an unqualified
       rule is dead code — this block used to carry `font-size: 11px` that
       never applied. The portrait/≤400px blocks need `!important` to beat that
       inline style; landscape keeps the labels visible, so it needs no rule. */
    /* "SN214 #1284 2026-08-16" needs ~177px at 12px (measured); header is
       nowrap here, so the cap must keep menu + h1 + both selects + Chart
       toggle under ~667px (~204px of room for this select at 667px). */
    /* Same reasoning as the portrait cap: 180px left only 4px over the measured
       176px need. 195px keeps ~19px of font slack; the row has ~24px spare at
       667px and this block is nowrap, so do not go past that. */
    #header select { font-size: 12px; max-width: 195px; }

    /* Same no-stale-offset drawer anchoring as portrait (was fixed top:36px). */
    #body { flex-direction: column; overflow: hidden; position: relative; }
    #sidebar {
        position: absolute; top: 0; left: 0; bottom: 0; width: 50vw !important;
        max-width: 320px !important; min-width: 0 !important;
        z-index: 500; background: #fafafa;
        transform: translateX(-100%); transition: transform 0.25s ease;
        overflow-y: auto; padding: 8px;
        box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    }
    #sidebar.mobile-open { transform: translateX(0); }
    #sidebar-backdrop.mobile-open { display: block; }
    #sidebar-resize { display: none; }

    /* Full screen: one view at a time */
    #chart-wrap { flex: 1; padding: 0; overflow: hidden; }
    #map { width: 100%; height: 100%; min-height: 0; border: none; border-radius: 0; }
    #chart { width: 100%; height: 100%; min-height: 0; }
    #map-chart-resize { display: none; }
    /* #gallery shares the chart slot (chart.js swaps #chart/#gallery via
       inline display), so it hides with the chart in the one-view toggle;
       !important beats the inline display:block chart.js sets. */
    #map.mobile-hidden { display: none; }
    #chart.mobile-hidden { display: none; }
    #gallery.mobile-hidden { display: none !important; }
    /* The legend strip follows the chart slot in the one-view toggle
       (mobile.js) — over the full-screen map its chips would name traces that
       are not on screen. Scoped here with its siblings so it can never hide
       the strip on desktop. */
    .legend-strip.mobile-hidden { display: none; }

    /* Show the toggle button */
    #mobile-view-toggle { display: block; }

    #chat-fab { bottom: 8px; right: 8px; width: 40px; height: 40px; font-size: 18px; }
    #chat-overlay { width: 50vw; right: 8px; bottom: 56px; max-height: calc(100vh - 80px); }
    #loading { font-size: 14px; }
}

/* Small phone tweaks */
@media (max-width: 400px) {
    #header h1 { font-size: 13px; }
    /* "#1284 2026-08-16" needs ~137px at 12px; 145px keeps menu + two selects
       on one 360px row (a 360px header has only ~178px of room for this
       select — NOT enough for the SN### prefix's ~177px need with any margin,
       so flight.js omits the prefix below this breakpoint: NARROW_HEADER_MQ).
       Label text hidden here as in the portrait block above (this also covers
       <=400px landscape, where the header is nowrap). */
    #header label { font-size: 0 !important; }
    #header select { max-width: 145px; font-size: 12px; }
    #sidebar { width: 100vw !important; max-width: 100vw !important; }
}

/* ── Weather dots (P10) ──
   Shared by the flight sidebar (annotations.js) and the log book
   (pages/flights.js); the category → class map lives in annotations_model.js. */
.wx-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; vertical-align: middle;
    margin-right: 4px; cursor: help;
}
.wx-vfr { background: var(--color-wx-vfr); }
.wx-mvfr { background: var(--color-wx-mvfr); }
.wx-ifr { background: var(--color-wx-ifr); }
.wx-lifr { background: var(--color-wx-lifr); }

/* Decode-caveat badge (caveats.js): an unobtrusive hover marker beside a
   column name whose decode is not fully established — today only the
   pitch-trim L/R side. Same "hover for the honest note" idiom as #pfd-note
   and the terrain chart annotation. Shared by the parameter picker, the
   gallery cards, the evidence modal and the insights issue list. */
.caveat-badge {
    margin-left: 4px;
    color: #b26a00;
    font-size: 11px;
    font-style: normal;
    cursor: help;
    vertical-align: baseline;
}