:root {
  --olColor: 0, 60, 136;
  --mapBg: #fff;
  --mapFg: #fff;
  --filter: "";
  /* https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-727266980 */
  --filterdark1: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
  /* https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-867821340 */
  --filterdark2: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
  /*https://openlayers.org/en/latest/examples/semi-transparent-layer.html*/
  --filtergray: grayscale(100%);
  --filterinvertgray: invert(1) grayscale(100%);

  --mapfilter: "";
  --mapfilter2: "";
}

.ol-layer-base {
  filter: var(--mapfilter);
}

.ol-layer-overlay {
  filter: var(--mapfilter2);
}

.ol-control button {
  background-color: rgba(var(--olColor),.5);
}

.ol-control button:focus,.ol-control button:hover {
  background-color: rgba(var(--olColor),.7)
}

.ol-scale-line {
  background: rgba(var(--olColor),.3);
}

/**
 * Zoomslider with + and - at the ends, vertical
 * https://openlayers.org/en/latest/examples/zoomslider.html
 * The zoomslider in the second map shall be placed between the zoom-in and
 * zoom-out buttons.
 */
.ol-zoom .ol-zoom-out {
  margin-top: 204px;
}
.ol-zoomslider {
  background-color: transparent;
  top: 2em;
}

.ol-touch .ol-zoom .ol-zoom-out {
  margin-top: 212px;
}
.ol-touch .ol-zoomslider {
  top: 2.75em;
}

.ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
.ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
  top: 3px;
}

.ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
.ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
  top: 232px;
}

/* Zoomslider rotated horizontally */
/* .ol-zoomslider {
    width: 200px;
    height: 25px;
    left: 3em;
    top: 0.5em;
}
.ol-zoomslider-thumb.ol-unselectable {
    height: 23px;
} */


.ol-zoom-extent {
  margin-top: 210px;
}

.ol-attribution {
  font-family: sans-serif;
  font-size: small;
  bottom: 2em;
}

/**
 * Geocoder more to the right and top
 */
.ol-geocoder.gcd-gl-container {
  position: absolute;
  top: .5em; 
  left: 2.8em;
  box-sizing: border-box;
}

/* bottom metric meter km display according to zoom */
.ol-scale-line {
    left: auto;
    right: 10px;
}

/* lat lon display */
.ol-mouse-position {
    user-select: text;
    right: 3em;
    font-family: sans-serif;
    color: #FFF;
    background-color: rgba(var(--olColor),.5);
    padding: 2px 10px;
    border-radius: 5px;
}

/* don't know what controls this is for */
/* .ol-rotate {
    top: 1em;
} */
/* .ol-featureoverlay{
 color: red
}  */


.layer-switcher {
  /*opacity: 0.75;*/
  top: 2.5em;
  background-color:transparent;
}

.layer-switcher.shown {
  max-height: 100%;
  bottom: 3em;
}

.layer-switcher li{
  margin-top: 0px;
}

.layer-switcher .group li div{
  position: relative;
  left: auto;
}

.layer-switcher .group li div button{
  position: relative;
}

.layer-switcher .group li label div input{
  position: relative;
  width: 200px;
}

.layer-switcher .panel{
  border-color: var(--mapBg);
  overflow-y: auto;
  font-family: sans-serif;
  color: var(--mapFg);
  background-color:rgba(var(--olColor),.5);
  max-width: 330px;
}

.layer-switcher > button{
  color : var(--mapFg);
  background-image: unset;
  border: 4px solid var(--mapBg);
  border-radius: 4px;
  background-color:rgba(var(--olColor),.5);
}

.layer-switcher > button:focus, .layer-switcher > button:hover {
  background-color:rgba(var(--olColor),.75);
}

.layer-switcher.shown button:hover {
  background-color: rgba(var(--olColor),1);
}

.layer-switcher.shown.layer-switcher-activation-mode-click > button{
  left: initial;
  background-color:rgba(var(--olColor),.75);
}

/*https://openlayers.org/en/latest/examples/measure.html*/
.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
}
.ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}
.ol-tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}
.ol-tooltip-measure:before,
.ol-tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.ol-tooltip-static:before {
  border-top-color: #ffcc33;
}

/* Progress bar on bottom of map https://openlayers.org/en/latest/examples/tile-load-events.html */
.ol-progress-bar-common {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1em;
  box-sizing: border-box;
  /*box-shadow: 0px 0px 5px 10px rgb(73, 44, 201);*/
  width: 0;
}

#ol-progress-bar-ok {
  background-color: rgba(16, 136, 0, 0.8);
  transition: width .2s;
}

#ol-progress-bar-error {
  background-color: rgba(207, 22, 22, 0.8);
  transition: width .2s;
  transition: left .2s;
}

#ol-progress-bar-waiting {
  position: absolute;
  bottom: 0em;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  color: rgb(255, 255, 255);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  display: block;
  animation: 2s linear infinite;
  text-shadow: 0 0 5px rgba(var(--olColor),1);
  -webkit-text-stroke: 1px rgb(153, 153, 153);
}

/*
Custom opacity slider in layerswitcher
https://www.w3schools.com/howto/howto_js_rangeslider.asp
https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
*/
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%;
  height: 2px;
  background: #c0c0c0;
  outline: none;
  opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .5s; /* 0.2 seconds transition on hover */
  transition: opacity .5s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 16px; /* Set a specific slider handle width */
  height: 16px; /* Slider handle height */
  background: rgb(var(--olColor));
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
  margin-top: -6px;
}

.slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #ddd;
  border: none;
  border-radius: 0px;
}
.slider::-webkit-slider-runnable-track {
  background: #ccc;
}

/*
Marcel:  max-height: 200px -> 640px; 
*/
.ol-popup-content {
  max-height: 640px;
  max-width: 754px;
}

/** GlobalTimePickerConrol */
.ol-layer-timepicker {
  position: relative;
  display: inline;
  bottom: 8px;
  padding-bottom: 7px;
  left: 280px;
}

/* ol-ext timeline */
.ol-control.ol-timeline {
  margin: 50px;
}
.ol-control.ol-timeline button {
  width: 50px;
  height: 50px;
}

/** LayerFavorites */
.ol-slider-box {
  position: absolute;
  display: inline;
  bottom: 10px;
  left: 200px;
  right: 200px;
}

/* The slider itself */
.ol-slider {
  /* -webkit-appearance: none; */
  /* Override default CSS styles */
  /* appearance: none; */
  width: 100%; /* Full-width */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.ol-slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.ol-slider::-webkit-slider-thumb {
  /* -webkit-appearance: none;  */
  /* Override default look */
  /* appearance: none; */
  cursor: pointer; /* Cursor on hover */
}

.ol-slider::-moz-range-thumb {
  cursor: pointer; /* Cursor on hover */
}

/** LayerFavorites */
.ol-layer-favorites {
  position: relative;
  display: inline;
  top: 8px;
  padding-bottom: 7px;
  left: 280px;
}

.ol-layer-favorites .lfbox {
  display: inline;
  width: fit-content;
  vertical-align: top;
  /* border: 3px solid #666; */
  border-radius: .25em;
  margin-right: 0.3em;
  /* cursor: move; */
}

.lfbox.over {
  /* border: 3px dotted #f0d9d9; */
  background-color: #ffcc33;
}

.lfbox.trash.active {
  background-color: rgba(16, 136, 0, 0.8);
  font-size: 3em;
}

.lfbox.trash.over {
  background-color: rgba(207, 22, 22, 0.9);
}

.tooltip {
  position: relative;
  /* display: inline-block; */
  border-bottom: 1px dotted black;
}

/** https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip */
.tooltip .tooltiptext {
  margin-top: 8px; 
  margin-left: 5px;
  visibility: hidden;
  width: 200px;
  background-color: #ffffca;
  color: black;
  font-size: small;
  /* text-align: center; */
  /*border-radius: 3px; */
  border: 1px solid black;
  padding: 5px 0; 
  /* top: 10px; */
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  font-weight: 100;
  line-height: normal;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}