.search-container {
  position: relative;
  width: 300px;
}

#search {
  height: 36px;
  padding: 0 30px 0 28px;
  background-color: rgba(255, 255, 255, 0.1);
  /* font-size: 14px; */
}

#search::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-icon {
  left: 5px;
  bottom: 0px;
  pointer-events: none;
}
.search-icon > .ricon::after {
 height: 18px !important;
 width: 18px !important;
}

.clear-button {

  right: 10px;
  bottom: 0px; /* Ensure full height */
  width: 30px; /* Fixed width for the button */
  display: none;
}


#search:valid ~ .clear-button {
  display: flex;
}