/* Hide all blue swimmer parts but keep grey connectors */

.cloud-connectors-svg .cloud-swimmer,
.cloud-connectors-svg .cloud-swimmer-head,
.cloud-connectors-svg .cloud-swimmer-peak {
    display: none !important;
    /* fully remove from render */
    animation: none !important;
    /* belt & suspenders */
}

.cloud-connections-col {
    position: relative !important;
    overflow: visible !important;
}

.cloud-connectors-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    z-index: 9999 !important;
    overflow: visible;
}

.cloud-connector-path {
    fill: none !important;
    stroke: #DBE2F0 !important;
    stroke-width: 1px !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cloud-connector-dot {
    fill: #DBE2F0 !important;
}

/* Dot size (CSS way). Radius in px; 4 => 8px diameter */

.cloud-connectors-svg .cloud-connector-dot {
    r: 4px !important;
}

/* Nudge ONLY the vertical leg of the TOP connector (positive moves it DOWN) */

.cloud-connectors-svg .connector-top-leg {
    transform: translateY(-15px) !important;
    /* adjust to taste */
    transform-box: fill-box !important;
    transform-origin: center !important;
}

/* If needed, you can nudge the horizontal run independently */

.cloud-connectors-svg .connector-top-main {
    transform: translateY(-24px) !important;
    /* e.g., lift rail a hair */
    transform-box: fill-box !important;
    transform-origin: center !important;
}

.cloud-connectors-svg .connector-top-endleg,
.cloud-connectors-svg .connector-top-startleg {
    transform: translateY(-12px) !important;
    /* match the main rail lift */
    transform-box: fill-box !important;
    transform-origin: center !important;
}

/* Bottom connector controls (mirror of top, tweak if/when needed) */

/* mirror of the top nudges, tweak numbers to taste */

.cloud-connectors-svg .connector-bottom-startleg,
.cloud-connectors-svg .connector-bottom-endleg {
    transform: translateY(12px) !important;
    /* leg down a touch */
    transform-box: fill-box !important;
    transform-origin: center !important;
}

.cloud-connectors-svg .connector-bottom-main {
    transform: translateY(24px) !important;
    /* lower the whole bottom rail */
    transform-box: fill-box !important;
    transform-origin: center !important;
}

/* trail (body) */

.cloud-swimmer {
    stroke: #3A6BFF !important;
    stroke-width: 3px !important;
    /* match your connector width */
    stroke-linecap: butt !important;
    /* crisp ends */
    fill: none !important;
    opacity: .35 !important;
    /* “tail” strength */
}

/* soft tail glow */

/* .cloud-swimmer.glow{
  stroke-width:8px!important;
  opacity:.25!important;
  stroke-linecap: butt !important;   
  stroke-dasharray: var(--seg) var(--plen);
} */

@keyframes cloud-swim {
    /* move the short dash from start to end without wrapping */
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: calc(-1*(var(--plen) - var(--seg)));
    }
}

/* head stays round so it looks like a dot */

/* .cloud-swimmer-head {
    fill: none!important;
    stroke: #3578FF!important;
    stroke-width: 10px!important;
    stroke-linecap: round!important;
    pointer-events: none!important;
    stroke-dasharray: var(--head) var(--plen);
    animation: cloud-head-dyn var(--dur) linear infinite alternate;
} */

/* Head: small, clean dot (no glow) */

.cloud-swimmer-head {
    stroke: #3A6BFF !important;
    stroke-width: 3px !important;
    stroke-linecap: round !important;
    /* makes the short dash a perfect circle */
    fill: none !important;
}

/* you already have these */

.cloud-swimmer {
    stroke: #3578FF !important;
    stroke-width: 2px !important;
    stroke-linecap: round !important;
    pointer-events: none !important;
    stroke-dasharray: var(--seg) var(--plen);
}

.cloud-swimmer.glow {
    stroke-width: 8px !important;
    opacity: .25 !important;
    stroke-dasharray: var(--seg) var(--plen);
}

/* Bright band near the head (about 30% of the trail length) */

.cloud-swimmer-peak {
    stroke: #3A6BFF !important;
    stroke-width: 3px !important;
    stroke-linecap: butt !important;
    fill: none !important;
    opacity: 1 !important;
}

@media screen and (max-width: 600px) {
    svg.cloud-connectors-svg {
        display: none;
    }

    .nest-cloud-connections-col {
        flex-grow: 0 !important;
    }
    
    .cloud-connections-col {
        margin-bottom: 30px !important;
    }

    .nest-cloud-connections-col>div {
        height: unset;
        width: unset;
        margin: 5px 3px !important;
        flex-direction: row !important;
        padding: 10px !important;
        align-items: center;
    }

    .nest-cloud-connections-col>div>.fusion-image-element,
    .nest-cloud-connections-col>div>.fusion-title {
        margin-bottom: 0px !important;
    }

}

@media screen and (min-width: 601px) and (max-width: 1024px) {
    .nest-cloud-connections-col>div {
        margin: 0 3px !important;
    }
}

@media screen and (min-width: 601px) {
    .nest-cloud-connections-col>div {
        height: 165px;
        width: 165px;
    }
}

/*  */