/*
 * Map styles
 */
.header {
  padding: 0 0.875rem;
}

.map-container {
  height: calc(100vh - 76px); /* viewport height minus header */
  position:relative;
  width: 100vw;
}

/*
 * Layer navigation
 */
.navigator {
  background-color: #f2f2f2;
  box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  width: 320px;
  z-index: 10;
}

.layer-accordion{
  background-color: #f2f2f2;
  background-size: 24px 24px;
  background-position: 27px center;
  background-repeat: no-repeat;
  border-color: #fff;
  border-style: none none solid none;
  border-width: 1px;
  color: #006a4e;
  display: block;
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  padding: 12px 15px 12px 78px;
  position: relative;
  outline: none;
  text-align: left;
  transition: 0.2s;
  width: 100%;
}

.foodproduction {
	background-image:url('../images/icons/food-production.png')
}
.foodproduction:hover, .foodproduction.active {
	background-image:url('../images/icons/food-production-active.png')
}

.distribution {
	background-image:url('../images/icons/distribution.png')
}
.distribution:hover, .distribution.active {
	background-image:url('../images/icons/distribution-active.png')
}

.adminboundaries {
	background-image:url('../images/icons/administrative.png')
}
.adminboundaries:hover, .adminboundaries.active {
	background-image:url('../images/icons/administrative-active.png')
}

.biophysical {
	background-image:url('../images/icons/biophysical.png')
}
.biophysical:hover, .biophysical.active {
	background-image:url('../images/icons/biophysical-active.png')
}

.census {
	background-image:url('../images/icons/socio-economic.png')
}
.census:hover, .census.active {
	background-image:url('../images/icons/socio-economic-active.png')
}

.hazard {
	background-image:url('../images/icons/hazards.png')
}
.hazard:hover, .hazard.active {
	background-image:url('../images/icons/hazards-active.png')
}

.utility {
	background-image:url('../images/icons/utility-services.png')
}
.utility:hover, .utility.active {
	background-image:url('../images/icons/utility-services-active.png')
}


.active, .layer-accordion:hover {
  background-color: #f42a41;
  color: #FFF;
}

.layer-accordion::after {
  content: url('../images/icons/plus.svg');
  position: absolute;
  right: 15px;
  top: 15px;
}

.active::after {
  content: url('../images/icons/cross--small.svg');
}

.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  padding-left: 1.875rem;
  transition: max-height 0.2s ease-out;
}

.navigator__panel__layer {
  padding-top: 1.875rem;
  position: relative;
}

.navigator__panel__layer:last-child {
  padding-bottom: 1.875rem;
}

.navigator__panel__layer__download {
  color: #898989;
  display: inline-block;
  position: absolute;
  right: 15px;
  top: 1.65rem;
}

.navigator__panel__layer__download:focus,
.navigator__panel__layer__download:hover {
  color: #006a4e;
  text-decoration: none;
}

input[type=checkbox].layer-checkbox {
	display: none;
}

.layer-label{
  background-position: left top;
  background-image:url('../images/icons/visibility-off.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
	color: #bdbdbd;
  display: block;
  font-size: 13px;
  margin-bottom: 0;
  padding-left: 48px; /* 30px padding + 18px icon */
  padding-right: 45px; /* 30px padding (left & right) + 15px download icon */
}

.layer-description{
  font-size: 11px;
  color: #828282;
  display: block;
  margin-left: 48px; /* 30px padding + 18px icon */
  margin-right: 1.875rem;
  white-space: nowrap;
}

/* Only set cursor and ellipsis when content is hidden */
.layer-description[data-tippy-content] {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Tooltip -- Custum Tippy theme
 * docs: https://atomiks.github.io/tippyjs/v6/themes/
 */
.tippy-box[data-theme~='dhaka'] {
  background-color: #f2f2f2;
  border-radius: 4px;
  box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.25);
  color: #006a4e;
}

.tippy-box[data-theme~='dhaka'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #f2f2f2;
}


input[type=checkbox].layer-checkbox:checked + label.layer-label {
	 background-image: url('../images/icons/visibility-on.png');
	 color: #F42A41;
}

input[type=checkbox].layer-checkbox:hover + label.layer-label {
	cursor: pointer;
}

input[type=checkbox].layer-checkbox:checked  ~ .layer-description   {
	 color: #006A4E;
}

/*
 * Legend
 */
#legend{
  position: absolute;
  left: 340px;
  top: 100px;
  z-index: 9;
  background-color: #fff;
  text-align: left;
  border: 1px solid #d3d3d3;
  box-shadow: 1px 0 2px 0 rgba(0,0,0,0.5);
}

#legendheader{
  background-color: #F42A41;
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  padding: 10px;
  cursor: move;
  z-index: 10;
}

#legendcontainer{
	max-height: 75vh;
	overflow-y: auto;
  padding-right: 20px; /* reserve space for scrollbar */
}

.legendlayercontainer {
  padding: 0 0 10px 10px;
}

.legendlayercontainer:first-child {
  margin-top: 10px;
}

.legend__item__handle {
  cursor: move;
  display: block;
  font-size: 13px;
  margin-right: 0.5rem;
}

.legend__item__title {
  color: #F42A41;
  cursor: move;
  font-size: 13px;
  margin-bottom: 0;
}

.legend__item__units {
  color: #828282;
  font-style: italic;
}

.legend__item__image {
  margin-left: 1.15rem;
}