html, body {
    margin: 0;
    height: 100%;
}
#footer {
    padding: 0.25rem .5rem;
    text-align: right;
}

/* Use max height for pop-up panels */
#map > calcite-panel > * {
    overflow: auto;
    max-height: calc(100vh - 100px - 2rem);
    max-width: 528px;
}

/* Add padding to panels that don't use it automatically */
#map > .measurement-panel > *, #map > #contact > * {
    padding: 0.75em;
    background: var(--calcite-color-foreground-1);
}
#map > #contact > * {
    padding: 1em;
    width: 500px;
    max-width: calc(100% - 2em);
}
.panel-contents { padding: 0 1em; }

/* Shadow for custom map button */
#map > #streetView { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

/* Hide custom map button */
#map > #streetView[hidden] { display: none; }

/* Align inline icons with text */
.aligned-icon { vertical-align: sub; }

/* Figure (image & video) styling */
figure { margin: 1em 0; }
figure img, figure video { width: 100%; }
figcaption {
    font-size: .9em;
    text-align: right;
}
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button {
    display: none;
}

/* Themed text */
.text-danger { color: var(--calcite-color-status-danger); }

/* Fix panels being covered by map controls */
calcite-panel { z-index: 1; }

/* Form alignment */
calcite-text-area + .row { margin-top: 1em; }
.submit {
    margin-top: .5em;
    text-align: end;
    align-content: end;
}

/* Very simple flexbox rows */
@media (min-width: 576px) {
    .row { display: flex; }
    .row > * {
        flex: 1 0 auto;
        margin: 0 .5em;
    }
    .row > :first-child {
        margin-left: 0;
    }
    .row > :last-child {
        margin-right: 0;
    }
}
.row > .col-auto { flex: 0 0 auto; }
.row > .col-5 { flex: 1 1 41.6666667%; }
.row > .col-7 { flex: 1 1 58.3333333%; }

/* Padding */
.p-0  { padding:        0; }
.px-0 { padding-right:  0; padding-left:   0; }
.py-0 { padding-top:    0; padding-bottom: 0; }
.pt-0 { padding-top:    0; }
.pr-0 { padding-right:  0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left:   0; }

/* Margins */
.m-0  { margin:         0; }
.mx-0 { margin-right:   0; margin-left:    0; }
.my-0 { margin-top:     0; margin-bottom:  0; }
.mt-0 { margin-top:     0; }
.mr-0 { margin-right:   0; }
.mb-0 { margin-bottom:  0; }
.ml-0 { margin-left:    0; }