/* Appointment-page customer lookup layout. */
#block-flexi-style-subtheme-lookupblock #lookup-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin-bottom: 1.5rem;
}

/* Keep each search field and its button together. */
#block-flexi-style-subtheme-lookupblock .barcodeWrapper,
#block-flexi-style-subtheme-lookupblock .usernameWrapper,
#block-flexi-style-subtheme-lookupblock .emailWrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: end;
}

#block-flexi-style-subtheme-lookupblock .form-item-barcode,
#block-flexi-style-subtheme-lookupblock .form-item-username,
#block-flexi-style-subtheme-lookupblock .form-item-email {
  margin: 0;
}

#block-flexi-style-subtheme-lookupblock .form-item-barcode label,
#block-flexi-style-subtheme-lookupblock .form-item-username label,
#block-flexi-style-subtheme-lookupblock .form-item-email label {
  display: block;
  margin-bottom: 0.4rem;
}

#block-flexi-style-subtheme-lookupblock .form-item-barcode input,
#block-flexi-style-subtheme-lookupblock .form-item-username input,
#block-flexi-style-subtheme-lookupblock .form-item-email input {
  width: 100%;
}

/* Prevent button labels from wrapping. */
#block-flexi-style-subtheme-lookupblock .form-submit {
  white-space: nowrap;
}

/* Results and messages span the complete row. */
#block-flexi-style-subtheme-lookupblock .clear,
#block-flexi-style-subtheme-lookupblock .regstatus,
#block-flexi-style-subtheme-lookupblock #pickUser {
  grid-column: 1 / -1;
}

#block-flexi-style-subtheme-lookupblock #pickUser {
  width: 100%;
  margin: 0;
}

/* The session-value containers are not visual content. */
#block-flexi-style-subtheme-lookupblock [class^="previously_registered_"] {
  display: none;
}

/* Stack the searches on narrower screens. */
@media (max-width: 1000px) {
  #block-flexi-style-subtheme-lookupblock #lookup-form {
    grid-template-columns: 1fr;
  }

  #block-flexi-style-subtheme-lookupblock .barcodeWrapper,
  #block-flexi-style-subtheme-lookupblock .usernameWrapper,
  #block-flexi-style-subtheme-lookupblock .emailWrapper,
  #block-flexi-style-subtheme-lookupblock .clear,
  #block-flexi-style-subtheme-lookupblock .regstatus,
  #block-flexi-style-subtheme-lookupblock #pickUser {
    grid-column: 1;
  }

  #block-flexi-style-subtheme-lookupblock #pickUser {
    display: block;
    overflow-x: auto;
  }
}