#alert-statistics-map {
  height: 500px;
  margin: 24px 0;
}

.page-node-type-alert-dashboard .map-legend {
  margin-bottom: 24px;
}
.page-node-type-alert-dashboard .map-legend .map-legend-title {
  display: block;
  padding: 10px 10px 10px 56px;
  background: #fff;
  border: 1px solid #002c49;
  color: #002c49;
  position: relative;
  border-radius: 0;
  font-weight: 600;
  font-size: 18px;
}

.page-node-type-alert-dashboard .map-legend.active .map-legend-title {
  background: #002c49;
  color: #fff;
}

.page-node-type-alert-dashboard .map-legend .map-legend-title:after {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMiAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMSIgeT0iMS41IiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHJ4PSIxNSIgc3Ryb2tlPSIjMDAyQzQ5IiBzdHJva2Utd2lkdGg9IjIiLz4KPHBhdGggZD0iTTI1LjMzMzYgMTYuMTY3VjE2LjgzMzZDMjUuMzMzNiAxNy4yMDE4IDI1LjAzNTIgMTcuNTAwMyAyNC42NjcgMTcuNTAwM0gxNy4wMDAzVjI1LjE2N0MxNy4wMDAzIDI1LjUzNTEgMTYuNzAxOCAyNS44MzM2IDE2LjMzMzYgMjUuODMzNkgxNS42NjdDMTUuMjk4OCAyNS44MzM2IDE1LjAwMDMgMjUuNTM1MSAxNS4wMDAzIDI1LjE2N1YxNy41MDAzSDcuMzMzNjZDNi45NjU0NyAxNy41MDAzIDYuNjY2OTkgMTcuMjAxOCA2LjY2Njk5IDE2LjgzMzZWMTYuMTY3QzYuNjY2OTkgMTUuNzk4OCA2Ljk2NTQ3IDE1LjUwMDMgNy4zMzM2NiAxNS41MDAzSDE1LjAwMDNWNy44MzM2NUMxNS4wMDAzIDcuNDY1NDYgMTUuMjk4OCA3LjE2Njk5IDE1LjY2NyA3LjE2Njk5SDE2LjMzMzZDMTYuNzAxOCA3LjE2Njk5IDE3LjAwMDMgNy40NjU0NiAxNy4wMDAzIDcuODMzNjVWMTUuNTAwM0gyNC42NjdDMjUuMDM1MiAxNS41MDAzIDI1LjMzMzYgMTUuNzk4OCAyNS4zMzM2IDE2LjE2N1oiIGZpbGw9IiMwMDJDNDkiLz4KPC9zdmc+Cg==");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 300;
  left: 10px;
  transition: all 0.3s ease;
  transform: translateY(-50%);
  top: 50%;
}

.page-node-type-alert-dashboard .map-legend .map-legend-title:hover::after {
  background-color: #73f7fc;
}
.page-node-type-alert-dashboard .map-legend.active .map-legend-title:after {
  background-color: #73f7fc;
  color: #002b49;
  transform: translateY(-50%) rotate(45deg);
}

.page-node-type-alert-dashboard .map-legend .map-legend-body {
  padding: 16px;
  background-color: #fff;
}

.page-node-type-alert-dashboard .map-legend ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 16px 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-node-type-alert-dashboard .map-legend .marker-pins .map-icons {
  color: #0a0a0a !important;
}
.layer-control {
  background-color: white;
  padding: 12px 15px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.09); 
  top: 8px !important;
  right: 8px !important;
}

.layer-control .checkbox-container {
  display: flex;
  align-items: center;
  padding: 4px 0;
}
.layer-control .checkbox-container input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid #002b49;
  border-radius: 0;
  background-color: white;
  cursor: pointer;
  position: relative;
}

.layer-control .checkbox-container input[type="checkbox"]:checked {
  background-color: #002b49;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M6.5501 13.0125L0.850098 7.31255L2.2751 5.88755L6.5501 10.1625L15.7251 0.987549L17.1501 2.41255L6.5501 13.0125Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

.layer-control .checkbox-container input[type="checkbox"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.layer-control .checkbox-container label {
 font-size: 16px;
 font-family: Parramatta;
 font-weight: 400;
 color: #0A0A0A;
}

/* temporary hide the LGA checkbox */
.lga-checkbox-container {
  display: none !important;
}

@media screen and (min-width: 1024px) {
  #alert-statistics-map {
    height: 714px;
  }

  .layer-control  {
    top: 32px !important;
    right: 32px !important;
  }
}