@keyframes reanimate-underline-1px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 1px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 1px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 1px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 1px;
  }
}
@keyframes reanimate-underline-2px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 2px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 2px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 2px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 2px;
  }
}
@keyframes reanimate-underline-3px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 3px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 3px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 3px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 3px;
  }
}
@keyframes reanimate-underline-4px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 4px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 4px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 4px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 4px;
  }
}
@keyframes reanimate-underline-5px {
  0% {
    background-position: 100% 100%;
    background-size: 100% 5px;
  }
  49% {
    background-position: 100% 100%;
    background-size: 0% 5px;
  }
  50% {
    background-position: 0% 100%;
    background-size: 0% 5px;
  }
  100% {
    background-position: 0% 100%;
    background-size: 100% 5px;
  }
}
/** Usage

    ```scss
      .lds { 
        @include ldsRingAnimation($foreground-color: #fff, $width: 2px, $size: 25px);
      }
    ```

    ```html
      <div class="lds">
        <div></div>
        <div></div>
        <div></div>
      </div>
    ```
 */
:root {
  --nni-hcp--accordion--border-color: #001965;
  --nni-hcp--accordion--title-color: #005ad2;
  --nni-hcp--accordion--icon-color--background: #005ad2;
  --nni-hcp--accordion--icon-color--foreground: #ffffff;
  --nni-hcp--accordion--outline-color: #005ad2;
  --nni-hcp--accordion--border-color--light: #ffffff;
  --nni-hcp--accordion--title-color--light: #ffffff;
  --nni-hcp--accordion--icon-color--background-light: #ffffff;
  --nni-hcp--accordion--icon-color--foreground-light: #005ad2;
  --nni-hcp--accordion--outline-color--light: #ffffff;
}

.cmp-accordion .cmp-accordion__header {
  margin: 0;
}
.cmp-accordion .cmp-accordion__button {
  background-color: transparent;
  border: 0;
  border-top: 1px solid;
  border-top-color: #001965;
  outline-color: #005ad2;
  padding: 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
}
article .cmp-accordion .cmp-accordion__button {
  border-top-color: #001965;
  border-top-color: var(--nni-hcp--accordion--border-color);
  outline-color: #005ad2;
  outline-color: var(--nni-hcp--accordion--outline-color);
}
.cmp-accordion .cmp-accordion__button .cmp-accordion__title {
  padding: 25px 25px 25px 0;
  font-weight: normal;
  font-size: 22px;
  line-height: 29px;
  color: #005ad2;
}
article .cmp-accordion .cmp-accordion__button .cmp-accordion__title {
  color: #005ad2;
  color: var(--nni-hcp--accordion--title-color);
}
.cmp-accordion .cmp-accordion__button .cmp-accordion__icon {
  margin: 17px 0;
  min-width: 44px;
  height: 44px;
  cursor: pointer;
  transition: transform 0.3s linear;
}
.cmp-accordion .cmp-accordion__button .cmp-accordion__icon .background {
  fill: #005ad2;
}
.cmp-accordion .cmp-accordion__button .cmp-accordion__icon .foreground {
  stroke: #ffffff;
}
article .cmp-accordion .cmp-accordion__button .cmp-accordion__icon .background {
  fill: #005ad2;
  fill: var(--nni-hcp--accordion--icon-color--background);
}
article .cmp-accordion .cmp-accordion__button .cmp-accordion__icon .foreground {
  stroke: #ffffff;
  stroke: var(--nni-hcp--accordion--icon-color--foreground);
}
.cmp-accordion .cmp-accordion__button.cmp-accordion__button--expanded .cmp-accordion__icon {
  transform: rotate(180deg);
}
.cmp-accordion .cmp-accordion__panel {
  margin: 32px 0;
}
.cmp-accordion .cmp-accordion__panel--hidden {
  display: none;
}
.cmp-accordion .cmp-accordion__panel--expanded {
  display: block;
}

.nni-hcp--text--light .cmp-accordion .cmp-accordion__button {
  outline-color: #ffffff;
  border-top: 1px solid;
  border-top-color: #ffffff;
}
.nni-hcp--text--light .cmp-accordion .cmp-accordion__button .cmp-accordion__title {
  color: #ffffff;
}
.nni-hcp--text--light .cmp-accordion .cmp-accordion__button .cmp-accordion__icon .background {
  fill: #ffffff;
}
.nni-hcp--text--light .cmp-accordion .cmp-accordion__button .cmp-accordion__icon .foreground {
  stroke: #005ad2;
}
article .nni-hcp--text--light .cmp-accordion .cmp-accordion__button {
  outline-color: #ffffff;
  outline-color: var(--nni-hcp--accordion--outline-color--light);
  border-top-color: #ffffff;
  border-top-color: var(--nni-hcp--accordion--border-color--light);
}
article .nni-hcp--text--light .cmp-accordion .cmp-accordion__button .cmp-accordion__title {
  color: #ffffff;
  color: var(--nni-hcp--accordion--title-color--light);
}
article .nni-hcp--text--light .cmp-accordion .cmp-accordion__button .cmp-accordion__icon .background {
  fill: #ffffff;
  fill: var(--nni-hcp--accordion--icon-color--background-light);
}
article .nni-hcp--text--light .cmp-accordion .cmp-accordion__button .cmp-accordion__icon .foreground {
  stroke: #005ad2;
  stroke: var(--nni-hcp--accordion--icon-color--foreground-light);
}