div.pairedComponents {
gap: var(--spacing-m) !important;
width: 100%;
height: auto;
justify-content: center;
}

/* ===========================================================================
    US VIDEOS and 2D ANIMATION STYLE
    =========================================================================== */
    /* target with id viewer 3 */
div#viewer3.bmcVideoLottieScrubber {
    /* display: flex;
    flex-wrap: wrap;  */
    /* aspect-ratio: 346 / 231 !important; */
    width: 100% !important;
    height: 100% !important; 
    margin: 0 ;
    padding: 0 4em;
    /* row-gap: var(--spacing-s); */
    /* justify-content: center;
    align-items:center;     */
    /* margin: 0; */

    /* position:relative; */
}

div#viewer3.bmcVideoLottieScrubber video {
    aspect-ratio: 346 / 231 !important;
    border-radius: var(--corner-s-radius);
    box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
    width: 100%;
    height: auto!important;
    object-fit: cover;

}

div#viewer3.bmcVideoLottieScrubber img {
    border-radius: var(--corner-s-radius);
    width: 100%;
    height: auto!important;
    object-fit: cover;
}

div.bmcCoupledVideoLottieScrubber div div.BmcLotScrubInternal {
    padding: 0 ;
}

div#viewer3.bmcVideoLottieScrubber div.BmcLotScrubInternal {
    padding: 0 4em;
}

/* ===========================================================================
    3D VIEWER STYLE
    =========================================================================== */

/* Target a div that is a member of the CSS class
"bmc_3dviewer" that has the id "viewer2" */
div#viewer1.bmcVideoLottieScrubber, 
div#viewer2.bmc_3dviewer,
div#viewerFull.bmc_3dviewer {
    aspect-ratio: 346 / 231 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border-radius: var(--corner-s-radius);
    box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
    background-color: #2a2a2a;
}
div#viewer1.bmcImageWithOverlay,
div#viewer2.bmc_3dviewer div.overlay {
    aspect-ratio: 346 / 231 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border-radius: var(--corner-s-radius);
    box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
}



div#viewer1.bmcVideoLottieScrubber video, 
div#viewer1.bmcImageWithOverlay video,
div#viewer2.bmc_3dviewer canvas, 
div#viewer2.bmc_3dviewer svg {
    width: 100% !important;
    height: auto !important;
    border-radius: var(--corner-s-radius);
    object-fit: cover;
}

div#viewerFull.bmc_3dviewer canvas, 
div#viewerFull.bmc_3dviewer svg 
div#viewerFull.bmc_3dviewer div.overlay{
    width: 100% !important;
    height: auto !important;
    border-radius: var(--corner-s-radius);
    object-fit: cover;
}


div.bmcCoupledVideoLottieScrubber div.pairedComponents div video {
    aspect-ratio: 346 / 231 !important;
    border-radius: var(--corner-s-radius);
    box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}



div.bmc_3dviewer svg g text {
    fill: #fff;
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: var(--type-labels-weight);
    font-style: var(--type-labels-style);
}

div.bmc_3dviewer svg g.left text,
div.bmc_3dviewer svg g.left text tspan {
    text-anchor: end;
}

        div.bmc_3dviewer svg g rect {
            fill: #00000080;
            rx: 6px;
        }

        div.bmc_3dviewer svg circle {
            fill: #000;
            stroke: #ffffff00;
            r: 3px;
        }

        div.bmc_3dviewer svg line {
            stroke: #000;
            stroke-width: 1px;
        }

        div.bmc_3dviewer svg line.second {
            stroke: #fff;
            stroke-width: 3px
        }



/* ===========================================================================
    CONTROLS GROUP STYLE
    =========================================================================== */
div.bmcCoupledThreeVideoScrubber div.controlGroup,
div.bmcCoupledVideoLottieScrubber div.controlGroup,
div.bmcVideoLottieScrubber div.controlGroup {
    display: flex;
    justify-content: center;
    align-items:center;
    gap: var(--spacing-s);
    padding-top: 2em;
    width: 100%;
    flex-wrap: wrap;
    align-items:center;
    margin: 0;
}


div.bmcCoupledThreeVideoScrubber div.controlGroup div,
div.bmcCoupledVideoLottieScrubber div.controlGroup div,
div.bmcVideoLottieScrubber div.controlGroup div {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0px solid #ccc;
    margin: 0;
    padding-left: 15px;
        padding-bottom: var(--spacing-m);
}

div.bmcCoupledThreeVideoScrubber div.controlGroup div:first-of-type,
div.bmcCoupledVideoLottieScrubber div.controlGroup div:first-of-type,
div.bmcVideoLottieScrubber div.controlGroup div:first-of-type {
    border-left: none;
    padding-left: 0;
}

div.bmcCoupledThreeVideoScrubber div.controlGroup div label,
div.bmcCoupledVideoLottieScrubber div.controlGroup div label,
div.bmcVideoLottieScrubber div.controlGroup div label,
div.bmcCoupledThreeVideoScrubber div.controlGroup div span,
div.bmcCoupledVideoLottieScrubber div.controlGroup div span,
div.bmcVideoLottieScrubber div.controlGroup div span {
    font-family: var(--font-family);
    font-size: var(--type-interactive-size);
    line-height: var(--type-interactive-line-height);
    font-weight: var(--type-interactive-weight);
    letter-spacing: var(--type-interactive-tracking);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px 0 6px ;
    padding: 0
}


/* ===========================================================================
    SLIDER STYLE
    =========================================================================== */
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle),
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle),
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle) {
    -webkit-appearance: none;
    appearance: none;
    width: 35vw;
    height: 12px;
    border-radius: 100px;
    border: 2px solid #244FCC80;
    background: #F4F8FD;
    opacity: 0.8;
    margin: 6px 0 6px 0;
    padding: 0;
    transition: opacity .2s;
}

div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):hover,
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle):hover,
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle):hover {
    opacity: 1;
}

/* Chrome/Safari/Edge */
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle)::-webkit-slider-thumb,
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle)::-webkit-slider-thumb,
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle)::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #244FCC;
    cursor: pointer;
}

div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):hover::-webkit-slider-thumb,
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle):hover::-webkit-slider-thumb,
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle):hover::-webkit-slider-thumb {
    opacity: 1;
}

div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):active::-webkit-slider-thumb,
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle):active::-webkit-slider-thumb,
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle):active::-webkit-slider-thumb {
    opacity: 1;
    outline: 10px solid #3d70e655;
}

/* Firefox */
div.bmcVideoLottieScrubber input[type="range"]:not(.toggle)::-moz-range-thumb,
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle)::-moz-range-thumb,
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle)::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #244FCC;
    cursor: pointer;
}

div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):hover::-moz-range-thumb,
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle):hover::-moz-range-thumb,
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle):hover::-moz-range-thumb {
    opacity: 1;
}

div.bmcVideoLottieScrubber input[type="range"]:not(.toggle):active::-moz-range-thumb,
div.bmcCoupledVideoLottieScrubber div input[type="range"]:not(.toggle):active::-moz-range-thumb,
div.bmcCoupledThreeVideoScrubber div input[type="range"]:not(.toggle):active::-moz-range-thumb {
    opacity: 1;
    outline: 10px solid #3d70e655;
}


/* ===========================================================================
    TOGGLE STYLE
    =========================================================================== */
div.bmcVideoLottieScrubber input.toggle,
div.bmcCoupledVideoLottieScrubber div input.toggle,
div.bmcCoupledThreeVideoScrubber div input.toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 26px !important;
    border-radius: 100px !important;
    border: 2px solid #244FCC80 !important;
    background: #F4F8FD !important;
    opacity: 0.8 !important;
    margin: 0  !important;
    padding: 0 !important;
    transition: opacity .2s, background-color .2s, border-color .2s !important;
}

div.bmcVideoLottieScrubber input.toggle:hover,
div.bmcCoupledVideoLottieScrubber div input.toggle:hover,
div.bmcCoupledThreeVideoScrubber div input.toggle:hover {
    opacity: 1 !important;
}

/* ON state: filled track */
div.bmcVideoLottieScrubber input.toggle[value="1"],
div.bmcCoupledVideoLottieScrubber div input.toggle[value="1"],
div.bmcCoupledThreeVideoScrubber div input.toggle[value="1"] {
    background: var(--button-primary-enabled) !important;
    border-color: var(--button-primary-enabled) !important;
    opacity: 1;
}

/* Thumb — Chrome/Safari/Edge */
div.bmcVideoLottieScrubber input.toggle::-webkit-slider-thumb,
div.bmcCoupledVideoLottieScrubber div input.toggle::-webkit-slider-thumb,
div.bmcCoupledThreeVideoScrubber div input.toggle::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #F4F8FD;;
    background: var(--button-primary-enabled);
    cursor: pointer;
}

div.bmcVideoLottieScrubber input.toggle[value="1"]::-webkit-slider-thumb,
div.bmcCoupledVideoLottieScrubber div input.toggle[value="1"]::-webkit-slider-thumb,
div.bmcCoupledThreeVideoScrubber div input.toggle[value="1"]::-webkit-slider-thumb {
    background: #F4F8FD;;
    border: 2px solid var(--button-primary-enabled);
}

/* Thumb — Firefox */
div.bmcVideoLottieScrubber input.toggle::-moz-range-thumb,
div.bmcCoupledVideoLottieScrubber div input.toggle::-moz-range-thumb,
div.bmcCoupledThreeVideoScrubber div input.toggle::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    border: 2px solid #F4F8FD;;
    background: var(--button-primary-enabled);
    cursor: pointer;
}

div.bmcVideoLottieScrubber input.toggle[value="1"]::-moz-range-thumb,
div.bmcCoupledVideoLottieScrubber div input.toggle[value="1"]::-moz-range-thumb,
div.bmcCoupledThreeVideoScrubber div input.toggle[value="1"]::-moz-range-thumb {
    background: #F4F8FD;;
    border: 2px solid var(--button-primary-enabled);
}

/* ===========================================================================
    FULLSCREEN WRAP STYLE
    =========================================================================== */
.component-fullscreen-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid #244ecc3e;
    border-radius: var(--corner-m-radius);
    gap: var(--spacing-xl);
    padding: var(--spacing-s);
}

.fullscreen-toggle {
    position: absolute;
    bottom: var(--spacing-s);
    right: var(--spacing-s);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--button-primary-enabled);
    box-shadow: 0 var(--weight-xxs) var(--weight-xs) 0 rgba(18, 18, 18, 0.3);
    transition: background 0.2s;
}

.fullscreen-toggle:hover {
    background: #fff;
}

/* ===========================================================================
    LOAD BUTTON STYLE
    =========================================================================== */
div.bmc_3dviewer div.loadButtonContainer {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
}

div.bmc_3dviewer input.load_btn {
    font-family: var(--font-family);
    font-size: var(--type-interactive-size);
    line-height: var(--type-interactive-line-height);
    font-weight: var(--type-interactive-weight);
    letter-spacing: var(--type-interactive-tracking);
    color: #F4F8FD;
    background: var(--button-primary-enabled);
    border: 2px solid var(--button-primary-enabled);
    border-radius: 100px;
    padding: 8px 20px;
    cursor: pointer;
    transition: opacity .2s;
}

div.bmc_3dviewer input.load_btn:hover {
    opacity: 0.85;
}