@media (max-width: 767.98px) {
    #datatables-reponsive thead {
        display: none !important;
    }
    #datatables-reponsive_wrapper .dataTables_scrollHead,
    #datatables-reponsive_wrapper .dataTables_scrollHeadInner,
    #datatables-reponsive_wrapper .dataTables_scrollHead table,
    #datatables-reponsive_wrapper .dataTables_scrollHead thead {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
    }
    .fixedHeader-floating,
    .fixedHeader-locked {
        display: none !important;
    }
    #datatables-reponsive,
    #datatables-reponsive tbody,
    #datatables-reponsive tr,
    #datatables-reponsive td {
        display: block;
        width: 100%;
    }
    #datatables-reponsive tr {
        border: 1px solid #d8d8d8;
        border-radius: 10px;
        margin-bottom: 12px;
        background: #fff;
        overflow: hidden;
    }
    #datatables-reponsive td {
        width: calc(100% - 24px);
        border: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 10px 12px;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: flex-start;
        text-align: right;
    }
    #datatables-reponsive td:last-child {
        border-bottom: none !important;
    }
    #datatables-reponsive td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #002863;
        flex: 0 0 35%;
        max-width: 35%;
        text-align: left;
    }
    #datatables-reponsive td>* {
        flex: 1;
        max-width: 65%;
        display: block;
    }
    #datatables-reponsive td {
        word-break: break-word;
    }
    #datatables-reponsive td.text-center,
    #datatables-reponsive td.text-end {
        text-align: right !important;
    }
    #datatables-reponsive td b {
        display: contents;
    }
    #datatables-reponsive td .badge-success-light,
    #datatables-reponsive td .badge-primary-light,
    #datatables-reponsive td .badge-danger-light,
    #datatables-reponsive td .btn,
    #datatables-reponsive td .btn-group,
    #datatables-reponsive td .dropdown-menu {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        /* display: inline-block !important; */
    }
    #datatables-reponsive td[data-label="Status"] {
        align-items: center;
    }
    #datatables-reponsive_wrapper .dataTables_length {
        margin-bottom: 10px;
    }
    #datatables-reponsive_wrapper .dataTables_filter {
        margin-bottom: 12px;
    }
    #datatables-reponsive_wrapper .dataTables_length label,
    #datatables-reponsive_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
}