:root,
:host {
--ol-background-color: white;
--ol-accent-background-color: #F5F5F5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);
--ol-partial-background-color: rgba(255, 255, 255, 0.75);
--ol-foreground-color: #333333;
--ol-subtle-foreground-color: #666666;
--ol-brand-color: #00AAFF;
}

.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 1.5px solid var(--ol-background-color);
background-color: var(--ol-partial-background-color);
}

.ol-mouse-position {
top: 8px;
right: 8px;
position: absolute;
}

.ol-scale-line {
background: var(--ol-partial-background-color);
border-radius: 4px;
bottom: 8px;
left: 8px;
padding: 2px;
position: absolute;
}

.ol-scale-line-inner {
border: 1px solid var(--ol-subtle-foreground-color);
border-top: none;
color: var(--ol-foreground-color);
font-size: 10px;
text-align: center;
margin: 1px;
will-change: contents, width;
transition: all 0.25s;
}

.ol-scale-bar {
position: absolute;
bottom: 8px;
left: 8px;
}

.ol-scale-bar-inner {
display: flex;
}

.ol-scale-step-marker {
width: 1px;
height: 15px;
background-color: var(--ol-foreground-color);
float: right;
z-index: 10;
}

.ol-scale-step-text {
position: absolute;
bottom: -5px;
font-size: 10px;
z-index: 11;
color: var(--ol-foreground-color);
text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
position: absolute;
font-size: 12px;
text-align: center;
bottom: 25px;
color: var(--ol-foreground-color);
text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
position: relative;
height: 10px;
z-index: 9;
box-sizing: border-box;
border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
background-color: var(--ol-background-color);
}

.ol-unsupported {
display: none;
}

.ol-viewport,
.ol-unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
all: unset;
overflow: hidden;
}

.ol-viewport {
touch-action: pan-x pan-y;
}

.ol-selectable {
-webkit-touch-callout: default;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}

.ol-grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}

.ol-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}

.ol-control {
position: absolute;
background-color: var(--ol-subtle-background-color);
border-radius: 4px;
}

.ol-zoom {
top: .5em;
left: .5em;
}

.ol-rotate {
top: .5em;
right: .5em;
transition: opacity .25s linear, visibility 0s linear;
}

.ol-rotate.ol-hidden {
opacity: 0;
visibility: hidden;
transition: opacity .25s linear, visibility 0s linear .25s;
}

.ol-zoom-extent {
top: 4.643em;
left: .5em;
}

.ol-full-screen {
right: .5em;
top: .5em;
}

.ol-control button {
display: block;
margin: 1px;
padding: 0;
color: var(--ol-subtle-foreground-color);
font-weight: bold;
text-decoration: none;
font-size: inherit;
text-align: center;
height: 1.375em;
width: 1.375em;
line-height: .4em;
background-color: var(--ol-background-color);
border: none;
border-radius: 2px;
}

.ol-control button::-moz-focus-inner {
border: none;
padding: 0;
}

.ol-zoom-extent button {
line-height: 1.4em;
}

.ol-compass {
display: block;
font-weight: normal;
will-change: transform;
}

.ol-touch .ol-control button {
font-size: 1.5em;
}

.ol-touch .ol-zoom-extent {
top: 5.5em;
}

.ol-control button:hover,
.ol-control button:focus {
text-decoration: none;
outline: 1px solid var(--ol-subtle-foreground-color);
color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
border-radius: 2px 2px 0 0;
}

.ol-zoom .ol-zoom-out {
border-radius: 0 0 2px 2px;
}

.ol-attribution {
text-align: right;
bottom: .5em;
right: .5em;
max-width: calc(100% - 1.3em);
display: flex;
flex-flow: row-reverse;
align-items: center;
}

.ol-attribution a {
color: var(--ol-subtle-foreground-color);
text-decoration: none;
}

.ol-attribution ul {
margin: 0;
padding: 1px .5em;
color: var(--ol-foreground-color);
text-shadow: 0 0 2px var(--ol-background-color);
font-size: 12px;
}

.ol-attribution li {
display: inline;
list-style: none;
}

.ol-attribution li:not(:last-child):after {
content: " ";
}

.ol-attribution img {
max-height: 2em;
max-width: inherit;
vertical-align: middle;
}

.ol-attribution button {
flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
display: none;
}

.ol-attribution:not(.ol-collapsed) {
background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
bottom: 0;
right: 0;
border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
display: none;
}

.ol-zoomslider {
top: 4.5em;
left: .5em;
height: 200px;
}

.ol-zoomslider button {
position: relative;
height: 10px;
}

.ol-touch .ol-zoomslider {
top: 5.5em;
}

.ol-overviewmap {
left: 0.5em;
bottom: 0.5em;
}

.ol-overviewmap.ol-uncollapsible {
bottom: 0;
left: 0;
border-radius: 0 4px 0 0;
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
display: block;
}

.ol-overviewmap .ol-overviewmap-map {
border: 1px solid var(--ol-subtle-foreground-color);
height: 150px;
width: 150px;
}

.ol-overviewmap:not(.ol-collapsed) button {
bottom: 0;
left: 0;
position: absolute;
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
display: none;
}

.ol-overviewmap:not(.ol-collapsed) {
background: var(--ol-subtle-background-color);
}

.ol-overviewmap-box {
border: 1.5px dotted var(--ol-subtle-foreground-color);
}

.ol-overviewmap .ol-overviewmap-box:hover {
cursor: move;
}

.ol-overviewmap .ol-viewport:hover {
cursor: pointer;
}


* {
box-sizing: border-box;
}

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, em, small, b, i, ol, ul, li, label, table, tbody, tfoot, thead, tr, th, td {

margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
font-size: 11pt;
}

p {
font-size: 1em;
}




* {

font-family: Verdana;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


iframe {
border: 0px;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}




.ol-attribution {
left: 0.5em;
right: auto;
text-align: left;
}


body.ui-lefthanded .ol-attribution {
left: auto;
right: 2mm;
}

.ol-attribution li {
display: block;
}

body.ui-lefthanded .ol-scale-line {
left: 20mm;
right: auto;
}

body.ui-righthanded .ol-scale-line {
left: auto;
right: 20mm;
}





#iui_pane {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

width: auto;
height: auto;
}

#iui_modal {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;

width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.2);
}


#iui_actions {

position: absolute;

top: 2mm;
left: 2mm;
right: auto;
bottom: auto
width: auto;
height: auto;

display: flex;
flex-wrap: nowrap;
flex-direction: row;
}


body.ui-lefthanded #iui_actions {
left: auto;
right: 2mm;
flex-direction: row-reverse;
}

#iui_zoom { 

position: absolute;

top: auto;
left: auto;
right: 2mm;
bottom: 2mm;
width: auto;
height: auto;

display: flex;
flex-wrap: nowrap;
flex-direction: column;
}


body.ui-lefthanded #iui_zoom {
left: 2mm;
right: auto;
}


#iui_debug {
position: absolute;

top: auto;
left: 2mm;
right: 30mm;
bottom: 12mm;

width: auto;
height: 20mm;

vertical-aligment: bottom;

font-size: 3mm;
font-variant: small-caps;
background-color: rgba(255, 255, 255, 0.4);
}

.ui-fullscreen {

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

width: auto;
height: auto;

margin: 0px;
padding: 0px;
}

.ui-button {

color: white;
text-align: center;

font-size: 5mm;
font-weight: bold;
font-variant: small-caps;

margin: 1mm 1mm;
padding: 2mm 2mm;
border: solid black 1px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,1.0);
background-color: #0036a7;
}

.ui-button:disabled { background-color: #888; }
.ui-button.ui-active { background-color: #d62718; }

.ui-icon {

margin: 1mm;
width: 12mm;
height: 12mm;
cursor: pointer;

border: solid black 1px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,1.0);

background-color: #0036a7;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.ui-icon.ui-active { background-color: #d62718; }
.ui-icon.ui-grayed { background-color: #888; }
.ui-icon.ui-pending { background-color: #f5b100; }


.ui-dialog {

position: absolute;

top: 2mm;
left: 2mm;
right: 2mm;
bottom: 2mm;
width: auto;
height: auto;

margin: 0px;
padding: 2mm;

border: solid black 1px;
box-shadow: 3px 3px 5px 0px rgba(0,0,0,1.0);
background-color: white;

overflow-y: auto;
overflow-x: hidden;
}

.ui-dialog h1 {
font-size: 6mm;
text-align: center;
margin: 2mm 4mm;
}


#iui_search {
background-image:
url('/icon-magnifying-glass-3x.png');
}
#iui_zoomout {
background-image:
url('/icon-zoom-out-3x.png');
}
#iui_zoomin {
background-image:
url('/icon-zoom-in-3x.png');
}
#iui_settings {
margin-top: 5mm;
margin-bottom: 5mm;
background-image:
url('/icon-cog-3x.png');
}

#iui_flip {
background-image:
url('/elevator-3x.png');
}


#iui_test {
background-image:
url('/icon-bug-3x.png');
}
#iui_test.ui-active {
background-image:
url('/icon-bug-3x.png');
}
#iui_keep {
margin-bottom: 5mm;
background-image:
url('/icon-fullscreen-enter-3x.png');
}
#iui_keep.ui-active {
background-image:
url('/icon-fullscreen-enter-3x.png');
}
#iui_location {
background-image:
url('/icon-compass-3x.png');
}
#iui_location.ui-active {
background-image:
url('/icon-compass-3x.png');
}
#iui_speed {
background-image:
url('/icon-dial-3x.png');
}
#iui_speed.ui-active {
background-image:
url('/icon-dial-3x.png');
}
#iui_pavement {
background-image:
url('/icon-fork-3x.png');
}
#iui_pavement.ui-active {
background-image:
url('/icon-fork-3x.png');
}
#iui_intensity {
background-image:
url('/icon-pulse-3x.png');
}
#iui_intensity.ui-active {
background-image:
url('/icon-pulse-3x.png');
}
#iui_quality {
background-image:
url('/icon-wrench-3x.png');
}
#iui_quality.ui-active {
background-image:
url('/icon-wrench-3x.png');
}
#iui_weather {
background-image:
url('/icon-rain-3x.png');
}
#iui_weather.ui-active {
background-image:
url('/icon-rain-3x.png');
}

#iui_mmlorto {
background-image:
url('/icon-orto-3x.png');
}
#iui_mmlorto.ui-active {
background-image:
url('/icon-orto-3x.png');
}
#iui_mmlselko {
background-image:
url('/icon-selko-3x.png');
}
#iui_mmlselko.ui-active {
background-image:
url('/icon-selko-3x.png');
}
#iui_mmltausta {
background-image:
url('/icon-tausta-3x.png');
}
#iui_mmltausta.ui-active {
background-image:
url('/icon-tausta-3x.png');
}
#iui_mmlmaasto {
background-image:
url('/icon-maasto-3x.png');
}
#iui_mmlmaasto.ui-active {
background-image:
url('/icon-maasto-3x.png');
}



#idrivemode_pane {

display: flex;
flex-wrap: nowrap;
flex-direction: column;

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

width: auto;
height: auto;
}


#idrivemode_pane > div {
flex-grow: 1;
margin: 4mm;
border: solid grey 6mm;

background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

#idrivemode_upper { background-image: url('/drivemode-zoom-in.svg'); }
#idrivemode_lower { background-image: url('/drivemode-zoom-out.svg'); }






#isearch_search {
width: 100%;
}
#isearch_input {
width: 100%;
border: none;
outline: none;
padding: 2mm;
font-size: 6mm;
font-weight: bold;
font-variant: small-caps;
background-color: #eee;
}

#isearch_results {
font-variant: small-caps;
}

#isearch_results > *:nth-child(even) {
background-color: #ddd;
}

#isearch_results > .ui-fault {
color: #888;
padding: 4mm 8mm;
font-size: 6mm;
font-weight: bold;
}

.search-row {
padding: 2mm;
cursor: pointer;
}
.search-title {
font-weight: bold;
font-size: 6mm;
}
.search-descr {
font-weight: normal;
font-size: 4mm;
}




#ipick_tools {

display: flex;
position: absolute;

top: auto;
left: 2mm;
right: 20mm;
bottom: 12mm;

width: auto;
height: auto;
}

#ipick_tools > * {
flex-grow: 1;
flex-shrink: 1;
}


#ipick_cancel { display: none; }

#istreet_close { 

position: absolute;

top: 2mm;
left: auto;
right: 2mm;
bottom: auto;

background-image:
url('//icons.nanona.fi/open-iconic/png-white/x-3x.png');
}




.config-row {
display: flex;

flex-wrap: nowrap;
flex-direction: row;
}

.config-row > div {
flex-grow: 1;
flex-shrink: 1;
}

#iconfig_pane > select {

width: 100%;
outline: none;
border: none;

font-size: 6mm;
font-weight: bold;
font-variant: small-caps;
padding: 2mm;

}

#iconfig_url {

border: 0;

height: 10mm;
padding: 1mm;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 12mm;

cursor: pointer;
overflow: hidden;

background-color: #ddd;

text-align: center;
font-size: 6mm;
font-weight: bold;
}





#ilics_pane {
padding: 3mm;
font-size: 12pt;
}

#ilics_pane h1 { font-size: 15pt; }
#ilics_pane a {
color: #0036a7;
text-decoration: none;
}

#ilics_pane p {
margin-top: 4mm;
margin-bottom: 4mm;
}

#ilics_pane ul {
margin-top: 4mm;
margin-bottom: 4mm;
margin-left: 8mm;
}




#iinfo_pane {
padding: 3mm;
font-size: 12pt;
}

#iinfo_pane h1 { font-size: 15pt; }
#iinfo_pane a {
color: #0036a7;
text-decoration: none;
}

#iinfo_pane p {
margin-top: 4mm;
margin-bottom: 4mm;
}

#iinfo_pane ul {
margin-top: 4mm;
margin-bottom: 4mm;
margin-left: 8mm;
}




#imarkers_pane {
font-size: 6mm;
}

#imarkers_pane > table {
width: 100%;
}

#imarkers_pane textarea {

width: 100%;
display: block;

border: none;
resize: none;
outline: none;

font-size: inherit;
margin-bottom: 1mm;
background-color: #eeeeee;
}

#imarkers_pane td {
margin: 0px;
padding: 1mm;
overflow: hidden;

font-size: 5mm;
text-align: left;
vertical-align: middle;
white-space: nowrap;
}

.markers-open {
width: 16mm;
cursor: pointer;
}

.markers-title {
height: 8mm;
font-weight: bold;
}

.markers-descr {
height: 8mm;
font-style: italic;
}





#iextras_pane {
display: flex;

flex-wrap: nowrap;
flex-direction: column-reverse;
}

#iextras_layers {
display: flex;

flex-wrap: nowrap;
flex-direction: row;

width: 100%;
height: 20mm;
margin-top: 10mm;
}


body.ui-lefthanded #iextras_layers {
flex-direction: row-reverse;
}


#iextras_layers > img {

cursor: pointer;
margin: 2px;
padding: 0px;


min-height: 16mm;

border: solid #0036a7 2mm;

flex-grow: 1;
flex-shrink: 1;
}

#iextras_layers > img.ui-active {
border: solid #d62718 2mm;
}

#iextras_mmlorto { background-image: url('/mml-orto.jpeg'); }
#iextras_mmlselko { background-image: url('/mml-selko.jpeg'); }
#iextras_mmlmaasto { background-image: url('/mml-maasto.jpeg'); }
#iextras_mmltausta { background-image: url('/mml-tausta.jpeg'); }







@media (max-height: 11cm) {

#iui_zoom {
flex-direction: row;
}

#iui_settings {
margin-top: 1mm;
margin-bottom: 1mm;
margin-left: 5mm;
margin-right: 5mm;
}

#iui_keep {
margin-top: 1mm;
margin-bottom: 1mm;
margin-left: 0px;
margin-right: 5mm;
}

#iui_actions {
flex-direction: column-reverse;
}


#ipick_tools {
top: 2mm;
left: 16mm;
right: 2mm;
bottom: auto;
}


body.ui-lefthanded .ol-scale-line {
left: 2mm;
right: right;
bottom: 16mm;
}

body.ui-righthanded .ol-scale-line {
left: auto;
right: 2mm;
bottom: 16mm;
}
}


@media (min-width: 15cm) {

#iui_actions {
left: auto;
right: 2mm;
flex-direction: row-reverse;
}


body.ui-lefthanded > #iui_actions {
left: 2mm;
right: auto;
flex-direction: row;
}

body.ui-lefthanded > .ui-dialog {
left: auto;
width: 13cm;
}

body.ui-righthanded > .ui-dialog {
right: auto;
width: 13cm;
}

.ui-icon {
-background-color: green;
}


#ipick_cancel { display: initial; }
}

@media (orientation: landscape) {


#idrivemode_pane {
flex-direction: row-reverse;
}
}