/* =========================================
   "NEW KMK ID CREATED" WINDOW (kmk-id-window.js)
   Shown right after a player registers: the KMK ID they were given and the password they typed.
   Same look as the dashboards' other windows (grey body, red X, salmon Cancel, lime OK), so it
   is used unchanged on the registration website and on both dashboards.
   ========================================= */
.kmk-id-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  font-family: Arial, Helvetica, sans-serif;
}

.kmk-id-dialog {
  position: relative;
  box-sizing: border-box;
  width: 580px;
  max-width: 94vw;
  max-height: 94vh;
  overflow-y: auto;
  padding: 18px 22px 22px;
  background: #e0e0e0;
  border: 3px solid #111111;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  text-align: center;
  color: #000000;
}

.kmk-id-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 3px solid #d62828;
  border-radius: 50%;
  background: #ffffff;
  color: #d62828;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.kmk-id-title {
  margin: 0;
  padding: 3px 44px 0;
  font-size: 1.3rem;
  font-weight: 800;
}

.kmk-id-message {
  margin: 22px 0 14px;
  font-size: 1.2rem;
  font-weight: 800;
}

/* the white box with the two lines */
.kmk-id-box {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  background: #ffffff;
  font-size: 1.35rem;
  line-height: 1.55;
  text-align: center;
  overflow-wrap: anywhere;
}

.kmk-id-label {
  margin-right: 0.5em;
}

/* "Already Registered" window (KmkIdWindow.showAlreadyRegistered) */
.kmk-id-warn {
  color: #a61b1b;
}

.kmk-id-note {
  margin: 14px 6px 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.kmk-id-reason {
  font-weight: 800;
}

/* the School / College / Association name in the Coach / Manager version: a name, so smaller than a KMK ID */
.kmk-id-institution {
  font-size: 1.15rem;
  font-weight: 700;
}

.kmk-id-buttons {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-top: 20px;
}

.kmk-id-btn {
  padding: 7px 26px;
  border: 1px solid #333333;
  border-radius: 7px;
  color: #000000;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}

.kmk-id-btn-cancel {
  background: #ff9c8f;
}

.kmk-id-btn-cancel:hover {
  background: #ff8b7c;
}

.kmk-id-btn-ok {
  background: #a8d716;
}

.kmk-id-btn-ok:hover {
  background: #98c412;
}

@media (max-width: 520px) {
  .kmk-id-dialog {
    padding: 14px 14px 18px;
    border-radius: 16px;
  }
  .kmk-id-box {
    font-size: 1.1rem;
  }
  .kmk-id-buttons {
    gap: 20px;
  }
}