@import "main.css";
body>main{padding-top:60px !important;padding-bottom:0 !important;}
#map{position:relative;width:100% !important;height:calc(100dvh - 120px); z-index:1;}
#mapGallery, #geocoder,#geocoderResult,#legenda{ position: absolute;}

#mapGallery{
  top: 65px;
  left: 10px;
  width: calc(100dvw - 20px);
  height: auto;
  max-height: 85dvh;
  overflow-y: hidden;
  background-color: #fff;
  z-index: 2000;

  #galleryHeader, #galleryFooter{padding:5px 10px;}
  h3{font-size: 1rem;}
  
}
#totalItems{
  position:relative;
  width:100%;
  height:auto;
  max-height: 80dvw;
  overflow-y: auto;
  overflow-x: hidden;
  padding:20px 10px;
  z-index: 2000;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; 
  
  .card{
    width:100%;
    text-align: center;

    .img{
      width:100%;
      height:200px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .text{
      padding:10px;
      height:100px;
    }
    .card-footer{
      background-color: rgb(198,156,85);
      padding:0;

      a{width:100%;}
    }
  }
}

#geocoder{
  top:10px;
  left:50%;
  width:70dvw;
  transform: translateX(-50%);
  z-index: 2000;

  #geocoderForm{
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    #geoInput{width:300px;}
  }
}

#geocoderResult{
  right:0;
  width:275px;
  z-index: 1100;

  button{
    text-align:start;
    padding:5px 10px;
  }
}

#legenda{
  bottom: 20px;
  right: 10px;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
  padding: .25rem !important;
  z-index: 999;

  #scaleDiv > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .colorLegend{width:20px;height:20px;}
    .textLegend{width:60px;text-align: start; padding:0 10px;}
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #totalItems{grid-template-columns: repeat(2, 1fr);}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  #geocoder{width:45dvw;}
  #mapGallery{top:60px; width:60dvw; max-height: 75dvh;}
  #totalItems{grid-template-columns: repeat(2, 1fr);max-height: 72dvh;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #totalItems{grid-template-columns: repeat(3, 1fr);}
  #geocoder{width:40dvw;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #totalItems{grid-template-columns: repeat(4, 1fr);}
  #geocoder{width:30dvw;}
}

/* layer toggle di leaflet */ 
.leaflet-top { z-index: 2001;}