/* ==========================================================================
   BASE TABLE ELEMENTS & SHARED STYLES
   ========================================================================== */

table {
    height: 100%;
    width: 100%;
}

    table thead th {
        background-image: none !important;
        background-color: #f3f3f3 !important; /* Or whatever color matches your table */
        text-align: center !important;
        vertical-align: middle !important;
    }

        table thead th > * {
            display: inline-block !important; /* Allows them to be centered like text */
            float: none !important; /* Prevents sticking to the left */
            margin: 0 auto !important; /* Centers block-level fallback */
            width: auto; /* Prevents 100% width from hiding the center */
            text-align: center; /* Centers text INSIDE an input box */

        }

    table tbody td img {
        background-image: none !important;
        /*background-color: #f3f3f3 !important;*/ /* Or whatever color matches your table */
        text-align: center !important;
        vertical-align: middle !important;
    }

    table tbody td img > * {
        display: inline-block !important; /* Allows them to be centered like text */
        float: none !important; /* Prevents sticking to the left */
        margin: 0 auto !important; /* Centers block-level fallback */
        width: auto; /* Prevents 100% width from hiding the center */
        text-align: center; /* Centers text INSIDE an input box */
    }

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-right: 1px solid #ddd !important;
        border-bottom: 1px solid #ddd !important;
    }

    table.display tbody td {
        padding: 3px 10px 3px 10px !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 {
        background-color: #ebf8fd;
    }

        table.display tbody tr.even {
            background-color: #fff;
        }

        table.display tbody tr:hover {
            background-color: lightgray !important;
            cursor: default;
        }

    table.display tr.even.row_selected td,
    table.display tr.odd.row_selected td {
        background-color: #b0bed9;
    }

.dataTables_wrapper {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background-color: lightgray;
    clear: both;
    position: relative;
    *zoom: 1;
    zoom: 1;
}

    .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info {
        padding: 10px 10px 5px 10px;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 5px;
            border: 1px solid #aaa;
            margin: 0 2px 0 2px;
            padding: 2px 5px;
        }

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

.dtRowSelectAll {
    vertical-align: middle;
    margin: 0 auto;
}

.stickyHeaderColumn {
    position: sticky;
    left: -1px;
    z-index: 99;
    background: #f1f1f1;
}

.stickyBodyColumn {
    position: sticky;
    left: -1px;
    z-index: 99;
    background: #fff;
}

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

    /* Ensure the icon itself doesn't have a margin pushing it to the side */
    .center-column img {
        display: inline-block;
        margin: 0 auto;
        vertical-align: middle;
    }

.right-column {
    text-align: right !important;
    padding-right: 15px !important; /* Adjust if the text is too close to the border */
    vertical-align: middle !important;
}


.iconColumnWidth, table.display thead tr:first-child th:first-child {
    min-width: 24px;
    max-width: 24px;
}

.iconColumnWidthBodyonly {
    min-width: 5px;
    max-width: 5px;
}

.spacer-icon {
    visibility: hidden; /* Takes up space but is invisible */
    pointer-events: none; /* Ensures it cannot be clicked */
    width: 10px !important;
    max-width: 10px !important;
    height: 24px !important;
}