.floorplan-map-field__canvas {
    position: relative;
    width: 100%;
    border: 1px solid var(--hairline-color, #e3e5e8);
    border-radius: var(--medium-border-radius, 5px);
    padding: 12px;
    background: var(--gray-050, #f7f7f8);
    overflow: auto;
}

.floorplan-map-field__canvas:empty {
    min-height: 60px;
}

.floorplan-map-field__canvas svg {
    display: block;
    width: 100%;
    height: auto;
}

.floorplan-map__shape {
    cursor: pointer;
    transition: fill 0.12s ease, stroke 0.12s ease, fill-opacity 0.12s ease;
}

.floorplan-map__shape:hover {
    fill: #2b7de9 !important;
    fill-opacity: 0.85;
    stroke: #1b5fc0 !important;
    stroke-width: 1.5 !important;
}

.floorplan-map__shape.is-selected,
.floorplan-map__shape.is-selected:hover {
    fill: #262626 !important;
    fill-opacity: 0.65 !important;
    stroke: #262626 !important;
    stroke-width: 2;
}

.floorplan-map__status {
    margin-top: 6px;
    font-size: 12px;
    color: var(--medium-text-color, #606d7b);
}

.floorplan-map-field__controls { margin-bottom: 8px; }
.floorplan-map-field__controls select {
    padding: 6px 8px;
    border: 1px solid var(--hairline-color, #cfd3d8);
    border-radius: var(--small-border-radius, 4px);
}