@import url("/fonts/fira_code.css");

body {
    font: 13px/24px 'Fira Code', monospace;
    font-feature-settings: "zero", "ss03", "ss05";
    margin: 0;
}

.layer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto;
}

.hidden { display: none; }

/* COMPONENTS */

a.vnd, a.vnd:visited, a.vnd:focus, a.vnd:hover { color: blue; }

pre { font: inherit; }

button.action, button.link, label.vnd, input.vnd {
    padding: 0.2308em 0 0.0769em;
}
button.action, button.link, input.vnd {
    font: inherit;
    line-height: 1.2308em;
}
button.action, button.link, label.vnd {
    user-select: none;
}
a.vnd:focus, button.action:focus, button.link:focus, input.vnd:focus,
a.vnd:active, button.action:active, button.link:active,
label.vnd:active:not(.disabled),
label.vnd:focus-within {
    outline: 4px solid rgba(255, 255, 0, 0.75);
}

label.vnd {
    white-space: nowrap;
}
label.vnd > input[type=checkbox] {
    font: inherit;
    width: 2ch;
    margin: 0 0.5ch;
    padding: 0;
}
label.vnd > input[type=checkbox]:focus {
    outline: none;
}
label.vnd > span {
    white-space: normal;
}

label.vnd:active, button.link:active, button.action:active {
    color: #555;
}

label.vnd.disabled, button.link[disabled], button.action[disabled] {
    color: #aaa;
}

button.link {
    cursor: pointer;
    border: none;
    background: transparent;
    text-decoration: 1px dotted underline;
    margin: unset;
}

.choice {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1ch;
    padding: 1px 0;
}
.choice button.link {
    padding: 4px 1ch 2px; /* +1 vertical */
}
.choice button.link.current {
    color: #fff;
    background-color: #333;
    text-decoration: none;
}

button.action {
    padding-left: calc(1ch - 1px); padding-right: calc(1ch - 1px);
    border: 1px solid #333;
    background-color: rgb(239, 239, 239);
    border-radius: 2px;
}
button.action:active {
    background-color: #fff;
    border-color: #888;
}
button.action[disabled] {
    background-color: #eee;
    border-color: #aaa;
}

button.action > .vnd.label {
    padding-left: 1ch;
    padding-right: 1ch;
}

button.action, input.vnd {
    padding-left: calc(.5ch - 1px); padding-right: calc(.5ch - 1px);
    margin-left: .5ch; margin-right: .5ch;
}

input.vnd {
    border: 1px solid #888;
    border-radius: 2px;
}
input.vnd[disabled] {
    background-color: #fff;
    color: #545454;
}

.small {
    font-size: 11px;
}


/* GENERIC STYLES */

label.vertical { display: block; margin-bottom: 1em; }
label.vertical .text { margin-left: 1ch; }
label.vertical .other { margin-right: 1ch; }

.tac { text-align: center; }

.mb1 { margin-bottom: 1em; }
.ma1 { margin: 1ch; }
.ma2 { margin: 2ch; }
.pa2 { padding: 2ch; }
.mh4 { margin-left: 4ch; margin-right: 4ch; }
.mv2 { margin-top: 2em; margin-bottom: 2em; }

.ct { opacity: 0.35; }
.c0 { color: #000; }
.c1 { color: #555; }
.c2 { color: #f00; }

li { list-style-type: none; }
li::before { content: "— "; }


/* APP STYLES */

.dialog {
  margin: 4rem 1ch 0;
}
.dialog > * { max-width: 45ch; }


.red { background-color: #f00; color: #fff; }
.block { margin-bottom: 1em; }
.indent { margin-left: 4ch; }

sub { line-height: 0; }


.app { --data-container-width: 370px; /* 395px; */ }
.mapContainer { background-color: #acf; }
.dataContainer {
    box-sizing: border-box;
}
.mapElement { height: 100%; }
.my-icon { opacity: 0.75; }

@media screen and (max-width: 599px) {
    .mapContainer {
        height: 200px; width: 100%;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    .dataContainer { }
}

@media screen and (min-width: 600px) {
    .mapContainer {
        position: fixed;
        right: 0;
        bottom: 0;
        top: 0;
        left: var(--data-container-width);
        height: 100%;
        width: calc(100% - var(--data-container-width));
        box-shadow: -1px 0 4px 1px rgba(0, 0, 0, 0.2);
    }
    .dataContainer { width: var(--data-container-width); }
}

iframe {
    display: inline-block;
    border: none; /* 1px solid red; */
    height: 28px;
    width: 320px;
    overflow: hidden;
}

.nobr {
    display: inline;
    white-space: nowrap;
}