#good-practices{
  background: #EFE5DA;
  height: auto;
}

.title {
  color: white;
  font-weight: bold;
}

#map {
  position: relative;
  margin-bottom: 0 !important;
  display:flex;
  flex-direction: column;
}



#map-container .leaflet-tile {
  filter: grayscale(90%);
}

@media screen and (max-width: 425px) {
  #map-container {
    height: 450px;
  }
}

.map-filters-wrapper {
  position: relative;
  top: 0;
  left: 0;
  z-index: 999;
  /* background-color: #e0eafb; */
  border-radius: 0 0 20px 0;
  color: var(--section-title);
  transition: all 0.2s ease-in;
  padding: 0rem 1rem;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .map-filters-wrapper {
    width: 100%;
    /* top: -68px; */
    border-radius: unset;
  }
  /* .dropdown-menu{
    right:1rem;
  } */

  #map {
    margin-top: 68px;
  }
}

.filters{
  display:flex;
  align-items: center;
  justify-content: center;
}
.map-filters{
  display:flex;
  flex-direction: column;
}
.map-filters-wrapper.open {
  height: 60%;
  max-height: 100%;
  transition: all 0.2s ease-in;
}

.filters-toggler {
  border: none;
  background: none;
  padding: 1rem;
  font-size: var(--text-lg);
  width: fit-content;
  position: relative;
  color: var(--section-title);
}

.filters-toggler::before {
  content: "";
  position: absolute;
  left: 15;
  bottom: 15px;
  width: 0;
  height: 3px;
  background-color: var(--section-title);
  transition: width 0.25s ease-out;
}

.filters-toggler:hover::before {
  width: 90%;
}

.map-filters {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-md);
}

.map-filters input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.filter-icon {
  width: 20px;
  height: 20px;
}

.map-filters-wrapper.open>.map-filters {
  display: block;
  animation: filters 1s forwards;
  opacity: 0;
}

@keyframes filters {
  to {
    opacity: 1;
  }
}

.custom-search-form{
  border: 1px solid #FFFFFF;
  background: #F4EDE5;
  padding: 3rem 4rem;
  gap: 3rem;
  align-items:center;
  border-radius: 8px;
  /* margin-bottom: 2rem; */
  height: 92px;
  width:100%;
  /* margin-bottom:3rem; */
}

.desc{
  height: fit-content;
    text-align: start;
    /* justify-content: start; */
    align-items: start;
}


.btn-secondary{
  color: black;
  background: white;
  width: 233px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 8px;
  height:60px;
  border:1px solid #EFE5DA;
  
}

#categoriesDropdown:hover{
  color: black;
  background: white;
}

#categoriesDropdown:focus{
  color: black;
  background: white;
}

#map-search-button, #clear-filters-button{
  background: #FAF6F2;
  color:#2A6530;
  border: 2px solid #2A6530;
  border-radius: 6px;
  /* width: 134px; */
  height:40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.5s, color 0.5s;
}
#clear-filters-button{
  width: 244px;
}
#map-search-button{
  width:210px;
}

#map-search-button:hover, #clear-filters-button:hover{
  background: #2A6530;
  color:#FAF6F2;
}

/* Example CSS for the search icon */
.search-container {
  position: relative;
  text-align:center;
  color:#CECECE;
  width:233px;
  height:60px;
 
}

#map-search-text{
  width:100%;
  height:60px;
  border-radius: 8px;
  border:1px solid #EFE5DA;
}

.search-icon {
  position: absolute;
  color:#CECECE;
  left: 25px;
    top: 50%;
  transform: translateY(-50%);
}

.map-points-list{
  list-style-type: none;
  padding-left:0;
}

.map-points-list li{
  margin-bottom: 1.5rem;
  border:1px solid #C2B19E;
  border-radius: 13px;
  padding:1rem 1rem;
  background: white;
  width:90%!important;
}

.arrow{
  display:flex;
  align-items: center;
}
.leaflet-container .leaflet-marker-pane img{
  width: 22px!important;
  height: 28px!important;
}

.date-time{
  gap:2rem;
}

.date-time p{
  color:#9C9C9C;
}

.map-points-list  a{
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.practices-posts{
  padding-bottom:3rem;
}
#practices-posts-container{
  display:flex;
  flex-direction: column;
  align-items:center;
}


.arrow {
  width: 50px;
  display: flex;
  justify-content: start; /* Initially align to the start */
  transition: all 250ms ease-in-out;
}

.map-points-list a:hover .arrow {
  transform: translateX(20px);
}

#selected-filters span{
  /* background-color: #2A6530; */
  background-color: #EFE5DA;

  border-radius: 3px;
 
  padding:10px 10px;
  color:black;
  
}

/* .custom-search-form{
  width:80%;
} */

@media (max-width: 1400px){
  .custom-search-form{
    /* width:80%; */
    flex-direction:column;
    height:auto;
  }
}


@media screen and (max-width: 768px) {
  .custom-search-form {
    padding: 2rem;
    /* Reduce padding */
    height: auto;
    /* Allow height to adjust based on content */
  }


}

@media screen and (max-width: 425px) {
  .custom-search-form {
    padding: 1rem;
    /* Further reduce padding */
  }
}