#searchBox {
 width: 100%;
 padding: 1rem 1rem;
 font-size: 1rem;
 color: #374151;
 background: white;
 border: 2px solid #785ba3;
 border-radius: 13.5rem;
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 transition: all 0.2s ease;
 cursor: pointer;
 -webkit-appearance: none;
 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
 background-repeat: no-repeat;
 background-position: right 1rem center;
 background-size: 1em;
 margin: 10px 0px 10px 0px;
 font-weight: bold;
}

#searchBox:hover {
 border-color: #4f46e5;
}

#searchBox:focus {
 outline: none;
 border-color: #4f46e5;
 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

#searchBox optgroup {
 font-weight: 500;
 color: #374151;
}

#searchBox option {
 padding: 0.5rem;
}




  #searchBox option, #searchBox optgroup {
    background-color: #fff; }
  #searchBox optgroup:nth-child(even), #searchBox optgroup:nth-child(even) option {
    background-color: #ffedf9; }

#searchBox_new {
  margin: 15px auto;
  font-size: 20px;
  padding: 10px 10px;
  background: linear-gradient(to right, #bf40ff 0%, #34ccfe 100%);
  width: 80%;
  display: block;
  color: #fff; }
  #searchBox_new option, #searchBox_new optgroup {
    background-color: #ea5506; }

.searchArea {
  color: #ffffff;
  text-align: center;
  background: #FF56DD;
  background-image: linear-gradient(90deg, #FF9BDD 0%, #FF56DD 100%);
  background-image: -webkit-linear-gradient(90deg, #FF9BDD 0%, #FF56DD 100%);
  box-sizing: border-box;
  padding: 10px 0; }