/* map styles */
/* -------------------------------------------------------- */
/* Stonebridge interative map                               */
/* -------------------------------------------------------- */

#customMap {
  height: 75vh;
  max-height: 1000px;
}

#zoomLevel {
  display: none;
}

div.leaflet-control.legend {
  background: white;
  padding: 10px;
  font-weight: bold;
  border: 1px solid black;
}

#customMap div.leaflet-bar {
    border: none;
}

.infoCustom table, 
.infoCustom table th, 
.infoCustom table td {
  border: 1px solid black;
  padding: 5px;
}

.infoCustom table .right {
  text-align: right;
}

.infoCustom table .center {
  text-align: center;
}

.infoCustom table thead tr {
  color: white;
  background: green;
}

.infoCustom {
  overflow-x:scroll;
}

.leaflet-control-custom a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
  background-color: white;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 18px;
}
.leaflet-control-custom a:hover {
  background-color: #f4f4f4;
}

.extra-marker {
  width: 35px;
  height: 45px;
  background-image: url('../images/markers_default.png'); /* updated! */
  background-repeat: no-repeat;
  /* No background-size here! */
  background-position: 0px 0px; /* Adjust to pick a different color pin */
  position: relative;
  text-align: center;
  line-height: 45px;
  color: white;
  font-weight: bold;
  font-size: 18px;
}
.extra-marker i {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: 0px 0px !important;  /* default orange */
}

.extra-marker-red {
  background-position: 0px 0px !important;  /* red */

}

.extra-marker-blue {
  background-position: -180px 0px !important;  /* blue */

}

.extra-marker-orange {
  background-position: -70px 0px !important;  /* orange */

}

.extra-marker-black {
  background-position: -468px 0px !important;  /* black */

}

.legend-color {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 3px;
}

div.infoCustom table thead tr td,
div.infoCustom table thead tr th{
    background: green;
    color: white;
}

div.leaflet-control-custom {
  min-width: 155px !important;
}

/* hide tooltip on click for smartphones */
@media (max-width: 768px) {
  div.leaflet-pane.leaflet-tooltip-pane {
    display: none;
}
}

/* ---------- Pond data editor -------------- */

.pond-editor-wrapper {
    overflow-x: auto; /* horizontal scroll if too wide */
}

.pond-editor-wrapper table {
    width: 100%;
    min-width: 1200px; /* or whatever makes sense for your data */
    border-collapse: collapse;
}

.pond-editor-wrapper th,
.pond-editor-wrapper td {
    border: 1px solid #ccc;
    padding: 8px;
}

.pond-editor-wrapper input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    font-size: 14px;
}