#map {
  /* width: 100%; */
  width: calc(100% - var(--CPwidth) - 30px); /* shubham_april_work 15_04_24 */
  margin: 0 auto;
  height: 100vh;
  float: right;
}

.leaflet-bar{
  box-shadow: none;
}
.leaflet-tooltip {
  border: 3px solid #000;
  border-radius: 10px;
  /* font-size: 20px; */
  font-family: "BloggerSans", Georgia;
  background-color: #221d1f;
  color: white;
}

.leaflet-tooltip-top:before {
  /* css for tip of tooltip */
  top: 45%;
  margin-top: 19px;
  border-top: 20px solid #221d1f; /* increase the border width */
}

.leaflet-control-zoom.leaflet-bar a {
  border-radius: 15px;
  background-color: #221d1f;
  border-bottom: 0px;
}
.leaflet-control-zoom.leaflet-bar a img{
  width: 35px;
}

.leaflet-verticalcenter {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  /* top: 50%; possible because the placeholder's parent is the map */
  /* left: calc(var(--CPwidth)); */
  /* transform: translateY(-50%); using the CSS3 Transform technique */
  padding-top: 10px;
}

.leaflet-verticalcenter .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-control-zoom {
  border-radius: 25px;
  width: 37px;
  /* left: calc(var(--CPwidth) + 40px); */  /* shubham_april_work 15_04_24 */
  background-color: #221d1f;
  /* border: 1px solid rgba(0, 0, 0, 0.8); */
  border: 1px solid #221d1f !important;
  padding: 4px;
  /* font-size: 30px; */
  text-align: center;
  /* height: 6em; */
  height: 96px; /* shubham_april_work 15_04_24 */
  color: #000;
}

.leaflet-popup-content-wrapper {
  background-image: linear-gradient(#eeeeed, #d3d2d4);
  /* background-color: #221d1f; */
  background-color: #e4e4e4;
  /* border: 1px solid rgba(0, 0, 0, 0.8); */
  border: 0px solid #221d1f;
  /* padding: 6px; */
  /* font-size: 30px; */
  text-align: center;
  /* height: 2em; */
}

.leaflet-popup-content {
  font-size: 16px;
  font-family: "BloggerSans", Georgia;
  color: black;
}

.popup-mapchange-button {
  /* background-color: #e8c483; */
  margin: 3px;
  /* position: absolute; */
  /* top: 87.5px; */
  /* left: 350px; */
  color: black;
  text-align: center;
  text-decoration: none;
  padding: 6px;
  border-radius: 4px;
  margin: 6px;
}

/*.leaflet-popup button, */
.leaflet-popup select{
  font-family: 'BloggerSans';
  background-color: white;
}

.leaflet-popup-tip {
  width: 0px;
  height: 0px;
}

.leaflet-touch .leaflet-bar a {
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 15px !important;
}

.leaflet-touch .leaflet-bar a:last-child{
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* shubhamverma_storebuttonwork */
.storebutton{
  text-align: center;
  margin-left: 10px;
  margin-top: 110px;
  cursor: auto;
  display: block;
  pointer-events: visiblepainted;
  cursor: pointer;  
}
.storebutton img{
  width: 42px;
}
/* shubhamverma_storebuttonwork */

/* shubhamverma_legendimagework */
.legendImgBtn{
  text-align: center;
  margin-left: 10px;
  margin-top: 5px;
  cursor: auto;
  display: block;
  pointer-events: visiblepainted;
  cursor: pointer;
  position: relative;
}
.legendImgBtn img{
  width: 42px;
}

.legendImageMainDiv{
  display: none;
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 100vh;
}
.legendImageDiv{
  position: absolute;
  width: 260px;
  height: 560px;
  overflow: auto;
  top: 100px;
  left: 510px;
  scrollbar-color: lightgrey rgb(34, 29, 31);
  scrollbar-width: thin;
  padding: 20px;
  background: #221d1f;
}
.legendImageDiv > img{
  width: 100%;
}
.legendImageDivTriangle{
  left: 490px;
  position: absolute;
  top: 160px;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-right: 50px solid #221d1f;
  border-bottom: 40px solid transparent;
}
/* shubhamverma_legendimagework */