html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 350px;
  padding: 20px;
  margin: auto;
  background-color: rgba(255,255,255,1);
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#form-regUser{
  max-width: 1000px;
}

#form-regUser .btn-outline-dark {
    border-color: #FFFFFF; 
}

@media only screen and (max-width: 768px) {
  #form-regUser .row div:not(:nth-child(1)) {
    margin-top: 20px;
  }

  #form-regUser .defaultImage div:not(:nth-child(1)) {
    margin-top: 0px;
  }  

  #form-regUser .rowBtn {
    margin-top: 0px !important;
  }    
}

/* The participant's details on the public /find page, under their name.
 *
 * Values only, one per line — the same list the check-in screen shows, from
 * the same call, so the two cannot describe somebody differently. It replaced
 * a dt/dd pair per field, whose labels were a column the page did not have
 * room for on a phone. */
.findFields {
  display: grid;
  gap: 2px;
  margin: 0 0 1rem;
  text-align: center;
}

.findField {
  font-size: 0.95rem;
  line-height: 1.4;
  /* A long institution name must not widen the card. */
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ event pass -- */

/* The banner, at the top of both public cards.
 *
 * Full-bleed: it cancels the card's own padding with a negative margin so it
 * reaches the edges and its rounded top corners match the card's. It was
 * `width: 100%` inside that padding before, which left it inset with corners
 * rounded as though it were not — a strip floating in the middle of the card
 * rather than a banner across the top of it.
 *
 * `height: auto` with a maximum: a wide banner scales to whatever the screen
 * gives it, and a portrait upload cannot take over the page. */
.passBanner {
  display: block;
  width: calc(100% + 40px);
  max-width: none;
  height: auto;
  max-height: 40vh;
  /* The image is wider than it is tall, so the container keeps its shape and
     an odd upload is cropped rather than squashed. */
  object-fit: cover;
  margin: -20px -20px 20px;
  border-radius: 6px 6px 0 0;
  /* The letterbox behind the banner image — the 2026 banner's pale mint, so an
     image narrower than the card blends into it rather than onto sky-blue. */
  background: #ecf6f4;
}

.passWhen {
  font-size: 1rem;
  color: #212529;
}

.passWhere {
  font-size: 0.95rem;
  color: #6c757d;
}

/* The tear line. A pass has one, and it is what makes the block below read as
   the part that gets checked rather than as more page. */
.passTear {
  border-top: 2px dashed #dee2e6;
  margin: 1.25rem 0;
}

.passName {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.15rem;
  color: #212529;
  overflow-wrap: anywhere;
}

.passAffiliation {
  font-size: 1rem;
  color: #6c757d;
  margin: 0 0 1.25rem;
  overflow-wrap: anywhere;
}

/* White behind the code, because a QR on a tinted card scans poorly — the
   same reason the admin's popup does it. */
.passCode {
  display: inline-block;
  padding: 12px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  max-width: 100%;
}

.passCode img {
  display: block;
  width: 220px;
  max-width: 60vw;
  height: auto;
  image-rendering: pixelated;
}

.passCheckedIn {
  font-weight: 600;
  color: #14663f;
}