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

[data-module=sites-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=sites-map] .grouped-popup-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

[data-module=sites-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=sites-map] .leaflet-control-zoom a,
[data-module=sites-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=sites-map] .leaflet-control-zoom {
  border: none !important;
}

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

[data-module=sites-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=sites-map] .leaflet-verticalcenter .leaflet-control {
  margin-bottom: 10px;
}

.notification-site-item-container {
  min-height: 26px;
  background-color: white; 
  display: flex;
  padding: 2.5px 6px 2.5px 2.5px;
  align-items: center;
  border-top: var(--normal-button-border);
  min-width: 104px;
  width: 104px;
  max-width: 104px;
  flex-grow: 1;
}

.with-notification {
  z-index: 3000;
}

.notification-site-item-container:last-child {
  border-radius: 0px 0px 5px 5px;
}

.notification-site-item-container:first-child {
  border-top: none;
}

.notification-site-icon {
  min-width: 25px;
  min-height: 25px;
  max-width: 25px;
  max-height: 25px;
  background: url(../../common/img/cameraIcon/camera-shutter-hover-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#meeting-panel-notification-icon {
  background: url(../../common/img/deviceIcon/meeting-panel-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#signage-display-notification-icon {
  background: url(../../common/img/deviceIcon/signate-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

.with-border {
  border: 1px solid var(--main-border-color);
  border-radius: 50%;
}

#rfid-reader-notification-icon {
  background: url(../../common/img/deviceIcon/rfid-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#door-notification-icon {
  background: url(../../common/img/deviceIcon/door-lock-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#cctv-notification-icon {
  background: url(../../common/img/deviceIcon/cctv-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#environment-sensor-notification-icon {
  background: url(../../common/img/deviceIcon/env-sensor-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#time-attendance-notification-icon {
  background: url(../../common/img/deviceIcon/time-attendant-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#light-notification-icon {
  background: url(../../common/img/deviceIcon/light-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#weather-station-notification-icon {
  background: url(../../common/img/deviceIcon/weather-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#wifi-notification-icon {
  background: url(../../common/img/deviceIcon/wifi-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#fire-alarm-notification-icon {
  background: url(../../common/img/deviceIcon/fire-alarm-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#alarm-notification-icon {
  background: url(../../common/img/deviceIcon/alarm-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#electric-meter-notification-icon {
  background: url(../../common/img/deviceIcon/electric-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

#ble-notification-icon {
  background: url(../../common/img/deviceIcon/ble-icon.svg);
  background-size: 25px 25px;
  background-position: center center;
}

.notification-site-text {
  font: normal normal bold 12px/17px Lato;
  letter-spacing: 0px;
  opacity: 1;
  text-transform: capitalize;
}

.site-popup {
  width: 104px;
  min-width: 104px;
  max-width: 104px;
  position: relative;
}

.notification-notation-sign {
  min-width: 24px;
  max-width: 24px;
  min-height: 24px;
  max-height: 24px;
  border-radius: 12px;
  border: 1px solid white;
  color: white;
  position: absolute;
  top: -12px;
  left: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-hover-container {
  padding: 8px;
  min-width: 240px;
  border-radius: 5px;
}

/* .alert-border {
  border: 2px solid #50505A;
  color: #50505A;
} */

.error-border,
.alert-border {
  border: 2px solid #F57823;
  color: #F57823;
}

.critical-border {
  border: 2px solid #C81928;
  color: #C81928;
}

#code-notification {
  font: normal normal bold 14px/17px Lato;
  text-transform: capitalize; 
}

#message-notification {
  padding: 4px 0px 0px 0px;
  font: normal normal normal 12px/15px Lato;
}

.notification-click-container {
  min-width: 300px;
  max-width: 300px;
  padding: 10px;
}

.device-content-row {
  display: flex;
  align-items: baseline;
}

.topic-header {
  flex: 1;
}

.topic-answer {
  flex: 2;
  font: normal normal normal 12px Lato;
}

.button-wrapper {
  cursor: pointer;
  border-radius: 5px;
  padding: 6px 16px 6px 16px;
  margin-top: 10px;
}

#notification-list-container {
  display: flex;
}

.notification-site-detail {
  width: calc(100% - 16px);
}

.notification-list-element-container {
  max-height: 90px;
  overflow-y: auto;
}