/* Custom css for tables */

            .table-center {
                margin: auto;
                width: 100%;
                max-width: 800px;
                /* Adjust this value as needed */
                display: table;
            }

            .wider-column {
                width: 400px;
                /* Adjust this value as needed */
            }

            div.container {
                width: 100%;
            }

            .center-container {
                width: 95%;
                /* Adjust the width as needed */
                margin-left: 75px;
                margin-right: auto;
                text-align: center;
            }

            /* Adjust width for Entries per Page selector */
            div.dataTables_length select {
                width: 60px;
                /* Adjust as needed */
            }

            /* Style for search bar */
            input[type="search"] {
                background-color: #f8f9fa;
                /* Background color for search bar */
                border: 1px solid #7d8791;
                /* Border color for search bar */
                padding: 5px;
                /* Add padding */
                margin-left: 5px;
                /* Adjust margin as needed */
            }

            /* New row above the data table */
            .controls-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid #dee2e6;
                /* Add borders */
                padding: 5px;
                /* Add padding */
                margin-bottom: 15px;
                /* Adjust margin as needed */
            }

            /* Entries control on the left */
            div.dataTables_length {
                margin-right: 0;
                justify-content: left;
            }

            .search-bar-wrapper {
                display: flex;
                align-items: center;
            }

            .search-bar-wrapper label {
                margin-right: 10px;
                /* Adjust margin as needed */
            }

            /* Style for Feature Controls, Buttons, Filter, Pagination, and Row */
            .feature-controls,
            .feature-buttons,
            .feature-filter,
            .feature-row {
                margin: 10px 0;
                /* Adjust margin as needed */
                padding: 10px;
                /* Adjust padding as needed */
                border: 1px solid #dee2e6;
                /* Add borders */
            }

            .feature-row {
                background-color: #f8f9fa;
                /* Background color for the Feature Row */
            }

            /* CSS to style the entriesPerPage select element */
            #entriesPerPage {
                -webkit-appearance: menulist;
                -moz-appearance: menulist;
                appearance: menulist;
                width: auto;
            }

            /* styling of the  Pagination control to place it at the right side of the page */
            .feature-pagination {
                text-align: right;
                /* Align pagination controls to the right */
                margin-top: 10px;
                /* Adjust spacing from the table */
            }

            /* Button Ros */
            .controls-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
            }

            /* Adjust width for Search Bar input field */
            .dataTables_filter input {
                width: 150px;
                /* Adjust as needed */
            }

            /* Feature buttons in the center */
            div.dt-buttons {
                display: flex;
                justify-content: center;
                /* flex: 2; */
                /* Allow the buttons to take up available space */
            }

            .dt-buttons .btn {
                background-color: var(--bs-primary) !important;
                color: white !important;
                border-radius: 4px;
                padding: 5px 10px;
                font-size: 0.9rem;
                margin: 2px;
            }

            .dt-buttons .btn:hover {
                /* background-color: var(--bs-primary-dark) !important; */
                transition: background-color 0.2s ease;
            }

            div.dataTables_length {
                float: left;
            }

            div.dataTables_length select {
                width: auto !important;
                padding: 5px;
                border-radius: 4px;
                border: 1px solid #ddd;
            }

            /* Search bar on the right */
            .dataTables_filter {
                margin-left: auto;
                margin-right: 0;
                width: 150px;
            }

            div.dataTables_filter input {
                width: 150px !important;
                /* Reduce width */
                padding: 5px;
                border-radius: 4px;
                border: 1px solid #ddd;
            }

            /* Pagination control on the right */
            div.dataTables_paginate {
                margin-right: 0;
                text-align: right;
            }

            /*------- Area Repeater Table------------------------------------ */
            table#AreaRepeaterTable Table.dataTable thead th {
                background-color: var(--bs-primary);
                /* Set the desired background color */
                color: inherit;
                /* Text color for column headers */
                text-align: center;
                /* Center align the text */
            }

            /* Adjust width for AreaRepeaterTable */
            #AreaRepeaterTable {
                width: 100% !important;
                /* Set the width to 100% */
                max-width: none !important;
                /* Adjust this value as needed */
                margin: 0 auto !important;
                /* Center the table horizontally */
            }

            /* Style for column headers and cells */
            #AreaRepeaterTable th,
            #AreaRepeaterTable td {
                text-align: center;
            }

            /* Style for column headers */
            #AreaRepeaterTable th {
                background-color: var(--bs-primary) !important;
                /* Primary color for column headers */
                color: white;
                /* Text color for column headers */
            }

            /*------- Member Table----------------- */
            table#MemberTable.dataTable thead th {
                background-color: var(--bs-primary);
                /* Set the desired background color */
                color: inherit;
                /* Text color for column headers */
                text-align: center;
                /* Center align the text */
            }

            /* Style for column headers */
            #MemberTable th {
                background-color: var(--bs-primary) !important;
                /* Primary color for column headers */
                color: white;
                /* Text color for column headers */
            }

            /* Override width for #AreaRepeaterTable */
            #AreaRepeaterTable_wrapper .container {
                width: auto;
                /* Adjust as needed */
            }

            #AreaRepeaterTable_wrapper .center-container {
                width: auto;
                /* Adjust as needed */
                margin-left: auto;
                margin-right: auto;
                text-align: center;
            }

            /* Override width for #AreaRepeaterTable */
            #AreaRepeaterTable_wrapper div.container {
                width: auto;
                /* Adjust as needed */
            }

            #MemberTable th,
            #dtTable td {
                text-align: center;
            }

            /* Center the entire table */
            #MemberTable_wrapper,
            .table-container {
                margin: 0 auto;
            }

            /* Style for column headers */
            #MemberTable th {
                background-color: var(--bs-primary) !important;
                /* Primary color for column headers */
                color: inherit;
                /* Text color for column headers */
                text-align: center;
                /* Center align the text */
            }

            /*------- dtTable Table - NCS_Schedule------------------------- */

            #dtTable tbody tr.target-row {
                background-color: gold !important;
                color: black !important;
                font-weight: bold !important;
            }

            tbody #dtTable tr.target-row {
                background-color: gold !important;
                color: black !important;
                font-weight: bold !important;
            }

            /* Style for column headers */
            #dtTable th {
                background-color: var(--bs-primary) !important;
                /* Primary color for column headers */
                color: white;
                /* Text color for column headers */
                text-align: center;
                /* Center align the text */
            }

            #dtTable th,
            #dtTable td {
                text-align: center;
            }

            /* Center the entire table */
            #dtTable_wrapper,
            .table-container {
                margin: 0 auto;
            }

            /* Style for column headers */
            #dtTable th {
                background-color: var(--bs-primary) !important;
                /* Primary color for column headers */
                color: inherit;
                /* Text color for column headers */
                text-align: center;
                /* Center align the text */
            }