.elementor-1961 .elementor-element.elementor-element-793f3b0{--display:flex;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1961 .elementor-element.elementor-element-06d64f8 .elementor-menu-toggle{margin:0 auto;}.elementor-1961 .elementor-element.elementor-element-862f6eb{--display:flex;}.elementor-1961 .elementor-element.elementor-element-995eace{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1961 .elementor-element.elementor-element-e6d1279{text-align:center;}.elementor-1961 .elementor-element.elementor-element-e6d1279 .elementor-heading-title{font-family:"Rosarivo", Sans-serif;font-size:25px;font-weight:600;color:#8FB18B;}@media(min-width:768px){.elementor-1961 .elementor-element.elementor-element-793f3b0{--content-width:1140px;}}/* Start custom CSS */<!-- Toggle Buttons -->
<div class="page-toggle-table">
    <div style="margin-bottom: 20px;">
        <button id="toggleTable1" class="toggle-button">Show Table 1</button>
        <button id="toggleTable2" class="toggle-button">Show Table 2</button>
    </div>

    <!-- wpDataTables -->
    <div id="table1" class="wpdatatable">
        [wpdatatable id=1] <!-- Replace with your first table shortcode -->
    </div>
    <div id="table2" class="wpdatatable" style="display: none;">
        [wpdatatable id=2] <!-- Replace with your second table shortcode -->
    </div>
</div>

<!-- Styles -->
<style>
    .page-toggle-table .wpdatatable {
        display: none;
    }
    .page-toggle-table .toggle-button {
        margin: 10px;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }
    .page-toggle-table .toggle-button:hover {
        background-color: #0056b3;
    }
</style>

<!-- JavaScript to toggle shortcodes -->
<script>
    // Check if we're on the page with the .page-toggle-table class
    if (document.body.classList.contains('page-toggle-table')) {
        document.getElementById("toggleTable1").onclick = function() {
            document.getElementById("table1").style.display = 'block';
            document.getElementById("table2").style.display = 'none';
        };

        document.getElementById("toggleTable2").onclick = function() {
            document.getElementById("table2").style.display = 'block';
            document.getElementById("table1").style.display = 'none';
        };

        // Optionally set the initial table to be visible
        document.getElementById("table1").style.display = 'block';  // Default table (Table 1)
        document.getElementById("table2").style.display = 'none';   // Hide Table 2 initially
    }
</script>/* End custom CSS */