html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
  margin-bottom: 60px;
}

main {
  max-width: 48rem;
}

.page-narrow {
  max-width: 32rem;
}

.validation-summary-valid {
  display: none;
}

.game-details-page .card {
  border-radius: 0.5rem;
}

.game-details-page .identity-status-banner {
  border-left: 0.3rem solid #0d6efd;
}

.game-details-page .identity-status-icon {
  line-height: 1;
  font-size: 1.25rem;
}

.game-details-page .identity-status-banner .fw-semibold {
  line-height: 1.35;
  word-break: break-word;
}

.game-details-page .roster-card-going {
  border-top: 0.3rem solid #198754;
}

.game-details-page .roster-card-waitlist {
  border-top: 0.3rem solid #6c757d;
}

.game-details-page .roster-card li:last-child {
  border-bottom: 0 !important;
}

.game-details-page .share-actions {
  flex-wrap: wrap;
  gap: 0.375rem;
  width: 100%;
}

.game-details-page .share-actions > .form-control {
  flex: 1 1 12rem;
  min-width: min(100%, 12rem);
  width: auto;
  max-width: 100%;
}

.game-details-page .share-actions > .btn {
  flex: 0 0 auto;
}

.game-details-page .share-actions-secondary {
  width: 100%;
}

@media (max-width: 575.98px) {
  .game-details-page .identity-status-banner .text-sm-end {
    text-align: left !important;
    width: 100%;
  }

  .game-details-page .share-actions > .form-control,
  .game-details-page .share-actions > .btn {
    flex: 1 1 100%;
    width: 100%;
    min-width: 100%;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}