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

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

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