table.display {
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    margin: 0 auto;
    border-left: 1px solid #ddd !important;
    border-top: 1px solid #ddd !important;
}

    table.display thead tr:first-child th:first-child {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    table.display th,
    table.display td {
        border: 1px solid #ddd !important;
    }

    table.display tbody td {
        padding: 3px 10px 3px 10px !important;
    }

    table.display thead th {
        text-align: left !important;
    }

    table.display thead th.sorting,
    table.display thead th.sorting_asc,
    table.display thead th.sorting_desc {
        cursor: pointer !important;
    }


    table.display tbody tr.odd > td,
    table.display tbody tr.odd > th,
    table.display tbody tr.odd > * {
        background-color: #ebf8fd;
    }

    table.display tbody tr.even > td,
    table.display tbody tr.even > th,
    table.display tbody tr.even > * {
        background-color: #fff;
    }

    table.display tbody tr:hover > td {
        background-color: #e8f5e9 !important;
        cursor: default;
    }

    table.display tr.row_selected > td,
    table.display tr.row_selected > th,
    table.display tr.odd.row_selected > * {
        background-color: #e8f5e9;
    }

.tableCellImageIcon {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    margin: 0 auto !important;
    cursor: pointer !important;
}

.pageImageIcon {
    width: 24px !important;
    height: 24px !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
    cursor: pointer !important;
}


.left-column {
    text-align: left !important;
    padding-left: 15px !important;
    vertical-align: middle !important;
}
.right-column {
    text-align: right !important;
    padding-right: 15px !important;
    vertical-align: middle !important;
}

.center-column {
    text-align: center !important;
    vertical-align: middle !important;
}

.requestTable {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #5bbd9e !important;
}

.dt-container .dt-layout-row {
    margin: 0 !important;
    padding: 0 !important;
}

.dt-container .dt-info,
.dt-container .dt-paging {
    padding: 0px 0px 0px 5px !important;
    margin: 0 !important;
}


/* Clean alignment for DataTables Responsive child rows */
table.dataTable ul.dtr-details li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 0.5em 0 !important;
    border-bottom: 1px solid #ddd;
}

    table.dataTable ul.dtr-details li .dtr-title {
        font-weight: bold;
        min-width: 180px !important; /* Adjust label width as needed */
        padding-right: 10px;
        text-align: left !important;
        float: none !important; /* Removes any float interference */
    }

    table.dataTable ul.dtr-details li .dtr-data {
        text-align: left !important;
        flex: 1; /* Fills remaining line space cleanly */
    }


    /* Reduces font size for DataTable body cells and headers */
    table.dataTable th {
        text-align: left !important;
    }
    
    table.dataTable th,
    table.dataTable td {
        font-size: 14px !important; /* Adjust to 11px or 13px to match your form fields */
        /*padding: 6px 8px;*/ /* Reduces vertical cell padding to keep rows compact */
    }

    /* Reduces font size for DataTable controls (Search, Info, Pagination) */
    .dataTables_wrapper,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 14px !important;
    }
    /* Reduces font size for inputs inside DataTable headers/filters */
    table.dataTable thead input,
    table.dataTable thead select {
        font-size: 14px !important;
        height: 28px !important;
    }

/* 1. Keep the table header cell white (same as other columns) */
table.dataTable th.dtr-control,
table.dataTable th.responsive-trigger-cell,
table.dataTable thead th:last-child {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 2. Highlight only the data row cells with the green button color */
table.dataTable tbody td.dtr-control,
table.dataTable tbody td.responsive-trigger-cell {
    background-color: #79d2b4 !important;
    text-align: center;
    cursor: pointer;
}

    /* 3. Keep the arrow icon crisp and clean */
    table.dataTable tbody td.dtr-control:before,
    table.dataTable tbody td.responsive-trigger-cell:before {
        background-color: transparent !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    /* 4. Optional hover state for data cells */
    table.dataTable tbody td.dtr-control:hover,
    table.dataTable tbody td.responsive-trigger-cell:hover {
        background-color: #79d2b4 !important;
    }