[data-module=pm25-map],
[data-module=pm25-map] .map-container,
[data-module=pm25-map] .map-detail {
  height: 100%;
}

[data-module=pm25-map] .grouped-popup {
  background: #ffffffaa;
  border: 1px solid var(--disabled-textfield-background);
  border-radius: 10px;
  height: 203px;
  padding: 5px;
  margin-bottom: 5px !important;
  /* max-width: calc(100vw - 500px);
  overflow: auto; */
}

[data-module=pm25-map] .grouped-popup-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* [data-module=pm25-map] .site-popup {
  width: 106px !important;
} */

[data-module=pm25-map] .grouped-popup.leaflet-popup {
  bottom: 30px !important;
}

[data-module=pm25-map] .grouped-popup [class^=leaflet-popup],
[data-module=pm25-map] .grouped-popup [class$=-popup-content] {
  height: 100%;
}

[data-module=pm25-map] .site-popup-container.leaflet-popup {
  margin: 0 !important;
  bottom: -45px !important;
}

[data-module=pm25-map] .leaflet-popup-content .site-name-container.popup {
  border-radius: 5px 5px 0 0;
  width: 110px;
}

[data-module=pm25-map] .leaflet-popup-content .into-site-icon {
  background-image: url(../../common/img/mapIcon/arrow.svg);
  width: 14px;
  height: 14px;
}

[data-module=pm25-map] .leaflet-popup-content p {
  flex: 1 0;
  max-width: 70px;
}

[data-module=pm25-map] .leaflet-popup-content {
  width: 100% !important;
}

[data-module=pm25-map] .leaflet-popup-content p,
[data-module=pm25-map] .leaflet-popup-content {
  margin: 0;
  align-items: center;
}

[data-module=pm25-map] .leaflet-popup-content-wrapper {
  background: transparent;
  box-shadow: none;
}

/* [data-module=pm25-map] .site-name-container {
  width: 104px;
  height: 26px;
  background: var(--main-text-color);
  color: #fff;
  display: flex;
  border: none;
  justify-content: center;
} */

[data-module=pm25-map] .site-name-container.hover {
  cursor: pointer;
  background: var(--main-key-color);
}

[data-module=pm25-map] .leaflet-popup-tip-container {
  display: none;
}

[data-module=pm25-map] .site-event-card {
  background: #fff;
  border: 1px solid var(--disabled-textfield-background);
  border-top: none;
  border-radius: 0 0 5px 5px;
  /* height: 150px; */
  /* margin-bottom: 5px; */
  /* display: flex; */
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 6px #00000029);
  padding-bottom: 6px;
}

[data-module=pm25-map] .leaflet-control-zoom a,
[data-module=pm25-map] .leaflet-control-zoom a:hover {
  width: 30px !important;
  height: 30px !important;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #AAAAAF !important;
  border-radius: 3px !important;
  background: var(--base-background);
  font-weight: normal;
  font-size: 15px !important;
  color: #AAAAAF;
}

[data-module=pm25-map] .leaflet-control-zoom {
  border: none !important;
}

[data-module=pm25-map] .leaflet-verticalend {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  bottom: 0; /* possible because the placeholder's parent is the map */
}
[data-module=pm25-map] .leaflet-verticalend .leaflet-control {
  margin-bottom: 10px;
}

[data-module=pm25-map] .leaflet-verticalcenter {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  top: 50%; /* possible because the placeholder's parent is the map */
  transform: translateY(-50%); /* using the CSS3 Transform technique */
  padding-top: 10px;
}
[data-module=pm25-map] .leaflet-verticalcenter .leaflet-control {
  margin-bottom: 10px;
}

/* =============== pm2.5 popup =============== */

[data-module=pm25-map] .site-event-card .pm25-container {
  display: flex;
  align-items: center;
  padding: 0 6px;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 {
  filter: drop-shadow(1px 2px 0px #00000029);
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .leaflet-popup-content-wrapper {
  /* width: 64px;
  height: 58px; */
  width: 62px;
  max-height: 56px;
  padding: 3px;
  background: #FFFFFF;
  /* border: 1px solid #C9C9C9; */
  border-radius: 8px;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .leaflet-popup-tip-container {
  display: block;
  top: 99%;
  width: 14px;
  margin-left: -5px;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .leaflet-popup-tip {
  box-shadow: none;
  -webkit-transform: none;
  transform: none;
  width: 0;
  height: 0;
  position: absolute;
  background: transparent;
  padding: 0;
  margin: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #FFFFFF;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .leaflet-popup-content {
  padding: 0;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .site-name-container {
  width: 100%;
  flex: 0 0 21px;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .site-popup {
  display: flex;
  flex-direction: column;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .site-name-container p {
  padding: 0 5px;
}

[data-module=pm25-map] .site-popup-container.pm2\.5 .site-event-card {
  flex: 1 1;
  padding: 0;
  filter: none;
  border: none;
}

[data-module=pm25-map] .site-event-card .pm25-data {
  font-size: 20px;
  padding: 0 3px 0 5px;
  width: 100%;
  text-align: center;
}

/* =============== end pm2.5 popup =============== */