@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~ol/ol.css";

html, body {
  margin: 0;
  height: 100%;
  --ol-partial-background-color: rgba(255, 255, 255, .9);
  --ol-background-color: var(--bs-body-bg);
  --ol-foreground-color: var(--bs-body-color);
  --menu-factor-size: 1.75;
  --menu-border-width: 2px;
  --menu-border-radius: 4px;
  --menu-border-color: var(--ol-subtle-background-color);
  --menu-button-size: 1.75em;
  --menu-spacing: .5em;
  --menu-spacing-interline: .25em;
}
@media screen and (max-width: 500px) {
  html, body {
    --menu-factor-size: 1;
    --menu-border-width: 1px;
    --menu-border-radius: 2px;
  }
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.form-check-input:focus:not(:focus-visible, :hover) {
  box-shadow: none;
}
.ol-control button:focus:not(:focus-visible, :hover) {
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
  outline: none;
}
#map-menu, .ol-zoom, .ol-zoomslider {
  font-size: calc(100% * var(--menu-factor-size));
}
#map-menu, .ol-control {
  background-color: transparent;
}
.ol-control button,
#map-menu button,
#layer-selection-panel {
  border: var(--menu-border-width) solid var(--menu-border-color);
  background-color: var(--ol-background-color);
  background-clip: padding-box;
  border-radius: var(--menu-border-radius);
  color: var(--ol-subtle-foreground-color);
}
.ol-control button, #map-menu button {
  width: var(--menu-button-size);
  height: var(--menu-button-size);
  font-size: inherit;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  display: block;
  line-height: .4em;
  padding: 0;
}
.ol-control button:hover,
.ol-control button:focus,
#map-menu button:hover,
#map-menu button:focus {
  outline: none;
}
.ol-control button:hover,
.ol-control button:focus-visible,
#map-menu button:hover,
#map-menu button:focus-visible {
  --menu-border-color: var(--ol-subtle-foreground-color);
  color: var(--ol-foreground-color);
}
.ol-zoom > .ol-zoom-in,
.ol-zoom > .ol-zoom-out,
.ol-zoomslider {
  --menu-button-size: 1.375em;
}
.ol-zoom > .ol-zoom-in,
.ol-zoom > .ol-zoom-out {
  margin: 0;
  height: calc(var(--menu-button-size) - var(--menu-border-width) * .5) !important;
}
.ol-zoom > button.ol-zoom-in:hover,
.ol-zoom > button.ol-zoom-in:focus-visible,
.ol-zoom > button.ol-zoom-out:hover,
.ol-zoom > button.ol-zoom-out:focus-visible {
  position: relative;
  z-index: 1;
  height: var(--menu-button-size) !important;
}
.ol-zoom > .ol-zoom-in {
  border-radius: var(--menu-border-radius) var(--menu-border-radius) 0 0;
  border-bottom-width: calc(var(--menu-border-width) * .5);
}
.ol-zoom > button.ol-zoom-in:hover,
.ol-zoom > button.ol-zoom-in:focus-visible {
  border-bottom-width: var(--menu-border-width);
  margin-bottom: calc(-.5 * var(--menu-border-width));
}
.ol-zoom > .ol-zoom-out {
  border-radius: 0 0 var(--menu-border-radius) var(--menu-border-radius);
  border-top-width: calc(var(--menu-border-width) * .5);
}
.ol-zoom > button.ol-zoom-out:hover,
.ol-zoom > button.ol-zoom-out:focus-visible {
  border-top-width: var(--menu-border-width);
  margin-top: calc(-.5 * var(--menu-border-width));
}
@media screen and (max-height: 500px) {
  .ol-zoomslider {
    display: none;
  }
}
.ol-zoomslider {
  --ol-zoomslider-thumb-height: 15px;
  --ol-zoomslider-margin: 14px;
}
@media screen and (max-width: 500px) {
  .ol-zoomslider {
    --ol-zoomslider-thumb-height: 10px;
    --ol-zoomslider-margin: 8px;
  }
}
.ol-zoomslider, button.ol-zoomslider-thumb {
  --menu-border-width2: 1px;
}
.ol-zoomslider {
  background-color: rgba(255, 255, 255, .7);
  background-color: rgb(from var(--ol-partial-background-color) r g b / .7);
  border-radius: var(--menu-border-radius);
  border: var(--menu-border-width) solid var(--menu-border-color);
  width: var(--menu-button-size);
  padding: calc(var(--ol-zoomslider-margin) + var(--ol-zoomslider-thumb-height)*.3) 0;
  left: var(--menu-spacing);
  top: calc(var(--menu-spacing) + var(--menu-button-size)*2 - var(--menu-border-width) + var(--menu-spacing));
}
.ol-zoomslider::after {
  content: "";
  position: absolute;
  top: var(--ol-zoomslider-margin);
  left: var(--ol-zoomslider-margin);
  right: var(--ol-zoomslider-margin);
  bottom: var(--ol-zoomslider-margin);
  background-color: var(--ol-subtle-background-color);
  border-radius: calc((var(--menu-button-size) - var(--menu-border-width))*.5 - var(--ol-zoomslider-margin));
  border: var(--menu-border-width2) solid var(--menu-border-color);
  cursor: pointer;
}
.ol-zoomslider:hover {
  background-color: var(--ol-partial-background-color);
}
.ol-zoomslider button.ol-zoomslider-thumb {
  z-index: 1;
  height: var(--ol-zoomslider-thumb-height);
  width: calc((var(--menu-button-size) - 2*var(--menu-border-width))*.85);
  margin: 0 auto;
  border: var(--menu-border-width2) solid var(--menu-border-color);
}
.ol-scale-line {
  position: absolute;
  bottom: calc(var(--menu-spacing) * var(--menu-factor-size));
  left: calc(var(--menu-spacing) * var(--menu-factor-size));
  border: var(--menu-border-width) solid var(--menu-border-color);
  background-color: var(--ol-partial-background-color);
  background-clip: padding-box;
  border-radius: var(--menu-border-radius);
  padding: calc(.5ex * var(--menu-factor-size));
}
.ol-scale-line .ol-scale-line-inner {
  font-size: 80%;
  margin: 0;
}
#map-menu {
  position: absolute;
  right: var(--menu-spacing);
  top: var(--menu-spacing);
  margin: 0;
}
#map-menu > * {
  margin-top: var(--menu-spacing-interline);
}
#map-menu > *:first-child {
  margin-top: 0;
}
#map-menu > .ol-control {
  position: relative;
  inset: initial;
}

#map-menu button[aria-expanded="true"] {
  background-color: var(--ol-subtle-foreground-color);
  color: var(--ol-background-color);
}
#map-menu button[aria-expanded="true"]:hover,
#map-menu button[aria-expanded="true"]:focus-visible {
  background-color: var(--ol-foreground-color);
  border-color: var(--ol-foreground-color);
}
#layer-selection-panel {
  position: absolute;
  top: calc(var(--menu-spacing) * var(--menu-factor-size));
  right: calc((var(--menu-spacing) + var(--menu-button-size) + var(--menu-spacing-interline)) * var(--menu-factor-size));
  padding: .75ex;
  color: var(--ol-foreground-color);
}
@media screen and (max-width: 500px) {
  #layer-selection-btn {
    display: none;
  }
}