/* Zoekbalk container */
.search-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
    z-index: 999999 !important;
}

/* Basisstijl Choices.js */
.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  min-width: 360px;
  background-color: #ffffff;
  padding: 4px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 16px;
  min-height: 44px;
  overflow: hidden;
}
@media (max-width: 600px) {
  .choices__inner {
    width: 100%;
    min-width: auto;
  }
}
.choices__input {
  background-color: #ffffff !important;
  font-size: 16px !important;
  margin-bottom: 0 !important;
  margin-top: 1px !important;
}
.choices__item--selectable {
  border-radius: 8px !important;
  border: none !important;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  font-size: 16px;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #F6F6F6;
}
.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: #ef7d00 !important;
}
.is-open .choices__inner {
  border-radius: 8px 8px 0 0;
}

/* MULTISELECT BADGES */
.choices__list--multiple .choices__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: #ef7d00 !important;
  color: #fff;
  border-radius: 8px;
  font-size: 16px !important;
  margin: 4px;
  line-height: 1.6;
  border: none !important;           /* zwarte lijn weg */
  box-shadow: none !important;       /* geen inset-lijn */
  outline: none !important;
  background-clip: padding-box;
  overflow: visible !important;
  padding: 6px 24px 6px 10px !important; /* ruimte voor het kruisje rechts */
}

/* Verwijderknop (kruisje) binnen badge */
.choices__list--multiple .choices__item .choices__button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;                      /* kleiner kruis */
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0;                     /* standaardtekst verbergen */
}

/* Compact wit kruis (SVG) */
.choices__list--multiple .choices__item .choices__button::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<line x1="3" y1="3" x2="13" y2="13" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"/>\
<line x1="13" y1="3" x2="3" y2="13" stroke="%23ffffff" stroke-width="2" stroke-linecap="round"/>\
</svg>');
}

/* Hoverkleur (zwart kruis bij hover) */
.choices__list--multiple .choices__item .choices__button:hover::before {
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\
<line x1="3" y1="3" x2="13" y2="13" stroke="%23000000" stroke-width="2" stroke-linecap="round"/>\
<line x1="13" y1="3" x2="3" y2="13" stroke="%23000000" stroke-width="2" stroke-linecap="round"/>\
</svg>');
}

/* Overige knoppen */
.choices__button {
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  margin-left: 6px;
  font-size: 16px;
  cursor: pointer;
}
.choices__button:hover {
  color: #474747 !important;
}