.navPage .navData { font-size: 1.25em; padding: 2em 0em 0em 2.75em;}

.navData { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items:center; overflow: hidden; padding-top: 0.5rem; }
.navData .display { flex-grow:1; margin:0em 0.5em 0.5em 0.5em; min-height:2.5em; display:flex; flex-wrap:wrap;  align-items:baseline; justify-content:center; }
.navData .display.hidden { display: none; }
.navData .display > span { font-size: 1.5em; line-height:1;}
.navData .display > span.value { font-size: 3em; margin: 0em 0.125em; min-width: 1.8em; text-align:center;}
.navData .display.divCOG > span.value { margin-right: 0em; }
.navData .xteDisplay .lblIcon { margin: -1em 0em 0em 0.5em; display:inline-block; min-width: 1em; }
.startPageNav .navLiveRoute { font-size: 1.25em; width: 100%; box-shadow: none; border:none; padding:0em; }
body.night .startPageNav .navLiveRoute { box-shadow: none; }
.navPage .navLiveRoute {  }
.navPage .navData .display { min-width:8em; margin-left:1em; margin-right: 1em; }

.navPage .navData > div {min-width:12em; padding-bottom: 1em; flex-grow:1; display: flex; flex-wrap:nowrap; flex-direction: column; align-items: center;}
.navPage .navData > div.hidden { display:none; }
.navPage .navData .pnlCoordinates { flex-direction:column; }
.navPage .navData .pnlCoordinates .display { margin-top: 1em; justify-content:flex-end; }
.navPage .navData .pnlCoordinates .display > span { font-size: 2em;}
.navPage .navData .pnlCoordinates .value { margin-left: 0.25em; }
.navPage .navData .pnlCoordinates .display > span.prefix { font-size: 1.5em; }

.navWaypoint .handle a { cursor: move; }
.navWaypointPlaceholder{border:1px solid #666;}

.navMap { width: 100%; height: 100%; }
.navMap.noControls .leaflet-control-container { display: none; }
.navMyBoatIcon, .navHistoricBoatIcon { display: block; border: 3px solid black; border-radius: 10px; background-color: #FFBF49; }
.navMyBoatIcon { background-color: #FFBF49; }
.navHistoricBoatIcon { background-color: rgba(255, 191, 73, 0.6); }
.navWaypointMarker { color:black;border:2px solid black; border-radius:18px; background-color: rgba(73, 146, 255, 0.8); text-align:center; }
.navWaypointMarker > i { font-size:1.5em; line-height:1.5em;}
.mapWaypointPopup {	min-width: 15em; }
.leaflet-popup-content .customContent { display:flex; flex-direction:column; gap:0.25em; }

.poiMarker, .osmPoiMarker { color:black;border:2px solid black; border-radius:25%; text-align:center; }
.poiMarker { border-bottom-right-radius:0; background-color: rgba(255, 73, 170, 0.8); overflow:hidden; }
.poiMarker.obstacle { background-color: rgba(255, 73, 86, 0.8); }
.poiMarker.hint { background-color: rgba(255, 233, 73, 0.8); }
.poiMarker.measuringstation { background-color: rgba(47, 150, 158, 0.8); }
.poiMarker.pleasure { background-color: rgba(50, 163, 58, 0.8); }
.poiMarker.stay { background-color: rgba(255, 191, 73, 0.8); }
.poiMarker.supply { background-color: rgba(73, 176, 255, 0.8); }
body.night .poiMarker { filter: brightness(50%); }
.leaflet-container .poiMarker > img { width:100%; height:100%; }
.dialogPanel.poiDetails { width:100vw; max-width:42em; }
.poiIcon { width:1.5em; height:1.5em; border:1px solid black; border-radius:25%; display:flex; justify-content:center; align-items:center; }
.poiIcon>img { width:100%; height:100%; }
.osmPoiMarker { border-bottom-left-radius:0; background-color: rgba(170, 170, 170, 0.8); }
.osmPoiMarker.active {background-color: rgba(178, 211, 255, 0.8);} 

.tackMarker {left:-1.5em; top: -0.75em; background-color: rgba(250, 200, 88, 0.9); border: 1px solid rgb(238, 102, 102); border-radius: 0.25em; padding:0em 0.25em;}

.osmPoiDetails { padding: 1px 2px; border: 2px solid #eee; border-width: 1px 0px;}
.osmPoiDetails.active{ border: 2px solid #4992FF; padding: 0px;}

.dialogPanel.editOsmPoi{width:100vw; max-width:60em;}
.dialogPanel.editOsmPoi>div{ flex-grow:1; flex-basis: 18em; min-width:18em; }

.labelValues30-70> * { display:flex; flex-direction: row; flex-wrap:wrap; margin-bottom: 0.5em; }
.labelValues30-70> * >.label { flex-grow:1; flex-basis: 30%; min-width: 10em; }
.labelValues30-70> * >.value { flex-grow:2; flex-basis: 70%; min-width: 10em; } 

.poiForm { display:flex; flex-direction: column; }

.dialogPanel.mapLayerSettings { width:100vw; max-width:36em; }

.anchorWatchMarker {display:flex; justify-content:center; align-items:center;}
.anchorWatchMarker > i {font-size: 1.5em; line-height: 1.5em; }

.dialogPanel.anchorWatchForm { width:100vw; max-width:24em; }

.anchorWatchWarning,
.navOutdatedDataWarning { z-index:11100; margin:1em auto;right:0; left:0; width:50%; max-width:30em; color:black; background-color:rgba(255, 255, 255, 0.8); }

.navLiveRoute { padding: 0em 0em 0em 2em; font-size:2em; max-width:60em; }
.navLiveRoute .lblRouteName { font-size: 1.25em; padding:0.5rem 0rem 0.25rem 0rem; display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width: 100%; text-align: center;}
.navLiveRoute .divWaypoints { display: flex; flex-direction: column; align-items: stretch; padding-top:1em;}
.navLiveRoute .navWaypoint { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-end; min-width: 10em; flex-grow: 1; margin-bottom: 0.25em; }
.navLiveRoute .navWaypoint.past { color: #999; }
.navLiveRoute .divWaypointName { width: 12em; max-width: 18em; flex-grow: 1; display: flex; align-items: center; }
.navLiveRoute .divWaypointName .lblIcon{ margin-right: 0.5em; font-size:1em; line-height:0.75em; }
.navLiveRoute .divWaypointName .lblName{ font-size: 1.5em; line-height: 1.25; display: inline-block; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; }
.navLiveRoute .pnlLatLon { margin-left: 0.5em; margin-right: 0.5em; padding-bottom: 0.25em; text-align: right; }
.navLiveRoute .pnlLatLon span { display: inline-block; width: 7em; margin-top:0.5em; }
.navLiveRoute .divEtaDistBear { min-width: 15em; max-width:15em; flex-grow: 0; text-align: center; padding-bottom: 0.25em; }
.navLiveRoute .divWaypointName, .navLiveRoute .pnlLatLon, .navLiveRoute .divEtaDistBear {margin-bottom: 0.5em; }
.navLiveRoute .divEtaDistBear > span { display:inline-block; }
.navLiveRoute .divEtaDistBear > span:nth-child(1) { margin-right: 0.5em; }
.navLiveRoute .divEtaDistBear > span:nth-child(2) { margin-right: 0.5em; margin-left: 0.5em;}
.navLiveRoute .divEtaDistBear > span:nth-child(3) { margin-left: 0.5em; }

body.night .navLiveRoute .divWaypoints .navWaypoint.past { color: #666; }

.divWaypoints .navWaypointForm .divWaypoint { display: flex; min-width: 16em; max-width: 50em; align-items: center; }
.divWaypoints .navWaypointForm .divWaypoint .tbWaypointName { flex-grow: 1; margin-right:0.125em; }
.divWaypoints .navWaypointForm .divWaypoint .divLatLon { min-width: 10em; flex-grow: 0; }
.divWaypoints .navWaypointForm .divWaypoint .divButtons { flex-grow: 0; width: 6em; min-width:6em; display:flex; justify-content:space-between;}
.divWaypoints .navWaypointForm .divWaypoint .divButtons a>i { font-size: 1.5em;}

.sideMenu.expanded { width: 13.5em; }
.sideMenu.expanded>.option{ width:13em; }
.sideMenu.expanded>.option .label{ width:9.5em; }
.navCurrentPosition{display:inline-block; border:3px solid black; height:1em;width:1em; border-radius:0.5em;background-color:#eee; }
.option.active > .navCurrentPosition {background-color:#FFBF49; }

.mapLayersIcon { right:0px; display:flex; justify-content:center; align-items:center; width: 3em; height:2.5em; padding:0;}
a.mapLayersIcon, a.mapLayersIcon:visited  {color:#eee; }
a.mapLayersIcon:hover { color:#FFBF49; }

.mapSliderContainer {position: relative; display:flex; width:100%; height:0em; bottom: 3.75em; padding:0em 0.5em; z-index: 11050; }
@media (max-height:400px){ .mapSliderContainer { padding-left: 4em; bottom:2.5em; } }
.mapSliderContainer .slider { width:3em; flex-grow:1; height: 0.75em; margin-top: 0.5em; background: rgba(125, 125, 125, 0.5);  outline: none;  -webkit-appearance: none; }
.mapSliderContainer .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.25em; height: 2em; border-radius:3px; background: #666; cursor: pointer; }
.mapSliderContainer .slider::-moz-range-thumb { width: 1.25em; height: 2em; background: #666; cursor: pointer; border-radius:3px; }
.mapSliderContainer>.time{ display:inline-block; width:8.5em; height:1.75em; margin-left:0.5em;padding:0.125em; background-color: rgba(255, 255, 255, 0.7); border: 1px solid #666; border-radius:3px; vertical-align:middle; }

.trackInfo .trackData { align-items:center; justify-content:space-around; }
.trackInfo .trackBoat { height:4em; }
.trackInfo.selected { border-color: #aaa; }
.trackInfo:not(.selected){ cursor: pointer;}

.trackStatistics .segments { gap: 0em 1em;}
.trackStatistics .segmentsContainer {max-width: 32em; min-width:12em;}
.trackStatistics .trophy {margin-left:0.5em;}

/* NIGHT STYLES INCL TRANSITIONS */
body.night .leaflet-tile-pane{filter: brightness(40%) saturate(200%);}
body.night .leaflet-control-zoom-in, body.night .leaflet-control-zoom-out{background-color:#000;}
body.night .navMyBoatIcon { background-color: #8E6929; }
body.night .navWaypointMarker { background-color: rgba(50, 101, 173, 0.8); }
body.night .mapOptions, body.night .mapOptions>a.option, body.night .mapOptions>a.expandCollapse, body.night .mapOptions>a.option:visited, body.night .mapOptions>a.expandCollapse:visited{color:black;}
body.night .mapOptions>a.option.active>.icon, body.night .mapOptions>a.expandCollapse:hover>.icon { color:#4992FF; }
body.night .option.active > .navCurrentPosition {background-color:#4992FF; }
body.night .leaflet-popup-content-wrapper,body.night .leaflet-popup-content, body.night .leaflet-popup-tip, body.night .mapOptions select { background-color: #666; color: black; }
body.night .mapSliderContainer .time { background-color: rgba(55, 55, 55,0.7); }
body.night .navOutdatedDataWarning { color: #ccc; background-color: rgba(0, 0, 0, 0.8); }
body.nightTransition .leaflet-container,
body.nightTransition .leaflet-tile-pane,
body.nightTransition .leaflet-control-zoom-in,
body.nightTransition .leaflet-control-zoom-out,
body.nightTransition .leaflet-control-zoom-in,
body.nightTransition .navMyBoatIcon,
body.nightTransition .navWaypointMarker,
body.nightTransition .poiMarker,
body.nightTransition .mapOptions,
body.nightTransition .mapOptions select,
body.nightTransition .navOutdatedDataWarning,
body.nightTransition .navCurrentPosition { transition: background-color 1s, color 1s, filter 1s; }
.mapOptions > .option { transition: background-color 0.2s, color 1s; }
.mapOptions>a.expandCollapse{transition: color 0.3s; }

.startPageNav.navData { flex-grow:1; }

/* RESPONSIVE */


/* smaller texts in nav boxes for small screens */
@media (max-width:720px), (max-height:720px) {
	.homeContainer>div:not(:nth-child(1))>div.startPageNav .motionDisplay {  font-size:0.75em;}
	.navPage .navData { font-size: 1.25em; padding: 1em 0.25em 0em 0.25em; }
	.navLiveRoute { font-size:1.5em; padding:0em 0.25em 0em 1em; }
}

@media (max-width:500px), (max-height:500px) {
	.navPage .navData { font-size: 1em; padding: 1em 0.25em 0em 0.25em; }
	.navLiveRoute { font-size:1em; padding:0em 0.25em 0em 1em; }
}

/* map height when used in half width container */
.dataContainerHalf .navMap { max-height: 95vh;}

@media screen and (max-width: 1280px) and (max-height:1500px) {
	.dataContainerHalf .navMap{ height:1000px; }
}

@media screen and (max-width: 1280px) and (max-height:1024px) {
	.dataContainerHalf .navMap{ height:750px; }
}

@media screen and (max-width: 1280px) and (max-height:900px) {
	.dataContainerHalf .navMap{ height:500px; }
	.dataContainerHalf .navMap { max-height: 80vh;}
}

@media screen and (min-width: 1281px) { /* two content columns (default) */
	.dataContainerHalf .navMap { height: 1000px; }
}

@media screen and (min-width: 1281px)  /* two content columns (default) */
	and (max-height:1200px) {
		.dataContainerHalf .navMap{ height:750px; }
	}

@media screen and (min-width: 1281px)  /* two content columns (default) */
	and (max-height:900px) {
		.dataContainerHalf .navMap{ height:600px; }
	}

@media screen and (min-width: 1281px)
	and (max-height:750px) {
		.dataContainerHalf .navMap{ height:500px; }
	}

@media screen and (min-width: 1281px)
	and (max-height:600px) {
		.dataContainerHalf .navMap{ height:400px; }
	}