/* body {
  margin: 0px;
} */

#search-map {
  width: 100%;
  height: 30px;
  margin-bottom: 5px;
  border-radius: 5px;
  border: 1px solid #aaaaaa;
  padding: 4px 11px;
}

#search-map:hover, #search-map:focus {
  border-color: #1890ff !important;
}

.geocoder-control-suggestions {
  width: 100%;
  background: #ffffff;
  margin-top: 10px;
}

.geocoder-control-selected{
  background: #7FDFFF;
  border-color: #7FDFFF;
}

.geocoder-control-suggestions ul li {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  line-height: 1.4;
}

.geocoder-control-suggestions ul li {
  padding: 3px 20px;
  margin: 0;
}

.geocoder-control-suggestions ul li:hover{
  background: #7FDFFF;
  border-color: #7FDFFF;
}

.geocoder-control-input {
  width: 25px;
  height: 25px;
  background-image: url("https://raw.githubusercontent.com/Esri/esri-leaflet-geocoder/master/src/img/search.png");
  background-repeat: no-repeat;
  background-position: right;
}

.geocoder-control-input:focus {
  width: 250px;
}

.view-map-detail {
  height: 30vh;
  border: 1px solid var(--disabled-textfield-background);
}

.edit-map-detail {
  height: 70vh;
  border: 1px solid var(--disabled-textfield-background);
}

.leaflet-control-search {
  top: 50px;
}

.leaflet-control-search .search-tooltip {
  max-width: 254px;
}

.leaflet-control-search.leaflet-control.search-exp input:focus {
  outline: none;
}

.leaflet-control-search.leaflet-control.search-exp input {
  width: 210px;
  border: none;
  color: #000;
}

.leaflet-control-search.leaflet-control.search-exp {
  width: 250px;
}

.map-container {
  position: relative;
  flex-grow: 1;
}

.marker-element {
  z-index: 10000000000;
  position: fixed;
  width: 20px;
  height: 30px;
  background-size: contain;
  background-image: url(../../common/img/mapIcon/red-pin-icon.svg);
  background-repeat: none;
}

.leaflet-control-zoom a,
.leaflet-control-zoom a:hover {
  width: 30px !important;
  height: 30px !important;
  margin-bottom: 5px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--main-icon-color) !important;
  border-radius: 4px !important;
  background: white;
  font-weight: normal;
  font-size: 15px !important;
  color: var(--main-line-icon-color) !important;
  box-shadow: 0 3px 6px #00000029;
}

.leaflet-control-zoom {
  border: none !important;
}

.leaflet-bar {
  box-shadow: none !important;
}

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

.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;
}
.leaflet-verticalcenter .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-pane {
  z-index: 0 !important;
}

#esri {
  display: none;
}

.map-container:after {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: #000000dd;
  top: 45px;
  right: 10px;
  z-index: 1000000000;
  width: 150px;
  height: 50px;
}

#map {
  width: 100%;
  height: 100%;
  z-index: 100;
}

.leaflet-touch .leaflet-bar {
  border: 0px !important;
}

.leaflet-top .leaflet-control {
  margin-top: 5px;
}

.leaflet-bar-container {
  margin: 0 !important;
}

.leaflet-container .search-input {
  margin: 15px 10px 0;
}

.instruction-popup {
  max-width: calc(100%);
  height: 30px;
  position: absolute;
  right: 55px;
  background: var(--main-text-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--disabled-textfield-background);
  box-shadow: 0px 3px 6px #00000029;
  font: italic 14px/17px Lato;
  letter-spacing: 0;
  text-align: left;
  border-radius: 5px;
}

.instruction-popup.search-location {
  width: calc(100% - 20px);
  left: 0;
  justify-content: start;
  padding: 7px 10px;
  margin: 0 10px;
  height: auto;
}

.instruction-popup:not(.search-location)::before{
  top: calc(50%-10px);
  right: -12px;
  border-color: transparent var(--main-text-color);
  border-width: 13px 0px 13px 13px;
  content:'';
  position: absolute;
  border-style: solid;
  display:block;
  width:0;
}

.leaflet-control-custom-container .instruction-popup {
  width: 250px;
  /* sidebar => 230 collapsed sidebar ~ */
  max-width: calc(100vw - 300px);
}

#select-location-map {
  height: 100%;
}

[data-module=bms] .leaflet-popup-content .site-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

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

[data-module=bms] .leaflet-popup-content p {
  flex: 1 0;
}

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

[data-module=bms] .leaflet-popup-content p,
[data-module=bms] .leaflet-popup-content {
  margin: 0;
  width: 100%;
  align-items: center;
}

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

[data-module=bms] .site-name-container {
  /* width: 104px; */
  height: 26px;
  /* padding: 7px 8px; */
  border-radius: 5px;
  background: var(--main-text-color);
  color: #fff;
  display: flex;
  /* border: none; */
}

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

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

[data-module=bms] .site-name-container.empty {
  color: var(--disabled-textfield-background);
  font-size: 11px;
}

.instruction-popup.search-location.inline-error {
  background: #ffffff;
  color: #C81928;
  border: 2px solid #C81928;
  font-style: normal;
}