/* Remove defaults from button */
#filter button {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: inherit; 
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
  appearance: none;
  outline: none; 
}

#filter {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: 24px;
  border-bottom: 1px solid var(--grey-border-color);
}
@media(max-width: 768px) {
  #filter {
    gap: 15px;
    padding-bottom: 15px;
  }
}

#filter .filterHeader {
  display: flex;
  flex-flow: row;
  gap: 20px;
  align-items: center;
  height: 35px;
  border-top: 1px solid var(--grey-border-color);
  border-bottom: 1px solid var(--grey-border-color);
  white-space: nowrap;
}
@media(max-width: 460px) {
  #filter .filterHeader {
    gap: 10px;
  }
}
#filter .filterHeader:empty {
  height: 0px;
  border-top: none;
}
#filter .filterHeader > * {
  font-size: 18px;
  line-height: 26px;
}
#filter .filterHeader button {
  font-family: var(--accent-font-sansserif);
  text-transform: uppercase;
}
#filter .filterHeader button.active {
  color: var(--accent-color);
}
@media(hover: hover) {
  #filter .filterHeader button:hover {
    color: var(--accent-color);
  }
}
#filter .filterHeader .search {
  flex: auto;
  position: relative;
}
@media(min-width: 420px) {
  #filter .filterHeader .search {
    padding-left: 30px;
  }
  #filter .filterHeader .search::before {
    font-family: 'Material Symbols Sharp';
    content: "search";
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 24px;
  }
}
#filter .filterHeader .search.active::before {
  color: var(--accent-color);
}
#filter .filterHeader .search input {
  width: 100%;
  outline: none;
  border: none;
  padding: 0px;
  font-family: var(--paragraph-font-sansserif);
  font-size: 16px;
  line-height: 24px;
}
#filter .filterHeader .resultCount {
  font-family: var(--paragraph-font-sansserif);
}
#filter .filterHeader .resultCount .total::before {
  content: "von ";
}
@media(max-width: 768px) {
  #filter .filterHeader .resultCount .total {
    display: none;
  }
}
#filter .filterHeader .resetFilter[disabled] {
  color: grey;
  cursor: not-allowed;
}
#filter .filterHeader .resetFilter .icon {
  display: none;
}
@media(max-width: 768px) {
  #filter .filterHeader .resetFilter[disabled] {
    display: none;
  }
  #filter .filterHeader .resetFilter .text {
    display: none;
  }
  #filter .filterHeader .resetFilter .icon {
    display: block;
  }
}
/* remove the buttons or any decorative elements generated by safari */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none; 
}

#filter .selections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#filter .selections .selectionBlock {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}
#filter .selections .selectionBlock:empty:not(.cel-data-render) {
  display: none;
}
#filter .selections .selectionBlock.level-0.cel-data-render::after {
  display: block;
  content: "";
  width: 100%;
  height: 70px;
  background-image: url(/file/resources/celRes/spinner/ajax-loader-64px.png);
  background-position: center;
  background-repeat: no-repeat;
}
#filter .selections button {
  font-family: var(--accent-font-sansserif);
  font-size: 23px;
  line-height: 30px;
  padding: 0px 12px;
  background-color: #1f1f1f;
  color: white;
}
#filter .selections button {
  transition: opacity 1s ease-out;
}
#filter .selections button.cel-data-creating {
  opacity: 0;
}
#filter .selections button.active {
  background-color: var(--accent-color);
}
@media(hover: hover) {
  #filter .selections button:hover {
    background-color: var(--accent-color);
  }
}
#filter .selections .level-1 button {
  font-size: 18px;
  line-height: 23px;
  padding: 0px 10px;
}
@media(max-width: 768px) {
  #filter .selections {
    gap: 15px;
  }
  #filter .selections .selectionBlock {
    gap: 8px;
  }
  #filter .selections button {
    font-size: 18px;
    line-height: 23px;
    padding: 0px 10px;
  }
  #filter .selections .level-1 button {
    font-size: 14px;
    line-height: 20px;
    padding: 0px 8px;
  }
}

#filter .filterAdvanced {
  display: flex;
  flex-flow: row wrap;
  gap: 18px 50px;
  justify-content: start;
}
#filter .filterAdvanced .filterDropdown {
  flex: 0 0 250px;
  display: flex;
}
#filter .filterAdvanced .filterDropdown.city {
  display: none; /* TODO PROZHP-195 */
}
@media(max-width: 768px) {
  #filter .filterAdvanced {
    gap: 5px;
  }
  #filter .filterAdvanced .filterDropdown {
    display: block;
    flex: 1 1 100%;
  }
  #filter .filterAdvanced .filterDropdown.date {
    display: flex;
    flex-flow: row nowrap;
    gap: 30px;
  }
  #filter .filterAdvanced .filterDropdown.date * {
    line-height: 23px;
  }  
}

#filter .changeStyleIcons {
  display: flex;
  gap: 40px;
  border-top: 1px solid var(--grey-border-color);
  height: 35px;
}
#filter .changeStyleIcons .material-symbols-sharp {
  font-size: 28px;
}
#filter .changeStyleIcons .grid, #filter .changeStyleIcons .list {
  display: flex;
  flex-flow: row;
  gap: 6px;
  align-items: center;
}
#filter .changeStyleIcons .grid:hover, 
#filter .changeStyleIcons .list:hover {
  color: var(--accent-color);
  cursor: pointer;
}
#filter .changeStyleIcons .grid.active, 
#filter .changeStyleIcons .list.active {
  color: var(--accent-color);
}
#filter.magazin .changeStyleIcons {
  bottom: 29px;
}
@media(max-width: 768px) {
  #filter .changeStyleIcons {
    display: none;
  }
  #filter .selections.blogs,
  #filter .filterAdvanced {
    margin-right: 0;
  }
}

#filter .selections button[data-value="anderes"] {
  order: 1; /* always last */
}
/* Hidden selection filter */
#filter.veranstaltungen .selections button[data-value="geschichte"],
#filter.veranstaltungen .selections button[data-value="kulturen"],
#filter.veranstaltungen .selections button[data-value="natur"],
#filter.veranstaltungen .selections button[data-value="technik"],
#filter.ausstellungen .selections button[data-value="brauchtum"],
#filter.ausstellungen .selections button[data-value="film"],
#filter.ausstellungen .selections button[data-value="musik"],
#filter.ausstellungen .selections button[data-value="musiktheater"],
#filter.ausstellungen .selections button[data-value="nightlife"],
#filter.ausstellungen .selections button[data-value="sport"],
#filter.ausstellungen .selections button[data-value="tanz"],
#filter.ausstellungen .selections button[data-value="theater"],
#filter.ausstellungen .selections button[data-value="zirkus"] {
  display: none;
}

/* flatpickr customizations */
#filter .selection.flatpickr-input {
  width: 100%;
  align-content: center;
  justify-content: space-between;
  font-weight: bold;
}
.flatpickr-calendar {
  font-family: var(--paragraph-font-sansserif);
  border-radius: 0;
  border: solid 1px black;
  border-color: var(--grey-border-color);
  box-shadow: none;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none;
}
.flatpickr-calendar .dayContainer {
  padding-bottom: 5px;
}
.flatpickr-calendar .flatpickr-day {
  max-width: 33px;
  max-height: 33px;
  margin: 3px;
  display: flex;
  justify-content: center; /* centers content horizontally */
  align-items: center;     /* centers content vertically */
}
.flatpickr-calendar .flatpickr-day.selected {
  background-color: black;
  border: none;
}

/* Select2 customizations */
/* force font in selections and dropdowns */
body .select2FilterDropdown *,
#filter .select2FilterSelection * {
  font-family: var(--paragraph-font-sansserif) !important;
  font-size: 16px !important;
  line-height: 23px !important;
  color: black;
  max-height: 350px !important;
}
/* customise selection display */
#filter .select2FilterSelection,
#filter .flatpickr-input {
  border: 1px solid var(--grey-border-color);
  outline: none;
  display: flex;
  gap: 5px;
  border-radius: 0px;
  padding: 7px 10px;
  height: revert;
}
@media(max-width: 768px) {
  #filter .select2FilterSelection,
  #filter .flatpickr-input {
    padding: 0px 5px;
  }
}
/* use accent color for selected items */
#filter .filterDropdown.active .select2-selection__rendered,
#filter .filterDropdown.active .flatpickr-input {
  color: var(--accent-color);
}
/* change border when a selection has been made*/
#filter .filterDropdown.active .select2FilterSelection,
#filter .filterDropdown.active .flatpickr-input {
  border: 2px solid var(--accent-color);
}
#filter .select2FilterSelection .select2-selection__rendered {
  padding: 0;
  font-weight: bold;
  flex: 1 auto;
}
/* hide select arrow */
#filter .select2FilterSelection .select2-selection__arrow {
  display: none;
}
/* add custom arrow */
#filter .select2FilterSelection::after,
#filter .flatpickr-input::after {
  content: "arrow_forward_ios";
  font-family: 'Material Symbols Sharp';
  font-size: 20px;
  transition: transform;
  transform: rotate(90deg);
  order: 2;
  color: black;
  align-content: center;
}
/* position clear icon*/
#filter .select2FilterSelection .select2-selection__clear {
  order: 1;
  flex: 0 0 30px;
  justify-content: center;
  display: flex;
}
#filter .select2FilterSelection .select2-selection__clear * {
  font-size: 24px !important;
}
/*add a padding left of the clearing cross to separate it from long text*/
#filter .select2FilterSelection .select2-selection__clear span {
  padding-left: 15px;
}
/* readd disabled border-top around dropdown */
body .select2-container .select2FilterDropdown {
  border: 1px solid var(--grey-border-color);
  padding: 15px;
}
body .select2-container .select2FilterDropdown .select2-search__field {
  outline: none;
}
@media(max-width: 768px) {
  body .select2-container .select2FilterDropdown .select2-search__field {
    display: none;
  }
}
body .select2-container .select2FilterDropdown .select2-results__option {
  padding: 4px;
}
/* change highlighting on hover */
body .select2-container .select2FilterDropdown .select2-results__option--highlighted[aria-selected] {
  background-color: white !important;
  color: var(--accent-color) !important;
}