#map {
  flex: auto;
  height: 100% !important;
  width: 100% !important;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.mapContainer {
  min-height: 100% !important;
  position: relative;
  flex: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}


.mapa {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

.filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border: solid 1px #999;
  border-radius: 100px;
  padding: 8px 10px;

}

.filterContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}


.filterContainerIcons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 25px;
  margin-top: 0px;
}



select {
  border: none !important;
}

input {
  border: none !important;
  box-shadow: unset !important;

  &:focus-visible {
    border: none !important;
    outline: none !important;
  }
}

.grid-view.active {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 4;

}

.switch-view {
  cursor: pointer;
  padding: 1em;
  position: absolute;
  bottom: 10%;
  z-index: 5;
  background: #000;
  color: #fff;
  border-radius: 10em;

}

.filterButton {
  position: relative;
  padding: 5px;
  aspect-ratio: 1/1;
  border-radius: 100%;
  background: #ff385c;
  cursor: pointer;
  transition: 0.3s opacity ease-in-out;

  &:hover {
    opacity: 0.8;

  }
}

.searchIcon {
  width: 20px;
  color: #fff;


}

.filterIcon {
  min-height: 100%;
  align-self: stretch;
  height: auto;


  padding: .3em 0.6em;

  user-select: none;
  border-radius: 8px;

  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  cursor: pointer;
  transition: 0.3s opacity ease-in-out, 0.2s color ease-in-out, 0.2s background ease-in-out;
  opacity: 0.8;

  &:hover {
    opacity: 1;
  }

  &.active {
    background: #000;
    color: #fff;

    & svg {
      color: #fff !important
    }
  }

}

.filterIcon p {
  text-align: center;
  margin: 0px !important;
  padding: 0px !important;
  font-size: 12px !important;
}

.filterIcon svg {
  height: 40px;
  width: auto;
  aspect-ratio: 1/1;
  color: black;
}

.gm-style-iw,
.gm-style-iw-d {
  padding: 0 !important;
  overflow: clip !important;

  & .gm-ui-hover-effect {
    display: none !important;
  }

}
  #infow {
      overflow: hidden !important;;
      position: relative;
      max-width: 330px;
  }
  
  #infow .closeb {

      position: absolute;
      top: 1em;
      right: 1em;
      padding: 0.5em;
      background: #fff;
      border-radius: 100%;
      aspect-ratio: 1/1;
      
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px;
      cursor: pointer;
  }
      #infow svg {
        width: 18px;
        height: 18px;
      
    }

    #infow img {
      width: 100%;
      height: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: center;


    }

    a:focus {
      outline: unset !important;
    }

    #infow .sec {
      padding-left: 1em;
      padding-right: 1em;
      padding-bottom: 1em;
      width: 100%;
  box-sizing:border-box;
    }
      #infow .tagcon {
        display: flex;
        flex-flow: row wrap;
        gap: .3em;
        padding-bottom: 1em;
      }

      #infow .tagg {
        background: #c84a6094;
        color: #fff;
        padding: .5em;
        border-radius: 5px;
      }

      #infow .bored {
        color: #656565;
        font-size: 12px
      }

      #infow .cont {
        appearance: none;
        border-radius: 8px;
        border: 0px;
        padding-bottom: 0.6em !important;
        cursor: pointer;
      }
  
.imgCont {
  position: relative;
  width:100%;
  max-width: 100%;
  overflow: hidden;
  max-height: 250px !important;
}

.buttonCont {
  position: absolute;
  gap: 5px;
  display: flex;
  bottom: 10px;
  right: 10px;
}

.butt {
  background-color: #191919;
  padding: 5px 10px;
  border: unset !important;
  cursor: pointer;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 13px;
}


.butt svg {
  fill:white!important;
  width: 20px;
  height: 20px;
}


.filterIcon.active svg{
  color:#fff!important;
  fill:#fff;
}

.filterIcon:nth-child(1).active,  .filterIcon:nth-child(9).active {
  background-color:#7C3694!important;
}
.filterIcon:nth-child(1) svg,  .filterIcon:nth-child(9) svg {
  color:#7C3694!important;
}
.filterIcon:nth-child(1).active svg,  .filterIcon:nth-child(9).active svg {
  color:#fff!important;
}


.filterIcon:nth-child(2) svg,  .filterIcon:nth-child(10) svg {
  color:#943A96!important;
}
.filterIcon:nth-child(2).active svg,  .filterIcon:nth-child(10).active svg {
  color:#fff!important;
}

.filterIcon:nth-child(2).active,  .filterIcon:nth-child(10).active {
  background-color:#943A96!important;
}

.filterIcon:nth-child(3) svg,  .filterIcon:nth-child(11) svg {
  color:#E03794
}

.filterIcon:nth-child(3).active svg,  .filterIcon:nth-child(11).active svg {
  color:#fff!important
}

.filterIcon:nth-child(3).active,  .filterIcon:nth-child(11).active {
  background-color:#E03794!important;
}

.filterIcon:nth-child(4) svg,  .filterIcon:nth-child(12) svg {
  color:#F9A930
}

.filterIcon:nth-child(4).active svg,  .filterIcon:nth-child(12).active svg {
  color:#fff!important;
}

.filterIcon:nth-child(4).active,  .filterIcon:nth-child(12).active {
  background-color:#F9A930!important;
}

.filterIcon:nth-child(5) svg,  .filterIcon:nth-child(13) svg {
  color:#FCDE2D
}

.filterIcon:nth-child(5).active svg,  .filterIcon:nth-child(13).active svg {
  color:#fff!important;
}

.filterIcon:nth-child(5).active,  .filterIcon:nth-child(13).active {
  background-color:#FCDE2D!important;
  color:#000!important;
}

.filterIcon:nth-child(5).active svg,  .filterIcon:nth-child(13).active svg {
  color:#000!important;
}



.filterIcon:nth-child(6) svg,  .filterIcon:nth-child(14) svg {
  color:#C1D843
}


.filterIcon:nth-child(6).active svg,  .filterIcon:nth-child(14).active svg {
  color:#fff!important;
}

.filterIcon:nth-child(6).active,  .filterIcon:nth-child(14).active {
  background-color:#C1D843!important;
}

.filterIcon:nth-child(7) svg,  .filterIcon:nth-child(15) svg {
  color:#16A8E0
}

.filterIcon:nth-child(7).active svg,  .filterIcon:nth-child(15).active svg {
  color:#fff!important;
}



.filterIcon:nth-child(7).active,  .filterIcon:nth-child(15).active {
  background-color:#16A8E0!important;
}

.filterIcon:nth-child(8) svg,  .filterIcon:nth-child(16) svg {
  color:#005CAB
}

.filterIcon:nth-child(8).active svg,  .filterIcon:nth-child(16).active svg {
  color:#fff!important
}
.filterIcon:nth-child(8).active,  .filterIcon:nth-child(16).active {
  background-color:#005CAB!important;
}


.filterIcon.active {
  color:#fff!important;
}
.gm-style-iw-ch {
  padding-top:0px!important;
}
.gm-style-iw-chr {
  display: none !important;
}

.mapExplanation {
  padding:25px 5% 10px 5%;
  margin:0 auto;
  display: flex;
  flex-flow:column;
  gap:25px;
}

.mapExplanation p {
  text-align: center;
  width: 60%;
  margin:0 auto;
  margin-bottom: 25px;;
}

.mapExplanation h3 {
  margin:0!important;
  text-align: center
}

.scrollToFilter {
display: none!important;
}

@media (max-width:1200px) {
.mapExplanation p {
  text-align: center;
  width: 90%;
  margin:0 auto;
  margin-bottom: 25px;
}
}

@media (max-width:1400px) {
  .filterContainerIcons {
      overflow-x: scroll;
  }
}

@media (max-width:1500px) {
.filterContainerIcons {
  justify-content: flex-start!important;
}
  .scrollToFilter {
    display: block!important;
  
}
}


.icons-list {
display: flex;
flex-direction: row!important;

}

.scroll-left, .scroll-right {
display: none !important;
  outline: none;
  box-shadow: none;
  appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 1000px;
  padding: 20px;
  height: 25px;
  width: 25px;
  background: #005CAB;
  margin: auto auto;
  text-align: center;
  display: none;
  justify-content: center;
  color: #fff;
  align-items: center;
  transition:0.3s all ease-in-out;
  border:solid 2px #005CAB;;

}


.scroll-left:focus, .scroll-right:focus {
border:solid 2px #005CAB;
background:white;
color:#005CAB;
}

@media (max-width:1550px) {

.scroll-left, .scroll-right {
display: flex !important;
}
}

.filterContainerIcons {
overflow-y: hidden;
}