﻿.leaflet-sidebar {
  position: absolute;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  z-index: 1999; 
  /*z-index: 2000; */
}
  
.pnexpand  {
/*    height: 500px;*/
}
  
.leaflet-sidebar.left {
    left: -500px;
    transition: left 0.5s, width 0.5s;
    padding-right: 0; }

.leaflet-sidebar.left.visible {      left: 0; }

.leaflet-sidebar.right {
    right: -500px;
    transition: right 0.5s, width 0.5s;
    padding-left: 0; 
 }

.leaflet-sidebar.right.visible {      right: 0; }

.leaflet-sidebar > .leaflet-control {
    height: 100%;
    width: 100%;
    /* overflow: auto; */ /* временно убрал, т.к. из за него при сворачивании остается скроллинг */
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px;
    font-size: 1.1em;
    background: white;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    /*-webkit-border-radius: 4px;
    border-radius: 4px;*/ 
}

.leaflet-touch .leaflet-sidebar > .leaflet-control {
      box-shadow: none;
      border: 2px solid rgba(0, 0, 0, 0.2);
      background-clip: padding-box; 
}
@media (max-width: 500px) {
  .leaflet-sidebar {      width: 100%;      padding: 0; }
  .leaflet-sidebar.left.visible ~ .leaflet-left {        left: 100%; }
  .leaflet-sidebar.right.visible ~ .leaflet-right {        right: 100%; }
  .leaflet-sidebar.left {        left: -100%; }
  .leaflet-sidebar.left.visible {          left: 0px; }
  .leaflet-sidebar.right {        right: -100%; }
  .leaflet-sidebar.right.visible {          right: 0px; }
  .leaflet-sidebar > .leaflet-control {        box-shadow: none;        -webkit-border-radius: 0;        border-radius: 0; }
  .leaflet-touch .leaflet-sidebar > .leaflet-control {          border: 0; } 
}

@media (min-width: 500px) and (max-width: 4096px) {
   .leaflet-sidebar {      width: 350px; }
   .leaflet-sidebar.left.visible ~ .leaflet-left {        left: 350px; }
   .leaflet-sidebar.right.visible ~ .leaflet-right {        right: 350px; } 
}

.leaflet-sidebar .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 31px;
    height: 31px;
    color: #333;
    font-size: 25pt;
    line-height: 1em;
    text-align: center;
    background: white;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    cursor: pointer;
    z-index: 8; 
}

.leaflet-left {  transition: left 0.5s; }

.leaflet-right {  transition: right 0.5s; }


  /* костыль */
  /* содержимое части панели где данные */
  .sidebar-pane-data {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 96px;
  bottom: 0px;
  /* bottom: 110px; */ /* отступ снизу под активный объект*/ 
  background-color: rgba(255, 255, 255, 0.95);
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid lightgray;
  /* padding: 5px; */
  }
  
/* костыль */
/* "спрятать" панел, путем уменьшения высоты */
  .sidebar-pane-shrinked
  {
      height: 50px !important;
      overflow: hidden !important;
  }