html, body {
    height: 100%;
    margin: 0;
}

.container {
    display: flex;
    height: 100vh;
}

.left {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 20%;
    overflow: hidden;
    transition: width 0.5s;
}


.left.collapsed {
    width: 0;
}

#table-container {
    overflow-y: auto;
    flex: 1;
}

.right {
    flex: 1;
    max-height: 100%;
    transition: flex 0.5s;
}
      /* Set the size of the div element that contains the map */
#map {
    height: 100%; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

#message {
    color: green;
    height: 10%;
}

/* Basis-Styling für Tabelle */
#table table {
    width: 100%;
    border-collapse: collapse;
}

#table table th,
#table table td {
    border: 1px solid grey;
    padding: 4px;
}

/* Mauszeiger zeigt Interaktivität an */
#table table tbody tr {
    cursor: pointer;
}

/* grüne Markierung */
#table table tbody tr.active {
    background-color: green;
    color: white; /* optional für bessere Lesbarkeit */
}

/* Hovereffekt */
#table table tbody tr:hover:not(.active) {
}

#toggle-button {
    writing-mode: vertical-lr; /* optional für saubere vertikale Darstellung */
}