/* Both presentations sit in the same kind of panel, so switching between them does not move the page
   around underneath the reader. */
.boc-panel {
    background: #ffffff;
    border: 1px solid #e1e0d9;
    border-radius: 10px;
    padding: 16px;
}

/* The chart sizes itself to its container, and a container with no height gives a chart no height.
   This value is only a FALLBACK for the instant before bidOfferCashflow.js runs: 60vh knows nothing
   about the header, selectors, summary line or footer around it, so fitHeights() immediately replaces
   it with the space actually left above the footer, and keeps it right on resize.

   No min-height here. The floor belongs in one place, and that is MIN_PANEL_HEIGHT in the script — a
   CSS floor would silently win over a smaller computed height and put the panel back over the footer,
   which is the whole thing being fixed. */
#bocChart {
    height: 60vh;
}

/* Money reads as a column of figures only when the digits line up, which they do not in a
   proportional face. The grid's own number formatting already aligns the cells to the right; this is
   what makes the thousands separators stack under each other down the column. */
#bocGrid .dx-datagrid-content td {
    font-variant-numeric: tabular-nums;
}