html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #FFFFFF;
}

body {
  color: #1A1A1A;
  font-family: IntrumSans;
  overflow-x: hidden;
}

body.rebrand-login-page {
  background: #FFFFFF;
}

body.rebrand-login-page .portal-header {
  width: 100%;
  background: #FFFFFF;
  border-bottom: 1px solid #D9D9D9;
}

body.rebrand-login-page .container.navbar-container.header-content,
body.rebrand-login-page .hero > .container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 165px;
  padding-right: 165px;
}

body.rebrand-login-page .container.navbar-container.header-content {
  border-bottom: 1px solid #D9D9D9;
}

body.rebrand-login-page .header-content {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
}

body.rebrand-login-page .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  min-height: 80px;
  padding: 0;
  width: 100%;
}

body.rebrand-login-page .brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

body.rebrand-login-page .logo {
  display: inline-flex;
  align-items: center;
}

body.rebrand-login-page .logo img {
  width: 96px;
  height: 22px;
}

body.rebrand-login-page .header-language-select,
body.rebrand-login-page .portal-language-dropdown {
  margin-left: auto;
}

body.rebrand-login-page .header-language-select {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.rebrand-login-page .header-language-select li {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #6A6A6A;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
}

body.rebrand-login-page .header-language-select li:not(:last-child) {
  margin-right: 16px;
  padding-right: 16px;
}

body.rebrand-login-page .header-language-select li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: #D9D9D9;
  transform: translateY(-50%);
}

body.rebrand-login-page .header-language-select li.active {
  color: #000000;
  font-weight: 500;
}

body.rebrand-login-page .portal-language-dropdown {
  position: relative;
}

body.rebrand-login-page .language-btn {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 18px;
  color: #000000;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
}

body.rebrand-login-page .language-btn::before {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  transform: translateY(-65%) rotate(45deg);
}

body.rebrand-login-page .language-btn-dropdown {
  min-width: 96px !important;
  margin: 8px 0 0 !important;
  border: 1px solid #D9D9D9 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  background: #FFFFFF;
  right: 0;
  left: auto !important;
}

body.rebrand-login-page .language-btn-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.rebrand-login-page .language-btn-dropdown li {
  padding: 4px 0;
  color: #1A1A1A;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
}

body.rebrand-login-page .language-btn-dropdown li.active {
  font-weight: 500;
}

body.rebrand-login-page .hero {
  min-height: calc(100vh - 81px);
  background: #FFFFFF !important;
  background-image: none !important;
}

body.rebrand-login-page .hero .row {
  margin-left: 0;
  margin-right: 0;
}

body.rebrand-login-page .content-wrap,
body.rebrand-login-page .content-wrap.col-md-10 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 !important;
}

body.rebrand-login-page .content-area {
  background: #FFFFFF;
  box-shadow: none;
  margin: 0;
  min-height: calc(100vh - 81px);
  box-sizing: border-box;
  padding-top: 48px;
  padding-bottom: 261px;
}

@media (min-width: 577px) {
  body.rebrand-login-page.rebrand-page .content-area,
  body.rebrand-login-page .content-area:has(#forgot-password-div:not(.d-none)),
  body.rebrand-login-page .content-area:has(#faq-div:not(.d-none)) {
    padding-top: 32px;
  }
}

body.rebrand-login-page .content {
  padding: 0;
}

body.rebrand-login-page #welcome-div > .row,
body.rebrand-login-page #forgot-password-div > .row,
body.rebrand-login-page #check-email-div > .row {
  justify-content: center;
}

body.rebrand-login-page #welcome-div .col-12.col-sm-10,
body.rebrand-login-page #forgot-password-div .col-12.col-sm-10,
body.rebrand-login-page #faq-div .col-12.col-sm-10 {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

body.rebrand-login-page #welcome-header,
body.rebrand-login-page #welcome-description,
body.rebrand-login-page #forgot-password-header,
body.rebrand-login-page #forgot-password-description,
body.rebrand-login-page #login-help-description {
  justify-content: center;
}

body.rebrand-login-page #faq-title {
  justify-content: flex-start;
}

body.rebrand-login-page #welcome-header .col-md-7,
body.rebrand-login-page #welcome-description .col-md-7,
body.rebrand-login-page #welcome-div .row > .col-md-7,
body.rebrand-login-page #forgot-password-header .col-md-7,
body.rebrand-login-page #forgot-password-description .col-md-9,
body.rebrand-login-page #faq-title .col-md-7,
body.rebrand-login-page #login-help-description .col-md-9,
body.rebrand-login-page .forgot-password-link-area {
  flex: 0 0 480px;
  max-width: 480px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body.rebrand-login-page .welcome-text {
  margin-top: 0;
}

body.rebrand-login-page .welcome-text h2,
body.rebrand-login-page #forgot-password-header h2,
body.rebrand-login-page #check-email-header h2 {
  width: 100%;
  margin: 0;
  text-align: center;
  color: #000000;
  font-size: 40px;
  line-height: 42px;
  font-weight: 500;
  letter-spacing: 0;
  text-wrap: balance;
}

body.rebrand-login-page #faq-title h2 {
  width: 100%;
  margin: 0;
  text-align: left;
  color: #000000;
  font-size: 40px;
  line-height: 42px;
  font-weight: 500;
  letter-spacing: 0;
  text-wrap: balance;
}

body.rebrand-login-page .description-text {
  margin-top: 8px;
}

body.rebrand-login-page .description-text p,
body.rebrand-login-page .description-text > div,
body.rebrand-login-page #primary-account-description,
body.rebrand-login-page #login-help-description p,
body.rebrand-login-page #forgot-password-description p {
  margin: 0;
  text-align: center;
  color: #1A1A1A;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
}

body.rebrand-login-page .button-input-area {
  width: 480px;
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

body.rebrand-login-page .intrum-input {
  position: relative;
  width: 100%;
  margin: 0;
}

body.rebrand-login-page .intrum-input input,
body.rebrand-login-page .intrum-input select,
body.rebrand-login-page .intrum-input textarea,
body.rebrand-login-page .form-control {
  width: 100%;
  height: 48px;
  padding: 12px 16px 12px;
  border: 1px solid #D6D1CC !important;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: none;
  color: #1A1A1A;
  font-size: 16px;
  line-height: 24px;
}

body.rebrand-login-page .intrum-input input:focus,
body.rebrand-login-page .intrum-input select:focus,
body.rebrand-login-page .intrum-input textarea:focus {
  border-color: #B6A8FF !important;
  box-shadow: 0 0 0 2px rgba(182,168,255,.25);
}

body.rebrand-login-page .intrum-input .place-holder {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #74716C;
  font-size: 16px;
  line-height: 24px;
  pointer-events: none;
}

body.rebrand-login-page .intrum-input .password-placeholder {
    top: 24px;
}

body.rebrand-login-page .forgot-password-link-area {
  margin: 0;
  text-align: left;
  padding-top: 2px;
}

body.rebrand-login-page .forgot-password-link-area #forgot-password-link,
body.rebrand-login-page .forgot-password-link-area #forgot-password-link:hover,
body.rebrand-login-page .forgot-password-link-area #forgot-password-link:focus,
body.rebrand-login-page .forgot-password-link-area #forgot-password-link:focus-visible {
  text-decoration: none;
}

body.rebrand-login-page .login-page-link,
body.rebrand-login-page .back-link,
body.rebrand-login-page #forgot-password-link,
body.rebrand-login-page #assistance-link {
  color: #8750E5;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.rebrand-login-page .button.login-button,
body.rebrand-login-page button.login-button,
body.rebrand-login-page a.login-button {
  width: 480px;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: #8750E5;
  color: #FFFFFF !important;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
  box-shadow: none;
  margin: 0;
  padding: 12px 16px;
}

body.rebrand-login-page .button.login-button:hover,
body.rebrand-login-page button.login-button:hover,
body.rebrand-login-page a.login-button:hover {
  background: #7A45D7;
  color: #FFFFFF !important;
  text-decoration: none;
}

body.rebrand-login-page .assistance-link-area {
  margin-top: 0;
  margin-bottom: 0;
}

body.rebrand-login-page .assistance-link-area .col-md-8 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}

body.rebrand-login-page .assistance-link-area a {
  display: inline-block;
  margin: 0;
  text-align: left;
  padding-top: 2px;
}

body.rebrand-login-page #forgot-password-div .back-link,
body.rebrand-login-page #faq-div .back-link,
body.rebrand-login-page #back-to-login,
body.rebrand-login-page #back-to-login-faq {
  display: inline-block;
  margin-bottom: 24px;
}

body.rebrand-login-page .back-chevron {
    width: 8px;
    padding-bottom: 1px;
    padding-top: 3px;
}

body.rebrand-login-page #check-email-div .check-email-card {
  width: 480px;
  max-width: 100%;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

body.rebrand-login-page #check-email-div .check-email-message {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

body.rebrand-login-page #check-email-header {
  width: 100%;
}

body.rebrand-login-page #check-email-description {
  width: 100%;
  max-width: 352px;
  padding: 0;
}

body.rebrand-login-page .check-email-illustration {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  margin: 0;
  line-height: 0;
  flex: 0 0 64px;
}

body.rebrand-login-page .check-email-illustration-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  display: block;
}

body.rebrand-login-page .check-email-illustration-envelope {
  position: absolute;
  top: calc(50% - 5px);
  left: 50%;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  display: block;
  transform: translate(-50%, -50%);
}

@media (max-height: 920px) and (min-width: 769px) {
  body.rebrand-login-page .content-area {
    padding-top: 48px;
    padding-bottom: 100px;
  }

  body.rebrand-login-page.rebrand-page .content-area,
  body.rebrand-login-page .content-area:has(#forgot-password-div:not(.d-none)),
  body.rebrand-login-page .content-area:has(#faq-div:not(.d-none)) {
    padding-top: 32px;
  }

  body.rebrand-login-page .welcome-text h2,
  body.rebrand-login-page #forgot-password-header h2,
  body.rebrand-login-page #faq-title h2,
  body.rebrand-login-page #check-email-header h2 {
    font-size: 40px;
    line-height: 42px;
  }

  body.rebrand-login-page .description-text {
    margin-top: 6px;
  }

  body.rebrand-login-page .button-input-area {
    margin-top: 12px;
    gap: 16px;
  }
}

@media (max-width: 1200px) {
  body.rebrand-login-page .container.navbar-container.header-content,
  body.rebrand-login-page .hero > .container {
    padding-left: 96px;
    padding-right: 96px;
  }
}

@media (max-width: 768px) {
  body.rebrand-login-page .container.navbar-container.header-content,
  body.rebrand-login-page .hero > .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  body.rebrand-login-page .content-area {
    padding-top: 48px;
    padding-bottom: 28px;
  }

  body.rebrand-login-page .welcome-text h2,
  body.rebrand-login-page #forgot-password-header h2,
  body.rebrand-login-page #check-email-header h2 {
    font-size: 32px;
    line-height: 34px;
  }

  body.rebrand-login-page #faq-title h2 {
    font-size: 32px;
    line-height: 34px;
    text-align: left;
  }
}

@media (max-width: 576px) {
  body.rebrand-login-page .container.navbar-container.header-content {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.rebrand-login-page .hero > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.rebrand-login-page .navbar {
    height: 72px;
    min-height: 72px;
    padding: 16px 0;
    box-sizing: border-box;
  }

  body.rebrand-login-page .logo img {
    width: 80px;
    height: 18px;
  }

  body.rebrand-login-page .content-area {
    padding-top: 48px;
    padding-bottom: 24px;
  }

  body.rebrand-login-page #welcome-header .col-md-7,
  body.rebrand-login-page #welcome-description .col-md-7,
  body.rebrand-login-page #welcome-div .row > .col-md-7,
  body.rebrand-login-page #forgot-password-header .col-md-7,
  body.rebrand-login-page #forgot-password-description .col-md-9,
  body.rebrand-login-page #faq-title .col-md-7,
  body.rebrand-login-page #login-help-description .col-md-9,
  body.rebrand-login-page .assistance-link-area,
  body.rebrand-login-page .forgot-password-link-area,
  body.rebrand-login-page .button-input-area,
  body.rebrand-login-page .button.login-button,
  body.rebrand-login-page button.login-button,
  body.rebrand-login-page a.login-button {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }

  body.rebrand-login-page .welcome-text h2,
  body.rebrand-login-page #forgot-password-header h2,
  body.rebrand-login-page #check-email-header h2 {
    font-size: 32px;
    line-height: 34px;
  }

  body.rebrand-login-page #faq-title h2 {
    font-size: 32px;
    line-height: 34px;
    text-align: left;
  }
}


/* Login page desktop centering + compact vertical stack fix */
body.rebrand-login-page #welcome-div #logonForm {
  width: 480px;
  max-width: 100%;
  margin: 0 auto;
}

body.rebrand-login-page #welcome-div .button-input-area {
  width: 100%;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 16px;
}

body.rebrand-login-page #welcome-div .button-input-area > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.rebrand-login-page #welcome-div .intrum-input {
  width: 100%;
}

body.rebrand-login-page #welcome-div .forgot-password-link-area {
  width: 100%;
  text-align: left;
  padding: 0;
  margin: 4px 0 0 !important;
}

body.rebrand-login-page #welcome-div .button.login-button,
body.rebrand-login-page #welcome-div button.login-button,
body.rebrand-login-page #welcome-div a.login-button {
  width: 100%;
  margin: 8px 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.rebrand-login-page #welcome-div .assistance-link-area {
  width: 480px;
  max-width: 100%;
  margin: 12px auto 0 !important;
  padding: 0;
}

body.rebrand-login-page #welcome-div .assistance-link-area .col-md-8 {
  width: 100%;
  max-width: 100%;
}

body.rebrand-login-page #welcome-div .assistance-link-area a {
  display: inline-block;
  margin: 0;
}

body.rebrand-login-page #welcome-description {
  margin-bottom: 4px;
}

@media (max-width: 576px) {
  body.rebrand-login-page #welcome-div #logonForm,
  body.rebrand-login-page #welcome-div .assistance-link-area {
    width: 100%;
  }
}

/* Language dropdown interaction polish */
body.rebrand-login-page .portal-language-dropdown,
body.rebrand-login-page .portal-language-dropdown * {
  cursor: pointer;
}

body.rebrand-login-page .language-btn-dropdown li {
  display: block;
  cursor: pointer;
  transition: color 0.2s ease;
}

body.rebrand-login-page .language-btn-dropdown li:hover {
  color: #000000;
}

/* Mobile polish aligned with Figma simple login */
@media (max-width: 576px) {
  body.rebrand-login-page .hero {
    min-height: auto;
  }

  body.rebrand-login-page .navbar {
    height: 60px;
    min-height: 60px;
    padding: 16px 0;
    box-sizing: border-box;
  }

  body.rebrand-login-page .container.navbar-container.header-content {
    padding-left: 15px;
    padding-right: 15px;
  }

  body.rebrand-login-page .hero > .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  body.rebrand-login-page .content-area {
    padding-top: 22px;
    padding-bottom: 48px;
  }

    body.rebrand-login-page .content-area #welcome-div {
        margin-top: 26px;
    }

  body.rebrand-login-page #welcome-div .col-12.col-sm-10 {
    max-width: 343px;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
  }

  body.rebrand-login-page #welcome-header .col-md-7,
  body.rebrand-login-page #welcome-description .col-md-7,
  body.rebrand-login-page #welcome-div .row > .col-md-7,
  body.rebrand-login-page #welcome-div #logonForm,
  body.rebrand-login-page #welcome-div .button-input-area,
  body.rebrand-login-page #welcome-div .forgot-password-link-area,
  body.rebrand-login-page #welcome-div .assistance-link-area,
  body.rebrand-login-page #welcome-div .button.login-button,
  body.rebrand-login-page #welcome-div button.login-button,
  body.rebrand-login-page #welcome-div a.login-button {
    width: 100%;
    max-width: 343px;
  }

  body.rebrand-login-page #welcome-header {
    margin-top: 0;
    margin-bottom: 0;
  }

  body.rebrand-login-page .welcome-text h2 {
    font-size: 32px;
    line-height: 34px;
    margin: 0;
  }

  body.rebrand-login-page #welcome-description {
    margin-top: 24px;
    margin-bottom: 0;
  }

  body.rebrand-login-page #welcome-description p {
    font-size: 16px;
    line-height: 24px;
  }

  body.rebrand-login-page #welcome-div .button-input-area {
    margin-top: 24px;
    row-gap: 16px;
  }

  body.rebrand-login-page #welcome-div .intrum-input input,
  body.rebrand-login-page #welcome-div .intrum-input select,
  body.rebrand-login-page #welcome-div .intrum-input textarea {
    height: 61px;
    padding: 12px 16px;
  }

  body.rebrand-login-page #welcome-div .forgot-password-link-area {
    margin-top: 0 !important;
    padding-top: 0;
  }

  body.rebrand-login-page #welcome-div .button.login-button,
  body.rebrand-login-page #welcome-div button.login-button,
  body.rebrand-login-page #welcome-div a.login-button {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 24px !important;
  }

  body.rebrand-login-page #welcome-div .assistance-link-area {
    margin-top: 24px !important;
  }

  body.rebrand-login-page #welcome-div .assistance-link-area a,
  body.rebrand-login-page #welcome-div .forgot-password-link-area a {
    font-size: 14px;
    line-height: 18px;
  }
}

/* Forgot password screen - align to Figma */
body.rebrand-login-page #forgot-password-div .col-12.col-sm-10 {
  align-items: center;
}

body.rebrand-login-page #forgot-password-div .back-link,
body.rebrand-login-page #forgot-password-div #back-to-login {
    width: 480px;
    max-width: 100%;
    margin: 0 0 32px;
    display: inline-flex;
    align-items: center;
    text-align: left;
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 1px;
}

body.rebrand-login-page #forgot-password-header,
body.rebrand-login-page #forgot-password-description,
body.rebrand-login-page #forgot-password-div .row > .col-md-8 {
  justify-content: center;
}

body.rebrand-login-page #forgot-password-header .col-md-7,
body.rebrand-login-page #forgot-password-description .col-md-9,
body.rebrand-login-page #forgot-password-div .row > .col-md-8 {
  flex: 0 0 480px;
  max-width: 480px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body.rebrand-login-page #forgot-password-header {
  margin-top: 0 !important;
}

body.rebrand-login-page #forgot-password-header h2 {
  text-align: left;
  font-size: 40px;
  line-height: 42px;
}

body.rebrand-login-page #forgot-password-description {
  margin-top: 12px;
}

body.rebrand-login-page #forgot-password-description p {
  text-align: left;
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  line-height: 28px;
}

body.rebrand-login-page #forgot-password-div .emailForm .button-input-area {
  width: 480px;
  max-width: 100%;
  margin: 32px 0 0;
  gap: 16px;
}

body.rebrand-login-page #forgot-password-div .emailForm .button.login-button,
body.rebrand-login-page #forgot-password-div .emailForm button.login-button {
  width: 480px;
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 767px) {
  body.rebrand-login-page #forgot-password-div .back-link,
  body.rebrand-login-page #forgot-password-div #back-to-login,
  body.rebrand-login-page #forgot-password-header .col-md-7,
  body.rebrand-login-page #forgot-password-description .col-md-9,
  body.rebrand-login-page #forgot-password-div .row > .col-md-8,
  body.rebrand-login-page #forgot-password-div .emailForm .button-input-area {
    width: 100%;
    max-width: 343px;
  }

  body.rebrand-login-page #forgot-password-div .back-link,
  body.rebrand-login-page #forgot-password-div #back-to-login {
    margin-bottom: 24px;
  }

  body.rebrand-login-page #forgot-password-header h2 {
    text-align: left;
    font-size: 32px;
    line-height: 34px;
  }

  body.rebrand-login-page #forgot-password-description {
    margin-top: 8px;
  }

  body.rebrand-login-page #forgot-password-div .emailForm .button-input-area {
    margin-top: 24px;
  }
}
/* Forgot password - final width alignment patch */

/* Desktop */
@media (min-width: 768px) {
  body.rebrand-login-page #forgot-password-div,
  body.rebrand-login-page #forgot-password-div .forgot-password-content,
  body.rebrand-login-page #forgot-password-div .forgot-password-form,
  body.rebrand-login-page #forgot-password-div #emailForm {
    width: 480px;
    max-width: 480px;
  }

  body.rebrand-login-page #forgot-password-div input,
  body.rebrand-login-page #forgot-password-div .rebrand-input,
  body.rebrand-login-page #forgot-password-div .primary-button,
  body.rebrand-login-page #forgot-password-div button[type="submit"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

}

/* Mobile stays aligned to the same content rhythm */
@media (max-width: 767px) {
  body.rebrand-login-page #forgot-password-div,
  body.rebrand-login-page #forgot-password-div .forgot-password-content,
  body.rebrand-login-page #forgot-password-div .forgot-password-form,
  body.rebrand-login-page #forgot-password-div #emailForm {
    width: 100%;
    max-width: 343px;
  }

  body.rebrand-login-page #forgot-password-div input,
  body.rebrand-login-page #forgot-password-div .rebrand-input,
  body.rebrand-login-page #forgot-password-div .primary-button,
  body.rebrand-login-page #forgot-password-div button[type="submit"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* Final forgot password centering fix merged */
@media (min-width: 768px) {
  body.rebrand-login-page #forgot-password-div > .row.justify-content-center,
  body.rebrand-login-page #forgot-password-div .row.justify-content-center {
    display: flex;
    justify-content: center !important;
  }

  body.rebrand-login-page #forgot-password-div > .row.justify-content-center > .col-12.col-sm-10,
  body.rebrand-login-page #forgot-password-div .row.justify-content-center > .col-12.col-sm-10,
  body.rebrand-login-page #forgot-password-div > .row.justify-content-center > [class*="col-"],
  body.rebrand-login-page #forgot-password-div .row.justify-content-center > [class*="col-"] {
    flex: 0 0 480px !important;
    max-width: 480px !important;
    width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: stretch !important;
  }

  body.rebrand-login-page #forgot-password-div .back-link,
  body.rebrand-login-page #forgot-password-div #back-to-login {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 32px !important;
    text-align: left !important;
  }

  body.rebrand-login-page #forgot-password-div #forgot-password-header,
  body.rebrand-login-page #forgot-password-div #forgot-password-description,
  body.rebrand-login-page #forgot-password-div .emailForm,
  body.rebrand-login-page #forgot-password-div .button-input-area,
  body.rebrand-login-page #forgot-password-div .intrum-input,
  body.rebrand-login-page #forgot-password-div .login-button {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.rebrand-login-page #forgot-password-div #forgot-password-header .col-md-7,
  body.rebrand-login-page #forgot-password-div #forgot-password-description .col-md-9,
  body.rebrand-login-page #forgot-password-div .row > .col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.rebrand-login-page #forgot-password-div #forgot-password-header h2,
  body.rebrand-login-page #forgot-password-div #forgot-password-description p {
    text-align: left !important;
  }

  body.rebrand-login-page #forgot-password-div .emailForm .button-input-area {
    width: 100% !important;
    margin: 32px 0 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px !important;
  }

  body.rebrand-login-page #forgot-password-div .login-button {
    width: 100% !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 576px) {
  body.rebrand-login-page #forgot-password-div .col-12.col-sm-10 {
    max-width: 343px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch !important;
  }

  body.rebrand-login-page #forgot-password-div .back-link,
  body.rebrand-login-page #forgot-password-div #back-to-login {
    width: 100% !important;
    margin: 0 0 24px !important;
    text-align: left !important;
  }

  body.rebrand-login-page #forgot-password-header .col-md-7,
  body.rebrand-login-page #forgot-password-description .col-md-9,
  body.rebrand-login-page #forgot-password-div .row > .col-md-8,
  body.rebrand-login-page #forgot-password-div .emailForm,
  body.rebrand-login-page #forgot-password-div .button-input-area,
  body.rebrand-login-page #forgot-password-div .intrum-input,
  body.rebrand-login-page #forgot-password-div .login-button {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.rebrand-login-page #forgot-password-div #forgot-password-header h2,
  body.rebrand-login-page #forgot-password-div #forgot-password-description p {
    text-align: left !important;
  }

  body.rebrand-login-page #forgot-password-div .emailForm .button-input-area {
    margin-top: 24px !important;
    gap: 16px !important;
  }
}

body.rebrand-login-page,
body.rebrand-login-page h1,
body.rebrand-login-page h2,
body.rebrand-login-page h3,
body.rebrand-login-page h4,
body.rebrand-login-page h5,
body.rebrand-login-page h6,
body.rebrand-login-page p,
body.rebrand-login-page a,
body.rebrand-login-page label,
body.rebrand-login-page button,
body.rebrand-login-page input,
body.rebrand-login-page select,
body.rebrand-login-page textarea,
body.rebrand-login-page li,
body.rebrand-login-page td,
body.rebrand-login-page th,
body.rebrand-login-page .button,
body.rebrand-login-page .login-button,
body.rebrand-login-page .place-holder,
body.rebrand-login-page .error-message,
body.rebrand-login-page .description-text,
body.rebrand-login-page .welcome-text,
body.rebrand-login-page .header-language-select li,
body.rebrand-login-page .login-page-link,
body.rebrand-login-page .back-link,
body.rebrand-login-page span:not([class^="icon-"]):not([class*=" icon-"]) {
    font-family: IntrumSans !important;
}

body.rebrand-login-page [class^="icon-"],
body.rebrand-login-page [class*=" icon-"],
body.rebrand-login-page [class^="icon-"]::before,
body.rebrand-login-page [class*=" icon-"]::before,
body.rebrand-login-page [class^="icon-"]::after,
body.rebrand-login-page [class*=" icon-"]::after {
    font-family: intrum !important;
}

/* =========================================================
   Mock login final restore
   Keeps the IntrumSans fix, but prevents generic forgot-password
   screen rules from stretching the mock login form.
   ========================================================= */
@media (min-width: 768px) {
  body.rebrand-login-page.mock-login-page #forgot-password-div {
    width: 100% !important;
    max-width: none !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div > .row.justify-content-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div > .row.justify-content-center > .col-12.col-sm-10 {
    flex: 0 0 480px !important;
    max-width: 480px !important;
    width: 480px !important;
    /*margin: 99px auto 0 !important;*/
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div .back-link,
  body.rebrand-login-page.mock-login-page #forgot-password-div .back-chevron,
  body.rebrand-login-page.mock-login-page #forgot-password-div #back-to-login {
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    text-align: left !important;
    color: #8750E5 !important;
    font-family: IntrumSans !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    text-underline-offset: 3px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-header,
  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-description,
  body.rebrand-login-page.mock-login-page #forgot-password-div #logonForm,
  body.rebrand-login-page.mock-login-page #forgot-password-div .button-input-area {
    width: 100% !important;
    max-width: 480px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-header .col-md-7,
  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-description .col-md-9,
  body.rebrand-login-page.mock-login-page #forgot-password-div .row > .col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-header {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-header h2 {
    margin: 0 !important;
    color: #000000 !important;
    text-align: left !important;
    font-family: IntrumSans !important;
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
    letter-spacing: 0 !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-description {
    margin-top: 0 !important;
    margin-bottom: 32px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-description p {
    margin: 0 !important;
    color: #1A1A1A !important;
    text-align: left !important;
    font-family: IntrumSans !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div .button-input-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-top: 0 !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div .intrum-input,
  body.rebrand-login-page.mock-login-page #forgot-password-div .button.login-button,
  body.rebrand-login-page.mock-login-page #forgot-password-div button.login-button,
  body.rebrand-login-page.mock-login-page #forgot-password-div a.login-button {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div .button.login-button,
  body.rebrand-login-page.mock-login-page #forgot-password-div button.login-button,
  body.rebrand-login-page.mock-login-page #forgot-password-div a.login-button {
    margin: 8px 0 0 !important;
  }
}

@media (max-width: 767px) {
  body.rebrand-login-page.mock-login-page #forgot-password-div > .row.justify-content-center > .col-12.col-sm-10 {
    width: 100% !important;
    max-width: 343px !important;
    margin: 32px auto 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: stretch !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div .back-link,
  body.rebrand-login-page.mock-login-page #forgot-password-div #back-to-login {
    width: auto !important;
    max-width: max-content !important;
    margin: 0 0 24px 0 !important;
    align-self: flex-start !important;
    text-align: left !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-header h2 {
    text-align: left !important;
    font-size: 32px !important;
    line-height: 34px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-description p {
    text-align: left !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

@media (min-width: 768px) {
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div {
    width: 100% !important;
    max-width: none !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div > .row.justify-content-center {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div > .row.justify-content-center > .col-12.col-sm-10 {
    flex: 0 0 480px !important;
    max-width: 480px !important;
    width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.rebrand-login-page #forgot-password-div .back-link,
  body.rebrand-login-page #forgot-password-div #back-to-login {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    margin: 0 0 32px !important;
    text-align: left !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-header,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-description,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .emailForm,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .button-input-area,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .intrum-input,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .login-button {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-header .col-md-7,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-description .col-md-9,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .row > .col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-header h2,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-description p {
    text-align: left !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .emailForm .button-input-area {
    width: 100% !important;
    margin: 32px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .emailForm .button.login-button,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .emailForm button.login-button {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div {
    width: 100% !important;
    max-width: none !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div > .row.justify-content-center > .col-12.col-sm-10 {
    width: 100% !important;
    max-width: 343px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: stretch !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-header .col-md-7,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-description .col-md-9,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .row > .col-md-8,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .emailForm,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .button-input-area,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .intrum-input,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .login-button {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-header h2,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #forgot-password-description p {
    text-align: left !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div .emailForm .button-input-area {
    margin-top: 24px !important;
    gap: 16px !important;
  }
}

body.rebrand-login-page .assistance-link-area a,
body.rebrand-login-page .assistance-link-area a.login-page-link,
body.rebrand-login-page #assistance-link,
body.rebrand-login-page #assistance-link span,
body.rebrand-login-page #welcome-div .assistance-link-area a,
body.rebrand-login-page #welcome-div .assistance-link-area a.login-page-link,
body.rebrand-login-page #welcome-div #assistance-link,
body.rebrand-login-page #welcome-div #assistance-link span {
  text-decoration: none !important;
}

body.rebrand-login-page .assistance-link-area a:hover,
body.rebrand-login-page .assistance-link-area a:focus,
body.rebrand-login-page .assistance-link-area a:focus-visible,
body.rebrand-login-page .assistance-link-area a:hover span,
body.rebrand-login-page .assistance-link-area a:focus span,
body.rebrand-login-page .assistance-link-area a:focus-visible span,
body.rebrand-login-page #assistance-link:hover,
body.rebrand-login-page #assistance-link:focus,
body.rebrand-login-page #assistance-link:focus-visible,
body.rebrand-login-page #assistance-link:hover span,
body.rebrand-login-page #assistance-link:focus span,
body.rebrand-login-page #assistance-link:focus-visible span {
  text-decoration: none !important;
}

body.rebrand-login-page #welcome-div #welcome-header h2 {
  font-size: 40px !important;
  line-height: 42px !important;
}

body.rebrand-login-page #welcome-div #welcome-description p {
  color: rgba(0, 0, 0, 1) !important;
}

body.rebrand-login-page #welcome-div #username,
body.rebrand-login-page #welcome-div #password {
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.rebrand-login-page #welcome-div .button.login-button,
body.rebrand-login-page #welcome-div button.login-button,
body.rebrand-login-page #welcome-div a.login-button {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.rebrand-login-page #welcome-div .assistance-link-area a,
body.rebrand-login-page #welcome-div .assistance-link-area a.login-page-link,
body.rebrand-login-page #welcome-div #assistance-link,
body.rebrand-login-page #welcome-div #assistance-link span {
  line-height: 18px !important;
}

@media (max-width: 576px) {
  body.rebrand-login-page #welcome-div #welcome-header h2 {
    font-size: 32px !important;
    line-height: 34px !important;
  }

  body.rebrand-login-page #welcome-div #welcome-description p {
    color: rgba(0, 0, 0, 1) !important;
    font-size: 20px !important;
    line-height: 28px !important;
  }

  body.rebrand-login-page #welcome-div #username,
  body.rebrand-login-page #welcome-div #password {
    height: 48px !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.rebrand-login-page #welcome-div .button.login-button,
  body.rebrand-login-page #welcome-div button.login-button,
  body.rebrand-login-page #welcome-div a.login-button {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.rebrand-login-page #welcome-div .assistance-link-area a,
  body.rebrand-login-page #welcome-div .assistance-link-area a.login-page-link,
  body.rebrand-login-page #welcome-div #assistance-link,
  body.rebrand-login-page #welcome-div #assistance-link span {
    line-height: 18px !important;
  }
}

body.rebrand-login-page.mock-login-page #forgot-password-div .back-link,
body.rebrand-login-page.mock-login-page #forgot-password-div #back-to-login {
  font-size: 12px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-description p {
  color: rgba(0, 0, 0, 1) !important;
  font-size: 20px !important;
  line-height: 28px !important;
}

body.rebrand-login-page.mock-login-page #forgot-password-div .intrum-input {
  position: relative !important;
}

body.rebrand-login-page.mock-login-page #forgot-password-div #ssn {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body.rebrand-login-page.mock-login-page #forgot-password-div .button.login-button,
body.rebrand-login-page.mock-login-page #forgot-password-div button.login-button,
body.rebrand-login-page.mock-login-page #forgot-password-div a.login-button {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

@media (max-width: 767px) {
  body.rebrand-login-page.mock-login-page #forgot-password-div .back-link,
  body.rebrand-login-page.mock-login-page #forgot-password-div #back-to-login {
      font-size: 12px !important;
      line-height: 20px !important;
      font-weight: 500 !important;
      letter-spacing: 1px;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #forgot-password-description p {
    color: rgba(0, 0, 0, 1) !important;
    font-size: 20px !important;
    line-height: 28px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #ssn {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div .intrum-input .place-holder {
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #74716C !important;
    background: transparent !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    pointer-events: none !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div .button.login-button,
  body.rebrand-login-page.mock-login-page #forgot-password-div button.login-button,
  body.rebrand-login-page.mock-login-page #forgot-password-div a.login-button {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:focus + .place-holder {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 767px) {
  body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:focus + .place-holder {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}



body.rebrand-login-page #check-email-div #check-email-header h2 {
  font-size: 40px;
  line-height: 42px;
}

body.rebrand-login-page #check-email-div #check-email-description p {
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  line-height: 24px;
}

body.rebrand-login-page #check-email-div #loginPageRedirect {
  width: auto;
  min-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  body.rebrand-login-page #check-email-div .check-email-card {
    width: 343px;
    max-width: 100%;
    margin-top: 32px;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  body.rebrand-login-page #check-email-div #check-email-header h2 {
    font-size: 32px;
    line-height: 34px;
  }

  body.rebrand-login-page #check-email-div #check-email-description p {
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    line-height: 18px;
  }

  body.rebrand-login-page .check-email-illustration {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    flex: 0 0 56px;
  }

  body.rebrand-login-page .check-email-illustration-bg {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  body.rebrand-login-page .check-email-illustration-envelope {
    left: 50%;
    top: calc(50% - 5px);
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    transform: translate(-50%, -50%);
  }

  body.rebrand-login-page #check-email-div #loginPageRedirect {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    align-self: center;
  }
}

body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:focus + .place-holder,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:focus + .place-holder,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:valid + .place-holder,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:valid + .place-holder {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 767px) {
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:focus + .place-holder,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:focus + .place-holder,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:valid + .place-holder,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:valid + .place-holder {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Mock login only - keep placeholder floated on focus even when input is still empty */
body.rebrand-login-page.mock-login-page #forgot-password-div #ssn {
  height: 61px !important;
  box-sizing: border-box !important;
}

body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:focus,
body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:not(:placeholder-shown) {
  padding-top: 24px !important;
  padding-bottom: 8px !important;
  line-height: 24px !important;
}

body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:focus + .place-holder,
body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:not(:placeholder-shown) + .place-holder {
  opacity: 1 !important;
  visibility: visible !important;
  left: 16px !important;
  right: 16px !important;
  top: 8px !important;
  transform: none !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

@media (max-width: 767px) {
  body.rebrand-login-page.mock-login-page #forgot-password-div #ssn {
    height: 61px !important;
    box-sizing: border-box !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:focus,
  body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:not(:placeholder-shown) {
    padding-top: 24px !important;
    padding-bottom: 8px !important;
    line-height: 24px !important;
  }

  body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:focus + .place-holder,
  body.rebrand-login-page.mock-login-page #forgot-password-div #ssn:not(:placeholder-shown) + .place-holder {
    opacity: 1 !important;
    visibility: visible !important;
    left: 16px !important;
    right: 16px !important;
    top: 8px !important;
    transform: none !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }
}

body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password {
  box-sizing: border-box !important;
}

body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:focus,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:focus,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:not(:placeholder-shown),
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:not(:placeholder-shown) {
  padding-top: 24px !important;
  padding-bottom: 8px !important;
  line-height: 24px !important;
}

body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:focus + .place-holder,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:focus + .place-holder,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:not(:placeholder-shown) + .place-holder,
body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:not(:placeholder-shown) + .place-holder {
  opacity: 1 !important;
  visibility: visible !important;
  left: 12px !important;
  right: 12px !important;
  top: 8px !important;
  transform: none !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

@media (max-width: 767px) {
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password {
    box-sizing: border-box !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:focus,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:focus,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:not(:placeholder-shown),
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:not(:placeholder-shown) {
    height: 61px !important;
    padding-top: 24px !important;
    padding-bottom: 8px !important;
    line-height: 24px !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:focus + .place-holder,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:focus + .place-holder,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #username:not(:placeholder-shown) + .place-holder,
  body.rebrand-login-page:not(.mock-login-page) #welcome-div #logonForm #password:not(:placeholder-shown) + .place-holder {
    opacity: 1 !important;
    visibility: visible !important;
    left: 12px !important;
    right: 12px !important;
    top: 8px !important;
    transform: none !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }
}

/* Forgot password only - float placeholder on focus and when value exists for email field */
body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email {
  box-sizing: border-box !important;
}

body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:focus,
body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:not(:placeholder-shown) {
  padding-top: 24px !important;
  padding-bottom: 8px !important;
  line-height: 24px !important;
}

.intrum-input input:valid + label.place-holder,
.intrum-input input:focus + label.place-holder,
.was-validated .intrum-input input:invalid + label.place-holder {
    top: 12px;
}

.was-validated .intrum-input input:invalid,
.was-validated .intrum-input input:invalid:focus,
.was-validated .intrum-input input:invalid:hover {
    border: 2px solid #e61905 !important;
}

.error-block .error-alert-icon {
    background: url('../images/alert.svg');
    height: 16px;
    width: 16px;
    display: block;
}

.error-block {
    background-color: #fdedeb;
    margin-bottom: 18px;
    padding: 16px 0;
    border-radius: 8px;
}

.error-block label {
    margin-bottom: 0;
    display: table-cell;
    color: #000000;
    padding: 0 0 0 15px;
    vertical-align: middle;
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
}

.error-message {
    padding: 0.5em 0 2em;
}

body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:focus + .place-holder,
body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:not(:placeholder-shown) + .place-holder {
  opacity: 1 !important;
  visibility: visible !important;
  left: 16px !important;
  right: 16px !important;
  top: 8px !important;
  transform: none !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

@media (max-width: 767px) {
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email {
    box-sizing: border-box !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:focus,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:not(:placeholder-shown) {
    height: 61px !important;
    padding-top: 24px !important;
    padding-bottom: 8px !important;
    line-height: 24px !important;
  }

  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:focus + .place-holder,
  body.rebrand-login-page:not(.mock-login-page) #forgot-password-div #emailForm #email:not(:placeholder-shown) + .place-holder {
    opacity: 1 !important;
    visibility: visible !important;
    left: 16px !important;
    right: 16px !important;
    top: 8px !important;
    transform: none !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
  }
}

.intrum-input label.error-message {
    text-transform: uppercase !important;
}

body.rebrand-login-page.mock-login-page .intrum-input .place-holder {
    position: absolute;
    left: 13px;
    top: 30px;
    transform: translateY(-50%);
    margin: 0;
    color: #74716C;
    font-size: 16px;
    line-height: 24px;
    pointer-events: none;
    text-transform: none;
    font-weight: 400;
}