/* Contains global css that is compiled outside of less */

.target-table {
    container-type: inline-size;
}

@container (max-width: 479px) {
    .hidden-xs {
        display: none;
    }
    .table, .table thead, .table tbody, .table tbody tr {
        display: block;
    }
    .table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .table tbody, .table thead {
        display: block;
        width: 100%;
    }
    .table tr td {
        display: block;
        border: 1px solid #ccc;
    }
    tfoot {
        display: flex;
        width: 100%;
    }
    tfoot > tr {
        width: 100%;
    }
    tfoot > tr > td:empty {
        display: none;
    }
    .table tbody > tr > td:not(.not-td):not(:empty),
    .table td:not(.not-td):not(:empty) {
        display: block;
        border: none;
        border-bottom: 1px solid #eee;
        border-left: 1px solid #eee;
        position: relative;
        padding-left: 150px;
        white-space: normal;
        text-align: left;
        min-height: 25px;
    }
    .table td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: auto;
        padding-right: 10px;
        max-width: 140px;
        word-wrap: break-word;
        text-align: left;
        font-weight: bold;
        min-height: 25px;
        content: attr(data-title);
    }
}
@container (min-width: 480px) and (max-width: 979px) {
    .hidden-sm {
        display: none;
    }
}
@container (min-width: 980px) and (max-width: 1199px)  {
    .hidden-md {
        display: none;
    }
}