{"id":181274,"date":"2024-12-11T16:39:36","date_gmt":"2024-12-11T21:39:36","guid":{"rendered":"https:\/\/sandbox.vocalmeet.systems\/?page_id=181274"},"modified":"2026-08-10T09:14:16","modified_gmt":"2026-08-10T13:14:16","slug":"public-directory","status":"publish","type":"page","link":"https:\/\/sandbox.vocalmeet.systems\/public-directory\/","title":{"rendered":"Public Directory"},"content":{"rendered":"\n<h2>User Directory<\/h2>        \n            <!-- Member Filters Section -->\n                <h3>User Filters<\/h3>\n                <form id=\"member-directory-form\">\n                                        <!-- Layout 1: Column-based layout -->\n                        <!-- Fixed Fields Column -->\n                            <h4>Basic Information<\/h4>\n                                        <label for=\"allow-custom-id\">\n                                            Account ID                                        <\/label>\n                                        <input type=\"text\"\n                                               id=\"allow-custom-id\"\n                                               name=\"allow-custom-id\"\n                                               placeholder=\"Account ID\" \/>\n                                        <label for=\"allow-email\">\n                                            Email Address                                        <\/label>\n                                        <input type=\"email\"\n                                               id=\"allow-email\"\n                                               name=\"allow-email\"\n                                               placeholder=\"Email Address\" \/>\n                                        <label for=\"allow-first-name\">\n                                            First Name                                        <\/label>\n                                        <input type=\"text\"\n                                               id=\"allow-first-name\"\n                                               name=\"allow-first-name\"\n                                               placeholder=\"First Name\" \/>\n                                        <label for=\"allow-last-name\">\n                                            Last Name                                        <\/label>\n                                        <input type=\"text\"\n                                               id=\"allow-last-name\"\n                                               name=\"allow-last-name\"\n                                               placeholder=\"Last Name\" \/>\n                                                <!-- General Fields Column -->\n                            <h4>General Information<\/h4>\n                            <input type=\"hidden\" id=\"nonce_general\" name=\"nonce_general\" value=\"6e2c1dec25\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/?page_id=181274&#038;fl_builder\" \/><label for=\"reg_user_group\">User Group<\/label><fieldset  data-taxonomy-slugs=\"[&quot;user_category&quot;]\"><label><input value=\"82\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>12<\/label><label><input value=\"134\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Board Member<\/label><label><input value=\"74\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Department &#8211; Business<\/label><label><input value=\"90\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Department &#8211; R&amp;D<\/label><label><input value=\"73\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Department &#8211; Tech<\/label><label><input value=\"75\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Team &#8211; Development<\/label><label><input value=\"76\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Team &#8211; Marketing<\/label><label><input value=\"77\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Team &#8211; Product<\/label><label><input value=\"81\" type=\"checkbox\" name=\"reg_user_group[]\" aria-labelledby=\"reg_user_group-label\"\/>Team &#8211; Sale<\/label><\/fieldset><!-- .rwmb-column --><!-- .rwmb-row -->                        \n                        <button type=\"submit\">Search<\/button>\n                <\/form>\n            <style>\n                .member-filters-section {\n                    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n                    border-radius: 12px;\n                    padding: 30px;\n                    margin-bottom: 30px;\n                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\n                    border: 1px solid #e5e8eb;\n                }\n                .member-filters-section h3 {\n                    color: #1d2327;\n                    font-size: 1.5em;\n                    font-weight: 600;\n                    margin: 0 0 25px 0;\n                    text-align: center;\n                    position: relative;\n                    padding-bottom: 15px;\n                }\n                .member-filters-section h3::after {\n                    content: '';\n                    position: absolute;\n                    bottom: 0;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    width: 60px;\n                    height: 3px;\n                    background: linear-gradient(90deg, #2271b1, #135e96);\n                    border-radius: 2px;\n                }\n                .member-filters-section form {\n                    display: flex;\n                    flex-direction: column;\n                    gap: 25px;\n                }\n                \/* Layout 1: Enhanced Column-based layout *\/\n                .filters-container.layout-1 {\n                    display: grid;\n                    grid-template-columns: repeat(2, 1fr);\n                    gap: 25px;\n                }\n                .filters-container.layout-1 .fields-column {\n                    display: flex;\n                    flex-direction: column;\n                    gap: 18px;\n                    padding: 25px;\n                    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n                    border-radius: 10px;\n                    border: 1px solid #e1e5e9;\n                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n                    transition: all 0.3s ease;\n                    position: relative;\n                    overflow: hidden;\n                }\n                .filters-container.layout-1 .fields-column::before {\n                    content: '';\n                    position: absolute;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                    height: 4px;\n                    background: linear-gradient(90deg, #2271b1, #135e96);\n                }\n                .filters-container.layout-1 .fields-column:hover {\n                    transform: translateY(-2px);\n                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n                }\n                .filters-container.layout-1 .fields-column h4 {\n                    margin: 0 0 20px 0;\n                    padding-bottom: 12px;\n                    border-bottom: 2px solid #e5e8eb;\n                    color: #1d2327;\n                    font-size: 1.1em;\n                    font-weight: 600;\n                    display: flex;\n                    align-items: center;\n                    gap: 8px;\n                }\n                .filters-container.layout-1 .fixed-fields h4::before {\n                    content: '\ud83d\udc64';\n                    font-size: 1.2em;\n                }\n                .filters-container.layout-1 .general-fields h4::before {\n                    content: '\ud83d\udccb';\n                    font-size: 1.2em;\n                }\n                .filters-container.layout-1 .organization-fields h4::before {\n                    content: '\ud83c\udfe2';\n                    font-size: 1.2em;\n                }\n                \/* Layout 2: Enhanced Stacked layout *\/\n                .filters-container.layout-2 {\n                    display: flex;\n                    flex-direction: column;\n                    gap: 20px;\n                }\n                .filters-container.layout-2 .fields-section {\n                    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n                    border-radius: 12px;\n                    padding: 25px;\n                    border-left: 5px solid #2271b1;\n                    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);\n                    transition: all 0.3s ease;\n                    position: relative;\n                }\n                .filters-container.layout-2 .fields-section:hover {\n                    border-left-color: #135e96;\n                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);\n                }\n                .filters-container.layout-2 .fields-section h4 {\n                    margin: 0 0 20px 0;\n                    color: #1d2327;\n                    font-size: 1.3em;\n                    font-weight: 600;\n                    padding-bottom: 12px;\n                    border-bottom: 2px solid #e5e8eb;\n                    display: flex;\n                    align-items: center;\n                    gap: 10px;\n                }\n                .filters-container.layout-2 .fixed-fields-section h4::before {\n                    content: '\ud83d\udc64';\n                    font-size: 1.3em;\n                }\n                .filters-container.layout-2 .general-fields-section h4::before {\n                    content: '\ud83d\udccb';\n                    font-size: 1.3em;\n                }\n                .filters-container.layout-2 .organization-fields-section h4::before {\n                    content: '\ud83c\udfe2';\n                    font-size: 1.3em;\n                }\n                .filters-container.layout-2 .fields-row {\n                    display: grid;\n                    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n                    gap: 20px;\n                    align-items: start;\n                }\n                \/* Enhanced form field styles *\/\n                .form-field {\n                    display: flex;\n                    flex-direction: column;\n                    gap: 8px;\n                    transition: all 0.2s ease;\n                }\n                .form-field label {\n                    font-weight: 500;\n                    color: #374151;\n                    font-size: 14px;\n                    margin-bottom: 4px;\n                    transition: color 0.2s ease;\n                }\n                .form-field input,\n                .form-field select {\n                    padding: 12px 16px;\n                    border: 2px solid #e5e7eb;\n                    border-radius: 8px;\n                    background: #ffffff;\n                    font-size: 14px;\n                    transition: all 0.3s ease;\n                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n                    width: 100%;\n                    max-width: 100%;\n                }\n                .form-field .select2-container {\n                    width: 100% !important;\n                }\n                .form-field input:focus,\n                .form-field select:focus {\n                    border-color: #2271b1;\n                    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);\n                    outline: none;\n                    transform: translateY(-1px);\n                }\n                .form-field input:hover,\n                .form-field select:hover {\n                    border-color: #9ca3af;\n                }\n                .form-field:focus-within label {\n                    color: #2271b1;\n                    font-weight: 600;\n                }\n                \/* Enhanced search button *\/\n                .search-button-container {\n                    display: flex;\n                    justify-content: center;\n                    margin-top: 30px;\n                    padding-top: 25px;\n                    border-top: 2px solid #e5e8eb;\n                    position: relative;\n                }\n                .search-button-container::before {\n                    content: '';\n                    position: absolute;\n                    top: -1px;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    width: 100px;\n                    height: 2px;\n                    background: linear-gradient(90deg, #2271b1, #135e96);\n                }\n                .search-button {\n                    padding: 14px 32px;\n                    background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);\n                    color: #ffffff;\n                    border: none;\n                    border-radius: 8px;\n                    cursor: pointer;\n                    font-weight: 600;\n                    font-size: 16px;\n                    transition: all 0.3s ease;\n                    box-shadow: 0 4px 6px rgba(34, 113, 177, 0.25);\n                    position: relative;\n                    overflow: hidden;\n                    min-width: 140px;\n                }\n                .search-button::before {\n                    content: '';\n                    position: absolute;\n                    top: 0;\n                    left: -100%;\n                    width: 100%;\n                    height: 100%;\n                    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n                    transition: left 0.5s ease;\n                }\n                .search-button:hover {\n                    background: linear-gradient(135deg, #1e5a8a 0%, #0f4c75 100%);\n                    transform: translateY(-2px);\n                    box-shadow: 0 6px 12px rgba(34, 113, 177, 0.35);\n                }\n                .search-button:hover::before {\n                    left: 100%;\n                }\n                .search-button:active {\n                    transform: translateY(0);\n                    box-shadow: 0 2px 4px rgba(34, 113, 177, 0.25);\n                }\n                \/* Loading state for search button *\/\n                .search-button.loading {\n                    pointer-events: none;\n                    opacity: 0.7;\n                }\n                .search-button.loading::after {\n                    content: '';\n                    position: absolute;\n                    width: 16px;\n                    height: 16px;\n                    margin: auto;\n                    border: 2px solid transparent;\n                    border-top-color: #ffffff;\n                    border-radius: 50%;\n                    animation: spin 1s linear infinite;\n                }\n                @keyframes spin {\n                    0% { transform: rotate(0deg); }\n                    100% { transform: rotate(360deg); }\n                }\n                \/* Enhanced responsive styles *\/\n                @media (max-width: 1024px) {\n                    .member-filters-section {\n                        padding: 25px 20px;\n                    }\n                    .filters-container.layout-1 {\n                        grid-template-columns: repeat(2, 1fr);\n                        gap: 20px;\n                    }\n                    .filters-container.layout-1 .fields-column {\n                        padding: 20px;\n                    }\n                    .filters-container.layout-2 .fields-row {\n                        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n                        gap: 16px;\n                    }\n                    .filters-container.layout-2 .fields-section {\n                        padding: 20px;\n                    }\n                }\n                @media (max-width: 768px) {\n                    .member-filters-section {\n                        padding: 20px 15px;\n                        margin-bottom: 20px;\n                    }\n                    .member-filters-section h3 {\n                        font-size: 1.3em;\n                    }\n                    .filters-container.layout-1 {\n                        grid-template-columns: 1fr;\n                        gap: 16px;\n                    }\n                    .filters-container.layout-1 .fields-column {\n                        padding: 18px;\n                    }\n                    .filters-container.layout-2 .fields-row {\n                        grid-template-columns: 1fr;\n                        gap: 14px;\n                    }\n                    .filters-container.layout-2 .fields-section {\n                        padding: 18px;\n                    }\n                    .form-field input {\n                        padding: 10px 14px;\n                    }\n                    .search-button {\n                        padding: 12px 28px;\n                        font-size: 15px;\n                        width: 100%;\n                        max-width: 200px;\n                    }\n                }\n                @media (max-width: 480px) {\n                    .member-filters-section {\n                        padding: 15px 10px;\n                    }\n                    .filters-container.layout-1 .fields-column,\n                    .filters-container.layout-2 .fields-section {\n                        padding: 15px;\n                    }\n                    .form-field input {\n                        padding: 9px 12px;\n                        font-size: 13px;\n                    }\n                    .search-button {\n                        padding: 10px 24px;\n                        font-size: 14px;\n                    }\n                }\n            <\/style>\n            <!-- List of Members Section -->\n                <h3>List of Users<\/h3>\n        <style>\n            \/* Enhanced Member List Section *\/\n            .member-list-section {\n                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n                border-radius: 12px;\n                padding: 30px;\n                margin-top: 30px;\n                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\n                border: 1px solid #e5e8eb;\n            }\n            .member-list-section h3 {\n                color: #1d2327;\n                font-size: 1.5em;\n                font-weight: 600;\n                margin: 0 0 25px 0;\n                text-align: center;\n                position: relative;\n                padding-bottom: 15px;\n            }\n            .member-list-section h3::after {\n                content: '';\n                position: absolute;\n                bottom: 0;\n                left: 50%;\n                transform: translateX(-50%);\n                width: 60px;\n                height: 3px;\n                background: linear-gradient(90deg, #2271b1, #135e96);\n                border-radius: 2px;\n            }\n            \/* Enhanced member grid and cards *\/\n            .member-grid {\n                display: grid;\n                grid-gap: 25px;\n                margin: 25px 0;\n            }\n            .member-card {\n                display: flex;\n                border: 1px solid #e1e5e9;\n                padding: 25px;\n                border-radius: 12px;\n                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);\n                transition: all 0.3s ease;\n                position: relative;\n                overflow: hidden;\n            }\n            .member-card::before {\n                content: '';\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                height: 4px;\n                background: linear-gradient(90deg, #2271b1, #135e96);\n            }\n            .member-card:hover {\n                transform: translateY(-3px);\n                box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);\n            }\n            .member-photo {\n                width: 100px;\n                height: 100px;\n                margin-right: 25px;\n                border-radius: 10px;\n                overflow: hidden;\n                background: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);\n                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n                transition: all 0.3s ease;\n            }\n            .member-photo:hover {\n                transform: scale(1.05);\n            }\n            .member-photo img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                transition: all 0.3s ease;\n            }\n            .member-photo img:hover {\n                opacity: 0.9;\n            }\n            .member-info {\n                flex: 1;\n            }\n            .member-name {\n                font-size: 1.3em;\n                font-weight: 700;\n                margin-bottom: 8px;\n                color: #2271b1;\n                transition: color 0.2s ease;\n            }\n            .member-name a {\n                color: #2271b1;\n                text-decoration: none;\n                transition: all 0.2s ease;\n                position: relative;\n            }\n            .member-name a::after {\n                content: '';\n                position: absolute;\n                width: 0;\n                height: 2px;\n                bottom: -2px;\n                left: 0;\n                background: linear-gradient(90deg, #2271b1, #135e96);\n                transition: width 0.3s ease;\n            }\n            .member-name a:hover {\n                color: #135e96;\n            }\n            .member-name a:hover::after {\n                width: 100%;\n            }\n            .member-status {\n                display: inline-block;\n                padding: 6px 12px;\n                background: linear-gradient(135deg, #e8f5e9 0%, #d4edda 100%);\n                color: #2e7d32;\n                border-radius: 6px;\n                font-size: 0.9em;\n                font-weight: 500;\n                margin: 8px 0;\n                border: 1px solid #c3e6cb;\n                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n            }\n            .member-details {\n                margin-top: 15px;\n            }\n            .member-field {\n                margin-bottom: 8px;\n                color: #374151;\n                font-size: 14px;\n                line-height: 1.5;\n            }\n            .member-field .field-label {\n                color: #6b7280;\n                font-weight: 500;\n            }\n            .member-field .field-value {\n                color: #1f2937;\n                font-weight: 400;\n            }\n            .member-contact {\n                margin-top: 15px;\n                padding-top: 12px;\n                border-top: 1px solid #e5e7eb;\n            }\n            .member-contact a {\n                color: #2271b1;\n                text-decoration: none;\n                font-weight: 500;\n                transition: all 0.2s ease;\n                display: inline-flex;\n                align-items: center;\n                gap: 6px;\n            }\n            .member-contact a::before {\n                content: '\u2709\ufe0f';\n                font-size: 1.1em;\n            }\n            .member-contact a:hover {\n                color: #135e96;\n                text-decoration: underline;\n            }\n            \/* Layout 2: Compact List Style *\/\n            .member-list-layout-2 {\n                display: flex;\n                flex-direction: column;\n                gap: 15px;\n                margin: 25px 0;\n            }\n            .member-row-layout-2 {\n                display: flex;\n                align-items: flex-start;\n                padding: 20px;\n                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n                border: 1px solid #e1e5e9;\n                border-radius: 10px;\n                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);\n                transition: all 0.3s ease;\n                position: relative;\n                overflow: hidden;\n            }\n            .member-row-layout-2::before {\n                content: '';\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                height: 3px;\n                background: linear-gradient(90deg, #2271b1, #135e96);\n            }\n            .member-row-layout-2:hover {\n                transform: translateY(-2px);\n                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n                border-color: #2271b1;\n            }\n            .member-basic-info {\n                display: flex;\n                align-items: flex-start;\n                gap: 15px;\n                min-width: 280px;\n                flex-shrink: 0;\n            }\n            .member-photo-small {\n                width: 60px;\n                height: 60px;\n                border-radius: 8px;\n                overflow: hidden;\n                background: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);\n                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n                transition: all 0.3s ease;\n                flex-shrink: 0;\n            }\n            .member-photo-small:hover {\n                transform: scale(1.05);\n            }\n            .member-photo-small img {\n                width: 100%;\n                height: 100%;\n                object-fit: cover;\n                transition: all 0.3s ease;\n            }\n            .member-photo-small a {\n                display: block;\n                width: 100%;\n                height: 100%;\n            }\n            .member-photo-small a:hover img {\n                opacity: 0.9;\n            }\n            .member-primary-details {\n                flex: 1;\n                min-width: 0;\n            }\n            .member-name-compact {\n                font-size: 1.1em;\n                font-weight: 600;\n                margin: 0 0 6px 0;\n                color: #2271b1;\n                line-height: 1.3;\n            }\n            .member-name-compact a {\n                color: #2271b1;\n                text-decoration: none;\n                transition: all 0.2s ease;\n                position: relative;\n            }\n            .member-name-compact a::after {\n                content: '';\n                position: absolute;\n                width: 0;\n                height: 2px;\n                bottom: -1px;\n                left: 0;\n                background: linear-gradient(90deg, #2271b1, #135e96);\n                transition: width 0.3s ease;\n            }\n            .member-name-compact a:hover {\n                color: #135e96;\n            }\n            .member-name-compact a:hover::after {\n                width: 100%;\n            }\n            .member-email-compact {\n                font-size: 0.9em;\n                margin-bottom: 4px;\n            }\n            .member-email-compact a {\n                color: #6b7280;\n                text-decoration: none;\n                transition: all 0.2s ease;\n                display: inline-flex;\n                align-items: center;\n                gap: 4px;\n            }\n            .member-email-compact a::before {\n                content: '\u2709\ufe0f';\n                font-size: 0.9em;\n            }\n            .member-email-compact a:hover {\n                color: #2271b1;\n                text-decoration: underline;\n            }\n            .member-id-compact {\n                font-size: 0.85em;\n                color: #9ca3af;\n                font-weight: 500;\n            }\n            .member-additional-fields {\n                flex: 1;\n                margin-left: 20px;\n                min-width: 0;\n            }\n            .compact-fields-grid {\n                display: grid;\n                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n                gap: 12px;\n                align-items: start;\n            }\n            .compact-field {\n                background: rgba(255, 255, 255, 0.7);\n                padding: 8px 12px;\n                border-radius: 6px;\n                border: 1px solid #e5e7eb;\n                font-size: 0.9em;\n                line-height: 1.4;\n                transition: all 0.2s ease;\n            }\n            .compact-field:hover {\n                background: rgba(255, 255, 255, 0.9);\n                border-color: #d1d5db;\n                transform: translateY(-1px);\n            }\n            .compact-field-label {\n                color: #6b7280;\n                font-weight: 500;\n                display: inline-block;\n                margin-right: 4px;\n            }\n            .compact-field-value {\n                color: #1f2937;\n                font-weight: 400;\n                word-break: break-word;\n            }\n            \/* Enhanced pagination *\/\n            .member-pagination {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                margin: 30px 0 20px 0;\n                gap: 8px;\n                flex-wrap: wrap;\n            }\n            \/* Member Results Summary *\/\n            .member-results-summary {\n                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n                border: 1px solid #e5e8eb;\n                border-radius: 10px;\n                padding: 20px;\n                margin: 25px 0;\n                text-align: center;\n                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n                position: relative;\n                overflow: hidden;\n            }\n            .member-results-summary::before {\n                content: '';\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                height: 3px;\n                background: linear-gradient(90deg, #2271b1, #135e96);\n            }\n            .member-results-summary .results-count {\n                margin: 0;\n                font-size: 1.1em;\n                font-weight: 600;\n                color: #1d2327;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                gap: 8px;\n                flex-wrap: wrap;\n            }\n            .member-results-summary .results-count::before {\n                content: '\ud83d\udc65';\n                font-size: 1.3em;\n            }\n            .member-results-summary .results-count strong {\n                color: #2271b1;\n                font-weight: 700;\n            }\n            .member-results-summary .results-count .total-count {\n                background: linear-gradient(135deg, #2271b1, #135e96);\n                color: #ffffff;\n                padding: 4px 12px;\n                border-radius: 20px;\n                font-size: 0.9em;\n                font-weight: 600;\n                box-shadow: 0 2px 4px rgba(34, 113, 177, 0.2);\n            }\n            .member-pagination .page-number {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                min-width: 40px;\n                height: 40px;\n                padding: 0 8px;\n                margin: 0 2px;\n                border: 2px solid #e5e7eb;\n                border-radius: 8px;\n                background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n                color: #2271b1;\n                text-decoration: none;\n                font-size: 14px;\n                font-weight: 500;\n                transition: all 0.3s ease;\n                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n            }\n            .member-pagination .page-number:hover {\n                background: linear-gradient(135deg, #f0f0f1 0%, #e9ecef 100%);\n                border-color: #2271b1;\n                transform: translateY(-1px);\n                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n            }\n            .member-pagination .page-number.current {\n                background: linear-gradient(135deg, #2271b1 0%, #135e96 100%);\n                border-color: #2271b1;\n                color: #ffffff;\n                font-weight: 600;\n                box-shadow: 0 3px 8px rgba(34, 113, 177, 0.3);\n            }\n            .member-pagination .page-number.disabled {\n                opacity: 0.4;\n                pointer-events: none;\n                background: #f8f9fa;\n                color: #9ca3af;\n            }\n            \/* Loading state *\/\n            #member-results .loading-state {\n                text-align: center;\n                padding: 40px 20px;\n                color: #6b7280;\n                font-size: 16px;\n            }\n            #member-results .loading-state::before {\n                content: '';\n                display: inline-block;\n                width: 20px;\n                height: 20px;\n                margin-right: 10px;\n                border: 2px solid #e5e7eb;\n                border-top-color: #2271b1;\n                border-radius: 50%;\n                animation: spin 1s linear infinite;\n                vertical-align: middle;\n            }\n            \/* Enhanced responsive styles for member cards *\/\n            @media (max-width: 1024px) {\n                .member-row-layout-2 {\n                    flex-direction: column;\n                    gap: 15px;\n                }\n                .member-basic-info {\n                    min-width: auto;\n                    width: 100%;\n                }\n                .member-additional-fields {\n                    margin-left: 0;\n                }\n                .compact-fields-grid {\n                    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n                    gap: 10px;\n                }\n            }\n            @media (max-width: 768px) {\n                .member-list-section {\n                    padding: 20px 15px;\n                }\n                .member-card {\n                    flex-direction: column;\n                    padding: 20px;\n                    text-align: center;\n                }\n                .member-photo {\n                    width: 80px;\n                    height: 80px;\n                    margin: 0 auto 15px auto;\n                }\n                .member-name {\n                    font-size: 1.2em;\n                }\n                .member-pagination .page-number {\n                    min-width: 35px;\n                    height: 35px;\n                    font-size: 13px;\n                }\n                \/* Layout 2 responsive styles *\/\n                .member-row-layout-2 {\n                    padding: 15px;\n                }\n                .member-basic-info {\n                    flex-direction: column;\n                    text-align: center;\n                    gap: 10px;\n                }\n                .member-photo-small {\n                    margin: 0 auto;\n                }\n                .compact-fields-grid {\n                    grid-template-columns: 1fr;\n                    gap: 8px;\n                }\n                .compact-field {\n                    padding: 6px 10px;\n                    font-size: 0.85em;\n                }\n                .member-results-summary {\n                    padding: 15px;\n                    margin: 20px 0;\n                }\n                .member-results-summary .results-count {\n                    font-size: 1em;\n                    flex-direction: column;\n                    gap: 5px;\n                }\n                .member-results-summary .results-count::before {\n                    font-size: 1.2em;\n                }\n            }\n            @media (max-width: 480px) {\n                .member-list-section {\n                    padding: 15px 10px;\n                }\n                .member-card {\n                    padding: 15px;\n                }\n                .member-photo {\n                    width: 70px;\n                    height: 70px;\n                }\n                .member-name {\n                    font-size: 1.1em;\n                }\n                .member-pagination {\n                    gap: 4px;\n                }\n                .member-pagination .page-number {\n                    min-width: 32px;\n                    height: 32px;\n                    font-size: 12px;\n                    margin: 0 1px;\n                }\n                \/* Layout 2 mobile styles *\/\n                .member-row-layout-2 {\n                    padding: 12px;\n                }\n                .member-photo-small {\n                    width: 50px;\n                    height: 50px;\n                }\n                .member-name-compact {\n                    font-size: 1em;\n                }\n                .member-email-compact,\n                .member-id-compact {\n                    font-size: 0.8em;\n                }\n                .member-results-summary {\n                    padding: 12px;\n                    margin: 15px 0;\n                }\n                .member-results-summary .results-count {\n                    font-size: 0.9em;\n                    flex-direction: column;\n                    gap: 4px;\n                }\n                .member-results-summary .results-count::before {\n                    font-size: 1.1em;\n                }\n                .member-results-summary .results-count .total-count {\n                    padding: 3px 10px;\n                    font-size: 0.85em;\n                }\n            }\n        <\/style>\n        \n","protected":false},"excerpt":{"rendered":"<p>User Directory User Filters Basic Information Account ID Email Address First Name Last Name General Information User Group 12Board MemberDepartment &#8211; BusinessDepartment &#8211; R&amp;DDepartment &#8211; TechTeam &#8211; DevelopmentTeam &#8211; MarketingTeam &#8211; ProductTeam &#8211; Sale Search List of Users<\/p>\n","protected":false},"author":27,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-181274","page","type-page","status-publish","hentry"],"meta_box":{"179574_to":[]},"_links":{"self":[{"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/pages\/181274","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/comments?post=181274"}],"version-history":[{"count":2,"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/pages\/181274\/revisions"}],"predecessor-version":[{"id":184440,"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/pages\/181274\/revisions\/184440"}],"wp:attachment":[{"href":"https:\/\/sandbox.vocalmeet.systems\/vm-ept\/wp\/v2\/media?parent=181274"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}