.sitePopUp .leaflet-popup-content-wrapper{

	/* background: white !important;
    color: #0a10b9; */
    box-shadow: 0 3px 14px rgba(0,0,0,0.4) !important;
    background-color: white !important;
    border-radius: var(--site-border-radius);
    padding: 0rem !important;

}

.sitePopUp{

	background: white;
    color: #0a10b9;
    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    /* background-color: #61ead6; */
    border-radius: 1rem;

}

#sideLeafMap{
    position: relative !important;
    height: 300px;
    min-width: 300px !important;
    border-top-left-radius: var(--site-border-radius);
    border-top-right-radius: var(--site-border-radius);
    z-index: 10002;
}

@media screen and (max-width: 898px){
    #sideLeafMap{
        position: relative !important;
        height: 300px;
        min-width: 300px !important;
        border-top-left-radius: var(--site-border-radius);
        border-top-right-radius: 0;
        z-index: 10002;
    }

}


/* .leaflet-pane img{
    position: absolute;
}
 */

.map-additional-options-wrapper {
    display: block;
    background-color: white !important;
    border-radius: var(--site-border-radius);
    /* border: 1px solid var(--site-border-lighter-grey); */
}

.map-additional-options-wrapper .radio-option{
    padding: 1rem;
    border-bottom: 1px solid var(--site-border-lighter-grey) !important;
}

.map-additional-options-wrapper .radio-option label{
    padding-bottom: 0px !important;
    margin-bottom: 0rem !important;
}

.layer-control .lc-tabs { 
    display:flex; 
    gap:24px; 
    padding:8px 12px 0; 
}

.layer-control .lc-tab { 
    background:none; 
    border:0; 
    color:#6b7280; 
    cursor:pointer; 
    padding:6px 0; 
    font-size: var(--site-fs-subtitle-sm);
    font-family: var(--site-ff);
    font-weight: 300;
    margin-right: 1.5rem;
}

.layer-control .lc-tab.active { 
    color:#111827; 
    position:relative; 
}

.layer-control .lc-tab.active::after {
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:-8px; 
  height:3px; 
  border-radius:2px;
  background:#0f766e;  /* teal underline like your screenshot */
}

.layer-control .lc-panels { 
    padding: 1rem 0rem;
    margin: 2rem 0rem;
    max-height: 30vh !important;
    overflow: auto;
}

.layer-control.leaflet-control{
    position: absolute;
    top: 0rem;
    left: 3rem;
}

.layer-control .checkbox-option { 
    margin:6px 0; 
}

.layer-control .lc-draw .lc-tool { 
    margin:4px 6px 0 0; 
    padding:8px 10px; 
    border:1px solid #d1d5db; 
    border-radius:8px; 
    background:#fff; 
}

@media screen and (max-width: 898px){
    /* Open up the lc-panels to see everything */
    .lc-panels[style*="display: block"] {
        min-width: 35vw !important;
    }
}

@media screen and (min-width: 899px){
    /* Open up the lc-panels to see everything */
    .lc-panels[style*="display: block"] {
        min-width: 20vw !important;
    }
}

@media screen and (max-width: 600px){
    /* Open up the lc-panels to see everything */
    .lc-panels[style*="display: block"] {
        min-width: 45vw !important;
    }
}

.station-legend-dot {
    /* width: 1rem;
    height: 1rem; */
    display: inline-flex;
    border-radius: 50%;
    padding: 0.5rem;
}


.legend-section{
    display: flex;
    flex-direction: column;
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    padding: 1rem;
}

.legend-toa{
    margin-top: 6rem;
}

/* keep the wrapper reasonable on small screens */
.parcel-popup .leaflet-popup-content-wrapper {
    max-width: min(92vw, 420px);
    border-radius: 16px;
  }
  
  /* the important bit: content scrolls, header/close stays visible */
  .parcel-popup .leaflet-popup-content {
    max-height: calc(100dvh - 140px - env(safe-area-inset-top));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px; /* room for scrollbar without shifting */
  }
  
  /* optional – give the popup a little breathing room from edges */
  .leaflet-popup {
    margin: 8px;
  }
  
  .sv-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 9px;
}

.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    text-align: center;
    width: 24px;
    height: 24px;
    font: 16px/24px Tahoma, Verdana, sans-serif;
    color: #757575;
    text-decoration: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem;
}

/* Used in displaying the zoning row on a map layer element (i.e. look at zoning-boundaries) */
.zoning-row {
    display: flex;
    flex-direction: column;
    align-items: self-end;
    gap: 1rem;
    border: 1px solid var(--site-border-light-grey);
    border-radius: var(--site-border-radius-sm);
    padding: 0.5rem 1rem 2rem 1rem;
    margin: 0.5rem 1rem;
}

.zoning-row:hover{
    box-shadow: var(--bs-d-7);
}

.map-comment-button{
    width: 100%;
    height: 100%;
    
}

#project-map-wrapper {
    height: calc(var(--top-navbar-page-remaining-height) - 6rem) !important;
    
}

#project-map{
    height: 100%;
}