/* From Uiverse.io by alexruix */

.input-group-chat {
  position: relative;
  width: 100% !important;
  border-radius: 16px !important;
}

.input-search-chat {
  border: solid 1px var(--bs-border-color);
  background: none;
  padding: 0.75rem;
  width: 100% !important;
  border-radius: 16px !important;
  color: var(--bs-body-color);
  transition: border 150ms cubic-bezier(0.4,0,0.2,1);
}

.search-chat-label {
  position: absolute;
  left: 15px;
  color: var(--bs-body-color);
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

.input-search-chat:focus {
  outline: none;
  border: 1.5px solid var(--bs-primary);
}

.input-search-chat:focus ~ label, input:valid ~ label {
  transform: translateY(-50%) scale(0.8);
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
  padding: 0 .2em;
  color: var(--bs-primary);
}