#am-convention-map {
    cursor: grab;
}

.booth {
    fill: #eee;
    stroke: #fff;
    cursor: pointer;
}

.booth:hover {
    content: attr(data-name);
}

.booth:hover {
    fill: var(--paletteColor1, lightblue);
    color: var(--paletteColor6, #000);
}

.reserved {
    fill: var(--paletteColor2, darkblue);
    color: var(--paletteColor6, #fff);
}

#am-convention-map:has(#Booth_B3_20x10:hover) #Area {
    fill: var(--paletteColor1, lightblue);
}

#am-convention-map:has(#Booth_122_NA:hover) #_B122_2 {
    fill: var(--paletteColor1, lightblue);
}

#am-convention-map foreignObject,
.booth.reserved,
.booth-text {
    pointer-events: none;
}

.booth-text {
    padding: 1px 2px;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    font-family: monospace !important;
}

.booth-text.reserved {
    pointer-events: initial;
}

.booth-text span {
    font-size: 90%;

}

@media (max-width: 1200px) {
    #am-convention-map {
        height: 90vh;
        overflow-y: hidden;
        overflow-x: scroll !important;
    }

    #am-convention-map svg {
        height: 90vh;
    }
}