/* This CSS makes CMS record list pages have vertically stacked rows cells so they're easier to see on small devices  */
/* NOTE: You can delete or rename this file to disable this functionality. If the main-small.css doesn't exist the CMS won't try to load it  */
@media only screen and (max-width: 767px) {

    [data-table].table {
        table-layout: fixed;
        width: 100%;
        margin: auto;
    }

    /* Force table to not be like tables anymore */
    [data-table].table > thead > th,
    [data-table].table > tbody > tr > td,
    [data-table].table > tbody > tr {
        display: block;
        width: auto;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    [data-table].table > thead > tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    [data-table].table tr {
        border-bottom: 1px solid #ccc; /* Adds a border below each row */
    }

    [data-table].table > tbody > tr > td {
        border: none;
        padding-top: 1px;
        padding-bottom: 1px;
        white-space: nowrap;
        text-align: left;

        text-overflow: ellipsis;
        overflow: hidden;
    }

    [data-table].table > tbody > tr > td:before {
        display: inline-block;
        width: 25%;
        padding-right: 120px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    /* Label the data */
    [data-table].table > tbody > tr > td:before {
        content: attr(data-label);
    }

    /* Actions */
    [data-table].table > tbody > tr > td.listActions {
        white-space: normal;
    }

    /* Nested Tables: Such as in email templates */
    [data-table].table table {
    }

    [data-table].table table td {
    }

    [data-table].table table tr {
        border: none;
    }

}