:root {
    /* Width of SVG element */
    --isometry-graphic-width: 100%;

    /* Hovered element: self */
    --isometry-graphic-colors-hover-selfFill: #585e50;
    --isometry-graphic-colors-hover-selfStroke: #fff;

    /* Hovered element: siblings */
    --isometry-graphic-colors-hover-siblingsFill: #8d9286;
    --isometry-graphic-colors-hover-siblingsStroke: #fff;

    /* Clicked element: self */
    --isometry-graphic-colors-selected-selfFill: #585e50;
    --isometry-graphic-colors-selected-selfStroke: #fff;

    /* Clicked element: siblings */
    --isometry-graphic-colors-selected-siblingsFill: #909787;
    --isometry-graphic-colors-selected-siblingsStroke: #fff;

    /* Clicked element: siblings hovered */
    --isometry-graphic-colors-selected-siblingsHoveredFill: #62685b;
    --isometry-graphic-colors-selected-siblingsHoveredStroke: #fff;

    /* Disabled building */
    --isometry-graphic-colors-disabled-Fill: #a5a5a5;
    --isometry-graphic-colors-disabled-Stroke: #ebebeb;

    /* Color change animation duration */
    --isometry-graphic-animation-colorDuration: .25s;

    /* Clicked element: upper floor animation */
    --isometry-graphic-animation-upper-verticalOffest: -1250px;
    --isometry-graphic-animation-upper-opacity: 0;

    /* Upper floor animation duration */
    --isometry-graphic-animation-upper-verticalOffestDuration: .5s;
    --isometry-graphic-animation-upper-opacityDuration: .25s;
}

svg {
    width: var(--isometry-graphic-width);
    height: auto;
}
svg > g, 
svg > g polygon, 
svg > g path, 
svg > g polyline, 
svg > polygon, 
svg > path {
    cursor: pointer;
    transition: fill var(--isometry-graphic-animation-colorDuration), 
        stroke var(--isometry-graphic-animation-colorDuration), 
        opacity var(--isometry-graphic-animation-upper-opacityDuration), 
        transform var(--isometry-graphic-animation-upper-verticalOffestDuration);
}
svg > g.selectable.hovered polygon, 
svg > g.selectable.hovered path, 
svg > polygon.selectable.hovered, 
svg > path.selectable.hovered {
    stroke: var(--isometry-graphic-colors-hover-selfStroke);
    fill: var(--isometry-graphic-colors-hover-selfFill);
}
svg > g.selectable.hovered.sibling polygon, 
svg > g.selectable.hovered.sibling path, 
svg > polygon.selectable.hovered.sibling, 
svg > path.selectable.hovered.sibling {
    stroke: var(--isometry-graphic-colors-hover-siblingsStroke);
    fill: var(--isometry-graphic-colors-hover-siblingsFill);
}
svg > g.selectable.selected polygon, 
svg > g.selectable.selected path, 
svg > polygon.selectable.selected, 
svg > path.selectable.selected {
    stroke: var(--isometry-graphic-colors-selected-selfStroke);
    fill: var(--isometry-graphic-colors-selected-selfFill);
}
svg > g.selectable.selected.sibling polygon, 
svg > g.selectable.selected.sibling path, 
svg > polygon.selectable.selected.sibling, 
svg > path.selectable.selected.sibling {
    stroke: var(--isometry-graphic-colors-selected-siblingsStroke);
    fill: var(--isometry-graphic-colors-selected-siblingsFill);
}
svg > g.selectable.selected.hovered.sibling polygon, 
svg > g.selectable.selected.hovered.sibling path, 
svg > polygon.selectable.selected.hovered.sibling, 
svg > path.selectable.selected.hovered.sibling {
    stroke: var(--isometry-graphic-colors-selected-siblingsHoveredStroke);
    fill: var(--isometry-graphic-colors-selected-siblingsHoveredFill);
}
svg > g.disabled, 
svg > g.disabled polygon, 
svg > g.disabled path, 
svg > g.disabled polyline, 
svg > polygon.disabled, 
svg > path.disabled {
    stroke: var(--isometry-graphic-colors-disabled-Stroke);
    fill: var(--isometry-graphic-colors-disabled-Fill);
}
svg > g.upper, 
svg > polygon.upper, 
svg > path.upper {
    transform: translateY(var(--isometry-graphic-animation-upper-verticalOffest));
    opacity: var(--isometry-graphic-animation-upper-opacity);
}

/* List */
#myTable, 
#myTable th, 
#myTable td {
    border: none;
    border-collapse: collapse;
}

#myTable th, 
#myTable td {
    padding: 15px 10px;
}

#myTable thead {
    background-color: var(--color-white);
}

#myTable tbody tr, .border-grundrisse-info{
    border-bottom: 1px solid #a7af9e;
}

#myTable tbody tr.hovered td {
    background-color: #b6c0a9;
}

#myTable tbody tr.selected td {
    background-color: #b9c4ab;
}

.dark-mode #myTable tbody tr.selected td {
    background-color: #2B2B2B;
}

.haus-container {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 0.5rem 0.5rem;    
}

.dark-mode .pdf-icon{
    filter: invert(1);
}