.leaflet-popup-content-wrapper {
  background-color: #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4ppx;
}
/* Style the sidenav links and the dropdown button */
.sidenav,
.sidenav_filter {
  padding-top: 24px;
}
.sidenav a,
.sidenav_filter a,
.dropdown-btn {
  padding: 8px 0 8px 12px;
  text-decoration: none;
  font-size: 18px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  margin: 4px 0 0;
  /* border-bottom: 1px solid #aaa; */
}

.dropdown-btn {
  border: 1px solid #dedede;
  border-radius: 12px;
  padding: 20px 16px;
  background: #fff;
  transition: 1s background-color ease-in-out;
}

/* On mouse-over */
/* .sidenav a:hover, */
.dropdown-btn:hover,
button.active {
  color: #fff;
  border: 1px solid #fff;
  background: linear-gradient(90deg, #ff7f00 0%, #f1a558 100%);
  position: relative;
  overflow: hidden;
}
.dropdown-btn:hover::before,
button.active::before {
  content: "";
  position: absolute;
  right: -30px;
  top: 10%;
  bottom: 10%;
  height: 80%;
  aspect-ratio: 1;
  background: linear-gradient(141.24deg, #a6cdf5 -5.03%, #00aeeb 99.43%);
  border-radius: 50%;
  z-index: 100;
}
.dropdown-btn:hover::after,
button.active::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='228' height='19' viewBox='0 0 227 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M86.991 4.16372C39.1649 -3.30049 1.06288 4.92395 -12.0099 9.96921L-3.92793 21.23L253.679 26.9485L251.759 13.3621C243.724 -5.03889 201.514 -0.271062 181.414 4.41297C169.867 7.43998 134.817 11.6279 86.991 4.16372Z' fill='white' fill-opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  /* background-color: #dedede; */
  background-size: 100% auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Add an active class to the active dropdown button */

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  opacity: 0;
  height: 0;
  visibility: hidden;
  transition: 0.1s all ease-in-out;
  border: none;
}
.header-ac {
  color: #555;
  margin: 0;
  padding: 14px 12px;
  font-size: 18px !important;
  border: 1px solid transparent;
  cursor: pointer !important;
}
.header-ac:hover {
  background: #f7f7f7 !important;
  border-radius: 4px;
  border: 1px solid #ccc;
}
.dropdown-container-filter {
  list-style: none;
  padding: 0 0 0 12px;
  margin: 0;
  list-style-position: inside;
  height: 0;
  overflow: hidden;
  transition: all 0.3s linear;
}
.dropdown-container-filter.open {
  margin: 0px 0 16px;
}
.dropdown-container-filter li {
  padding: 8px 0 2px 8px;
  font-size: 17px;
}
.btn-container {
  margin-top: 24px;
}
.btn-filter {
  padding: 12px 16px;
  background-color: #ff7f00;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  border: 0;
  display: block;
  color: #fff;
  outline: none;
  width: 100%;
  cursor: pointer;
}
.btn-filter:hover {
  background-color: #e77c11;
}
.dropdown-container .list_a {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 8px;
}
.dropdown-container .list_a a:hover {
  color: #ff7f00;
}
.dropdown-container .list_a .number_con {
  border-radius: 500px;
  font-weight: 700;
  color: #555;
  display: flex;
  font-size: 12px;
  height: 26px;
  width: 26px;
  min-width: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  border: 1px solid #f1f1f1;
}

.dropdown-container .list_a:hover .number_con {
  background-color: #ff7f00;
  border-color: #ff7f00;
  color: #fff;
}
.showed {
  opacity: 1;
  height: auto;
  visibility: visible;
  background-color: #fff;
  padding-left: 8px;
  margin-bottom: 24px;
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid #efefef;
  padding: 12px 16px;
  box-shadow: 0px 13px 24px -7px rgba(0, 0, 0, 0.07);
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

.searching {
  display: flex;
  flex-direction: row;
  margin-top: 24px;
  gap: 8px;
}
.searching #pencarianInput {
  flex: 4 3 auto;
  padding: 18px 24px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
}
.searching #pencarianInput:focus {
  border: 1px solid #e77c11;
  outline: none;
}

.searching #pencarianButton {
  flex: 1 3 auto;
  background-color: #ff7f00;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.9 20.3L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.146 15.371 4.888 14.113C3.62933 12.8543 3 11.3167 3 9.5C3 7.68333 3.62933 6.14567 4.888 4.887C6.146 3.629 7.68333 3 9.5 3C11.3167 3 12.8543 3.629 14.113 4.887C15.371 6.14567 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L20.325 18.925C20.5083 19.1083 20.6 19.3333 20.6 19.6C20.6 19.8667 20.5 20.1 20.3 20.3C20.1167 20.4833 19.8833 20.575 19.6 20.575C19.3167 20.575 19.0833 20.4833 18.9 20.3ZM9.5 14C10.75 14 11.8127 13.5627 12.688 12.688C13.5627 11.8127 14 10.75 14 9.5C14 8.25 13.5627 7.18733 12.688 6.312C11.8127 5.43733 10.75 5 9.5 5C8.25 5 7.18733 5.43733 6.312 6.312C5.43733 7.18733 5 8.25 5 9.5C5 10.75 5.43733 11.8127 6.312 12.688C7.18733 13.5627 8.25 14 9.5 14Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  padding: 18px 24px;
  cursor: pointer;
  border-radius: 8px;
}
.searching #pencarianButton:hover {
  background-color: #e77c11;
}
.containerList {
  padding: 0;
  margin-top: 24px;
}

.containerList ul {
  list-style: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.search_li {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  margin-top: 12px;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
}
.search_li:hover {
  background-color: #f8f8f8;
}
.search_li img {
  height: 70px;
  width: 70px;
  object-fit: cover;
  border: 1px solid #f4f4f4;
  border-radius: 8px;
  padding: 4px;
  background-color: #fff;
}
.search_li span {
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  color: #333;
}

.search_li span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
}
.search_li .content_a {
  display: flex;
  gap: 8px;
  align-items: start;
  justify-content: center;
  flex-direction: column;
}
.search_li p {
  padding: 0;
  margin: 0;
  color: #999;
}

@media screen and (max-height: 450px) {
  .sidenav,
  .sidenav_filter {
    padding-top: 15px;
  }
  .sidenav a,
  .sidenav_filter a {
    font-size: 18px;
  }
}