table.blueTable {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: auto;
    text-align: left;
    border-collapse: collapse; /* keep grid lines aligned */
    table-layout: auto;
    white-space: nowrap;
}

    table.blueTable th,
    table.blueTable td {
        border: 1px solid #AAAAAA; /* grid lines */
        padding: 6px 12px; /* row height / spacing */
        white-space: nowrap;
    }

    table.blueTable thead {
        background: #1C6EA4;
        background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        border-bottom: 2px solid #444444;
    }
        table.blueTable thead th {
            font-size: 15px;
            font-weight: bold;
            color: #FFFFFF;
            text-align: left;
        }

    table.blueTable tfoot td {
        font-size: 14px;
    }



/* Collapsible Section */

.blueSection {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 5px;
}

    .blueSection summary {
        width: auto;
        list-style: none;
        cursor: pointer;
        user-select: none;
        padding: 6px 12px;
        border: 2px solid #1C6EA4;
        border-bottom: 2px solid #444444;
        font-size: 15px;
        font-weight: bold;
        color: #FFFFFF;
        background: #1C6EA4;
        background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
        background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    }

        /* Remove default browser arrow */
        .blueSection summary::-webkit-details-marker {
            display: none;
        }

        .blueSection summary::marker {
            content: "";
        }

        /* Custom arrow */

        .blueSection summary::before {
            content: "▶";
            display: inline-block;
            width: 18px;
            transition: transform .15s ease;
        }

    .blueSection[open] summary::before {
        content: "▼";
    }

    /* Table joins nicely with the header */

    .blueSection table.blueTable {
        margin-top: 0;
        border-top: none;
    }

        /* Optional: remove the table's top border so it merges with the header */

        .blueSection table.blueTable tbody:first-child tr:first-child td {
            border-top: none;
        }