/* =========================================================
   Identity Provider FAQ page styles
   Loaded separately from background.css.
   ========================================================= */

:root {
  --faq-accent: rgba(135, 80, 229, 1);
  --faq-text: rgba(0, 0, 0, 1);
  --faq-divider: #E8E6E4;
  --faq-shell-width: 731px;
  --faq-mobile-width: 343px;
}

.faq-container,
.faq-container *,
body.rebrand-login-page #faq-div,
body.rebrand-login-page #faq-div * {
  box-sizing: border-box;
  font-family: IntrumSans !important;
}

/* ---------- Standalone FAQ container compatibility ---------- */
.faq-container {
  width: 100%;
  max-width: var(--faq-shell-width);
  margin: 0 auto;
  padding: 0;
  position: static;
  overflow: visible;
  color: var(--faq-text);
}

.faq-container.container,
.faq-container .row,
.faq-container .col-md-10,
.faq-container .content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---------- Thymeleaf identity provider FAQ screen ---------- */
body.rebrand-login-page #faq-div {
  width: 100%;
  color: var(--faq-text);
}

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

body.rebrand-login-page #faq-div > .row.justify-content-center > .col-12.col-sm-10 {
  flex: 0 0 var(--faq-shell-width) !important;
  max-width: var(--faq-shell-width) !important;
  width: var(--faq-shell-width) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.faq-container .portal-login-back-link,
body.rebrand-login-page #faq-div #back-to-login-faq,
body.rebrand-login-page #faq-div .back-link {
  margin: 0 0 40px !important;
  padding: 0 !important;
  align-self: flex-start !important;
}

.faq-container .portal-login-back-link a,
.faq-container .faq-back-to-login-button,
.faq-container #login-page,
body.rebrand-login-page #faq-div #back-to-login-faq,
body.rebrand-login-page #faq-div .back-link {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  color: var(--faq-accent) !important;
  font-family: IntrumSans !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer;
}

.faq-container .portal-login-back-link a span,
.faq-container .faq-back-to-login-button span,
.faq-container #login-page span,
body.rebrand-login-page #faq-div #back-to-login-faq span,
body.rebrand-login-page #faq-div .back-link span {
  color: var(--faq-accent) !important;
  font-family: IntrumSans !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 20px !important;
  text-transform: uppercase !important;
}

.faq-container .faq-title,
body.rebrand-login-page #faq-div #faq-title {
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  color: var(--faq-text);
}

body.rebrand-login-page #faq-div #faq-title .col-md-7,
body.rebrand-login-page #faq-div #login-help-description .col-md-9 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.faq-container .faq-title h3,
body.rebrand-login-page #faq-div #faq-title h3 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--faq-text) !important;
  font-family: IntrumSans !important;
  font-weight: 500 !important;
  font-size: 40px !important;
  line-height: 42px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.faq-container .login-help-description,
body.rebrand-login-page #faq-div #login-help-description,
body.rebrand-login-page #faq-div #login-help-description p {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--faq-text) !important;
  font-family: IntrumSans !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  text-align: left !important;
}

.faq-container .faq-wrapper,
body.rebrand-login-page #faq-div .faq-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 40px 0 0 !important;
  padding: 0 !important;
}

.faq-container .faq-items,
body.rebrand-login-page #faq-div .faq-items {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.faq-container .faq-item,
body.rebrand-login-page #faq-div .faq-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  border-bottom: 1px solid var(--faq-divider);
}

.faq-container .faq-item .faq-question,
body.rebrand-login-page #faq-div .faq-item .faq-question {
  position: relative;
  width: 100% !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 24px 32px 24px 0 !important;
  text-align: left !important;
  color: var(--faq-text) !important;
  font-family: IntrumSans !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  cursor: pointer;
  outline: none;
}

.faq-container .faq-item .faq-question span,
.faq-container .faq-item .faq-question:hover span,
.faq-container .faq-item .faq-question:focus span,
.faq-container .faq-item .faq-question:focus-visible span,
body.rebrand-login-page #faq-div .faq-item .faq-question span,
body.rebrand-login-page #faq-div .faq-item .faq-question:hover span,
body.rebrand-login-page #faq-div .faq-item .faq-question:focus span,
body.rebrand-login-page #faq-div .faq-item .faq-question:focus-visible span {
  color: var(--faq-text) !important;
  font-family: IntrumSans !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 28px !important;
}

.faq-container .faq-item .faq-question.open,
.faq-container .faq-item .faq-question.open span,
body.rebrand-login-page #faq-div .faq-item .faq-question.open,
body.rebrand-login-page #faq-div .faq-item .faq-question.open span {
  color: var(--faq-accent) !important;
}

.faq-container .faq-item .faq-question:hover,
.faq-container .faq-item .faq-question:focus,
.faq-container .faq-item .faq-question:focus-visible,
body.rebrand-login-page #faq-div .faq-item .faq-question:hover,
body.rebrand-login-page #faq-div .faq-item .faq-question:focus,
body.rebrand-login-page #faq-div .faq-item .faq-question:focus-visible {
  text-decoration: none !important;
}

.faq-container .faq-item .faq-question .icon,
body.rebrand-login-page #faq-div .faq-item .faq-question .icon {
  position: absolute !important;
  right: 0 !important;
  top: 28px !important;
  color: var(--faq-accent) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.faq-container .icon-down-selector,
.faq-container .icon-down-selector::before,
.faq-container .icon-down-selector::after,
.faq-container .faq-question .icon,
.faq-container .faq-question .icon::before,
.faq-container .faq-question .icon::after,
.faq-container .faq-question.open .icon,
.faq-container .faq-question.open .icon::before,
.faq-container .faq-question.open .icon::after,
body.rebrand-login-page #faq-div .icon-down-selector,
body.rebrand-login-page #faq-div .icon-down-selector::before,
body.rebrand-login-page #faq-div .icon-down-selector::after,
body.rebrand-login-page #faq-div .faq-question .icon,
body.rebrand-login-page #faq-div .faq-question .icon::before,
body.rebrand-login-page #faq-div .faq-question .icon::after,
body.rebrand-login-page #faq-div .faq-question.open .icon,
body.rebrand-login-page #faq-div .faq-question.open .icon::before,
body.rebrand-login-page #faq-div .faq-question.open .icon::after {
  color: var(--faq-accent) !important;
  border-color: var(--faq-accent) !important;
}

.faq-container .icon-down-selector,
body.rebrand-login-page #faq-div .icon-down-selector {
  transition: transform 0.3s ease;
}

.faq-container .faq-question.open .icon-down-selector,
body.rebrand-login-page #faq-div .faq-question.open .icon-down-selector {
  transform: rotate(180deg);
}

.faq-container .faq-item .faq-answer,
body.rebrand-login-page #faq-div .faq-item .faq-answer {
  color: var(--faq-text) !important;
  overflow: hidden;
  opacity: 0;
  position: absolute;
  font-family: IntrumSans !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  transition: height 0.5s cubic-bezier(.4, 0, .6, 1);
}

.faq-container .faq-item .faq-answer-content,
.faq-container .faq-item .faq-answer p,
body.rebrand-login-page #faq-div .faq-item .faq-answer-content,
body.rebrand-login-page #faq-div .faq-item .faq-answer p {
  margin: 0 !important;
  color: var(--faq-text) !important;
  font-family: IntrumSans !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
}

.faq-container .faq-item .faq-answer .faq-answer-content,
body.rebrand-login-page #faq-div .faq-item .faq-answer .faq-answer-content {
  padding-bottom: 16px !important;
}

.faq-container .faq-item .faq-answer a,
body.rebrand-login-page #faq-div .faq-item .faq-answer a {
  color: #006FB6 !important;
  font-family: IntrumSans !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

body.rebrand-login-page #faq-div span:not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: IntrumSans !important;
}

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

body.rebrand-login-page #faq-div .col-12.col-sm-10 {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    left: 0;
    max-width: var(--faq-shell-width);
    width: 100%;
}

@media (max-width: 1200px) {
    body.rebrand-login-page #faq-div .col-12.col-sm-10 {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        max-width: var(--faq-shell-width);
        width: 100%;
    }
}

@media (max-width: 768px) {
    body.rebrand-login-page #faq-div .col-12.col-sm-10 {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        max-width: var(--faq-shell-width);
        width: 100%;
    }
}

@media (max-width: 576px) {
  .faq-container,
  body.rebrand-login-page #faq-div > .row.justify-content-center > .col-12.col-sm-10 {
    flex-basis: var(--faq-mobile-width) !important;
    max-width: var(--faq-mobile-width) !important;
    width: 100% !important;
    margin-top: 32px !important;
  }

    body.rebrand-login-page #faq-div .col-12.col-sm-10 {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

  .faq-container .portal-login-back-link,
  body.rebrand-login-page #faq-div #back-to-login-faq,
  body.rebrand-login-page #faq-div .back-link {
    margin-bottom: 38px !important;
  }

  .faq-container .portal-login-back-link a,
  .faq-container .faq-back-to-login-button,
  .faq-container #login-page,
  .faq-container .portal-login-back-link a span,
  .faq-container .faq-back-to-login-button span,
  .faq-container #login-page span,
  body.rebrand-login-page #faq-div #back-to-login-faq,
  body.rebrand-login-page #faq-div .back-link,
  body.rebrand-login-page #faq-div #back-to-login-faq span,
  body.rebrand-login-page #faq-div .back-link span {
    font-size: 12px !important;
    line-height: 20px !important;
  }

  .faq-container .faq-title h3,
  body.rebrand-login-page #faq-div #faq-title h3 {
    font-size: 24px !important;
    line-height: 26px !important;
  }

  .faq-container .login-help-description,
  body.rebrand-login-page #faq-div #login-help-description,
  body.rebrand-login-page #faq-div #login-help-description p {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .faq-container .faq-wrapper,
  body.rebrand-login-page #faq-div .faq-wrapper {
    margin-top: 24px !important;
  }

  .faq-container .faq-item .faq-question,
  .faq-container .faq-item .faq-question span,
  .faq-container .faq-item .faq-question.open span,
  .faq-container .faq-item .faq-question:hover span,
  .faq-container .faq-item .faq-question:focus span,
  .faq-container .faq-item .faq-question:focus-visible span,
  body.rebrand-login-page #faq-div .faq-item .faq-question,
  body.rebrand-login-page #faq-div .faq-item .faq-question span,
  body.rebrand-login-page #faq-div .faq-item .faq-question.open span,
  body.rebrand-login-page #faq-div .faq-item .faq-question:hover span,
  body.rebrand-login-page #faq-div .faq-item .faq-question:focus span,
  body.rebrand-login-page #faq-div .faq-item .faq-question:focus-visible span {
      font-size: 20px !important;
      line-height: 28px !important;
  }

  .faq-container .faq-item .faq-question,
  body.rebrand-login-page #faq-div .faq-item .faq-question {
    padding: 20px 28px 20px 0 !important;
  }

  .faq-container .faq-item .faq-question .icon,
  body.rebrand-login-page #faq-div .faq-item .faq-question .icon {
    top: 22px !important;
    right: 0 !important;
  }

  .faq-container .faq-item .faq-answer,
  .faq-container .faq-item .faq-answer-content,
  .faq-container .faq-item .faq-answer p,
  body.rebrand-login-page #faq-div .faq-item .faq-answer,
  body.rebrand-login-page #faq-div .faq-item .faq-answer-content,
  body.rebrand-login-page #faq-div .faq-item .faq-answer p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}