.filter-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.filter-section {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #dddddd;
}

#filters {
  display: none;
}

#filters.active {
  display: block;
}

/* Filter Icon */
.filter-icon {
  color: #688181;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.filter-icon:hover {
  color: #383838;
}

.fas.fa-filter {
  font-size: 20px;
}

/* Close Icon */
.close-filters-icon {
  background: none;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 10px;
  transition: color 0.3s ease;
}

.close-filters-icon:hover {
  color: #333;
}

/* Reset Icon */
.reset-filters-icon {
  color: #888;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.reset-filters-icon:hover {
  color: #333;
}

#reset-filters-icon {
  position: absolute;
  top: 10px;
  right: 40px;
  font-size: 20px;
  cursor: pointer;
}


/* Style for dropdown menu to ensure it stays in place */
.filter-dropdown {
    position: relative; /* Ensure relative positioning */
}

.dropdown-menu {
    position: absolute;
    top: 100%; /* Position dropdown just below the button */
    left: 0;
    z-index: 1000; /* Ensure dropdown is above other content */
    display: none; /* Initially hidden */
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.filter-popup {
    position: absolute;
    background: #fff;
    /*border: 1px solid #ccc; --- Original value*/
    border: 1px solid #4A4A49;
    padding: 10px;
    z-index: 1000;
    display: none;
    width: auto; /* Adjust width as needed */
}

.close-filter {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    float: right;
}

.filter-icon {
    cursor: pointer;
}

.filter-popup .form-item {
    margin-bottom: 10px;
}

.fa-sort, .fa-sort-asc, .fa-sort-desc{
float: inline-end;
}