body {
    font-family: sans-serif;
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

th, td {
    border: 1px solid #ccc;
    padding: 6px;
}

    th:nth-child(n+2), td:nth-child(n+2) {
        text-align: right;
    }

    th:first-child, td:first-child {
        text-align: left;
    }

th {
    background: #222;
    color: #fff;
}

.summary td {
    background: #000;
    color: #fff;
    font-weight: bold;
}

.add-row td {
    padding: 0;
}

.add-row button {
    width: 100%;
    padding: 8px;
    border: none;
    background: #eee;
    cursor: pointer;
    text-align: left;
}

.remove {
    color: #900;
    cursor: pointer;
}

.item-row input, .item-row select {
    text-align: right;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    font-size: 1rem;
}
.fh-display { display: none; cursor: pointer; }

/* sticky section summaries */
.summary {
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 480px) {
    #stmt thead { display: none; }
    #stmt tr { display: block; margin-bottom: 8px; }
    #stmt td { display: flex; justify-content: space-between; align-items: center; }
    #stmt td::before { font-weight: bold; }
    #stmt td:nth-child(1)::before { content: 'Description'; }
    #stmt td:nth-child(2)::before { content: 'Bi-Weekly'; }
    #stmt td:nth-child(3)::before { content: 'Yearly'; }
    #stmt td:nth-child(4)::before { content: 'Monthly'; }
    #stmt td:nth-child(5)::before { content: 'Percent'; }
    #stmt td:nth-child(6)::before { content: 'Frequency'; }
}