/* Both presentations sit in the same kind of panel, so switching between them does not move the page
   around underneath the reader. */
.boalf-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 acceptanceLevel.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. */
#boalfChart {
    height: 60vh;
}

/* Levels read 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 decimal points stack under each other down the column. */
#boalfGrid .dx-datagrid-content td {
    font-variant-numeric: tabular-nums;
}