#sidebar {
  /* min-width: unset;
  max-width: unset;
  box-sizing: unset;
  bottom: 3.2em;
  left:0; */
  box-shadow: #777 2px 2px 10px;
  cursor: default;
}
.sidebar{
  /* ensure above map canvas (matches ol3-sidebar.css) */
  /* z-index: 2000;  */
  z-index: 999;
}
.sidebar-tabs
{
 /* background-color: rgb(138 198 192 / 73%); */
 /* background-color: rgb(51 122 183 / 52%); */
     background: rgb(51 122 183 / 85%);
}
#sidebar .sidebar-header {
  padding: unset;
  font-size: 14px;
  padding-left: 30px;
  /* background: #337ab7; */
      background: #92b7d6;
          color: #196eb7;
}
.sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
  /* color: #fff; */
  /* background-color: #337ab7; */
  color: #337ab7;
      background-color: #92b7d6;
}
.sidebar-pane {

  padding: 10px 5px;
  /* padding: 10px 20px 10px 5px; */
}
.sidebar-pane .sidebar-pane-body{
  padding: 6px 4px;
  /* padding-right: 1em; */
} 
#pnlLayerSwitcherContent{
  padding-right: 0;
}
/* 
.ol-zoom {
  left: 3.5em;
} */
.prev-extent-control {
  top: 0.5em;
  left: 4.5em;
}
.next-extent-control {
  top: 0.5em;
  left: 7em;
}
.ol-control.ol-legend {
  bottom: .5em;
  left: 3.5em;
}
.ol-control.ol-bar.ol-left {
  left: 3.5em;
 
} 


.ol-layerswitcher .panel{
  border:none;
}
#pnlLayerSwitcherContent{
  display: flex;
    flex-direction: column;
    height: 100%;
    
}

:root {
  --sidebar-width: 500px;
  }

.ol-layerswitcher .panel li label{
  max-width: Calc( 100% - 80px );
}

/* ===== Side-by-side layout for map page (opt-in via .map-layout-row) ===== */
.map-layout-row{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

/* Sidebar as a flex item (no overlay)یی */
.map-layout-row #sidebar.sidebar{
  position: relative; /* desktop: allow mobile media query to override */
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width) !important;
  height: auto; /* stretch in flex container */
  transition: width 300ms ease, flex-basis 300ms ease;
}

.map-layout-row #sidebar.sidebar.collapsed{
  flex: 0 0 44px;
  width: 44px !important;
}

/* Keep sidebar internal layout intact */
.map-layout-row #sidebar .sidebar-content{
  position: absolute;
  top: 0; bottom: 0;
}

/* Map fills the remaining space */
.map-layout-row #map,
.map-layout-row #map3d{
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important; /* override inline width:100% */
}

/* Resizer in side-by-side mode */
.map-layout-row #sidebar .sidebar-resizer{
  position: absolute;
}

/* Disable transitions during active resize to keep it smooth */
.map-layout-row #sidebar.resizing{
  transition: none !important;
}

/* Mobile/small screens: make sidebar overlay to keep the map full width */
@media (max-width: 768px) {
  .map-layout-row #sidebar.sidebar{
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 2000;
    width: min(90vw, var(--sidebar-width)) !important;
  }
  .map-layout-row .sidebar-left { left: 0 !important; }
  .map-layout-row .sidebar-right { right: 0 !important; }
  .map-layout-row #map, .map-layout-row #map3d{
    width: 100% !important;
  }
  .prev-extent-control {
  
    left: 7em;
  }
  .next-extent-control {
  
    left: 9.5em;
  }

}
.sidebar-pane {

  height: 100%;
}
.sidebar-pane .sidebar-pane-body{
  height: Calc( 100% - 20px );
  overflow-y: auto;
} 

/* removed empty rule: .sidebar-left.collapsed ~ .ol-search.nominatim */
.sidebar.collapsed {
   width: 44px; 
}
.sidebar{
  top:0;
  bottom: 0;
}
.sidebar-resizer{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  background: transparent;
  z-index: 3;
  cursor: col-resize;
  /* expand hit area */
  touch-action: none;
}
/* default for left sidebar */
.sidebar-left .sidebar-resizer{
  right: -3px;
}
/* for right sidebar in RTL */
.sidebar-right .sidebar-resizer{
  left: -3px;
}

/* optional visual indicator when dragging */
.sidebar-resizer:hover{
  background: rgba(78, 133, 180, 0.15);
}
.sidebar-resizer.active{
  background: rgba(51,122,183,0.15);

}


.sidebar.resizing{
  transition: none !important; /* override ol3-sidebar.css width transition during drag */
}
.sidebar-right {
  /* border: 2px solid white; */
  border: 0px solid white;
      border-left-width: 1px;
    border-right-width: 1px;
  border-radius: 2px;

  /* box-sizing: content-box; */
}
.sidebar-left {
  border: 2px solid white;
  border-radius: 2px;

  /* box-sizing: content-box; */
}


.prev-extent-control{
  /* transition: left 500ms; */
}

.next-extent-control{
  /* transition: left 500ms; */
}
.ol-control.ol-legend {
  /* transition: left 500ms; */
}

@media (max-width: 768px) {
  .ol-zoom,.ol-scale-line{
    margin-left:3.5em!important;
  }
  .prev-extent-control {
    left:7em!important;
  }
  .next-extent-control
  {
    left: 9.5em!important;
  }
  .ol-control.ol-legend {
    left:5.5em;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .sidebar {
    width: var(--sidebar-width); } 
    /* .ol-zoom,.ol-scale-line{
      margin-left:var(--sidebar-width)!important;
    } */
    .sidebar-left.collapsed ~ .map .ol-zoom 
      ,.sidebar-left.collapsed ~ .map .ol-scale-line {
      margin-left:52px!important;
      transition: none !important;
    }
  /* .prev-extent-control {
    left:var(--sidebar-width);
  }
  
  .next-extent-control
  {
    left:calc(var(--sidebar-width) +30px);
  }
  .ol-control.ol-legend {
    left:calc(var(--sidebar-width)-40px);
  } */
 
 }
@media (min-width: 992px) and (max-width: 1199px) {
  .sidebar {
    width: var(--sidebar-width); } 
  /* .prev-extent-control{
    left:var(--sidebar-width);
  }
  .ol-zoom,.ol-scale-line{
    margin-left:var(--sidebar-width)!important;
  } */
  .sidebar-left.collapsed ~ .map .ol-zoom 
    ,.sidebar-left.collapsed ~ .map .ol-scale-line {
    margin-left:52px!important;
    transition: none !important;
  }
/*   
  .next-extent-control
  {
    left:calc(var(--sidebar-width) +30px);
  }
  .ol-control.ol-legend {
    left:calc(var(--sidebar-width)-40px);
  } */
  
 }

@media (min-width: 1200px) {
  .sidebar {
    width: var(--sidebar-width); } 
    /* .ol-zoom,.ol-scale-line{
      margin-left:var(--sidebar-width)!important;
    } */
    .sidebar-left.collapsed ~ .map .ol-zoom 
      ,.sidebar-left.collapsed ~ .map .ol-scale-line {
      margin-left:52px!important;
      transition: none !important;
    }
  /* .prev-extent-control{
    left:calc(var(--sidebar-width) + 10px);
  }
  
  .next-extent-control
  {
    left:calc(var(--sidebar-width) + 40px);
  }
  .ol-control.ol-legend {
    left:calc(var(--sidebar-width)- 30px);
  } */
 
}

/* Mirrored offsets for right-aligned sidebar (RTL layouts) */
@media (min-width: 1200px) {
  .sidebar-right { width: var(--sidebar-width); }
}
/* 
.sidebar-left.collapsed ~ .map .prev-extent-control {
  left: 95px;
}
.sidebar-left.collapsed ~ .map .next-extent-control {
  left: 125px;
}
.sidebar-left.collapsed ~ .map .ol-control.ol-legend {
  left: 55px;
} */


.ol-viewport .ol-coordinates-bar{
  bottom:0;
}

@media (min-width: 768px) and (max-width: 991px) {
  .sidebar-pane {
    min-width: unset; 
  } 
 }
@media (min-width: 992px) and (max-width: 1199px) {
  .sidebar-pane {
    min-width: unset; 
  } 
 }
@media (min-width: 1200px) {
  .sidebar-pane {
    min-width: unset; 
  } 
 }


.map-layout-row #sidebar .sidebar-resizer:hover{
  border-right: dashed rgb(209, 208, 208) 3px;
  margin-left: 0px;
  margin-right: 3px;
}
.map-layout-row #sidebar .sidebar-resizer:active{
  border-right: dashed rgb(121, 119, 119) 3px;
  margin-left: 0px;
  margin-right: 3px;
}