 #professionFilter {
            font-size: 1px !important;
        }

        .dropdown-content {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-left: 39px;
        }

        .filter-options {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .filter-btn {
            display: inline-block;
            padding: 5px 10px;
            text-decoration: none;
            color: black;
            cursor: pointer;
        }

        .filter-btn:hover {
            font-weight: bold;
            /* Make text bold on hover */
        }


        .reset-filter {
            margin-top: 5px;
            display: none !important;
        }

        .filter-title {
            font-size: 22px;
            margin-bottom: 15px;
            text-align: center;
        }

        .filter-options a {
            display: block;
            text-decoration: none;
            padding: 0px 0;
            text-align: center;
        }

        .filter-options a:hover {
            color: #900;
            font-weight: bold;
        }

        .filter-selected {
            text-align: center;
            background: rgb(192, 186, 192);
            border: none;
            border-radius: 10px;
            padding: 5px 15px;
            margin-right: 5px;
            cursor: pointer;

        }

        .filter-selected-active {
            color: white;
            text-align: center;
            background: rgb(107, 102, 107);
            border: none;
            border-radius: 10px;
            padding: 5px 15px;
            margin-right: 5px;
            cursor: pointer;

        }




        .filter-card {
            box-shadow: 2px 2px 5px 0 rgb(145, 142, 144);

            background: #fff;
            height: 60px;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            align-items: center;
            margin-bottom: 7px;
            padding-bottom: 7px;

        }

        .btn-filter {
            background: #ddd;
            border: none;
            border-radius: 20px;
            padding: 5px 15px;
            margin-right: 5px;
            cursor: pointer;
        }

        body {
            background-color: #f9f9f9;
        }

        .sidebar {
            background: #fff;
            padding: 15px;
            margin-right: 20px !important;
            border-radius: 10px;
            box-shadow: 1px 1px 3px 0 rgb(90, 88, 89);
            height: 85vh;
            overflow-y: auto;
            width: 22% !important;
        }

        .row {
            padding-left: 100px !important;
            /* Adjust as needed */
            padding-right: 100px !important;
        }

        .icon-circle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            color: white;
            font-size: 16px;
        }

        .btn-matches {
            background-color: #ff66b2;
            color: white;
            border-radius: 20px;
            padding: 10px 20px;
        }

        .reset-filter {
            min-width: auto;
            /* Ensures it takes only necessary width */
            width: fit-content;
            /* Shrinks to content size */
            color: white !important;
            /* Ensures text remains white */
            font-size: 11px !important;
        }

        .reset-filter:hover,
        .reset-filter:focus,
        .reset-filter:active {
            /* Keeps the same blue color */
            color: #0d6efd !important;
            /* Ensures text remains white */
            box-shadow: none !important;
            /* Removes hover effects */
        }

        #filterDropdown {
            padding-left: 20px;
        }
        body {
            background-color: #f9f9f9;
        }

        .sidebar {
            background: #fff;
            padding: 15px;
            margin-right: 20px !important;
            border-radius: 10px;
            box-shadow: 1px 1px 3px 0 rgb(90, 88, 89);
            height: 85vh;
            overflow-y: auto;
            width: 20% !important;
        }


        /* Custom scrollbar */
        .sidebar::-webkit-scrollbar {
            width: 5px;
        }

        .sidebar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .sidebar::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 10px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .sidebar a {
            text-decoration: none;
            color: rgb(138, 21, 95);
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 10px;
            /* font-size: 13px; */
        }

        .sidebar a:hover {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }

        .icon-circle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            background-color: rgb(139 23 96);
            border-radius: 50%;
            color: white;
            font-size: 16px;
        }

        .btn-matches {
            background-color: #ff66b2;
            color: white;
            border-radius: 20px;
            padding: 10px 20px;
        }

        .user-card {
            background: #fff;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            box-shadow: 2px 2px 5px 0 rgb(99, 94, 98);
        }

        .user-card img {
            border-radius: 10%;
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }

        .accordion-button:not(.collapsed) {
            background-color: white;
            color: #000;
        }

        .accordion-button:focus,
        .accordion-button:hover {
            background-color: white !important;
        }

        .accordion-button:not(.collapsed) {
            background-color: white !important;
            color: #000 !important;
        }

        .sidebar a.activeMenu {
            /* background-color: <?php echo $extra_color; ?> !important;
            color: white; */
            font-weight: bold;
            border-radius: 5px;
        }
        /* Remove the top and bottom borders */
        .table,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_paginate {
            border: none !important;
        }

        /* Remove the background color of the table */
        .table,
        .dataTables_wrapper {
            background-color: transparent !important;
        }

        /* Optional: Remove borders around table cells */
        .dataTable,
        .dataTable th,
        .dataTable td {
            border: none !important;
        }

        /* Remove any border and background styles in pagination */
        .dataTables_paginate a {
            border: none !important;
            background-color: transparent !important;
        }

        /* Remove background color in the length change dropdown */
        .dataTables_length select {
            background-color: transparent !important;
        }
        .tooltip-inner {
        background-color: #d6d6d6 !important; /* Light Grey */
        color: #000 !important; /* Black Text */
    }
    .tooltip.bs-tooltip-top .tooltip-arrow::before {
        border-top-color: #d6d6d6 !important;
    }
    .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
        border-bottom-color: #d6d6d6 !important;
    }
    .tooltip.bs-tooltip-start .tooltip-arrow::before {
        border-left-color: #d6d6d6 !important;
    }
    .tooltip.bs-tooltip-end .tooltip-arrow::before {
        border-right-color: #d6d6d6 !important;
    }
        .d-flex .align-items-center h6 {
            font-size: 23px;
        }

        #userTable {
            font-size: 20px;
        }

        