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

/* Side-by-side layout for search page */
.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 !important; override absolute from ol3-sidebar.css */
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width) !important;
  height: auto; /* stretch by 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 content/tabs behavior inside the sidebar box */
.map-layout-row #sidebar .sidebar-content{
  position: absolute; /* keep internal layout as before */
  top: 0; bottom: 0;
}

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

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

/* Disable transitions while actively resizing */
.map-layout-row #sidebar.resizing{
  transition: none !important;
}

/* Ensure OpenLayers controls offset still respects sidebar width */
@media (min-width: 768px) {
  .map-layout-row .sidebar-left ~ .sidebar-map .ol-zoom,
  .map-layout-row .sidebar-left ~ .sidebar-map .ol-scale-line{
    /* margin-left: var(--sidebar-width) !important; */
    margin-left: 0.5em !important;
    /* transition: margin-left 300ms; */
    transition: none !important;
  }
  .map-layout-row .sidebar-left.collapsed ~ .sidebar-map .ol-zoom,
  .map-layout-row .sidebar-left.collapsed ~ .sidebar-map .ol-scale-line{
    /* margin-left: 52px !important; */
    margin-left: 0.5em !important;
  }
}

/* RTL/right sidebar offsets using dynamic width */
@media (min-width: 768px) {
  .map-layout-row .sidebar-right ~ .sidebar-map .ol-rotate,
  .map-layout-row .sidebar-right ~ .sidebar-map .ol-attribution,
  .map-layout-row .sidebar-right ~ .sidebar-map .ol-full-screen{
    /* margin-right: var(--sidebar-width) !important; */
    margin-right: 0.5em !important;
    /* transition: margin-right 300ms; */
    transition: none !important;
  }
  .map-layout-row .sidebar-right.collapsed ~ .sidebar-map .ol-rotate,
  .map-layout-row .sidebar-right.collapsed ~ .sidebar-map .ol-attribution,
  .map-layout-row .sidebar-right.collapsed ~ .sidebar-map .ol-full-screen{
    /* margin-right: 52px !important; */
    margin-right: 0.5em !important;
  }
}

#tabSearch_filter_panel .slider-handle{
  background-image:linear-gradient(to bottom, #b8c3c9, #486573)!important;
  border-radius: 5px;
 }
 #tabSearch_filter_panel .visible-range-slider .slider-selection {
  background: #ccc;
}
@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; 
  } 
 }