html, body {
    margin: 0;
    height: 100%;
}
html { font-size: 16px; }

/* Variables */
:root {
    --gap: 1.5em;
    --rfcd-blue: #0c699a;
    --calcite-color-brand: var(--rfcd-blue);
}

/* Hyperlinks */
a { color: var(--rfcd-blue); }
a:hover, a:active { color: hsl(from var(--rfcd-blue) h calc(s * .75) calc(l * 1.5)); }

/* Map container */
#mapContainer {
    min-height: 650px;
    border: 1px solid var(--calcite-text-area-border-color, var(--calcite-color-border-input));
}

/* Search component */
arcgis-search, .esri-search__input { width: 20rem; }

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

/* Text styling */
h1 {
    font-size: 1.4em;
    text-transform: uppercase;
    margin: 0;
}
h2 {
    font-size: 1.2em;
    text-transform: uppercase;
    margin: calc(var(--gap) * .5) 0 0 0;
    color: var(--calcite-color-text-3);
}
p, h1, h2 { line-height: 1.4; }
.text-uppercase { text-transform: uppercase; }

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

/* Display */
.d-none { display: none !important; }

/* Form alignment */
#reportForm .submit {
    text-align: end;
    align-content: end;
}

/* Very simple flexbox rows */
.row, .row-sm {
    display: flex;
    flex-wrap: wrap;
}
.row > * {
    margin: calc(var(--gap) * .5);
    flex: 1 1 auto;
}
.row-sm { padding: calc(var(--gap) * .5) 0; }
.row-sm > * {
    margin: 0 calc(var(--gap) * .5);
    flex: 1 0 calc(100% - var(--gap));
    width: 100px;
}
@media (min-width: 576px) {
    .row-sm { padding: 0; }
    .row-sm > * {
        margin: calc(var(--gap) * .5);
        flex: 1 1 auto;
    }
}
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.col-auto { flex: 0 0 auto; }
.col-map { flex: 1 1 500px; }
.col-form { flex: 1 1 400px; }
.justify-content-end { justify-content: end; }
.align-content-center { align-content: center; }

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

.pl-1, .px-1, .p-1 { padding-left:   calc(var(--gap) * .25); }
.pr-1, .px-1, .p-1 { padding-right:  calc(var(--gap) * .25); }
.pt-1, .py-1, .p-1 { padding-top:    calc(var(--gap) * .25); }
.pb-1, .py-1, .p-1 { padding-bottom: calc(var(--gap) * .25); }

.pl-2, .px-2, .p-2 { padding-left:   calc(var(--gap) * .5); }
.pr-2, .px-2, .p-2 { padding-right:  calc(var(--gap) * .5); }
.pt-2, .py-2, .p-2 { padding-top:    calc(var(--gap) * .5); }
.pb-2, .py-2, .p-2 { padding-bottom: calc(var(--gap) * .5); }

.pl-3, .px-3, .p-3 { padding-left:   var(--gap); }
.pr-3, .px-3, .p-3 { padding-right:  var(--gap); }
.pt-3, .py-3, .p-3 { padding-top:    var(--gap); }
.pb-3, .py-3, .p-3 { padding-bottom: var(--gap); }

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

.ml-1, .mx-1, .m-1 { margin-left:   calc(var(--gap) * .25); }
.mr-1, .mx-1, .m-1 { margin-right:  calc(var(--gap) * .25); }
.mt-1, .my-1, .m-1 { margin-top:    calc(var(--gap) * .25); }
.mb-1, .my-1, .m-1 { margin-bottom: calc(var(--gap) * .25); }

.ml-2, .mx-2, .m-2 { margin-left:   calc(var(--gap) * .5); }
.mr-2, .mx-2, .m-2 { margin-right:  calc(var(--gap) * .5); }
.mt-2, .my-2, .m-2 { margin-top:    calc(var(--gap) * .5); }
.mb-2, .my-2, .m-2 { margin-bottom: calc(var(--gap) * .5); }

.ml-3, .mx-3, .m-3 { margin-left:   var(--gap); }
.mr-3, .mx-3, .m-3 { margin-right:  var(--gap); }
.mt-3, .my-3, .m-3 { margin-top:    var(--gap); }
.mb-3, .my-3, .m-3 { margin-bottom: var(--gap); }

.ml-n1, .mx-n1, .m-n1 { margin-left:   calc(var(--gap) * .25 * -1); }
.mr-n1, .mx-n1, .m-n1 { margin-right:  calc(var(--gap) * .25 * -1); }
.mt-n1, .my-n1, .m-n1 { margin-top:    calc(var(--gap) * .25 * -1); }
.mb-n1, .my-n1, .m-n1 { margin-bottom: calc(var(--gap) * .25 * -1); }

.ml-n2, .mx-n2, .m-n2 { margin-left:   calc(var(--gap) * .5 * -1); }
.mr-n2, .mx-n2, .m-n2 { margin-right:  calc(var(--gap) * .5 * -1); }
.mt-n2, .my-n2, .m-n2 { margin-top:    calc(var(--gap) * .5 * -1); }
.mb-n2, .my-n2, .m-n2 { margin-bottom: calc(var(--gap) * .5 * -1); }

.ml-n3, .mx-n3, .m-n3 { margin-left:   calc(var(--gap) * -1); }
.mr-n3, .mx-n3, .m-n3 { margin-right:  calc(var(--gap) * -1); }
.mt-n3, .my-n3, .m-n3 { margin-top:    calc(var(--gap) * -1); }
.mb-n3, .my-n3, .m-n3 { margin-bottom: calc(var(--gap) * -1); }