/* dash.css - styling for map page*/

/*  panes styling */
.panes-container {
   display: flex;
   width: 100%;
   overflow: hidden;
}

/* Left pane */
.left-pane {
   width: 50vw; /* Initial width of Left pane */
}

/* Right pane */
.right-pane {
   flex: auto;
   background-color: #ffffff;
   border-left: 1px solid #ddd;
   padding: 20px;
}

.left-pane,
.right-pane {
   height: 100%;
   /* box-sizing: border-box; */
}

.panes-separator {
   margin: 0;
   padding: 0;
   position: relative;
   cursor: col-resize;
   width: 3px;
   border: 2px solid #ff6433;
   background-color: #ff6433;
   border-radius: 5px;
   flex-shrink: 0;
   transition: background-color 0.3s;
}

.panes-separator:hover {
   background-color: #2c82b5;
}

.no-select {
   user-select: none; /* Standard syntax */
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
   -ms-user-select: none; /* IE 10+ */
}

/* Leaflet map */
#map-wrapper {
   height: 85vh;
}
#map-wrapper-pub,
#map-wrapper-pub2 {
   height: 60vh;
}
#hv_map,
#tpms_map {
   height: 100%;
   border-radius: 6px;
}

.leaflet-clickable {
   cursor: crosshair !important;
}

.leaflet-container {
   /* Enable when get info map click enabled */
   /* cursor: help !important; */
   background-color: #f1f1f1;
}

.custom-popup .leaflet-popup-content-wrapper {
   background: #2c3e50;
   color: #fff;
   font-size: small;
}

.leaflet-popup-tip {
   background: #2c3e50;
   color: #2c3e50;
   box-shadow: none;
}

.custom-popup .leaflet-popup-content-wrapper hr {
   margin: 3px;
}

.customPopupHeader {
   font-size: medium;
   font-variant: small-caps;
}

.leaflet-popup-content {
   line-height: 1.3;
   font-size: 0.9em;
}

.custom-popup ul {
   list-style-type: none; /* Removes default list bullets */
   padding: 0;
   margin: 0;
}

.custom-popup li {
   padding: 2px 0; /* Adds vertical spacing between items */
}

.legend {
   padding: 5px;
   border-style: solid;
   border-width: 1px;
}

/* Map legend */
.legend-box {
   background-color: rgba(255, 255, 255, 0.8);
   border: 1px solid #ccc;
   border-radius: 4px;
   padding: 10px;
   max-width: 200px;
}
.legend-title {
   font-size: 0.75rem;
   font-weight: bold;
   margin-bottom: 5px;
   text-align: center;
}

.legend-text {
   font-size: 0.75rem;
}

.legend-item {
   display: flex;
   align-items: center;
   margin-bottom: 5px;
}
.legend-position {
   position: absolute;
   bottom: 25px;
   right: 10px;
   z-index: 1000; /* Make sure the legend is on top of the map */
}

/*  markers */
/* .leaflet-div-icon {
   background: transparent;
   border: none;
}
.leaflet-marker-icon .marker-pin {
   width: 30px;
   height: 30px;
   border-radius: 50% 50% 50% 0;
   background: #2a93ee;
   position: relative;
   transform: rotate(-45deg);
   overflow: hidden;
}
.leaflet-marker-icon .marker-icon {
   font-size: 1.5rem;
   line-height: 1.5rem;
   position: absolute;
   top: 2px;
   left: 2px;
}

.myDivIcon {
   text-align: center;
   line-height: 20px;
} */

.awesome-marker svg {
   color: #333;
   margin-top: 10px;
   display: inline-block;
   font-size: 14px;
}

/*  tab controls */
.tab-content {
   flex-grow: 1;
}
.tele-chart {
   margin: 20px;
}