/* Page-specific styles for maternity-pay-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The two-column layout is
   the shared .layout-split; the headline is PAYE's .result-card, the
   month table is table.tax-table and the scheme comparison is
   .result-compare. The week-by-week chart, the "Do you qualify?" list and
   the key dates are shared with the Shared Parental Leave planner, in
   calculator-shared.css. */

  /* ---------- maternity-pay-calculator (scoped) ---------- */

  /* The pay box and its period side by side. */
  .calc-shell .field-row + .hint { margin-top: 6px; }

  .calc-shell .fold-body .radios { margin-bottom: 2px; }

  /* ---- Month by month ---- */
  @media (max-width: 560px) {
    .calc-shell table.month-table th, .calc-shell table.month-table td { padding-inline: 5px; }
    .calc-shell table.month-table th:first-child, .calc-shell table.month-table td:first-child { padding-inline-start: 0; }
    .calc-shell table.month-table th:last-child, .calc-shell table.month-table td:last-child { padding-inline-end: 0; }
  }