/* Styles for the new beebase maps */

/* This is the main map wrapper and container */
#map-wrapper {
  position: relative;
  /* I'm using vw as a width controller as BeeBase is a non-responsive website and using 100% (as we normally would) means the map isn't responsive */
  width:80vw;
  /* Using flex to position the user interface either to the side or above the map */
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 0px;
  margin: 25px 0px;
}

/* Map and slider container */
#map-and-slider {
  border: 1px solid #aaaaaa;
  height:700px;
}

#map {
  height:700px;
}

#slider-container {
  width: 90%;
  height: 60px;
  margin: -80px auto 20px auto!important;
  background-color: rgba(255,255,255,0.7);
  border-radius: 13px;
  display:block;
  padding:0px 30px;
  position: relative!important;
  z-index: 99999;
}

/* Legend container */
#legend-container {
  border: 1px solid #aaaaaa;
  max-height:700px;
  overflow-y: scroll;
  padding-left: 5px;
}

/* for smaller screens, place the legend-container above the map */
@media only screen and (max-width: 768px) {
  #legend-container {
    flex:1 1 100%;
    height:125px;
  }

  #map-and-slider {
  flex: 1 1 100%;
  }

}

@media only screen and (max-width: 1024px) {
  .rs-container .rs-scale span ins {
    color: rgba(255,255,255,0)!important;
  }
}

/* For standard and larger devices, place the legend-container to the left of the map */
@media only screen and (min-width: 769px) {
  #legend-container {
    flex:0 1 250px;
  }

  #map-and-slider {
    flex: 1 1 auto;
  }
}

/* Specific styling for the look of the map and it's elements */
a.leaflet-control-zoom-in, a.leaflet-control-zoom-out {
  text-decoration: none!important;
  font-size:1.5em!important;
}

.leaflet-control-layers-selector {
  margin-top:7px;
  font-size:1em;

}

.leaflet-control-layers-expanded {
  padding-bottom:9px!important;
  max-height:250px;
  overflow-x: hidden!important;
}

.leaflet-control-layers-scrollbar {
  overflow-y: auto;
  max-height:250px;
}

.leaflet-control-layers label span {
  overflow: hidden!important;
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
}

.leaflet-popup-content {
  font-size: 1em;
  line-height:1.7em;
}

/* styling for the legends display */
.legendHeader {
 font-size: 1em!important;
}

.legendTable {
  font-size: 0.8em!important;
}

.legendTable tr img {
  padding-left: 10px;
}

.legendTitle {
  margin-bottom:5px;
  font-size: 0.85em;
  line-height:1.7em;
  margin-left: 5px;
}

.hideUntilSelected {
  display: none;
}

.legendRow {
  margin:10px 0px;
  display: flex;
  flex-direction:row;
  align-items: center;
  max-width: 100%;
}

.legendDetail {
  align-items: center;
  padding-left:10px;
}

.legendDisplay {
  font-size: 0.8em!important;
  padding-left: 20px;
}

.legendSymbol, .legendSymbolNonCurrent {
  width: 25px;
  height: 25px;
  min-width: 25px;
  border:3px solid #637BF9;
  align-items: center;
  opacity: 0.6;
}

.legendSymbolNonCurrent {
  background-color: #a62c1c;
}

.highRisk {
  color: #a62c1c;
}

.mediumRisk {
  color: orange;
}

.lowRisk {
  color: green;
}

.abiCountsTable {
  width: 92vw;
  border: solid 1px #eee;
  border-collapse: collapse;
  font-size: 1em;
  margin-bottom: 25px;
}

.abiCountsTable td, .abiCountsTable th  {
  border: solid 1px #ccc;
  padding: 7px;
}

.abiCountsTable tr.nonCurrentABI, .nonCurrentRows {
  background-color: #eee;
}

.nonCurrentRows {
  border: solid 1px #ccc;
}

.centerText {
  text-align: center;
}