div.scroll-wrapper {
    --map-spacing: 0rem;
    display: grid;
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    position: relative;
    background: var(--mud-palette-primary);
}

    div.scroll-wrapper.dragging * {
        pointer-events: none;
    }

div.panner-content {
    margin: var(--map-spacing);
    position: relative;
    background: inherit;
    border: 1px solid transparent;
    width: max-content;
}

    div.panner-content:has( img) {
        border: 1px solid #ffffff70;
        box-shadow: 0 0 10px 1px #ffffff3d;
    }

.panner-content:has(.image-bbox-frame.frame-focus) .image-bbox-frame {
    display: none;
}

.image-bbox-frame {
    position: absolute;
    border: 3px solid limegreen;
    z-index: 1200;
}

.image-bbox-frame {
    background: #ffffff20;
}

    .image-bbox-frame.image-bbox-dot {
        z-index: 1300;
    }

        .image-bbox-frame.image-bbox-dot::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            background: #ff2ae2;
            width: 10px;
            height: 10px;
            border-radius: 100px;
            transform: translate(-50%, -50%);
        }

    .image-bbox-frame.frame-focus {
        display: flex !important;
    }

    .image-bbox-frame.frame-focus-multiple {
        display: flex !important;
        border: 3px solid goldenrod;
    }

    .image-bbox-frame.image-bbox-frame-opaque {
        position: absolute;
        border: 3px solid white;
        opacity: 0.6;
        z-index: 1200;
    }

    .image-bbox-frame.image-bbox-frame-red-opaque {
        position: absolute;
        border: 5px solid red;
        background: #f7000057;
        opacity: 0.7;
        z-index: 1200;
    }

.bbox-frame-highlight {
    border: 3px solid #00fffc;
}
.image-bbox-frame .image-bbox-frame-label {
    position: absolute;
    bottom: calc(100% + 3px);
    width: 100%;
    left: 0;
    background-color: #00000057;
    color: white;
    line-height: 1.1;
}