.button-container{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  height: 85px;
}

.ol-control{
  padding: 0;
  background-color: white;
  box-shadow:
    0 1px 5px 0 rgb(0 0 0 / 0.2),
    0 2px 2px 0 rgb(0 0 0 / 0.14),
    0 3px 1px -2px rgb(0 0 0 / 0.12);
}

.ol-control:hover,
.ol-control:focus{
  background-color: white;
}

.ol-control button{
  background-color: inherit;
  color: black;
}

.ol-control button:disabled{
  cursor: not-allowed;
  opacity: 0.5;
}

.ol-control button:hover,
.ol-control button:focus{
  background-color: inherit;
  border: 1px solid #00F;
}

.ol-control button:enabled{
  outline: #000 solid 1px;
}

.ol-scale-line, .ol-mouse-position, .ol-zoom, .ol-full-screen, .ol-help, .ol-collapsible{
  margin: 0 5px;
}

.ol-zoom, .ol-full-screen, .ol-collapsible{
  margin-bottom: 5px;
}

.ol-scale-line{
  padding: 2px;
  background-color: white;
  border-radius: 2px;
  line-height: normal;
  display: inline-block;
  position: static;
}

.ol-scale-line-inner{
  border: 1px solid #EEE;
  border-top: none;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  border-color: black;
  color: black;
  font-size: 14px;
}

.ol-mouse-position{
  background: white;
  border-radius: 2px;
  padding: 2px 6px;
  min-width: 100px;
  font-size: 14px;
  line-height: normal;
  display: inline-block;
  position: static;
}

.ol-mouse-position::before{
  content: '\f3c5';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 5px;
}

.ol-zoom{
  box-shadow: none;
  background-color: transparent;
  display: inline-block;
  position: static;
}

.ol-zoom:hover,
.ol-zoom:focus{
  background-color: transparent;
}

.ol-zoom .ol-zoom-in, .ol-zoom .ol-zoom-out{
  padding: 0;
  background-color: white;
  box-shadow:
    0 1px 5px 0 rgb(0 0 0 / 0.2),
    0 2px 2px 0 rgb(0 0 0 / 0.14),
    0 3px 1px -2px rgb(0 0 0 / 0.12);
  border-radius: 4px;
  display: inline-block;
}

.ol-zoom .ol-zoom-in{
  margin-right: 10px;
  border-bottom: none;
}

.ol-zoom button{
  background-color: white;
}

.ol-zoom button:hover,
.ol-zoom button:focus{
  background-color: white;
}

.ol-full-screen{
  display: inline-block;
  position: static;
}

.ol-help{
  display: inline-block;
  position: static;
}

.ol-collapsible{
  display: inline-block;
}

.ol-collapsible[data-state="collapsed"] > div{
  display: none;
}

.ol-collapsible[data-state="expanded"] > div{
  display: inline-block;
}

.ol-copyright{
  padding: 0 5px;
  margin-bottom: 0;
  text-align: right;
  font-size: 12px;
  line-height: 17px;
  max-width: 700px;
}

.ol-northarrow{
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 32px;
  height: 32px;
  top: 8px;
  box-shadow: none;
  background-color: transparent;
}

:fullscreen .ol-northarrow{
  top: 4.5em;
}

.ol-northarrow:hover,
.ol-northarrow:focus{
  background-color: transparent;
}

.ol-tooltip{
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 0 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
  user-select: none;
}

.ol-tooltip-measure{
  opacity: 1;
  font-weight: bold;
}

.ol-tooltip-static{
  background-color: #FC3;
  color: black;
  /*border: 1px solid #000;*/
  box-shadow: 5px 4px 5px -4px rgba(0, 0, 0, 0.7);
  font-weight: bold;
}

.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: #FC3;
}

/* help version of these buttons */

.ol-zoom-help{
  box-shadow: none;
  background-color: transparent;
  display: inline-block;
  position: static;
}

.ol-zoom-help:hover,
.ol-zoom-help:focus{
  background-color: transparent;
}

.ol-zoom-help .ol-zoom-in, .ol-zoom-help .ol-zoom-out{
  padding: 0;
  background-color: white;
  box-shadow:
    0 1px 5px 0 rgb(0 0 0 / 0.2),
    0 2px 2px 0 rgb(0 0 0 / 0.14),
    0 3px 1px -2px rgb(0 0 0 / 0.12);
  border-radius: 4px;
  display: inline-block;
}

.ol-zoom-help .ol-zoom-in{
  margin-right: 10px;
  border-bottom: none;
}

.ol-zoom-help button{
  background-color: white;
}

.ol-zoom-help button:hover,
.ol-zoom-help button:focus{
  background-color: white;
}

.ol-full-screen-help{
  display: inline-block;
  position: static;
}

.ol-collapsible-help{
  position: static;
  width: 1.5em;
}

.ol-scale-line-help{
  padding: 2px;
  background-color: white;
  border-radius: 2px;
  line-height: normal;
  display: inline-block;
  position: static;
}

.ol-mouse-position-help{
  background: white;
  border-radius: 2px;
  padding: 2px 6px;
  min-width: 100px;
  font-size: 14px;
  line-height: normal;
  display: inline-block;
  position: static;
}