:root {
  --main-color: #000000; 
  --main-bg: #d3d3d3; 
  --main-dark: rgba(255, 255, 255, 0.42);
  --main-hover: rgba(128, 128, 128, 0.75); 
  --radius: 6px;
}

* {
  font-family: montserrat, sans-serif !important; 
  color: var(--main-color) !important; 
  font-weight: 400 !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font-size: 24px !important; 
  background: none !important; 
  transition: all 0.5s ease !important; 
  border: none !important; 
}

.leaflet-control-zoom-in {
  border-top-left-radius: var(--radius) !important; 
  border-top-right-radius: var(--radius) !important; 
}

.leaflet-control-zoom-out {
  border-bottom-left-radius: var(--radius) !important; 
  border-bottom-right-radius: var(--radius) !important; 
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background: var(--main-hover) !important; 
  cursor: pointer !important; 
}

.leaflet-bar,
.leaflet-control {
  border: 1px solid var(--main-dark) !important; 
  background: var(--main-bg) !important; 
  box-shadow: none !important; 
  border-radius: var(--radius) !important; 
}

.worldcontrol {
  padding: 0 !important; 
  border-radius: var(--radius) !important; 
}

.worldcontrol select {
  background: none !important; 
  border: none !important; 
  border-radius: var(--radius) !important; 
  outline: none !important; 
  transition: all 0.5s ease !important; 
  padding: 3px !important; 
  font-size: 13px !important; 
  height: 24px !important; 
  line-height: 24px !important; 
}

.worldcontrol select:hover {
  background: var(--main-hover) !important; 
  border-radius: var(--radius) !important; 
  cursor: auto !important; 
}

.worldcontrol select option {
  border: 1px solid var(--main-dark) !important; 
  background: var(--main-bg) !important; 
  box-shadow: none !important; 
  font-size: 12px !important; 
}

.worldcontrol select option:hover {
  background: var(--main-hover) !important; 
  border-radius: var(--radius) !important; 
  cursor: auto !important; 
}

.leaflet-control-layers-expanded {
  padding: 3px 2px !important; 
  font-size: 13px !important; 
}

.leaflet-control-layers-base label {
  font-size: 13px !important; 
  height: 20px !important; 
  line-height: 20px !important; 
  padding: 1px 8px 1px 3px !important; 
  transition: all 0.5s ease; 
}

.leaflet-control-layers-base label span {
  font-size: 13px !important; 
}

.leaflet-control-layers-base label span span {
  font-size: 13px !important; 
  height: 20px !important; 
  line-height: 20px !important; 
}

.leaflet-control-layers-base label:hover {
  background: var(--main-hover) !important; 
  border-radius: var(--radius) !important; 
}

.leaflet-control-layers label {
  font-size: 13px !important; 
  height: 20px !important; 
  line-height: 20px !important; 
  padding: 1px 8px 1px 3px !important; 
  transition: all 0.5s ease; 
}

.leaflet-control-layers label span {
  font-size: 13px !important; 
}

.leaflet-control-layers label span span {
  font-size: 13px !important; 
  height: 20px !important; 
  line-height: 20px !important; 
}

.ov-marker-legend {
  height: 20px !important; 
  margin-left: 18px !important; 
}

.leaflet-control-layers label:hover {
  background: var(--main-hover) !important; 
  border-radius: var(--radius) !important; 
}

.leaflet-control-layers-separator {
  border-top: 1px solid var(--main-dark); 
  margin: 4px 0; 
}

#terr {
  display: flex; 
  flex-direction: row; 
  height: 20px !important; 
  line-height: 20px !important; 
  color: var(--main-color) !important; 
  margin: 2px !important; 
  margin-right: 3px !important; 
}

.custom_input {
  display: flex; 
  margin: auto 3px !important; 
  height: 20px; 
}

.custom_input_span {
  line-height: 20px; 
  height: 20px; 
  font-size: 13px !important; 
}

.leaflet-control-attribution:hover,
.link-www a:hover,
.info-link:hover,
.leaflet-control select option:hover,
.worldcontrol select option:hover {
  background: var(--main-hover) !important; 
}

.compass {
  background: none !important; 
  border: none !important; 
}

.coordbox {
  font-size: 12px !important; 
  padding: 2px 8px !important; 
  border-bottom: none !important; 
  border-left: none !important; 
  border-radius: 0 !important; 
}

.progress {
  font-size: 12px !important; 
  border-right: none !important; 
  padding: 2px 8px !important; 
  min-width: 135px; 
  width: auto; 
  border-bottom-right-radius: 0 !important; 
  border-top-right-radius: 0 !important; 
}

.leaflet-control-attribution {
  border-bottom: none !important; 
  border-right: none !important; 
  border-top: none !important; 
  border-radius: 0 !important; 
  font-size: 12px !important; 
  padding: 2px 8px !important; 
  transition: all 0.5s ease !important; 
  width: 125px; 
}

.link-www {
  position: absolute; 
  right: 18%; 
  top: 1%; 
  display: flex !important; 
  flex-direction: row !important; 
  justify-content: space-around !important; 
  flex-wrap: wrap; 
  width: 160px; 
  height: auto; 
  background: none !important; 
}

.link-www a svg,
.info-link svg {
  width: 65%; 
  height: 65%; 
  fill: var(--main-color) !important; 
  margin: auto !important; 
}

.link-www a,
.info-link {
  width: 40px !important; 
  height: 40px !important; 
  display: flex; 
  border: 1px solid var(--main-dark); 
  border-radius: var(--radius); 
  cursor: pointer; 
  background: var(--main-bg) !important; 
  transition: all 0.5s ease !important; 
  z-index: 99999; 
  position: relative; 
}

.link-www a::after,
.info-link::after {
  content: attr(data-title); 
  display: none; 
  right: 65%; 
  top: 120%; 
  padding: 6px; 
  border: 1px solid var(--main-dark); 
  position: absolute; 
  font-size: 13px; 
  min-width: 200px; 
  background: var(--main-bg) !important; 
  height: auto; 
  color: var(--main-color) !important; 
  border-radius: var(--radius); 
  z-index: 999999; 
  transition: all 0.5s ease; 
  cursor: pointer; 
}

.link-www a:hover::after,
.info-link:hover::after {
  display: inline-block; 
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important; 
  background: var(--main-bg) !important; 
}

.leaflet-popup-content {
  font-size: 13px !important; 
  margin: 8px 12px !important; 
  line-height: 1.25 !important; 
}

.leaflet-popup-tip {
  background: var(--main-bg); 
}

.leaflet-popup-close-button {
  color: var(--main-color); 
  width: 18px !important; 
  height: 18px !important; 
  font: inherit !important; 
  font-size: 14px !important; 
}

@media (max-width: 480px) {
  .link-www a::after,
  .info-link::after {
    content: attr(data-title); 
    display: none; 
    right: -80%; 
    top: 120%; 
    padding: 7px; 
    border: 1px solid var(--main-dark); 
    position: absolute; 
    font-size: 14px; 
    min-width: 150px; 
    background: var(--main-bg) !important; 
    height: auto; 
    color: var(--main-color) !important; 
    z-index: 999999; 
    transition: all 0.5s ease; 
    cursor: pointer; 
  }
}

@media (max-width: 380px) {
  .link-www a::after,
  .info-link::after {
    content: attr(data-title); 
    display: none; 
    right: -120%; 
    top: 120%; 
    padding: 7px; 
    border: 1px solid var(--main-dark); 
    position: absolute; 
    font-size: 14px; 
    min-width: 100px; 
    background: var(--main-bg) !important; 
    height: auto; 
    color: var(--main-color) !important; 
    z-index: 999999; 
    transition: all 0.5s ease; 
    cursor: pointer; 
  }
}
.link-www a::after {
  white-space: pre; 
  content: attr(data-title); 
  display: none; 
  right: 65%; 
  top: 120%; 
  padding: 6px; 
  border: 1px solid var(--main-dark); 
  position: absolute; 
  font-size: 13px; 
  min-width: 200px; 
  background: var(--main-bg) !important; 
  height: auto; 
  color: var(--main-color) !important; 
  border-radius: var(--radius); 
  z-index: 999999; 
  transition: all 0.5s ease; 
  cursor: pointer; 
}

.link-www a:hover::after {
  display: inline-block; 
}