/*
 * Mobile compatibility: the table's own columns never shrink below a
 * readable minimum (min-width on .dt4ff-table). Once the viewport is
 * narrower than that, this wrapper scrolls horizontally instead of letting
 * the browser squeeze/wrap column content unreadably. This was the actual
 * cause of the "Date column values get cut off on narrow screens" and
 * "border looks like it's fading out" reports — without a scroll container,
 * table-layout: auto forces columns into unreadably narrow widths, and long
 * unbreakable values (like a formatted date/time) render clipped past the
 * table's own edge rather than the table simply becoming scrollable.
 */
.dt4ff-scroll-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dt4ff-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-family: Arial, sans-serif;
    color: rgb(119, 114, 130);
}

.dt4ff-table th,
.dt4ff-table td {
    padding: 10px;
    border: 1px solid #ccc;
}

.dt4ff-table th {
    background: #f4f4f4;
    text-align: left;
    color: rgb(34, 33, 33);
}

.dt4ff-label strong {
    font-weight: bold;
    display: inline-block;
    text-transform: capitalize;
    color: rgb(34, 33, 33);
}