.str-geo {
    margin-block: 1.5rem;
}
.str-geo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
.str-geo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1.25rem;
    align-items: start;
}
.str-geo-stage {
    height: clamp(30rem, 55vw, 44rem);
    position: relative;
    overflow: hidden;
    background: #f2f2e8;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    touch-action: pan-y;
}
.str-geo-stage.is-draggable {
    cursor: grab;
    touch-action: none;
}
.str-geo-stage.is-draggable:active {
    cursor: grabbing;
}
.str-geo-stage svg {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
}
.geo-airport {
    fill: #dce8ec;
    stroke: #65818e;
    stroke-width: 5;
    fill-rule: evenodd;
}
.geo-road {
    fill: none;
    stroke: #d5d5c9;
    stroke-width: 7;
}
.geo-road-major {
    stroke: #c1b58e;
    stroke-width: 15;
}
.geo-runway {
    fill: none;
    stroke: #80939c;
    stroke-width: 38;
}
.geo-taxiway {
    fill: none;
    stroke: #acbbc1;
    stroke-width: 13;
}
.geo-apron {
    fill: #c4d2d8;
    stroke: #a6b9c2;
    stroke-width: 2;
}
.geo-building {
    fill: #d5d9db;
    stroke: #a5b0b6;
    stroke-width: 1;
}
.geo-parking {
    fill: #bbd8ed;
    stroke: #276288;
    stroke-width: 3;
}
.geo-terminal {
    fill: #819cab;
    stroke: #12324b;
    stroke-width: 3;
}
.geo-marker {
    cursor: pointer;
    outline: none;
}
.geo-marker circle {
    fill: #176294;
    stroke: white;
    stroke-width: 2;
}
.geo-marker-terminal circle {
    fill: #12324b;
}
.geo-marker-private circle {
    fill: #984100;
}
.geo-marker text {
    fill: white;
    font: bold 12px system-ui, sans-serif;
    pointer-events: none;
}
.geo-marker .geo-map-label {
    fill: #12324b;
    stroke: #fff;
    stroke-width: 3;
    paint-order: stroke;
    font-weight: 650;
}
.geo-approximate circle {
    stroke-dasharray: 3 2;
}
.geo-marker:focus circle, .geo-marker.is-selected circle {
    stroke: #000;
    stroke-width: 4;
}
.str-geo-north {
    position: absolute;
    right: .75rem;
    top: .75rem;
    padding: .25rem .6rem;
    border-radius: .3rem;
    background: white;
    color: #12324b;
    font-weight: bold;
    pointer-events: none;
}
.str-geo-attribution {
    font-size: .8rem;
    margin-block: .5rem;
}
.str-geo-selection {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
}
.str-geo-selection h3 {
    margin-top: 0;
    font-size: 1.3rem;
}
.str-geo-selection p:last-child {
    margin-bottom: 0;
}
.str-geo-filters {
    padding: 1rem 0;
}
.str-geo-filters label, .str-geo-filters strong {
    display: block;
    padding-block: .3rem;
}
.str-geo-filters label {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
}
.str-geo-filters input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    min-width: 1.2rem;
    padding: 0;
    margin: 0;
}
.str-geo-point-list {
    max-height: 30rem;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--surface);
}
.str-geo-point-list h4 {
    margin-block: .5rem;
}
.str-geo-point-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.str-geo-point-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-block: .45rem;
    font-size: .9rem;
}
.str-geo-key {
    display: grid;
    place-items: center;
    flex: 0 0 2.5rem;
    min-height: 2rem;
    background: #176294;
    color: white;
    font-size: .8rem;
    font-weight: bold;
    border-radius: .3rem;
}
.str-geo-key-terminal {
    background: #12324b;
}
.str-geo-key-private {
    background: #984100;
}
@media (max-width: 62rem) {
    .str-geo-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .str-geo-point-list {
        max-height: 23rem;
    }
}
@media print {
    .str-geo, #str-geo-data {
        display: none !important;
    }
}

.geo-marker-inactive circle {
    fill: #52606a;
    stroke-dasharray: 3 2;
}