.map-container {
  position: relative;
}

.map {
  background-color: #374872;
  height: 100%;
  width: 100%;
  position: inherit;
  padding: 0;
}

.map canvas {
  width: 100%;
  height: 100%;
  transform: none !important;
}

.ol-control button:focus,
.ol-control button:hover {
  background: #f7fbfe;
}

div.ol-legend.ol-control {
  background: #f7fbfe;
  width: 120px;
  height: 100px;
  top: 5px;
  right: 5px;
  display: none;
  pointer-events: auto;
  padding: 4px;
}

.ol-legend .outer {
  display: flex;
}

.ol-legend .outer .colors-container {
  width: 33px;
  height: 120px;
  flex: 1;
  border-radius: 5px;
  overflow: hidden;
  filter: opacity(0.65);
}

.ol-legend .outer .colors-container .color {
  height: 100%;
}

.ol-legend .outer .values-container {
  width: calc(100% - 33px);
  height: 120px;
}

.ol-legend .outer .values-container .label {
  color: #00a89c;
  font-size: 10px;
  padding-left: 5px;
  position: absolute;
  right: 5px;
  margin-bottom: 0 !important;
  text-align: right;
  width: 100%;
}

.ol-legend .outer .values-container .label .label-inner{
  vertical-align: middle;
  display: table-cell;
}

.map.main .ol-legend .outer .values-container .label:last-child {
  bottom: 2px;
}

.map.index .ol-legend {
  width:150px;
}
.map.index .ol-legend .outer .values-container .label {
  position: unset;
  display: table;
}

div.ol-scale-line {
  cursor: default;
  background: #f7fbfe;
  border-radius: 0 0 4px 4px;
  bottom: 7px;
  left: unset;
  right: 5px;
  padding: 4px;
  position: absolute;
  width: 150px;
}
.input div.ol-scale-line {
  right: 5px;
  bottom: 5px;
  width: 143px;
}

.ol-scale-line-inner {
  color: #00a89c;
  border: 2px solid #00a89c;
  border-top: none;
  font-size: 10px;
  text-align: center;
  margin: auto;
  height: 16px;
  will-change: contents, width;
  transition: all 0.25s;
}

.map-container.input .ol-scale-line-inner {
  height: 12px;
  font-size:8px;
}

.mouse-position-container {
  cursor: default;
  height: 35px;
  width: 150px;
  font-size: 10px;
  text-align: center;
  padding: 4px;
  top: unset;
  bottom: 31px;
  right: 5px;
  position: absolute;
  background: #f7fbfe;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #00a89c;
}
.map-container.input .mouse-position-container {
  right: 6px; 
  bottom: 26px;
  font-size: 8px;
  height: 29px;
  width: 143px;
}

div.ol-zoom.ol-control {
  top: unset;
  bottom: 0;
  left: 5px;
  padding: 0;
  background: transparent;
}
.input div.ol-zoom.ol-control {

}

div.ol-zoom.ol-control button {
  display: inline-block;
  margin: 0;
  border-radius: 0;
  border-right: 1px solid #c5d3e0;
  color: #00a89c;
  background: #f7fbfe;
  height: 25px;
  width: 25px;
}

div.ol-zoom.ol-control button:first-child {
  border-radius: 3px 0 0 3px;
}

div.ol-zoom.ol-control button:last-child {
  border-right: 0;
  border-radius: 0 3px 3px 0;
}

div.ol-zoom.ol-control button.ol-zoom-in {
  background: url('img/zoom_in.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-zoom.ol-control button.ol-zoom-out {
  background: url('img/zoom_out.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-zoom.ol-control button.ol-zoomworld {
  background: url('img/zoom_world.svg') no-repeat #f7fbfe;
  background-size: 15px 15px;
  background-position: center 5px;
}

div.ol-zoom.ol-control button.ol-measure-line {
  background: url('img/measure_line.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-zoom.ol-control button.ol-measure-polygon {
  background: url('img/measure_polygon.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-zoom.ol-control button.ol-info {
  background: url('img/info.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-zoom.ol-control button.ol-draw {
  background: url('img/draw.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-zoom.ol-control button.ol-coordinates {
  background: url('img/coordinates.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-zoom.ol-control button.ol-favourites {
  background: url(img/favourites.svg) no-repeat #f7fbfe;
  background-size: 18px 18px;
  background-position: 3px;
  height: 25px;
  width: 120px;
  padding-left: 25px;
  font-weight: normal;
  color: #00a89c;
  font-size: 11px;
  text-align: left;
  vertical-align: bottom;
  margin-bottom: 7px;
}

div.ol-zoom.ol-control button.ol-info {
  background: url('img/info.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

.ol-popup .buttons-container{
  margin-top: 20px;
}
.ol-popup .stats-footer .buttons-container{
  margin-top: 10px;
  text-align: right;
}
.ol-popup .buttons-container .button-container {
  color: #00a89c;
  font-weight: bold;
  cursor: pointer;
  font-size: 10px;
  display: inline;
  margin-right: 20px;
}
.ol-popup .stats-footer .buttons-container .button-container {
  margin-right: 0;
  margin-left: 20px;
}
.ol-popup .buttons-container button {
  display: inline-block;
  margin: 0;
  border-radius: 0;
  color: #00a89c;
  background: #f7fbfe;
  height: 25px;
  width: 25px;
  border-radius: 4px;
  border: 1px solid #c5d3e0;
  vertical-align: bottom;
  margin-left: 5px;
}
.ol-popup button.ol-save-favourite {
  background: url('img/save_favourite.svg') no-repeat #f7fbfe;
  background-size: 15px 15px;
  background-position: center;
}
.ol-popup button.ol-open-chart {
  background: url('img/open_chart.svg') no-repeat #f7fbfe;
  background-size: 15px 15px;
  background-position: center;
}
.ol-popup button.ol-download-data {
  background: url('img/download.svg') no-repeat #f7fbfe;
  background-size: 15px 15px;
  background-position: center;
}
.ol-popup button.ol-ask-data {
  background: url('img/ask.svg') no-repeat #f7fbfe;
  background-size: 15px 15px;
  background-position: center;
}
.ol-popup button.ol-download {
  background: url('img/download.svg') no-repeat #f7fbfe;
  background-size: 15px 15px;
  background-position: center;
}


.map-container div > button {
  outline: none;
}
.map-container div > button.on {
  filter: drop-shadow(0px 0px 4px #00a89c);
  background-color: #ffffff;
}
.map-container div > button.disabled {
  filter: grayscale(100%);
}

div.ol-legend-button {
  background: transparent;
}

div.ol-legend-button button.ol-toggle-legend {
  background: url('img/legend.svg') no-repeat #f7fbfe;
  background-size: 20px 20px;
  background-position: center;
}

div.ol-attribution {
  background: transparent;
  padding: 0;
  bottom: 68px;
  right: 4px;
}
div.ol-attribution button,
div.ol-attribution button:hover {
  background: #f7fbfe;
  color: #00a89c;
  border-radius: 3px;
  border: 0;
}
div.ol-attribution ul {
  font-size: 8px;
  color: #00a89c;
  height: 100%;
}

.input div.ol-attribution {
  bottom:58px;
}

.ol-popup {
  cursor: auto;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  padding-right: 11px;
  border-radius: 6px;
  border: 0;
  bottom: 14px;
  left: -30px;
  max-height: 330px;
  min-width: 350px;
  max-width: 350px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:before {
  left: 22px;
  border-top-width: 16px;
  border-right-width: 8px;
  border-left-width: 8px;
  border-bottom-width: 10px;
  border-top-color: rgba(255, 255, 255, 0.75);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: -5px;
  right: 8px;
  color: #00a89c;
  font-size: 40px;
}

#info_popup div.info-header {
  color: #00a89c;
  margin-top: 0;
  margin-bottom: 15px;
}

#info_popup div.info-header h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 5px;
}

#info_popup div.info-header div.coords {
  font-size: 12px;
}

#info_popup div.info-content {
  overflow-y: auto;
  max-height: 160px;
}

#info_popup div.info-content table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  color: #333333;
  width: calc(100% - 5px);
}

#info_popup div.info-content table tr td {
  padding-bottom: 5px;
}

#info_popup div.info-content table tr.visible td.name,
#info_popup div.info-content table tr.visible td.value {
  color: #f7911a;
  font-weight: bold;
}

#info_popup div.info-content table td.name {
  width: 50%;
}

#info_popup div.info-content table td.value {
  width: 50%;
  text-align: right;
}

.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-index {
  background-color: rgba(255,255,255,0.9);
  opacity: 1;
  color: #00a89c;
  max-width: 200px;
  max-height: 200px;
}
.ol-tooltip-index .index-value{
  font-weight: bold;
}
.ol-tooltip-index .index-legend{
  font-style: italic;
}

.ol-tooltip-static {
  background-color: #00a89c;
  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: #00a89c;
}

.ol-popup.stats {
  top: 5px;
  left: 5px;
  bottom: unset;
  max-width: unset;
  width: 700px;
}
.ol-popup-minifier {
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 13px;
  color: #00a89c;
  font-size: 35px;
}
#stats_popup .stats-header {
  height: 14px;
  color: #00a89c;
  margin-top: 0;
  margin-bottom: 15px;
}
#stats_popup .stats-header h2 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 5px;
}
.ol-popup.stats .stats-content {
  max-height: 140px;
  overflow-y: auto;
}
.ol-popup.stats .stats-content table {
  border-collapse: collapse;
  height: 100%;
  width: 100%;
  font-size: 11px;
  color: #333333;
}
#stats_popup div.stats-content table tr.visible td.name,
#stats_popup div.stats-content table tr.visible td.value {
  color: #f7911a;
  font-weight: bold;
}

#stats_popup div.stats-content table th.name,
#stats_popup div.stats-content table td.name {
  width: 30%;
  text-align: left;
}

#stats_popup div.stats-content table th.value,
#stats_popup div.stats-content table td.value {
  text-align: right;
}

#stats_popup:after,
#stats_popup:before {
  top: unset;
  border: 0;
  content: unset;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

#stats_popup:before {
  left: unset;
  border: 0;
}

div.analysis-button-container {
  top: unset;
  bottom: 7px;
  left: 305px;
  padding: 0;
  background: transparent;
  text-align: center;
  position: absolute;
  font-size: 11px;
}
div.analysis-button-container button.analysis-button {
  background: url(img/analysis.svg) no-repeat #f7fbfe;
  background-size: 17px 17px;
  background-position: 3px;
  height: 25px;
  width: 66px;
  padding-left: 22px;
  border-radius: 4px;
  border: 0;
  color: #00a89c;
  font-size: 11px;
  text-align: left;
}

div.clear-button-container {
  top: unset;
  bottom: 2px;
  left: 376px;
  font-size: 11px;
  padding: 0;
  background: transparent;
  text-align: center;
  position: absolute;
}
.input div.clear-button-container {
  left: 111px;
}
div.clear-button-container button.clear-button {
  background: url(img/clear.svg) no-repeat #f7fbfe;
  background-size: 17px 17px;
  background-position: center;
  height: 25px;
  width: 25px;
  border-radius: 4px;
  border: 0;
  color: #00a89c;
  font-size: 12px;
}

div.fav-button-container {
  top: unset;
  bottom: 11px;
  right: 177px;
  font-size: 11px;
  padding: 0;
  background: transparent;
  text-align: center;
  position: absolute;
}
div.fav-button-container button.fav-button {
  background: url(img/favourites.svg) no-repeat #f7fbfe;
  background-size: 17px 17px;
  background-position: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 0;
  color: #00a89c;
  font-size: 12px;
}
div.fav-button-container button.fav-button.visible {
  filter: drop-shadow(0px 0px 6px #00a89c);
  background-color: #ffffff;
}

.ol-popup ::-webkit-scrollbar-track {
  background: unset;
}

div.map.input>div.ol-viewport{
  position: unset !important;
}

@-moz-document url-prefix() {
  div.ol-zoom.ol-control {
    bottom: 7px;
  }

  div.ol-zoom.ol-control button.ol-favourites {
    margin-bottom: 0;
  }

  div.ol-zoom.ol-control button.ol-coordinates {
    margin-bottom: 0;
  }

  div.clear-button-container {
    bottom: 7px;
  }

  div.fav-button-container {
    bottom: 16px;
  }

  .map-container.input div.clear-button-container {
    bottom: 8px;
  }

  .map-container.input .mouse-position-container {
    right: 6px;
  }

  .input div.ol-scale-line {
    bottom:7px;
  }
}