* {
    font-family: Arial, Helvetica, sans-serif;
}

.padded {
    margin: 4pt;
    padding: 4pt;
}

.label {
    display: inline-block;
    width: 100pt;
}

.path {
    height: 15pt;
    padding: 4pt;
    background-color: #ddddddff;
    border-radius: 4pt;
    flex-grow: 1;
}

.plotcontainer {
    overflow-y: scroll;
    overflow-x: hidden;
    flex: 1 1 50%;
}

.plot {
    flex-grow: 1;
}

.flexbox {
    display: flex;
    justify-content: stretch;
}

.vertical {
    flex-direction: column;
}

.horizontal {
    flex-direction: row;
}

.maximized {
    position: absolute;
    top: 0pt;
    bottom: 0pt;
    left: 0pt;
    right: 0pt;
}

.equal {
    flex: 1 1 0;
}

.top_pane {
    background-color: #eeeeeeff;
}

.bottomPane {
    flex-grow: 1;
    height: 80%;
}

.jaia-icon {
    display: "inline-block";
    border: 1pt solid black;
    border-radius: 4pt;
}

select.log {
    width: 100pt;
}

select.time {
    width: 300pt;
}

div.inline {
    display: inline;
}

button {
    display: inline;
}

.centered {
    position: fixed;
    left: 25%;
    top: 25%;
    right: 25%;
    padding: 10px;
    z-index: 10000;
}

.dialog {
    position: fixed;
    left: 10%;
    top: 10%;
    right: 10%;
    z-index: 10000;

    background-color: whitesmoke;
    border: 2px solid darkgray;
    padding: 10pt;
    border-radius: 10pt;
    box-shadow: 2pt 2pt 10pt darkgray;
}

.dialog > .section {
    margin-bottom: 10pt;
}

.dialogHeader {
    font-size: larger;
    font-weight: bold;
    height: 30pt;
    margin-bottom: 10pt;
}

.dialogSectionHeader {
    margin-bottom: 8pt;
}

.list {
    background-color: white;
    border-color: lightgray;
    height: 200pt;
    overflow-y: auto;
}

.buttonSection {
    text-align: right;
}

.listItem {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    display: flex;
}

.listItem:hover {
    background-color: lightblue;
}

.smallCell {
    display: inline-block;
    flex: 2 2 0pt;
}

.bigCell {
    display: inline-block;
    flex: 3 3 0pt;
}

.rightJustify {
    text-align: right;
    padding-right: 10pt;
}

.selected {
    background-color: lightskyblue;
}

#logList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#logListRow {
    background-color: lightgray;
    align-items: center;
    justify-content: center;
}

.logHeaderRow {
    display: flex;
    align-items: center;
    padding: 8pt;
    background-color: lightgray;
}

.logHeaderRow a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.popup {
    background-color: azure;
    border-radius: 10pt;
    box-shadow: 2pt 2pt 10pt darkgray;
    padding: 10pt;
}

#layerSwitcherToggler {
    display: inline-block;
    position: relative;
}

#layerSwitcher {
    display: inline-block;
    vertical-align: top;
    margin: 10pt;
    padding: 10pt 40pt 10pt 10pt;
    border-width: 1pt;
    border-color: black;
    border-style: solid;
    border-radius: 4pt;
    background-color: lightgray;
}

#openlayers-map {
    width: 100%;
    height: 100%;
}

/* Layer Switcher */
li::marker {
    content: "";
}

#mapPane {
    display: block;
    position: relative;
    flex: 1 1 50%;
}

.TimeSlider {
    background-color: #000000ee;
    width: 100%;
    height: 40pt;
    bottom: 0pt;
    user-select: none;
}

.TimeSlider:hover {
    cursor: pointer;
}

.TimeSliderBack {
    background-color: slategray;
    height: 10pt;
    position: relative;
    top: 0pt;
    left: 0pt;
    right: 0pt;
    pointer-events: none;
}

.TimeSliderPast {
    position: absolute;
    background-color: red;
    height: 100%;
    left: 0pt;
    top: 0pt;
    bottom: 0pt;
    pointer-events: none;
}

.TimeSliderStatus {
    position: absolute;
    color: azure;
    bottom: 0pt;
    margin: 10pt;
}

.appName {
    display: inline-block;
    vertical-align: text-bottom;
    margin: 10pt;
}

.button {
    vertical-align: middle;
    width: auto;
    border: none;
    border-radius: 4pt;
    background-color: #0000;
}

.button:hover {
    background-color: lightgray;
}

.deleteButtonSection {
    justify-content: space-evenly;
}

.rightJustify {
    display: "inline-block";
    position: "absolute";
    top: 10pt;
    right: 10pt;
}

.growable {
    flex-grow: 1;
}

div#layerSwitcher {
    display: block;
    position: absolute;
    margin: 10pt;
    padding: 10pt;

    top: 50pt;
    left: 0pt;
}

div.popup > table > tbody > tr > th {
    text-align: left;
    padding-right: 10px;
    font-weight: bold;
}

.ol-attribution {
    display: block;
    position: absolute;
    left: 0pt;
    bottom: 0pt;
    width: 600pt;
    padding: 0pt;
    background-color: #ffffff70;
}

div.ol-attribution > button {
    display: none;
}

.busy-overlay {
    position: absolute;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;

    text-align: center;

    background-color: #00000033;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.no-selected-series-message {
    padding: 40pt 40pt 40pt 40pt;
    line-height: 40pt;
    text-align: center;
    vertical-align: middle;
    font-size: large;
}

#mapControls {
    display: flex;

    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

.mapButton {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 75px;
    height: 50px;

    border: 1px solid black;
    border-radius: 3px;
    background-color: lightgray;
}

.mapButton:hover {
    background-color: darkgray;
}

#measureResult {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px;

    width: 75px;
    height: 50px;

    position: absolute;
    top: 50px;
    left: 299px;
    z-index: 1;

    border: 1px solid black;
    border-radius: 3px;
    background-color: lightgray;
}

#measureResult.notVisible {
    display: none;
}

div.buttonSection {
    display: flex;
}

div.buttonSection > button {
    width: 100pt;
}

.logButton {
    width: 100pt;
}

div.spacer {
    flex-grow: 1;
}

.danger {
    color: red;
}

div.busy-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0pt;
    right: 0pt;
    bottom: 0pt;
    left: 0pt;

    background-color: #00000070;
}

img.busy-icon {
    width: 150pt;
    height: 150pt;
}

.rounded {
    border-radius: 4pt;
}

.shadowed {
    box-shadow: 2pt 2pt 10pt darkgray;
}

.margin {
    margin: 8pt;
}

.padding {
    padding: 8pt;
}

h2 {
    margin: auto;
}

.clipped {
    overflow: hidden;
}

button.selected {
    background-color: darkgray;
}
