/* Choices container styling */
.choices {
  width: 100%;
  min-width: 100px;
  max-width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  box-sizing: border-box;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 0 !important;
}

/* Inner container of the select */
.choices__inner {
  padding: 0 !important;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
}

/* Input inside choices */
.choices__input {
  border: 1.5px solid #2c7be5  !important; /* light blue border */
  border-radius: 2px;
  
  /* Icon placement */
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23007bff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.414-1.414l4.387 4.387a1 1 0 0 1-1.414 1.414l-4.387-4.387zM8 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center; /* right side */
  background-size: 16px 16px;
  
  /* Make space so text doesn't overlap the icon */
  padding-right: 34px !important;
  padding-left: 12px !important;  

  margin-left: 0;
  flex-grow: 1;
  display: flex;
  outline: none !important;
  box-shadow: none !important;
}
  
/* Dropdown list container */
.choices__list--dropdown {
  left: 0;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  max-height: 338px; /* Do not change somehow this works for anything */
  overflow-y: auto;
  z-index: 1000;
  position: absolute;
  width: 100%;
  box-sizing: border-box;
}
    
/* change padding of the individual items in the choice menu */
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
    position: relative;
    font-size: 14px;
    padding: 4px;
}

/* Hover & selected styles */
.choices__list--dropdown .choices__item--highlighted,
.choices__list--dropdown .choices__item:hover {
  background-color: #007bff !important;
  color: white;
}
