.tbdatagrid-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    overflow: hidden;
}

    .tbdatagrid-wrapper .div-body {
        flex: 1 1 auto;
        min-width: 100%;
        width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        position: relative;
    }
    .tbdatagrid-wrapper.with-footer .div-body {
        overflow-x: hidden;
    }

    .tbdatagrid-wrapper .div-footer {
        flex: 0 0 auto;
        min-width: 100%;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .tbdatagrid-wrapper table {
        table-layout: fixed;
        border-collapse: collapse;
        min-width: 100%;
        width: 100%;
        position: relative;
        margin-bottom: 0px !important;
    }

    .tbdatagrid-wrapper th,
    .tbdatagrid-wrapper td {
        padding: 0px 5px 0px 5px;
        text-align: left;
        border: 1px solid #dee2e6; /*#ddd;*/
        white-space: nowrap;
        overflow: hidden;
    }
    .tbdatagrid-wrapper .editing-row td {
        padding: 0px 0px 0px 0px !important;
    }
    .tbdatagrid-wrapper.tbdatagriddtl td {
        overflow: hidden;
    }
    .tbdatagrid-wrapper thead th {
        background-color: #74beb7 !important;
        color: white;
        position: sticky;
        top: 0;
        z-index: 3;
        border-top-width: 0px;
    }

    .tbdatagrid-wrapper tfoot th {
        background-color:  #a2d6d1 !important;  /*#74beb7*/
        color: white;
        aaposition: sticky; /* no need because footer is another table with tfoot*/
        aabottom: 0; /* Fixes the header at the top */
        z-index: 1;
    }

    .tbdatagrid-wrapper tr.active td {
        background-color: lightgray !important;
        color: #000 !important;
    }

    .tbdatagrid-wrapper tr.redforecolor td {
        color: brown !important;
    }


    /* Fix the first column */
    .tbdatagrid-wrapper:not(.nofreecolumn) tbody td:first-child /*td:nth-child(-n+1) */ {
        position: sticky;
        left: 0;
        background-color: #6db2ad !important;
        z-index: 1;
    }

    .tbdatagrid-wrapper:not(.nofreecolumn) thead th:first-child /*th:nth-child(-n+1)*/ {
        position: sticky;
        left: 0;
        background-color: #6db2ad !important;
        z-index: 5;
    }

    .tbdatagrid-wrapper:not(.nofreecolumn) tfoot th:first-child /*th:nth-child(-n+1)*/ {
        position: sticky;
        left: 0;
        background-color: #6db2ad !important;
        z-index: 1;
    }

    .tbdatagrid-wrapper tbody tr.editing-row td:first-child /*td:nth-child(-n+1)*/ {
        z-index: 2; /* higher than normal rows */
    }


    /* Fix the last column */
    .tbdatagrid-wrapper.tbdatagriddtl tbody td:last-child {
        position: sticky;
        right: 0;
        background-color: #6db2ad !important;
        z-index: 1;
    }

    .tbdatagrid-wrapper.tbdatagriddtl thead th:last-child {
        position: sticky;
        right: 0;
        background-color: #6db2ad !important;        
        z-index: 5;
    }

    .tbdatagrid-wrapper.tbdatagriddtl tfoot th:last-child {
        position: sticky;
        right: 0;
        background-color: #6db2ad !important;
        z-index: 1;
    }

    .tbdatagrid-wrapper.tbdatagriddtl tbody tr.editing-row td:last-child {
        z-index: 2; /* higher than normal rows */
    }
    
    .tbdatagrid-wrapper.tbdatagriddtl tbody tr.editing-row td:not(:last-child):focus-within {
        background-color: yellow !important;
    }
    .tbdatagrid-wrapper.tbdatagriddtl tbody tr.editing-row td:first-child {
        background-color: unset !important;
    }
    .tbdatagrid-wrapper.tbdatagriddtl tbody tr.editing-row td {
        border-color: #007bff !important; /* Blue border */
    }




    .editing-row {
        border: 2px solid #007bff !important; /* Blue border */
    }