.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);
}

.search-chat-label {
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.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;*/
  background-color: var(--bs-body-bg);
  padding: 0 .2em;
  color: var(--bs-primary);
}

.form-control:focus {
  border: 1.5px solid var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25) !important;
}

@media (min-width: 769px) {
  .input-group-container-2 {
    display: grid !important;
    grid-template: 1fr / 1fr 1fr;
    gap: 1rem;
  }
}

@media (min-width: 769px) {
  .input-group-container-3 {
    display: grid !important;
    grid-template: 1fr / 1fr 1fr 1fr;
    gap: 1rem;
  }
}

@media (min-width: 769px) {
  .input-group-container-4 {
    display: grid !important;
    grid-template: 1fr / 1fr 1fr 1fr 1fr;
    gap: 1rem;
  }
}

@media (min-width: 769px) {
  .input-group-container-5 {
    display: grid !important;
    grid-template: 1fr / 1fr 1fr 1fr 1fr 1fr;
    gap: 1rem;
  }
}

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

@media (max-width: 768px) {
  .input-group-custom:nth-child(n + 2) {
    margin-top: 1rem !important;
  }
}

.input-custom {
  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);
}

.custom-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);
}

.custom-label:focus {
  background-color: var(--bs-body-bg) !important;
}

.input-custom:focus {
  outline: none;
  border: 1.5px solid var(--bs-primary);
  background: var(--bs-body-bg);
}

.input-custom:focus ~ label, .input-custom:valid ~ label, textarea:focus ~ label, textarea:valid ~ label {
  transform: translateY(-50%) scale(0.8) translateX(-10%);
  background-color: var(--bs-body-bg);
  padding: 0 .2em;
  color: var(--bs-primary);
}

#eventCenterSelect:focus {
  background: var(--bs-body-bg);
}