.bg-placeholder {
    --vdev--placeholder-bg: rgba(0, 0, 0, .075);
    background: var(--vdev--placeholder-bg);
}

@keyframes scroll-bounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.25;
    }
    50% {
        transform: translateY(4px);
        opacity: .75;
    }
}

vdev-builder {

    vdev-card-options {

        &.btn-check-group {

            &.is-collapsed {
                justify-content: center !important;

                & > button {
                    --width: calc(100% / var(--items-x));
                    width: var(--width);
                    flex: 0 0 var(--width);
                    font-size: .9rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: grey;
                    border: none;
                    border-radius: .5rem;
                    cursor: pointer;
                    background: rgba(0,0,0, .05);
                    min-height: 34px;
                }

                &[data-items-x="7"] {

                    & > label.btn:nth-child(n + 14) {
                        display: none !important;
                    }
                }

                &[data-items-x="8"] {

                    & > label.btn:nth-child(n + 16) {
                        display: none !important;
                    }
                }

                &[data-items-x="10"] {

                    & > label.btn:nth-child(n + 20) {
                        display: none !important;
                    }
                }
            }

            & > label.btn {
                --width: calc(100% / var(--items-x));
                width: var(--width);
                flex: 0 0 var(--width);
            }
        }
    }

    &:not(.is-expanded) {

        vdev-builder--sidebar-card  {

            details {
                border-radius: .75rem !important;

                & > summary > div {
                    font-size: .925rem;
                    font-weight: 500;
                }
            }
        }
    }

    vdev-form--fields {

        vdev-form--field {

            &[data-field-type="switch"] {

                &[data-field-placement="header"] {
                    position: absolute !important;
                    top: -.325rem;
                    right: 0;
                    width: auto;
                }

                .form-switch {
                    align-items: center;
                }
            }
        }
    }

    vdev-builder--demo {

        vdev-builder--demo-arrow {
            transition: opacity 0.15s ease-in-out;

            .icon-arrow-down {
                font-size: 125%;
                opacity: .25;
                animation: scroll-bounce 1.5s infinite;
            }
        }

        &.vdev--is-stretched--mobile {

            vdev-builder--demo-arrow {
                opacity: 0;
            }
        }

        &[data-device="desktop"] {

            & > svg {
                min-width: 100%;
            }

            vdev-builder--mobile-browser {
                display: none !important;
            }
        }

        &[data-device="mobile"] {

            vdev-builder--browser {
                display: none !important;
            }

            /*vdev-builder--demo-map {*/
            /*    border-radius: 3rem !important;*/
            /*}*/

            [vdev-builder--header-menu] {
                display: none !important;
            }
        }

        :where(vdev-builder--demo-languages, vdev-builder--demo-data) .btn {
            background: #fff;
            box-shadow: 0 .25rem 1rem rgba(0,0,0,.15);
            border-width: 0;
        }

        vdev-form--devices.btn-check-group {
            background: #fff;
            box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .15);
            padding: 0 !important;
        }

        vdev-builder--browser {
            --browser-bg: #eef1f5;
            --tab-active: #ffffff;
            --address-bg: #f1f3f4;
            --text-main: #3c4043;
            background-color: var(--browser-bg);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);

            .tab-bar {
                display: flex;
                align-items: center;
                padding: 0 10px 0 14px;
                height: 34px;
            }

            .window-controls {
                display: flex;
                gap: 8px;
                margin-right: 15px;
            }

            .dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
            }

            .close {
                background: #ff5f56;
            }

            .minimize {
                background: #ffbd2e;
            }

            .maximize {
                background: #27c93f;
            }

            .tab {
                background: var(--tab-active);
                display: flex;
                align-items: center;
                padding: 0 12px;
                height: 100%;
                border-radius: 8px 8px 0 0;
                min-width: 160px;
                font-size: 12px;
                color: var(--text-main);
            }

            .tab-icon {
                width: 14px;
                height: 14px;
                margin-right: 8px;
            }

            .tab-close {
                margin-left: auto;
                font-size: 16px;
                cursor: pointer;
            }

            .new-tab-btn {
                margin-left: 8px;
                font-size: 20px;
                color: #5f6368;
                cursor: pointer;
            }

            .nav-bar {
                background: white;
                display: flex;
                align-items: center;
                padding: 6px 10px;
                gap: 12px;
                border-bottom: 1px solid #ddd;
            }

            .nav-icons {
                display: flex;
                gap: 15px;
                color: #5f6368;
                font-size: 18px;
            }

            .address-bar {
                flex-grow: 1;
                background: var(--address-bg);
                height: 28px;
                border-radius: 14px;
                display: flex;
                align-items: center;
                padding: 0 12px;
                font-size: 13px;
                color: #202124;
            }

            .lock-icon {
                font-size: 10px;
                margin-right: 8px;
                margin-bottom: -1px;
                opacity: 0.7;
            }

            .menu-icon {
                font-size: 20px;
                color: #5f6368;
                cursor: pointer;
                padding-right: 5px;
            }
        }

        vdev-builder--mobile-browser {
            --mobile-bg: #f8f9fa;
            --address-bg: #ffffff;
            --text-main: #3c4043;
            background-color: var(--mobile-bg);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-bottom: 1px solid #ddd;
            border-top-right-radius: inherit;
            border-top-left-radius: inherit;

            .status-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 24px 4px 24px;
                font-size: 14px;
                font-weight: 600;
                color: var(--text-main);
            }

            .status-icons {
                display: flex;
                gap: 6px;
                font-size: 12px;
            }

            .mobile-nav-bar {
                display: flex;
                align-items: center;
                padding: 1px 16px 10px;
                gap: 12px;
                background: var(--mobile-bg);
            }

            .address-bar {
                flex-grow: 1;
                background: var(--address-bg);
                height: 38px;
                border-radius: 12px; /* iOS/Modern Android style */
                display: flex;
                align-items: center;
                padding: 0 15px;
                font-size: 14px;
                color: #202124;
                border: 1px solid #e0e0e0;
            }

            .lock-icon {
                font-size: 11px;
                margin-right: 8px;
                opacity: 0.6;
            }

            .url {
                flex-grow: 1;
                text-align: center; /* Common in mobile browsers */
                margin-right: 8px;
            }

            .refresh-icon {
                font-size: 16px;
                color: #5f6368;
            }

            .action-icons {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .tab-count-icon {
                width: 18px;
                height: 18px;
                border: 2px solid #5f6368;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                font-weight: bold;
                color: #5f6368;
            }

            .menu-icon {
                font-size: 22px;
                color: #5f6368;
                cursor: pointer;
            }

            .status-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 20px 8px 20px; /* Adjusted for better spacing around island */
                position: relative;
                height: 44px; /* Standard iOS status bar height */
            }

            .dynamic-island {
                position: absolute;
                left: 50%;
                top: 10px;
                transform: translateX(-50%);
                width: 95px;
                height: 25px;
                background-color: #000000;
                border-radius: 20px;
                transition: width 0.3s ease; /* For that 'dynamic' feel if you hover later */
                z-index: 10;

                &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 12px;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 4px;
                    background: #1a1a1a; /* Lens effect */
                    border-radius: 50%;
                }
            }

            .time {
                font-size: 14px;
                font-weight: 600;
                width: 50px;
            }

            .status-icons {
                display: flex;
                gap: 6px;
                font-size: 12px;
                width: 50px;
                justify-content: flex-end;
            }
        }

        vdev-builder--demo-map {
            --vdev--bg-color: #fff;
            --vdev--border-color: #999;
            --vdev--border-light--color: #eee;
            --vdev--border-light: 1px var(--vdev--border-light--color) solid;
            --vdev-border: 1px var(--vdev--border-color) solid;
            background-color: var(--vdev--bg-color);
            border: .375rem #242b2b solid !important;
            outline: .1rem solid #fff;
            width: 100%;
            /*box-shadow: 0 0 0 .075rem #fff, 1rem 1rem 3rem rgba(0, 0, 0, .25);*/
            transition: max-width 0.15s ease-in-out, border-width 0.15s ease-in-out;
            overflow: hidden;

            &.vdev--is-stretched--desktop {
                --vdev--width-desktop: 100%;

                iframe {
                    width: 100%;
                    height: 100%;
                }
            }

            &:not(.vdev--is-stretched--desktop) > div {
                max-width: var(--vdev--width-desktop, 1024px);
                padding: 1.5rem;
                overflow: inherit;
            }

            & > header {
                background: #ffffff80 !important;
            }
        }

        &[data-device="mobile"] {

            vdev-builder--demo-map {
                border-width: .375rem !important;
                border-radius: var(--bs-border-radius-2xl) !important;

                iframe {
                    height: 100%;
                    width: 100%;
                }
            }
        }

        &[data-device="desktop"] {

            vdev-builder--demo-map {
                --vdev--demo-width: 1440px;
                max-width: var(--vdev--demo-width, 1440px);

                &.vdev--is-stretched--desktop {

                    iframe {
                        height: 100%;
                    }
                }

                &:not(.vdev--is-stretched--desktop) {

                    iframe {
                        max-width: var(--vdev--width-desktop);
                        height: var(--vdev--height-desktop);
                    }
                }
            }
        }
    }

    vdev-builder--sidebar {
        z-index: 9;

        button[data-card-handle] {

            .icon:not(.icon-chevron-right) {
                font-size: 125%;
                color: var(--bs-primary);
                position: relative;
                bottom: .225em;
            }

            .icon-chevron-right {
                /*font-size: 125%;*/
                position: relative;
                bottom: .225em;
            }
        }

        &.is-active > * > *:not(.is-active) {
            display: none !important;
        }

        .nav {
            position: sticky;
            top: calc(var(--vdev--header-height) + 3rem);
        }

        vdev-card:not(.is-active) > details {
            border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
            background: none;
        }
    }

    @media (max-width: 767px) {

        vdev-builder {

            vdev-builder--demo {

            }
        }
    }

    @media (min-width: 768px) {

        vdev-builder {

            vdev-builder--demo {

                &[data-device="mobile"] {

                    vdev-builder--demo-map {
                        max-width: 390px;
                    }
                }
            }
        }
    }
}

@scope ([data-context="admin"]) {

    vdev-builder {
        --sidebar-width: 20%;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 100%;
            width: 3rem;
            background: #fff;
            display: block;
        }

        &.is-expanded {
            --sidebar-width: 33.333%;

            & > vdev-builder--sidebar > div > .text-muted,
            vdev-builder--sidebar-card:not(.is-active) {
                display: none !important;
            }

            vdev-builder--sidebar {
                padding-top: 0 !important;
            }
        }

        vdev-builder--demo {

            & > svg {
                position: absolute;
            }
        }

        vdev-builder--sidebar {
            width: var(--sidebar-width) !important;
            box-shadow: 1.5rem 0 3rem rgba(0, 0, 0, .05);
            top: var(--vdev--header-height);
            transition: width 0.15s ease-in-out;
        }

        vdev-builder--sidebar-drawer {
            position: absolute;
            top: .075rem;
            bottom: 0;
            left: 0;
            width: 150%;
            /*height: calc(100% - 50px);*/
            height: 100%;
            overflow: auto;
            z-index: 9999;
            background: #fff;
            display: block;
            transition: transform 0.15s ease-in-out;
            transform: translateX(-100%);

            &.is-active {
                transform: translateX(0);
            }

            & > .d-flex {
                z-index: 9;

                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    backdrop-filter: blur(1rem);
                    mask-image: linear-gradient(black 40%, transparent);
                    background: rgba(255, 255, 255, 0.063);
                }
            }
        }
    }

    .modal {
        z-index: 9999 !important;

        .modal-fullscreen {
            border: .375rem solid #0b1f243d;
            border-bottom: 0;
            border-radius: 1.75rem 1.75rem 0 0;
            overflow: hidden;
            --vdev--header-height: 50px;
            top: var(--vdev--header-height);

            .btn-close {
                background-size: .825rem;
                color: #000;
                opacity: 1;
                margin-right: 0;
                border-radius: 50%;
                position: absolute;
                right: .5rem;
                top: .5rem;
                z-index: 9999;
                padding: .5rem;
            }

            .modal-body {
                padding: 0;
            }

            vdev-content--header {
                padding-right: 2.75rem !important;
            }

            vdev-builder {

                vdev-builder--demo {
                    top: var(--vdev--header-height);
                    height: calc(100dvh - var(--vdev--header-height) - 56px);

                    vdev-builder--demo-map {
                        height: calc(100dvh - var(--vdev--header-height) - 138px);
                    }
                }
            }
        }
    }

    div[id^="modal-content-"] > vdev-modal-content vdev-builder--demo {

        vdev-builder--demo-map {
            height: calc(100dvh - var(--vdev--header-height) - 74px);
        }
    }
}

@scope ([data-context="public"]) {

    vdev-builder--presets {

        &.btn-check-group {
            --items-x: 5;
            row-gap: .5rem;
            border-radius: .75rem !important;
            max-width: 600px;
            border: 1px #fff solid;
            /*margin-bottom: .125rem;*/
            padding: .25rem !important;
            scroll-padding-inline: .25rem;
            /*box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 5%) inset, 0 0 2rem .5rem #fff !important;*/
            background: #e8f1f2 !important;
            backdrop-filter: blur(4px);
            position: relative;
            /*bottom: .2rem;*/
            scrollbar-width: none;        /* Firefox */
            -ms-overflow-style: none;     /* IE/Edge */
            overflow-x: auto;
            scroll-snap-type: x mandatory; /* snap horizontally */
            scroll-behavior: smooth;

            &::-webkit-scrollbar {
                display: none;                /* Chrome, Safari */
            }
        }

        .btn {
            height: auto !important;
            padding: .125rem .75rem;
            font-weight: normal;
            letter-spacing: normal;
            flex: 1;
            min-height: .75rem !important;
            border: none !important;
            border-radius: .5rem !important;
            flex-direction: row;
            gap: .5rem;
            color: #000 !important;
            box-shadow: none !important;
            scroll-snap-align: start; /* snap each item */
        }

        input:checked + .btn {
            color: var(--bs-primary) !important;
            border-radius: .5rem !important;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;

            img {
                filter: brightness(0) saturate(100%) invert(60%) sepia(120%) saturate(250%) brightness(110%) hue-rotate(160deg);
            }
        }

        img {
            width: 27px;
            border-radius: inherit;
            aspect-ratio: 1;
            object-fit: contain;
        }

        small {
            margin-inline: -1rem;
        }
    }

    vdev-builder--preset-create {
        height: 37px;
        margin-top: 1px;
        box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 5%) inset, 0 0 2rem .5rem #fff !important;

        .widget-bg {
            --border-width: .1rem !important;
            --bg-color: #e8f1f2;
        }
    }

    vdev-builder {
        --sidebar-width: 100%;
        --drawer-width: 0%;
        --vdev--preset-hue: 0;
        transition: background-image 0.45s ease-in-out, padding 0.45s ease-in-out, width 0.45s ease-in-out;

        vdev-builder--demo {

            &[data-device="mobile"] {

                vdev-builder--demo-map {

                    vdev-builder--mobile-browser {
                        --vdev--max-margin-top: calc(-91.87px);
                        --vdev--margin-top: calc(var(--vdev--max-margin-top) * var(--vdev--scroll-progress));
                        margin-top: var(--vdev--margin-top);
                        transition: margin-top 0.45s ease-in-out;
                    }
                }
            }

            &[data-device="desktop"] {

                vdev-builder--browser {
                    --max-margin-top: calc(-77px);
                    --margin-top: calc(var(--max-margin-top) * var(--vdev--scroll-progress));
                    margin-top: var(--margin-top);
                    transition: margin-top 0.45s ease-in-out;
                }
            }
        }
    }

    @media (max-width: 767px) {

        vdev-builder {

            .container > div > svg {
                transform: translateY(-82.5%) scale(300%);
            }

            vdev-builder--demo {

                &[data-device="mobile"] {

                    vdev-builder--demo-map {

                        iframe {
                            aspect-ratio: 3/5;
                        }
                    }
                }
            }
        }
    }

    @media (min-width: 768px) {

        vdev-builder {

            .container > div > svg {
                width: 200%;
                margin: auto -50%;
                transform: translateY(-35.2%);
            }

            vdev-builder--demo {

                &[data-device="mobile"] {

                    vdev-builder--demo-map {
                        min-width: 100%;
                        width: auto;

                        iframe {
                            aspect-ratio: 1.875;
                        }
                    }
                }
            }
        }
    }
}

@scope ([data-context="public"][data-app="core"]) {

    vdev-builder {

        vdev-builder--demo {

            &[data-device="mobile"] {

                vdev-builder--demo-map {
                    aspect-ratio: 9/17;
                }
            }

            &[data-device="desktop"] {

                vdev-builder--demo-map {

                    iframe {
                        aspect-ratio: 2;
                    }
                }
            }
        }
    }

    @media (max-width: 767px) {

        vdev-builder {

            vdev-builder--demo {

                &[data-device="mobile"] {
                    --vdev--scroll-progress: 0;

                    vdev-builder--demo-map {
                        --vdev-scale: calc(0.6 + (0.4 * var(--vdev--scroll-progress)));
                        --vdev-translate-y: calc(-32% + (24% * var(--vdev--scroll-progress)));
                        width: auto !important;
                        /*margin-inline: -.65rem !important;*/
                        aspect-ratio: auto !important;
                        transform: scale(var(--vdev-scale)) translateY(var(--vdev-translate-y));
                        transition: transform .4s, border-radius .4s;
                        will-change: transform;
                    }
                }
            }
        }
    }

    @media (min-width: 768px) {

        vdev-builder {

            vdev-builder--demo {

                vdev-builder--demo-map {
                    /*border-radius: var(--bs-border-radius-2xl) !important;*/
                    overflow: hidden !important;

                    iframe {
                        aspect-ratio: 2;
                    }
                }

                &[data-device="mobile"] {
                    width: 22.5rem;
                    position: absolute;
                    top: .75rem;
                    right: .75rem;
                    z-index: 9;

                    vdev-builder--demo-map {
                        outline: .1rem solid #fff;
                    }
                }
            }
        }
    }
}

@scope ([data-context="public"][data-app="storelocator"]) {

    vdev-builder {

        .builder-bg {
            position: absolute;
            left: calc(50% - 50vw);
            width: 100vw;
            overflow: hidden;
            aspect-ratio: 1;
            pointer-events: none;
            opacity: .625;
            filter: contrast(80%) saturate(340%) hue-rotate(20deg);

            svg {
                width: 100%;
                height: auto;
            }
        }
    }

    @media (max-width: 767px) {

        vdev-builder {

            vdev-builder--demo {
                --vdev--scroll-progress: 0;

                .builder-bg {
                    top: -30.25rem;
                    aspect-ratio: .5;

                    svg {
                        transform: scale(2) translateY(13.75%);
                        transform: scale(3.375) translateY(25%);
                    }
                }

                vdev-builder--demo-map {
                    --vdev-scale: calc(0.6 + (0.4 * var(--vdev--scroll-progress)));
                    --vdev--translate-y: calc(-32% + (32% * var(--vdev--scroll-progress)));
                    transform: scale(var(--vdev-scale)) translateY(var(--vdev--translate-y));
                    transition: transform .4s ease-in-out;
                    will-change: transform;
                }
            }
        }
    }

    @media (min-width: 768px) {

        vdev-builder {

            vdev-content-widget-options {
                position: absolute;
                top: -.25rem;
                width: 22rem;
                background: #ffffff69;
                z-index: 9;
                backdrop-filter: blur(1.25rem);
                right: .5rem;
                padding: 1rem;
                --max-rotate: 2deg;
                transform: rotate(calc((1 - var(--vdev--scroll-progress)) * var(--max-rotate)));
                transition: top 0.45s ease-in-out, transform 0.45s ease-in-out;

                & > .d-flex {
                    position: relative;
                    z-index: 5;
                    background: #fff;
                    border-radius: 1.6rem;
                }

                .row > div:first-child > img {
                    box-shadow: 0 0 0 0.2rem #ffffff, 0 0 0 .35rem #000000;
                }

                .widget-bg {
                    --border-width: .125rem;
                    --bg-color: #f1f1f1e3;
                    position: absolute;
                    inset: -.1rem;
                    border-radius: inherit;
                    overflow: hidden;


                    &::before {
                        --size: 720px;
                        content: '';
                        position: absolute;
                        inset-inline-start: 50%;
                        inset-block-start: 50%;
                        z-index: 1;
                        inline-size: var(--size);
                        block-size: var(--size);
                        background: conic-gradient(
                                #fff,
                                #fff,
                                rgb(0, 145, 255),
                                rgb(255, 2, 240),
                                #fff,
                                rgb(247, 104, 8),
                                rgb(102, 71, 240),
                                rgb(0, 145, 255) 1turn
                        );
                        transform: translate(-50%, -50%);
                        animation: aiAnimate 6s linear 0s infinite
                        normal none running;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        inset: var(--border-width);
                        background: var(--bg-color);
                        display: block;
                        z-index: 1;
                        border-radius: calc(2rem - var(--border-width));
                    }
                }
            }

            vdev-builder--demo {
                --vdev--scroll-progress: 0; /* 0 → start, 1 → fully expanded */
                --max-width: 980px;
                --inline-gap: calc(var(--bs-gutter-x) * 0.5);

                .builder-bg {
                    top: -282px;

                    svg {
                        transform: scale(1.625);
                    }
                }

                &.vdev--is-stretched--mobile {

                    .builder-bg {
                        top: auto;
                        bottom: -775px;
                    }
                }

                vdev-builder--demo-map {
                    --width: calc(
                        var(--max-width)
                        + (100vw - var(--max-width)) * var(--vdev--scroll-progress)
                        + var(--bs-gutter-x)
                        - var(--inline-gap) * 2
                    );
                    /* dynamic width: 920px → 100vw minus inline spacing */
                    width: calc(var(--width)) !important;
                    max-width: calc(var(--width) - var(--bs-gutter-x)) !important;

                    /* break out of container smoothly, add left spacing */
                    margin-left: calc(
                        (50% - 50vw) * var(--vdev--scroll-progress)
                        + var(--inline-gap)
                    ) !important;

                    will-change: width, margin-left;
                    transition: margin-left 0.45s ease-in-out, width 0.45s ease-in-out, max-width 0.45s ease-in-out;

                    &::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 33.333%;
                        height: 100%;
                        opacity: var(--vdev--scroll-progress);
                        background: linear-gradient(90deg, #ff20ca00, rgba(0, 0, 0, 0.2));
                        /*background: linear-gradient(90deg, #ffffff00, rgb(134 248 255 / 65%));*/
                        z-index: 1;
                        pointer-events: none;
                        transition: opacity 0.45s ease-in-out;
                    }
                }

                &[data-device="mobile"] {

                    vdev-builder--demo-map {

                        iframe {
                            aspect-ratio: 1.875;
                        }
                    }
                }

                &[data-device="desktop"] {

                    vdev-builder--demo-map {

                        iframe {
                            aspect-ratio: 2.25;
                        }
                    }
                }

                vdev-content-widget-options {
                    top: 0;
                    --option-margin-top-start: 1.25rem;
                    --option-margin-top-end: 6.25rem;
                    --option-extra-right: 22.5%;
                    margin-top: calc(var(--option-margin-top-start) + (var(--option-margin-top-end) - var(--option-margin-top-start)) * var(--vdev--scroll-progress));
                    margin-right: calc((var(--option-extra-right) - 25vw) * var(--vdev--scroll-progress));
                    /*transform: none !important;*/
                    transition: transform 0.45s ease-in-out,  margin-top 0.45s ease-in-out, margin-right 0.45s ease-in-out;
                }
            }
        }

        vdev-builder--presets {
            position: relative;
            bottom: .175rem;
        }
    }
}

.custom-card-header {

    .btn-check-group {
        padding: 0 !important;
        margin-top: -.5rem;
    }
}




.btn-check-group {
    /*box-shadow: 0 0 .125rem rgba(0, 0, 0, .125) inset !important;*/
    border-radius: .5rem !important;

    .btn-sm {
        border-radius: inherit !important;
        padding-inline: .75rem !important;
    }
}