@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, .95);
  --ol-control-factor-size: 1;
  --ol-control-border-width: 10px;
  --ol-control-border-radius: 40px;
  --ol-control-border-color: var(--ol-subtle-background-color);
  --ol-control-button-size: 3em;
}
#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;
}
@media screen and (min-width: 501px) {
  .ol-control {
    --ol-control-factor-size: 1.75;
  }
}
.ol-control {
  font-size: calc(100% * var(--ol-control-factor-size));
  background-color: transparent;
  /* border-radius: var(--ol-control-border-radius); */
}
.ol-control button {
  border: var(--ol-control-border-width) solid var(--ol-control-border-color);
  background-color: var(--ol-partial-background-color);
  background-clip: padding-box;
  border-radius: var(--ol-control-border-radius);
  width: var(--ol-control-button-size);
  height: var(--ol-control-button-size);
}
.ol-control button:hover,
.ol-control button:focus {
  outline: none;
}
.ol-control button:hover,
.ol-control button:focus-visible {
  --ol-control-border-color: var(--ol-subtle-foreground-color);
}
.ol-zoom > .ol-zoom-in,
.ol-zoom > .ol-zoom-out {
  margin: 0;
  height: calc(var(--ol-control-button-size) - var(--ol-control-border-width) * .5);
}
.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 {
  height: var(--ol-control-button-size);
}
.ol-zoom > .ol-zoom-in {
  border-radius: var(--ol-control-border-radius) var(--ol-control-border-radius) 0 0;
  border-bottom-width: calc(var(--ol-control-border-width) * .5);
}
.ol-zoom > button.ol-zoom-in:hover,
.ol-zoom > button.ol-zoom-in:focus-visible {
  border-bottom-width: var(--ol-control-border-width);
  margin-bottom: calc(-.5 * var(--ol-control-border-width));
}
.ol-zoom > .ol-zoom-out {
  border-radius: 0 0 var(--ol-control-border-radius) var(--ol-control-border-radius);
  border-top-width: calc(var(--ol-control-border-width) * .5);
}
.ol-zoom > button.ol-zoom-out:hover,
.ol-zoom > button.ol-zoom-out:focus-visible {
  border-top-width: var(--ol-control-border-width);
  margin-top: calc(-.5 * var(--ol-control-border-width));
}
#layer-selection-btn {
  right: .5em;
  top: .5em;
}
.map-panel {
  border-radius: 4px;
}
.map-panel.map-panel-hidden {
  display: none;
}
.map-panel {
  position: absolute;
  top: calc(.5em * var(--ol-control-factor-size));
  right: calc((.5em + 1.375em) * var(--ol-control-factor-size) + 1px
    + .2em * var(--ol-control-factor-size));
  background-color: var(--ol-subtle-background-color);
}
.map-panel > div {
  background-color: var(--ol-partial-background-color);
  margin: 10px;
  padding: .75ex;
}
#layer-selection-btn.map-panel-expanded button {
  background-color: var(--ol-subtle-foreground-color);
  color: var(--ol-background-color);
}
#layer-selection-btn.map-panel-expanded button:hover,
#layer-selection-btn.map-panel-expanded button:focus-visible {
  background-color: var(--ol-foreground-color);
}
@media screen and (max-width: 500px) {
  #layer-selection-btn {
    display: none;
  }
}