@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
  /* Grid-ifies whichever element is the DIRECT PARENT of #chartToolbar/
     #chartWrap - #chartPane on stock_chart_dev.aspx/stock_chart_tab_dev.aspx
     (where it's a sibling of the Config sidebar, #splitContainer > #stylingPane
     - #app there also wraps that sidebar, so grid-ifying #app directly swept
     the whole Config menu into this grid's implicit auto-placement and broke
     it), #app itself on the generated client-facing stock_chart.html (which
     has no #chartPane wrapper - stripped by stripDevOnlyMarkup - so
     #chartToolbar sits directly in #app there instead). Only one of these
     two rules ever actually matches on a given page. */
body {
    background: #0F1929;    
    font-family: 'Inter', 'Montserrat', sans-serif;
}
  #chartPane{
    display:grid;
    grid-template-columns: 70% 30%;
    column-gap:16px;
    row-gap:12px;
    grid-template-areas:
      "top top"
      "toolbar toolbar"
      "chart side"
      "data data";
  }
  #app:not(:has(#chartPane)){
    display:grid;
    grid-template-columns: 70% 30%;
    /*column-gap:16px;*/
    row-gap:12px;
    grid-template-areas:
      "top top"
      "toolbar toolbar"
      "chart side"
      "data data";
    max-width:unset !important;
  }
  #chartToolbar{ grid-area: toolbar; }
  #chartWrap{ 
    grid-area: chart; min-width:0; 
    background:transparent;
}

  #customTopRow{
    grid-area: top;
    display:flex;
    align-items:center;
    gap:24px;
    padding:8px 0;
  }
  .custom-logo{
    height:36px;
    width:auto;
    flex:none;
  }
  /* Groups price/movement/movement% so they can share a common BASELINE
     with each other (align-items:flex-end here) while the logo, a
     #customTopRow sibling, centers against this whole cluster's box
     height instead (#customTopRow's own align-items:center) - one flex
     container can't give two different cross-axis alignments at once, so
     this nested one exists specifically to want a different alignment
     than its parent row. */
  .custom-price-cluster{
    display:flex;
    align-items:flex-end;
    gap:24px;
  }
  .custom-price-block{
    display:flex;
    /* flex-direction:column; */
    align-items:flex-end;
    gap:4px;
    line-height:1.2;
  }
  .custom-price-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--muted, #6b7686);
  }
  .custom-price-value{
    font-size:24px;
    font-weight:600;
    color:white;
  }
  .custom-price-currency{
    font-size:12px;
    font-weight:400;
    color: #9FB0BC;
    padding-bottom:2px;
  }
  .custom-movement, .custom-movement-percent{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:16px;
    font-weight:600;
  }
  .mv-up{ color:#57C98A; }
  .mv-down{ color:var(--down, #e0454a); }
  .mv-arrow-up::before{ content:'\25B2'; font-size:11px; }
  .mv-arrow-down::before{ content:'\25BC'; font-size:11px; }

  #customSidebar{
    grid-area: side;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:8px;
    border-left:0px solid var(--line, #e4e8ee);
    font-size:14px;
    color: #9FB0BC;
  }
  /* flex:1 makes each row stretch to fill an equal share of the sidebar's
     full height (rather than justify-content:space-between leaving empty
     gaps between them) - so the border-top divider below sits flush
     against each row's own content instead of floating in blank space. */
  .custom-sidebar-row{
    flex:1;
    display:flex;
    align-items:center;
  }
  .custom-sidebar-row + .custom-sidebar-row{
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .custom-sidebar-symbol{
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  /* Same two-column shape as .custom-sidebar-price below: existing content
     (source link + delay label) on the left, a new quote timestamp
     (date/time on their own lines) right-aligned on the right. */
  .custom-sidebar-source{
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .custom-sidebar-source-left{
    display:flex;
    flex-direction:column;
    gap:2px;
    text-align:left;
  }
  .custom-sidebar-source-timestamp{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    gap:2px;
  }
  /* Two columns: price value on the left, movement + movement% stacked on
     the right - same mv-up/mv-down/mv-arrow-* classes and colors as the
     top row's own movement, just a second, independent instance (own ids)
     since an id can only be used once in the page. */
  .custom-sidebar-price{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .custom-sidebar-price-left{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .custom-sidebar-price-text{
    text-align:left;
  }
  .custom-sidebar-price-lbl{
    font-size:11px;
    text-align:left;
  }
  .custom-sidebar-price-movement{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    gap:2px;
  }
  #customSidebarMovementArrow{
    display:none;
  }

  /* Table look: each cell draws its OWN right/bottom border rather than
     relying on a 1px grid gap filled by the container's background - the
     gap-fill approach sits at fractional pixel boundaries (3 equal
     columns rarely divide the available width evenly), which blurs to a
     visibly thicker line on hi-DPI screens. A real border edge is only
     ever drawn by one cell per shared line (never both neighbors), so
     there's no doubling either. */
  #customDataGrid{
    grid-area: data;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    border:1px solid #464D5A;
  }
  .custom-data-cell{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 12px;
    background:#13273F;
    border-right:1px solid #464D5A;
    border-bottom:1px solid #464D5A;
  }
  .custom-data-cell:nth-child(3n){
    border-right:none;
  }
  .custom-data-cell:nth-last-child(-n+3){
    border-bottom:none;
  }
  .custom-data-label{
    font-size:12px;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#9FB0BC;
  }
  .custom-data-value{
    font-size:33px;
    font-weight:300;
    color:white;
  }

  @media (max-width: 660px){
    /* Matches the base rule's own #app:not(:has(#chartPane)) selector
       exactly (not just #app) - a plain #app here loses on specificity to
       that base rule regardless of source order, since :not(:has(...))
       counts as an extra selector. Without this match, none of these
       overrides actually applied at all. */
    #chartPane, #app:not(:has(#chartPane)){
      grid-template-columns: 1fr;
      grid-template-areas:
        "top"
        "toolbar"
        "chart"
        "side"
        "data";
    }
    /* Was display:none - now gets its own full-width row below the chart
       instead of disappearing. border-left made sense as a column
       separator next to the chart; swapped for border-top since it's a
       standalone row here, same idea as .custom-data-cell's own divider. */
    #customSidebar{
      flex-direction:row;
      justify-content:space-between;
      border-left:none;
      border-top:1px solid var(--line, #e4e8ee);
      padding-top:10px;
    }
    /* Rows are now side-by-side columns instead of stacked, so the
       border-top dividers from the stacked layout no longer make sense -
       swapped for a border-left between columns instead, with margin on
       both sides so the line doesn't sit flush against either column's
       content. */
    .custom-sidebar-row{
      border-top:none;
      padding-left:10px;
      padding-right:10px;
    }
    .custom-sidebar-row + .custom-sidebar-row{
      border-top:none;
      border-left:1px solid rgba(255, 255, 255, 0.14);
    }
    .custom-sidebar-symbol{
      border-top:none;
    }
    #customDataGrid{
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, auto);
    }
    .custom-data-cell:nth-child(3n){
      border-right:1px solid #464D5A;
    }
    .custom-data-cell:nth-child(2n){
      border-right:none;
    }
    .custom-data-cell:nth-last-child(-n+3){
      border-bottom:1px solid #464D5A;
    }
    .custom-data-cell:nth-last-child(-n+2){
      border-bottom:none;
    }
    #customTopRow{ flex-wrap:wrap; gap:12px; }
  }
  @media (max-width: 550px){
    .custom-sidebar-source-left{
      display:none;
    }
    /* With -left hidden, .custom-sidebar-source's own justify-content:
       space-between has only one child left, which collapses to
       flex-start instead of staying on the right - margin-left:auto
       pushes it back over regardless of what else is (or isn't) visible. */
    .custom-sidebar-source-timestamp{
      margin-left:auto;
    }
  }
  @media (max-width: 410px){
    .custom-sidebar-source{
      display:none;
    }
  }
  @media (max-width: 390px){
    #customDataGrid{
      grid-template-columns: 1fr;
      grid-template-rows: repeat(6, auto);
    }
    /* :nth-child(n) matches every cell, same specificity as the 780px
       block's own :nth-child(3n)/:nth-child(2n) rules - being later in
       source order, it wins over both and clears the right border for
       all cells (single column, nothing to separate horizontally). */
    .custom-data-cell:nth-child(n){
      border-right:none;
    }
    .custom-data-cell:nth-last-child(-n+2){
      border-bottom:1px solid #464D5A;
    }
    .custom-data-cell:last-child{
      border-bottom:none;
    }
    .custom-sidebar-source{
      display:none;
    }
  }
  .legend-range-group .legend{
    display:none;
  }
  .chart-style-row {
    display:none;
  }
  #customMovementArrow{
    display:none;
  }
  .range-group{
    background:transparent;
    border:none;
  }
  .range-group button{
    border-radius:0px;
    text-transform:uppercase;
    color:#9FB0BC !important;
  }
  .range-group button.active{
    color:white !important;
  }
  .custom-sidebar-source-text a,.custom-sidebar-source-text a:visited,.custom-sidebar-source-text a:hover,.custom-sidebar-source-text a:active{
    color:inherit;
    /* text-decoration:none; */
  }
  #customSidebarSymbolText{
    color:#6FB5E0;
    font-weight:600;
    font-size:30px;
  }
  #chartLegend{
    margin-left:50px;
    margin-top:-15px;
  }
  .draw-toolbar{
    margin-left:50px;
    margin-top:-10px;
  }
  .data-unavailable-overlay #dataUnavailableText{
    border:1px solid white;
  }
  .data-unavailable-overlay{
    background:rgba(0,0,0,0.6);
  }
#customSidebarPriceText{
  font-size:30px;
  font-weight:300;
}
.custom-sidebar-symbol{
  display:block;
}
#customSidebarSymbolText{
  margin-bottom:10px;
  margin-top:10px;
}
#customSidebarSourceText,#customSidebarTimestampDate{
  margin-bottom:5px;
}
#chartWrap{
  border:none;
}
#drawToolbarToggle{
  background:rgba(255, 255, 255, 0.7);

}
.custom-data-value{
  margin-top:7px;
  margin-bottom:7px;
}
.tt-date{
  border-bottom:1px solid #FFFFFF;
  padding-bottom:5px;
}
.tt-value{
  padding-top:5px;
  font-size:20px;
}
.legend-swatch {
    height: 4px;
    margin-bottom: 5px;
}
.draw-toolbar{
    display:none;
}