@font-face {
  font-family: 'BTCosmo-Bold';
  src: url("../../fonts/BTCosmo-Bold.woff");
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  line-height: 24px; }

@font-face {
  font-family: 'PeridotPE-Bold';
  src: url("../../fonts/PeridotPE-Bold.woff");
  font-weight: 800;
  font-style: normal;
  font-size: 16px;
  line-height: 20px; }

@font-face {
  font-family: 'PeridotPE-Regular';
  src: url("../../fonts/PeridotPE-Regular.woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PeridotPE-SemiBold';
  src: url("../../fonts/PeridotPE-SemiBold.woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PeridotPE-ExtraBlack';
  src: url("../../fonts/PeridotPE-ExtraBold.woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PFHandbookPro-Medium';
  src: url("../../fonts/PFHandbookPro-Medium.woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PFHandbookPro-Bold';
  src: url("../../fonts/PFHandbookPro-Bold.woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PFDinTextPro-Medium';
  src: url("../../fonts/PFDinTextPro-Medium.ttf");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PFDinTextPro-Bold';
  src: url("../../fonts/PFDinTextPro-Bold.ttf");
  font-weight: normal;
  font-style: normal; }

.spaExitIcon {
  background-image: url("../../img/icons/ExitArrowIcon.svg");
  width: 24px;
  height: 24px; }

.spaFileIcon {
  background-image: url("../../img/icons/file.svg");
  width: 24px;
  height: 24px; }

.spaDownloadIcon {
  background-image: url("../../img/icons/download.svg");
  width: 24px;
  height: 24px; }

.spaCheckmark {
  background-image: url("../../img/icons/CheckmarkCircle.svg");
  width: 24px;
  height: 24px; }

.spaChevron {
  background-image: url("../../img/icons/arrowDown.svg");
  width: 24px;
  height: 24px; }

.spaOfferCard--active {
  background-color: #f4f8fb !important;
  border-color: #09c !important; }

.spaOfferCard--inactive {
  background-color: #fefcf7 !important;
  border-color: #eabf68 !important; }

.spaTooltipIcon {
  background-image: url("../../img/icons/tooltipicon.svg");
  width: 24px;
  height: 24px; }

.spaText--strong {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  font-weight: 600 !important;
  color: #212121 !important; }

.spaText--primary {
  color: #212121 !important; }

.spaText--disabled {
  color: #5f5f5f !important; }

.spaAssistiveText {
  color: #666666 !important; }

.spaCalendar .flatpickr-calendar {
  background: unset !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-weekday {
    color: #767676 !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-current-month span.cur-month {
    pointer-events: none;
    color: unset !important;
    background: unset !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-current-month input.cur-year[disabled] {
    pointer-events: none !important;
    color: unset !important;
    background: #fff !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-day {
    color: unset !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-day.selected {
    background-color: #e20074 !important;
    border-color: #e20074 !important;
    color: #fff !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-day.today {
    background-color: unset;
    border-color: #e20074 !important;
    border: unset; }
  .spaCalendar .flatpickr-calendar .flatpickr-day:hover {
    background-color: #e20074 !important;
    border-color: #e20074 !important;
    color: #fff !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
    color: #767676 !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #fff !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-day.prevMonthDay {
    color: #fff !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
  .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    fill: #212121 !important; }
  .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg path,
  .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg path {
    fill: #212121 !important; }

.spaHeaderContainer--primary {
  color: #212121;
  background-color: #fff;
  border-color: #e20074 !important; }

.spaBoxContainer {
  background: #ffffff !important;
  border: none !important; }

.spaCardImageContainer {
  color: #212121 !important;
  background-color: #e6e6e6 !important; }

.spaBodyContainer--primary {
  color: #e1e1e1 !important;
  background-color: #0d0d0d !important;
  text-decoration: none !important; }

.spaBodyContainer a.withTextDecoration {
  color: #fff !important;
  text-decoration: underline !important; }

.spaField input {
  background-color: #fff !important;
  border-color: #212121 !important;
  color: #212121 !important; }

.spaField label {
  color: #212121 !important; }

.spaField.disabled input {
  background-color: #fff !important;
  border-color: #5f5f5f !important;
  color: #5f5f5f !important; }

.spaField.disabled label {
  color: #5f5f5f !important; }

.spaDropdownContainer {
  background-color: #fff !important;
  border-color: #212121 !important; }
  .spaDropdownContainer a {
    color: #212121 !important; }
    .spaDropdownContainer a.active {
      color: #fff !important; }
    .spaDropdownContainer a:hover {
      color: #fff !important; }

.spaButton {
  text-decoration: none !important;
  cursor: pointer !important; }
  .spaButton--primary {
    background: #0e8103 !important;
    color: #fff !important; }
  .spaButton.disabled {
    background-color: #5f5f5f !important;
    color: #fff !important; }

.spaCheckbox label:before {
  background-color: #fff !important;
  border-color: #212121 !important; }

.spaRadioField {
  background: #fff; }

.spaMapButton {
  color: unset !important;
  background-color: unset !important;
  border-color: #212121 !important;
  text-decoration: none !important; }

.spaIconColor svg path {
  fill: #212121; }

.spaCard {
  color: #212121 !important;
  background-color: #ffffff !important; }

.spaModalTitle {
  background-color: #ffffff !important; }

.spaSecondaryButton {
  background-color: #ffffff !important;
  text-decoration: none !important; }

.spaDivider {
  border-color: #e6e6e6 !important; }

.spaInfoField {
  border-color: #2775b2 !important;
  background-color: #f4f8fb !important; }

.spaLink {
  text-decoration: unset !important; }

.dark-mode.spaBodyContainer--primary {
  color: #e1e1e1 !important;
  background-color: #0d0d0d !important;
  text-decoration: none !important; }

.dark-mode.spaBodyContainer a.withTextDecoration {
  text-decoration: underline !important;
  color: #fff !important; }

.arrow.spaArrow:after {
  background-color: #ffffff !important; }

.dark-mode .spaLoaderShell {
  background-color: #323232 !important; }

.dark-mode .spaChevron {
  background-image: url("../../img/icons/arrowDownWhite.svg");
  width: 24px;
  height: 24px; }

.dark-mode .digitalOnboardingDetailsFormInputTitle.readOnly {
  color: #afafaf !important; }

.dark-mode .digitalOnboardingDetailsFormInput.readOnly {
  background-color: #262626 !important;
  border-color: #848484 !important;
  color: #848484 !important; }

.dark-mode .spaBodyContainer--primary {
  color: #e1e1e1 !important;
  background-color: #0d0d0d !important;
  text-decoration: none !important; }

.dark-mode .spaBodyContainer a {
  text-decoration: none !important; }

.dark-mode .spaBoxContainer {
  color: white !important;
  background-color: #262626 !important;
  box-shadow: unset !important; }

.dark-mode .spaInfoField {
  border-color: #0099cc !important;
  background-color: #111e27 !important; }

.dark-mode .spaMapButton {
  border-color: #e1e1e1 !important;
  text-decoration: none !important; }

.dark-mode .spaIconColor svg path {
  fill: #e1e1e1; }

.dark-mode .spaCardImageContainer {
  color: #e1e1e1 !important;
  background-color: #323232 !important; }

.dark-mode .spaCheckmark {
  background-image: url("../../img/icons/CheckmarkCircle.svg");
  width: 24px;
  height: 24px; }

.dark-mode .spaExitIcon {
  background-image: url("../../img/icons/ExitArrowIconDarkMode.svg");
  width: 24px;
  height: 24px; }

.dark-mode .spaDownloadIcon {
  background-image: url("../../img/icons/downloadWhite.svg");
  width: 24px;
  height: 24px; }

.dark-mode .spaTooltipIcon {
  background-image: url("../../img/icons/tooltipIconDarkmode.svg");
  width: 24px;
  height: 24px; }

.dark-mode .spaFileIcon {
  background-image: url("../../img/icons/fileWhite.svg");
  width: 24px;
  height: 24px; }

.dark-mode .spaText--strong {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  color: #e1e1e1 !important; }

.dark-mode .spaText--primary {
  color: #e1e1e1 !important; }

.dark-mode .spaText--disabled {
  color: #afafaf !important; }

.dark-mode .spaRadio label:before {
  border-color: #e1e1e1 !important; }

.dark-mode .spaRadioField {
  background: #262626 !important; }
  .dark-mode .spaRadioField label:before {
    border-color: #e1e1e1 !important; }

.dark-mode .spaHeaderContainer--primary {
  color: #e1e1e1;
  background-color: #262626;
  border-color: #f61488 !important; }

.dark-mode .spaField input {
  background-color: #262626 !important;
  border-color: #e1e1e1 !important;
  color: #e1e1e1 !important; }

.dark-mode .spaField label {
  color: #e1e1e1 !important; }

.dark-mode .spaField.disabled input {
  background-color: #262626 !important;
  border-color: #848484 !important;
  color: #848484 !important; }

.dark-mode .spaField.disabled label {
  color: #848484 !important; }

.dark-mode .spaDropdownContainer {
  background-color: #262626 !important;
  border-color: #e1e1e1 !important; }
  .dark-mode .spaDropdownContainer a {
    color: #e1e1e1 !important; }
    .dark-mode .spaDropdownContainer a.active, .dark-mode .spaDropdownContainer a:hover {
      color: #262626 !important; }

.dark-mode .spaDivider {
  border-color: #404040 !important; }

.dark-mode .spaButton {
  text-decoration: none !important;
  cursor: pointer !important;
  background: #0ea600 !important;
  color: #0d0d0d !important; }
  .dark-mode .spaButton--disabled {
    background-color: #848484 !important;
    color: #0d0d0d !important; }
  .dark-mode .spaButton--primary {
    background: #0ea600 !important;
    color: #0d0d0d !important; }
  .dark-mode .spaButton.primaryButton {
    background: #0ea600 !important;
    color: #0d0d0d !important; }
  .dark-mode .spaButton--secondary {
    border-color: #e1e1e1 !important;
    color: #e1e1e1 !important;
    background-color: unset !important; }
  .dark-mode .spaButton--text-color {
    color: #0ea600; }
    .dark-mode .spaButton--text-color svg {
      fill: #0ea600 !important; }
      .dark-mode .spaButton--text-color svg path {
        fill: #0ea600 !important; }

.dark-mode .spaModal {
  color: #e1e1e1 !important;
  background-color: #262626 !important; }

.dark-mode .spaSecondaryButton {
  background-color: unset !important;
  text-decoration: none !important; }

.dark-mode .spaSecondaryButtonWithBorder {
  background-color: unset !important;
  border-color: #e1e1e1 !important;
  color: unset !important;
  text-decoration: none !important; }

.dark-mode .spaCheckbox label:before {
  background-color: #262626 !important;
  border-color: #e1e1e1 !important; }

.dark-mode .spaCalendar .flatpickr-calendar {
  background: #262626 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-weekday {
    color: #e1e1e1 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-current-month span.cur-month {
    pointer-events: none;
    color: #e1e1e1 !important;
    background: #262626 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-current-month input.cur-year[disabled] {
    pointer-events: none !important;
    color: #e1e1e1 !important;
    background: #262626 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-day {
    color: #fff !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-day.selected {
    background-color: #f61488 !important;
    border-color: #f61488 !important;
    color: #fff; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-day.today {
    background-color: unset;
    border-color: #f61488 !important;
    border: unset; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-day:hover {
    background-color: #f61488 !important;
    border-color: #f61488 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
    color: #767676 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-day.prevMonthDay,
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #262626 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
    fill: #e1e1e1 !important; }
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg path,
  .dark-mode .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg path {
    fill: #e1e1e1 !important; }

.dark-mode .spaSecondaryBody {
  background-color: #404040 !important;
  color: #e1e1e1 !important; }
  .dark-mode .spaSecondaryBody a {
    text-decoration: none !important; }

.dark-mode .spaCard {
  background-color: #262626 !important;
  color: #e1e1e1 !important;
  border-color: #323232 !important; }

.dark-mode .spaOfferCard--active {
  background-color: #111e27 !important;
  color: #e1e1e1 !important;
  border-color: #2775b2 !important; }

.dark-mode .spaOfferCard--inactive {
  color: #e1e1e1 !important;
  background-color: #271f11 !important;
  border-color: #eabf68 !important; }

.dark-mode .spaInfoField {
  border-color: #2775b2 !important;
  background-color: #111e27 !important; }

.dark-mode .spaAssistiveText {
  color: #afafaf !important; }

.dark-mode .arrow.spaArrow:after {
  background-color: #262626 !important;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.6); }

.button {
  outline: none !important; }
  .button.disabled {
    pointer-events: none !important; }
  .button:hover {
    cursor: pointer; }

.primaryButton {
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  color: #ffffff !important;
  background: #0ea600;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .primaryButton:hover {
    background-color: #0ea600;
    opacity: 0.85; }
  .primaryButton:visited {
    color: #0ea600;
    border-color: #0ea600; }
  .primaryButton:focus {
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
  .primaryButton.disabled {
    background-color: #848484;
    color: #ffffff;
    cursor: not-allowed; }
  .primaryButton.primaryButtonFullWidth {
    width: 100%; }
  .primaryButton.primaryButtonNormal {
    padding: 12px 16px;
    box-sizing: border-box;
    min-height: 40px; }
    @media only screen and (max-width: 767px) {
      .primaryButton.primaryButtonNormal {
        min-width: 136px; } }
    .primaryButton.primaryButtonNormalWithIcon {
      padding: 8px 16px; }
  .primaryButton.withoutMinWidth {
    min-width: 0 !important; }
  .primaryButton.primaryButtonSmall {
    padding: 12px 16px;
    min-height: 32px; }
    .primaryButton.primaryButtonSmall.minWidth {
      min-width: 120px; }
    .primaryButton.primaryButtonSmall em {
      font-style: normal;
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px;
      display: inline-block; }
  .primaryButtonIcon {
    height: 24px;
    margin-left: 8px; }

.cancelButton,
.confirmationModalButton,
.cancelConfirmationButton,
.cancelConsent,
.cancelFamily,
.cancelGiftSubmit,
.cancelError,
.cancelPaymentPrompt,
.cancelCosmoteTvGoSubmit,
.cancelGift,
.cancelTrialRemove,
.cancelContactPrompt,
.cancelAddressPrompt,
.cancelAcceptPrompt,
.cancelButtonSimple,
.cancelRenewPrompt,
.cancelGenericStartoverElement,
.cancelGenericResendElement {
  color: #212121;
  background-color: #ffffff;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #212121;
  padding: 12px;
  border-radius: 16px;
  min-width: 136px; }
  .cancelButton:hover,
  .confirmationModalButton:hover,
  .cancelConfirmationButton:hover,
  .cancelConsent:hover,
  .cancelFamily:hover,
  .cancelGiftSubmit:hover,
  .cancelError:hover,
  .cancelPaymentPrompt:hover,
  .cancelCosmoteTvGoSubmit:hover,
  .cancelGift:hover,
  .cancelTrialRemove:hover,
  .cancelContactPrompt:hover,
  .cancelAddressPrompt:hover,
  .cancelAcceptPrompt:hover,
  .cancelButtonSimple:hover,
  .cancelRenewPrompt:hover,
  .cancelGenericStartoverElement:hover,
  .cancelGenericResendElement:hover {
    opacity: 0.8; }
  .cancelButton:visited,
  .confirmationModalButton:visited,
  .cancelConfirmationButton:visited,
  .cancelConsent:visited,
  .cancelFamily:visited,
  .cancelGiftSubmit:visited,
  .cancelError:visited,
  .cancelPaymentPrompt:visited,
  .cancelCosmoteTvGoSubmit:visited,
  .cancelGift:visited,
  .cancelTrialRemove:visited,
  .cancelContactPrompt:visited,
  .cancelAddressPrompt:visited,
  .cancelAcceptPrompt:visited,
  .cancelButtonSimple:visited,
  .cancelRenewPrompt:visited,
  .cancelGenericStartoverElement:visited,
  .cancelGenericResendElement:visited {
    opacity: 0.9; }
  .cancelButton:focus,
  .confirmationModalButton:focus,
  .cancelConfirmationButton:focus,
  .cancelConsent:focus,
  .cancelFamily:focus,
  .cancelGiftSubmit:focus,
  .cancelError:focus,
  .cancelPaymentPrompt:focus,
  .cancelCosmoteTvGoSubmit:focus,
  .cancelGift:focus,
  .cancelTrialRemove:focus,
  .cancelContactPrompt:focus,
  .cancelAddressPrompt:focus,
  .cancelAcceptPrompt:focus,
  .cancelButtonSimple:focus,
  .cancelRenewPrompt:focus,
  .cancelGenericStartoverElement:focus,
  .cancelGenericResendElement:focus {
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }

.inlineButtons {
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 767px) {
    .inlineButtons {
      flex-flow: column; } }
  .inlineButtons a {
    flex: 1 1 50%; }
    @media only screen and (max-width: 767px) {
      .inlineButtons a {
        width: 100%; } }
    .inlineButtons a:first-child {
      margin-right: 16px; }
      @media only screen and (max-width: 767px) {
        .inlineButtons a:first-child {
          margin-right: 0;
          margin-bottom: 8px; } }
  .inlineButtons.withFullButtons a {
    min-width: 0 !important;
    width: calc(50% - 8px); }
  @media only screen and (max-width: 767px) {
    .inlineButtons.noWrap {
      white-space: normal !important; } }
  @media only screen and (max-width: 767px) {
    .inlineButtons.noWrap a {
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    .inlineButtons.noWrap a:first-child {
      margin-right: 0;
      margin-bottom: 8px; } }

@media only screen and (max-width: 480px) {
  .inlineButtonsBills {
    display: flex;
    flex-direction: column;
    align-items: flex-start; } }

.inlineButtonsBills a:first-child {
  margin-right: 12px; }
  @media only screen and (max-width: 480px) {
    .inlineButtonsBills a:first-child {
      margin-right: 0;
      margin-bottom: 12px; } }

.rightInlineButtons {
  margin-left: auto;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 767px) {
    .rightInlineButtons {
      flex-direction: column;
      width: 100%; } }
  .rightInlineButtons .button {
    margin-right: 16px; }
    @media only screen and (max-width: 767px) {
      .rightInlineButtons .button {
        margin-right: 0;
        margin-top: 12px;
        width: 100%; } }
    .rightInlineButtons .button:last-child {
      margin-right: 0; }

.gradientButton {
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px;
  text-align: center;
  font-family: 'PeridotPE-Bold';
  font-size: 12px;
  line-height: 16px;
  color: #212121 !important; }

.greyButton {
  border-radius: 12px;
  min-width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px;
  text-align: center;
  font-family: 'PeridotPE-Bold';
  font-size: 12px;
  line-height: 16px;
  color: #212121 !important; }

.greyButtonNormal {
  height: 40px;
  min-width: 160px;
  background-color: transparent;
  border: 1px solid #212121;
  color: #212121;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .greyButtonNormal.disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.blueButton {
  height: 40px;
  min-width: 160px;
  border: 1px solid #212121;
  background: transparent;
  color: #0ea600;
  border-color: #0ea600;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .blueButton:hover {
    color: #0ea600;
    border-color: #0ea600;
    opacity: 0.85; }
  .blueButton:focus {
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
  .blueButton.disabled {
    color: #848484;
    border-color: #848484;
    cursor: not-allowed; }
  .blueButton.forIconImage {
    position: fixed;
    padding: 4px;
    min-width: 32px;
    height: auto;
    bottom: 0;
    margin-bottom: 24px; }
    .blueButton.forIconImage.hidden {
      display: none; }
  .blueButton.forIconImageMobile {
    position: fixed;
    padding: 4px;
    min-width: 32px;
    height: auto;
    bottom: 0;
    margin-bottom: 24px;
    display: none;
    z-index: 1;
    right: 0;
    margin-right: 24px; }
    .blueButton.forIconImageMobile.hidden {
      display: none; }
    @media only screen and (max-width: 1024px) {
      .blueButton.forIconImageMobile {
        display: block; } }
  .blueButton.minWidth-112 {
    min-width: 112px; }
  .blueButton.withoutMinWidth {
    min-width: 0 !important; }
  .blueButton.largeAccounts:hover, .blueButton.largeAccounts:focus {
    background-color: #ffffff;
    color: #212121; }

.blueButtonSmall {
  height: 32px;
  min-width: 110px;
  background-color: transparent;
  border: 1px solid #0ea600;
  color: #0ea600;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .blueButtonSmall.disabled {
    color: #848484;
    border-color: #848484;
    pointer-events: none;
    cursor: not-allowed; }

.whiteButton {
  height: 40px;
  min-width: 160px;
  background-color: #ffffff;
  border: 1px solid #212121;
  color: #212121;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .whiteButton.disabled {
    color: #848484;
    border-color: #848484;
    pointer-events: none;
    cursor: not-allowed; }
  .whiteButton-offers {
    width: 100%;
    margin-top: 6px;
    min-width: initial; }

.redButton {
  height: 40px;
  min-width: 160px;
  background-color: #ffffff;
  border: 1px solid #b84c1e;
  color: #b84c1e;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .redButton.disabled {
    color: #848484;
    border-color: #848484;
    pointer-events: none;
    cursor: not-allowed; }

.buttons-transparentOutlinedButton {
  height: 40px;
  min-width: 160px;
  background-color: transparent;
  border: 1px solid #212121;
  color: #212121;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .buttons-transparentOutlinedButton.disabled {
    color: #848484;
    border-color: #848484;
    pointer-events: none;
    cursor: not-allowed; }

.iconButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0ea600;
  border: 1px solid #0ea600;
  margin-top: 4px;
  border-radius: 16px;
  height: 40px;
  min-width: 250px;
  background-color: #ffffff;
  padding: 12px 16px;
  text-align: center;
  outline: none;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }
  .iconButton.iconButtonGray .icon-tick-selected-button {
    display: none; }
  .iconButton.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed; }
  .iconButtonCompact {
    min-width: 134px; }

.transparentButton {
  height: 40px;
  background-color: transparent;
  border: 1px solid #212121;
  color: #212121 !important;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .transparentButton.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed; }

.secondaryButton {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  color: #0ea600;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 6px;
  padding: 12px 16px;
  background-color: #ffffff;
  border: 1px solid #0ea600;
  border-radius: 16px; }
  .secondaryButton.secondaryButtonNormal {
    color: #212121;
    border: 1px solid #212121;
    padding: 12px;
    min-width: 160px;
    box-sizing: border-box;
    min-height: 32px; }
    @media only screen and (max-width: 767px) {
      .secondaryButton.secondaryButtonNormal {
        min-width: 136px; } }
    .secondaryButton.secondaryButtonNormal:hover {
      border-color: #0ea600;
      color: #0ea600;
      opacity: 0.85; }
    .secondaryButton.secondaryButtonNormal:focus {
      -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
    .secondaryButton.secondaryButtonNormal:visited {
      border-color: #0ea600;
      color: #0ea600; }
    .secondaryButton.secondaryButtonNormal.largeAccounts {
      margin: 0; }
  .secondaryButton:hover {
    color: #0ea600;
    border-color: #0ea600;
    opacity: 0.85; }
  .secondaryButton:focus {
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
  .secondaryButton:visited {
    border-color: #0ea600;
    color: #0ea600; }
  .secondaryButtondisabled {
    color: #848484;
    border-color: #848484; }

.buttons-inline {
  display: flex;
  flex: 1;
  gap: 24px; }
  .buttons-inline-element {
    min-width: initial;
    width: 100%; }
    .buttons-inline-element.primaryButton.primaryButtonNormal {
      min-width: initial; }

.md-radio-simple {
  margin: 8px 0; }
  .md-radio-simple.md-radio-inline {
    display: inline-block; }
  .md-radio-simple.disabled {
    opacity: 0.6;
    pointer-events: none !important;
    cursor: default; }
  .md-radio-simple input[type='radio'] {
    display: none; }
    .md-radio-simple input[type='radio']:checked + label:before {
      border-color: #212121; }
    .md-radio-simple input[type='radio']:checked + label:after {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1);
      background-color: #00a5e3; }
  .md-radio-simple label {
    display: inline-block;
    position: relative;
    padding: 0 34px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    color: ""; }
    .md-radio-simple label.flexColumn {
      padding-right: 0; }
      .md-radio-simple label.flexColumn:before {
        top: 0 !important; }
      .md-radio-simple label.flexColumn:after {
        top: 5px !important; }
    .md-radio-simple label span {
      display: block;
      width: 100%;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      color: ""; }
    .md-radio-simple label:before, .md-radio-simple label:after {
      position: absolute;
      content: '';
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      transition-property: transform, border-color;
      box-sizing: border-box; }
    .md-radio-simple label:before {
      left: 0;
      top: 0;
      width: 24px;
      height: 24px;
      border: 1px solid #212121; }
    .md-radio-simple label:after {
      top: 4px;
      left: 4px;
      width: 16px;
      height: 16px;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      transform: scale(0);
      background: #212121; }

.md-radio {
  margin: 8px 0; }
  .md-radio.md-radio-inline {
    display: inline-block; }
  .md-radio.disabled {
    opacity: 0.6;
    pointer-events: none !important;
    cursor: default; }
  .md-radio input[type='radio'] {
    display: none; }
    .md-radio input[type='radio']:checked + label:before {
      border-color: #212121; }
    .md-radio input[type='radio']:checked + label:after {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      transform: scale(1);
      background-color: #00a5e3; }
  .md-radio label {
    display: inline-block;
    position: relative;
    padding: 0 34px;
    margin-bottom: 0;
    cursor: pointer;
    vertical-align: bottom;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    color: ""; }
    .md-radio label.flexColumn {
      padding-right: 0; }
      .md-radio label.flexColumn:before {
        top: 0 !important; }
      .md-radio label.flexColumn:after {
        top: 5px !important; }
    .md-radio label span {
      display: block;
      width: 100%;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      color: ""; }
    .md-radio label:before, .md-radio label:after {
      position: absolute;
      content: '';
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      transition-property: transform, border-color;
      box-sizing: border-box; }
    .md-radio label:before {
      left: 0;
      top: 0;
      width: 24px;
      height: 24px;
      border: 1px solid #212121; }
    .md-radio label:after {
      top: 4px;
      left: 4px;
      width: 16px;
      height: 16px;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      transform: scale(0);
      background: #212121; }

.multiRadioContainer {
  display: flex;
  flex-direction: column;
  padding: 0 8px; }
  .multiRadioContainer .multiRadioContainerLabel {
    display: block;
    margin-bottom: 8px;
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px; }
  .multiRadioContainer .multiRadioContent {
    display: flex;
    flex-direction: column;
    padding: 0 16px; }
    .multiRadioContainer .multiRadioContent.bordered .md-radio {
      padding-bottom: 16px;
      margin-bottom: 16px;
      border-bottom: 2px solid rgba(33, 33, 33, 0.1);
      margin-top: 0; }
      .multiRadioContainer .multiRadioContent.bordered .md-radio label {
        width: 100%; }
        .multiRadioContainer .multiRadioContent.bordered .md-radio label span {
          font-size: 14px;
          line-height: 16px;
          display: block;
          margin-top: 4px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow-x: hidden; }
      .multiRadioContainer .multiRadioContent.bordered .md-radio:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border: none; }
    .multiRadioContainer .multiRadioContent .contentToToggle {
      padding: 0 32px; }
      @media only screen and (max-width: 480px) {
        .multiRadioContainer .multiRadioContent .contentToToggle {
          padding-right: 0; } }

.container-checkbox {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  position: relative;
  padding: 0 30px;
  vertical-align: bottom;
  margin: 8px 0 0 0;
  font-family: 'PeridotPE-Bold';
  font-size: 16px;
  line-height: 16px; }
  .container-checkbox img {
    width: 24px;
    height: 24px; }

.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

.container-checkbox input:checked ~ .checkmark:after {
  display: block; }

.checkmark {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #212121;
  top: -3px;
  left: 0; }

.checkmark:after {
  content: '';
  position: absolute;
  display: none;
  border-radius: 50%;
  transition: all 0.2s ease;
  transition-property: transform, border-color;
  box-sizing: border-box;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: #212121; }

/* On mouse-over, add a grey background color */
/* When the radio button is checked, add a blue background */
.radio-label {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  position: relative;
  padding: 0 30px;
  vertical-align: bottom;
  margin: 8px 0 0 0;
  font-family: 'PeridotPE-Bold';
  font-size: 16px;
  line-height: 16px; }
  .radio-label img {
    width: 24px;
    height: 24px; }

.radio-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

.radio-label input:checked ~ .checkmark:after {
  display: block; }

.reverseradio-labelRadioContainer {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  position: relative;
  padding: 0 30px;
  vertical-align: bottom;
  margin: 8px 0 0 0;
  margin: 0;
  padding-left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .reverseradio-labelRadioContainer img {
    width: 24px;
    height: 24px; }

.reverseradio-labelRadioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

.reverseradio-checkmark {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #212121;
  top: -3px;
  right: 0; }

.reverseradio-checkmark:after {
  content: '';
  position: absolute;
  display: none;
  border-radius: 50%;
  transition: all 0.2s ease;
  transition-property: transform, border-color;
  box-sizing: border-box;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: #212121; }

.reverseradio-labelRadioContainer
input:checked
~ .reverseradio-checkmark:after {
  display: block; }

.reverseradio-checkmarkCenter {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #212121;
  right: 0; }

.reverseradio-checkmarkCenter:after {
  content: '';
  position: absolute;
  display: none;
  border-radius: 50%;
  transition: all 0.2s ease;
  transition-property: transform, border-color;
  box-sizing: border-box;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: #212121; }

.reverseradio-labelRadioContainer
input:checked
~ .reverseradio-checkmarkCenter:after {
  display: block; }

.md-checkbox {
  position: relative;
  margin: 0;
  text-align: left; }
  .md-checkbox.termsCheckbox {
    display: flex; }
    .md-checkbox.termsCheckbox label:before {
      top: 8px; }
    .md-checkbox.termsCheckbox input[type='checkbox'] {
      margin: 0; }
      .md-checkbox.termsCheckbox input[type='checkbox']:checked + label:after {
        top: 13.6px; }
    .md-checkbox.termsCheckbox .visitLink.blue {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      margin: 8px 0;
      text-decoration: underline; }
  .md-checkbox label {
    cursor: pointer; }
    .md-checkbox label.regularText {
      width: 100%;
      margin-left: 6px; }
    .md-checkbox label:before, .md-checkbox label:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box; }
    .md-checkbox label:before {
      width: 24px;
      height: 24px;
      background: transparent;
      border: 1px solid #212121;
      border-radius: 4px;
      cursor: pointer;
      -webkit-transition: background 0.2s ease;
      -moz-transition: background 0.2s ease;
      transition: background 0.2s ease; }
    .md-checkbox label a {
      padding: 4px 0 !important;
      margin: 0 !important; }
    .md-checkbox label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .md-checkbox label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold';
        font-size: 14px;
        line-height: 16px; }
      .md-checkbox label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px; }
    .md-checkbox label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      padding-left: 30px; }
      .md-checkbox label.withIndication .charge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        height: 22px;
        background-color: #f2f2f3;
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        padding: 0 8px;
        color: #00a5e3;
        border-radius: 12px; }
        .md-checkbox label.withIndication .charge.chargeSend {
          color: #004b87; }
  .md-checkbox input.disabled {
    cursor: not-allowed;
    pointer-events: none; }
  .md-checkbox input[type='checkbox'] {
    outline: 0;
    visibility: hidden;
    width: 24px;
    margin: 0;
    margin-right: 10px; }
    .md-checkbox input[type='checkbox']:checked + label:before {
      background: transparent; }
    .md-checkbox input[type='checkbox']:checked + label:after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 5.6px;
      left: 4px;
      width: 16px;
      height: 8px;
      border: 2px solid #00a5e3;
      border-top-style: none;
      border-right-style: none; }
    .md-checkbox input[type='checkbox']:disabled + label:before {
      border-color: #f2f2f3; }
    .md-checkbox input[type='checkbox']:disabled:checked + label:before {
      background: #f2f2f3; }
  .md-checkbox a {
    padding: 0 !important; }
  .md-checkbox-labelIcon {
    height: 16px;
    margin-left: 4px;
    margin-bottom: -2px; }

.md-checkbox-simple {
  position: relative;
  margin: 0;
  text-align: left;
  display: flex; }
  .md-checkbox-simple.termsCheckbox {
    display: flex; }
    .md-checkbox-simple.termsCheckbox label:before {
      top: 8px; }
    .md-checkbox-simple.termsCheckbox input[type='checkbox'] {
      margin: 0; }
      .md-checkbox-simple.termsCheckbox input[type='checkbox']:checked + label:after {
        top: 13.6px; }
    .md-checkbox-simple.termsCheckbox .visitLink.blue {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      margin: 8px 0;
      text-decoration: underline; }
  .md-checkbox-simple label {
    cursor: pointer; }
    .md-checkbox-simple label.regularText {
      width: 100%;
      margin-left: 6px; }
    .md-checkbox-simple label:before, .md-checkbox-simple label:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box; }
    .md-checkbox-simple label:before {
      width: 24px;
      height: 24px;
      background: transparent;
      border: 1px solid #212121;
      border-radius: 4px;
      cursor: pointer;
      -webkit-transition: background 0.2s ease;
      -moz-transition: background 0.2s ease;
      transition: background 0.2s ease; }
    .md-checkbox-simple label a {
      padding: 4px 0 !important;
      margin: 0 !important; }
    .md-checkbox-simple label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .md-checkbox-simple label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold';
        font-size: 14px;
        line-height: 16px; }
      .md-checkbox-simple label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px; }
    .md-checkbox-simple label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      padding-left: 30px; }
      .md-checkbox-simple label.withIndication .charge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        height: 22px;
        background-color: #f2f2f3;
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        padding: 0 8px;
        color: #00a5e3;
        border-radius: 12px; }
        .md-checkbox-simple label.withIndication .charge.chargeSend {
          color: #004b87; }
  .md-checkbox-simple input.disabled {
    cursor: not-allowed;
    pointer-events: none; }
  .md-checkbox-simple input[type='checkbox'] {
    outline: 0;
    visibility: hidden;
    width: 24px;
    margin: 0;
    margin-right: 10px; }
    .md-checkbox-simple input[type='checkbox']:checked + label:before {
      background: transparent; }
    .md-checkbox-simple input[type='checkbox']:checked + label:after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 5.6px;
      left: 4px;
      width: 16px;
      height: 8px;
      border: 2px solid #00a5e3;
      border-top-style: none;
      border-right-style: none; }
    .md-checkbox-simple input[type='checkbox']:disabled + label:before {
      border-color: #f2f2f3; }
    .md-checkbox-simple input[type='checkbox']:disabled:checked + label:before {
      background: #f2f2f3; }
  .md-checkbox-simple a {
    padding: 0 !important; }

.checkbox-forList {
  position: relative;
  margin: 0;
  text-align: left;
  display: flex; }
  .checkbox-forList.termsCheckbox {
    display: flex; }
    .checkbox-forList.termsCheckbox label:before {
      top: 8px; }
    .checkbox-forList.termsCheckbox input[type='checkbox'] {
      margin: 0; }
      .checkbox-forList.termsCheckbox input[type='checkbox']:checked + label:after {
        top: 13.6px; }
    .checkbox-forList.termsCheckbox .visitLink.blue {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      margin: 8px 0;
      text-decoration: underline; }
  .checkbox-forList label {
    cursor: pointer; }
    .checkbox-forList label.regularText {
      width: 100%;
      margin-left: 6px; }
    .checkbox-forList label:before, .checkbox-forList label:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box; }
    .checkbox-forList label:before {
      width: 24px;
      height: 24px;
      background: transparent;
      border: 1px solid #212121;
      border-radius: 4px;
      cursor: pointer;
      -webkit-transition: background 0.2s ease;
      -moz-transition: background 0.2s ease;
      transition: background 0.2s ease; }
    .checkbox-forList label a {
      padding: 4px 0 !important;
      margin: 0 !important; }
    .checkbox-forList label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .checkbox-forList label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold';
        font-size: 14px;
        line-height: 16px; }
      .checkbox-forList label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px; }
    .checkbox-forList label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      padding-left: 30px; }
      .checkbox-forList label.withIndication .charge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        height: 22px;
        background-color: #f2f2f3;
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        padding: 0 8px;
        color: #00a5e3;
        border-radius: 12px; }
        .checkbox-forList label.withIndication .charge.chargeSend {
          color: #004b87; }
  .checkbox-forList input.disabled {
    cursor: not-allowed;
    pointer-events: none; }
  .checkbox-forList input[type='checkbox'] {
    outline: 0;
    visibility: hidden;
    width: 24px;
    margin: 0;
    margin-right: 10px; }
    .checkbox-forList input[type='checkbox']:checked + label:before {
      background: transparent; }
    .checkbox-forList input[type='checkbox']:checked + label:after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 5.6px;
      left: 4px;
      width: 16px;
      height: 8px;
      border: 2px solid #00a5e3;
      border-top-style: none;
      border-right-style: none; }
    .checkbox-forList input[type='checkbox']:disabled + label:before {
      border-color: #f2f2f3; }
    .checkbox-forList input[type='checkbox']:disabled:checked + label:before {
      background: #f2f2f3; }
  .checkbox-forList a {
    padding: 0 !important; }

.checkbox-forListDisabled {
  position: relative;
  margin: 0;
  text-align: left;
  pointer-events: none;
  opacity: 0.4;
  display: flex; }
  .checkbox-forListDisabled.termsCheckbox {
    display: flex; }
    .checkbox-forListDisabled.termsCheckbox label:before {
      top: 8px; }
    .checkbox-forListDisabled.termsCheckbox input[type='checkbox'] {
      margin: 0; }
      .checkbox-forListDisabled.termsCheckbox input[type='checkbox']:checked + label:after {
        top: 13.6px; }
    .checkbox-forListDisabled.termsCheckbox .visitLink.blue {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      margin: 8px 0;
      text-decoration: underline; }
  .checkbox-forListDisabled label {
    cursor: pointer; }
    .checkbox-forListDisabled label.regularText {
      width: 100%;
      margin-left: 6px; }
    .checkbox-forListDisabled label:before, .checkbox-forListDisabled label:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box; }
    .checkbox-forListDisabled label:before {
      width: 24px;
      height: 24px;
      background: transparent;
      border: 1px solid #212121;
      border-radius: 4px;
      cursor: pointer;
      -webkit-transition: background 0.2s ease;
      -moz-transition: background 0.2s ease;
      transition: background 0.2s ease; }
    .checkbox-forListDisabled label a {
      padding: 4px 0 !important;
      margin: 0 !important; }
    .checkbox-forListDisabled label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .checkbox-forListDisabled label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold';
        font-size: 14px;
        line-height: 16px; }
      .checkbox-forListDisabled label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px; }
    .checkbox-forListDisabled label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      padding-left: 30px; }
      .checkbox-forListDisabled label.withIndication .charge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        height: 22px;
        background-color: #f2f2f3;
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        padding: 0 8px;
        color: #00a5e3;
        border-radius: 12px; }
        .checkbox-forListDisabled label.withIndication .charge.chargeSend {
          color: #004b87; }
  .checkbox-forListDisabled input.disabled {
    cursor: not-allowed;
    pointer-events: none; }
  .checkbox-forListDisabled input[type='checkbox'] {
    outline: 0;
    visibility: hidden;
    width: 24px;
    margin: 0;
    margin-right: 10px; }
    .checkbox-forListDisabled input[type='checkbox']:checked + label:before {
      background: transparent; }
    .checkbox-forListDisabled input[type='checkbox']:checked + label:after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: 5.6px;
      left: 4px;
      width: 16px;
      height: 8px;
      border: 2px solid #00a5e3;
      border-top-style: none;
      border-right-style: none; }
    .checkbox-forListDisabled input[type='checkbox']:disabled + label:before {
      border-color: #f2f2f3; }
    .checkbox-forListDisabled input[type='checkbox']:disabled:checked + label:before {
      background: #f2f2f3; }
  .checkbox-forListDisabled a {
    padding: 0 !important; }

.checkbox-label {
  margin-left: 6px;
  padding: 2px 0; }

.flexLabel input[type='checkbox'] {
  margin-right: 12px; }

.generalCheckbox {
  display: flex;
  margin: 16px 0; }

.generalCheckbox-inactive {
  display: flex;
  margin: 16px 0;
  pointer-events: none;
  opacity: 0.5; }

.generalLabelForCheckbox {
  width: 100%; }

.switch {
  display: inline-block;
  height: 32px;
  position: relative;
  width: 52px; }
  .switch input {
    display: none; }
    .switch input:checked + .slider {
      background-color: #00a5e3;
      border: none; }
      .switch input:checked + .slider:before {
        background-color: #ffffff;
        bottom: 4px;
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.5577 5.49928C17.7473 5.28821 18.0706 5.26666 18.2867 5.4507L19.5908 6.56182C19.815 6.75286 19.8376 7.09121 19.6407 7.31032L9.60812 18.4747C9.40935 18.6958 9.06649 18.7073 8.85342 18.4998L4.38525 14.1491C4.17416 13.9436 4.17416 13.6044 4.38525 13.3989L5.60926 12.207C5.81255 12.0091 6.1365 12.0091 6.33978 12.207L9.10785 14.9023L17.5577 5.49928Z' fill='%230099CC'/%3E%3C/svg%3E%0A");
        display: inline;
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        transform: translateX(20px); }
    .switch input:disabled:checked + .slider {
      cursor: not-allowed;
      background-color: #848484; }
      .switch input:disabled:checked + .slider:before {
        content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.5577 5.49928C17.7473 5.28821 18.0706 5.26666 18.2867 5.4507L19.5908 6.56182C19.815 6.75286 19.8376 7.09121 19.6407 7.31032L9.60812 18.4747C9.40935 18.6958 9.06649 18.7073 8.85342 18.4998L4.38525 14.1491C4.17416 13.9436 4.17416 13.6044 4.38525 13.3989L5.60926 12.207C5.81255 12.0091 6.1365 12.0091 6.33978 12.207L9.10785 14.9023L17.5577 5.49928Z' fill='%23848484'/%3E%3C/svg%3E%0A"); }
    .switch input:disabled + .slider {
      cursor: not-allowed;
      background-color: #e6e6e6; }
  .switch .slider {
    background-color: #ffffff;
    border: 1px solid #848484;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .switch .slider.round {
      border-radius: 34px; }
      .switch .slider.round:before {
        background-color: #848484;
        border-radius: 100%; }
    .switch .slider:before {
      background-color: #ffffff;
      bottom: 3px;
      left: 4px;
      content: '';
      height: 24px;
      width: 24px;
      position: absolute;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      transition: all 0.4s ease; }

.searchListElement {
  position: relative;
  display: flex;
  margin-right: 0;
  padding: 8px;
  z-index: 2;
  box-sizing: border-box;
  height: 40px;
  width: 100%; }

.checkboxContainerList {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 8px; }
  .checkboxContainerList li {
    padding-left: 8px;
    border-top: 1px solid #e6e6e6; }
  .checkboxContainerList li:first-child {
    border-top: none; }

.checkboxSectionInactive {
  opacity: 0.5;
  pointer-events: none; }

.checkboxContainerSection {
  padding-left: 24px; }

.checkBoxOnList {
  display: flex; }

.selectTaxIdModalContainer {
  padding: 24px 132px; }

.mdInputSimpleSubText {
  opacity: 0.6;
  letter-spacing: 0px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }

.connectionsSearchbar {
  display: flex;
  padding: 8px;
  box-sizing: border-box;
  height: 40px;
  margin-right: -8px;
  margin-left: -8px;
  position: relative; }
  .connectionsSearchbar input::placeholder {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #9d9d9c;
    letter-spacing: 0; }

.connectionsSearchbarDisabled {
  pointer-events: none; }

.connectionsSearchbarInput {
  width: 100%;
  padding-right: 24px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }

.connectionsSearchbarInputIcon {
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  line-height: 0; }
  .connectionsSearchbarInputIcon.cursorPointer {
    cursor: pointer; }

.connectionsSelectRadiosContainer {
  padding-left: 100px;
  padding-right: 100px; }
  @media only screen and (max-width: 767px) {
    .connectionsSelectRadiosContainer {
      padding-left: 24px;
      padding-right: 24px; } }

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: rgba(33, 33, 33, 0.6);
  display: table;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-out; }

.modal-mask-visible {
  visibility: visible;
  transition: opacity 0.3s ease-in;
  opacity: 1; }

.modal-isModalInsideModal {
  z-index: 9999; }

.modal-wrapper {
  display: table-cell;
  vertical-align: middle; }

.modal-container {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  max-width: 592px; }
  .modal-container-small {
    max-width: 352px; }
  .modal-container-small-medium {
    max-width: 370px; }
  .modal-container-medium {
    max-width: 384px; }
  .modal-container-medium-large {
    max-width: 432px; }
  .modal-container-large {
    max-width: 482px; }
  .modal-container-youth {
    max-width: 720px; }
  .modal-container-responsive-large {
    width: 50vw; }
    @media only screen and (max-width: 650px) {
      .modal-container-responsive-large {
        width: 70vw; } }
    @media only screen and (max-width: 480px) {
      .modal-container-responsive-large {
        width: 100vw;
        height: 100vh; } }
  .modal-container-onTop {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto; }

.modal-closeButton {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }
  .modal-closeButton:before {
    font-family: 'icomoon' !important;
    speak: never;
    display: inline-block;
    text-align: center;
    font-size: 22px;
    line-height: 24px;
    padding: 12px;
    content: '\e90b'; }
  .modal-closeButton.dark:before {
    color: #ffffff !important;
    content: '\e90b'; }

.modal-container-warning {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  max-width: 384px; }
  .modal-container-warning-small {
    max-width: 352px; }

.modal-body {
  padding: 24px;
  overflow-y: auto;
  height: 100vh;
  /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: auto;
  display: flex;
  align-items: center; }
  .modal-body .dropDownContentBox,
  .modal-body .dropdownContainer {
    max-width: none; }
  @media only screen and (max-width: 480px) {
    .modal-body.learn-more {
      padding: 0; } }

.modal-default-button {
  display: block;
  margin-top: 1rem; }

/*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
   *
   * You can easily play with the modal transition by editing
   * these styles.
   */
.modal-enter {
  opacity: 0; }

.modal-leave-active {
  opacity: 0; }

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  transform: scale(1.1); }

.modal-imageContainer {
  background-color: #ffffff; }

.modal-image {
  width: 100%;
  height: 206px;
  object-fit: contain;
  object-position: center;
  display: block; }

.warningSection-container {
  display: flex;
  padding: 8px;
  border: 1px solid #eabf68;
  background-color: #fefcf7;
  border-radius: 16px;
  align-items: flex-start;
  gap: 8px;
  margin-top: 24px; }

.warningSection-paragraph {
  margin: 0;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }

.warningSection-span {
  margin: 0;
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px; }

.borderedList-section {
  margin-left: 8px; }

.borderedList-ul {
  padding-left: 8px;
  background: #ffffff;
  margin-bottom: -4px; }
  .borderedList-ul li {
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    margin-bottom: 4px; }

.borderedList-paragraph {
  margin: 0;
  margin-bottom: 8px;
  color: #212121;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }

.borderedList-gradientBorder {
  background: #00a5e3;
  padding-left: 2px;
  margin-left: 4px;
  margin-top: 4px;
  margin-bottom: 4px; }

.borderedList-container {
  display: flex; }

.group {
  position: relative;
  width: 100%; }
  .group .icon-send {
    border-radius: 1px; }
    .group .icon-send.disabled :before {
      fill: #848484;
      cursor: none; }
  .group input:focus,
  .group textarea:focus {
    outline: none; }
  .group input:focus ~ label,
  .group input:valid ~ label,
  .group input:not([value='']) ~ label,
  .group textarea:focus ~ label,
  .group textarea:valid ~ label,
  .group textarea:not([value='']) ~ label {
    bottom: 56px;
    left: 0;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    color: #212121;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .group label {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    position: absolute;
    pointer-events: none;
    left: 8px;
    bottom: 12px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }

.input-container {
  position: relative;
  width: 100%; }
  .input-container input:focus,
  .input-container textarea:focus {
    outline: none; }
  .input-container input:focus + label,
  .input-container input:valid + label,
  .input-container textarea:focus + label,
  .input-container textarea:valid + label {
    bottom: 56px;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .input-container input:read-only + label,
  .input-container textarea:read-only + label {
    bottom: 56px;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    color: #212121;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .input-container input:read-only,
  .input-container textarea:read-only {
    opacity: 0.6;
    color: #212121; }
  .input-container label {
    color: #212121;
    position: absolute;
    pointer-events: none;
    left: 8px;
    bottom: 12px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .input-container-error input {
    border-color: #b84c1e !important; }
  .input-container-error label {
    color: #b84c1e; }

.inputs-container {
  padding-top: 32px;
  margin-bottom: -16px; }

.toggleButtonInput {
  padding-right: 36px !important; }

.toggleButtonInput ~ i {
  cursor: pointer; }

.plainInput {
  display: inline-flex;
  border: none;
  outline: none;
  font-family: 'BTCosmo-Bold';
  font-size: 25px;
  line-height: 28px;
  color: #212121;
  width: auto;
  min-width: 0;
  background-color: transparent;
  text-align: right;
  overflow-x: visible; }

.error .plainInput {
  color: #b84c1e; }

.labelForInput {
  width: 100%;
  display: block;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  color: #212121;
  margin-bottom: 12px; }

.inputBoxTitle {
  font-family: 'PeridotPE-SemiBold';
  font-size: 14px;
  line-height: 16px;
  color: #212121;
  margin-bottom: 6px; }

.formField {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  margin-top: 24px; }
  .formField.halfSize {
    width: calc(50% - 8px); }
    @media only screen and (max-width: 767px) {
      .formField.halfSize {
        width: 100%; } }
  .formField ::-webkit-input-placeholder {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .formField :-moz-placeholder {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .formField ::-moz-placeholder {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .formField :-ms-input-placeholder {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .formField.fieldWithError .error {
    display: block; }
  .formField.fieldWithError input {
    border-color: #b84c1e !important; }
  .formField.fieldWithError label {
    color: #b84c1e; }
  .formField.inactive {
    cursor: default;
    pointer-events: none; }
  .formField .error {
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px;
    display: none;
    position: absolute;
    left: 0;
    bottom: -2px;
    color: #b84c1e;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
  .formField.fieldWithDropdown .fieldIndication {
    top: -24px; }
  .formField.fieldWithDropdown input {
    padding-right: 24px;
    cursor: pointer; }
  .formField.fieldWithDropdown.active i {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    transform: scaleY(-1); }
  .formField.fieldWithDropdown.active .dropDown {
    display: flex; }
  .formField.fieldWithDropdown.inactive {
    cursor: default; }
    .formField.fieldWithDropdown.inactive input {
      cursor: default; }
    .formField.fieldWithDropdown.inactive i {
      display: none; }
    .formField.fieldWithDropdown.inactive ::-webkit-input-placeholder {
      color: transparent; }
    .formField.fieldWithDropdown.inactive :-moz-placeholder {
      color: transparent; }
    .formField.fieldWithDropdown.inactive ::-moz-placeholder {
      color: transparent; }
    .formField.fieldWithDropdown.inactive :-ms-input-placeholder {
      color: transparent; }
    .formField.fieldWithDropdown.inactive .fieldIndication {
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px;
      top: 26px;
      color: #848484; }
  .formField.fieldWithDropdown i {
    right: 8px;
    bottom: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
  .formField.fieldWithDropdown .dropDown {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    z-index: 2;
    display: none;
    flex-direction: column;
    border: 1px solid #212121;
    border-top: none;
    max-height: 158px;
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .formField.fieldWithDropdown .dropDown span {
      display: inline-block;
      padding: 12px 8px;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      cursor: pointer; }
      .formField.fieldWithDropdown .dropDown span:hover, .formField.fieldWithDropdown .dropDown span.active {
        background-color: #00a5e3;
        color: #ffffff; }
  .formField.fieldWithLimit {
    margin-bottom: 14px; }
  .formField input:focus,
  .formField textarea:focus {
    outline: none; }
  .formField input:focus ~ label,
  .formField input:valid ~ label,
  .formField input:not([value='']) ~ label,
  .formField textarea:focus ~ label,
  .formField textarea:valid ~ label,
  .formField textarea:not([value='']) ~ label {
    bottom: 52px;
    left: 0;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .formField label {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #848484;
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 4px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .formField .characters {
    position: absolute;
    display: flex;
    align-items: center;
    color: #212121;
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px;
    bottom: -4px;
    right: 0;
    width: auto;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out; }
    .formField .characters .charactersLive {
      color: #212121;
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px;
      margin-bottom: 0; }

input[type='text'],
input[type='password'] {
  outline: none;
  background-color: transparent;
  padding-right: 24px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }
  input[type='text'].borderedInput,
  input[type='password'].borderedInput {
    border-bottom: 2px solid #00a5e3;
    width: 180px;
    font-family: 'BTCosmo-Bold';
    font-size: 20px;
    line-height: 24px;
    color: #212121; }
  input[type='text'].withError,
  input[type='password'].withError {
    border-color: #b84c1e !important; }
  input[type='text'].simpleInput,
  input[type='password'].simpleInput {
    box-sizing: border-box;
    width: 100%;
    color: #212121;
    display: inline-block;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    background-color: transparent;
    border: 1px solid #212121;
    border-radius: 16px;
    height: 48px;
    padding: 12px 8px; }
    input[type='text'].simpleInput.toggleNameEdit,
    input[type='password'].simpleInput.toggleNameEdit {
      padding-right: 40px; }
    input[type='text'].simpleInput.inactive,
    input[type='password'].simpleInput.inactive {
      pointer-events: none; }
    input[type='text'].simpleInput.transparentInput,
    input[type='password'].simpleInput.transparentInput {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none; }
    input[type='text'].simpleInput.small,
    input[type='password'].simpleInput.small {
      max-width: 312px; }
    input[type='text'].simpleInput.active,
    input[type='password'].simpleInput.active {
      border-radius: 16px 16px 0 0;
      border-bottom: none; }
  input[type='text'].input-simpleInput,
  input[type='password'].input-simpleInput {
    box-sizing: border-box;
    height: 48px;
    width: 100%;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #212121;
    display: inline-block;
    background-color: transparent;
    border: 1px solid #212121;
    padding: 8px 12px;
    border-radius: 16px; }
    input[type='text'].input-simpleInput.inactive,
    input[type='password'].input-simpleInput.inactive {
      pointer-events: none; }
    input[type='text'].input-simpleInput.transparentInput,
    input[type='password'].input-simpleInput.transparentInput {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none; }
    input[type='text'].input-simpleInput.small,
    input[type='password'].input-simpleInput.small {
      max-width: 312px; }
  input[type='text'] .megaFilterInputContainer,
  input[type='password'] .megaFilterInputContainer {
    position: relative; }
    @media only screen and (min-width: 1025px) and (max-width: 1230px) {
      input[type='text'] .megaFilterInputContainer,
      input[type='password'] .megaFilterInputContainer {
        width: 100%; } }
    @media only screen and (max-width: 767px) {
      input[type='text'] .megaFilterInputContainer,
      input[type='password'] .megaFilterInputContainer {
        width: 100%; } }

.inputContainer {
  position: relative; }
  .inputContainer i {
    position: absolute;
    cursor: pointer;
    right: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }

.fieldIndication {
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px;
  display: block;
  color: #212121;
  position: absolute;
  left: 0;
  top: -24px;
  white-space: nowrap;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }

.inputWithSearchBox {
  max-width: 264px;
  margin-top: 24px; }
  .inputWithSearchBox.focused .withSearch {
    cursor: auto;
    border-bottom: none;
    border-radius: 16px 16px 0 0; }
  .inputWithSearchBox.focused i {
    -webkit-transform: translateY(-50%) scaleY(-1);
    -moz-transform: translateY(-50%) scaleY(-1);
    transform: translateY(-50%) scaleY(-1); }
  .inputWithSearchBox.focused .inputSearchBox {
    display: block; }
  .inputWithSearchBox .withSearch {
    cursor: pointer; }
  .inputWithSearchBox i {
    position: absolute;
    right: 8px;
    top: 50%;
    z-index: 1;
    pointer-events: none;
    font-size: 18px;
    line-height: 0;
    -webkit-transform: translateY(-50%) scaleY(1);
    -moz-transform: translateY(-50%) scaleY(1);
    transform: translateY(-50%) scaleY(1); }
  .inputWithSearchBox ::-webkit-input-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .inputWithSearchBox :-moz-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .inputWithSearchBox ::-moz-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .inputWithSearchBox :-ms-input-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .inputWithSearchBox label {
    color: #212121; }
  .inputWithSearchBox .inputSearchBox {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    border: 1px solid #212121;
    border-top: none;
    background-color: #ffffff;
    max-height: 100px;
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .inputWithSearchBox .inputSearchBox span {
      display: block;
      padding: 12px 8px;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      cursor: pointer; }
      .inputWithSearchBox .inputSearchBox span:hover, .inputWithSearchBox .inputSearchBox span:focus, .inputWithSearchBox .inputSearchBox span.active {
        color: #ffffff;
        background-color: #00a5e3; }

.simpleInput-container {
  display: flex;
  flex-flow: column;
  gap: 8px;
  position: relative;
  padding-bottom: 4px;
  width: 100%; }
  .simpleInput-container .simpleInput-title {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }

body .arrow:after {
  background-color: #ffffff;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); }

body .ui-tooltip {
  position: absolute;
  padding: 8px 12px;
  color: #212121;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  max-width: 456px;
  background: #ffffff;
  z-index: 999999;
  border-radius: 8px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); }
  body .ui-tooltip img {
    width: 200px;
    height: auto;
    object-fit: contain;
    object-position: center; }

body .arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -16px;
  right: -34px; }
  @media only screen and (max-width: 480px) {
    body .arrow {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      transform: translateX(0); } }
  @media only screen and (max-width: 480px) {
    body .arrow {
      right: 0; } }
  body .arrow.arrowWizardLeft {
    left: 70%; }

body .arrow.top {
  top: -16px;
  bottom: auto; }

body .arrow.left {
  left: 20%; }
  @media only screen and (max-width: 480px) {
    body .arrow.left {
      left: unset;
      right: 14px; } }

body .arrow.smallLeftEnd {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -16px;
  left: 22px; }
  @media only screen and (max-width: 480px) {
    body .arrow.smallLeftEnd {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      transform: translateX(0); } }
  body .arrow.smallLeftEnd:after {
    content: '';
    position: absolute;
    left: 22px;
    top: -20px;
    width: 22px;
    height: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg); }

body .arrow.largeAccountsSidebarRight {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -16px;
  left: 86%;
  top: 24px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg); }
  @media only screen and (max-width: 480px) {
    body .arrow.largeAccountsSidebarRight {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      transform: translateX(0); } }
  body .arrow.largeAccountsSidebarRight:after {
    content: '';
    position: absolute;
    left: 22px;
    top: -20px;
    width: 22px;
    height: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg); }

body .arrow.largeAccountsBottomSidebarRight {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -16px;
  left: 183px;
  top: 24px;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg); }
  @media only screen and (max-width: 480px) {
    body .arrow.largeAccountsBottomSidebarRight {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      transform: translateX(0); } }
  body .arrow.largeAccountsBottomSidebarRight:after {
    content: '';
    position: absolute;
    left: 22px;
    top: -20px;
    width: 22px;
    height: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg); }

body .arrow:after {
  content: '';
  position: absolute;
  left: 22px;
  top: -20px;
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg); }

body .arrow.top:after {
  bottom: -20px;
  top: auto; }

.tooltip {
  cursor: pointer;
  position: relative; }
  .tooltip.tooltip {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    display: flex; }
  .tooltip.withMargin {
    margin-left: 12px; }
  .tooltip.withBigMargin {
    margin-left: 22px; }
  .tooltip .tooltip-content {
    display: none;
    position: absolute;
    top: 52px;
    right: -12px;
    width: 340px;
    height: auto;
    margin-bottom: 8px; }
    @media only screen and (max-width: 480px) {
      .tooltip .tooltip-content {
        width: 95vw; } }
  .tooltip.active .tooltip-content {
    display: flex; }

.paginationOuter .pagination {
  left: 0; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  height: 42px;
  background-color: #ffffff;
  padding: 12px 24px;
  margin: auto;
  margin-bottom: 30px;
  position: relative;
  left: -18px; }
  @media only screen and (max-width: 767px) {
    .pagination {
      left: 0;
      margin-bottom: 60px; } }
  @media only screen and (max-width: 767px) {
    .pagination .arrowText {
      display: none; } }
  .pagination .pageItem.active .pageLink {
    color: #0e8103;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px; }
  .pagination .pageItem .pageLink {
    color: #212121;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    margin: 0 8px;
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center; }
  .pagination .pageItem.paginationBtn .pageLink {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #0e8103;
    margin: 0; }
    .pagination .pageItem.paginationBtn .pageLink.disabled {
      opacity: 0.5;
      pointer-events: none; }
  .pagination .pageItem.paginationBtn:first-child {
    margin-left: 0;
    margin-right: 16px; }
    .pagination .pageItem.paginationBtn:first-child .arrowText {
      padding-left: 4px; }
  .pagination .pageItem.paginationBtn:last-child {
    margin-left: 16px;
    margin-right: 0; }
    .pagination .pageItem.paginationBtn:last-child .arrowText {
      padding-right: 4px; }

.pager {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  background-color: #ffffff;
  padding: 12px 24px;
  margin: 20px auto 10px;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%); }
  @media only screen and (max-width: 767px) {
    .pager {
      left: 0;
      margin-bottom: 60px; } }
  .pager .page-number {
    color: #212121;
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    margin: 0 8px;
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    .pager .page-number.active {
      color: #0e8103;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      cursor: default; }

.paginator {
  display: flex;
  flex-flow: row !important;
  margin-top: 20px; }
  .paginator ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 42px;
    background-color: #ffffff;
    padding: 12px 24px;
    margin: auto;
    margin-bottom: 30px;
    position: relative; }
    .paginator ul li.active span {
      color: #0ea600;
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px; }
    .paginator ul li.disabled span {
      cursor: default;
      opacity: 0.5;
      pointer-events: none; }
    @media only screen and (max-width: 480px) {
      .paginator ul li:first-child {
        display: none; } }
    .paginator ul li:first-child span {
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px;
      color: #0ea600;
      margin: 0;
      margin-right: 16px; }
    @media only screen and (max-width: 480px) {
      .paginator ul li:last-child {
        display: none; } }
    .paginator ul li:last-child span {
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px;
      color: #0ea600;
      margin: 0;
      margin-left: 16px; }
    .paginator ul li span {
      color: #212121;
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px;
      margin: 0 8px;
      min-width: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
    .paginator ul li.paginationBtn .next,
    .paginator ul li.paginationBtn .prev {
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px;
      color: #0ea600;
      margin: 0; }
    .paginator ul li.paginationBtn.disabled span {
      color: #848484;
      pointer-events: none; }

@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0; }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1; }
  to {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0; } }

@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0; }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1; }
  to {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0; } }

@-webkit-keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0; }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1; }
  to {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0; } }

@keyframes uil-ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0; }
  33% {
    width: 44%;
    height: 44%;
    margin: -22% 0 0 -22%;
    opacity: 1; }
  to {
    width: 88%;
    height: 88%;
    margin: -44% 0 0 -44%;
    opacity: 0; } }

.uil-ripple-css-box-center {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 320px;
  height: 270px;
  z-index: 9999999; }

.uil-ripple-css-box-center p {
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  top: 20px; }

.uil-ripple-css-box-center .uil-ripple-css {
  background: 0 0;
  width: 300px;
  height: 300px;
  margin: auto;
  -webkit-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3); }

.uil-ripple-css-box-center .uil-ripple-css div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 0;
  height: 2;
  opacity: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  -webkit-animation: uil-ripple 2s ease-out infinite;
  animation: uil-ripple 2s ease-out infinite; }

.uil-ripple-css-box-center .uil-ripple-css div:nth-of-type(1) {
  border-color: #0ea600; }

.uil-ripple-css-box-center .uil-ripple-css div:nth-of-type(2) {
  border-color: #00a5e3;
  -webkit-animation-delay: 1s;
  animation-delay: 1s; }

.uil-ripple-css-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999999;
  display: block !important; }

.uil-ripple-css-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999999;
  display: block !important; }

.loaderParent {
  position: fixed;
  z-index: 999999999999999;
  width: 100%;
  height: 100%; }

.blueAlert {
  display: flex;
  align-items: center;
  margin-top: 14px; }
  .blueAlert img {
    display: block;
    width: 18px;
    margin-right: 8px; }
  .blueAlert .blueAlertText {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    color: #212121; }

.giftLabelContainer {
  display: block;
  width: 100%;
  padding: 1px;
  background-color: #00a5e3;
  margin-top: 24px;
  border-radius: 16px; }
  .giftLabelContainer .giftLabelContent {
    padding: 8px 16px;
    background-color: #ffffff;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    border-radius: 16px; }
    .giftLabelContainer .giftLabelContent.withDescription {
      flex-flow: row wrap; }
    .giftLabelContainer .giftLabelContent .giftDescription {
      flex: 1 1 100%;
      text-align: center;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      margin-top: 10px; }
    .giftLabelContainer .giftLabelContent.bgGrey {
      background-color: #f2f2f3; }
    .giftLabelContainer .giftLabelContent img {
      width: 32px;
      height: auto;
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-right: 8px;
      object-fit: cover;
      object-position: center; }
      .giftLabelContainer .giftLabelContent img.smallerWidth {
        width: 28px; }
    .giftLabelContainer .giftLabelContent span {
      flex: 1 1 calc(100% - 45px);
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px; }

.giftLabelContainer.smaller {
  margin: 0 0 16px 32px; }

.countDown {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  margin-top: -16px;
  background-color: #212121;
  color: #ffffff;
  padding: 24px 8px 8px 8px;
  border-radius: 0 0 16px 16px; }
  .countDownInline {
    margin: 0;
    background-color: transparent;
    color: #212121;
    box-shadow: none; }
  .countDown.forOffers {
    margin-top: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 6px 6px 6px 16px;
    min-height: 39px;
    height: auto;
    width: calc(100% - 150px);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 16px 30px 0px 0px; }
    @media only screen and (max-width: 480px) {
      .countDown.forOffers {
        width: calc(100% - 126px);
        padding: 6px;
        border-radius: 16px 28px 0px 0px; } }
    .countDown.forOffers .countDownImage {
      display: block;
      width: 20px;
      height: auto;
      margin-right: 8px; }
      @media only screen and (max-width: 480px) {
        .countDown.forOffers .countDownImage {
          width: 16px; } }
    @media only screen and (max-width: 480px) {
      .countDown.forOffers .countDownTimer {
        margin: 4px 0; } }
    .countDown.forOffers .countDownTimer-column {
      padding-right: 17px; }
      @media only screen and (max-width: 480px) {
        .countDown.forOffers .countDownTimer-column {
          padding-right: 12px; } }
    .countDown.forOffers .countDownTimer-number {
      font-size: 14px;
      line-height: 16px; }
    .countDown.forOffers .countDownTimer-label {
      font-size: 12px;
      line-height: 12px; }
  .countDown .countDownImage {
    display: block;
    width: 24px;
    height: auto;
    margin-right: 12px; }
    @media only screen and (max-width: 480px) {
      .countDown .countDownImage {
        margin-right: 8px;
        width: 18px; } }
  .countDown .countDownTitle {
    display: block;
    margin-right: 16px;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase; }
    @media only screen and (max-width: 480px) {
      .countDown .countDownTitle {
        margin-right: 12px;
        font-family: 'PeridotPE-SemiBold';
        font-size: 14px;
        line-height: 16px; } }
  .countDown .countDownTimer {
    display: flex; }
    .countDown .countDownTimer-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-right: 19px;
      position: relative; }
      @media only screen and (max-width: 480px) {
        .countDown .countDownTimer-column {
          padding-right: 16px; } }
      .countDown .countDownTimer-column:last-child {
        padding-right: 0; }
        .countDown .countDownTimer-column:last-child:after {
          display: none; }
      .countDown .countDownTimer-column:after {
        content: ':';
        position: absolute;
        right: 8px;
        top: 50%;
        font-family: 'PeridotPE-SemiBold';
        font-size: 12px;
        line-height: 16px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%); }
    .countDown .countDownTimer-number {
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px; }
    .countDown .countDownTimer-label {
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px; }

.timer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #212121; }
  .timerContainer {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-self: flex-end; }
  .timerParagraph {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    margin: 0; }
  .timerImage {
    display: block;
    width: 24px;
    height: 24px;
    margin-right: 4px; }
  .timerElement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; }
    .timerElementNumber {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px; }
    .timerElementLabel {
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px; }

.dropdown {
  position: relative; }
  @media only screen and (max-width: 767px) {
    .dropdown.deviceDropdown {
      width: 100%; } }
  .dropdown.deviceDropdown .dropdownButton {
    height: 48px;
    cursor: pointer;
    min-width: 193px;
    padding: 8px 12px;
    outline: none;
    border-radius: 16px;
    background-color: #ffffff;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #e6e6e6; }
    @media only screen and (max-width: 767px) {
      .dropdown.deviceDropdown .dropdownButton {
        width: 100%; } }
    .dropdown.deviceDropdown .dropdownButton span {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      width: 100%;
      text-align: left; }
    .dropdown.deviceDropdown .dropdownButton i {
      font-size: 24px; }
  .dropdown.deviceDropdown .dropdownContent {
    z-index: 2;
    top: 48px; }
    .dropdown.deviceDropdown .dropdownContent li {
      text-align: left;
      padding: 12px 8px; }
  .dropdown .dropdownButton {
    background: #f2f2f3;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    height: 48px;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    min-width: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px 12px 8px;
    text-align: center;
    position: relative; }
    .dropdown .dropdownButton i {
      font-size: 24px;
      position: absolute;
      right: 8px; }
    .dropdown .dropdownButton span {
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px; }
    .dropdown .dropdownButton:hover, .dropdown .dropdownButton:focus {
      background-color: #00a5e3;
      color: #ffffff; }
  .dropdown .dropdownContent {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    max-height: 143px;
    overflow-y: scroll;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e6e6; }
    .dropdown .dropdownContent.active {
      display: block; }
    .dropdown .dropdownContent li {
      padding: 12px 8px;
      text-align: center;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      color: #212121; }
      .dropdown .dropdownContent li:hover {
        color: #ffffff;
        background-color: #00a5e3;
        cursor: pointer; }

.loadingBar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 40px auto 16px;
  width: 100%;
  max-width: 340px;
  height: 12px;
  background-color: #e6e6e6;
  overflow: hidden;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px; }
  .loadingBar .loadingBarProgress {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #00a5e3;
    z-index: 2;
    max-width: 222px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; }

.assetsSearchbar-businessToggle {
  background-color: #ffffff;
  max-width: 95%; }

.assetsSearchbar-businessContentSearch {
  position: relative;
  margin-top: 8px; }
  .assetsSearchbar-businessContentSearch ::-webkit-input-placeholder {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #9d9d9c; }
  .assetsSearchbar-businessContentSearch :-moz-placeholder {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #9d9d9c; }
  .assetsSearchbar-businessContentSearch ::-moz-placeholder {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #9d9d9c; }
  .assetsSearchbar-businessContentSearch :-ms-input-placeholder {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #9d9d9c; }
  .assetsSearchbar-businessContentSearch i {
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    line-height: 0; }
    .assetsSearchbar-businessContentSearch i.icon-lens {
      font-size: 18px; }

.assetsSearchbar-businessInput {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 24px;
  color: #212121;
  display: inline-block;
  background-color: transparent;
  border: 1px solid #212121;
  border-radius: 16px; }

.imageTextLabel-modalSelectionCard {
  padding: 6px 14px 6px 4px;
  background-color: #f2f2f3;
  color: #212121;
  min-width: 80px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  margin-top: -16px;
  margin-right: -16px;
  margin-left: -16px;
  -webkit-border-radius: 0 15px 0 0;
  -moz-border-radius: 0 15px 0 0;
  border-radius: 0 15px 0 0; }

.imageTextLabel-topLeftAbsoluteContainer {
  position: absolute;
  left: 0;
  top: 0;
  padding: 6px 14px 6px 4px;
  background-color: #f2f2f3;
  color: #212121;
  min-width: 80px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  -webkit-border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;
  align-items: center; }

.imageTextLabel-image {
  margin-right: 4px; }

.toggleBox-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px; }

.toggleBox-simpleContent {
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  color: #212121 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px; }
  .toggleBox-simpleContent i {
    padding-left: 4px;
    font-size: 16px;
    line-height: 16px;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
    .toggleBox-simpleContent i.active {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }

.toggleBox-simpleToggledContent {
  padding-top: 10px; }

.toggleBox-hidden {
  max-height: 0;
  transition: max-height, 0.3s linear;
  overflow: hidden; }

.toggleBox-visible {
  max-height: 900px;
  transition: max-height, 0.3s linear; }

.titleUndelinedGradient-container {
  margin-bottom: 12px; }

.titleUndelinedGradient-paragraph {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  color: #212121;
  letter-spacing: 0;
  margin: 0;
  margin-bottom: 4px; }

.titleUndelinedGradient-span {
  height: 2px;
  width: 100%;
  display: block;
  background: #00a5e3; }

.amountOverview-container {
  margin-top: 6px; }

.amountOverview-amountContainer {
  width: 100%;
  display: block;
  position: relative;
  margin-bottom: -6px;
  padding-left: 20px;
  white-space: nowrap; }
  @media only screen and (max-width: 767px) {
    .amountOverview-amountContainer {
      margin-top: 46px;
      padding-left: 0; } }
  .amountOverview-amountContainer.marginBottomExpiredHidden {
    margin-bottom: 20px; }
  .amountOverview-amountContainer.largeAccountsShop {
    margin-top: 56px; }
  .amountOverview-amountContainer.withOldPrice {
    margin-top: 50px; }
    .amountOverview-amountContainer.withOldPrice .oldPrice {
      position: absolute;
      top: -24px;
      right: 0;
      font-size: 14px;
      line-height: 17px; }

.amountOverview-cents {
  font-family: 'BTCosmo-Bold';
  font-size: 20px;
  line-height: 24px;
  position: relative;
  padding-left: 2px;
  bottom: 2px; }
  .amountOverview-cents .imgTooltip {
    position: relative;
    bottom: 3px;
    left: 4px;
    display: inline-block;
    margin: auto;
    width: 16px;
    height: 16px;
    font-family: "BTCosmo-Bold";
    font-size: 12px;
    line-height: 16px;
    color: #212121;
    border: 1px solid #212121;
    padding: 0;
    text-align: center;
    border-radius: 100%; }
    .amountOverview-cents .imgTooltip.top {
      top: -27px;
      left: unset;
      right: 0; }

.amountOverview-euros {
  font-family: 'BTCosmo-Bold';
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -2px;
  position: relative; }
  .amountOverview-euros.euros--small {
    font-family: 'BTCosmo-Bold';
    font-size: 32px;
    line-height: 36px; }
    .amountOverview-euros.euros--small .imgEuro {
      left: -7px;
      top: -12px; }
  @media only screen and (max-width: 767px) {
    .amountOverview-euros {
      font-size: 44px;
      line-height: 44px; }
      .amountOverview-euros--small {
        font-size: 28px;
        line-height: 28px; } }
  .amountOverview-euros .imgEuro {
    display: none; }

.amountOverview-percentage {
  font-family: 'BTCosmo-Bold';
  font-size: 20px;
  line-height: 24px;
  position: relative;
  padding-left: 2px;
  bottom: -4px; }

.amountOverview-paymentDeadline {
  font-family: 'PeridotPE-Regular';
  font-size: 12px;
  line-height: 16px;
  width: 100%;
  display: block;
  margin: 6px auto;
  max-width: 94px; }
  .amountOverview-paymentDeadline.hidden {
    display: none; }

.iconImage-section {
  display: flex;
  justify-content: center; }

.iconImage-image {
  margin-right: 8px;
  margin-left: 2px; }

.iconImage-paragraph {
  margin: 0;
  color: #212121;
  font-family: 'PeridotPE-SemiBold';
  font-size: 14px;
  line-height: 16px; }

.whiteBox {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  margin-top: 54px;
  width: 100%;
  max-width: 516px;
  text-align: center;
  padding: 24px;
  z-index: 1; }
  .whiteBox-withoutInput {
    padding-top: 104px; }
  .whiteBox-empty {
    height: 252px;
    display: flex;
    justify-content: center;
    align-items: center; }
  .whiteBox-paragraphMedium {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .whiteBoxMedium {
    max-width: 395px;
    padding: 16px;
    padding-bottom: 24px;
    margin-top: 0; }
    .whiteBoxMediumLayout {
      display: flex;
      gap: 16px;
      flex-wrap: wrap; }
      @media only screen and (max-width: 1024px) {
        .whiteBoxMediumLayout {
          justify-content: center;
          margin-top: 24px; } }
  .whiteBoxOutlineElement {
    margin-bottom: 16px; }
  .whiteBoxLabelTitle {
    display: flex;
    margin-left: -16px;
    margin-bottom: 12px; }
  .whiteBoxTitleText {
    font-family: 'BTCosmo-Bold';
    font-size: 20px;
    line-height: 24px;
    text-align: left;
    margin: 0;
    margin-bottom: 8px; }
  .whiteBoxContents {
    display: flex;
    justify-content: center; }

.whiteBox-disclaimerParagraph {
  margin: 0;
  opacity: 0.6;
  color: #212121;
  text-align: center;
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px;
  margin-top: 24px; }
  .whiteBox-disclaimerParagraph-withoutLink {
    margin-top: 64px; }

.whiteBox-simpleLink {
  padding: 12px 8px;
  color: #0ea600;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  width: 100%;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  margin-top: 16px; }
  .whiteBox-simpleLink:hover {
    color: rgba(0, 109, 41, 0.85);
    z-index: 1; }
  .whiteBox-simpleLink:focus {
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    z-index: 2; }
  .whiteBox-simpleLink-notVisible {
    visibility: hidden; }
  .whiteBox-simpleLink.hidden {
    display: none; }
  .whiteBox-simpleLink.absoluteLink {
    position: absolute;
    bottom: 8px; }
  .whiteBox-simpleLink.whiteLink {
    display: inline-block;
    width: auto;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold';
    font-size: 16px;
    line-height: 16px; }
    @media only screen and (max-width: 767px) {
      .whiteBox-simpleLink.whiteLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .whiteBox-simpleLink.blueTooltipLink {
    color: #212121;
    font-family: 'PeridotPE-Bold';
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0;
    margin-top: 4px; }
  .whiteBox-simpleLink.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold';
    font-size: 16px;
    line-height: 16px; }
    @media only screen and (max-width: 767px) {
      .whiteBox-simpleLink.blueLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .whiteBox-simpleLink.inline {
    display: inline-block;
    width: auto; }
  .whiteBox-simpleLink.blue {
    color: #212121 !important;
    font-family: 'PeridotPE-Bold';
    font-size: 16px;
    line-height: 16px; }

.primaryButton.primaryButtonNormal-insideWhitebox {
  max-width: 250px;
  width: 100%; }

.whiteBox-inputContainer {
  text-align: left;
  margin-bottom: 52px; }
  .whiteBox-inputContainer-error {
    margin-bottom: 32px; }

.outlineElement {
  border-radius: 16px;
  border: solid 1px #9d9d9c;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .outlineElementGradient {
    width: 100%;
    border: none;
    background: #00a5e3;
    display: inline-block;
    padding: 1px;
    text-decoration: none; }
    .outlineElementGradientContents {
      border-radius: 15px;
      background: #ffffff;
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
  .outlineElementLeftContent {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .outlineElementTitleText {
    margin: 0;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }
  .outlineElementNormalText {
    margin: 0;
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px; }
  .outlineElementSmallText {
    margin: 0;
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px;
    text-align: left; }

.routerBox {
  display: flex;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  padding: 16px;
  padding-top: 48px;
  flex-flow: column;
  background-color: #ffffff; }
  .routerBox-list {
    margin-top: 10px;
    margin-bottom: 16px; }
    .routerBox-list-element {
      font-family: 'PeridotPE-SemiBold';
      font-size: 13px;
      line-height: 16px;
      letter-spacing: 0;
      color: #9d9d9c;
      display: flex;
      align-items: center;
      margin-left: 28px;
      margin-bottom: 8px; }
      .routerBox-list-element:last-child {
        margin-bottom: 0; }
      .routerBox-list-element-tick {
        margin-left: 0;
        color: #0ea600;
        opacity: 1; }
      .routerBox-list-element-withIcon {
        margin-left: 0; }
      .routerBox-list-element-image {
        margin-right: 8px;
        width: 20px;
        height: 20px; }
  .routerBox-container {
    display: flex;
    flex-flow: row;
    margin-bottom: 8px;
    margin-top: 20px; }
    .routerBox-container-paragraph {
      font-family: 'PeridotPE-SemiBold';
      font-size: 13px;
      line-height: 16px;
      color: #9d9d9c;
      letter-spacing: 0;
      margin: 0; }
  .routerBox-donut {
    text-align: center;
    position: relative;
    margin-right: 44px; }
    .routerBox-donut:last-child {
      margin-right: 0px; }
    .routerBox-donut-content {
      min-width: 96px;
      margin: 0 16px 8px 16px; }
      .routerBox-donut-content-svg {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        width: 100%;
        transform: rotate(125deg); }
        .routerBox-donut-content-svg .donutColor {
          stroke: #0ea600; }
      .routerBox-donut-content-number {
        font-family: 'BTCosmo-Bold';
        font-size: 25px;
        line-height: 28px;
        margin-top: 30px;
        display: block;
        margin-bottom: 14px; }
      .routerBox-donut-content-label {
        display: inline-block;
        margin: auto;
        width: auto;
        font-family: 'PeridotPE-ExtraBlack';
        font-size: 10px;
        line-height: 12px;
        background-color: #e6e6e6;
        padding: 4px;
        border-radius: 4px; }
    .routerBox-donut-indication {
      font-family: 'PeridotPE-SemiBold';
      font-size: 13px;
      line-height: 16px; }
  .routerBox-label {
    padding: 8px 12px;
    background-color: #e6e6e6;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    color: #212121;
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
    min-width: 80px;
    border-radius: 16px 0; }
    .routerBox-label-withoutIcon {
      height: 32px; }
  .routerBox-title {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    color: #212121;
    letter-spacing: 0; }

.circularLabel {
  display: flex;
  align-items: center;
  z-index: 5; }
  .circularLabel-container {
    background-color: #fefcf7;
    border: 2px solid #eabf68;
    border-radius: 16px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .circularLabel-container-gradient {
      background-color: #004b87;
      padding: 2px;
      border: none; }
    .circularLabel-container-noBorder {
      border: none; }
    .circularLabel-container-gray {
      border: 1px solid #e6e6e6; }
  .circularLabel-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px; }
    .circularLabel-icon-reload {
      margin: 0 0 0 4px;
      cursor: pointer; }
    .circularLabel-icon-rotator {
      margin-right: 2px; }
  .circularLabel-infoIcon {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    margin-right: -4px;
    cursor: pointer; }
  .circularLabel-text {
    margin: 0;
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    letter-spacing: 0;
    text-align: center; }
    .circularLabel-text-gray {
      color: #212121; }
    .circularLabel-text-green {
      color: #212121; }
  .circularLabel-tooltip-container {
    position: relative;
    display: flex; }
    .circularLabel-tooltip-container:hover .circularLabel-tooltip-element {
      display: block; }
  .circularLabel-tooltip-element {
    position: absolute;
    top: 36px;
    left: unset;
    right: -142px;
    min-width: 292px;
    display: none; }
    @media only screen and (max-width: 480px) {
      .circularLabel-tooltip-element {
        top: 36px;
        right: -26px;
        min-width: 194px; } }
  @media only screen and (max-width: 480px) {
    .circularLabel-tooltip-arrow {
      left: 66% !important; } }

.collapsible {
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
  display: inline; }
  .collapsible-active .collapsible-icon {
    transform: rotate(-180deg); }

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px; }

.collapsible-active + div {
  display: block; }

.collapsible-active:after {
  content: '\2212'; }

.collapsible-content {
  display: none;
  overflow: hidden; }

.chipButton {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  color: #0ea600;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 6px;
  padding: 12px 16px;
  background-color: #ffffff;
  border: 1px solid #0ea600;
  border-radius: 16px; }
  .chipButton.secondaryButtonNormal {
    color: #212121;
    border: 1px solid #212121;
    padding: 12px;
    min-width: 160px;
    box-sizing: border-box;
    min-height: 32px; }
    @media only screen and (max-width: 767px) {
      .chipButton.secondaryButtonNormal {
        min-width: 136px; } }
    .chipButton.secondaryButtonNormal:hover {
      border-color: #0ea600;
      color: #0ea600;
      opacity: 0.85; }
    .chipButton.secondaryButtonNormal:focus {
      -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
    .chipButton.secondaryButtonNormal:visited {
      border-color: #0ea600;
      color: #0ea600; }
    .chipButton.secondaryButtonNormal.largeAccounts {
      margin: 0; }
  .chipButton:hover {
    color: #0ea600;
    border-color: #0ea600;
    opacity: 0.85; }
  .chipButton:focus {
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
  .chipButton:visited {
    border-color: #0ea600;
    color: #0ea600; }
  .chipButtondisabled {
    color: #848484;
    border-color: #848484; }

@keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }

.rotator {
  animation: rotation 2s infinite linear; }

.secondaryBox-container {
  width: 100%; }

.secondaryBox-title {
  background-color: #f2f2f3;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  color: #212121;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  min-width: 80px;
  border-radius: 16px 0 16px 0;
  padding: 6px 8px;
  height: 32px; }

.secondaryBox-searchFilterContent {
  margin-top: 32px;
  width: 100%; }

.secondaryBox-searchFilter {
  border-radius: 16px; }

.modalListInfo {
  list-style: inside; }
  .modalListInfoElementLink {
    color: #00a5e3; }
    .modalListInfoElementLink:active {
      color: #00a5e3; }
    .modalListInfoElementLink:visited {
      color: #00a5e3; }

.gradientLine {
  height: 1px;
  width: 100%;
  display: block;
  background-color: #00a5e3; }

.confirmationInfoContainer {
  display: flex;
  gap: 8px; }

.confirmationInfoImage {
  width: 24px;
  height: 24px; }

.confirmationInfoText {
  display: flex;
  flex-direction: column;
  gap: 4px; }
  .confirmationInfoTextTitle {
    margin: 0;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    color: #212121;
    letter-spacing: 0; }
  .confirmationInfoTextDescription {
    margin: 0;
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px;
    color: #212121;
    letter-spacing: 0; }

.orderCompletion {
  display: flex;
  align-items: center; }
  .orderCompletionImage {
    height: 48px;
    width: 48px; }
    .orderCompletionImageDescription {
      margin: 0;
      color: #212121;
      letter-spacing: 0;
      text-align: center; }
  .orderCompletionTitle {
    margin: 0;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    color: #212121;
    letter-spacing: 0;
    text-align: center; }
  .orderCompletionParagraph {
    margin: 0;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    color: #212121;
    letter-spacing: 0;
    text-align: center; }
    .orderCompletionParagraphHighlighted {
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px; }

.sidePriceContainer {
  display: flex;
  flex-direction: column; }

.sidePriceOld {
  color: #9d9d9c;
  letter-spacing: 0;
  text-align: center;
  font-family: 'PeridotPE-Regular';
  font-size: 12px;
  line-height: 16px;
  text-decoration-line: line-through;
  text-decoration-color: #212121; }

.sidePriceCurrent {
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  font-family: 'BTCosmo-Bold';
  font-size: 25px;
  line-height: 28px; }

.sidePriceDescription {
  font-family: 'PeridotPE-Regular';
  font-size: 12px;
  line-height: 16px;
  color: #212121;
  letter-spacing: 0;
  text-align: center; }

.infoElement {
  display: flex;
  gap: 8px; }
  .infoElementIcon {
    height: 40px; }
  .infoElementContainer {
    display: flex;
    flex-direction: column;
    gap: 4px; }
  .infoElementTitleText {
    display: block;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }
    .infoElementTitleTextEnd {
      align-self: flex-end; }
  .infoElementDescriptionText {
    display: block;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }

.warningBoxSection {
  border: 1px solid #b84c1e;
  border-radius: 16px;
  padding: 8px 16px;
  display: flex;
  align-items: flex-start;
  display: flex;
  gap: 8px;
  margin: 16px 0;
  background-color: #fdf7f5;
  width: 100%; }
  .warningBoxSectionText {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .warningBoxSectionTitle {
    font-family: 'BTCosmo-Bold';
    font-size: 16px;
    line-height: 20px;
    margin: 0; }
  .warningBoxSectionDescription {
    margin: 0;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }

.iconElementLarge {
  font-size: 20px; }

.iconElementMedium {
  font-size: 18px; }

.iconElementMarginRight {
  margin-right: 8px; }
  .iconElementMarginRightSmall {
    margin-right: 4px; }

.tabsContainer {
  padding-top: 16px; }

.tabsMenu {
  display: flex;
  text-align: center;
  width: 100%; }
  .tabsMenuElement {
    padding-top: 8px;
    width: 100%;
    cursor: pointer;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #9d9d9c; }
  .tabsMenuLine {
    height: 2px;
    background: #e6e6e6;
    margin-top: 6px; }
  .tabsMenuElement.active {
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px;
    color: #00a5e3; }
    .tabsMenuElement.active .tabsMenuLine {
      background-color: #00a5e3; }

.tabsContent {
  width: 100%;
  height: 100%;
  position: relative; }
  .tabsContentElement.hide {
    display: none; }
  .tabsContentElement.show {
    display: block; }

.listedTimeline {
  display: flex;
  flex-direction: column;
  gap: 24px; }
  .listedTimelineEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 328px; }
    .listedTimelineEmptyImage {
      margin-top: 8px;
      margin-bottom: 24px; }
    .listedTimelineEmptyTitle {
      margin: 0 0 16px 0;
      font-family: 'PeridotPE-SemiBold';
      font-size: 18px;
      line-height: 20px; }
    .listedTimelineEmptyDescription {
      margin: 0;
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px; }
  .listedTimelineContainer {
    padding: 16px; }
    .listedTimelineContainerTab {
      padding-top: 24px; }
  .listedTimelineLabel {
    display: flex;
    margin-left: -12px; }
  .listedTimelineHeader {
    margin: 0;
    margin-bottom: 16px;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    display: flex;
    gap: 8px; }
  .listedTimelineElement {
    padding: 6px 0;
    padding-bottom: 4px;
    border-bottom: 2px solid #e6e6e6;
    display: flex;
    width: 100%;
    align-items: center;
    cursor: pointer; }
    .listedTimelineElementIdle {
      cursor: default; }
    .listedTimelineElementImage {
      border-radius: 2px;
      margin-right: 8px; }
    .listedTimelineElementText {
      margin: 0;
      margin-right: auto;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px; }
    .listedTimelineElementTextDescription {
      margin: 0;
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px;
      color: #212121;
      letter-spacing: 0; }
    .listedTimelineElementEndText {
      margin: 0;
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px; }
    .listedTimelineElementIcon {
      margin-left: 4px;
      padding: 4px 8px; }
  .listedTimelineTooltip {
    pointer-events: all;
    cursor: pointer; }
    .listedTimelineTooltipContainer {
      width: 190px;
      -webkit-transform: translate(20%, -68%);
      -moz-transform: translate(20%, -68%);
      transform: translate(20%, -68%); }
      @media only screen and (max-width: 767px) {
        .listedTimelineTooltipContainer {
          display: none !important; } }

.cardWhite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  padding: 0 16px 16px 16px;
  background-color: #ffffff; }
  .cardWhite .greyIndication {
    padding: 12px;
    background-color: #f2f2f3;
    margin-top: 24px; }

.cardLabel {
  background-color: #e6e6e6;
  padding: 4px 8px;
  color: #212121;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  align-items: center;
  min-width: 80px;
  border-radius: 15px 0 15px 0;
  gap: 6px; }
  .cardLabelContainer {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
    gap: 4px;
    width: calc( 100% + 16px + 16px - 4px); }
    @media only screen and (max-width: 536px) {
      .cardLabelContainer {
        flex-direction: column; } }
    @media only screen and (max-width: 1117px) {
      .cardLabelContainer {
        flex-direction: column; } }
  .cardLabelDropdown {
    display: flex;
    background-color: #e6e6e6;
    padding: 4px 12px;
    border-radius: 0 0 16px 16px;
    align-items: center;
    justify-content: flex-start;
    position: relative; }
    @media only screen and (max-width: 536px) {
      .cardLabelDropdown {
        align-self: flex-start;
        -webkit-border-radius: 0 16px 16px 0;
        -moz-border-radius: 0 16px 16px 0;
        border-radius: 0 16px 16px 0; } }
    @media only screen and (max-width: 1117px) {
      .cardLabelDropdown {
        align-self: flex-start;
        -webkit-border-radius: 0 16px 16px 0;
        -moz-border-radius: 0 16px 16px 0;
        border-radius: 0 16px 16px 0; } }
    .cardLabelDropdownWithLink {
      min-width: 196px; }
    .cardLabelDropdownEntry {
      display: flex;
      gap: 6px;
      cursor: pointer;
      user-select: none;
      margin-left: auto; }
    .cardLabelDropdownText {
      display: flex;
      gap: 6px; }
    .cardLabelDropdownOpen {
      border-radius: 0; }
      @media only screen and (max-width: 536px) {
        .cardLabelDropdownOpen {
          align-self: flex-start;
          -webkit-border-radius: 0 16px 0 0;
          -moz-border-radius: 0 16px 0 0;
          border-radius: 0 16px 0 0; } }
      @media only screen and (max-width: 1117px) {
        .cardLabelDropdownOpen {
          align-self: flex-start;
          -webkit-border-radius: 0 16px 0 0;
          -moz-border-radius: 0 16px 0 0;
          border-radius: 0 16px 0 0; } }
    .cardLabelDropdownList {
      max-height: 128px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: #212121 #ffffff;
      /* Works on Chrome, Edge, and Safari */ }
      .cardLabelDropdownList::-webkit-scrollbar {
        width: 6px; }
      .cardLabelDropdownList::-webkit-scrollbar-track {
        background: #ffffff;
        border-radius: 20px; }
      .cardLabelDropdownList::-webkit-scrollbar-thumb {
        background-color: #212121;
        border-radius: 20px; }
    .cardLabelDropdownPanel {
      position: absolute;
      top: 100%;
      width: 100%;
      background-color: #f2f2f3;
      padding-top: 8px;
      padding-bottom: 8px;
      padding-right: 12px;
      border-radius: 0 0 16px 16px;
      margin-left: -12px;
      display: none; }

@-moz-document url-prefix() {
  .cardLabelDropdownPanel {
    padding-right: 10px; } }
      .cardLabelDropdownPanelOpen {
        display: block; }
    .cardLabelDropdownIcon {
      margin-right: -1px; }
      .cardLabelDropdownIconOpen {
        transform: rotateX(180deg); }
    .cardLabelDropdownElement {
      text-align: right;
      padding: 8px 16px 8px 0; }
      .cardLabelDropdownElement:first-child {
        padding-top: 0; }
      .cardLabelDropdownElement:last-child {
        padding-bottom: 0; }

.cardContent {
  display: flex;
  width: 100%;
  margin-top: 24px; }

.cardActions {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap; }
  .cardActionsSimple {
    justify-content: space-between; }
  .cardActionsPrimary {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #ffffff !important;
    background: #0ea600;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 16px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    padding: 12px 16px; }
    .cardActionsPrimary:hover {
      background-color: #0ea600;
      opacity: 0.85; }
    .cardActionsPrimary:visited {
      color: #0ea600;
      border-color: #0ea600; }
    .cardActionsPrimary:focus {
      -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
    .cardActionsPrimary.disabled {
      background-color: #848484;
      color: #ffffff;
      cursor: not-allowed; }
  @media only screen and (max-width: 570px) {
    .cardActionsResponsive {
      flex-basis: 100%; } }
  @media only screen and (min-width: 1024px) and (max-width: 1168px) {
    .cardActionsResponsive {
      flex-basis: 100%; } }
  .cardActionsSecondary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    color: #0ea600;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    padding: 6px;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid #0ea600;
    border-radius: 16px; }
    .cardActionsSecondary.secondaryButtonNormal {
      color: #212121;
      border: 1px solid #212121;
      padding: 12px;
      min-width: 160px;
      box-sizing: border-box;
      min-height: 32px; }
      @media only screen and (max-width: 767px) {
        .cardActionsSecondary.secondaryButtonNormal {
          min-width: 136px; } }
      .cardActionsSecondary.secondaryButtonNormal:hover {
        border-color: #0ea600;
        color: #0ea600;
        opacity: 0.85; }
      .cardActionsSecondary.secondaryButtonNormal:focus {
        -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
      .cardActionsSecondary.secondaryButtonNormal:visited {
        border-color: #0ea600;
        color: #0ea600; }
      .cardActionsSecondary.secondaryButtonNormal.largeAccounts {
        margin: 0; }
    .cardActionsSecondary:hover {
      color: #0ea600;
      border-color: #0ea600;
      opacity: 0.85; }
    .cardActionsSecondary:focus {
      -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
    .cardActionsSecondary:visited {
      border-color: #0ea600;
      color: #0ea600; }
    .cardActionsSecondarydisabled {
      color: #848484;
      border-color: #848484; }
  .cardActionsGroup {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-self: flex-start;
    flex-grow: 1; }
    .cardActionsGroupSimple {
      flex-grow: initial; }

.cardGift {
  display: flex;
  gap: 4px;
  margin-bottom: 16px; }
  .cardGiftText {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    align-self: flex-end; }

.cardInfo {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  align-items: center; }

.cardText {
  font-family: 'PeridotPE-Regular';
  font-size: 18px;
  line-height: 28px;
  margin: 0; }
  .cardTextIcon {
    width: 24px; }
  .cardTextWithIcon {
    display: flex;
    align-items: center;
    gap: 4px; }
    .cardTextWithIcon .cardGiftText,
    .cardTextWithIcon .cardText,
    .cardTextWithIcon .cardTextRed {
      font-family: 'PeridotPE-Regular';
      font-size: 18px;
      line-height: 28px; }
  .cardTextRed {
    color: #b84c1e; }
  .cardTextBottom {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    margin-top: 16px; }
  .cardTextNormal {
    font-family: 'PeridotPE-Regular';
    font-size: 18px;
    line-height: 28px; }
  .cardTextList {
    display: flex;
    flex-direction: column;
    gap: 16px; }
    .cardTextListElement {
      display: flex;
      flex-direction: column;
      gap: 4px; }
      .cardTextListElement .cardText {
        font-family: 'PeridotPE-SemiBold';
        font-size: 18px;
        line-height: 20px; }
      .cardTextListElement .cardTextNormal {
        font-family: 'PeridotPE-Regular';
        font-size: 18px;
        line-height: 28px; }
      .cardTextListElement .cardTextWithIcon .cardGiftText,
      .cardTextListElement .cardTextWithIcon .cardText,
      .cardTextListElement .cardTextWithIcon .cardTextRed {
        font-family: 'PeridotPE-Regular';
        font-size: 18px;
        line-height: 28px; }

.cardWarningSection {
  margin: 0;
  margin-top: 24px; }

.amount {
  align-self: flex-start; }
  .amountUnits {
    color: #212121;
    font-family: 'BTCosmo-Bold';
    font-size: 32px;
    line-height: 36px; }
  .amountCents {
    font-family: 'BTCosmo-Bold';
    font-size: 20px;
    line-height: 24px; }

:root {
  --circle-size: 14px;
  --circle-size-mobile: 32px; }

.simple-dropdown-wrapper {
  margin: auto 0;
  width: 100%;
  position: relative; }
  .simple-dropdown-wrapper.closed .simple-dropdown-close-button {
    transform: unset; }

.simple-dropdown-close-button {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  margin: 12px;
  transform: rotate(180deg);
  transition: transform 0.1s ease; }

.paymentSteps {
  margin-top: 32px;
  overflow-x: auto;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  @media only screen and (max-width: 767px) {
    .paymentSteps {
      scrollbar-color: rgba(0, 0, 0, 0.5) #e6e6e6;
      /* thumb and track color */
      scrollbar-width: thin; } }
  @media only screen and (max-width: 767px) {
    .paymentSteps::-webkit-scrollbar {
      width: 4px;
      height: 4px; } }
  @media only screen and (max-width: 767px) {
    .paymentSteps::-webkit-scrollbar-track {
      background: #e6e6e6; } }
  @media only screen and (max-width: 767px) {
    .paymentSteps::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease; } }
  @media only screen and (max-width: 767px) {
    .paymentSteps::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.6); } }
  .paymentSteps .paymentStepsContainer {
    padding: 16px 48px 58px; }
    @media only screen and (max-width: 767px) {
      .paymentSteps .paymentStepsContainer {
        padding: 16px 30px 0; } }
    .paymentSteps .paymentStepsContainer.fullSteps {
      padding: 16px 24px 58px; }
      @media only screen and (max-width: 767px) {
        .paymentSteps .paymentStepsContainer.fullSteps {
          padding: 16px 30px 0; } }
      .paymentSteps .paymentStepsContainer.fullSteps-fullPadding {
        padding: 16px 40px 58px; }
        @media only screen and (max-width: 767px) {
          .paymentSteps .paymentStepsContainer.fullSteps-fullPadding {
            padding: 16px 30px 0; } }
      .paymentSteps .paymentStepsContainer.fullSteps .paymentStepsBar .stepCol .stepText {
        font-size: 12px;
        line-height: 12px; }
    .paymentSteps .paymentStepsContainer .paymentStepsBar {
      display: flex;
      flex-flow: row;
      align-items: center;
      margin-top: 8px;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .paymentSteps .paymentStepsContainer .paymentStepsBar {
          flex-flow: column;
          align-items: flex-start; } }
      .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol {
        height: 2px;
        width: 100%;
        display: block;
        background-color: #9d9d9c;
        position: relative; }
        @media only screen and (max-width: 767px) {
          .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol {
            height: 64px;
            width: 2px; } }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol .stepText {
          color: #9d9d9c;
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          display: block;
          position: absolute;
          bottom: -13px;
          -webkit-transform: translateY(100%);
          -moz-transform: translateY(100%);
          transform: translateY(100%); }
          @media only screen and (max-width: 767px) {
            .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol .stepText {
              height: 64px;
              width: 2px;
              position: relative;
              bottom: 22px;
              -webkit-transform: unset;
              -moz-transform: unset;
              transform: unset; } }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.firstStep .stepText {
          left: -8px;
          text-align: left; }
          @media only screen and (max-width: 767px) {
            .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.firstStep .stepText {
              left: 24px; } }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.middleStep .stepText {
          left: 0;
          text-align: center;
          -webkit-transform: translate(-50%, 100%);
          -moz-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%); }
          @media only screen and (max-width: 767px) {
            .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.middleStep .stepText {
              -webkit-transform: unset;
              -moz-transform: unset;
              transform: unset;
              left: 24px; } }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.lastStep .stepText {
          right: -8px;
          text-align: right; }
          @media only screen and (max-width: 767px) {
            .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.lastStep .stepText {
              text-align: left;
              left: 24px; } }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed:after {
          background: #00a5e3;
          content: '';
          display: block;
          height: 2px;
          width: 0;
          z-index: 2;
          position: absolute;
          left: 0;
          top: 0;
          -webkit-transition: width 0.2s ease;
          -moz-transition: width 0.2s ease;
          transition: width 0.2s ease; }
          @media only screen and (max-width: 767px) {
            .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed:after {
              top: 1px;
              height: 64px;
              width: 2px; } }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.halfCompleted:after {
          width: 100%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.allCompleted:after {
          width: 200%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.fullCompleted:after {
          width: 300%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.largeCompleted:after {
          width: 400%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.xlargeCompleted:after {
          width: 500%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.xxlargeCompleted:after {
          width: 600%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.xlxlargeCompleted:after {
          width: 700%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.completed.xxlxlargeCompleted:after {
          width: 800%; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol:last-child {
          width: 0; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 16px;
          height: 16px;
          border: 1px solid #9d9d9c;
          box-sizing: border-box;
          background-color: #ffffff;
          border-radius: 100%;
          z-index: 4;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.active:before {
          background: #00a5e3;
          border: none; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.active .stepText {
          color: #00a5e3; }

.paymentContent {
  padding: 16px 24px 24px;
  background-color: #ffffff;
  display: flex;
  flex-flow: column;
  border-radius: 0 0 16px 16px; }
  .paymentContent .ribbonTitle {
    left: -28px !important; }
  .paymentContent.offerContent {
    background-color: #f2f2f3; }
  .paymentContent.firstElement {
    margin-top: 32px; }
  .paymentContent .buttonOuter {
    margin-top: 16px; }
    .paymentContent .buttonOuter.withShadow {
      position: relative;
      width: calc(100% + 48px);
      left: -24px;
      padding: 24px;
      margin-top: 0;
      border-top: 2px solid #e6e6e6; }
    .paymentContent .buttonOuter.withLink {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
    .paymentContent .buttonOuter.hidden {
      display: none !important; }
    .paymentContent .buttonOuter.withPadding {
      padding-left: 30px;
      max-width: 434px;
      margin: -12px 0 12px; }
  .paymentContent .paymentContentTopMessage {
    display: block;
    margin-bottom: 16px;
    margin-top: -16px;
    text-align: right; }
  .paymentContent .paypentParagraphBottom {
    margin: 0; }
  .paymentContent .paymentContentTitle {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 12px; }
    .paymentContent .paymentContentTitle.withMediumText {
      margin-bottom: 4px; }
    .paymentContent .paymentContentTitle.withParagraphs p {
      font-size: 16px;
      line-height: 18px; }
    .paymentContent .paymentContentTitle.withParagraphs a {
      color: #00a5e3;
      text-decoration: underline; }
      .paymentContent .paymentContentTitle.withParagraphs a:hover {
        text-decoration: none; }
  .paymentContent .buttonWithTooltip {
    position: relative; }
    .paymentContent .buttonWithTooltip .imgTooltip {
      position: absolute;
      left: initial;
      right: -16px;
      top: 50%;
      width: 20px;
      min-width: 20px;
      height: 20px;
      font-family: "BTCosmo-Bold";
      font-size: 12px;
      line-height: 16px;
      margin-left: 0;
      background-color: #eabf68;
      color: #ffffff;
      padding: 0;
      text-align: center;
      border: 1px solid #eabf68;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 100%;
      -webkit-transform: translate(50%, -50%);
      -moz-transform: translate(50%, -50%);
      transform: translate(50%, -50%); }
  .paymentContent .imgTooltip {
    position: relative;
    left: 30px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    font-family: "BTCosmo-Bold";
    font-size: 14px;
    line-height: 18px;
    margin-left: auto;
    color: #212121;
    border: 1px solid #212121;
    padding: 0;
    text-align: center;
    border-radius: 100%; }
    @media only screen and (max-width: 767px) {
      .paymentContent .imgTooltip {
        width: 14px;
        height: 14px;
        min-width: 14px;
        font-size: 12px;
        line-height: 14px;
        position: relative;
        top: -28px; } }
  .paymentContent .billActions {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 16px; }
    @media only screen and (max-width: 767px) {
      .paymentContent .billActions {
        flex-flow: column;
        align-items: left; } }
    .paymentContent .billActions-spaced {
      justify-content: space-between; }
    .paymentContent .billActions.p2pActions {
      max-width: 532px;
      justify-content: flex-end;
      margin: 0 auto; }
      .paymentContent .billActions.p2pActions .billAction {
        margin-right: 12px; }
        .paymentContent .billActions.p2pActions .billAction:last-child {
          margin-right: 0; }
    .paymentContent .billActions.flexRight {
      margin-left: auto; }
      @media only screen and (max-width: 767px) {
        .paymentContent .billActions.flexRight {
          align-items: flex-start;
          margin-left: 0; } }
      .paymentContent .billActions.flexRight .billAction {
        padding-right: 24px; }
        .paymentContent .billActions.flexRight .billAction:last-child {
          padding-right: 0; }
    .paymentContent .billActions .billAction {
      color: #0ea600;
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      padding: 12px 8px;
      border-radius: 16px;
      padding: 12px 8px;
      color: #0ea600;
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      width: "unset";
      display: block;
      justify-content: center;
      align-items: center;
      border-radius: 16px;
      display: flex;
      align-items: center; }
      @media only screen and (max-width: 767px) {
        .paymentContent .billActions .billAction {
          margin: 4px 0; } }
      .paymentContent .billActions .billAction:hover {
        color: rgba(0, 109, 41, 0.85);
        z-index: 1; }
      .paymentContent .billActions .billAction:focus {
        -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        z-index: 2; }
      .paymentContent .billActions .billAction-notVisible {
        visibility: hidden; }
      .paymentContent .billActions .billAction.hidden {
        display: none; }
      .paymentContent .billActions .billAction.absoluteLink {
        position: absolute;
        bottom: 8px; }
      .paymentContent .billActions .billAction.whiteLink {
        display: inline-block;
        width: auto;
        color: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 16px;
        margin-left: 8px;
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 16px; }
        @media only screen and (max-width: 767px) {
          .paymentContent .billActions .billAction.whiteLink {
            margin-left: 0;
            display: block;
            width: 100%;
            margin-top: 12px; } }
      .paymentContent .billActions .billAction.blueTooltipLink {
        color: #212121;
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 16px;
        letter-spacing: 0;
        margin-top: 4px; }
      .paymentContent .billActions .billAction.blueLink {
        display: inline-block;
        width: auto;
        color: #212121;
        margin-left: 24px;
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 16px; }
        @media only screen and (max-width: 767px) {
          .paymentContent .billActions .billAction.blueLink {
            margin-left: 0;
            display: block;
            width: 100%;
            margin-top: 12px; } }
      .paymentContent .billActions .billAction.inline {
        display: inline-block;
        width: auto; }
      .paymentContent .billActions .billAction.blue {
        color: #212121 !important;
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 16px; }
      .paymentContent .billActions .billAction-contained {
        max-width: 148px; }
        @media only screen and (max-width: 767px) {
          .paymentContent .billActions .billAction-contained {
            max-width: none; } }
      .paymentContent .billActions .billAction i {
        margin-right: 6px;
        font-size: 24px; }
      .paymentContent .billActions .billAction img {
        font-size: 24px;
        width: 24px;
        margin-right: 6px; }
  .paymentContent .paymentWithIcon {
    position: relative;
    padding-left: 48px;
    display: flex;
    flex-flow: column;
    margin-bottom: 16px; }
    .paymentContent .paymentWithIcon img {
      height: 32px;
      position: absolute;
      left: 0;
      top: 0; }
    .paymentContent .paymentWithIcon .paymentWithIconTitle {
      font-family: 'BTCosmo-Bold';
      font-size: 16px;
      line-height: 20px;
      margin-bottom: 4px; }
    .paymentContent .paymentWithIcon .paymentWithIconDescription {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px; }
      .paymentContent .paymentWithIcon .paymentWithIconDescription.largeTopMargin {
        margin-top: 16px !important;
        padding-top: 16px;
        border-top: 1px solid #f2f2f3; }
  .paymentContent .fixedBottom {
    margin: 0 24px;
    padding-bottom: 24px;
    background-color: #ffffff;
    border-radius: 0 0 16px 16px;
    border-top: 1px solid #00a5e3; }
    .paymentContent .fixedBottom .acceptTerms .md-checkbox {
      margin: 0; }
    .paymentContent .fixedBottom.relativeBottom {
      position: relative;
      padding-top: 0;
      margin-top: 16px; }
  .paymentContent .paymentDetails {
    display: flex;
    flex-flow: column;
    padding-right: 30px; }
    .paymentContent .paymentDetails .switchDate {
      display: block;
      position: relative;
      margin-top: 12px;
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px;
      width: 100%;
      max-width: 490px; }
      @media only screen and (max-width: 767px) {
        .paymentContent .paymentDetails .switchDate {
          max-width: 100%; } }
      .paymentContent .paymentDetails .switchDate.withAlert {
        display: flex;
        align-items: flex-start;
        color: #212121;
        background-color: #f4f8fb;
        border: 1px solid #2775b2;
        padding: 10px 16px;
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        max-width: 100%;
        border-radius: 16px; }
        .paymentContent .paymentDetails .switchDate.withAlert img {
          margin-right: 6px; }
    .paymentContent .paymentDetails.renewDetails {
      padding: 24px;
      overflow-y: auto; }
      @media only screen and (max-width: 767px) {
        .paymentContent .paymentDetails.renewDetails {
          height: 55vh;
          min-height: 0; } }
      .paymentContent .paymentDetails.renewDetails.renewRateplan {
        height: initial;
        min-height: initial;
        padding-bottom: initial; }
        .paymentContent .paymentDetails.renewDetails.renewRateplan .programDetails {
          padding-bottom: 0;
          border-bottom: 1px solid #e6e6e6;
          margin-bottom: 12px; }
          .paymentContent .paymentDetails.renewDetails.renewRateplan .programDetails:last-child {
            border-bottom: none; }
      .paymentContent .paymentDetails.renewDetails.fixedUpgradeOffers {
        height: auto; }
      .paymentContent .paymentDetails.renewDetails.withoutYOverflow {
        height: auto !important;
        min-height: 0;
        padding: 8px 8px 0; }
      .paymentContent .paymentDetails.renewDetails.withMaxHeight {
        max-height: 450px; }
      .paymentContent .paymentDetails.renewDetails.simplePaymentList {
        height: auto;
        min-height: 0;
        padding: 24px 24px 16px; }
      .paymentContent .paymentDetails.renewDetails .boldTitle {
        font-family: 'PeridotPE-SemiBold';
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 24px; }
      .paymentContent .paymentDetails.renewDetails .contactRows {
        display: flex;
        flex-direction: column; }
        .paymentContent .paymentDetails.renewDetails .contactRows.withBorder .contactRow {
          margin-top: 0;
          margin-bottom: 16px;
          padding-bottom: 16px;
          border-bottom: 2px solid rgba(33, 33, 33, 0.1); }
          .paymentContent .paymentDetails.renewDetails .contactRows.withBorder .contactRow .boldTitle {
            margin-top: 0 !important; }
          .paymentContent .paymentDetails.renewDetails .contactRows.withBorder .contactRow:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border: none; }
          .paymentContent .paymentDetails.renewDetails .contactRows.withBorder .contactRow:before {
            display: none; }
        .paymentContent .paymentDetails.renewDetails .contactRows .contactRow {
          display: flex;
          flex-direction: column;
          margin-top: 16px;
          position: relative; }
          .paymentContent .paymentDetails.renewDetails .contactRows .contactRow .boldTitle {
            margin-top: 18px !important; }
          .paymentContent .paymentDetails.renewDetails .contactRows .contactRow:before {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 1px;
            top: 0;
            left: 0;
            background: #00a5e3; }
          .paymentContent .paymentDetails.renewDetails .contactRows .contactRow .contactContent {
            padding-left: 12px;
            display: flex;
            flex-direction: column; }
            .paymentContent .paymentDetails.renewDetails .contactRows .contactRow .contactContent span {
              display: block;
              margin-bottom: 8px;
              font-size: 16px;
              line-height: 18px; }
            .paymentContent .paymentDetails.renewDetails .contactRows .contactRow .contactContent .buttonOuter {
              margin-top: 8px; }
      .paymentContent .paymentDetails.renewDetails .programDetails {
        padding-bottom: 0;
        border-bottom: none; }
        .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsTitle {
          display: block;
          font-size: 16px;
          line-height: 18px;
          margin-bottom: 4px; }
          .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsTitle.flexColumn {
            margin-bottom: 8px; }
            .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsTitle.flexColumn:last-child {
              margin-bottom: 0; }
          .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsTitle .programDetailsSubtitle {
            display: block;
            margin-top: 2px;
            font-family: 'PeridotPE-Regular';
            font-size: 14px;
            line-height: 20px; }
            .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsTitle .programDetailsSubtitle.small {
              font-family: 'PeridotPE-Regular';
              font-size: 12px;
              line-height: 16px;
              max-width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow-x: hidden; }
        .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol {
          margin: 2px 0; }
          .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol .programDetailsColLeft {
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px; }
          .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol .programDetailsColRight {
            margin-left: auto;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            padding-right: 0; }
          .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol p {
            margin: 0;
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            opacity: 0.6;
            display: block;
            margin-bottom: 4px; }
            .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol p:last-child {
              margin-bottom: 0; }
            .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol p a {
              text-decoration: underline;
              color: #00a5e3;
              font-family: 'PeridotPE-Regular';
              font-size: 12px;
              line-height: 16px; }
              .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol p a:hover {
                text-decoration: none; }
        .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer {
          display: flex;
          flex-direction: column;
          padding-left: 16px;
          margin-bottom: 16px; }
          .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer .programDetailsGroup {
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom: 1px solid #e6e6e6; }
            .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer .programDetailsGroup:last-child {
              padding-bottom: 0;
              margin-bottom: 0;
              border-bottom: none; }
            .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer .programDetailsGroup span {
              display: flex;
              align-items: center;
              margin-bottom: 6px;
              font-family: 'PeridotPE-Regular';
              font-size: 16px;
              line-height: 24px; }
              .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer .programDetailsGroup span:last-child {
                margin-bottom: 0; }
              .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer .programDetailsGroup span.withoutIcon {
                padding-left: 20px; }
              .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer .programDetailsGroup span img {
                width: 18px;
                height: 18px;
                display: block;
                object-fit: contain;
                object-position: center;
                margin-right: 4px; }
              .paymentContent .paymentDetails.renewDetails .programDetails .groupContainer .programDetailsGroup span i {
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 4px;
                font-size: 18px; }
    .paymentContent .paymentDetails.chooseOption {
      padding-right: 0; }
      .paymentContent .paymentDetails.chooseOption.allBorders .paymentDetailsCol:last-child {
        border-bottom: rgba(33, 33, 33, 0.1);
        padding-bottom: 12px; }
      .paymentContent .paymentDetails.chooseOption.allBorders .paymentDetailsCol strong {
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 24px; }
      .paymentContent .paymentDetails.chooseOption .paymentDetailsCol {
        padding: 12px 0;
        cursor: pointer; }
        .paymentContent .paymentDetails.chooseOption .paymentDetailsCol i {
          margin-left: auto;
          position: relative;
          top: 4px; }
        .paymentContent .paymentDetails.chooseOption .paymentDetailsCol span {
          min-width: 100%;
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px; }
      .paymentContent .paymentDetails.chooseOption .smallText {
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        overflow: auto;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        width: 100%;
        -webkit-box-orient: vertical;
        display: -webkit-box; }
        .paymentContent .paymentDetails.chooseOption .smallText.withOneLine {
          -webkit-line-clamp: 1;
          height: 48px; }
        .paymentContent .paymentDetails.chooseOption .smallText.withAutoHeight {
          height: auto; }
        .paymentContent .paymentDetails.chooseOption .smallTextEllipsis {
          display: block;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 360px;
          overflow: hidden; }
    .paymentContent .paymentDetails .paymentDue {
      padding-left: 40px;
      position: relative;
      margin-top: 8px;
      background-color: #fefcf7;
      border: 1px solid #eabf68; }
      .paymentContent .paymentDetails .paymentDue img {
        margin: 8px;
        height: 24px;
        position: absolute;
        left: 0;
        top: 0; }
    .paymentContent .paymentDetails .paymentBox .paymentDue {
      margin-top: 12px; }
    .paymentContent .paymentDetails .paymentDetailsCol {
      display: flex;
      flex-flow: row;
      padding: 16px 0;
      position: relative;
      border-bottom: 1px solid rgba(33, 33, 33, 0.1);
      color: #212121;
      gap: 8px; }
      .paymentContent .paymentDetails .paymentDetailsCol a {
        align-self: flex-end; }
      @media only screen and (max-width: 767px) {
        .paymentContent .paymentDetails .paymentDetailsCol {
          flex-direction: column; } }
      .paymentContent .paymentDetails .paymentDetailsCol i {
        font-style: normal; }
      .paymentContent .paymentDetails .paymentDetailsCol.withoutBorder {
        border: none; }
      .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue) {
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px;
        min-width: 42%; }
        @media only screen and (max-width: 767px) {
          .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue) {
            min-width: 50%; } }
        .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue).inline {
          font-weight: normal;
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px; }
        .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue).withStrongText {
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px; }
          .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue).withStrongText strong {
            font-family: 'PeridotPE-Bold';
            font-size: 16px;
            line-height: 24px; }
        .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue) strong {
          white-space: normal; }
      .paymentContent .paymentDetails .paymentDetailsCol strong {
        font-weight: normal;
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
        @media only screen and (max-width: 767px) {
          .paymentContent .paymentDetails .paymentDetailsCol strong {
            text-overflow: initial;
            overflow-wrap: break-word;
            white-space: initial; } }

.paymentBox {
  padding: 16px;
  background-color: #e6e6e6;
  display: flex;
  flex-flow: column;
  gap: 8px;
  margin-top: 24px;
  border-radius: 16px; }
  .paymentBox.mediumBox {
    max-width: 340px;
    width: 100%;
    margin: auto; }
  .paymentBox.plainBox {
    padding: 0;
    background-color: #ffffff;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }
  .paymentBox.withPaddingRight {
    padding-right: 44px !important; }
  .paymentBox.withPadding {
    margin-top: 12px;
    padding-right: 44px; }
    .paymentBox.withPadding .inputContainer {
      position: relative; }
      .paymentBox.withPadding .inputContainer .imgTooltip {
        position: absolute;
        left: inherit;
        right: -30px;
        top: 12px; }
        .paymentBox.withPadding .inputContainer .imgTooltip.insideInput {
          right: 8px; }
  .paymentBox.withMultipleInputs .inputContainer {
    margin-top: 16px; }
    .paymentBox.withMultipleInputs .inputContainer:last-child {
      margin-top: 24px; }
  .paymentBox.withNumbersOnly {
    padding: 24px 34px; }
    @media only screen and (max-width: 767px) {
      .paymentBox.withNumbersOnly {
        padding: 24px 8px; } }
  .paymentBox.withTitle {
    margin-top: 16px;
    padding: 16px 16px 24px; }
    .paymentBox.withTitle .listTitle {
      margin-bottom: 16px;
      font-family: 'PeridotPE-SemiBold';
      font-size: 18px;
      line-height: 20px; }
  .paymentBox .numbersRow {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between; }
    .paymentBox .numbersRow.dateRow {
      justify-content: center; }
      .paymentBox .numbersRow.dateRow li {
        margin: 0 30px; }
    .paymentBox .numbersRow li {
      font-family: 'BTCosmo-Bold';
      font-size: 25px;
      line-height: 28px;
      color: #212121;
      position: relative;
      width: 60px;
      text-align: center;
      z-index: 0;
      cursor: pointer; }
      .paymentBox .numbersRow li.active {
        color: #ffffff; }
        .paymentBox .numbersRow li.active:before {
          width: 60px;
          height: 60px;
          content: '';
          display: block;
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: -1;
          background: #00a5e3;
          border-radius: 100%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
      .paymentBox .numbersRow li span {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px;
        width: 100%;
        display: block; }
        .paymentBox .numbersRow li span.strong {
          font-family: 'PeridotPE-SemiBold';
          font-size: 12px;
          line-height: 16px; }
  .paymentBox .paymentBoxTitle {
    margin-bottom: 12px; }
  .paymentBox .paymentInputTitle {
    margin-bottom: 8px;
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }

.successIcon {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center; }

.withLabel {
  display: inline-flex;
  width: auto;
  position: relative;
  margin-bottom: 4px; }

.autoOption,
.myautoOption {
  border-radius: 0 0 4px 4px; }

.simpleParagraph {
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px;
  display: flex;
  margin: 32px 0 8px; }

.withoutCard {
  position: relative;
  margin-top: 8px;
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px; }

.acceptTerms {
  margin-top: 16px; }
  .acceptTerms.acceptNow {
    margin-top: 24px;
    margin-bottom: -12px; }
  .acceptTerms .smallText {
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px; }
  .acceptTerms label {
    padding: 8px;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px; }
  .acceptTerms .md-radio label {
    padding: 0 30px; }

.acceptTermsBottom {
  margin-top: 24px; }
  .acceptTermsBottom .smallText {
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px; }

.acceptTermsBottom-label {
  color: #212121;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 8px; }

.paymentMethod .md-radio label:before {
  top: 0; }

.paymentMethod .md-radio label:after {
  top: 4px; }

.paymentMethod .paymentMethodCol.withBorder {
  position: relative;
  display: flex;
  flex-flow: row;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e6e6e6; }
  .paymentMethod .paymentMethodCol.withBorder:last-child, .paymentMethod .paymentMethodCol.withBorder.withInfoText {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0; }
  .paymentMethod .paymentMethodCol.withBorder img {
    flex: 0 0 25px;
    margin-left: auto; }

.paymentMethod .paymentMethodCol.withContextual {
  flex-flow: row wrap; }
  .paymentMethod .paymentMethodCol.withContextual > * {
    flex: 1 1 calc(100% - 25px); }

.paymentMethod .methodWithRadios {
  padding-left: 30px; }
  .paymentMethod .methodWithRadios .md-radio {
    margin-top: 16px; }

.paymentMethod .paymentSelectContainer {
  position: relative;
  display: flex;
  flex-flow: column;
  margin: 16px 30px 24px;
  max-width: 412px !important; }
  @media only screen and (max-width: 767px) {
    .paymentMethod .paymentSelectContainer {
      margin: 12px; }
      .paymentMethod .paymentSelectContainer .inlineRadios {
        flex-flow: column;
        align-items: flex-start; } }
  .paymentMethod .paymentSelectContainer .paymentSelectTitle {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    display: flex;
    margin-bottom: 8px; }
  .paymentMethod .paymentSelectContainer .ddFilter {
    border: none; }

.orSeparator {
  margin: 32px 0;
  position: relative;
  z-index: 0;
  height: 1px;
  background-color: #9d9d9c; }
  .orSeparator span {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    width: 52px;
    height: 24px;
    background-color: #ffffff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

.paymentPopupContent {
  border-radius: 16px; }
  .paymentPopupContent.noMarginBottom {
    margin-bottom: initial; }

.paymentPopupContent.recurringPopup,
.recurringPaymentSteps.recurringPopup,
.recurringPaymentSteps2.recurringPopup {
  margin-bottom: 0; }
  .paymentPopupContent.recurringPopup .paymentContent .paymentDetails:not(.greyPaymentDetails),
  .recurringPaymentSteps.recurringPopup .paymentContent .paymentDetails:not(.greyPaymentDetails),
  .recurringPaymentSteps2.recurringPopup .paymentContent .paymentDetails:not(.greyPaymentDetails) {
    padding-right: 0; }
  .paymentPopupContent.recurringPopup .paymentContent .imgTooltip,
  .recurringPaymentSteps.recurringPopup .paymentContent .imgTooltip,
  .recurringPaymentSteps2.recurringPopup .paymentContent .imgTooltip {
    left: 0; }

.recurringPaymentPromptBox {
  background: #00a5e3;
  padding: 1px;
  position: relative;
  overflow: hidden;
  margin-top: 32px;
  border-radius: 17px; }
  .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer {
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px; }
    .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent {
      display: flex;
      flex-direction: column;
      padding: 16px;
      position: relative; }
      .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .greenCheckbox {
        position: absolute;
        left: 16px;
        top: 16px; }
      .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText {
        margin-top: 16px;
        display: flex;
        flex-direction: column; }
        .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxTitle {
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          display: flex;
          justify-content: center;
          text-align: center;
          margin-bottom: 16px; }
        .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxSubtitle {
          font-size: 16px;
          display: flex;
          justify-content: center;
          text-align: center; }
        .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxDetailsInner {
          display: flex;
          flex-direction: column;
          padding-top: 16px;
          margin-top: 16px;
          border-top: 1px solid rgba(61, 82, 101, 0.12); }
          .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxDetailsInner .recurringPaymentPromptBoxDetailsTitle {
            font-family: 'PeridotPE-SemiBold';
            font-size: 18px;
            line-height: 20px; }
          .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxDetailsInner .recurringPaymentPromptBoxDetailsSubtitle {
            margin-top: 12px;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px; }
          .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxDetailsInner .recurringPaymentPromptBoxDetailsText {
            margin-top: 4px;
            font-family: 'PeridotPE-Regular';
            font-size: 14px;
            line-height: 20px; }

.recurringTextBox {
  display: flex;
  flex-direction: column; }
  .recurringTextBox .recurringTextBoxTitle {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }
  .recurringTextBox .recurringTextBoxText {
    margin-top: 4px; }

.simpleGreyBox {
  padding: 12px;
  background-color: #e6e6e6;
  display: block;
  margin-top: 32px;
  border-radius: 16px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }
  .simpleGreyBox strong {
    display: inline-block;
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px;
    font-weight: normal; }

.loader-mask {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: table;
  opacity: 1; }

.loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh; }

.loader {
  animation: rotation 1.2s infinite linear;
  width: 64px;
  height: 64px; }

@keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-359deg); } }

.lightDivider {
  width: 100%;
  margin: 24px 0 24px;
  height: 1px;
  background-color: #e6e6e6; }
  .lightDivider.noMargin {
    margin: 0; }

.darkDivider {
  width: 100%;
  margin: 24px 0 24px;
  height: 1px;
  background-color: #9d9d9c; }
  .darkDivider.noMargin {
    margin: 0; }

.greenButton {
  height: 40px;
  min-width: 160px;
  background-color: #ffffff;
  border: 1px solid #0e8103;
  color: #0e8103;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  .greenButton.disabled {
    color: #848484;
    border-color: #848484;
    pointer-events: none;
    cursor: not-allowed; }
  .greenButton.greenButtonFullWidth {
    width: 100%; }

.gapContent {
  display: flex;
  flex-direction: column;
  gap: 12px; }

.paragraphSmall {
  font-family: 'PeridotPE-Regular';
  font-size: 12px;
  line-height: 16px; }

.simActivationForm .emailCheckBoxContainer {
  align-items: flex-start !important; }

.simActivationForm .checkboxAlignTop {
  align-items: flex-start !important; }

.simActivationForm .buttonGroup.alignTop {
  align-items: flex-start !important; }

.simActivationForm .metadataTwoColumnRow {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 24px;
  align-items: flex-start; }

.simActivationForm
.metadataTwoColumnRow
.digitalOnboardingDetailsFormInputContainer {
  width: 50%;
  position: relative; }

.simActivationForm
.metadataTwoColumnRow
.digitalOnboardingDetailsFormInputContainer
.errorTextSmall {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  pointer-events: none;
  line-height: 16px;
  white-space: nowrap; }

.errorTextSmall.hidden {
  display: none; }

@media (max-width: 768px) {
  .simActivationForm .metadataTwoColumnRow {
    flex-direction: column; }
  .simActivationForm
.metadataTwoColumnRow
.digitalOnboardingDetailsFormInputContainer {
    width: 100%; } }

.simActivationForm .digitalOnboardingDetailsFormTitle.metadataTitle + div {
  margin-top: -16px; }

.digitalOnboardingDetailsFormContainer
.emailCheckBoxContainer.alignCheckboxStart {
  display: flex;
  align-items: flex-start;
  gap: 8px; }

.digitalOnboardingDetailsFormContainer
.emailCheckBoxContainer.alignCheckboxStart
.emailCheckBox {
  height: auto !important;
  display: flex;
  align-items: flex-start;
  padding-top: 2px; }

.digitalOnboardingDetailsFormContainer
.emailCheckBoxContainer.alignCheckboxStart
.md-checkbox {
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important; }

.digitalOnboardingDetailsFormContainer
.emailCheckBoxContainer.alignCheckboxStart
.label {
  margin: 4px !important;
  line-height: 20px;
  display: block; }

.digitalOnboardingHeaderRow.hasExitIcon {
  display: grid !important;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  width: 100%; }

.digitalOnboardingHeaderRow.hasExitIcon .header-title {
  justify-self: center;
  margin: 0 !important; }

@media (max-width: 768px) {
  body.activationPhotoStep .digitalOnboardingDetailsFormColumn.fullWidth {
    display: flex;
    flex-direction: column; }
  body.activationPhotoStep .digitalOnboardingDetailsFormTitle {
    display: none !important; }
  body.activationPhotoStep .digitalOnboardingDetailsFormColumnText.smallGap {
    order: 2; }
  body.activationPhotoStep .documentPhotoContainer {
    order: 1; }
  body.activationPhotoStep .buttonGroup {
    order: 3; } }

@media (max-width: 768px) {
  body.activationPhotoNoButton .digitalOnboardingDetailsFormTitle {
    display: none !important; }
  body.activationPhotoNoButton .digitalOnboardingDetailsFormColumn.fullWidth {
    display: flex !important;
    flex-direction: column !important; }
  body.activationPhotoNoButton .photoContainer {
    display: contents !important; }
  body.activationPhotoNoButton .documentPhotoContainer {
    order: 1 !important; }
  body.activationPhotoNoButton
.digitalOnboardingDetailsFormColumnText.smallGap {
    order: 2 !important; }
  body.activationPhotoNoButton .cameraButtonWrapper {
    order: 3 !important;
    margin-top: 16px !important;
    padding-bottom: 24px !important;
    position: static !important; } }

@media (max-width: 768px) {
  body.activationPhotoWithAttachment .digitalOnboardingDetailsFormTitle {
    display: none !important; }
  body.activationPhotoWithAttachment
.digitalOnboardingDetailsFormColumn.fullWidth {
    display: flex !important;
    flex-direction: column !important; }
  body.activationPhotoWithAttachment .documentPhotoContainer {
    order: 1 !important; }
  body.activationPhotoWithAttachment
.digitalOnboardingDetailsFormColumnText.smallGap {
    order: 2 !important;
    margin-top: 16px !important; }
  body.activationPhotoWithAttachment .cameraButtonWrapper {
    order: 3 !important;
    margin-top: 16px !important;
    position: static !important; }
  body.activationPhotoWithAttachment .attachFileContainer {
    order: 4 !important; } }

.eSignFooterCta {
  max-width: 400px;
  width: 100%; }

header.spaHeader--appView .digitalOnboardingTitle-large {
  display: none; }

header.spaHeader--appView .exitIcon,
header.spaHeader--appView .spaAppInlineTitle,
header.spaHeader--appView .spaAppRightSpacer,
header.spaHeader--appView .spaAppRowBreak,
header.spaHeader--appView .spaAppMobileLogo {
  display: none; }

header.spaHeader--appView .digitalOnboardingLogo.small {
  display: block; }

header.spaHeader--appView .digitalOnboardingHeaderRow {
  display: flex;
  align-items: center; }

header.spaHeader--appView .digitalOnboardingHeaderRow.hasExitIcon {
  display: flex !important;
  grid-template-columns: unset !important;
  align-items: center !important; }

header.spaHeader--appView .header-title {
  margin-right: auto; }

header.spaHeader--appView .headerFlag.right {
  margin-left: auto; }

header.spaHeader--appView .digitalOnboardingLogo.small {
  width: 210px;
  display: block;
  background-repeat: no-repeat;
  background-position: center; }

header.spaHeader--appView .header-title {
  overflow: hidden;
  transform: translateZ(0); }

@media (min-width: 769px) {
  header.spaHeader--appView
.digitalOnboardingHeaderRow.hasExitIcon
.header-title {
    margin-left: 24px !important;
    margin-right: auto !important;
    justify-self: unset !important; } }

@media (max-width: 768px) {
  header.spaHeader--appView .digitalOnboardingHeaderRow.hasExitIcon {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    padding: 8px 12px !important;
    height: auto !important;
    position: relative !important; }
  header.spaHeader--appView .spaAppRightSpacer,
  header.spaHeader--appView .spaAppRowBreak {
    display: none !important; }
  header.spaHeader--appView .digitalOnboardingLogo.small {
    display: none !important; }
  header.spaHeader--appView .exitIcon,
  header.spaHeader--appView .spaAppInlineTitle {
    display: none !important; }
  header.spaHeader--appView .exitIcon {
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
    justify-self: start;
    align-self: center; }
  header.spaHeader--appView .spaAppInlineTitle {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    font-size: 26px !important;
    line-height: 1.15 !important;
    max-width: 100%;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important; }
  header.spaHeader--appView .header-title {
    grid-column: 1;
    grid-row: 2;
    justify-self: start !important;
    align-self: center;
    margin: 0 !important;
    margin-left: 10px !important;
    transform: translateX(-5px) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    z-index: 2 !important; }
  header.spaHeader--appView .spaAppMobileLogo {
    width: 128px !important;
    height: 37px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    display: block !important; }
  header.spaHeader--appView .headerFlag.right {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    position: static !important;
    right: auto !important;
    height: 20px !important;
    margin-right: 4px !important;
    width: 30px !important; }
  header.digitalOnboardingHeader.spaHeader--appView {
    padding-top: 0 !important; } }

body.selfieCaptureView .documentPhotoContainer {
  position: relative;
  width: 100%;
  height: clamp(360px, 55vh, 520px);
  overflow: hidden;
  display: block; }

body.selfieCaptureView .documentPhotoContainer #spotlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }

body.selfieCaptureView .documentPhotoContainer #video {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none; }

body.selfieCaptureView .documentPhotoContainer .corner-border.oval {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 85%;
  max-height: 348px;
  aspect-ratio: 281 / 348;
  width: auto;
  max-width: 90%;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2; }

@media (min-width: 1024px) {
  body.selfieCaptureView .documentPhotoContainer .corner-border.oval {
    height: 92%;
    max-height: 420px;
    max-width: 80%; } }

body.selfieCaptureView .documentPhotoContainer .documentVideo {
  transform: none !important; }

body.selfieCaptureView .camera-debug {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.8;
  text-align: center; }

body.selfieCaptureView .documentPhotoContainer .corner-border {
  z-index: 2;
  pointer-events: none; }

@media screen and (max-width: 480px) {
  .digitalOnboarding
.digitalOnboardingBody
.digitalOnboardingDetailsFormContainer
.digitalOnboardingDetailsFormColumn
.documentPhotoContainer
.corner-border.vertical.open-more {
    max-width: 250px !important; } }

.loader-overlay-top {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none; }

.loader-overlay-top {
  display: none; }

.loader-overlay-top.active,
.loader-overlay-top.show {
  display: flex; }

.loader-mask {
  display: flex;
  align-items: center;
  justify-content: center; }

.loader-center {
  display: flex;
  align-items: center;
  justify-content: center; }

#validityBlock {
  position: relative;
  display: flex;
  flex-direction: column; }

#validityBlock.has-loader .inline-over-text {
  position: relative;
  height: 56px;
  margin-bottom: 24px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5; }

#validityBlock .inline-over-text {
  display: none;
  height: 0;
  margin-bottom: 0; }

body.selfieCaptureView .digitalOnboardingDetailsFormTitle {
  min-height: 24px;
  display: block; }

@media (max-width: 768px) {
  body.selfieCaptureView .digitalOnboardingDetailsFormTitle {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important; } }

@media (max-width: 480px) {
  body.selfieCaptureView.digitalOnboarding
.digitalOnboardingBody
.digitalOnboardingDetailsForm {
    padding: 0px 0px 64px !important; }
  body.selfieCaptureView .digitalOnboardingDetailsFormTitle {
    margin-top: 0 !important;
    margin-bottom: 8px !important; }
  body.selfieCaptureView .digitalOnboardingDetailsFormColumnText.smallGap {
    padding-left: 16px !important;
    padding-right: 16px !important; } }

@media (min-width: 481px) {
  body.selfieCaptureView.digitalOnboarding
.digitalOnboardingBody
.digitalOnboardingDetailsForm {
    padding-top: 0 !important; } }

.digitalOnboardingBox.eSignDocsList .box1 .firstHalf {
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  min-width: 0 !important; }

.digitalOnboardingBox.eSignDocsList .box1 .firstHalf .spaFileIcon {
  grid-column: 1 !important;
  grid-row: 1 !important; }

.digitalOnboardingBox.eSignDocsList .box1 .firstHalf span:last-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important; }

.mt-16 {
  margin-top: 16px !important; }

*,
*:before,
*:after {
  box-sizing: border-box; }

html {
  -webkit-filter: none !important;
  -moz-filter: none !important;
  filter: none !important; }

a {
  color: #0ea600;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease; }
  a.acceptLink {
    color: #212121;
    text-decoration: underline;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px; }
    a.acceptLink:visited, a.acceptLink:hover, a.acceptLink:focus, a.acceptLink:active {
      color: #212121;
      text-decoration: none; }
  a.blueLink {
    color: #212121 !important; }

body .rolesMessage img {
  width: 64px;
  height: 64px;
  padding: 5px 0;
  margin: 0 auto 24px; }

body .userText {
  display: block;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }
  body .userText strong {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }

body .blueIndication {
  display: block;
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px;
  margin-top: 4px;
  color: #00a5e3; }

body .userBoldText {
  display: block;
  margin-bottom: 8px;
  text-align: center;
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px; }

body .withBullets {
  display: inline-flex;
  flex-direction: column;
  margin: 0 auto; }
  body .withBullets li {
    padding-left: 8px;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    position: relative;
    text-align: left; }
    body .withBullets li:before {
      content: '';
      width: 3px;
      height: 3px;
      position: absolute;
      left: 0;
      top: 7px;
      background-color: #212121;
      overflow: hidden;
      border-radius: 100%; }

body .contentWithShadow {
  position: relative;
  width: 100%;
  left: 0;
  padding: 16px 24px 24px;
  margin-top: 0; }

body .buttonWithShadow {
  position: relative;
  width: calc(100% + 48px);
  left: -24px;
  padding: 24px;
  margin-top: 0; }

body .centeredText {
  display: block;
  text-align: center;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  color: #212121;
  margin-top: 26px;
  margin-bottom: 24px; }
  body .centeredText strong {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }

body .linearGradientSmall {
  height: 1px;
  width: 100%;
  display: block;
  background: #00a5e3; }

body .returnLink {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  color: #212121;
  display: inline-block; }
  @media only screen and (max-width: 1024px) {
    body .returnLink {
      margin-top: 16px; } }
  body .returnLink:before {
    content: '';
    position: absolute;
    width: calc(100% - 16px);
    height: 2px;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: #212121;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  body .returnLink:hover {
    position: relative; }
    body .returnLink:hover:before {
      opacity: 1;
      visibility: visible;
      pointer-events: all; }

body .popupTitle {
  display: block;
  text-align: left;
  margin-bottom: 24px;
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  color: #212121; }

body .textsWithImages {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px; }
  body .textsWithImages .textWithImage {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    text-align: left; }
    body .textsWithImages .textWithImage:last-child {
      margin-bottom: 0; }
    body .textsWithImages .textWithImage img {
      width: 24px;
      height: 24px;
      padding: 3px;
      margin-right: 8px;
      display: block;
      object-fit: contain;
      object-position: center; }

body .withoutOverflow {
  max-height: 100% !important;
  overflow: visible !important;
  min-height: 0 !important; }

body .desktopOnly {
  display: block; }
  @media only screen and (max-width: 480px) {
    body .desktopOnly {
      display: none; } }

body .mobileOnly {
  display: none; }
  @media only screen and (max-width: 480px) {
    body .mobileOnly {
      display: block; } }

body .withGreyBg {
  background-color: #f2f2f3 !important; }

.withPadding-32 {
  padding: 32px !important; }

.withPadding-Mixed {
  padding: 24px 32px !important; }

.withPadding-24 {
  padding: 24px !important; }

.withPadding-16 {
  padding: 16px !important; }

.blockContent {
  display: block !important; }

.leftSidebarBox .plainLink.noWrap {
  letter-spacing: -0.4px; }

.modalTitle .closeModalIcon {
  position: absolute;
  z-index: 1;
  right: 5px;
  top: 50%;
  width: 24px;
  height: 24px;
  display: block;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%); }
  .modalTitle .closeModalIcon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 6px; }

.flatpickr-calendar.open {
  z-index: 999999 !important; }

.flatpickr-input[readonly] {
  cursor: pointer;
  border: none; }

.noWrap {
  white-space: nowrap; }

.inputLabel {
  color: #848484;
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px;
  position: absolute;
  left: 0;
  top: -4px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%); }

.simpleInfoBox {
  font-family: 'PeridotPE-SemiBold';
  font-size: 14px;
  line-height: 16px; }

.diaIndication {
  margin-top: 12px;
  display: block;
  font-family: 'PeridotPE-SemiBold';
  font-size: 14px;
  line-height: 16px;
  text-align: center; }

.withPadding {
  padding: 16px !important; }

.withoutBoxShadow {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important; }

.withMediumText {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px; }

.boldTitle {
  font-family: 'BTCosmo-Bold';
  font-size: 20px;
  line-height: 24px; }
  .boldTitle.withIcon i.smallIcon {
    font-size: 16px;
    top: 5px; }
  .boldTitle.withIcon i.icon-edit {
    left: unset;
    margin-left: 10px;
    cursor: pointer; }

.withoutPaddingRight {
  padding-right: 0 !important; }

.withoutPaddingBottom {
  padding-bottom: 0 !important; }

.errorElement i.cancelError {
  color: #212121;
  width: 24px;
  height: 24px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 2px;
  top: 2px;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  min-width: 0;
  cursor: pointer;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.goBack {
  color: #ffffff !important; }

.flexDirectionColumn {
  flex-direction: column !important; }

.simpleTitle {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 8px;
  display: flex; }

.strongText {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px; }

body {
  margin: 0;
  padding: 0;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  color: #212121;
  background-color: #f2f2f3; }
  body .migrationInfo {
    width: 65%; }
  body .withLinks a {
    color: #00a5e3;
    text-decoration: underline; }
  body .migrationLine {
    line-height: 20px !important; }
  body .justifyCenter {
    justify-content: center; }
  body .programDetailsColLeft.small {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px; }
  body .contactRow.withoutBorder {
    margin-bottom: 24px; }
    body .contactRow.withoutBorder:before {
      display: none !important; }
  body .simple-popup-content.migrationWidth {
    width: 592px !important; }
  body .withoutMinHeight {
    min-height: 0 !important; }
  body .withoutPadding {
    padding: 0 !important; }
  body .withoutTopPadding {
    padding-top: 0 !important; }
  body .connectionsBox:first-child {
    z-index: 2; }
  body .inlineText {
    white-space: nowrap !important; }
  body #pageContent {
    padding-bottom: 30px; }
  body .moreSeparator {
    margin: 38px auto 32px;
    max-width: 90%;
    position: relative;
    z-index: 0;
    height: 2px;
    display: block;
    background-color: #212121; }
    body .moreSeparator span {
      background-color: #212121;
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      width: 100px;
      height: 16px;
      background-color: #ffffff;
      text-align: center;
      position: absolute;
      left: 50%;
      top: -2px;
      z-index: 2;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  body .slick-disabled {
    display: none !important; }
  body .minHeight-900 {
    min-height: 570px; }
  body .small {
    max-width: 312px; }
  body .detailsBox.hidden {
    display: none; }
  body.showElement {
    display: block; }
  body.withModal {
    overflow: hidden; }
    @media only screen and (max-width: 767px) {
      body.withModal {
        overflow-y: auto; } }
  body .pad-0 {
    padding: 0px !important; }
  body .mar-0 {
    margin: 0px !important; }
  body .mt-10 {
    margin-top: 10px !important; }
  body .mt-40 {
    margin-top: 40px !important; }
  body .borderBottom {
    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
    padding-bottom: 7px; }
  body .flexAuto {
    flex: 0 0 auto; }
  body .flexEqual {
    flex: 1; }
  body .mediumFont {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  body .tvGoBox {
    padding: 8px 12px;
    background-color: #e6e6e6;
    left: 0;
    top: 0;
    width: 115px;
    color: #212121;
    font-family: 'PeridotPE-Bold';
    font-size: 16px;
    line-height: 16px;
    align-items: center;
    min-width: 80px;
    border-radius: 16px 0 16px 0; }
  body .flatpickr-day.selected,
  body .flatpickr-day.startRange,
  body .flatpickr-day.endRange,
  body .flatpickr-day.selected.inRange,
  body .flatpickr-day.startRange.inRange,
  body .flatpickr-day.endRange.inRange,
  body .flatpickr-day.selected:focus,
  body .flatpickr-day.startRange:focus,
  body .flatpickr-day.endRange:focus,
  body .flatpickr-day.selected:hover,
  body .flatpickr-day.startRange:hover,
  body .flatpickr-day.endRange:hover,
  body .flatpickr-day.selected.prevMonthDay,
  body .flatpickr-day.startRange.prevMonthDay,
  body .flatpickr-day.endRange.prevMonthDay,
  body .flatpickr-day.selected.nextMonthDay,
  body .flatpickr-day.startRange.nextMonthDay,
  body .flatpickr-day.endRange.nextMonthDay {
    background-color: #0ea600;
    border-color: #0ea600; }
  body .noPaddingTop {
    padding-top: 16px !important;
    margin-bottom: -34px;
    display: none; }
  body .errorRed {
    color: #b84c1e !important; }
  body .invalid input {
    border-color: #b84c1e !important; }
  body .invalid label,
  body .invalid .fieldIndication {
    color: #b84c1e !important; }
  body .inputWithImage .errorText {
    left: 34px; }
  body .errorText {
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
  body .errorTextSimple {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
  body .paymentMethod .paymentSelectContainer.hidden {
    display: none; }
  body ul {
    list-style: none;
    margin: 0;
    padding: 0; }
  body .hidden {
    display: none; }
  body .mediumTitle {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }
  body .smallLeftPadding {
    padding-left: 8px; }
  body .paddingTop-8 {
    padding-top: 8px !important; }
  body .paddingTop-12 {
    padding-top: 12px; }
  body .paddingTop-32 {
    padding-top: 32px; }
  body .lightText {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    margin-top: 4px; }
  body .fontColorDark {
    color: #212121 !important; }
  body .fontColorWhite {
    color: #ffffff !important; }
  body .paymentDue {
    padding: 8px 16px 8px 40px;
    position: relative;
    margin-top: 24px;
    border: 1px solid #eabf68;
    background-color: #fefcf7;
    border-radius: 16px; }
    body .paymentDue.withSmallImage img {
      position: absolute;
      width: 24px;
      height: auto;
      left: 0;
      top: 0;
      margin: 8px; }
    body .paymentDue.forEmails {
      display: flex;
      align-items: flex-start;
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px; }
      body .paymentDue.forEmails img {
        position: absolute;
        width: 24px;
        height: auto;
        left: 0;
        top: 0;
        margin: 8px; }
    body .paymentDue.small img {
      position: absolute;
      width: 24px;
      height: auto;
      left: 0;
      top: 0;
      margin: 8px; }
    body .paymentDue img {
      position: absolute;
      left: 0;
      top: 0;
      margin: 8px; }
  body .ui-helper-hidden-accessible {
    display: none; }
  body .leftMargin {
    margin-left: 30px; }
  body .flexRightAligned {
    margin-left: auto; }
  body .flexLeftAligned {
    align-items: flex-start !important; }
  body .leftPadding {
    margin-left: 12px;
    margin-right: 12px; }
  body .flexLarge {
    flex: 2; }
  body .fitContent {
    width: fit-content; }
  body .textRight {
    text-align: right; }
  body .smallRightPadding {
    padding-right: 6px !important; }
  body .mediumRightPadding {
    padding-right: 16px !important; }
  body .flexBox {
    display: flex; }
  body .flexColumn {
    display: flex;
    flex-flow: column !important; }
  body .flexRow {
    display: flex;
    flex-flow: row !important;
    align-items: flex-end; }
  body .smallPadding {
    padding: 0 12px; }
  body .alignCenter {
    align-items: center; }
  body .justifyEnd {
    justify-content: flex-end; }
  body .justifyStart {
    justify-content: flex-start; }
  body .alignStart {
    align-items: flex-start; }
  body .boldText {
    font-family: 'BTCosmo-Bold';
    font-size: 16px;
    line-height: 20px; }
    body .boldText.withIcon {
      display: flex;
      align-items: center; }
      body .boldText.withIcon img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        object-position: center;
        margin-right: 4px;
        position: relative;
        top: -1px; }
    body .boldText.withEdit {
      display: flex;
      align-items: flex-start; }
      body .boldText.withEdit i {
        margin-left: 16px;
        cursor: pointer; }
  body .mediumText {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }
  body .withEdit {
    display: flex;
    align-items: flex-start; }
    body .withEdit i {
      margin-left: 16px;
      cursor: pointer; }
  body .regularText {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px; }
  body .lightText {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px; }
  body .fullWidth {
    max-width: 100% !important;
    width: 100% !important; }
  body .largeTopPadding {
    padding-top: 50px !important; }
  body .ribbonTitle {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    padding: 6px 16px;
    -webkit-border-radius: 16px 0;
    -moz-border-radius: 16px 0;
    border-radius: 16px 0;
    background-color: #00a5e3;
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    left: -28px; }
    @media only screen and (max-width: 480px) {
      body .ribbonTitle {
        white-space: nowrap;
        text-overflow: ellipsis; } }
    body .ribbonTitle:before {
      width: 12px;
      height: 24px;
      content: url("data:image/svg+xml,%3Csvg width='12' height='24' viewBox='0 0 12 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H12V24C5.37258 24 0 18.6274 0 12V0Z' fill='%23004B87'/%3E%3C/svg%3E%0A");
      z-index: 2;
      position: absolute;
      left: 0;
      bottom: -24px; }
    body .ribbonTitle i {
      margin-right: 8px; }
  body .infoText {
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px;
    color: #767676;
    margin-top: 12px;
    width: 100%;
    display: block; }
  body .marked {
    position: relative; }
    body .marked:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #00a5e3;
      opacity: 0.14;
      z-index: 0;
      width: 100%;
      height: 100%; }
  body .moreDetails {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px; }
    body .moreDetails-absolute {
      position: absolute;
      top: 0;
      right: 0;
      padding-top: 32px; }
    body .moreDetails i {
      padding-left: 12px;
      font-size: 20px;
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      transform: scaleY(1); }
    body .moreDetails.active i {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }
  @media only screen and (max-width: 1024px) {
    body #pageContent {
      max-width: 700px;
      margin: auto; } }
  @media only screen and (max-width: 767px) {
    body #pageContent {
      margin-top: 62px; } }
  body .customTooltipRight {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    body .customTooltipRight:hover .customTooltipRightContent {
      opacity: 1;
      visibility: visible;
      pointer-events: all; }
    body .customTooltipRight img {
      width: auto;
      height: 16px; }
    body .customTooltipRight .customTooltipRightContent {
      position: absolute;
      z-index: 99;
      right: -12px;
      top: 50%;
      background-color: #ffffff;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
      width: 194px;
      padding: 8px;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      color: #212121;
      white-space: normal;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      border-radius: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      -webkit-transform: translate(100%, -50%);
      -moz-transform: translate(100%, -50%);
      transform: translate(100%, -50%); }
      body .customTooltipRight .customTooltipRightContent:before {
        content: '';
        display: block;
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #ffffff;
        box-shadow: 0px 1px 4px -5px rgba(0, 0, 0, 0.2);
        z-index: -1;
        left: -2px;
        top: 50%;
        -webkit-transform: rotate(-45deg) translateY(-50%);
        -moz-transform: rotate(-45deg) translateY(-50%);
        transform: rotate(-45deg) translateY(-50%);
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        transition: all 0.2s ease; }
  body .customTooltipBottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    body .customTooltipBottom:hover .customTooltipBottomContent {
      opacity: 1;
      visibility: visible;
      pointer-events: all; }
    body .customTooltipBottom .customTooltipBottomContent {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: calc(100% + 20px);
      background-color: #e6e6e6;
      width: 500px;
      padding: 12px;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      color: #212121;
      white-space: normal;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      border-radius: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      transform: translate(-50%, 0); }
      body .customTooltipBottom .customTooltipBottomContent ul {
        padding-left: 1.5rem;
        list-style: disc; }
      body .customTooltipBottom .customTooltipBottomContent:before {
        content: '';
        display: block;
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #e6e6e6;
        z-index: 2;
        left: 50%;
        margin-left: -6px;
        top: -12px;
        -webkit-transform: rotate(-45deg) translateX(-50%);
        -moz-transform: rotate(-45deg) translateX(-50%);
        transform: rotate(-45deg) translateX(-50%);
        border-radius: 4px; }
  @media only screen and (max-width: 1024px) {
    body .component {
      display: none;
      width: 100%;
      max-width: 100%;
      flex-basis: 100%; }
      body .component.active {
        display: block; } }
  @media only screen and (max-width: 767px) {
    body .component {
      padding-left: 12px;
      padding-right: 12px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body .component.leftSidebarComponent.active {
      display: flex;
      flex-flow: row; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body .component.leftSidebarComponent.active .separatedBox {
      flex: 1; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body .component.leftSidebarComponent.active .separatedBox.largeSeparatedBox {
      margin-right: 16px; } }
  @media only screen and (max-width: 767px) {
    body .col-xs-12 {
      padding-left: 12px;
      padding-right: 12px; } }
  @media only screen and (max-width: 767px) {
    body .row {
      margin-left: 0;
      margin-right: 0; } }
  body .relativeBox {
    position: relative; }
  body .box {
    display: flex;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    border: 1px solid #e6e6e6;
    background-color: #ffffff; }
    body .box.withBackgroundColor {
      position: relative; }
      body .box.withBackgroundColor.darkColor {
        background-color: #004b87; }
      body .box.withBackgroundColor.blackColor {
        background-color: #212121; }
        @media only screen and (max-width: 480px) {
          body .box.withBackgroundColor.blackColor .detailsContent {
            margin-top: 12px; } }
        @media only screen and (max-width: 480px) {
          body .box.withBackgroundColor.blackColor .detailsContent.withoutLabel {
            margin-top: 0; } }
      body .box.withBackgroundColor .detailsIcon {
        padding-left: 12px;
        border-radius: 15px 0 15px 0; }
      body .box.withBackgroundColor .detailsContent {
        margin-top: 12px; }
        @media only screen and (max-width: 480px) {
          body .box.withBackgroundColor .detailsContent {
            margin-top: 38px; } }
        body .box.withBackgroundColor .detailsContent.withoutLabel {
          margin-top: 0; }
          @media only screen and (max-width: 480px) {
            body .box.withBackgroundColor .detailsContent.withoutLabel {
              margin-top: 16px; } }
        body .box.withBackgroundColor .detailsContent .detailsContentLeft {
          display: flex;
          flex-direction: column; }
          @media only screen and (max-width: 480px) {
            body .box.withBackgroundColor .detailsContent .detailsContentLeft {
              padding-right: 0 !important; } }
          body .box.withBackgroundColor .detailsContent .detailsContentLeft.maxWidth-300 {
            max-width: 300px; }
          body .box.withBackgroundColor .detailsContent .detailsContentLeft .packageInfo {
            margin-top: 0 !important; }
            body .box.withBackgroundColor .detailsContent .detailsContentLeft .packageInfo .packageInfoTitle {
              color: #ffffff;
              font-family: 'PeridotPE-SemiBold';
              font-size: 18px;
              line-height: 20px; }
            body .box.withBackgroundColor .detailsContent .detailsContentLeft .packageInfo .packageInfoContent {
              margin-top: 12px;
              margin-bottom: 0;
              color: #ffffff;
              font-family: 'PeridotPE-Regular';
              font-size: 16px;
              line-height: 24px; }
          body .box.withBackgroundColor .detailsContent .detailsContentLeft .button {
            white-space: nowrap; }
        body .box.withBackgroundColor .detailsContent .detailsContentRight {
          display: flex;
          align-items: center; }
          body .box.withBackgroundColor .detailsContent .detailsContentRight.withLargeImage {
            margin-left: auto; }
            body .box.withBackgroundColor .detailsContent .detailsContentRight.withLargeImage img {
              max-width: 217px; }
          body .box.withBackgroundColor .detailsContent .detailsContentRight img {
            max-width: 124px;
            height: auto;
            width: 100%; }
            @media only screen and (max-width: 480px) {
              body .box.withBackgroundColor .detailsContent .detailsContentRight img {
                max-width: 84px;
                position: relative;
                right: -8px; } }
    body .box.withBackground {
      position: relative; }
      body .box.withBackground:before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #004b87; }
      body .box.withBackground.withCosmoteBusinessOneV4Background:before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(45deg, rgba(151, 215, 0, 0.08) 0%, rgba(0, 160, 220, 0.12) 100%); }
      body .box.withBackground.withXmasBackground {
        background-color: #ffffff;
        padding: 32px 16px; }
        body .box.withBackground.withXmasBackground.padding-24 {
          padding: 24px; }
        body .box.withBackground.withXmasBackground:before {
          display: none; }
        body .box.withBackground.withXmasBackground img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top right;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 0; }
          body .box.withBackground.withXmasBackground img.forDesktop {
            display: block; }
            @media only screen and (max-width: 480px) {
              body .box.withBackground.withXmasBackground img.forDesktop {
                display: none; } }
          body .box.withBackground.withXmasBackground img.forMobile {
            display: none; }
            @media only screen and (max-width: 480px) {
              body .box.withBackground.withXmasBackground img.forMobile {
                display: block; } }
        body .box.withBackground.withXmasBackground .detailsContent {
          position: relative;
          z-index: 1;
          margin: 0; }
          body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft {
            display: flex;
            flex-direction: column;
            max-width: 360px;
            padding: 0; }
            @media only screen and (max-width: 480px) {
              body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft {
                max-width: 230px;
                padding: 0; } }
            body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft.smallContent {
              max-width: 290px; }
              @media only screen and (max-width: 480px) {
                body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft.smallContent {
                  max-width: 180px; } }
            body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft .packageInfo {
              margin: 0 0 16px; }
              body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft .packageInfo.margin-52 {
                margin-bottom: 52px; }
              body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft .packageInfo .packageInfoContent {
                margin: 0;
                display: flex;
                flex-direction: column; }
                body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft .packageInfo .packageInfoContent strong {
                  display: block;
                  margin-bottom: 4px;
                  font-family: 'PeridotPE-SemiBold';
                  font-size: 18px;
                  line-height: 20px;
                  color: #ffffff; }
                body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft .packageInfo .packageInfoContent span {
                  display: block;
                  font-family: 'PeridotPE-SemiBold';
                  font-size: 14px;
                  line-height: 16px;
                  color: #ffffff; }
      body .box.withBackground.withRateplanBackground .rateplanOfferBg {
        position: absolute;
        z-index: 0;
        width: 100%;
        left: 0;
        bottom: 0;
        opacity: 1;
        height: 100%;
        border-radius: 4px; }
        body .box.withBackground.withRateplanBackground .rateplanOfferBg.cover {
          object-fit: cover;
          object-position: center center; }
      body .box.withBackground.withOffersBackground:before {
        content: '';
        display: block;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        background: #004b87;
        border-radius: 4px; }
      body .box.withBackground.withOffersBackground.withBgWhite {
        background-color: #ffffff; }
        body .box.withBackground.withOffersBackground.withBgWhite:before {
          display: none; }
      body .box.withBackground.withOffersBackground .renewalsOfferBg {
        position: absolute;
        z-index: 0;
        width: 100%;
        left: 0;
        bottom: 0;
        opacity: 1;
        height: 100%;
        border-radius: 4px; }
        body .box.withBackground.withOffersBackground .renewalsOfferBg.cover {
          object-fit: cover;
          object-position: left bottom; }
          body .box.withBackground.withOffersBackground .renewalsOfferBg.cover.right {
            object-position: right center; }
        @media only screen and (max-width: 480px) {
          body .box.withBackground.withOffersBackground .renewalsOfferBg.mobileOnly {
            top: 0;
            max-height: 52vw; } }
      body .box.withBackground.withOffersBackground .detailsIcon {
        padding-left: 12px;
        border-radius: 15px 0 15px 0; }
      body .box.withBackground.withOffersBackground .withParentBackground .offerImage {
        width: 104px;
        height: 124px; }
      body .box.withBackground.withOffersBackground .withParentBackground .benefitImage {
        width: 110px;
        height: 110px;
        margin-left: 24px;
        margin-top: -4px; }
      body .box.withBackground.withOffersBackground .withParentBackground .fixedImage {
        width: 100%;
        height: auto;
        margin-top: 0;
        display: block;
        margin-bottom: -24px;
        max-width: 160px;
        position: relative; }
      body .box.withBackground.withPromoBackground {
        background-color: #004b87; }
        body .box.withBackground.withPromoBackground:before {
          display: none; }
      body .box.withBackground.lightBackground:before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #f4f8fb; }
      body .box.withBackground.lightBackground.whiteBg {
        border-radius: 16px;
        border: 1.5px solid #00a5e3; }
        body .box.withBackground.lightBackground.whiteBg:before {
          display: none; }
      body .box.withBackground.withBackgroundSimple:before {
        display: none; }
      body .box.withBackground .largeBgImage {
        position: absolute;
        z-index: 0;
        left: 0;
        top: 50%;
        opacity: 0;
        -webkit-transform: scaleX(-1) translate(10%, -50%);
        -moz-transform: scaleX(-1) translate(10%, -50%);
        transform: scaleX(-1) translate(10%, -50%); }
      body .box.withBackground .largeBgImageFull {
        position: absolute;
        z-index: 0;
        width: 100%;
        left: 0;
        top: 0;
        opacity: 1;
        height: 100%; }
      body .box.withBackground .withParentBackground {
        position: relative;
        z-index: 4;
        margin-top: 38px; }
        body .box.withBackground .withParentBackground.withoutLabel {
          margin-top: 16px; }
          body .box.withBackground .withParentBackground.withoutLabel.carouselWithoutLabel {
            margin-top: 38px; }
          body .box.withBackground .withParentBackground.withoutLabel.withSameMargin {
            padding: 24px 24px 8px 16px;
            margin: 0;
            background-color: #ffffff;
            border-radius: 16px; }
            @media only screen and (max-width: 480px) {
              body .box.withBackground .withParentBackground.withoutLabel.withSameMargin {
                padding: 24px 16px; } }
            body .box.withBackground .withParentBackground.withoutLabel.withSameMargin .plainTextOffer {
              margin-top: 6px;
              margin-bottom: 0;
              font-family: 'PeridotPE-Regular';
              font-size: 16px;
              line-height: 24px; }
        body .box.withBackground .withParentBackground .packageInfoTitleOffer {
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          color: #ffffff; }
        body .box.withBackground .withParentBackground .plainTextOffer {
          color: #ffffff;
          margin-top: 4px;
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px; }
          body .box.withBackground .withParentBackground .plainTextOffer.largeOfferText {
            font-family: 'PeridotPE-Regular';
            font-size: 18px;
            line-height: 28px;
            display: block;
            padding-right: 24px; }
            @media only screen and (max-width: 480px) {
              body .box.withBackground .withParentBackground .plainTextOffer.largeOfferText.withMobileFonts {
                font-family: 'PeridotPE-Regular';
                font-size: 14px;
                line-height: 20px; } }
            body .box.withBackground .withParentBackground .plainTextOffer.largeOfferText strong {
              display: inline-block;
              font-family: 'PeridotPE-SemiBold';
              font-size: 14px;
              line-height: 16px; }
        body .box.withBackground .withParentBackground .offerImage {
          margin-top: -16px; }
          body .box.withBackground .withParentBackground .offerImage.carouselImage {
            margin-top: 0; }
          body .box.withBackground .withParentBackground .offerImage.largeImage {
            width: 104px;
            height: 124px; }
        body .box.withBackground .withParentBackground .oneImage {
          width: 116px;
          height: 116px;
          object-fit: contain;
          object-position: center; }
        body .box.withBackground .withParentBackground .coneImage {
          width: 124px;
          height: 124px;
          object-fit: contain;
          object-position: center;
          padding: 0; }
    body .box .simpleText {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      margin-top: 38px; }
    body .box.withOverflow {
      overflow: visible; }
      body .box.withOverflow .sectionTitle {
        border-radius: 16px; }
      body .box.withOverflow .megaFilter {
        border: none;
        border-radius: 0 0 16px 16px; }
    body .box.withContent {
      flex-flow: column;
      z-index: 3; }
      body .box.withContent.onTopOfNextBox {
        z-index: 5; }
    @media only screen and (max-width: 1024px) {
      body .box.topBox:not(.withContent) {
        display: none; } }
  body .smallAlert {
    display: flex;
    align-items: flex-start;
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px; }
    body .smallAlert img {
      width: 16px;
      height: 16px;
      object-fit: contain;
      object-position: center;
      display: block;
      margin-right: 4px;
      position: relative;
      top: -1px; }
  body .plainText {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  body .withoutRightMargin {
    margin-right: 0 !important; }
  body .withMargin {
    margin: 16px 0; }
    @media only screen and (max-width: 767px) {
      body .withMargin {
        margin: 12px 0; } }
    @media only screen and (max-width: 1024px) {
      body .withMargin.withoutTopMargin {
        margin-top: 0; } }
  body .noPadding {
    padding: 0 !important; }
  body .rightAligned {
    text-align: right; }
  body .withoutMargin {
    margin: 0 !important; }
  body .withNegativeTopMargin {
    margin-top: -12px; }
  body .withoutRightMargin {
    margin-right: -30px !important; }
    @media only screen and (max-width: 480px) {
      body .withoutRightMargin {
        margin-right: 0 !important; } }
  @media only screen and (max-width: 767px) {
    body .mobileFirstContent {
      margin-top: 12px;
      margin-bottom: 24px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body .mobileFirstContent {
      margin-top: 16px;
      margin-bottom: 24px; } }
  body .error {
    color: #b84c1e; }
  body .simpleList {
    display: flex;
    flex-direction: column; }
    body .simpleList li:not(:last-child) {
      margin-bottom: 8px; }
  body .minWidth-124 {
    min-width: 124px !important; }
  body .simpleBoxWithBg {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    background-color: #f2f2f3;
    padding: 16px;
    margin-top: 24px;
    border-radius: 16px; }
  body .withoutBottomMargin {
    margin-bottom: 0 !important; }
  body .marginBottom-6 {
    margin-bottom: 6px !important; }
  body .marginBottom-2 {
    margin-bottom: 2px !important; }
  body .marginBottom-4 {
    margin-bottom: 4px !important; }
  body .marginBottom-8 {
    margin-bottom: 8px; }
  body .marginBottom-10 {
    margin-bottom: 10px !important; }
  body .marginBottom-24 {
    margin-bottom: 24px !important; }
  body .marginBottom-12 {
    margin-bottom: 12px; }
  body .marginBottom-16 {
    margin-bottom: -16px; }
  body .withBottomMargin {
    margin-bottom: 24px; }
  body .withoutTopMarginText {
    margin-top: 0 !important; }
  body .withoutLeftMargin {
    margin-left: 0 !important; }
  body .withoutLeftPadding {
    padding-left: 0 !important; }
  body .withoutRightPadding {
    padding-right: 0 !important; }
  body .primaryColor {
    color: #212121 !important; }
  body .secondaryColor {
    color: #0ea600 !important; }
  body .marginTopAuto {
    margin-top: auto !important; }
  body .marginTop-4 {
    margin-top: 4px !important; }
  body .marginTop-10 {
    margin-top: 10px !important; }
  body .marginMainTop-10 {
    margin-top: 10px !important; }
  body .marginTop-6 {
    margin-top: 6px !important; }
  body .marginTop-8 {
    margin-top: 8px !important; }
  body .marginLeft-8 {
    margin-left: 8px !important; }
  body .marginLeft-20 {
    margin-left: 20px; }
  body .marginRight-10 {
    margin-right: 10px !important; }
  body .mt-n8 {
    margin-top: -8px; }
  body .withHorizontalPadding {
    padding: 0 12px; }
  body .withPaddingLeft-24 {
    padding-left: 24px; }
  body .withPaddingLeft-8 {
    padding-left: 8px; }
  body .withPaddingLeft-4 {
    padding-left: 4px; }
  body .paddingTop-16 {
    padding-top: 16px !important; }
  body .smallTopMargin {
    margin-top: 12px !important; }
  body .mediumTopMargin {
    margin-top: 16px !important; }
  body .paddingTop-20 {
    padding-top: 20px; }
  body .largeTopMargin {
    margin-top: 24px !important; }
  body .xlTopMargin {
    margin-top: 48px !important; }
  body .lgTopMargin {
    margin-top: 32px !important; }
  body .marginTop-36 {
    margin-top: 36px !important; }
  body .smallBottomMargin {
    margin-bottom: 8px !important; }
  body .bottomMargin-4 {
    margin-bottom: 4px !important; }
  body .bottomMargin-32 {
    margin-bottom: 32px !important; }
  body .bottomMargin-12 {
    margin-bottom: 12px !important; }
  body .mediumBottomMargin {
    margin-bottom: 16px !important; }
  body .largeBottomMargin {
    margin-bottom: 24px !important; }
  body .maxWidth-350 {
    max-width: 350px !important; }
  body .maxWidth-384 {
    max-width: 384px !important; }
  body .maxWidth-400 {
    max-width: 400px !important;
    margin: auto !important; }
  body .maxWidth-440 {
    max-width: 440px; }
    @media only screen and (max-width: 480px) {
      body .maxWidth-440 {
        max-width: 200px; } }
  body .maxWidth-410 {
    max-width: 410px !important; }
  body .maxWidth-500 {
    max-width: 500px !important; }
  body .withoutMaxWidth {
    max-width: 100% !important; }
  body .minWidth-210 {
    min-width: 210px !important; }
  body .aligned {
    top: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important; }
  body .greenFont {
    color: #0ea600 !important; }
  body .mediumText {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 12px;
    width: 100%;
    display: block; }
  body .modalPadding {
    padding: 0 14px; }
  body .firstText {
    margin-bottom: 6px !important;
    margin-top: 40px !important; }
  body .noWrap {
    white-space: nowrap !important; }
  body .withLargeMargin {
    margin: 24px 0; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      body .withLargeMargin {
        margin: 16px 0; } }
    @media only screen and (max-width: 767px) {
      body .withLargeMargin {
        margin: 12px 0; } }
  body .recurringInfo.withTopBorder {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #f2f2f3; }
  body .textCenter {
    text-align: center; }
  body .textRight {
    text-align: right; }
  body .textLeft {
    text-align: left; }
  body .blueText {
    color: #212121 !important; }
  body .blueTextRegular {
    color: #212121 !important; }
  body .visitLink {
    padding: 12px 8px;
    color: #0ea600;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 16px; }
    body .visitLink:hover {
      color: rgba(0, 109, 41, 0.85);
      z-index: 1; }
    body .visitLink:focus {
      -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      z-index: 2; }
    body .visitLink-notVisible {
      visibility: hidden; }
    body .visitLink.hidden {
      display: none; }
    body .visitLink.absoluteLink {
      position: absolute;
      bottom: 8px; }
    body .visitLink.whiteLink {
      display: inline-block;
      width: auto;
      color: #ffffff;
      border: 1px solid #ffffff;
      border-radius: 16px;
      margin-left: 8px;
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px; }
      @media only screen and (max-width: 767px) {
        body .visitLink.whiteLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    body .visitLink.blueTooltipLink {
      color: #212121;
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px;
      letter-spacing: 0;
      margin-top: 4px; }
    body .visitLink.blueLink {
      display: inline-block;
      width: auto;
      color: #212121;
      margin-left: 24px;
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px; }
      @media only screen and (max-width: 767px) {
        body .visitLink.blueLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    body .visitLink.inline {
      display: inline-block;
      width: auto; }
    body .visitLink.blue {
      color: #212121 !important;
      font-family: 'PeridotPE-Bold';
      font-size: 16px;
      line-height: 16px; }

.simpleToggledContent {
  padding-top: 0 !important; }
  .simpleToggledContent p {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }

.goBack.openGiftPopup {
  display: inline-block !important; }

.marginBottom-4 {
  margin-bottom: 4px !important; }

.min136 {
  min-width: 136px !important; }

.padding-16 {
  padding: 16px !important; }

.relativeDue {
  padding-left: 0 !important; }
  .relativeDue--small {
    align-items: flex-start; }
    .relativeDue--small img {
      width: 16px; }
  .relativeDue--large {
    align-items: flex-start; }
    .relativeDue--large img {
      width: 24px;
      position: relative;
      top: -2px !important; }
  .relativeDue img {
    position: relative !important;
    margin-right: 24px; }

.invisible {
  visibility: hidden; }

.flex {
  display: flex;
  align-items: center; }

.simpleDivider {
  width: 100%;
  margin: 24px 0 0;
  height: 1px;
  background-color: #9d9d9c; }
  .simpleDivider.withBottomMargin {
    margin-bottom: 24px; }

.fullWidthSection {
  width: calc(100% + 146px); }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .fullWidthSection {
      width: calc(100% + 206px); } }

.plainTextElement {
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }
  .plainTextElement strong {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px; }

.labelNumber {
  color: #212121 !important; }

.invoiceIndication.inactive {
  opacity: 0.4;
  pointer-events: none; }

.indicationBlue {
  margin-left: auto;
  position: relative;
  background-color: #212121;
  padding: 12px 16px;
  color: #ffffff !important;
  height: 24px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px;
  border-radius: 12px;
  display: flex;
  align-items: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .indicationBlue {
      margin-top: 16px;
      margin-bottom: 16px; } }
  @media only screen and (max-width: 767px) {
    .indicationBlue {
      margin-top: 12px;
      margin-bottom: 12px; } }
  .indicationBlue i {
    padding-right: 8px; }

.simpleText {
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px; }

.inputTitle {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 8px;
  display: block;
  width: 100%; }

.sectionTitle {
  padding: 12px 16px;
  font-family: 'BTCosmo-Bold';
  font-size: 20px;
  line-height: 24px;
  color: #212121;
  background: #ffffff;
  width: 100%;
  display: block;
  box-sizing: border-box; }
  .sectionTitle.withInfoIcon {
    display: flex; }
  .sectionTitle.sectionTitleGrey {
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px;
    color: #212121;
    background-color: #e6e6e6;
    display: flex;
    width: initial;
    border-radius: 16px 0px 16px 0 !important; }

.sectionTitleGreyContainer {
  display: flex;
  background-color: white;
  border-radius: 16px 16px 0 0; }

.sectionTitleMedium {
  padding: 6px 8px;
  font-family: 'BTCosmo-Bold';
  font-size: 20px;
  line-height: 24px;
  color: #212121;
  background: #ffffff;
  width: 100%;
  display: block;
  box-sizing: border-box; }

.megaFilterInputContainer.withTooltip .imgTooltip {
  position: relative;
  bottom: 2px;
  left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-family: "BTCosmo-Bold";
  font-size: 12px;
  line-height: 14px;
  color: #212121;
  border: 1px solid #212121;
  padding: 1px 1px 0px 0px;
  text-align: center;
  border-radius: 100%; }

.dropdownContainer {
  position: relative;
  max-width: 312px; }
  .dropdownContainer.withPicker ::-webkit-input-placeholder {
    color: #212121 !important; }
  .dropdownContainer.withPicker :-moz-placeholder {
    color: #212121 !important; }
  .dropdownContainer.withPicker ::-moz-placeholder {
    color: #212121 !important; }
  .dropdownContainer.withPicker :-ms-input-placeholder {
    color: #212121 !important; }
  .dropdownContainer.withLabelOnTop i {
    top: unset;
    bottom: 50%;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0); }
  .dropdownContainer ::-webkit-input-placeholder {
    color: #848484;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .dropdownContainer :-moz-placeholder {
    color: #848484;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .dropdownContainer ::-moz-placeholder {
    color: #848484;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .dropdownContainer :-ms-input-placeholder {
    color: #848484;
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }
  .dropdownContainer .blueButton {
    position: absolute;
    right: 0;
    bottom: 6px;
    min-width: 0; }
    @media only screen and (max-width: 480px) {
      .dropdownContainer .blueButton {
        position: relative;
        margin-top: 6px;
        bottom: 0;
        float: right; } }
  .dropdownContainer img {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    line-height: 0; }
    .dropdownContainer img.mastercard {
      left: 8px; }
    .dropdownContainer img.icon-arrowDown {
      right: 8px;
      font-size: 18px;
      -webkit-transform: translateY(-50%) scaleY(1);
      -moz-transform: translateY(-50%) scaleY(1);
      transform: translateY(-50%) scaleY(1); }
      .dropdownContainer img.icon-arrowDown.opened {
        -webkit-transform: translateY(-50%) scaleY(-1);
        -moz-transform: translateY(-50%) scaleY(-1);
        transform: translateY(-50%) scaleY(-1); }
  .dropdownContainer .imgTooltip {
    position: absolute;
    left: inherit;
    right: -40px;
    top: 0; }
  .dropdownContainer img {
    position: absolute;
    right: 32px;
    top: 50%;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }
  .dropdownContainer .dropdownInput {
    box-sizing: border-box;
    height: 48px;
    width: 100%;
    color: #212121;
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid #212121;
    border-radius: 16px;
    padding: 12px 40px; }
    .dropdownContainer .dropdownInput.opened {
      border-radius: 16px 16px 0 0;
      border-bottom: none; }
    .dropdownContainer .dropdownInput-fullWidth {
      max-width: 100%; }

.closeInputIcon {
  cursor: pointer;
  pointer-events: all !important; }

.dropDownContentBox {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  display: none;
  flex-flow: column;
  border: 1px solid #212121;
  border-top: none;
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
  max-width: 312px;
  overflow: hidden;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  transform: translateY(100%); }
  .dropDownContentBox.smallFonts-fullWidth .dropDownCol span {
    width: 100%; }
  .dropDownContentBox.overlap.rightAligned {
    left: inherit !important; }
  .dropDownContentBox.overlap.leftAligned {
    left: 0 !important; }
  .dropDownContentBox.fullContent {
    width: auto; }
  .dropDownContentBox .businessDropdown {
    max-height: 200px;
    overflow-y: auto;
    margin: 0 0 74px 0;
    position: relative; }
    .dropDownContentBox .businessDropdown:before {
      content: '';
      display: block;
      width: 100%;
      height: 10px;
      position: fixed;
      bottom: 74px;
      left: 0; }
  .dropDownContentBox .megaFilterContentSearch {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 2;
    background-color: #ffffff;
    padding: 12px 8px;
    box-sizing: border-box; }
    .dropDownContentBox .megaFilterContentSearch .megaFilterInput {
      box-sizing: border-box;
      width: 100%;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      color: #212121;
      display: inline-block;
      background-color: transparent;
      border: 1px solid #212121;
      padding: 8px 40px;
      border-radius: 16px; }
    .dropDownContentBox .megaFilterContentSearch ::-webkit-input-placeholder {
      color: #9d9d9c;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px; }
    .dropDownContentBox .megaFilterContentSearch :-moz-placeholder {
      color: #9d9d9c;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px; }
    .dropDownContentBox .megaFilterContentSearch ::-moz-placeholder {
      color: #9d9d9c;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px; }
    .dropDownContentBox .megaFilterContentSearch :-ms-input-placeholder {
      color: #9d9d9c;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px; }
    .dropDownContentBox .megaFilterContentSearch i {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 1;
      pointer-events: none;
      line-height: 0; }
      @media only screen and (max-width: 767px) {
        .dropDownContentBox .megaFilterContentSearch i {
          right: 18px; } }
      .dropDownContentBox .megaFilterContentSearch i.icon-lens {
        left: 18px;
        font-size: 22px; }
      .dropDownContentBox .megaFilterContentSearch i.icon-close {
        right: 18px;
        font-size: 22px; }
  .dropDownContentBox.small {
    left: 0;
    max-height: 180px;
    overflow-y: auto; }
    .dropDownContentBox.small.businessSmall {
      max-height: none; }
    .dropDownContentBox.small .dropDownCol {
      color: #212121;
      padding: 12px 8px;
      display: flex;
      align-items: baseline; }
      .dropDownContentBox.small .dropDownCol span {
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px;
        display: flex;
        flex-flow: column;
        overflow: hidden;
        position: relative;
        justify-content: flex-start;
        text-align: left;
        width: 100%; }
        .dropDownContentBox.small .dropDownCol span em {
          font-style: normal;
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: -4px; }
      .dropDownContentBox.small .dropDownCol.selected {
        background-color: #00a5e3;
        color: #ffffff; }
        .dropDownContentBox.small .dropDownCol.selected.secondaryBckg {
          background-color: #00a5e3; }
      .dropDownContentBox.small .dropDownCol:hover {
        background-color: #00a5e3;
        color: #ffffff; }
      .dropDownContentBox.small .dropDownCol i {
        margin-right: 4px; }
    .dropDownContentBox.small .dropdownLabel {
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px;
      padding: 0 12px;
      margin: 12px 0; }
      .dropDownContentBox.small .dropdownLabel span {
        padding-bottom: 2px;
        border-bottom: 1px solid #212121; }
        .dropDownContentBox.small .dropdownLabel span.boldText {
          border-bottom: none;
          padding-bottom: 0; }
  .dropDownContentBox.opened {
    display: block; }
  .dropDownContentBox .dropDownCol {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    display: flex;
    flex-flow: row;
    padding: 12px 8px;
    background-color: #ffffff;
    cursor: pointer; }
    .dropDownContentBox .dropDownCol.selected {
      background-color: #00a5e3;
      color: #ffffff; }
    .dropDownContentBox .dropDownCol:first-child {
      padding-top: 12px; }
    .dropDownContentBox .dropDownCol:last-child {
      padding-bottom: 12px; }
    .dropDownContentBox .dropDownCol:hover {
      background-color: #00a5e3;
      color: #ffffff; }
    .dropDownContentBox .dropDownCol img {
      margin-left: auto; }

.inlineInputs {
  display: flex;
  flex-flow: row; }
  @media only screen and (max-width: 767px) {
    .inlineInputs {
      flex-flow: column; } }
  .inlineInputs .renewInput {
    flex: 2; }
    .inlineInputs .renewInput.rightInput {
      flex: 1; }
  .inlineInputs .numberInput {
    max-width: 126px !important;
    margin-left: 40px; }
    @media only screen and (max-width: 767px) {
      .inlineInputs .numberInput {
        margin-left: 0;
        max-width: 100% !important; } }
  .inlineInputs .smallInput {
    flex: 1;
    margin-left: 50px; }
    @media only screen and (max-width: 767px) {
      .inlineInputs .smallInput {
        margin-left: 0; } }
  .inlineInputs .rightInput {
    margin-left: 16px; }
    @media only screen and (max-width: 767px) {
      .inlineInputs .rightInput {
        margin-left: 0;
        margin-top: 12px; } }
    .inlineInputs .rightInput.halfInput {
      width: 50%; }
      @media only screen and (max-width: 767px) {
        .inlineInputs .rightInput.halfInput {
          width: 100%;
          margin-top: 30px;
          margin-bottom: 6px; } }
    .inlineInputs .rightInput.thirdInput {
      width: 33.33%; }
      @media only screen and (max-width: 767px) {
        .inlineInputs .rightInput.thirdInput {
          width: 100%;
          margin-top: 30px;
          margin-bottom: 6px; } }

.smallMarginLeft {
  margin-left: 16px; }
  @media only screen and (max-width: 480px) {
    .smallMarginLeft {
      margin-left: 0;
      margin-top: 12px; } }

.tablePadding {
  padding: 0 16px; }

.smallDrop {
  max-width: 190px;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }

.singleDrop {
  max-width: 100%;
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }

.smallBottomPadding {
  padding-bottom: 20px !important; }

.mediumDrop {
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }

.xlargeInput {
  min-width: 320px; }

.largeInput {
  min-width: 230px; }

.mediumInput {
  min-width: 190px; }

tr.withBgWhite {
  background-color: #ffffff !important; }

.plainTextCol {
  display: flex;
  flex-flow: column; }
  .plainTextCol .plainTextColTitle {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 8px; }
  .plainTextCol .plainTextColDescription {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px; }

.maxWidth-800 {
  max-width: 800px !important; }

.withoutMaxWidth {
  max-width: 100% !important; }

.fullPageWidth {
  width: 100%; }

.programDetails.withoutBorder {
  border-bottom: none;
  margin-bottom: 0; }

.withoutMinHeight {
  min-height: 0 !important; }

.alertText {
  display: flex;
  align-items: center;
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
  margin-bottom: -12px; }
  .alertText.mediumAlert img {
    width: 24px;
    margin-right: 8px;
    padding-right: 0; }
  .alertText img {
    width: 24px;
    padding-right: 4px; }

.inputWithButton {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end; }
  @media only screen and (max-width: 480px) {
    .inputWithButton {
      flex-flow: column; } }
  .inputWithButton a:not(.icon-send) {
    margin-left: 16px;
    white-space: nowrap; }
    @media only screen and (max-width: 480px) {
      .inputWithButton a:not(.icon-send) {
        margin-left: 0;
        margin-top: 12px;
        width: 100%; } }

.inputWithButtonLargeAccounts {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-end; }
  @media only screen and (max-width: 767px) {
    .inputWithButtonLargeAccounts {
      flex-flow: column; }
      .inputWithButtonLargeAccounts .primaryButtonNormal {
        width: 100%;
        margin-left: 0;
        margin-top: 12px; } }
    @media only screen and (max-width: 767px) and (max-width: 480px) {
      .inputWithButtonLargeAccounts .primaryButtonNormal {
        margin-left: 0;
        margin-top: 12px;
        width: 100%; } }
  .inputWithButtonLargeAccounts .ddFilter {
    padding: 0; }
  .inputWithButtonLargeAccounts .primaryButtonNormal {
    margin-left: 24px; }
    @media only screen and (max-width: 480px) {
      .inputWithButtonLargeAccounts .primaryButtonNormal {
        margin-left: 0;
        margin-top: 12px;
        width: 100%; } }

.fontLight {
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px; }

.lightLabel {
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px; }

.inlineBox {
  display: inline-flex !important; }

.marginTop-16 {
  margin-top: 16px; }

.marginTop-20 {
  margin-top: 20px !important; }

.marginTop-24 {
  margin-top: 24px !important; }

.billTable .megaFilterContainer {
  display: inline-table; }

.colCentered {
  margin: auto; }

.withIconNumber {
  min-width: 100px;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 1230px) {
    .withIconNumber {
      align-items: flex-start;
      flex-direction: column; } }
  .withIconNumber .rightTableContent {
    margin-left: auto;
    width: 128px;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 1230px) {
      .withIconNumber .rightTableContent {
        margin-top: 4px; } }
  .withIconNumber .icon-pdf {
    margin: 0 6px 0px 12px; }
    @media only screen and (max-width: 1230px) {
      .withIconNumber .icon-pdf {
        margin: 0px 6px 0px 0px; } }
  .withIconNumber .imgTooltip {
    position: relative;
    top: 3px; }
    .withIconNumber .imgTooltip img {
      width: auto;
      height: 20px; }

body .ui-widget.ui-widget-content.ui-menu .ui-menu-item {
  line-height: 0;
  z-index: 9999999; }

body .minRow {
  min-width: 800px; }

body .scrollableBox {
  overflow-x: auto; }

body .slick-slider:not(.sliderCols):not(.contextualCarouselHomepage) .slick-next,
body .slick-slider:not(.sliderCols):not(.contextualCarouselHomepage) .slick-prev {
  opacity: 0 !important;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out; }

body .slick-slider:not(.sliderCols):not(.contextualCarouselHomepage):hover .slick-next,
body .slick-slider:not(.sliderCols):not(.contextualCarouselHomepage):hover .slick-prev {
  opacity: 1 !important;
  pointer-events: all;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out; }

.xlOnly {
  display: block; }
  @media only screen and (max-width: 480px) {
    .xlOnly {
      display: none; } }

.xsOnly {
  display: none; }
  @media only screen and (max-width: 480px) {
    .xsOnly {
      display: block; } }

.fullWidthInput {
  max-width: 100% !important; }

.fullWidthMax {
  max-width: 100% !important; }
  @media only screen and (max-width: 1230px) {
    .fullWidthMax {
      width: 100% !important; } }

.alignNormal {
  align-items: normal !important; }

.xlInput {
  min-width: 350px; }
  @media only screen and (max-width: 1024px) {
    .xlInput {
      min-width: 0; } }

.flexAuto {
  flex: 0 0 auto; }

.alertMessage img {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px; }

.alertMessage .alertTitle {
  font-family: 'BTCosmo-Bold';
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 4px; }

.alertMessage .alertContent {
  font-family: 'PeridotPE-Regular';
  font-size: 16px;
  line-height: 24px; }
  .alertMessage .alertContent strong {
    font-family: 'PeridotPE-SemiBold';
    font-size: 14px;
    line-height: 16px; }

.visibleElement {
  display: block !important; }

.withFixedHeight {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 32px;
  overflow: hidden; }

.plainLink {
  color: #212121 !important;
  font-family: 'BTCosmo-Bold';
  font-size: 16px;
  line-height: 20px; }
  .plainLink.activeConnection {
    position: relative;
    z-index: 1; }
    .plainLink.activeConnection:before {
      content: '';
      display: block;
      position: absolute;
      left: -16px;
      top: -6px;
      background: #00a5e3;
      z-index: 0;
      width: 3px;
      height: calc(100% + 12px); }
    .plainLink.activeConnection:after {
      content: '';
      display: block;
      position: absolute;
      left: -16px;
      top: -6px;
      background-color: #f4f8fb;
      z-index: -1;
      width: calc(100% + 32px);
      height: calc(100% + 12px); }

body .paymentDue.hidden {
  display: none; }

body .emptyGift {
  text-align: center;
  display: block;
  margin-bottom: 24px; }
  body .emptyGift .emptyStateImage {
    margin: 5px auto 14px;
    width: 36px;
    display: block; }
  body .emptyGift .emptyStateTitle {
    font-family: 'PeridotPE-SemiBold';
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 4px;
    display: block; }
  body .emptyGift .emptyStateSubTitle {
    font-family: 'PeridotPE-Regular';
    font-size: 16px;
    line-height: 24px;
    display: block; }

@media print {
  table {
    display: none !important; }
  tr {
    page-break-after: always;
    display: block; } }

.withoutShadow {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important; }

.inputWithImage {
  position: relative;
  padding-left: 34px; }
  .inputWithImage i {
    position: absolute;
    right: 0;
    top: 2px;
    cursor: pointer; }

.noPaddingLeft {
  padding-left: 0 !important; }

.noPaddingRight {
  padding-right: 0 !important; }

.lightText {
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px; }

@media only screen and (max-width: 480px) {
  body .flexRow.mobileFlex {
    flex-flow: column !important;
    align-items: flex-start; } }

@media only screen and (max-width: 480px) {
  body .flexRow.mobileFlex .ddFilterContent {
    width: 100% !important; } }

.rightInput {
  margin-left: 12px; }

.disabledInput {
  pointer-events: none; }

.labelTitle {
  font-family: 'PeridotPE-SemiBold';
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 8px; }

body .onPopup {
  padding: 0;
  margin-bottom: -12px;
  width: 100%;
  margin-top: 32px;
  display: flex; }
  body .onPopup:last-child {
    border-radius: 0 0 4px 4px; }
  body .onPopup.withBackground {
    position: relative;
    overflow-y: hidden;
    padding: 16px;
    margin-bottom: -24px;
    width: calc(100% + 48px);
    left: -24px; }
    @media only screen and (max-width: 767px) {
      body .onPopup.withBackground {
        width: calc(100% + 24px);
        left: -12px; } }
    body .onPopup.withBackground .detailsContentRight {
      margin-top: 0 !important; }
    body .onPopup.withBackground:before {
      content: '';
      display: block;
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      background: #00a5e3; }
    body .onPopup.withBackground.withBackgroundSimple:before {
      display: none; }
    body .onPopup.withBackground .largeBgImage {
      position: absolute;
      z-index: 0;
      left: 0;
      top: 50%;
      opacity: 0;
      -webkit-transform: scaleX(-1) translate(10%, -50%);
      -moz-transform: scaleX(-1) translate(10%, -50%);
      transform: scaleX(-1) translate(10%, -50%); }
    body .onPopup.withBackground .largeBgImageFull {
      position: absolute;
      z-index: 0;
      width: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      height: 100%; }
    body .onPopup.withBackground .withParentBackground {
      position: relative;
      z-index: 4;
      margin-top: 38px; }
      body .onPopup.withBackground .withParentBackground.withoutLabel {
        margin-top: 16px; }
      body .onPopup.withBackground .withParentBackground .packageInfoTitleOffer {
        font-family: 'PeridotPE-SemiBold';
        font-size: 18px;
        line-height: 20px;
        color: #ffffff; }
      body .onPopup.withBackground .withParentBackground .plainTextOffer {
        color: #ffffff;
        margin-top: 4px;
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px; }
      body .onPopup.withBackground .withParentBackground .offerImage {
        margin-top: -16px; }
      body .onPopup.withBackground .withParentBackground .oneImage {
        width: 116px;
        height: 116px;
        object-fit: contain;
        object-position: center;
        padding: 10px 20px; }
  body .onPopup.withBackgroundSimple {
    position: relative;
    padding: 16px;
    margin-bottom: -32px;
    width: calc(100% + 48px);
    left: -24px; }
    @media only screen and (max-width: 767px) {
      body .onPopup.withBackgroundSimple {
        width: calc(100% + 24px);
        left: -12px; } }
    body .onPopup.withBackgroundSimple .ribbonTitle {
      left: -24px;
      padding-left: 4px; }
    body .onPopup.withBackgroundSimple .detailsContent {
      position: relative;
      z-index: 2; }
    body .onPopup.withBackgroundSimple:before {
      content: '';
      display: block;
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      background: #00a5e3; }
    body .onPopup.withBackgroundSimple.withBackgroundSimple:before {
      display: none; }
    body .onPopup.withBackgroundSimple .largeBgImage {
      position: absolute;
      z-index: 0;
      left: 0;
      top: 50%;
      opacity: 0;
      -webkit-transform: scaleX(-1) translate(10%, -50%);
      -moz-transform: scaleX(-1) translate(10%, -50%);
      transform: scaleX(-1) translate(10%, -50%); }
    body .onPopup.withBackgroundSimple .largeBgImageFull {
      position: absolute;
      z-index: 0;
      width: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      height: 100%; }
    body .onPopup.withBackgroundSimple .withParentBackground {
      position: relative;
      z-index: 4;
      margin-top: 38px; }
      body .onPopup.withBackgroundSimple .withParentBackground.withoutLabel {
        margin-top: 16px; }
      body .onPopup.withBackgroundSimple .withParentBackground .packageInfoTitleOffer {
        font-family: 'PeridotPE-SemiBold';
        font-size: 18px;
        line-height: 20px;
        color: #ffffff; }
      body .onPopup.withBackgroundSimple .withParentBackground .plainTextOffer {
        color: #ffffff;
        margin-top: 4px;
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px; }
      body .onPopup.withBackgroundSimple .withParentBackground .offerImage {
        margin-top: -16px; }
      body .onPopup.withBackgroundSimple .withParentBackground .oneImage {
        width: 116px;
        height: 116px;
        object-fit: contain;
        object-position: center;
        padding: 10px 20px; }
  body .onPopup .ribbonTitle {
    left: -32px;
    padding-left: 12px; }
    @media only screen and (max-width: 767px) {
      body .onPopup .ribbonTitle {
        left: -20px; } }
  body .onPopup .oldPrice {
    position: absolute;
    top: -24px;
    right: 0;
    font-family: 'PeridotPE-Regular';
    font-size: 12px;
    line-height: 16px; }
  body .onPopup .detailsContentRight {
    margin-top: 32px !important; }

.allEvents {
  pointer-events: all !important; }

.loadingSpinner {
  -webkit-animation-duration: 0.75s;
  -moz-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: rotate-forever;
  -moz-animation-name: rotate-forever;
  animation-name: rotate-forever;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
  height: 30px;
  width: 30px;
  border: 4px solid #ffffff;
  border-right-color: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: none;
  position: absolute;
  top: 50%;
  margin: 0;
  padding: 0;
  right: 50%;
  z-index: 30;
  margin-right: -15px;
  margin-top: -15px; }

.loadingButton {
  position: relative;
  text-indent: -50000px;
  pointer-events: none !important; }
  .loadingButton .loadingSpinner {
    display: block; }

@-webkit-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-moz-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg); } }

.simple-popup-content.loading:after {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 30000;
  position: absolute;
  background-color: rgba(55, 71, 79, 0.2);
  border-radius: 4px;
  content: '';
  left: 0;
  top: 0; }

body .modalDetails .modalText.withoutHeightLimits {
  max-height: 100%;
  min-height: 0;
  overflow: hidden; }

body .ui-autocomplete {
  position: fixed;
  overflow: hidden;
  overflow-y: auto;
  max-height: 200px; }

.whiteBg {
  background-color: #ffffff !important; }

.smallErrorText {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: 'PeridotPE-Regular';
  font-size: 14px;
  line-height: 20px;
  transform: translateY(100%); }

i {
  font-style: normal; }

.digitalOnboarding {
  background-color: #f2f2f3 !important; }
  .digitalOnboarding .link {
    color: #323232;
    text-decoration: underline;
    word-wrap: break-word; }
  .digitalOnboarding .greenLink {
    color: #006d29; }
  .digitalOnboarding .errorTextSmall {
    font-family: 'PeridotPE-Regular';
    font-size: 14px;
    line-height: 20px;
    font-family: 'PFHandbookPro-Medium';
    font-size: 14px;
    line-height: 20px;
    color: #da0b0b !important; }
    .digitalOnboarding .errorTextSmall::before {
      content: url("../../img/icons/WhatsUpExclamationTriangle.svg");
      margin-right: 4px;
      vertical-align: -20%; }
  .digitalOnboarding .buttonGroup {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 8px; }
    .digitalOnboarding .buttonGroup.alignTop {
      align-items: flex-start; }
    .digitalOnboarding .buttonGroup.alignBottom {
      align-items: flex-end; }
    .digitalOnboarding .buttonGroup .backButton {
      height: 40px;
      min-width: 160px;
      background-color: transparent;
      border: 1px solid #323232;
      color: #323232;
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      padding: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 2px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 18px;
      line-height: 22px;
      border: 1px solid transparent;
      text-decoration: underline; }
      .digitalOnboarding .buttonGroup .backButton.disabled {
        color: #848484;
        border-color: #848484;
        pointer-events: none;
        cursor: not-allowed; }
      .digitalOnboarding .buttonGroup .backButton.noWidth {
        min-width: unset; }
      .digitalOnboarding .buttonGroup .backButton.fullWidth {
        width: 100%; }
    .digitalOnboarding .buttonGroup .darkModeButton {
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      color: none !important;
      background: none;
      padding: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 2px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 18px;
      line-height: 22px;
      box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
      text-wrap: nowrap; }
      .digitalOnboarding .buttonGroup .darkModeButton:hover {
        background-color: none;
        opacity: 0.85; }
      .digitalOnboarding .buttonGroup .darkModeButton:visited {
        color: none;
        border-color: none; }
      .digitalOnboarding .buttonGroup .darkModeButton:focus {
        -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
      .digitalOnboarding .buttonGroup .darkModeButton.disabled {
        background-color: #fff055;
        opacity: 0.55;
        cursor: not-allowed; }
      .digitalOnboarding .buttonGroup .darkModeButton.fullWidth {
        width: 100%; }
      .digitalOnboarding .buttonGroup .darkModeButton.oneThird {
        width: 33%; }
      .digitalOnboarding .buttonGroup .darkModeButton.noColors {
        color: unset;
        background: unset; }
      .digitalOnboarding .buttonGroup .darkModeButton.wrap {
        text-wrap: wrap; }
    .digitalOnboarding .buttonGroup .continueButton {
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      color: #323232 !important;
      background: #fff055;
      padding: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 2px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 18px;
      line-height: 22px;
      box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
      text-wrap: nowrap; }
      .digitalOnboarding .buttonGroup .continueButton:hover {
        background-color: #fff055;
        opacity: 0.85; }
      .digitalOnboarding .buttonGroup .continueButton:visited {
        color: #fff055;
        border-color: #fff055; }
      .digitalOnboarding .buttonGroup .continueButton:focus {
        -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
        box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
      .digitalOnboarding .buttonGroup .continueButton.disabled {
        background-color: #fff055;
        opacity: 0.55;
        cursor: not-allowed; }
      .digitalOnboarding .buttonGroup .continueButton.disabledButton {
        background-color: #fff055 !important;
        opacity: 0.55;
        pointer-events: none; }
      .digitalOnboarding .buttonGroup .continueButton.fullWidth {
        width: 100%; }
      .digitalOnboarding .buttonGroup .continueButton.oneThird {
        width: 33%; }
      .digitalOnboarding .buttonGroup .continueButton.noColors {
        color: unset;
        background: unset; }
      .digitalOnboarding .buttonGroup .continueButton.wrap {
        text-wrap: wrap; }
  .digitalOnboarding .seeOrderButton {
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    color: #323232 !important;
    background: #fff055;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 2px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    font-family: 'PeridotPE-Bold';
    font-size: 14px;
    line-height: 16px;
    font-family: 'PFHandbookPro-Medium';
    font-size: 18px;
    line-height: 22px;
    box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.25); }
    .digitalOnboarding .seeOrderButton:hover {
      background-color: #fff055;
      opacity: 0.85; }
    .digitalOnboarding .seeOrderButton:visited {
      color: #fff055;
      border-color: #fff055; }
    .digitalOnboarding .seeOrderButton:focus {
      -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      -moz-box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7);
      box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }
    .digitalOnboarding .seeOrderButton.disabled {
      background-color: #fff055;
      opacity: 0.55;
      cursor: not-allowed; }
    .digitalOnboarding .seeOrderButton:focus {
      outline-offset: 3px; }
    .digitalOnboarding .seeOrderButton.fullWidth {
      width: 100%; }
  .digitalOnboarding .modalHeader {
    display: flex;
    flex-direction: row;
    padding: 16px 16px 0;
    align-items: flex-start;
    align-self: stretch;
    height: auto; }
    .digitalOnboarding .modalHeader.youthHeader {
      position: relative;
      padding: 0; }
    .digitalOnboarding .modalHeader .modalImage {
      max-width: 720px;
      max-height: 197px;
      width: 100%;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      flex-shrink: 0;
      background-color: #f2f2f3; }
    .digitalOnboarding .modalHeader.morePadding {
      padding-bottom: 32px; }
    .digitalOnboarding .modalHeader .modalTitle {
      font-family: 'BTCosmo-Bold';
      font-size: 20px;
      line-height: 24px;
      font-family: 'PFHandbookPro-Bold';
      font-size: 24px;
      line-height: 28px;
      color: #323232;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      text-wrap: wrap; }
      @media only screen and (max-width: 480px) {
        .digitalOnboarding .modalHeader .modalTitle {
          padding-right: 16px; } }
      .digitalOnboarding .modalHeader .modalTitle.fixedWidth {
        max-width: 300px; }
    .digitalOnboarding .modalHeader .modalCloseButton {
      margin-left: auto; }
      .digitalOnboarding .modalHeader .modalCloseButton.youthCloseButton {
        position: absolute;
        right: 16px;
        top: 16px;
        fill: #fff; }
  .digitalOnboarding .modalBody {
    display: flex;
    padding: 16px 24px 24px 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch; }
    .digitalOnboarding .modalBody.gray-background {
      background-color: #f2f2f3;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      max-height: 330px; }
    .digitalOnboarding .modalBody.gray-background-opened {
      background-color: #f2f2f3;
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      max-height: 430px; }
    .digitalOnboarding .modalBody.noMaxHeight {
      max-height: unset; }
    @media screen and (max-width: 630px) {
      .digitalOnboarding .modalBody.maxHeightMobileOpenedS {
        max-height: 470px; }
        .digitalOnboarding .modalBody.maxHeightMobileOpenedS .youth-body-wrapper {
          gap: 12px !important; } }
    @media screen and (max-width: 515px) {
      .digitalOnboarding .modalBody.maxHeightMobileOpenedXs {
        max-height: 530px; } }
    @media screen and (max-width: 370px) {
      .digitalOnboarding .modalBody.maxHeightMobileOpenedXxs {
        max-height: unset; } }
    @media screen and (max-width: 570px) {
      .digitalOnboarding .modalBody.maxHeightMobile {
        max-height: 400px; } }
    @media screen and (max-width: 350px) {
      .digitalOnboarding .modalBody.maxHeightMobileS {
        max-height: 430px; } }
    @media screen and (max-width: 320px) {
      .digitalOnboarding .modalBody.maxHeightMobileXs {
        max-height: unset; } }
    .digitalOnboarding .modalBody .assistiveText {
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 16px;
      line-height: 20px; }
    .digitalOnboarding .modalBody .youth-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      max-width: 780px;
      width: 100%; }
      .digitalOnboarding .modalBody .youth-wrapper .youth-body-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        top: -80px;
        gap: 24px; }
      .digitalOnboarding .modalBody .youth-wrapper .youthBottomOpen {
        display: flex;
        gap: 4px;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: #f2f2f3; }
        .digitalOnboarding .modalBody .youth-wrapper .youthBottomOpen .text {
          font-family: 'PeridotPE-SemiBold';
          font-size: 14px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 22px;
          line-height: 26px; }
      .digitalOnboarding .modalBody .youth-wrapper .youthModalAssistiveText {
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 14px;
        line-height: 18px; }
      .digitalOnboarding .modalBody .youth-wrapper .youthBottom {
        display: flex;
        gap: 4px;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: #f2f2f3; }
        .digitalOnboarding .modalBody .youth-wrapper .youthBottom .youthBottomDrawer {
          display: flex;
          flex-direction: row;
          gap: 4px; }
        .digitalOnboarding .modalBody .youth-wrapper .youthBottom.expanded {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center; }
        .digitalOnboarding .modalBody .youth-wrapper .youthBottom .text {
          font-family: 'PeridotPE-SemiBold';
          font-size: 14px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 22px;
          line-height: 26px;
          align-self: flex-end; }
        .digitalOnboarding .modalBody .youth-wrapper .youthBottom .chevronContainer {
          display: flex; }
          .digitalOnboarding .modalBody .youth-wrapper .youthBottom .chevronContainer .chevron {
            align-self: center; }
      .digitalOnboarding .modalBody .youth-wrapper .youthBody {
        position: relative;
        padding: 16px;
        border-radius: 16px;
        background: #fff;
        display: flex;
        flex-direction: column;
        max-width: 688px;
        width: 100%;
        min-height: 300px; }
        .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyHeader {
          display: flex;
          flex-direction: row; }
          .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyHeader .title {
            display: flex;
            flex-direction: column; }
            .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyHeader .title .bold {
              font-family: 'BTCosmo-Bold';
              font-size: 20px;
              line-height: 24px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 24px;
              line-height: 28px; }
          .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyHeader .chip {
            display: flex;
            margin-left: auto;
            padding: 4px 8px;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            max-height: 24px;
            text-align: center;
            background: #b8e0ef;
            font-family: 'PeridotPE-SemiBold';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 16px;
            line-height: 20px; }
        .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyDetails {
          display: flex;
          flex-direction: column;
          gap: 24px; }
          .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyDetails .list-items {
            display: flex;
            flex-direction: column;
            margin-top: 24px;
            gap: 24px; }
            .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyDetails .list-items .item {
              display: flex;
              flex-direction: row;
              gap: 8px; }
              .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyDetails .list-items .item .icon {
                align-self: center; }
              .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyDetails .list-items .item .text {
                display: flex;
                flex-direction: column; }
                .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyDetails .list-items .item .text .bold {
                  font-family: 'BTCosmo-Bold';
                  font-size: 16px;
                  line-height: 20px;
                  font-family: 'PFHandbookPro-Bold';
                  font-size: 22px;
                  line-height: 26px; }
                .digitalOnboarding .modalBody .youth-wrapper .youthBody .youthBodyDetails .list-items .item .text .assistive {
                  font-family: 'PeridotPE-Regular';
                  font-size: 12px;
                  line-height: 16px;
                  font-family: 'PFHandbookPro-Medium';
                  font-size: 16px;
                  line-height: 20px;
                  color: #666; }
    .digitalOnboarding .modalBody.lessGap {
      gap: 8px; }
    .digitalOnboarding .modalBody .modalTitleBody {
      font-family: 'PeridotPE-SemiBold';
      font-size: 18px;
      line-height: 20px;
      font-family: 'PFHandbookPro-Bold';
      font-size: 18px;
      line-height: 22px;
      color: #323232;
      align-self: start; }
    .digitalOnboarding .modalBody .modalText {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 8px;
      max-height: 500px; }
      .digitalOnboarding .modalBody .modalText.learnMoreModalText {
        max-height: 304px;
        overflow-y: auto; }
        @media only screen and (max-width: 480px) {
          .digitalOnboarding .modalBody .modalText.learnMoreModalText {
            max-height: unset;
            height: calc(100vh - 96px); } }
      .digitalOnboarding .modalBody .modalText.alignCenter {
        align-items: center; }
      .digitalOnboarding .modalBody .modalText .modalBoldText {
        font-family: 'PeridotPE-SemiBold';
        font-size: 14px;
        line-height: 16px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 22px;
        line-height: 26px;
        color: #323232; }
        .digitalOnboarding .modalBody .modalText .modalBoldText.center {
          text-align: center; }
      .digitalOnboarding .modalBody .modalText .modalTextTitle {
        font-family: 'PeridotPE-SemiBold';
        font-size: 18px;
        line-height: 20px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 18px;
        line-height: 22px;
        color: #323232; }
        .digitalOnboarding .modalBody .modalText .modalTextTitle.center {
          text-align: center; }
      .digitalOnboarding .modalBody .modalText .modalSmallText {
        width: 100%;
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 18px;
        line-height: 22px;
        color: #323232; }
        .digitalOnboarding .modalBody .modalText .modalSmallText.noMargin {
          margin: 0; }
        .digitalOnboarding .modalBody .modalText .modalSmallText.withBulletPoints {
          list-style-type: disc;
          padding-left: 24px !important; }
        .digitalOnboarding .modalBody .modalText .modalSmallText.center {
          text-align: center; }
        .digitalOnboarding .modalBody .modalText .modalSmallText .boldText {
          font-family: 'PeridotPE-Bold';
          font-size: 14px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 18px;
          line-height: 22px;
          color: #323232; }
        .digitalOnboarding .modalBody .modalText .modalSmallText .titleText {
          width: 100%;
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 18px;
          line-height: 22px;
          color: #323232;
          text-align: center;
          display: inline-block; }
        .digitalOnboarding .modalBody .modalText .modalSmallText .bulletPoint {
          display: flex;
          flex-direction: row;
          align-items: start;
          gap: 4px; }
  .digitalOnboarding .digitalOnboardingHeader {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: static;
    padding: 32px 0 0; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingHeaderRow {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%; }
      .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingHeaderRow.withNoExitIcon {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px; }
    .digitalOnboarding .digitalOnboardingHeader .headerFlag {
      cursor: pointer;
      margin-left: auto;
      margin-right: 48px; }
      .digitalOnboarding .digitalOnboardingHeader .headerFlag.right {
        position: absolute;
        right: 0;
        margin-right: 48px; }
    .digitalOnboarding .digitalOnboardingHeader .exitIcon {
      margin-right: auto;
      margin-left: 44px;
      padding: 12px; }
    .digitalOnboarding .digitalOnboardingHeader .header-title {
      pointer-events: none;
      cursor: auto; }
      .digitalOnboarding .digitalOnboardingHeader .header-title.marginLeftAuto {
        margin-left: auto; }
    .digitalOnboarding .digitalOnboardingHeader.noBorder {
      border-bottom: none !important; }
    .digitalOnboarding .digitalOnboardingHeader.withWhiteBackground {
      background-color: #ffffff; }
      .digitalOnboarding .digitalOnboardingHeader.withWhiteBackground.noBorder {
        border-bottom: none !important; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingTitle-small {
      font-family: 'BTCosmo-Bold';
      font-size: 32px;
      line-height: 36px;
      font-family: 'PFHandbookPro-Bold';
      font-size: 32px;
      line-height: 36px;
      color: #323232;
      padding-top: 32px;
      text-align: center; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingTitle-large {
      font-family: 'BTCosmo-Bold';
      font-size: 32px;
      line-height: 36px;
      font-family: 'PFHandbookPro-Bold';
      font-size: 32px;
      line-height: 36px;
      color: #323232;
      padding-top: 32px;
      text-align: center;
      display: none; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingLogo {
      content: url("../../img/icons/WhatsUpLogo.svg");
      justify-content: center;
      display: none; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingLogoAll {
      content: url("../../img/icons/WhatsUpLogo.svg");
      justify-content: center; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer {
      max-width: 744px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper {
        /*** Non-demo CSS ***/
        width: 100%;
        padding: 16px 24px; }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper {
          display: flex;
          padding-left: 0; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper {
              flex-direction: column;
              gap: 32px; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item {
          display: flex;
          flex-direction: column;
          flex: 2;
          text-align: center;
          color: #9d9d9c; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child {
            text-align: left;
            flex: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child:after {
              margin: 0 auto 4px 0; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child:before {
              background-color: transparent;
              height: 2px; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child.otherStepperChild:before {
              background-color: #323232;
              height: 2px;
              left: 10%; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:last-child {
            text-align: right;
            flex: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:last-child:before {
              right: calc(100% - 0.5 * var(--circle-size));
              width: calc(200% - 1.5 * var(--circle-size)); }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:last-child:after {
              margin: 0 0 4px auto; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:nth-child(2):not(:last-child):before {
            right: calc(50% - 0.5 * var(--circle-size)); }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed {
            color: #212121; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed:after {
              border: none;
              background-color: #323232;
              z-index: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed:not(:first-child):before {
              background-color: #323232; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:after {
            --size: 3rem;
            content: '';
            display: block;
            width: var(--circle-size);
            height: var(--circle-size);
            border-radius: 50%;
            border: 2px solid #9d9d9c;
            background-color: #ffffff;
            margin: 0 auto 4px;
            order: -1;
            z-index: 1; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:before {
            content: '';
            position: relative;
            top: calc(var(--circle-size) / 2);
            width: calc(100% - var(--circle-size));
            right: calc(50% - var(--circle-size) / 2);
            height: 2px;
            background-color: #9d9d9c;
            order: -1;
            z-index: 0; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item {
              flex-direction: row;
              flex: unset;
              text-align: unset;
              align-items: center; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child {
                text-align: unset; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child:before {
                  background-color: transparent;
                  height: 40px;
                  width: 2px; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child:after {
                  margin: 0 8px 0 0; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:first-child.otherStepperChild:before {
                  background-color: transparent;
                  height: unset;
                  left: unset; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:last-child {
                text-align: unset; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:last-child:before {
                  height: 40px;
                  width: 2px;
                  right: -16px; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:last-child:after {
                  margin: 0 8px 0 0; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:nth-child(2):not(:last-child):before {
                right: -16px; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed {
                color: #212121; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed:after {
                  border: none;
                  background-color: #323232;
                  z-index: 1; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed:not(:first-child):before {
                  background-color: #323232; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:after {
                margin: 0 8px 0 0;
                width: var(--circle-size-mobile);
                height: var(--circle-size-mobile); }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:before {
                height: 40px;
                width: 2px;
                right: -16px;
                top: -36px; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-title {
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px; }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-wrapper {
          max-width: 1000px;
          margin: auto 0;
          width: 100%;
          position: relative; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-wrapper.youth-stepper-wrapper {
            max-width: 1100px; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-wrapper.closed .simple-stepper-item:not(.active) {
              transition: display 1s ease;
              display: none; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-wrapper.closed .simple-stepper-item:before {
              transition: display 1s ease;
              display: none; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-wrapper.closed .simple-stepper-close-button {
              transform: unset; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-close-button {
          display: none;
          position: absolute;
          top: 8px;
          right: 0;
          margin: 12px;
          transform: rotate(180deg);
          transition: transform 0.1s ease; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-close-button {
              display: block; } }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer {
      max-width: 1140px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper {
        /*** Non-demo CSS ***/
        width: 100%;
        padding: 16px 24px; }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper {
          display: flex;
          padding-left: 0; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper {
              flex-direction: column;
              gap: 32px; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item {
          display: flex;
          flex-direction: column;
          flex: 2;
          text-align: center;
          color: #9d9d9c; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child {
            text-align: left;
            flex: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child:after {
              margin: 0 auto 4px 0; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child:before {
              background-color: transparent;
              height: 2px; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child.otherStepperChild:before {
              background-color: #323232;
              height: 2px;
              left: 10%; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:last-child {
            text-align: right;
            flex: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:last-child:before {
              right: calc(100% - 0.5 * var(--circle-size));
              width: calc(200% - 1.5 * var(--circle-size)); }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:last-child:after {
              margin: 0 0 4px auto; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:nth-child(2):not(:last-child):before {
            right: calc(50% - 0.5 * var(--circle-size)); }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed {
            color: #212121; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed:after {
              border: none;
              background-color: #323232;
              z-index: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed:not(:first-child):before {
              background-color: #323232; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:after {
            --size: 3rem;
            content: '';
            display: block;
            width: var(--circle-size);
            height: var(--circle-size);
            border-radius: 50%;
            border: 2px solid #9d9d9c;
            background-color: #ffffff;
            margin: 0 auto 4px;
            order: -1;
            z-index: 1; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:before {
            content: '';
            position: relative;
            top: calc(var(--circle-size) / 2);
            width: calc(100% - var(--circle-size));
            right: calc(50% - var(--circle-size) / 2);
            height: 2px;
            background-color: #9d9d9c;
            order: -1;
            z-index: 0; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item {
              flex-direction: row;
              flex: unset;
              text-align: unset;
              align-items: center; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child {
                text-align: unset; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child:before {
                  background-color: transparent;
                  height: 40px;
                  width: 2px; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child:after {
                  margin: 0 8px 0 0; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:first-child.otherStepperChild:before {
                  background-color: transparent;
                  height: unset;
                  left: unset; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:last-child {
                text-align: unset; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:last-child:before {
                  height: 40px;
                  width: 2px;
                  right: -16px; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:last-child:after {
                  margin: 0 8px 0 0; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:nth-child(2):not(:last-child):before {
                right: -16px; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed {
                color: #212121; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed:after {
                  border: none;
                  background-color: #323232;
                  z-index: 1; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed:not(:first-child):before {
                  background-color: #323232; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:after {
                margin: 0 8px 0 0;
                width: var(--circle-size-mobile);
                height: var(--circle-size-mobile); }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:before {
                height: 40px;
                width: 2px;
                right: -16px;
                top: -36px; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-title {
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px; }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-wrapper {
          max-width: 1000px;
          margin: auto 0;
          width: 100%;
          position: relative; }
          .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-wrapper.youth-stepper-wrapper {
            max-width: 1100px; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-wrapper.closed .simple-stepper-item:not(.active) {
              transition: display 1s ease;
              display: none; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-wrapper.closed .simple-stepper-item:before {
              transition: display 1s ease;
              display: none; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-wrapper.closed .simple-stepper-close-button {
              transform: unset; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-close-button {
          display: none;
          position: absolute;
          top: 8px;
          right: 0;
          margin: 12px;
          transform: rotate(180deg);
          transition: transform 0.1s ease; }
          @media only screen and (max-width: 650px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-close-button {
              display: block; } }
    @media screen and ((max-width: 480px)) {
      .digitalOnboarding .digitalOnboardingHeader .headerFlag {
        margin-right: 12px; }
      .digitalOnboarding .digitalOnboardingHeader .exitIcon {
        margin-left: 12px; } }
  .digitalOnboarding #digitalOnboarding {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  .digitalOnboarding .digitalOnboardingBody {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #323232; }
    .digitalOnboarding .digitalOnboardingBody .ui-tooltip {
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 16px;
      line-height: 20px;
      color: #323232; }
      .digitalOnboarding .digitalOnboardingBody .ui-tooltip .list {
        display: flex;
        flex-direction: column; }
      .digitalOnboarding .digitalOnboardingBody .ui-tooltip .assistiveText {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 16px;
        line-height: 20px;
        color: #666; }
    .digitalOnboarding .digitalOnboardingBody .giftCard {
      background-color: #ffffff;
      border-radius: 2px;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
      display: flex;
      padding: 16px;
      flex-direction: column;
      align-items: center;
      align-self: center; }
      .digitalOnboarding .digitalOnboardingBody .giftCard .divider {
        width: 100%;
        height: 1px;
        margin: 16px 0px; }
      .digitalOnboarding .digitalOnboardingBody .giftCard.fixedWidth {
        max-width: 344px; }
      .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardTitle {
        font-family: 'BTCosmo-Bold';
        font-size: 22px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 24px;
        line-height: 28px;
        text-align: center; }
      .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody {
        width: 100%;
        display: flex;
        flex-direction: column; }
        .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardPrice {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 4px;
          padding: 12px 0 16px; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardPrice .amount {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: flex-end; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardPrice .amount .integer {
              font-family: 'BTCosmo-Bold';
              font-size: 25px;
              line-height: 28px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 24px;
              line-height: 28px; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardPrice .amount .fraction {
              font-family: 'BTCosmo-Bold';
              font-size: 16px;
              line-height: 20px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 22px;
              line-height: 26px; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardPrice .bottomText {
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px; }
        .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 16px;
          padding: 12px;
          border-radius: 2px;
          border: 1px solid #323232; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame.noBorder {
            border: none; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame.noPadding {
            padding: 0; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .title {
            font-family: 'BTCosmo-Bold';
            font-size: 16px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 22px;
            line-height: 26px;
            text-align: left;
            display: flex;
            flex-direction: row;
            gap: 4px;
            align-self: flex-start; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitles {
            margin: 0;
            font-family: 'PeridotPE-SemiBold';
            font-size: 14px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 22px;
            line-height: 26px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
            list-style-type: square; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitles .listTitle {
              margin-left: -16px;
              padding-bottom: 4px; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitles.list {
              padding: 0 16px;
              list-style-type: square !important; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitles.activation {
              justify-content: space-between; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitle {
            font-family: 'PeridotPE-Regular';
            font-size: 14px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 14px;
            line-height: 18px; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitle.larger {
              font-family: 'BTCosmo-Bold';
              font-size: 20px;
              line-height: 24px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 24px;
              line-height: 28px; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitle .subtitle2 {
              font-family: 'BTCosmo-Bold';
              font-size: 20px;
              line-height: 24px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 24px;
              line-height: 28px; }
            .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .giftCardFrame .subtitle .subtitleStrong {
              font-family: 'PeridotPE-Bold';
              font-size: 14px;
              line-height: 20px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 14px;
              line-height: 18px; }
        .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .youthCardFrame .margin-bottom {
          margin-bottom: 16px; }
        .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .youthCardFrame .bold {
          font-family: 'PeridotPE-SemiBold';
          font-size: 14px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 22px;
          line-height: 26px; }
        .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .youthCardFrame .subtitles {
          margin: 0;
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 14px;
          line-height: 18px;
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 4px;
          align-items: flex-start;
          list-style-type: square; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .youthCardFrame .subtitles .listTitle {
            margin-left: -16px;
            padding-bottom: 4px; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .youthCardFrame .subtitles.list {
            padding: 0 16px;
            list-style-type: square !important; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .youthCardFrame .subtitles.activation {
            justify-content: space-between; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .youthCardFrame .subtitles .centered {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .paragraph {
          font-family: 'PeridotPE-Regular';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          padding-top: 8px; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .paragraph .strong {
            font-family: 'PeridotPE-SemiBold';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 16px;
            line-height: 20px; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .paragraph.assistive {
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            color: #666; }
          .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .paragraph.large-margin {
            margin-top: 24px; }
        .digitalOnboarding .digitalOnboardingBody .giftCard .giftCardBody .learnMore {
          font-family: 'PeridotPE-Regular';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #323232;
          text-decoration: underline;
          align-self: center;
          padding-top: 16px; }
    .digitalOnboarding .digitalOnboardingBody .youthCard {
      padding: 16px;
      border-radius: 16px;
      background-color: #ffffff;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      align-items: center;
      align-self: center;
      width: 100%; }
      .digitalOnboarding .digitalOnboardingBody .youthCard .youthCardTitle {
        display: flex;
        flex-direction: row;
        align-self: flex-start;
        gap: 8px;
        width: 100%; }
        .digitalOnboarding .digitalOnboardingBody .youthCard .youthCardTitle .chip {
          display: flex;
          margin-left: auto;
          padding: 4px 8px;
          justify-content: center;
          align-items: center;
          border-radius: 20px;
          text-align: center;
          background: #b8e0ef;
          color: #004b87;
          font-family: 'PeridotPE-SemiBold';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 16px;
          line-height: 20px; }
      .digitalOnboarding .digitalOnboardingBody .youthCard.fixedWidth {
        max-width: 400px; }
      .digitalOnboarding .digitalOnboardingBody .youthCard .terms {
        display: flex;
        align-self: center;
        margin-top: 16px;
        color: #212121;
        font-family: 'PeridotPE-Bold';
        font-size: 12px;
        line-height: 16px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 16px;
        line-height: 20px; }
      .digitalOnboarding .digitalOnboardingBody .youthCard .bold {
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 16px;
        line-height: 20px; }
        .digitalOnboarding .digitalOnboardingBody .youthCard .bold.centered {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 8px; }
      .digitalOnboarding .digitalOnboardingBody .youthCard .youthCardBody {
        margin-top: 8px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .youthCard .youthCardBody .assistiveText {
          font-family: 'PeridotPE-Regular';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #666; }
        .digitalOnboarding .digitalOnboardingBody .youthCard .youthCardBody .youthGiftCard {
          display: flex;
          flex-direction: row;
          gap: 8px;
          padding: 16px 8px;
          border-radius: 8px;
          background: #f2f2f3; }
          .digitalOnboarding .digitalOnboardingBody .youthCard .youthCardBody .youthGiftCard .youthImage {
            display: flex;
            align-self: flex-start; }
          .digitalOnboarding .digitalOnboardingBody .youthCard .youthCardBody .youthGiftCard .youthGiftCardDetails {
            display: flex;
            flex-direction: column; }
    .digitalOnboarding .digitalOnboardingBody .newGiftCard {
      background-color: #ffffff;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      max-width: 432px; }
      .digitalOnboarding .digitalOnboardingBody .newGiftCard.withSelection {
        cursor: pointer; }
      .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardTitle {
        font-family: 'BTCosmo-Bold';
        font-size: 16px;
        line-height: 20px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 22px;
        line-height: 26px;
        display: flex;
        flex-direction: row; }
        .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardTitle .newGiftCardPriceTag {
          margin-left: auto;
          display: flex;
          flex-direction: row; }
          .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardTitle .newGiftCardPriceTag .amount .integer {
            font-family: 'BTCosmo-Bold';
            font-size: 25px;
            line-height: 28px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 24px;
            line-height: 28px;
            color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardTitle .newGiftCardPriceTag .amount .fraction {
            font-family: 'BTCosmo-Bold';
            font-size: 25px;
            line-height: 28px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 24px;
            line-height: 28px;
            color: #323232; }
      .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardBody {
        display: flex;
        flex-direction: column; }
        .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardBody.withRadio {
          margin-left: 8%; }
        .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardBody .newGiftCardFrame .title {
          font-family: 'PeridotPE-SemiBold';
          font-size: 14px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 22px;
          line-height: 26px; }
        .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardBody .newGiftCardFrame .subtitles {
          list-style-type: disc;
          padding-left: 24px; }
          .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardBody .newGiftCardFrame .subtitles .subtitle .bold {
            font-family: 'PeridotPE-Bold';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 16px;
            line-height: 20px; }
        .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardBody .newGiftCardFrame .assistiveText {
          font-family: 'PeridotPE-Regular';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #666; }
    .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer {
      display: flex;
      max-width: 460px;
      padding: 32px 24px 64px;
      flex-direction: column;
      align-items: center;
      gap: 24px; }
      @media only screen and (max-width: 480px) {
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer {
          padding: 32px 16px 64px; } }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer.unsetWidth {
        max-width: unset; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer.larger {
        max-width: 480px; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer.extraLarge {
        max-width: 500px;
        width: 100%; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingSubtitle {
        font-family: 'BTCosmo-Bold';
        font-size: 25px;
        line-height: 28px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 24px;
        line-height: 28px;
        text-align: center;
        max-width: 460px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingSubtitle img {
          max-height: 96px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingSubtitle.whiteLabel {
          font-family: 'BTCosmo-Bold';
          font-size: 20px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 24px;
          line-height: 28px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          align-self: flex-start;
          gap: 8px; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText {
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 16px;
        line-height: 20px;
        color: #323232; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText.withWidth {
          width: 460px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText.withSmallerWidth {
          max-width: 432px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-assistiveSmall {
          font-family: 'PeridotPE-Regular';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-assistiveSmall.gray {
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            color: #666; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-smaller {
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 14px;
          line-height: 18px;
          color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-smaller.alignStart {
            align-self: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-aLittleSmaller {
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-aLittleSmaller.alignStart {
            align-self: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-larger {
          font-family: 'PeridotPE-Regular';
          font-size: 18px;
          line-height: 28px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 22px;
          line-height: 26px;
          color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-larger.textAlignCenter {
            text-align: center; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText.alignStart {
          align-self: start; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingBottomText {
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 14px;
        line-height: 18px;
        color: #323232; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio {
        margin: 16px 0;
        display: flex;
        flex-direction: column;
        align-items: start;
        align-self: start;
        gap: 24px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.md-radio-inline {
          display: inline-block; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.disabled {
          opacity: 0.6;
          pointer-events: none !important;
          cursor: default; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio input[type='radio'] {
          display: none; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio input[type='radio']:checked + label:before {
            border-color: #212121; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio input[type='radio']:checked + label:after {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
            background-color: #fff055; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label {
          display: inline-block;
          position: relative;
          padding: 0 34px;
          margin-bottom: 0;
          cursor: pointer;
          vertical-align: bottom;
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 18px;
          line-height: 22px;
          color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label.flexColumn {
            padding-right: 0; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label.flexColumn:before {
              top: 0 !important; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label.flexColumn:after {
              top: 5px !important; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label span {
            display: block;
            width: 100%;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label:before, .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label:after {
            position: absolute;
            content: '';
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            transition: all 0.2s ease;
            transition-property: transform, border-color;
            box-sizing: border-box; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label:before {
            left: 0;
            top: 0;
            width: 24px;
            height: 24px;
            border: 1px solid #212121; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio label:after {
            top: 4px;
            left: 4px;
            width: 16px;
            height: 16px;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
            background: #212121; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta {
          margin: 16px 0; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta.md-radio-inline {
            display: inline-block; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta.disabled {
            opacity: 0.6;
            pointer-events: none !important;
            cursor: default; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta input[type='radio'] {
            display: none; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta input[type='radio']:checked + label:before {
              border-color: #212121; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta input[type='radio']:checked + label:after {
              -webkit-transform: scale(1);
              -moz-transform: scale(1);
              transform: scale(1);
              background-color: #e20074; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label {
            display: inline-block;
            position: relative;
            padding: 0 34px;
            margin-bottom: 0;
            cursor: pointer;
            vertical-align: bottom;
            font-family: 'PeridotPE-SemiBold';
            font-size: 18px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 18px;
            line-height: 22px;
            color: #323232; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label.flexColumn {
              padding-right: 0; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label.flexColumn:before {
                top: 0 !important; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label.flexColumn:after {
                top: 5px !important; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label span {
              display: block;
              width: 100%;
              font-family: 'PeridotPE-Regular';
              font-size: 16px;
              line-height: 24px;
              font-family: 'PFHandbookPro-Medium';
              font-size: 16px;
              line-height: 20px;
              color: #323232; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label:before, .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label:after {
              position: absolute;
              content: '';
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              border-radius: 50%;
              -webkit-transition: all 0.2s ease;
              -moz-transition: all 0.2s ease;
              transition: all 0.2s ease;
              transition-property: transform, border-color;
              box-sizing: border-box; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label:before {
              left: 0;
              top: 0;
              width: 24px;
              height: 24px;
              border: 1px solid #212121; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label:after {
              top: 4px;
              left: 4px;
              width: 16px;
              height: 16px;
              -webkit-transform: scale(0);
              -moz-transform: scale(0);
              transform: scale(0);
              background: #212121; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta label:before {
            border-color: #e20074; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.magenta input[type='radio']:checked + label:before {
            border-color: #e20074; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.noMargin {
          margin: 16px 0; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio.noMarginTopAndBottom {
          margin: 0; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio .titleContainer {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 4px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio .titleContainer .title {
            color: #323232;
            font-family: 'PeridotPE-SemiBold';
            font-size: 18px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 18px;
            line-height: 22px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio .titleContainer .subtitle {
            color: #323232;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingRadio .ddFilterWrapper {
          max-width: 300px;
          align-self: center; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingNewCard {
        padding-left: 0; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingInputContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingInputContainer .digitalOnboardingInputTitle {
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 18px;
          line-height: 22px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingInputContainer .digitalOnboardingInputTitle.errorRed {
            color: #da0b0b !important; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingInputContainer .digitalOnboardingInput {
          border-radius: 2px;
          border: 1px solid #323232;
          background-color: #ffffff;
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #323232;
          display: flex;
          padding: 12px 8px;
          justify-content: center;
          align-items: center;
          gap: 8px;
          align-self: stretch;
          flex-grow: 1;
          margin-top: 8px;
          width: 100%; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingInputContainer .digitalOnboardingInput.withError {
            border-color: #da0b0b !important; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        align-items: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .title {
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 18px;
          line-height: 22px;
          color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .title.errorRed {
            color: #da0b0b !important; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .phoneInput {
          max-width: 344px;
          color: #323232;
          border-radius: 2px;
          border: 1px solid #323232;
          background-color: #ffffff;
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          display: flex;
          padding: 12px 8px;
          justify-content: center;
          align-items: center;
          gap: 8px;
          align-self: stretch;
          flex-grow: 1; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .phoneInput.withError {
            border-color: #da0b0b !important; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .phoneInput.stretch {
            max-width: unset;
            width: 100%; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card {
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
        display: flex;
        padding: 16px;
        flex-direction: column;
        align-items: center;
        align-self: stretch; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card.fixedWidth {
          max-width: 456px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardHeader {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          width: 100%;
          gap: 12px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardHeader img {
            max-height: 96px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardHeader .text {
            font-family: 'PeridotPE-SemiBold';
            font-size: 22px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 24px;
            line-height: 28px;
            color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardHeader.alignLeft {
            justify-content: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          gap: 24px;
          padding: 16px 0 16px;
          width: 100%; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody.no-pb {
            padding-bottom: 0 !important; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .cardItemList {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: start; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .cardItemList .cardItem {
              display: flex;
              flex-direction: row;
              gap: 8px;
              align-items: center; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .cardItemList .cardItem.alignStart {
                align-items: start; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .cardItemList .cardItem .cardItemText {
                font-family: 'PeridotPE-Regular';
                font-size: 16px;
                line-height: 24px;
                font-family: 'PFHandbookPro-Medium';
                font-size: 18px;
                line-height: 22px;
                color: #323232; }
                .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .cardItemList .cardItem .cardItemText.noWrap {
                  text-wrap: nowrap; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .amount {
            width: 50%; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .amount .integer {
              font-family: 'BTCosmo-Bold';
              font-size: 32px;
              line-height: 36px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 32px;
              line-height: 36px;
              color: #323232; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .amount .fraction {
              font-family: 'BTCosmo-Bold';
              font-size: 32px;
              line-height: 36px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 32px;
              line-height: 36px;
              color: #323232; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardFooter {
          display: flex;
          justify-content: start;
          width: 100%;
          padding-top: 8px; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard {
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard .scanningCardHeader {
          padding: 4px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard .scanningCardHeader .textBold {
            display: none; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard .scanningCardBody {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 24px;
          padding: 16px 24px 24px;
          width: 100%; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard .scanningCardBody .text {
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 18px;
            line-height: 22px;
            color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard .scanningCardBody .textField .title {
            font-family: 'PeridotPE-SemiBold';
            font-size: 18px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 18px;
            line-height: 22px;
            color: #323232; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .codeExpiresText {
        font-family: 'PeridotPE-SemiBold';
        font-size: 14px;
        line-height: 16px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 22px;
        line-height: 26px;
        color: #323232; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .otpInput {
        display: flex;
        width: 128px;
        height: 52px;
        padding: 12px 0px 4px 0px;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        border: none;
        text-align: center;
        border-bottom: 1px solid var(--grayscale-5-text, #212121);
        font-family: 'BTCosmo-Bold';
        font-size: 32px;
        line-height: 36px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 32px;
        line-height: 36px; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .activationStepsHeaderText {
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 18px;
        line-height: 22px;
        color: #323232;
        align-self: start; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .activationStepsList {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .activationStepsList .activationStep {
          display: flex;
          flex-direction: row;
          align-items: start;
          gap: 8px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .activationStepsList .activationStep .activationStepText {
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 18px;
            line-height: 22px;
            color: #323232;
            padding-left: 42px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .activationStepsList .activationStep svg {
            position: absolute; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .activationStepsList .activationStep svg path {
              fill: #323232; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .frequentlyAskedQuestions {
        align-self: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .frequentlyAskedQuestions .faq {
          font-family: 'PeridotPE-Regular';
          font-size: 14px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 14px;
          line-height: 18px;
          color: #323232;
          text-decoration: underline; }
    .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm {
      display: flex;
      padding: 32px 24px 64px;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      max-width: 744px; }
      @media only screen and (max-width: 480px) {
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm {
          padding: 32px 16px 64px; } }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm.threeColumns {
        max-width: 980px; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormTitle {
        font-family: 'BTCosmo-Bold';
        font-size: 25px;
        line-height: 28px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 24px;
        line-height: 28px;
        color: #323232;
        text-align: center;
        display: block;
        width: 744px; }
        @media only screen and (max-width: 767px) {
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormTitle {
            width: 100%; } }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormTitle.left {
          text-align: left; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormTitle.noTopGapTitle {
          display: none; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormTitle.metadataTitle {
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 18px;
          line-height: 22px;
          display: inline-block;
          text-align: left;
          width: 744px; }
          @media only screen and (max-width: 767px) {
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormTitle.metadataTitle {
              width: 100%; } }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .title1 {
        display: block; }
        @media only screen and (max-width: 767px) {
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .title1 {
            display: none; } }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .title2 {
        display: none; }
        @media only screen and (max-width: 767px) {
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .title2 {
            display: flex;
            flex-direction: row;
            gap: 12px;
            align-items: center; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .title2 .title {
              font-family: 'PeridotPE-SemiBold';
              font-size: 22px;
              line-height: 24px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 24px;
              line-height: 28px;
              color: #323232; } }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormText {
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 16px;
        line-height: 20px;
        color: #323232; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormAssistiveText {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 16px;
        line-height: 20px;
        color: #323232;
        align-self: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormAssistiveText.withMargin {
          margin-top: 24px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormAssistiveText.center {
          align-self: center; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormAssistiveText.bold {
          font-family: 'PeridotPE-SemiBold';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 16px;
          line-height: 20px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormAssistiveText.simActivationReducedGap {
          margin-top: -8px !important;
          margin-bottom: -8px !important; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer {
        justify-content: flex-end;
        display: flex;
        flex-direction: column;
        align-self: flex-end; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer.maxWidth {
          max-width: 610px;
          width: 100%; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .boldSmallText {
          font-family: 'PeridotPE-SemiBold';
          font-size: 14px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 22px;
          line-height: 26px;
          color: #323232; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBoxContainer {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBoxContainer.alignCheckboxStart {
            align-items: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBox {
          display: flex;
          height: 40px;
          align-items: flex-start; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBox .md-checkbox {
            margin-left: 0; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBox label::before {
            border-radius: 2px;
            background-color: #ffffff; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBox label:focus-visible:before {
            outline: 5px auto -webkit-focus-ring-color; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBox input[type='checkbox']:checked + label:after {
            border-color: #323232; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .label {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #323232; }
    .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer {
      display: flex;
      flex-direction: row;
      gap: 32px;
      width: 100%; }
      @media only screen and (max-width: 767px) {
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer {
          flex-direction: column; } }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer.larger {
        max-width: 980px; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer.alignCheckboxStart {
          align-items: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox {
          display: flex;
          height: 40px;
          align-items: flex-start; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox .md-checkbox {
            margin-left: 0; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox label::before {
            border-radius: 2px;
            background-color: #ffffff; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox label:focus-visible:before {
            outline: 5px auto -webkit-focus-ring-color; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox input[type='checkbox']:checked + label:after {
            border-color: #323232; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .label {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #323232; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 24px;
        width: 50%; }
        @media only screen and (max-width: 767px) {
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn {
            width: 100%; } }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .simActivationGroupSmallGap {
          display: flex;
          flex-direction: column;
          gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .title {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px;
          font-family: 'BTCosmo-Bold';
          font-size: 20px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 24px;
          line-height: 28px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.fullWidth {
          width: 100%; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.extraHeight {
          margin-bottom: 150px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.oneThird {
          width: 33%; }
          @media only screen and (max-width: 767px) {
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.oneThird {
              width: 100%; } }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.smallGap {
          gap: 12px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .alignCenter {
          align-self: center;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .alignCenter img {
            max-height: 96px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .alignCenter.noGapImage {
          margin-top: -24px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .smallGapWithColumn {
          display: flex;
          flex-direction: column;
          gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .simActivationIntro {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 16px;
          border-radius: 16px;
          background-color: #ffffff; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #323232;
          padding-left: 0;
          margin: 0; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText li {
            list-style-type: none; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText.column {
            display: flex;
            flex-direction: column; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText.bold {
            font-family: 'PeridotPE-SemiBold';
            font-size: 18px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 18px;
            line-height: 22px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText.smallGap {
            display: flex;
            flex-direction: column;
            gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .simValidationProgress {
          width: 100%;
          display: flex;
          flex-direction: column; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .simValidationProgressShell {
          display: flex;
          width: 100%;
          height: 12px;
          border-radius: 12px;
          background: #e6e6e6;
          overflow: hidden; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .simValidationProgressBar {
          height: 12px;
          background-color: var(--Secondary-Base, #00699e);
          border-radius: 12px;
          transition: width 0.3s ease; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .photoContainer {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-self: center;
          width: 100%;
          gap: 32px;
          margin-top: 12px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer {
          width: 100%;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer #video {
            display: none; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer #spotlight {
            width: 100%;
            height: auto;
            display: block; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .documentVideo {
            width: 100%;
            object-fit: contain;
            transform: scaleX(-1); }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 343px;
            opacity: 1; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .documentVideo {
              width: 100%;
              object-fit: contain;
              transform: scaleX(-1);
              opacity: 0.7; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border.horizontal {
              max-height: 240px;
              max-width: 393px;
              height: 85%; }
              @media screen and ((max-width: 650px)) {
                .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border.horizontal {
                  max-height: calc(240px / 1.3);
                  max-width: 280px; } }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border.vertical {
              max-height: 343px;
              max-width: 240px;
              height: 85%; }
              @media screen and ((max-width: 480px)) {
                .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border.vertical {
                  max-width: calc(343px / 2.5); } }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border.oval {
              width: 281px !important;
              height: 348px !important;
              border-radius: 50% / 50%;
              border-radius: 50%;
              border: 1.978px solid #ffffff;
              opacity: 1 !important;
              overflow: hidden; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .corner {
              position: absolute;
              width: 25px;
              height: 25px;
              stroke-width: 4px; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .corner::before, .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .corner::after {
                content: '';
                position: absolute;
                background-color: #ffffff; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .corner::before {
                width: 25px;
                height: 4px; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .corner::after {
                width: 4px;
                height: 25px; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .top-left {
              top: 0;
              left: 0; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .top-right {
              top: 0;
              right: 0;
              transform: rotate(90deg); }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .bottom-left {
              bottom: 0;
              left: 0;
              transform: rotate(270deg); }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhotoContainer .corner-border .bottom-right {
              bottom: 0;
              right: 0;
              transform: rotate(180deg); }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .attachFileContainer {
          gap: 8px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .attachFileWrapper {
          display: flex;
          flex-direction: row;
          justify-content: center;
          gap: 8px;
          width: 100%; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .attachFileWrapper.small {
            font-family: 'PeridotPE-Regular';
            font-size: 14px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 14px;
            line-height: 18px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .documentPhoto {
          width: 110%;
          height: 100%;
          object-fit: cover; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .cameraButtonWrapper {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .cameraButton {
          padding: 0;
          min-width: auto;
          width: 56px;
          height: 56px;
          width: 56px;
          height: 56px;
          border-radius: 999px;
          padding: 0;
          background-color: #fff055;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          -webkit-box-shadow: 0 0 0 2px #fff055;
          -moz-box-shadow: 0 0 0 2px #fff055;
          box-shadow: 0 0 0 2px #fff055; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .cameraButton::before {
            content: '';
            position: absolute;
            inset: 6px;
            border-radius: 999px;
            border: 2px solid #ffffff; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .cameraButtonLabel {
          font-family: 'PeridotPE-Regular';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #0e8103; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box.digitalOnboardingBox {
          padding: 16px;
          display: flex;
          flex-direction: column;
          width: 100%;
          border-radius: 16px;
          background: var(--grayscale-0-white, #fff);
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 0 2px 0 rgba(0, 0, 0, 0.14); }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .box1 {
          display: flex;
          flex-direction: row;
          padding: 16px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .firstHalf {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 8px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .rightIcon {
          display: flex;
          flex-direction: column;
          margin-left: auto;
          align-items: center;
          justify-content: center;
          color: #212121;
          font-family: 'PeridotPE-Regular';
          font-size: 12px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .divider {
          width: 100%;
          color: #e6e6e6;
          border: 1px solid #e6e6e6; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .emailFields {
          display: flex;
          width: 100%;
          flex-direction: column;
          align-items: start;
          gap: 24px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp {
          display: flex;
          flex-direction: row;
          gap: 8px;
          align-items: flex-end;
          width: 100%; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp.alignCenter {
            align-items: flex-start; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp.errorStateCenter {
            align-items: center; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp .iButton {
            position: static; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .boldText {
          font-family: 'BTCosmo-Bold';
          font-size: 16px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 22px;
          line-height: 26px;
          color: #323232; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .boldSmallText {
          font-family: 'PeridotPE-SemiBold';
          font-size: 14px;
          line-height: 16px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 22px;
          line-height: 26px;
          color: #323232; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer {
          width: 100%;
          display: flex;
          flex-direction: column;
          position: relative; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInputTitle {
            font-family: 'PeridotPE-SemiBold';
            font-size: 18px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 18px;
            line-height: 22px;
            color: #323232;
            text-wrap: wrap; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInputTitle.errorRed {
              color: #da0b0b !important; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInputTitle.readOnly {
              color: var(--grayscale-4-disable, #5f5f5f); }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput {
            border-radius: 2px;
            border: 1px solid #323232;
            background-color: #ffffff;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            color: #323232;
            display: flex;
            padding: 12px 8px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            flex-grow: 1;
            margin-top: 8px;
            width: 100%; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput:focus-visible {
              outline: 5px auto -webkit-focus-ring-color; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput.withError {
              border-color: #da0b0b !important; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput.readOnly {
              border-color: var(--grayscale-4-disable, #848484);
              color: var(--grayscale-4-disable, #848484);
              pointer-events: none; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 8px;
          padding: 12px;
          border-radius: 2px;
          border: 1px solid #323232;
          background-color: #ffffff; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .title {
            font-family: 'BTCosmo-Bold';
            font-size: 16px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 22px;
            line-height: 26px;
            color: #323232;
            text-align: center; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .subtitle {
            font-family: 'BTCosmo-Bold';
            font-size: 25px;
            line-height: 28px;
            font-family: 'PFHandbookPro-Bold';
            font-size: 24px;
            line-height: 28px;
            color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .paragraph {
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            color: #323232; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .paragraph .strong {
              font-family: 'PeridotPE-SemiBold';
              font-size: 12px;
              line-height: 16px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 16px;
              line-height: 20px;
              color: #323232; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .cardFooter {
            display: flex;
            justify-content: start;
            width: 100%;
            padding-top: 8px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .learnMore {
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            color: #323232;
            text-decoration: underline;
            cursor: pointer; }
  .digitalOnboarding .digitalOnboardingPaymentContainer {
    border-radius: 16px;
    background-color: #ffffff;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-width: 400px; }
    .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentTitle {
      font-family: 'BTCosmo-Bold';
      font-size: 20px;
      line-height: 24px;
      font-family: 'PFHandbookPro-Bold';
      font-size: 24px;
      line-height: 28px;
      display: flex;
      padding: 16px 16px 0;
      justify-content: center;
      align-self: stretch;
      color: #323232; }
    .digitalOnboarding .digitalOnboardingPaymentContainer .paymentSelectTitle {
      font-family: 'PeridotPE-SemiBold';
      font-size: 18px;
      line-height: 20px;
      font-family: 'PFHandbookPro-Bold';
      font-size: 18px;
      line-height: 22px;
      color: #323232; }
    .digitalOnboarding .digitalOnboardingPaymentContainer .infoText {
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 16px;
      line-height: 20px;
      color: #767676; }
    .digitalOnboarding .digitalOnboardingPaymentContainer .dropdownContainer .dropdownInput {
      border-radius: 2px;
      color: #323232;
      border-color: #323232;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 16px;
      line-height: 20px; }
      .digitalOnboarding .digitalOnboardingPaymentContainer .dropdownContainer .dropdownInput.withError {
        border-color: #da0b0b; }
    .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 16px;
      align-self: stretch;
      width: 100%; }
      .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .radioButtons {
        display: flex;
        flex-direction: row; }
      .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .termsCheckBox {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: start; }
        .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .termsCheckBox label::before {
          border-radius: 2px;
          background-color: #ffffff; }
        .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .termsCheckBox input[type='checkbox']:checked + label:after {
          border-color: #323232; }
        .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .termsCheckBox .labelWithMargin {
          margin-top: 12px;
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px; }
      .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative; }
        .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInputTitle {
          font-family: 'PeridotPE-SemiBold';
          font-size: 18px;
          line-height: 20px;
          font-family: 'PFHandbookPro-Bold';
          font-size: 18px;
          line-height: 22px;
          color: #323232; }
          .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInputTitle.errorRed {
            color: #da0b0b !important; }
        .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInput {
          border-radius: 2px;
          border: 1px solid #323232;
          background-color: #ffffff;
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          display: flex;
          padding: 12px 8px;
          justify-content: center;
          align-items: center;
          gap: 8px;
          align-self: stretch;
          flex-grow: 1;
          margin-top: 8px;
          width: 100%; }
          .digitalOnboarding .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInput.withError {
            border-color: #da0b0b !important; }
  .digitalOnboarding .ddFilterWrapper.readOnly .ddFilter .ddFilterContent .dropdown-title {
    color: var(--grayscale-4-disable, #848484); }
  .digitalOnboarding .ddFilterWrapper.readOnly .ddFilter .ddFilterContent .ddFilterInputContainer {
    cursor: auto; }
    .digitalOnboarding .ddFilterWrapper.readOnly .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
      border-color: var(--grayscale-4-disable, #848484);
      color: var(--grayscale-4-disable, #848484);
      pointer-events: none;
      cursor: auto; }
    .digitalOnboarding .ddFilterWrapper.readOnly .ddFilter .ddFilterContent .ddFilterInputContainer img {
      display: none; }
  .digitalOnboarding .box.offerBox {
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%; }
  .digitalOnboarding .box .offerBoxImage {
    align-self: flex-start; }
  .digitalOnboarding .box .boxVerticalText {
    display: flex;
    flex-direction: column; }
    .digitalOnboarding .box .boxVerticalText .bold {
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Bold';
      font-size: 22px;
      line-height: 26px; }
    .digitalOnboarding .box .boxVerticalText .normalText {
      font-family: 'PeridotPE-Regular';
      font-size: 14px;
      line-height: 20px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 14px;
      line-height: 18px; }
  .digitalOnboarding .box .arrowRight {
    margin-left: auto; }
  .digitalOnboarding .littleGreyText {
    font-family: 'PeridotPE-Bold';
    font-size: 12px;
    line-height: 16px;
    font-family: 'PFHandbookPro-Medium';
    font-size: 16px;
    line-height: 20px;
    color: #848484; }
    .digitalOnboarding .littleGreyText.link {
      text-decoration: underline; }
  .digitalOnboarding .iotgTermsImage {
    width: 400px; }
  .digitalOnboarding .tooltipTextStrong {
    font-family: 'PeridotPE-SemiBold';
    font-size: 12px;
    line-height: 16px;
    font-family: 'PFHandbookPro-Bold';
    font-size: 16px;
    line-height: 20px;
    color: #323232; }
  .digitalOnboarding .eSignFooter {
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 0;
    padding: 16px;
    width: 100%;
    gap: 20px; }
    .digitalOnboarding .eSignFooter .normalText {
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 16px;
      line-height: 20px; }
      .digitalOnboarding .eSignFooter .normalText.bold {
        font-family: 'PeridotPE-Bold';
        font-size: 16px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 16px;
        line-height: 20px; }
    .digitalOnboarding .eSignFooter .digitalOnboardingDetailsFormAssistiveText {
      font-family: 'PeridotPE-Regular';
      font-size: 12px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 16px;
      line-height: 20px;
      color: #323232; }
      .digitalOnboarding .eSignFooter .digitalOnboardingDetailsFormAssistiveText.bold {
        font-family: 'PeridotPE-SemiBold';
        font-size: 12px;
        line-height: 16px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 16px;
        line-height: 20px; }
      .digitalOnboarding .eSignFooter .digitalOnboardingDetailsFormAssistiveText.simActivationReducedGap {
        margin-bottom: 4px !important; }
    .digitalOnboarding .eSignFooter .darkModeButton {
      font-family: 'PeridotPE-Bold';
      font-size: 14px;
      line-height: 16px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 18px;
      line-height: 22px;
      border-radius: 2px;
      padding: 12px;
      box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
      text-wrap: nowrap;
      width: 100%; }
      .digitalOnboarding .eSignFooter .darkModeButton.spaButton--primary {
        background-color: #fff055 !important;
        color: #323232 !important; }
      .digitalOnboarding .eSignFooter .darkModeButton.disabled, .digitalOnboarding .eSignFooter .darkModeButton.spaButton--disabled {
        background-color: #fff055 !important;
        opacity: 0.55;
        pointer-events: none; }
      .digitalOnboarding .eSignFooter .darkModeButton.oneThird {
        width: 33%; }
    .digitalOnboarding .eSignFooter .progressBarShell {
      display: flex;
      width: 100%;
      flex: 1 0 0;
      border-radius: 12px;
      background: #e6e6e6; }
    .digitalOnboarding .eSignFooter .progressBar {
      background-color: #fff055 !important;
      border-radius: 12px;
      height: 12px;
      line-height: 30px;
      color: transparent;
      user-select: none; }
      .digitalOnboarding .eSignFooter .progressBar.half {
        width: 50%; }
      .digitalOnboarding .eSignFooter .progressBar.full {
        width: 100%; }
  .digitalOnboarding .quickTipsTitle {
    color: #323232;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: 'BTCosmo-Bold';
    font-size: 20px;
    line-height: 24px;
    font-family: 'PFHandbookPro-Bold';
    font-size: 24px;
    line-height: 28px; }
  @media only screen and (max-width: 480px) {
    .digitalOnboarding .buttonGroup .actionButton {
      width: 100%;
      flex: 1 0 0; } }

.dropdownFilter .ddFilterWrapper {
  width: 100%; }
  .dropdownFilter .ddFilterWrapper-multiple {
    z-index: 8; }
  .dropdownFilter .ddFilterWrapper.active {
    z-index: 7; }
  .dropdownFilter .ddFilterWrapper .box {
    overflow: visible;
    background-color: none; }
  .dropdownFilter .ddFilterWrapper .ddFilter {
    display: flex;
    flex-flow: row;
    align-items: flex-start; }
    .dropdownFilter .ddFilterWrapper .ddFilter-multiple {
      gap: 64px; }
      .dropdownFilter .ddFilterWrapper .ddFilter-multiple-small {
        gap: 16px;
        border: none; }
      @media only screen and (max-width: 480px) {
        .dropdownFilter .ddFilterWrapper .ddFilter-multiple {
          gap: 0; } }
    .dropdownFilter .ddFilterWrapper .ddFilter.ddFilterLargeAccountsShop {
      padding: 0; }
    .dropdownFilter .ddFilterWrapper .ddFilter.flexColumn {
      flex-flow: column; }
    .dropdownFilter .ddFilterWrapper .ddFilter.wrapped {
      flex-wrap: wrap; }
    .dropdownFilter .ddFilterWrapper .ddFilter .ddLabel {
      font-family: 'PeridotPE-SemiBold';
      font-size: 14px;
      line-height: 16px;
      display: inline-block;
      margin-right: 8px; }
    .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent {
      position: relative;
      display: flex;
      flex-flow: column;
      flex: 1;
      align-items: stretch; }
      .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent.largeAccountsBills {
        flex-flow: column;
        flex: 1;
        align-items: stretch; }
      .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent:first-child.noMargin {
        margin: 0; }
      .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent span {
        font-family: 'PeridotPE-SemiBold';
        font-size: 18px;
        line-height: 20px;
        font-family: 'PFHandbookPro-Bold';
        font-size: 18px;
        line-height: 22px;
        color: #323232;
        display: inline-block;
        margin-bottom: 8px; }
      .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .input-subTitle {
        font-family: 'PeridotPE-Regular';
        font-size: 14px;
        line-height: 20px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 14px;
        line-height: 18px; }
      .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer {
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 16px;
        line-height: 20px;
        position: relative;
        cursor: pointer; }
        @media only screen and (min-width: 1025px) and (max-width: 1230px) {
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer {
            width: 100%; } }
        @media only screen and (max-width: 767px) {
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer {
            width: 100%; } }
        .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
          box-sizing: border-box;
          width: 100%;
          cursor: pointer;
          color: #323232;
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          display: inline-block;
          background-color: #ffffff;
          border: 1px solid #323232;
          border-radius: 2px;
          padding: 12px 8px; }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
              max-width: 100%; } }
          @media only screen and (min-width: 1025px) and (max-width: 1230px) {
            .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
              max-width: 100%; } }
          @media only screen and (max-width: 767px) {
            .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
              max-width: 100%; } }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.opened {
            border-radius: 2px 2px 0 0;
            border-bottom: none; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput ::-webkit-input-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput :-moz-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput ::-moz-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput :-ms-input-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput:not(.jsDropdownInput) {
            padding: 12px 40px; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput:focus-visible {
            outline: 5px auto -webkit-focus-ring-color; }
        .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer ::-webkit-input-placeholder {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #9d9d9c; }
        .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer :-moz-placeholder {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #9d9d9c; }
        .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer ::-moz-placeholder {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #9d9d9c; }
        .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer :-ms-input-placeholder {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          font-family: 'PFHandbookPro-Medium';
          font-size: 16px;
          line-height: 20px;
          color: #9d9d9c; }
        .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i {
          position: absolute;
          right: 8px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          transform: translateY(-50%);
          z-index: 1;
          pointer-events: none;
          line-height: 0; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.withPointerEvents {
            pointer-events: initial; }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.icon-arrowDown {
            font-size: 18px;
            -webkit-transform: scaleY(1);
            -moz-transform: scaleY(1);
            transform: scaleY(1); }
            .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.icon-arrowDown.opened {
              -webkit-transform: scaleY(-1);
              -moz-transform: scaleY(-1);
              transform: scaleY(-1); }
          .dropdownFilter .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.icon-lens {
            left: 8px;
            font-size: 24px; }
  .dropdownFilter .ddFilterWrapper .ddFilterExpanded {
    background-color: #ffffff;
    border: 1px solid #323232;
    border-top: none;
    display: none;
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 10;
    border-radius: 0 0 2px 2px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper {
      max-height: 200px;
      overflow-y: auto;
      margin: 0;
      position: relative; }
      .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper-searchAtTop {
        padding-top: 8px; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper-searchAtTop:after {
          display: none; }
      .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper.simpleResults {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 26px 16px 16px 16px;
        padding-bottom: 0; }
      .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterNoResults {
        font-family: 'PeridotPE-Regular';
        font-size: 16px;
        line-height: 24px;
        font-family: 'PFHandbookPro-Medium';
        font-size: 16px;
        line-height: 20px;
        padding: 0 16px;
        color: #323232;
        display: none; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterNoResults.visible {
          display: block; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterNoResults-searchAtTop {
          padding-bottom: 0; }
      .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup {
        margin-bottom: 12px; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup:last-child {
          margin-bottom: 0; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle {
          margin: 0 8px 4px;
          border-bottom: 1px solid #e6e6e6; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle.largeLabelTitle {
            border-bottom: none; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle.largeLabelTitle span {
              font-family: 'PeridotPE-SemiBold';
              font-size: 18px;
              line-height: 20px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 18px;
              line-height: 22px; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle span {
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            padding-bottom: 2px;
            width: auto;
            display: inline-block; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle span.boldFont {
              font-family: 'PeridotPE-SemiBold';
              font-size: 18px;
              line-height: 20px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 18px;
              line-height: 22px; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle span.small {
            font-family: 'PeridotPE-Regular';
            font-size: 14px;
            line-height: 20px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 14px;
            line-height: 18px;
            color: #323232;
            margin: 0;
            font-size: 13px; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent {
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;
          overflow-x: hidden; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent.hidden {
            display: none; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a {
            font-family: 'PeridotPE-Regular';
            font-size: 16px;
            line-height: 24px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            box-sizing: border-box;
            padding: 12px 8px;
            color: #323232;
            display: flex;
            align-items: center;
            width: 100%;
            transition: 0.2s ease-in-out; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a div {
              display: flex; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a.largeLabel {
              font-family: 'PeridotPE-SemiBold';
              font-size: 18px;
              line-height: 20px;
              font-family: 'PFHandbookPro-Bold';
              font-size: 18px;
              line-height: 22px;
              color: #323232;
              display: block !important;
              padding-left: 8px; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a:focus-visible, .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a:hover, .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a.active {
              color: #ffffff;
              background-color: #fff055; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a i {
              margin: 0 8px 0 0; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a img {
              height: 16px;
              min-width: 16px;
              margin: 0 8px 0 0; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a {
            padding: 0px 16px; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a:hover, .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a.active {
              color: #ffffff;
              background-color: #fff055; }
            .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a .md-checkbox {
              margin: 4px 0;
              width: 100%; }
              .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a .md-checkbox label {
                width: 100%;
                color: #323232;
                font-family: 'PeridotPE-Regular';
                font-size: 14px;
                line-height: 20px;
                font-family: 'PFHandbookPro-Medium';
                font-size: 14px;
                line-height: 18px; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon.largeResults a div {
          width: 100%; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon.largeResults a div span.small {
            max-width: 100%; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon a {
          flex-direction: column;
          align-items: flex-start; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon a span.small {
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            margin-left: 24px;
            max-width: 260px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon.largeResults a div {
          width: 100%; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon.largeResults a div span.small {
            max-width: 100%; }
        .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon a {
          flex-direction: column;
          align-items: flex-start; }
          .dropdownFilter .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon a span.small {
            font-family: 'PeridotPE-Regular';
            font-size: 12px;
            line-height: 16px;
            font-family: 'PFHandbookPro-Medium';
            font-size: 16px;
            line-height: 20px;
            max-width: 260px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden; }
  .dropdownFilter .ddFilterWrapper .ddFilterContentSearch {
    position: relative;
    display: flex;
    margin-right: 0;
    padding: 12px 8px;
    z-index: 2;
    box-sizing: border-box; }
    .dropdownFilter .ddFilterWrapper .ddFilterContentSearch .iconLeft {
      left: 8px; }
      .dropdownFilter .ddFilterWrapper .ddFilterContentSearch .iconLeft.closeIcon {
        left: 0; }
    .dropdownFilter .ddFilterWrapper .ddFilterContentSearch-searchAtTop {
      margin-left: 8px;
      margin-right: 24px;
      border: none; }
    .dropdownFilter .ddFilterWrapper .ddFilterContentSearch .ddFilterInput {
      box-sizing: border-box;
      width: 100%;
      cursor: pointer;
      color: #323232;
      font-family: 'PeridotPE-Regular';
      font-size: 16px;
      line-height: 24px;
      font-family: 'PFHandbookPro-Medium';
      font-size: 16px;
      line-height: 20px;
      display: inline-block;
      background-color: #ffffff;
      border: 1px solid #323232;
      border-radius: 2px;
      padding: 8px 40px; }
      .dropdownFilter .ddFilterWrapper .ddFilterContentSearch .ddFilterInput-iconLeft img {
        left: 8px; }
        .dropdownFilter .ddFilterWrapper .ddFilterContentSearch .ddFilterInput-iconLeft img.closeIcon {
          left: 0; }
    .dropdownFilter .ddFilterWrapper .ddFilterContentSearch img {
      position: absolute;
      right: 8px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 1;
      line-height: 0; }
      .dropdownFilter .ddFilterWrapper .ddFilterContentSearch img.cursorPointer {
        cursor: pointer; }
      .dropdownFilter .ddFilterWrapper .ddFilterContentSearch img.hidden {
        display: none; }
      .dropdownFilter .ddFilterWrapper .ddFilterContentSearch img.icon-close {
        cursor: pointer; }
      .dropdownFilter .ddFilterWrapper .ddFilterContentSearch img.closeIcon {
        right: 16px;
        top: 50%; }
        .dropdownFilter .ddFilterWrapper .ddFilterContentSearch img.closeIcon:before {
          color: #323232 !important; }
      .dropdownFilter .ddFilterWrapper .ddFilterContentSearch img.icon-lens {
        left: 16px; }