:root {
  --mp-navy: #062d43;
  --mp-ink: #17212b;
  --mp-muted: #647282;
  --mp-line: #dbe2e8;
  --mp-primary: #00776e;
  --mp-primary-hover: #005f59;
}

.mp-login-page *,
.mp-login-page *::before,
.mp-login-page *::after {
  box-sizing: border-box;
}

body.mp-login-page {
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  color: var(--mp-ink);
  background: linear-gradient(145deg, #edf5f6 0%, #f8fafb 52%, #ffffff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.mp-login-page > div {
  width: calc(100vw - 48px);
  min-width: 0;
  max-width: 440px;
}

.mp-login-page .pf-v5-c-login__container {
  width: 440px;
  min-width: 0;
  max-width: 440px;
  grid-template-columns: 440px !important;
}

.mp-brand-header {
  margin: 0 auto 24px;
}

#kc-header-wrapper,
.mp-brand-wordmark {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 993 / 278;
  margin: 0 auto;
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  background: url("../img/marco-polo-login.png") center / contain no-repeat;
}

.mp-login-page .card-pf,
.mp-login-page .pf-v5-c-login__main {
  width: 100%;
  min-width: 0;
  max-width: 440px;
  margin: 0;
  padding: 34px;
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 20px 54px rgb(6 45 67 / 14%);
}

.mp-login-page h1#kc-page-title.pf-v5-c-title {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 24px;
  color: var(--mp-ink);
  font-size: clamp(1.25rem, calc(1rem + 1.2vw), 1.65rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.mp-login-page label,
.mp-login-page .pf-v5-c-form__label-text {
  color: var(--mp-ink);
  font-weight: 650;
}

.mp-login-page input[type="text"],
.mp-login-page input[type="email"],
.mp-login-page input[type="password"] {
  min-height: 44px;
  border-color: #b9c6d0;
  border-radius: 7px;
  background: #ffffff;
  color: var(--mp-ink);
}

.mp-login-page input:focus-visible,
.mp-login-page button:focus-visible,
.mp-login-page a:focus-visible {
  outline: 3px solid rgb(0 119 110 / 28%);
  outline-offset: 2px;
}

.mp-login-page .pf-v5-c-button.pf-m-primary,
.mp-login-page #kc-login {
  min-height: 44px;
  border-radius: 7px;
  background: var(--mp-primary);
  font-weight: 700;
}

.mp-login-page .pf-v5-c-button.pf-m-primary:hover,
.mp-login-page #kc-login:hover {
  background: var(--mp-primary-hover);
}

.mp-login-page a {
  color: var(--mp-primary);
}

.mp-login-page .pf-v5-c-alert.pf-m-danger {
  border-radius: 7px;
}

.mp-login-page .kc-feedback-text,
.mp-login-page .pf-v5-c-helper-text__item-text {
  line-height: 1.4;
}

@media (max-width: 520px) {
  body.mp-login-page {
    padding: 18px;
  }

  body.mp-login-page > div {
    width: calc(100vw - 36px);
  }

  .mp-login-page .pf-v5-c-login__container {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
    grid-template-columns: calc(100vw - 36px) !important;
  }

  .mp-brand-header {
    margin-bottom: 18px;
  }

  .mp-login-page .card-pf,
  .mp-login-page .pf-v5-c-login__main {
    padding: 26px 22px;
  }
}