body {
    background: #eef;
    font-family: Calibri, Verdana, "Trebuchet MS", Helvetica, sans-serif;
    margin: 0;
    --info-close-height: 80px;
    --info-close-landscape-height: 55px;
    --info-open-height: 240px;
}

.map {
    height: 200px;
}

#floatpanel {
    /*background: rgba(50, 0, 0, .2);*/
    width: 100%;
    height: 48px;
    bottom: var(--info-close-height);
    position: fixed;
}

#floatpanel .block {
    display: inline-block;
    background: rgba(200, 200, 255, 1);
    padding: 3px;
    margin: 2px;
    border-radius: 5px;
    overflow: hidden;
    font-size: 120%;
    font-weight: bold;
    filter: drop-shadow(1px 1px 3px);
}

#floatpanel .block small {
    font-size: 75%;
    font-weight: normal;
}

#floatpanel .block div {
    background: rgba(255, 180, 0, .7);
    font-size: 50%;
    font-weight: normal;
    padding: 0 3px;
    border-radius: 5px;
}

/*noinspection CssInvalidPseudoSelector*/
body:has(#panel.open) > #floatpanel {
    bottom: var(--info-open-height);
}

#panel {
    background: rgba(0, 0, 0, .7);
    color: #fff;
    width: 100%;
    height: var(--info-close-height);
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5px;
    overflow: hidden;
    box-sizing: border-box;
}

@media (orientation: landscape) {
    #panel {
        height: var(--info-close-landscape-height);
    }

    #floatpanel{
        bottom: var(--info-close-landscape-height);
    }
}

#panel.open {
    height: var(--info-open-height);
}

#panel button {
    margin: 2px;
    width: 40px;
    height: 40px;
    font-size: 110%;
    border-radius: 10px;
    background-size: 30px;
    vertical-align: top;
}

#panel button.active {
    background-color: #f77;
}

#record {
    background: #eee url('../data/bt-record.svg') center no-repeat;
}

#upload {
    background: #eee url('../data/bt-upload.svg') center no-repeat;
}

#fullscreen {
    background: #eee url('../data/bt-fullscreen.svg') center no-repeat;
}

#more {
    background: #eee url('../data/bt-more.svg') center no-repeat;
}

#group {
    background: #eee url('../data/bt-group.svg') center no-repeat;
}

#save {
    background: #eee url('../data/bt-save.svg') center no-repeat;
}

#load {
    background: #eee url('../data/bt-load.svg') center no-repeat;
}

#replay {
    background: #eee url('../data/bt-replay.svg') center no-repeat;
}

#clear {
    background: #eee url('../data/bt-clear.svg') center no-repeat;
}

#preload {
    background: #eee url('../data/bt-preload.svg') center no-repeat;
}

#strava {
    background: #eee url('../data/bt-strava.svg') center no-repeat;
}

#orientation {
    background: #eee url('../data/bt-orientation.svg') center no-repeat;
}

#infobox {
    font-size: 110%;
    display: inline;
}

#infobox .block {
    display: inline-block;
    background: rgba(200, 200, 255, 0.5);
    padding: 0 3px;
    margin: 2px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#panel .msg {
    color: #afa;
}

#panel .error {
    color: #f88;
}

#logs {
    display: none;
    font-size: 80%;
}

.open #logs {
    display: block;
}

#modal {
    background: rgba(0, 0, 0, 0.8);
    /*top: 0;*/
    width: 300px;
    height: 130px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 120%;
}

#screen {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/*noinspection CssInvalidPseudoSelector*/
#screen:has(#modal.show) {
    display: block;
}

#modal input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid white;
    background-color: transparent;
    outline: 0;
    color: #fff;
    font-size: 110%;
}

#modal input[type=text]::selection {
    font-size: 120%;
    color: #000;
    background: rgba(200, 200, 255, 0.6);
}

#modal .buttons {
    text-align: right;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

#modal .buttons button {
    font-size: 120%;
    border-radius: 10px;
}

/*.rotate-north {*/
/*top: 3.25em;*/
/*right: .5em;*/
/*}*/

/*.ol-touch .rotate-north {*/
/*top: 80px;*/
/*}*/

.darkmode-control {
    top: 5.075em;
    right: .5em;
}

.darkmode-control button {
    background: #fff url('../data/c-dark.svg') center no-repeat;
    background-size: 1.2em;
}

.ol-touch .darkmode-control {
    top: 7.025em;
}

.ol-compass {
    font-size: 120%;
    /*font-size: 30pt;*/
    /*font-size: 1.2rem;*/
    /*display: none;*/
}

/*.ol-touch .ol-compass {*/
/*font-size: 1.3rem;*/
/*}*/

.darkmode-control.active button {
    filter: invert(100%);
    /*background: #555;*/
    /*color: #fff;*/
}

.swap-layer {
    top: 3.55em;
    right: .5em;
}

.swap-layer button {
    background: #fff url('../data/c-layers.svg') center no-repeat;
    background-size: 1.2em;
}

.swap-layer.active.a1 button {
    background-color: hsl(110, 90%, 80%);
}

.swap-layer.active.a2 button {
    background-color: hsl(200, 90%, 80%);
}

.swap-layer.active.a3 button {
    background-color: hsl(290, 90%, 80%);
}

.swap-layer.active.a4 button {
    background-color: hsl(360, 90%, 80%);
}

.swap-layer.active button {
    /*color: #ddd;*/
}

.swap-layer.active button:hover {
    /*color: #fff;*/
}

.ol-touch .swap-layer {
    top: 4.85em;
}

.follow-control {
    top: .5em;
    right: .5em;
}

.follow-control button {
    background: #fff url('../data/c-follow.svg') center no-repeat;
    background-size: 1.2em;
    /*color: #ddd;*/
    filter: invert(100%);
}

.follow-control button:focus, .follow-control button:hover {
    /*background-color: #fff;*/
    /*filter: none;*/
}

.follow-control.active button {
    filter: none;
    /*background-color: white;*/
    /*color: var(--ol-subtle-foreground-color);*/
}

.follow-control.active button:hover {
    /*color: var(--ol-foreground-color);*/
    filter: none;
}

.ol-rotate {
    top: 2.025em !important;
    overflow: hidden;
}

.ol-rotate span {
    background: url('../data/c-north.svg') center no-repeat;
    background-size: 80%;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.ol-touch .ol-rotate {
    top: 2.675em !important;
}

.more {
    display: none;
}

.open .more {
    display: inline-block;
}