@import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@800&display=swap");

.login-pf-page .login-pf-page-header #kc-header-wrapper .kc-logo-text {
  background: url("../img/beneficiarios.svg") no-repeat 0 0 / contain;
  width: 189px;
  height: 37px;
  max-width: 189px;
}

@media (min-width: 1001px) {
  .login-pf body:has(#kc-otp-contact-form),
  .login-pf body:has(#kc-otp-code-form) {
    overflow: hidden;
  }

  .login-pf body div.background {
    display: block;
    width: calc(100% - 570px);
    min-width: 0;
    padding: 32px 56px 90px;
    position: relative;
    box-sizing: border-box;
    background-image:
      url("../img/medsenior-logo-branco.png"),
      url("../img/49-plus.svg"),
      url("../img/background-identificacao.png");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 200px 72px, 160px 113px, cover;
    background-position: 56px 32px, 56px calc(100% - 413px), center center;
  }

  .login-pf body div.form {
    flex: 0 0 570px;
    width: 570px;
  }

  .login-pf body div.background::after {
    content: "Bem\A Envelhecer\A é com a\A MedSênior.";
    white-space: pre;
    position: absolute;
    left: 56px;
    bottom: 90px;
    max-width: 376px;
    color: #ffffff;
    font-family: "Darker Grotesque", "Roboto", sans-serif;
    font-size: 80px;
    font-weight: 800;
    line-height: 0.86;
  }

  .login-pf body:has(#kc-otp-contact-form) div.background,
  .login-pf body:has(#kc-otp-code-form) div.background {
    flex: 1 1 auto;
    width: calc(100% - 570px);
    min-width: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    background-size: 200px 72px, 160px 113px, cover;
    background-position: 56px 32px, 56px calc(100% - 413px), center center;
  }

  .login-pf body:has(#kc-otp-contact-form) div.form,
  .login-pf body:has(#kc-otp-code-form) div.form {
    flex: 0 0 570px;
    width: 570px;
    height: 100vh;
    overflow-y: auto;
    align-items: center;
    justify-content: flex-start;
    padding: 56px 40px;
  }

  .login-pf body:has(#kc-otp-contact-form) .login-pf-page,
  .login-pf body:has(#kc-otp-code-form) .login-pf-page {
    width: 100%;
    max-width: 560px;
    min-height: auto;
    margin: auto;
    padding: 48px 46px;
  }

  .login-pf body:has(#kc-otp-contact-form) .login-pf-page .card-pf,
  .login-pf body:has(#kc-otp-code-form) .login-pf-page .card-pf {
    gap: 0;
  }

  .login-pf body:has(#kc-otp-contact-form) .login-pf-page .card-pf header,
  .login-pf body:has(#kc-otp-code-form) .login-pf-page .card-pf header {
    display: none;
  }
}