/* CSS for smaller view spaces */
@media screen and (max-width: 768px) {
    /*
    *   Vertical table on small screens
    *   Taken from https://codepen.io/dprantzalos/pen/ojabgO
    */
    /* hide table headings */
    .jim-table-responsive table thead {
        display: none;
    }

    /* treat rows like divs */
    .jim-table-responsive table tr {
        display: block;
        border-top: 2px solid lightgray; /* separate row data with thicker line */
        margin-top: 5px;
    }

    /* treat columns like divs */
    .jim-table-responsive table td {
        display: block;
        text-align: right; /* text to right */
        min-height: 2.5rem;
    }

    /* this part is ugly, but necessary to show label on left */
    .jim-table-responsive table td:before {
        content: attr(data-label);
        float: left; /* label to left */
        font-weight: 700;
    }
}