*{box-sizing:border-box}
svg .Building{
    opacity:1 !important;
    fill:#aaa8;
}
svg .layout-area{
    stroke-width: 0;
    transition: stroke-width .2s ease;
}
svg .layout-area rect.main-area{
    opacity: 0.5;
}
svg .layout-table:has(.selected){
    cursor: move;
}
svg .layout-table rect{
    opacity:1;
    transition: stroke-width .2s ease;
}
svg .layout-table rect.Table{
    --default-color:black;
    width: 50px;
    height: 30px;
}
svg .layout-table text{
    text-anchor: middle;
    dominant-baseline: middle;
    font-size: 18px;
    fill:gray;
}
svg .Bar{
    fill:blue;
}
svg .WC{
    fill:red;
}
svg .Kitchen{
    fill:green;
}
svg .expander{
    fill:white;
    stroke:black;
    stroke-width: 1;
    opacity: 1;
}
svg rect.selected{
    stroke:red;
    stroke-width:2;
}
svg text{
    user-select:none;
    fill:#aaa;
}
svg rect.Table text{
    -webkit-text-stroke: 1px black;
    stroke: #0005;
    stroke-width: 0.1px;
}
svg:not(.view-only) g:not(:has(.layout-area)):not(:has(.selected)){
    cursor:pointer;
}


svg .Table.active-order{
    --default-color: orange;
}

svg .blink{
    animation: blink-table 1.25s alternate infinite;
}


@keyframes pick{
    0%{stroke-width:0} 
    25%{stroke-width:1%} 
    100%{stroke-width:0}
}
@keyframes blink-table{
    0%{fill:var(--default-color)} 
    100%{fill:var(--blink-color)}
}