/* Buy-Sell Agreement calculator. The cards, tiles, tables and callouts are RothConversion.css's rc-* classes; these
   are the page's own additions. */

.workspaceView .workspace-tab-pane-scroll.bs-pane {
    align-items: stretch;
    padding: 0 0.6rem 1.25rem;
}

.bs-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #181c32;
    margin: 1rem 0 0.5rem;
}

.bs-checklist {
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #3d4a5c;
}

.bs-checklist li {
    margin-bottom: 0.35rem;
}

/* ---------------------------------------------------------------- Inputs */

.bs-inputs .bs-owner-head th {
    background: #eef4fb;
    font-weight: 600;
}

.bs-inputs .bs-total-row td {
    font-weight: 600;
    background: #f7f9fc;
}

.bs-icon-btn {
    border: none;
    background: transparent;
    color: #5c6d82;
    padding: 0 0.25rem;
    line-height: 1;
}

.bs-icon-btn:hover {
    color: #b42318;
}

/* ---------------------------------------------------------------- Results */

.bs-compare th.bs-col {
    width: 24%;
}

.bs-compare td:first-child {
    white-space: normal;
    min-width: 14rem;
}

.bs-compare td.bs-indent {
    padding-left: 1.4rem;
    color: #5c6d82;
}

.bs-compare td.bs-wrap {
    white-space: normal;
}

.bs-compare tr.bs-row-key > td {
    font-weight: 600;
}

.bs-compare tr.bs-row-gap > td {
    border-top: 2px solid #d5dde8;
}

.bs-each td:first-child {
    white-space: normal;
}

.bs-quote {
    margin: 0.75rem 0;
    padding: 0.5rem 0.9rem;
    border-left: 3px solid #0b5ed7;
    background: #f7faff;
    color: #243b53;
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.5;
}

/* Bootstrap's table cell colour outranks .rc-bad / .rc-good; restate them for these tables. */
.bs-compare td.rc-bad,
.bs-each td.rc-bad {
    color: #b42318;
}

.bs-compare td.rc-good,
.bs-each td.rc-good {
    color: #11753a;
}

.bs-compare td.rc-muted,
.bs-each td.rc-muted {
    color: #6b7a8f;
}

/* Phones: one tile per row, and let the row labels wrap so the two columns of figures fit. */
@container (max-width: 520px) {
    .bs-summary .rc-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .bs-compare td:first-child {
        min-width: 0;
    }

    .bs-compare td,
    .bs-compare th {
        padding: 0.2rem 0.3rem;
        font-size: 0.75rem;
    }

    .bs-compare td.bs-indent {
        padding-left: 0.7rem;
    }
}