@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

    #TransactionTable_wrapper table,
    #TransactionTable_wrapper thead,
    #TransactionTable_wrapper tbody,
    #TransactionTable_wrapper th,
    #TransactionTable_wrapper td:not(.PaidStatus, .SourceUID),
    #TransactionTable_wrapper tr,
    #ReporDetailstTable_wrapper table,
    #ReporDetailstTable_wrapper thead,
    #ReporDetailstTable_wrapper tbody,
    #ReporDetailstTable_wrapper th,
    #ReporDetailstTable_wrapper td,
    #ReporDetailstTable_wrapper tr,
    .table-mobile table,
    .table-mobile thead,
    .table-mobile tbody,
    .table-mobile th,
    .table-mobile td,
    .table-mobile tr {
        display: block;
        clear: both;
    }

    #TransactionTable_wrapper td:not(.PaidStatus, .SourceUID),
    #ReporDetailstTable_wrapper td {
        display: flex;
        align-items: center;
        position: relative;
    }

    #TransactionTable_wrapper td.dataTables_empty,
    #ReporDetailstTable_wrapper td.dataTables_empty {
        display: none;
    }

    #TransactionTable_wrapper tr,
    #ReporDetailstTable_wrapper tr {
        border: 1px solid green;
        margin: 1rem;
    }

    #TransactionTable_wrapper th,
    #ReporDetailstTable_wrapper th {
        display: none;
    }

    #TransactionTable_wrapper td[data-th]:before,
    #ReporDetailstTable_wrapper td[data-th]:before {
        content: attr(data-th)':';
        float: left;
        font-weight: bold;
        padding-right: 1rem;
    }
    #ReporDetailstTable{
        width:auto!important;
    }
}