/* hide the header text until the screen size is less than 767px */
.respond-header {
    display: none;
}

/* the table switches to a card view based on the max media query width, otherwise displays as a 'normal' table */
@media only screen and (max-width: 767px)  { /* change media query width to suit needs */

    /* force table markup to behave like divs
    this stacks the table cells to mimic a card view
    */
    table.respond table,
    table.respond thead,
    table.respond tbody,
    table.respond th,
    table.respond td,
    table.respond tr {
        display: block;
        text-align: left;
    }

    /* hide table headers (but not display: none;, for accessibility) */
    table.respond thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.respond tr {
        border: 1px solid #ccc;
    }

    table.respond td {
        /* behave  like a "row" */
        position: relative;
        font-weight: normal;
    }

    table.respond td.bookjob-cell {
        /* behave  like a "row" */
        position: relative;
        font-weight: normal;
        margin-bottom: 70px; /* make sure the content fits within the boundaries */
    }

    /* when the table cells are stacked, the header text is added in beside the data in responsive columns */
    .respond-header, .respond-cell {
        position: relative;
        min-height: 1px;
    }

    .respond-header, .respond-cell {
        display: inline-block;
    }

    .respond-header {
        font-weight: bold;
        width: calc(40% - 8px);
    }

    .respond-cell {
        width: calc(60% - 8px);
    }

    /* hide the jobs list row banner */
    .hide-row {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
}