.map {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

footer {
    text-align: right;
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    img {
        filter: invert(1) hue-rotate(180deg);
    }
}

.mapcontainer {
    position: relative;
    width: 80vw; /* Set a base width for the container */
    height: calc(80vw * 599 / 412); /* Maintain SVG's aspect ratio */
    max-height: 80vh; /* Prevent overflow on tall screens */
    max-width: calc(80vh * 412 / 599); /* Maintain aspect ratio when constrained by height */
    margin: auto; /* Center horizontally and vertically */
}

.svg-image {
    width: 100%; /* SVG scales with the container */
    height: 100%; /* Maintain aspect ratio */
    display: block;
}

.circle {
    position: absolute;
    width: calc((100vh ) * 0.023 / 1);
    height: calc((100vh ) * 0.023 / 1);
    border-radius: 50%;
    border: white solid calc((100vh + 100vw) * 0.003 / 2);
    transform: translate(-50%, -50%);
    font-size: calc(0.9em);
    cursor: pointer !important;
    pointer-events: auto;
}

a.circle, a.circle:hover, a.circle:visited, a.circle:active {
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.green-circle {
    background-color: green;
}

.red-circle {
    background-color: red;
}

.half-half-circle {
    background: linear-gradient(to bottom right, red 50%, green 50%);
}

.green-circle::after {
    content: "✓";
}

.red-circle::after {
    content: "✗";
}

.half-half-circle::after {
    content: "⚠";
}

.map {
    clear: both;
}

.conveyance-chart > img {
    height: 5em;
}

.conveyance-chart {
    padding: 0;
}

.halte-isolatorweg {
    top: 13.8%;
    left: 15.2%;
}

.halte-station-sloterdijk {
    top: 18.5%;
    left: 7.5%;
}

.halte-de-vlugtlaan {
    top: 23.2%;
    left: 7.5%;
}

.halte-jan-van-galenstraat {
    top: 28.0%;
    left: 7.5%;
}

.halte-postjesweg {
    top: 32.7%;
    left: 7.5%;
}

.halte-station-lelylaan {
    top: 37.4%;
    left: 7.5%;
}

.halte-heemstedestraat {
    top: 42.2%;
    left: 7.5%;
}

.halte-henk-sneevlietweg {
    top: 46.9%;
    left: 7.5%;
}


.halte-amstelveenseweg {
    top: 53.9%;
    left: 13%;
}

.halte-station-zuid {
    top: 53.1%;
    left: 27.6%;
}

.halte-rai {
    top: 53.9%;
    left: 37.7%;
}

.halte-overamstel {
    top: 53.9%;
    left: 47.3%;
}


.halte-nieuwmarkt {
    top: 23.9%;
    left: 57%;
}

.halte-waterlooplein {
    top: 28.9%;
    left: 57%;
}

.halte-weesperplein {
    top: 33.9%;
    left: 57%;
}

.halte-wibautstraat {
    top: 38.8%;
    left: 57%;
}

.halte-amstelstation {
    top: 43.9%;
    left: 57%;
}

.halte-spaklerweg {
    top: 48.9%;
    left: 57%;
}

.halte-van-der-madeweg {
  top: 59.2%;
    left: 57%;
}


.halte-centraal-station {
    top: 17.8%;
    left: 51.5%;
}


.halte-duivendrecht {
    top: 65.4%;
    left: 56%;
}

.halte-strandvliet {
    top: 71.6%;
    left: 56%;
}

.halte-bijlmer-arena {
    top: 77.8%;
    left: 56%;
}

.halte-bullewijk {
    top: 84%;
    left: 56%;
}

.halte-holendrecht {
    top: 90.2%;
    left: 56%;
}


.halte-noord {
    top: 5.8%;
    left: 69.3%;
}

.halte-noorderpark {
    top: 12%;
    left: 61.1%;
}

.halte-centraal-station {
    top: 17.8%;
    left: 51.5%;
}

.halte-rokin {
    top: 23.1%;
    left: 43.8%;
}

.halte-vijzelgracht {
    top: 33.8%;
    left: 36.2%;
}

.halte-de-pijp {
    top: 41.3%;
    left: 36.2%;
}

.halte-europaplein {
    top: 48.7%;
    left: 36.2%;
}

.halte-venserpolder {
    top: 65.8%;
    left: 68.2%;
}

.halte-diemen-zuid {
    top: 65.8%;
    left: 83.6%;
}

.halte-verrijn-stuartweg {
    top: 68.4%;
    left: 94.7%;
}

.halte-ganzenhoef {
    top: 74.7%;
    left: 94.7%;
}

.halte-kraaiennest {
    top: 80.8%;
    left: 94.7%;
}

.halte-gaasperplas {
    top: 86%;
    left: 94.7%;
}

.halte-reigersbos {
    top: 95%;
    left: 66.5%;
}

.halte-gein {
    top: 95%;
    left: 79.8%;
}