/* 
 * Add the CSS class "sync-checkbox" to your visual checkbox widget (e.g., Icon or Container).
 * This CSS uses Elementor's native ".e-active" class to style the checkbox when its parent tab is active.
 */

/* Default (inactive) state */
.sync-checkbox {
    opacity: 0.4;
    transition: all 0.3s ease;
    filter: grayscale(100%);
}

/* Active state (when inside an active tab title or content) */
.e-active .sync-checkbox,
.e-active > .sync-checkbox {
    opacity: 1;
    filter: grayscale(0%);
    /* Add your active color below, e.g., blue */
    /* color: #0B78AF !important; */
}