body{
   overflow: hidden;
   height:100vh;
   width:100vw;
   margin:0;
   padding:0;
   position:relative;
   font-family: 'Open Sans', sans-serif;
}

.map{
   height:100%;
   width:100%;

}

.polygon {
   fill: red;     /* Kolor wypełnienia */
   fill-opacity: 0.5;  /* Przezroczystość wypełnienia */
   stroke: red;        /* Kolor obramowania */
   stroke-width: 2;    /* Grubość obramowania */
}

.first-zone{
   fill: red;
   stroke:red;
}

.second-zone{
   fill:blue;
   stroke:blue;
}

.free-zone{
   fill:green;
   stroke:green;
}

h3,h4{
   text-align:center;
}
@media only screen and (max-width:960px){
   h3,h4{
      font-size:12px;
   }
}

.free-for-now{
   fill:black;
   stroke:black;
}

/* Przenieś przyciski plus i minus do prawego górnego rogu */
.leaflet-control-container .leaflet-left{
   right:0;
   left:initial;
   margin-right:10px;
}

@media only screen and (max-width:960px){
   .leaflet-left{
      display:none;
   }
}


.parking-info{
   position:fixed;
   left:10px;
   top:50%;
   transform: translateY(-50%);

   background:white;
   border:1px solid black;
   z-index:999;
   padding:1rem;
   max-width:15rem;
   text-align:center;
   border-radius:2rem;
}

@media only screen and (max-width:960px){
   .parking-info{
      max-width:10rem;
   }
}

@media only screen and (max-width:960px){
   .parking-info{
      top:0;
      width:100%;
      left:50%;
      transform: translateX(-50%);
      max-width:initial;
      border-radius:0;
      padding:.3rem;
   }
}


.parking-info ul li {
   padding-top:.8rem;
   font-size:14px;
  
}

@media only screen and (max-width:960px){
   .parking-info ul li{
      font-size:12px;
      padding-top:.3rem;
   }
}

.parking-info ul {
   list-style:none;
   padding:0;
}

@media only screen and (max-width:960px){
   .parking-info ul {
      margin:.2rem;
   }
   h4,h3{
      margin:.2rem;
   }
}


.legend{
   position:fixed;
   bottom:0;
   right:0;
   display:flex;
   flex-direction: column;
   padding:1rem;
   padding-bottom:0.5rem;
   z-index:99999;
   background:white;
   border-top:1px solid black;
   border-left:1px solid black;
   border-top-left-radius: 2rem;

}

@media only screen and (max-width:960px){
   .legend{
      width:100%;
      border-top-left-radius: 0;
      border-left: none;
   }
   
}

.legend__element{
   display:flex;
   align-items: center;
   margin-bottom:0.5rem;
}

@media only screen and (max-width:960px){
   .legend__title{
      font-size:12px;
   }
}

@media only screen and (max-width:960px){
   .legend__element{
      margin-left:1rem;
   }
}


.legend__color{
   height:1rem;
   width:1rem;
   margin-left:1rem;
   background:red;
   border:1px solid red;
   opacity:0.5;
   flex-shrink:0;
   margin-right:.5rem;
}

.legend__color--red{
   background:red;
   border:1px solid red;
}

.legend__color--blue{
   background: blue;
   border: 1px solid blue;
}

.legend__color--green{
   background:green;
   border:1px solid green;
}

.legend__color--black{
   background:black;
   border:1px solid black;
}

.legend__title{
   margin:0;
}



.sp-logo{
   position: absolute;
   left:1rem;
   bottom:1rem;
   height:3rem;
   width:3rem;
   z-index:999;
}

img{
   height:100%;
   width:100%;
}