@charset "UTF-8";
@font-face {
    font-family: 'PFSquareSansPro-Regular';
    src: url("/ote_static/selfcare/fonts/PFSquareSansPro-Regular.woff");
    font-weight: normal;
    font-style: normal; }

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

@font-face {
    font-family: 'PFSquareSansPro-BoldItalic';
    src: url("/ote_static/selfcare/fonts/PFSquareSansPro-BoldItalic.woff");
    font-weight: normal;
    font-style: normal; }

@font-face {
    font-family: 'PFSquareSansPro-Light';
    src: url("/ote_static/selfcare/fonts/PFSquareSansPro-Light.woff");
    font-weight: normal;
    font-style: normal; }

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

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

@font-face {
    font-family: 'PFSquareSansPro-Thin';
    src: url("/ote_static/selfcare/fonts/PFSquareSansPro-Thin.woff");
    font-weight: normal;
    font-style: normal; }

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

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

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

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

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

.spaExitIcon {
  background-image: url("../img/ExitArrowIcon.svg"); }

.spaSimCard {
  background-image: url("../img/simbig.svg");
  width: 64px;
  height: 64px; }

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

.spaConsent {
  background-image: url("../img/consent.svg"); }

.spaQrCode {
  background-image: url("../img/qrcode.svg"); }

.spaSim {
  background-image: url("../img/sim.svg"); }

.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/tooltipicon.svg"); }
  .spaTooltipIcon.withSize {
    width: 25px !important;
    height: 24px !important; }
  .spaTooltipIcon.withMargin {
    margin-top: 4% !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: #212121 !important;
  background-color: #f2f2f3 !important;
  text-decoration: none !important; }
  .spaBodyContainer--primary a {
    text-decoration: none !important; }

.spaBodyContainer a {
  text-decoration: none !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.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; }

.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 .spaLoaderShell {
  background-color: #323232 !important; }

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

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

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

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

.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 .spaExitIcon {
  background-image: url("../img/ExitArrowIconDarkMode.svg"); }

.dark-mode .spaSimCard {
  background-image: url("../img/simbigWhite.svg");
  width: 48px;
  height: 48px; }

.dark-mode .spaTooltipIcon {
  background-image: url("../img/tooltipIconDarkmode.svg"); }
  .dark-mode .spaTooltipIcon.withSize {
    width: 25px !important;
    height: 24px !important; }
  .dark-mode .spaTooltipIcon.withMargin {
    margin-top: 4% !important; }

.dark-mode .spaText--strong {
  font-weight: 600;
  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; }
  .dark-mode .spaButton--disabled {
    background-color: #848484 !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; }

.spaEsimOffline img {
  content: url("../img/eSimOffline.svg"); }

.dark-mode .spaEsimOffline img {
  content: url("../img/eSimOfflineDarkMode.svg"); }

body.magentafacelift {
  --mf-accent: #e20074;
  --mf-accent-hover: #b5005d;
  --mf-accent-pressed: #880046;
  --mf-accent-focused: #e20074;
  --mf-accent-disabled: #dddddd;
  --mf-bg-page: #ffffff;
  --mf-bg-surface: #ffffff;
  --mf-bg-subtle: #ffffff;
  --mf-bg-muted: #ffffff;
  --mf-border-default: #b6b6b6;
  --mf-border-strong: #000000;
  --mf-text-primary: #000000;
  --mf-text-secondary: #616161;
  --mf-text-disabled: #a3a3a3;
  --mf-text-inverse: #ffffff;
  --mf-divider: #b6b6b6;
  --mf-secondary-accent: #000000;
  --mf-success: #007845;
  --mf-success-subtle: #ccf0e1;
  --mf-success-hover: #006138;
  --mf-success-pressed: #004829;
  --mf-warning: #993300;
  --mf-warning-subtle: #ffddcc;
  --mf-warning-hover: #662200;
  --mf-warning-pressed: #331100;
  --mf-danger: #c20d00;
  --mf-danger-subtle: #ffdddb;
  --mf-danger-hover: #970b00;
  --mf-danger-pressed: #660700;
  --mf-info: #2238df;
  --mf-info-subtle: #d3d7f9;
  --mf-info-hover: #05169b;
  --mf-info-pressed: #000e79;
  color: var(--mf-text-primary) !important;
  background-color: var(--mf-bg-page) !important; }
  body.magentafacelift,
  body.magentafacelift a,
  body.magentafacelift p,
  body.magentafacelift span,
  body.magentafacelift div,
  body.magentafacelift label,
  body.magentafacelift strong,
  body.magentafacelift small,
  body.magentafacelift li,
  body.magentafacelift td,
  body.magentafacelift th {
    border-color: inherit; }
  body.magentafacelift a,
  body.magentafacelift button,
  body.magentafacelift [role='button'],
  body.magentafacelift input,
  body.magentafacelift select,
  body.magentafacelift textarea,
  body.magentafacelift .primaryButton,
  body.magentafacelift .secondaryButton,
  body.magentafacelift .blueButton,
  body.magentafacelift .blueButtonSmall,
  body.magentafacelift .whiteButton,
  body.magentafacelift .greyButton,
  body.magentafacelift .greyButtonNormal,
  body.magentafacelift .transparentButton,
  body.magentafacelift .buttons-transparentOutlinedButton,
  body.magentafacelift .iconButton,
  body.magentafacelift .redButton,
  body.magentafacelift .gradientButton,
  body.magentafacelift .spaButton,
  body.magentafacelift .spaSecondaryButton,
  body.magentafacelift .spaSecondaryButtonWithBorder,
  body.magentafacelift .spaMapButton,
  body.magentafacelift .spaDropdownContainer a,
  body.magentafacelift .flatpickr-day,
  body.magentafacelift .flatpickr-prev-month,
  body.magentafacelift .flatpickr-next-month {
    transition: background-color 220ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1), color 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms linear, fill 160ms cubic-bezier(0.2, 0, 0, 1), stroke 160ms cubic-bezier(0.2, 0, 0, 1); }
  body.magentafacelift .spaText--primary,
  body.magentafacelift .spaModalTitle,
  body.magentafacelift .spaHeaderContainer--primary,
  body.magentafacelift .spaCard,
  body.magentafacelift .spaBodyContainer--primary,
  body.magentafacelift .spaField label,
  body.magentafacelift .spaDropdownContainer a,
  body.magentafacelift .spaMapButton,
  body.magentafacelift .spaRadioField,
  body.magentafacelift .spaButton--text-color {
    color: var(--mf-text-primary) !important; }
  body.magentafacelift .spaAssistiveText,
  body.magentafacelift .spaText--secondary,
  body.magentafacelift .spaField.disabled label,
  body.magentafacelift .spaField.disabled input,
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-weekday,
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
    color: var(--mf-text-secondary) !important; }
  body.magentafacelift .spaText--disabled,
  body.magentafacelift .disabled,
  body.magentafacelift [disabled],
  body.magentafacelift .is-disabled {
    color: var(--mf-text-disabled) !important; }
  body.magentafacelift a,
  body.magentafacelift a:link,
  body.magentafacelift a:visited,
  body.magentafacelift .spaLink,
  body.magentafacelift .link,
  body.magentafacelift .text-link,
  body.magentafacelift .spaButton--text-color,
  body.magentafacelift .transparentButton,
  body.magentafacelift .buttons-transparentOutlinedButton {
    color: var(--mf-secondary-accent) !important; }
  body.magentafacelift a:hover,
  body.magentafacelift a:active,
  body.magentafacelift .spaLink:hover,
  body.magentafacelift .link:hover,
  body.magentafacelift .text-link:hover,
  body.magentafacelift .spaButton--text-color:hover {
    color: var(--mf-secondary-accent) !important; }
  body.magentafacelift .primaryButton,
  body.magentafacelift .spaButton.primaryButton,
  body.magentafacelift .gradientButton,
  body.magentafacelift .redButton {
    background: var(--mf-accent) !important;
    background-color: var(--mf-accent) !important;
    border-color: var(--mf-accent) !important;
    color: #ffffff !important; }
    body.magentafacelift .primaryButton:hover,
    body.magentafacelift .spaButton.primaryButton:hover,
    body.magentafacelift .gradientButton:hover,
    body.magentafacelift .redButton:hover {
      background: var(--mf-accent-hover) !important;
      background-color: var(--mf-accent-hover) !important;
      border-color: var(--mf-accent-hover) !important;
      color: #ffffff !important;
      opacity: 1 !important;
      transform: translateY(-1px); }
    body.magentafacelift .primaryButton:active, body.magentafacelift .primaryButton.pressed,
    body.magentafacelift .spaButton.primaryButton:active,
    body.magentafacelift .spaButton.primaryButton.pressed,
    body.magentafacelift .gradientButton:active,
    body.magentafacelift .gradientButton.pressed,
    body.magentafacelift .redButton:active,
    body.magentafacelift .redButton.pressed {
      background: var(--mf-accent-pressed) !important;
      background-color: var(--mf-accent-pressed) !important;
      border-color: var(--mf-accent-pressed) !important;
      transform: translateY(0); }
    body.magentafacelift .primaryButton:focus, body.magentafacelift .primaryButton:focus-visible,
    body.magentafacelift .spaButton.primaryButton:focus,
    body.magentafacelift .spaButton.primaryButton:focus-visible,
    body.magentafacelift .gradientButton:focus,
    body.magentafacelift .gradientButton:focus-visible,
    body.magentafacelift .redButton:focus,
    body.magentafacelift .redButton:focus-visible {
      background: var(--mf-accent-focused) !important;
      border-color: var(--mf-accent-focused) !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(226, 0, 116, 0.22) !important; }
    body.magentafacelift .primaryButton:visited,
    body.magentafacelift .spaButton.primaryButton:visited,
    body.magentafacelift .gradientButton:visited,
    body.magentafacelift .redButton:visited {
      color: #ffffff !important;
      background: var(--mf-accent) !important;
      border-color: var(--mf-accent) !important; }
    body.magentafacelift .primaryButton.disabled, body.magentafacelift .primaryButton.is-disabled,
    body.magentafacelift .spaButton.primaryButton.disabled,
    body.magentafacelift .spaButton.primaryButton.is-disabled,
    body.magentafacelift .gradientButton.disabled,
    body.magentafacelift .gradientButton.is-disabled,
    body.magentafacelift .redButton.disabled,
    body.magentafacelift .redButton.is-disabled {
      background: var(--mf-accent-disabled) !important;
      background-color: var(--mf-accent-disabled) !important;
      border-color: var(--mf-accent-disabled) !important;
      color: #ffffff !important;
      transform: none; }
  body.magentafacelift .secondaryButton,
  body.magentafacelift .secondaryButton.secondaryButtonNormal,
  body.magentafacelift .secondaryButton.secondaryButtonNormalSmall,
  body.magentafacelift .blueButton,
  body.magentafacelift .blueButtonSmall,
  body.magentafacelift .whiteButton,
  body.magentafacelift .greyButton,
  body.magentafacelift .greyButtonNormal,
  body.magentafacelift .transparentButton,
  body.magentafacelift .buttons-transparentOutlinedButton,
  body.magentafacelift .iconButton,
  body.magentafacelift .cancelButton,
  body.magentafacelift .confirmationModalButton,
  body.magentafacelift .cancelConfirmationButton,
  body.magentafacelift .cancelConsent,
  body.magentafacelift .cancelFamily,
  body.magentafacelift .cancelGiftSubmit,
  body.magentafacelift .cancelError,
  body.magentafacelift .cancelPaymentPrompt,
  body.magentafacelift .cancelCosmoteTvGoSubmit,
  body.magentafacelift .cancelGift,
  body.magentafacelift .cancelTrialRemove,
  body.magentafacelift .cancelContactPrompt,
  body.magentafacelift .cancelAddressPrompt,
  body.magentafacelift .cancelAcceptPrompt,
  body.magentafacelift .cancelButtonSimple,
  body.magentafacelift .cancelRenewPrompt,
  body.magentafacelift .cancelGenericStartoverElement,
  body.magentafacelift .cancelGenericResendElement,
  body.magentafacelift .spaSecondaryButton,
  body.magentafacelift .spaSecondaryButtonWithBorder,
  body.magentafacelift .spaButton--secondary,
  body.magentafacelift .spaMapButton {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mf-secondary-accent) !important;
    border-color: var(--mf-secondary-accent) !important; }
    body.magentafacelift .secondaryButton:hover,
    body.magentafacelift .secondaryButton.secondaryButtonNormal:hover,
    body.magentafacelift .secondaryButton.secondaryButtonNormalSmall:hover,
    body.magentafacelift .blueButton:hover,
    body.magentafacelift .blueButtonSmall:hover,
    body.magentafacelift .whiteButton:hover,
    body.magentafacelift .greyButton:hover,
    body.magentafacelift .greyButtonNormal:hover,
    body.magentafacelift .transparentButton:hover,
    body.magentafacelift .buttons-transparentOutlinedButton:hover,
    body.magentafacelift .iconButton:hover,
    body.magentafacelift .cancelButton:hover,
    body.magentafacelift .confirmationModalButton:hover,
    body.magentafacelift .cancelConfirmationButton:hover,
    body.magentafacelift .cancelConsent:hover,
    body.magentafacelift .cancelFamily:hover,
    body.magentafacelift .cancelGiftSubmit:hover,
    body.magentafacelift .cancelError:hover,
    body.magentafacelift .cancelPaymentPrompt:hover,
    body.magentafacelift .cancelCosmoteTvGoSubmit:hover,
    body.magentafacelift .cancelGift:hover,
    body.magentafacelift .cancelTrialRemove:hover,
    body.magentafacelift .cancelContactPrompt:hover,
    body.magentafacelift .cancelAddressPrompt:hover,
    body.magentafacelift .cancelAcceptPrompt:hover,
    body.magentafacelift .cancelButtonSimple:hover,
    body.magentafacelift .cancelRenewPrompt:hover,
    body.magentafacelift .cancelGenericStartoverElement:hover,
    body.magentafacelift .cancelGenericResendElement:hover,
    body.magentafacelift .spaSecondaryButton:hover,
    body.magentafacelift .spaSecondaryButtonWithBorder:hover,
    body.magentafacelift .spaButton--secondary:hover,
    body.magentafacelift .spaMapButton:hover {
      background-color: rgba(0, 0, 0, 0.04) !important;
      color: var(--mf-secondary-accent) !important;
      border-color: var(--mf-secondary-accent) !important;
      opacity: 1 !important;
      transform: translateY(-1px); }
    body.magentafacelift .secondaryButton:active,
    body.magentafacelift .secondaryButton.secondaryButtonNormal:active,
    body.magentafacelift .secondaryButton.secondaryButtonNormalSmall:active,
    body.magentafacelift .blueButton:active,
    body.magentafacelift .blueButtonSmall:active,
    body.magentafacelift .whiteButton:active,
    body.magentafacelift .greyButton:active,
    body.magentafacelift .greyButtonNormal:active,
    body.magentafacelift .transparentButton:active,
    body.magentafacelift .buttons-transparentOutlinedButton:active,
    body.magentafacelift .iconButton:active,
    body.magentafacelift .cancelButton:active,
    body.magentafacelift .confirmationModalButton:active,
    body.magentafacelift .cancelConfirmationButton:active,
    body.magentafacelift .cancelConsent:active,
    body.magentafacelift .cancelFamily:active,
    body.magentafacelift .cancelGiftSubmit:active,
    body.magentafacelift .cancelError:active,
    body.magentafacelift .cancelPaymentPrompt:active,
    body.magentafacelift .cancelCosmoteTvGoSubmit:active,
    body.magentafacelift .cancelGift:active,
    body.magentafacelift .cancelTrialRemove:active,
    body.magentafacelift .cancelContactPrompt:active,
    body.magentafacelift .cancelAddressPrompt:active,
    body.magentafacelift .cancelAcceptPrompt:active,
    body.magentafacelift .cancelButtonSimple:active,
    body.magentafacelift .cancelRenewPrompt:active,
    body.magentafacelift .cancelGenericStartoverElement:active,
    body.magentafacelift .cancelGenericResendElement:active,
    body.magentafacelift .spaSecondaryButton:active,
    body.magentafacelift .spaSecondaryButtonWithBorder:active,
    body.magentafacelift .spaButton--secondary:active,
    body.magentafacelift .spaMapButton:active {
      background-color: rgba(0, 0, 0, 0.08) !important;
      transform: translateY(0); }
    body.magentafacelift .secondaryButton:focus, body.magentafacelift .secondaryButton:focus-visible,
    body.magentafacelift .secondaryButton.secondaryButtonNormal:focus,
    body.magentafacelift .secondaryButton.secondaryButtonNormal:focus-visible,
    body.magentafacelift .secondaryButton.secondaryButtonNormalSmall:focus,
    body.magentafacelift .secondaryButton.secondaryButtonNormalSmall:focus-visible,
    body.magentafacelift .blueButton:focus,
    body.magentafacelift .blueButton:focus-visible,
    body.magentafacelift .blueButtonSmall:focus,
    body.magentafacelift .blueButtonSmall:focus-visible,
    body.magentafacelift .whiteButton:focus,
    body.magentafacelift .whiteButton:focus-visible,
    body.magentafacelift .greyButton:focus,
    body.magentafacelift .greyButton:focus-visible,
    body.magentafacelift .greyButtonNormal:focus,
    body.magentafacelift .greyButtonNormal:focus-visible,
    body.magentafacelift .transparentButton:focus,
    body.magentafacelift .transparentButton:focus-visible,
    body.magentafacelift .buttons-transparentOutlinedButton:focus,
    body.magentafacelift .buttons-transparentOutlinedButton:focus-visible,
    body.magentafacelift .iconButton:focus,
    body.magentafacelift .iconButton:focus-visible,
    body.magentafacelift .cancelButton:focus,
    body.magentafacelift .cancelButton:focus-visible,
    body.magentafacelift .confirmationModalButton:focus,
    body.magentafacelift .confirmationModalButton:focus-visible,
    body.magentafacelift .cancelConfirmationButton:focus,
    body.magentafacelift .cancelConfirmationButton:focus-visible,
    body.magentafacelift .cancelConsent:focus,
    body.magentafacelift .cancelConsent:focus-visible,
    body.magentafacelift .cancelFamily:focus,
    body.magentafacelift .cancelFamily:focus-visible,
    body.magentafacelift .cancelGiftSubmit:focus,
    body.magentafacelift .cancelGiftSubmit:focus-visible,
    body.magentafacelift .cancelError:focus,
    body.magentafacelift .cancelError:focus-visible,
    body.magentafacelift .cancelPaymentPrompt:focus,
    body.magentafacelift .cancelPaymentPrompt:focus-visible,
    body.magentafacelift .cancelCosmoteTvGoSubmit:focus,
    body.magentafacelift .cancelCosmoteTvGoSubmit:focus-visible,
    body.magentafacelift .cancelGift:focus,
    body.magentafacelift .cancelGift:focus-visible,
    body.magentafacelift .cancelTrialRemove:focus,
    body.magentafacelift .cancelTrialRemove:focus-visible,
    body.magentafacelift .cancelContactPrompt:focus,
    body.magentafacelift .cancelContactPrompt:focus-visible,
    body.magentafacelift .cancelAddressPrompt:focus,
    body.magentafacelift .cancelAddressPrompt:focus-visible,
    body.magentafacelift .cancelAcceptPrompt:focus,
    body.magentafacelift .cancelAcceptPrompt:focus-visible,
    body.magentafacelift .cancelButtonSimple:focus,
    body.magentafacelift .cancelButtonSimple:focus-visible,
    body.magentafacelift .cancelRenewPrompt:focus,
    body.magentafacelift .cancelRenewPrompt:focus-visible,
    body.magentafacelift .cancelGenericStartoverElement:focus,
    body.magentafacelift .cancelGenericStartoverElement:focus-visible,
    body.magentafacelift .cancelGenericResendElement:focus,
    body.magentafacelift .cancelGenericResendElement:focus-visible,
    body.magentafacelift .spaSecondaryButton:focus,
    body.magentafacelift .spaSecondaryButton:focus-visible,
    body.magentafacelift .spaSecondaryButtonWithBorder:focus,
    body.magentafacelift .spaSecondaryButtonWithBorder:focus-visible,
    body.magentafacelift .spaButton--secondary:focus,
    body.magentafacelift .spaButton--secondary:focus-visible,
    body.magentafacelift .spaMapButton:focus,
    body.magentafacelift .spaMapButton:focus-visible {
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(226, 0, 116, 0.22) !important; }
  body.magentafacelift .spaHeaderContainer--primary,
  body.magentafacelift .spaBoxContainer,
  body.magentafacelift .spaCard,
  body.magentafacelift .spaModalTitle,
  body.magentafacelift .spaSecondaryButton,
  body.magentafacelift .spaRadioField,
  body.magentafacelift .spaDropdownContainer,
  body.magentafacelift .spaField input,
  body.magentafacelift .spaField textarea,
  body.magentafacelift .spaField select {
    background-color: var(--mf-bg-surface) !important;
    color: var(--mf-text-primary) !important; }
  body.magentafacelift .spaBodyContainer--primary,
  body.magentafacelift .spaSecondaryBody,
  body.magentafacelift .spaCardImageContainer {
    background-color: var(--mf-bg-page) !important;
    color: var(--mf-text-primary) !important; }
  body.magentafacelift .spaHeaderContainer--primary {
    border-color: var(--mf-accent) !important; }
  body.magentafacelift .spaCard,
  body.magentafacelift .spaDropdownContainer,
  body.magentafacelift .spaField input,
  body.magentafacelift .spaField textarea,
  body.magentafacelift .spaField select,
  body.magentafacelift .spaCheckbox label:before,
  body.magentafacelift .spaRadioField,
  body.magentafacelift .spaMapButton,
  body.magentafacelift .spaDivider {
    border-color: var(--mf-border-strong) !important; }
  body.magentafacelift .spaCardImageContainer,
  body.magentafacelift .spaSecondaryBody,
  body.magentafacelift .spaDivider,
  body.magentafacelift hr {
    border-color: var(--mf-divider) !important; }
  body.magentafacelift .spaOfferCard--active,
  body.magentafacelift .info,
  body.magentafacelift .infoBox,
  body.magentafacelift .infoField,
  body.magentafacelift .spaInfoField,
  body.magentafacelift .notification-info {
    background-color: var(--mf-info-subtle) !important;
    border-color: var(--mf-info) !important;
    color: var(--mf-text-primary) !important; }
  body.magentafacelift .spaOfferCard--inactive,
  body.magentafacelift .warning,
  body.magentafacelift .warningBox,
  body.magentafacelift .notification-warning {
    background-color: var(--mf-warning-subtle) !important;
    border-color: var(--mf-warning) !important;
    color: var(--mf-text-primary) !important; }
  body.magentafacelift .success,
  body.magentafacelift .successBox,
  body.magentafacelift .notification-success {
    background-color: var(--mf-success-subtle) !important;
    border-color: var(--mf-success) !important;
    color: var(--mf-text-primary) !important; }
  body.magentafacelift .error,
  body.magentafacelift .danger,
  body.magentafacelift .errorBox,
  body.magentafacelift .dangerBox,
  body.magentafacelift .notification-danger {
    background-color: var(--mf-danger-subtle) !important;
    border-color: var(--mf-danger) !important;
    color: var(--mf-text-primary) !important; }
  body.magentafacelift .spaField input,
  body.magentafacelift .spaField textarea,
  body.magentafacelift .spaField select,
  body.magentafacelift .spaDropdownContainer {
    border-color: var(--mf-border-strong) !important; }
    body.magentafacelift .spaField input:focus, body.magentafacelift .spaField input:focus-visible,
    body.magentafacelift .spaField textarea:focus,
    body.magentafacelift .spaField textarea:focus-visible,
    body.magentafacelift .spaField select:focus,
    body.magentafacelift .spaField select:focus-visible,
    body.magentafacelift .spaDropdownContainer:focus,
    body.magentafacelift .spaDropdownContainer:focus-visible {
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(226, 0, 116, 0.22) !important; }
  body.magentafacelift .spaField.disabled input,
  body.magentafacelift .spaField.disabled textarea,
  body.magentafacelift .spaField.disabled select {
    border-color: var(--mf-text-disabled) !important;
    color: var(--mf-text-disabled) !important; }
  body.magentafacelift .spaDropdownContainer a.active,
  body.magentafacelift .spaDropdownContainer a:hover {
    background-color: var(--mf-accent) !important;
    color: #ffffff !important; }
  body.magentafacelift .spaCheckbox label:before,
  body.magentafacelift .md-checkbox label:before,
  body.magentafacelift .md-radio label:before,
  body.magentafacelift .radio label:before,
  body.magentafacelift .checkbox label:before {
    background-color: var(--mf-bg-surface) !important;
    border-color: var(--mf-border-strong) !important; }
  body.magentafacelift .spaCheckbox input:checked + label:before,
  body.magentafacelift .md-checkbox input:checked + label:before,
  body.magentafacelift .checkbox input:checked + label:before,
  body.magentafacelift .md-radio input:checked + label:before,
  body.magentafacelift .radio input:checked + label:before {
    border-color: var(--mf-accent) !important; }
  body.magentafacelift .spaCheckbox input:checked + label:after,
  body.magentafacelift .md-checkbox input:checked + label:after,
  body.magentafacelift .checkbox input:checked + label:after,
  body.magentafacelift .md-radio input:checked + label:after,
  body.magentafacelift .radio input:checked + label:after,
  body.magentafacelift .checkmark,
  body.magentafacelift .checkmark:after {
    background-color: var(--mf-accent) !important;
    border-color: var(--mf-accent) !important;
    color: var(--mf-accent) !important; }
  body.magentafacelift .spaCalendar .flatpickr-calendar,
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-current-month input.cur-year[disabled] {
    background-color: var(--mf-bg-surface) !important; }
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-day.selected,
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-day:hover {
    background-color: var(--mf-accent) !important;
    border-color: var(--mf-accent) !important;
    color: #ffffff !important; }
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-day.today {
    border-color: var(--mf-accent) !important; }
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg,
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg path,
  body.magentafacelift .spaCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg path {
    fill: var(--mf-text-primary) !important; }
  body.magentafacelift .spaIconColor svg path,
  body.magentafacelift .iconButton svg path,
  body.magentafacelift .iconButton svg circle,
  body.magentafacelift .icon svg path,
  body.magentafacelift .icon svg circle {
    fill: currentColor !important;
    stroke: currentColor !important; }
  body.magentafacelift [style*='#0e8103'],
  body.magentafacelift [style*='#0E8103'],
  body.magentafacelift [style*='#0ea600'],
  body.magentafacelift [style*='#0EA600'],
  body.magentafacelift [style*='#006d29'],
  body.magentafacelift [style*='#006D29'],
  body.magentafacelift [style*='#00a5e3'],
  body.magentafacelift [style*='#00A5E3'],
  body.magentafacelift [style*='#0099cc'],
  body.magentafacelift [style*='#0099CC'],
  body.magentafacelift [style*='#004b87'],
  body.magentafacelift [style*='#004B87'],
  body.magentafacelift [style*='#2775b2'],
  body.magentafacelift [style*='#2775B2'],
  body.magentafacelift [style*='#09c'],
  body.magentafacelift [style*='#09C'] {
    color: inherit !important;
    border-color: inherit !important; }

body.magentafacelift.dark-mode,
body.dark-mode.magentafacelift,
.dark-mode body.magentafacelift {
  --mf-accent: #e20074;
  --mf-accent-hover: #cd016a;
  --mf-accent-pressed: #b00b5f;
  --mf-accent-focused: #e20074;
  --mf-accent-disabled: #414141;
  --mf-bg-page: #000000;
  --mf-bg-surface: #000000;
  --mf-bg-subtle: #000000;
  --mf-bg-muted: #000000;
  --mf-border-default: #828282;
  --mf-border-strong: #ffffff;
  --mf-text-primary: #ffffff;
  --mf-text-secondary: #cacaca;
  --mf-text-disabled: #828282;
  --mf-text-inverse: #000000;
  --mf-divider: #828282;
  --mf-secondary-accent: #ffffff;
  --mf-success: #00c26d;
  --mf-success-subtle: #004829;
  --mf-success-hover: #1bd27f;
  --mf-success-pressed: #27ffa0;
  --mf-warning: #ff8b52;
  --mf-warning-subtle: #662200;
  --mf-warning-hover: #ffbb99;
  --mf-warning-pressed: #ffddcc;
  --mf-danger: #ff7066;
  --mf-danger-subtle: #660700;
  --mf-danger-hover: #ffa099;
  --mf-danger-pressed: #ffdddb;
  --mf-info: #3950ea;
  --mf-info-subtle: #131f7b;
  --mf-info-hover: #576ff3;
  --mf-info-pressed: #7486ff;
  color: var(--mf-text-primary) !important;
  background-color: var(--mf-bg-page) !important; }
  body.magentafacelift.dark-mode .secondaryButton:hover,
  body.magentafacelift.dark-mode .blueButton:hover,
  body.magentafacelift.dark-mode .blueButtonSmall:hover,
  body.magentafacelift.dark-mode .whiteButton:hover,
  body.magentafacelift.dark-mode .greyButton:hover,
  body.magentafacelift.dark-mode .greyButtonNormal:hover,
  body.magentafacelift.dark-mode .transparentButton:hover,
  body.magentafacelift.dark-mode .buttons-transparentOutlinedButton:hover,
  body.magentafacelift.dark-mode .iconButton:hover,
  body.magentafacelift.dark-mode .spaSecondaryButton:hover,
  body.magentafacelift.dark-mode .spaSecondaryButtonWithBorder:hover,
  body.magentafacelift.dark-mode .spaButton--secondary:hover,
  body.magentafacelift.dark-mode .spaMapButton:hover,
  body.dark-mode.magentafacelift .secondaryButton:hover,
  body.dark-mode.magentafacelift .blueButton:hover,
  body.dark-mode.magentafacelift .blueButtonSmall:hover,
  body.dark-mode.magentafacelift .whiteButton:hover,
  body.dark-mode.magentafacelift .greyButton:hover,
  body.dark-mode.magentafacelift .greyButtonNormal:hover,
  body.dark-mode.magentafacelift .transparentButton:hover,
  body.dark-mode.magentafacelift .buttons-transparentOutlinedButton:hover,
  body.dark-mode.magentafacelift .iconButton:hover,
  body.dark-mode.magentafacelift .spaSecondaryButton:hover,
  body.dark-mode.magentafacelift .spaSecondaryButtonWithBorder:hover,
  body.dark-mode.magentafacelift .spaButton--secondary:hover,
  body.dark-mode.magentafacelift .spaMapButton:hover,
  .dark-mode body.magentafacelift .secondaryButton:hover,
  .dark-mode body.magentafacelift .blueButton:hover,
  .dark-mode body.magentafacelift .blueButtonSmall:hover,
  .dark-mode body.magentafacelift .whiteButton:hover,
  .dark-mode body.magentafacelift .greyButton:hover,
  .dark-mode body.magentafacelift .greyButtonNormal:hover,
  .dark-mode body.magentafacelift .transparentButton:hover,
  .dark-mode body.magentafacelift .buttons-transparentOutlinedButton:hover,
  .dark-mode body.magentafacelift .iconButton:hover,
  .dark-mode body.magentafacelift .spaSecondaryButton:hover,
  .dark-mode body.magentafacelift .spaSecondaryButtonWithBorder:hover,
  .dark-mode body.magentafacelift .spaButton--secondary:hover,
  .dark-mode body.magentafacelift .spaMapButton:hover {
    background-color: rgba(255, 255, 255, 0.08) !important; }
  body.magentafacelift.dark-mode .secondaryButton:active,
  body.magentafacelift.dark-mode .blueButton:active,
  body.magentafacelift.dark-mode .blueButtonSmall:active,
  body.magentafacelift.dark-mode .whiteButton:active,
  body.magentafacelift.dark-mode .greyButton:active,
  body.magentafacelift.dark-mode .greyButtonNormal:active,
  body.magentafacelift.dark-mode .transparentButton:active,
  body.magentafacelift.dark-mode .buttons-transparentOutlinedButton:active,
  body.magentafacelift.dark-mode .iconButton:active,
  body.magentafacelift.dark-mode .spaSecondaryButton:active,
  body.magentafacelift.dark-mode .spaSecondaryButtonWithBorder:active,
  body.magentafacelift.dark-mode .spaButton--secondary:active,
  body.magentafacelift.dark-mode .spaMapButton:active,
  body.dark-mode.magentafacelift .secondaryButton:active,
  body.dark-mode.magentafacelift .blueButton:active,
  body.dark-mode.magentafacelift .blueButtonSmall:active,
  body.dark-mode.magentafacelift .whiteButton:active,
  body.dark-mode.magentafacelift .greyButton:active,
  body.dark-mode.magentafacelift .greyButtonNormal:active,
  body.dark-mode.magentafacelift .transparentButton:active,
  body.dark-mode.magentafacelift .buttons-transparentOutlinedButton:active,
  body.dark-mode.magentafacelift .iconButton:active,
  body.dark-mode.magentafacelift .spaSecondaryButton:active,
  body.dark-mode.magentafacelift .spaSecondaryButtonWithBorder:active,
  body.dark-mode.magentafacelift .spaButton--secondary:active,
  body.dark-mode.magentafacelift .spaMapButton:active,
  .dark-mode body.magentafacelift .secondaryButton:active,
  .dark-mode body.magentafacelift .blueButton:active,
  .dark-mode body.magentafacelift .blueButtonSmall:active,
  .dark-mode body.magentafacelift .whiteButton:active,
  .dark-mode body.magentafacelift .greyButton:active,
  .dark-mode body.magentafacelift .greyButtonNormal:active,
  .dark-mode body.magentafacelift .transparentButton:active,
  .dark-mode body.magentafacelift .buttons-transparentOutlinedButton:active,
  .dark-mode body.magentafacelift .iconButton:active,
  .dark-mode body.magentafacelift .spaSecondaryButton:active,
  .dark-mode body.magentafacelift .spaSecondaryButtonWithBorder:active,
  .dark-mode body.magentafacelift .spaButton--secondary:active,
  .dark-mode body.magentafacelift .spaMapButton:active {
    background-color: rgba(255, 255, 255, 0.14) !important; }

@font-face {
  font-family: 'PFSquareSansPro-Regular';
  src: url("/fonts/PFSquareSansPro-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'PFSquareSansPro-Bold';
  src: url("/fonts/PFSquareSansPro-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'PFSquareSansPro-BoldItalic';
  src: url("/fonts/PFSquareSansPro-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap; }

@font-face {
  font-family: 'PFSquareSansPro-Light';
  src: url("/fonts/PFSquareSansPro-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'PFSquareSansPro-Medium';
  src: url("/fonts/PFSquareSansPro-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'PFSquareSansPro-ExtraBlack';
  src: url("/fonts/PFSquareSansPro-ExtraBlack.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'PFSquareSansPro-Thin';
  src: url("/fonts/PFSquareSansPro-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'BTCosmo-Bold';
  src: url("/fonts/BTCosmo-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'PeridotPE-Bold';
  src: url("/fonts/PeridotPE-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

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

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

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

body.magentafacelift {
  --mf-accent: #e20074;
  --mf-accent-hover: #b5005d;
  --mf-accent-pressed: #880046;
  --mf-accent-focused: #e20074;
  --mf-accent-disabled: #dddddd;
  --mf-bg-page: #ffffff;
  --mf-bg-surface: #ffffff;
  --mf-bg-subtle: #ffffff;
  --mf-bg-muted: #ffffff;
  --mf-border-default: #b6b6b6;
  --mf-border-strong: #000000;
  --mf-text-primary: #000000;
  --mf-text-secondary: #616161;
  --mf-text-disabled: #a3a3a3;
  --mf-text-inverse: #ffffff;
  --mf-divider: #b6b6b6;
  --mf-secondary-accent: #000000;
  --mf-success: #007845;
  --mf-success-subtle: #ccf0e1;
  --mf-success-hover: #006138;
  --mf-success-pressed: #004829;
  --mf-warning: #993300;
  --mf-warning-subtle: #ffddcc;
  --mf-warning-hover: #662200;
  --mf-warning-pressed: #331100;
  --mf-danger: #c20d00;
  --mf-danger-subtle: #ffdddb;
  --mf-danger-hover: #970b00;
  --mf-danger-pressed: #660700;
  --mf-info: #2238df;
  --mf-info-subtle: #d3d7f9;
  --mf-info-hover: #05169b;
  --mf-info-pressed: #000e79;
  color: var(--mf-text-primary) !important;
  background-color: var(--mf-bg-page) !important;
  font-family: 'PeridotPE-Regular', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

body.magentafacelift :where(p, span, div, li, ul, ol, dl, dt, dd, a, label, small, strong, b, em, i, input, textarea, select, option, button, th, td, caption, legend):not(.material-icons):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not([class*='icon']):not([class*='Icon']):not(i[class]):not(svg *):not(path):not(circle):not(rect) {
  font-family: inherit !important; }

body.magentafacelift :where(input, textarea, select, option, button, p, span, div, li, a, label, td, th, small, strong, b):not(.material-icons):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not([class*='icon']):not([class*='Icon']) {
  font-style: normal; }

body.magentafacelift h1,
body.magentafacelift .h1,
body.magentafacelift .heading-1,
body.magentafacelift .title-xl,
body.magentafacelift .title-l {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 40px;
  line-height: 44px;
  font-weight: 700; }

body.magentafacelift h2,
body.magentafacelift .h2,
body.magentafacelift .heading-2,
body.magentafacelift .title-m {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 32px;
  line-height: 36px;
  font-weight: 700; }

body.magentafacelift h3,
body.magentafacelift .h3,
body.magentafacelift .heading-3,
body.magentafacelift .title-s,
body.magentafacelift .subtitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700; }

body.magentafacelift h4,
body.magentafacelift .h4,
body.magentafacelift .heading-4,
body.magentafacelift .sectionTitle,
body.magentafacelift .sectionTitleMedium,
body.magentafacelift .digitalOnboardingPaymentTitle,
body.magentafacelift .xmasGiftSuccessTextTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

body.magentafacelift h5,
body.magentafacelift .h5,
body.magentafacelift .heading-5,
body.magentafacelift .card .title,
body.magentafacelift .card-title,
body.magentafacelift .title {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700; }

body.magentafacelift h6,
body.magentafacelift .h6,
body.magentafacelift .subheading-4 {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

body.magentafacelift .subheading-1 {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 28px;
  line-height: 32px;
  font-weight: 600; }

body.magentafacelift .subheading-2 {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 22px;
  line-height: 24px;
  font-weight: 600; }

body.magentafacelift .subheading-3,
body.magentafacelift .paymentSelectTitle,
body.magentafacelift .inputTitle,
body.magentafacelift .promoParagraph,
body.magentafacelift .xmasGiftConfirmationModalInput span,
body.magentafacelift .plainTextElement strong {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

body.magentafacelift,
body.magentafacelift p,
body.magentafacelift li,
body.magentafacelift td,
body.magentafacelift th,
body.magentafacelift label,
body.magentafacelift input,
body.magentafacelift textarea,
body.magentafacelift select,
body.magentafacelift option,
body.magentafacelift .body-medium,
body.magentafacelift .body-regular,
body.magentafacelift .paragraph,
body.magentafacelift .simpleText,
body.magentafacelift .plainTextElement,
body.magentafacelift .xmasGiftActivateSectionText,
body.magentafacelift .xmasGiftSuccessTextSubtitle,
body.magentafacelift .xmasGiftConfirmationModalText,
body.magentafacelift .promoSubParagraph,
body.magentafacelift .indicationBlue,
body.magentafacelift .spaText,
body.magentafacelift .spaText--body {
  font-family: 'PeridotPE-Regular', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important; }

body.magentafacelift .body-large,
body.magentafacelift .font-body-large,
body.magentafacelift .link-large,
body.magentafacelift .card-description-large,
body.magentafacelift .font-Body-Large {
  font-family: 'PeridotPE-Regular', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important; }

body.magentafacelift small,
body.magentafacelift .body-small,
body.magentafacelift .link-small,
body.magentafacelift .caption,
body.magentafacelift .card-description,
body.magentafacelift .assistive-copy,
body.magentafacelift .readMoreItem,
body.magentafacelift .readMoreItem .readMoreItemParagraph,
body.magentafacelift .readMoreItem .readMoreItemParagraph a.visitLink,
body.magentafacelift .questionParagraphItalicsModal,
body.magentafacelift .card .paragraph,
body.magentafacelift .card .learnMore,
body.magentafacelift .infoText,
body.magentafacelift .font-Body-Small,
body.magentafacelift .font-Assistive-Small {
  font-family: 'PeridotPE-Regular', sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important; }

body.magentafacelift strong,
body.magentafacelift b,
body.magentafacelift .body-medium-bold,
body.magentafacelift .body-bold,
body.magentafacelift .text-bold,
body.magentafacelift .emphasis,
body.magentafacelift .xmasGiftActivateSectionText strong {
  font-family: 'PeridotPE-Bold', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 700 !important; }

body.magentafacelift .body-small-bold,
body.magentafacelift .text-small-bold,
body.magentafacelift .questionParagraphItalicsModalSpan,
body.magentafacelift .font-Body-Small-Bold {
  font-family: 'PeridotPE-Bold', sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 700 !important; }

body.magentafacelift .assistive-large,
body.magentafacelift .font-Assistive-Large {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600; }

body.magentafacelift .assistive-small,
body.magentafacelift .microcopy,
body.magentafacelift .helper-text,
body.magentafacelift .meta-text {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

body.magentafacelift .assistive-small-bold,
body.magentafacelift .microcopy-bold,
body.magentafacelift .label-small,
body.magentafacelift .chip-label,
body.magentafacelift .font-Assistive-Small-Bold {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600; }

body.magentafacelift .badge,
body.magentafacelift .pill,
body.magentafacelift .tag,
body.magentafacelift .counter,
body.magentafacelift .font-Badge {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em; }

body.magentafacelift .error-text,
body.magentafacelift .validation-message,
body.magentafacelift .field-error,
body.magentafacelift .font-error-text {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400; }

body.magentafacelift nav a,
body.magentafacelift .nav-link,
body.magentafacelift .menu-link,
body.magentafacelift .spaNavItem,
body.magentafacelift .font-nav {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400; }

body.magentafacelift .is-active > a,
body.magentafacelift .nav-link.active,
body.magentafacelift .menu-link.active,
body.magentafacelift .spaNavItem--active,
body.magentafacelift .font-nav-selected {
  font-family: 'PeridotPE-ExtraBlack', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 800; }

body.magentafacelift .stepper,
body.magentafacelift .stepper-item,
body.magentafacelift .wizard-step,
body.magentafacelift .spaStepper,
body.magentafacelift .font-Stepper {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

body.magentafacelift button,
body.magentafacelift .button,
body.magentafacelift .btn,
body.magentafacelift .cta,
body.magentafacelift [class*='Button'],
body.magentafacelift [class*='button'] {
  font-family: 'PeridotPE-Bold', sans-serif !important;
  font-weight: 700 !important;
  transition: background-color 220ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1), color 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms linear, fill 160ms cubic-bezier(0.2, 0, 0, 1), stroke 160ms cubic-bezier(0.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1); }

body.magentafacelift .button,
body.magentafacelift .btn,
body.magentafacelift .cta,
body.magentafacelift .buttonOuter .button,
body.magentafacelift .font-Button-Big {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700; }

body.magentafacelift .button.small,
body.magentafacelift .btn-sm,
body.magentafacelift .font-Button-Small {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700; }

body.magentafacelift .button.medium,
body.magentafacelift .button.default,
body.magentafacelift .btn-md,
body.magentafacelift .btn-default,
body.magentafacelift .font-Button-Default {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700; }

body.magentafacelift button:hover,
body.magentafacelift .button:hover,
body.magentafacelift .btn:hover,
body.magentafacelift .cta:hover {
  transform: translateY(-1px); }

body.magentafacelift button:active,
body.magentafacelift .button:active,
body.magentafacelift .btn:active,
body.magentafacelift .cta:active {
  transform: translateY(0); }

body.magentafacelift button:focus-visible,
body.magentafacelift .button:focus-visible,
body.magentafacelift .btn:focus-visible,
body.magentafacelift .cta:focus-visible,
body.magentafacelift a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(226, 0, 116, 0.22) !important; }

body.magentafacelift a,
body.magentafacelift .link,
body.magentafacelift .link-button,
body.magentafacelift [class*='link'] {
  color: var(--mf-secondary-accent); }

body.magentafacelift .dataRemainingNumber {
  font-family: 'BTCosmo-Bold', sans-serif !important;
  font-size: 32px !important;
  line-height: 36px !important;
  font-weight: 700 !important; }

body.magentafacelift .dataRemainingNumber.smallText {
  font-size: 24px !important;
  line-height: 28px !important; }

body.magentafacelift .dataRemainingNumber.unlimmited,
body.magentafacelift .plusIconContainer.withAlert span {
  font-family: 'PeridotPE-ExtraBlack', sans-serif !important;
  font-size: 10px !important;
  line-height: 12px !important;
  font-weight: 800 !important; }

body.magentafacelift .plusIconContainer:not(.withAlert) {
  font-family: 'BTCosmo-Bold', sans-serif !important; }

body.magentafacelift .boldFontFamily {
  font-family: 'PeridotPE-SemiBold', sans-serif !important;
  font-size: 14px !important;
  line-height: 16px !important;
  font-weight: 600 !important; }

body.magentafacelift.dark-mode,
body.dark-mode.magentafacelift,
.dark-mode body.magentafacelift {
  --mf-accent: #e20074;
  --mf-accent-hover: #cd016a;
  --mf-accent-pressed: #b00b5f;
  --mf-accent-focused: #e20074;
  --mf-accent-disabled: #414141;
  --mf-bg-page: #000000;
  --mf-bg-surface: #000000;
  --mf-bg-subtle: #000000;
  --mf-bg-muted: #262626;
  --mf-border-default: #828282;
  --mf-border-strong: #ffffff;
  --mf-text-primary: #ffffff;
  --mf-text-secondary: #cfcfcf;
  --mf-text-disabled: #7f7f7f;
  --mf-text-inverse: #000000;
  --mf-divider: #828282;
  --mf-secondary-accent: #ffffff;
  --mf-success: #00c26d;
  --mf-success-subtle: #004829;
  --mf-success-hover: #1bd27f;
  --mf-success-pressed: #27ffa0;
  --mf-warning: #ff8b52;
  --mf-warning-subtle: #662200;
  --mf-warning-hover: #ffbb99;
  --mf-warning-pressed: #ffddcc;
  --mf-danger: #ff7066;
  --mf-danger-subtle: #660700;
  --mf-danger-hover: #ffa099;
  --mf-danger-pressed: #ffdddb;
  --mf-info: #6f86ff;
  --mf-info-subtle: #1b2468;
  --mf-info-hover: #95a4ff;
  --mf-info-pressed: #c2ccff;
  color: var(--mf-text-primary) !important;
  background-color: var(--mf-bg-page) !important; }

body.magentafacelift button,
body.magentafacelift .btn,
body.magentafacelift .spaButton {
  font-family: 'PeridotPE-Bold', sans-serif !important;
  color: #ffffff !important; }

body.magentafacelift button *,
body.magentafacelift .btn *,
body.magentafacelift .spaButton * {
  color: inherit !important; }

body.magentafacelift .btn-primary,
body.magentafacelift .spaButton--primary,
body.magentafacelift button.primary {
  background-color: #e6007e !important;
  color: #ffffff !important; }

body.magentafacelift a:not(.spaButton):not(.spaSecondaryButton):not(.spaSecondaryButtonWithBorder):not(.button):not(.btn):not(.cta):not(.primaryButton):not(.secondaryButton):not([role='button']),
body.magentafacelift .link,
body.magentafacelift .link-button,
body.magentafacelift [class*='link']:not(.spaButton):not(.spaSecondaryButton):not(.spaSecondaryButtonWithBorder):not(.button):not(.btn):not(.cta):not(.primaryButton):not(.secondaryButton) {
  color: var(--mf-secondary-accent) !important; }

body.magentafacelift .spaButton,
body.magentafacelift .spaSecondaryButton,
body.magentafacelift .spaSecondaryButtonWithBorder,
body.magentafacelift .button,
body.magentafacelift .btn,
body.magentafacelift .cta,
body.magentafacelift .primaryButton,
body.magentafacelift .secondaryButton,
body.magentafacelift a.spaButton,
body.magentafacelift a.spaSecondaryButton,
body.magentafacelift a.spaSecondaryButtonWithBorder,
body.magentafacelift a.button,
body.magentafacelift a.btn,
body.magentafacelift a.cta,
body.magentafacelift a.primaryButton,
body.magentafacelift a.secondaryButton,
body.magentafacelift a[role='button'] {
  font-family: 'PeridotPE-Bold', sans-serif !important;
  text-decoration: none !important;
  color: inherit !important; }

body.magentafacelift .spaButton *,
body.magentafacelift .spaSecondaryButton *,
body.magentafacelift .spaSecondaryButtonWithBorder *,
body.magentafacelift .button *,
body.magentafacelift .btn *,
body.magentafacelift .cta *,
body.magentafacelift .primaryButton *,
body.magentafacelift .secondaryButton *,
body.magentafacelift a.spaButton *,
body.magentafacelift a.spaSecondaryButton *,
body.magentafacelift a.spaSecondaryButtonWithBorder *,
body.magentafacelift a.button *,
body.magentafacelift a.btn *,
body.magentafacelift a.cta *,
body.magentafacelift a.primaryButton *,
body.magentafacelift a.secondaryButton *,
body.magentafacelift a[role='button'] * {
  color: inherit !important;
  font-family: inherit !important; }

body.magentafacelift .spaButton.primaryButton,
body.magentafacelift .spaButton--primary,
body.magentafacelift .button.primaryButton,
body.magentafacelift .btn-primary,
body.magentafacelift .cta-primary,
body.magentafacelift a.spaButton.primaryButton,
body.magentafacelift a.spaButton--primary,
body.magentafacelift a.button.primaryButton,
body.magentafacelift a.btn-primary,
body.magentafacelift a.cta-primary {
  background-color: var(--mf-accent) !important;
  border-color: var(--mf-accent) !important;
  color: #ffffff !important; }

body.magentafacelift .spaButton.primaryButton:hover,
body.magentafacelift .spaButton--primary:hover,
body.magentafacelift .button.primaryButton:hover,
body.magentafacelift .btn-primary:hover,
body.magentafacelift .cta-primary:hover,
body.magentafacelift a.spaButton.primaryButton:hover,
body.magentafacelift a.spaButton--primary:hover,
body.magentafacelift a.button.primaryButton:hover,
body.magentafacelift a.btn-primary:hover,
body.magentafacelift a.cta-primary:hover {
  background-color: var(--mf-accent-hover) !important;
  border-color: var(--mf-accent-hover) !important;
  color: #ffffff !important; }

body.magentafacelift .spaButton.primaryButton:active,
body.magentafacelift .spaButton--primary:active,
body.magentafacelift .button.primaryButton:active,
body.magentafacelift .btn-primary:active,
body.magentafacelift .cta-primary:active,
body.magentafacelift a.spaButton.primaryButton:active,
body.magentafacelift a.spaButton--primary:active,
body.magentafacelift a.button.primaryButton:active,
body.magentafacelift a.btn-primary:active,
body.magentafacelift a.cta-primary:active {
  background-color: var(--mf-accent-pressed) !important;
  border-color: var(--mf-accent-pressed) !important;
  color: #ffffff !important; }

body.magentafacelift .spaSecondaryButton,
body.magentafacelift .spaSecondaryButtonWithBorder,
body.magentafacelift .spaButton--secondary,
body.magentafacelift .button.secondaryButton,
body.magentafacelift .btn-secondary,
body.magentafacelift a.spaSecondaryButton,
body.magentafacelift a.spaSecondaryButtonWithBorder,
body.magentafacelift a.spaButton--secondary,
body.magentafacelift a.button.secondaryButton,
body.magentafacelift a.btn-secondary {
  background-color: transparent !important;
  border-color: var(--mf-secondary-accent) !important;
  color: var(--mf-secondary-accent) !important; }

body.magentafacelift .spaButton--text-color,
body.magentafacelift .link-button,
body.magentafacelift a.spaButton--text-color,
body.magentafacelift a.link-button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--mf-secondary-accent) !important; }

body.magentafacelift .spaButton--text-color svg,
body.magentafacelift .spaButton--text-color svg path,
body.magentafacelift a.spaButton--text-color svg,
body.magentafacelift a.spaButton--text-color svg path {
  fill: currentColor !important; }

body.shop.magentafacelift a:not(.button):not(.btn):not(.cta):not(.primaryButton):not(.secondaryButton):not(.gradientButton):not(.greyButton):not(.greyButtonNormal):not(.redButton):not(.transparentButton):not(.buttons-transparentOutlinedButton):not(.visitLink):not(.billAction):not(.goBack):not(.navbar-item):not(.languageSelect):not([role='button']) {
  color: var(--mf-secondary-accent) !important; }

body.shop.magentafacelift a:not(.button):not(.btn):not(.cta):not(.primaryButton):not(.secondaryButton):not(.gradientButton):not(.greyButton):not(.greyButtonNormal):not(.redButton):not(.transparentButton):not(.buttons-transparentOutlinedButton):not(.visitLink):not(.billAction):not(.goBack):not(.navbar-item):not(.languageSelect):not([role='button']):hover,
body.shop.magentafacelift a:not(.button):not(.btn):not(.cta):not(.primaryButton):not(.secondaryButton):not(.gradientButton):not(.greyButton):not(.greyButtonNormal):not(.redButton):not(.transparentButton):not(.buttons-transparentOutlinedButton):not(.visitLink):not(.billAction):not(.goBack):not(.navbar-item):not(.languageSelect):not([role='button']):active,
body.shop.magentafacelift a:not(.button):not(.btn):not(.cta):not(.primaryButton):not(.secondaryButton):not(.gradientButton):not(.greyButton):not(.greyButtonNormal):not(.redButton):not(.transparentButton):not(.buttons-transparentOutlinedButton):not(.visitLink):not(.billAction):not(.goBack):not(.navbar-item):not(.languageSelect):not([role='button']):visited {
  color: var(--mf-secondary-accent) !important; }

body.shop.magentafacelift a.button,
body.shop.magentafacelift a.btn,
body.shop.magentafacelift a.cta,
body.shop.magentafacelift a.primaryButton,
body.shop.magentafacelift a.secondaryButton,
body.shop.magentafacelift a.gradientButton,
body.shop.magentafacelift a.greyButton,
body.shop.magentafacelift a.greyButtonNormal,
body.shop.magentafacelift a.redButton,
body.shop.magentafacelift a.transparentButton,
body.shop.magentafacelift a.buttons-transparentOutlinedButton,
body.shop.magentafacelift a[role='button'],
body.shop.magentafacelift .button,
body.shop.magentafacelift .btn,
body.shop.magentafacelift .cta,
body.shop.magentafacelift .primaryButton,
body.shop.magentafacelift .secondaryButton,
body.shop.magentafacelift .gradientButton,
body.shop.magentafacelift .greyButton,
body.shop.magentafacelift .greyButtonNormal,
body.shop.magentafacelift .redButton,
body.shop.magentafacelift .transparentButton,
body.shop.magentafacelift .buttons-transparentOutlinedButton {
  font-family: 'PeridotPE-Bold', sans-serif !important;
  text-decoration: none !important;
  transition: background-color 220ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1), color 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1) !important; }

body.shop.magentafacelift a.button *,
body.shop.magentafacelift a.btn *,
body.shop.magentafacelift a.cta *,
body.shop.magentafacelift a.primaryButton *,
body.shop.magentafacelift a.secondaryButton *,
body.shop.magentafacelift a.gradientButton *,
body.shop.magentafacelift a.greyButton *,
body.shop.magentafacelift a.greyButtonNormal *,
body.shop.magentafacelift a.redButton *,
body.shop.magentafacelift a.transparentButton *,
body.shop.magentafacelift a.buttons-transparentOutlinedButton *,
body.shop.magentafacelift a[role='button'] *,
body.shop.magentafacelift .button *,
body.shop.magentafacelift .btn *,
body.shop.magentafacelift .cta *,
body.shop.magentafacelift .primaryButton *,
body.shop.magentafacelift .secondaryButton *,
body.shop.magentafacelift .gradientButton *,
body.shop.magentafacelift .greyButton *,
body.shop.magentafacelift .greyButtonNormal *,
body.shop.magentafacelift .redButton *,
body.shop.magentafacelift .transparentButton *,
body.shop.magentafacelift .buttons-transparentOutlinedButton * {
  color: inherit !important;
  font-family: inherit !important; }

body.shop.magentafacelift a.button.primaryButton,
body.shop.magentafacelift a.primaryButton,
body.shop.magentafacelift a.gradientButton,
body.shop.magentafacelift .button.primaryButton,
body.shop.magentafacelift .primaryButton,
body.shop.magentafacelift .gradientButton,
body.shop.magentafacelift .redButton {
  background: var(--mf-accent) !important;
  background-color: var(--mf-accent) !important;
  border-color: var(--mf-accent) !important;
  color: #ffffff !important; }

body.shop.magentafacelift a.button.primaryButton:hover,
body.shop.magentafacelift a.primaryButton:hover,
body.shop.magentafacelift a.gradientButton:hover,
body.shop.magentafacelift .button.primaryButton:hover,
body.shop.magentafacelift .primaryButton:hover,
body.shop.magentafacelift .gradientButton:hover,
body.shop.magentafacelift .redButton:hover {
  background: var(--mf-accent-hover) !important;
  background-color: var(--mf-accent-hover) !important;
  border-color: var(--mf-accent-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important; }

body.shop.magentafacelift a.button.primaryButton:active,
body.shop.magentafacelift a.primaryButton:active,
body.shop.magentafacelift a.gradientButton:active,
body.shop.magentafacelift .button.primaryButton:active,
body.shop.magentafacelift .primaryButton:active,
body.shop.magentafacelift .gradientButton:active,
body.shop.magentafacelift .redButton:active {
  background: var(--mf-accent-pressed) !important;
  background-color: var(--mf-accent-pressed) !important;
  border-color: var(--mf-accent-pressed) !important;
  color: #ffffff !important;
  transform: translateY(0) !important; }

body.shop.magentafacelift a.button.primaryButton:visited,
body.shop.magentafacelift a.primaryButton:visited,
body.shop.magentafacelift a.gradientButton:visited,
body.shop.magentafacelift .button.primaryButton:visited,
body.shop.magentafacelift .primaryButton:visited,
body.shop.magentafacelift .gradientButton:visited,
body.shop.magentafacelift .redButton:visited {
  color: #ffffff !important; }

body.shop.magentafacelift a.button.primaryButton.disabled,
body.shop.magentafacelift a.primaryButton.disabled,
body.shop.magentafacelift .button.primaryButton.disabled,
body.shop.magentafacelift .primaryButton.disabled {
  background: var(--mf-accent-disabled) !important;
  background-color: var(--mf-accent-disabled) !important;
  border-color: var(--mf-accent-disabled) !important;
  color: #ffffff !important; }

body.shop.magentafacelift a.secondaryButton,
body.shop.magentafacelift a.greyButton,
body.shop.magentafacelift a.greyButtonNormal,
body.shop.magentafacelift .secondaryButton,
body.shop.magentafacelift .greyButton,
body.shop.magentafacelift .greyButtonNormal {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--mf-secondary-accent) !important;
  color: var(--mf-secondary-accent) !important; }

body.shop.magentafacelift a.secondaryButton:hover,
body.shop.magentafacelift a.greyButton:hover,
body.shop.magentafacelift a.greyButtonNormal:hover,
body.shop.magentafacelift .secondaryButton:hover,
body.shop.magentafacelift .greyButton:hover,
body.shop.magentafacelift .greyButtonNormal:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: var(--mf-secondary-accent) !important;
  color: var(--mf-secondary-accent) !important;
  transform: translateY(-1px) !important; }

body.shop.magentafacelift a.visitLink,
body.shop.magentafacelift .visitLink,
body.shop.magentafacelift .paymentContent .paymentContentTitle.withParagraphs a,
body.shop.magentafacelift .acceptTerms .visitLink {
  background: transparent !important;
  border: 0 !important;
  color: var(--mf-secondary-accent) !important;
  text-decoration: underline !important;
  font-family: 'PeridotPE-Regular', sans-serif !important; }

body.shop.magentafacelift a.visitLink:hover,
body.shop.magentafacelift .visitLink:hover,
body.shop.magentafacelift .paymentContent .paymentContentTitle.withParagraphs a:hover,
body.shop.magentafacelift .acceptTerms .visitLink:hover {
  color: var(--mf-secondary-accent) !important;
  text-decoration: none !important;
  transform: none !important; }

body.shop.magentafacelift a.billAction,
body.shop.magentafacelift .billActions a {
  color: var(--mf-secondary-accent) !important;
  font-family: 'PeridotPE-SemiBold', sans-serif !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important; }

body.shop.magentafacelift a.billAction *,
body.shop.magentafacelift .billActions a * {
  color: inherit !important;
  fill: currentColor !important; }

body.shop.magentafacelift .navbar .navbar-item,
body.shop.magentafacelift .mobileContentNavigation a,
body.shop.magentafacelift .modalTabs li a,
body.shop.magentafacelift .paymentStepsBar .stepText,
body.shop.magentafacelift .goBack {
  text-decoration: none !important; }

body.shop.magentafacelift .navbar .navbar-item,
body.shop.magentafacelift .mobileContentNavigation a,
body.shop.magentafacelift .modalTabs li a {
  font-family: 'PeridotPE-Regular', sans-serif !important; }

body.shop.magentafacelift .navbar .navbar-item.active,
body.shop.magentafacelift .mobileContentNavigation li.active a,
body.shop.magentafacelift .modalTabs li.active a {
  font-family: 'PeridotPE-ExtraBlack', sans-serif !important; }

body.shop.magentafacelift .paymentStepsBar .stepText {
  font-family: 'PeridotPE-Regular', sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--mf-text-secondary) !important; }

body.shop.magentafacelift .paymentStepsBar .stepCol.active .stepText {
  color: var(--mf-text-primary) !important; }

body.shop.magentafacelift .languageSelect,
body.shop.magentafacelift .languageSelect:hover,
body.shop.magentafacelift .languageSelect:visited {
  color: var(--mf-text-primary) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important; }

body.shop.magentafacelift .languageSelect * {
  color: inherit !important; }

body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice,
body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem a.packageListPrice {
  background: var(--mf-accent) !important;
  background-color: var(--mf-accent) !important;
  border-color: var(--mf-accent) !important;
  color: #ffffff !important;
  font-family: 'PeridotPE-Bold', sans-serif !important;
  font-size: 18px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background-color 220ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms cubic-bezier(0.2, 0, 0, 1), color 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1) !important; }

body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice *,
body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem a.packageListPrice * {
  color: inherit !important;
  font-family: inherit !important; }

body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice:hover,
body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem a.packageListPrice:hover {
  background: var(--mf-accent-hover) !important;
  background-color: var(--mf-accent-hover) !important;
  border-color: var(--mf-accent-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important; }

body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice:active,
body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem a.packageListPrice:active {
  background: var(--mf-accent-pressed) !important;
  background-color: var(--mf-accent-pressed) !important;
  border-color: var(--mf-accent-pressed) !important;
  color: #ffffff !important;
  transform: translateY(0) !important; }

body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice:visited,
body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem a.packageListPrice:visited {
  color: #ffffff !important; }

body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice.disabled,
body.magentafacelift .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem a.packageListPrice.disabled {
  background: var(--mf-accent-disabled) !important;
  background-color: var(--mf-accent-disabled) !important;
  border-color: var(--mf-accent-disabled) !important;
  color: #ffffff !important;
  cursor: default !important;
  transform: none !important; }

body.magentafacelift button:disabled,
body.magentafacelift .disabled,
body.magentafacelift [disabled],
body.magentafacelift a.disabled,
body.magentafacelift a[aria-disabled='true'],
body.magentafacelift .btn.disabled,
body.magentafacelift .button.disabled,
body.magentafacelift .spaButton.disabled,
body.magentafacelift .primaryButton.disabled,
body.magentafacelift .secondaryButton.disabled {
  background-color: var(--mf-accent-disabled) !important;
  border-color: var(--mf-accent-disabled) !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
  transform: none !important;
  box-shadow: none !important; }

body.magentafacelift button:disabled:hover,
body.magentafacelift .disabled:hover,
body.magentafacelift [disabled]:hover,
body.magentafacelift a.disabled:hover,
body.magentafacelift a[aria-disabled='true']:hover {
  background-color: var(--mf-accent-disabled) !important;
  color: #ffffff !important;
  transform: none !important; }

body.magentafacelift button:disabled:active,
body.magentafacelift .disabled:active,
body.magentafacelift [disabled]:active,
body.magentafacelift a.disabled:active,
body.magentafacelift a[aria-disabled='true']:active {
  background-color: var(--mf-accent-disabled) !important;
  transform: none !important; }

body.magentafacelift button:disabled:focus,
body.magentafacelift .disabled:focus,
body.magentafacelift [disabled]:focus,
body.magentafacelift a.disabled:focus,
body.magentafacelift a[aria-disabled='true']:focus {
  outline: none !important;
  box-shadow: none !important; }

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

.primaryButton {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #ffffff !important;
  background: #0e8103;
  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: #0e8103;
    opacity: 0.85; }
  .primaryButton:visited {
    color: #0e8103;
    border-color: #0e8103; }
  .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', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      display: inline-block; }
  .primaryButtonIcon {
    height: 24px;
    margin-left: 8px; }
  .primaryButton.primaryButtonLarge {
    padding: 16px 24px;
    box-sizing: border-box;
    min-height: 40px; }
    @media only screen and (max-width: 767px) {
      .primaryButton.primaryButtonLarge {
        min-width: 136px; } }
    .primaryButton.primaryButtonLargeWithIcon {
      padding: 8px 16px; }

.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', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  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', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: #212121 !important; }

.greyButtonNormal {
  height: 40px;
  min-width: 160px;
  background-color: transparent;
  border: 1px solid #212121;
  color: #212121;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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: #0e8103;
  border-color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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: #0e8103;
    border-color: #0e8103;
    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 #0e8103;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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; }
  .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 #df6938;
  color: #df6938;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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; }
  .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', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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; }
  .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: #0e8103;
  border: 1px solid #0e8103;
  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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }
  .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', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  padding: 6px;
  padding: 12px 16px;
  background-color: #ffffff;
  border: 1px solid #0e8103;
  border-radius: 16px; }
  .secondaryButton.secondaryButtonNormalSmall {
    color: #212121;
    border: 1px solid #212121;
    padding: 12px;
    box-sizing: border-box;
    min-height: 32px; }
    .secondaryButton.secondaryButtonNormalSmall:hover {
      border-color: #0e8103;
      color: #0e8103;
      opacity: 0.85; }
    .secondaryButton.secondaryButtonNormalSmall: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.secondaryButtonNormalSmall:visited {
      border-color: #0e8103;
      color: #0e8103; }
    .secondaryButton.secondaryButtonNormalSmall.largeAccounts {
      margin: 0; }
  .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: #0e8103;
      color: #0e8103;
      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: #0e8103;
      color: #0e8103; }
    .secondaryButton.secondaryButtonNormal.largeAccounts {
      margin: 0; }
  .secondaryButton:hover {
    color: #0e8103;
    border-color: #0e8103;
    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: #0e8103;
    color: #0e8103; }
  .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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
    .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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
    .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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }
  .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', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700; }
  .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', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700; }
  .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: 8px;
  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.md-checkbox-inline {
    display: inline-block; }
  .md-checkbox.invoiceCheckbox {
    display: flex;
    margin: 0;
    opacity: 0.9; }
  .md-checkbox.greenCheckbox {
    margin: 0; }
    .md-checkbox.greenCheckbox label {
      background: #00a5e3;
      display: block;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 5px; }
      .md-checkbox.greenCheckbox label:before {
        border: none;
        background-color: #ffffff !important;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .md-checkbox.greenCheckbox input[type='checkbox']:checked + label:after {
      top: 6px;
      left: 5px; }
  .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: 0 !important;
      margin: 0 !important;
      text-decoration: underline; }
    .md-checkbox label a.visitLink.blue {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .md-checkbox label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .md-checkbox label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .md-checkbox label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
    .md-checkbox label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        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: 8px;
  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.md-checkbox-inline {
    display: inline-block; }
  .md-checkbox-simple.invoiceCheckbox {
    display: flex;
    margin: 0;
    opacity: 0.9; }
  .md-checkbox-simple.greenCheckbox {
    margin: 0; }
    .md-checkbox-simple.greenCheckbox label {
      background: #00a5e3;
      display: block;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 5px; }
      .md-checkbox-simple.greenCheckbox label:before {
        border: none;
        background-color: #ffffff !important;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .md-checkbox-simple.greenCheckbox input[type='checkbox']:checked + label:after {
      top: 6px;
      left: 5px; }
  .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: 0 !important;
      margin: 0 !important;
      text-decoration: underline; }
    .md-checkbox-simple label a.visitLink.blue {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .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', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .md-checkbox-simple label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
    .md-checkbox-simple label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        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: 8px;
  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.md-checkbox-inline {
    display: inline-block; }
  .checkbox-forList.invoiceCheckbox {
    display: flex;
    margin: 0;
    opacity: 0.9; }
  .checkbox-forList.greenCheckbox {
    margin: 0; }
    .checkbox-forList.greenCheckbox label {
      background: #00a5e3;
      display: block;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 5px; }
      .checkbox-forList.greenCheckbox label:before {
        border: none;
        background-color: #ffffff !important;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .checkbox-forList.greenCheckbox input[type='checkbox']:checked + label:after {
      top: 6px;
      left: 5px; }
  .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: 0 !important;
      margin: 0 !important;
      text-decoration: underline; }
    .checkbox-forList label a.visitLink.blue {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .checkbox-forList label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .checkbox-forList label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .checkbox-forList label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
    .checkbox-forList label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        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: 8px;
  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.md-checkbox-inline {
    display: inline-block; }
  .checkbox-forListDisabled.invoiceCheckbox {
    display: flex;
    margin: 0;
    opacity: 0.9; }
  .checkbox-forListDisabled.greenCheckbox {
    margin: 0; }
    .checkbox-forListDisabled.greenCheckbox label {
      background: #00a5e3;
      display: block;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 5px; }
      .checkbox-forListDisabled.greenCheckbox label:before {
        border: none;
        background-color: #ffffff !important;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .checkbox-forListDisabled.greenCheckbox input[type='checkbox']:checked + label:after {
      top: 6px;
      left: 5px; }
  .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: 0 !important;
      margin: 0 !important;
      text-decoration: underline; }
    .checkbox-forListDisabled label a.visitLink.blue {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .checkbox-forListDisabled label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .checkbox-forListDisabled label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .checkbox-forListDisabled label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
    .checkbox-forListDisabled label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c;
    letter-spacing: 0; }

.connectionsSearchbarDisabled {
  pointer-events: none; }

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

.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: 100%;
  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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 592px; }
  @media only screen and (max-width: 767px) {
    .modal-container {
      width: 316px; } }
  .modal-container-small {
    max-width: 352px; }
  .modal-container-medium {
    max-width: 384px; }
  .modal-container-large {
    max-width: 482px; }
  .modal-container-xlarge {
    max-width: 516px; }
  .modal-container-xlarge-1 {
    max-width: 532px; }
  .modal-container-xlarge-2 {
    max-width: 550px; }
  .modal-container-xxlarge {
    max-width: 895px; }
  .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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }
  .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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 384px; }
  @media only screen and (max-width: 767px) {
    .modal-container-warning {
      width: 316px; } }
  .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 screen and ((max-width: 480px)) {
    .modal-body {
      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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

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

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

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

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

.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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    -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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    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: #df6938 !important; }
  .input-container-error label {
    color: #df6938; }

.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', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: #212121;
  width: auto;
  min-width: 0;
  background-color: transparent;
  text-align: right;
  overflow-x: visible; }

.error .plainInput {
  color: #df6938; }

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

.inputBoxTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    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: #df6938 !important; }
  .formField.fieldWithError label {
    color: #df6938; }
  .formField.inactive {
    cursor: default;
    pointer-events: none; }
  .formField .error {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    display: none;
    position: absolute;
    left: 0;
    bottom: -2px;
    color: #df6938;
    -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', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .formField label {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    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', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 0; }

input[type='text'],
input[type='password'] {
  outline: none;
  background-color: transparent;
  padding-right: 24px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }
  input[type='text'].borderedInput,
  input[type='password'].borderedInput {
    border-bottom: 2px solid #00a5e3;
    width: 180px;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #212121; }
  input[type='text'].withError,
  input[type='password'].withError {
    border-color: #df6938 !important; }
  input[type='text'].simpleInput,
  input[type='password'].simpleInput {
    box-sizing: border-box;
    width: 100%;
    color: #212121;
    display: inline-block;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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'].simpleInput.disabled,
    input[type='password'].simpleInput.disabled {
      border-color: #848484;
      color: #848484; }
    input[type='text'].simpleInput.withBackground,
    input[type='password'].simpleInput.withBackground {
      background-color: #ffffff; }
  input[type='text'].input-simpleInput,
  input[type='password'].input-simpleInput {
    box-sizing: border-box;
    height: 48px;
    width: 100%;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .inputWithSearchBox :-moz-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .inputWithSearchBox ::-moz-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .inputWithSearchBox :-ms-input-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      cursor: pointer; }
      .inputWithSearchBox .inputSearchBox span:hover, .inputWithSearchBox .inputSearchBox span:focus, .inputWithSearchBox .inputSearchBox span.active {
        color: #ffffff;
        background-color: #00a5e3; }

body #simple-popup {
  overflow-y: auto;
  z-index: 9996 !important; }

body .simple-popup-backdrop-content {
  background-color: rgba(33, 33, 33, 0.6) !important;
  z-index: 9996 !important; }

body #simple-popup-backdrop,
body .simple-popup-backdrop-content {
  z-index: 9996 !important; }

body .simple-popup-content {
  border-radius: 16px;
  background-color: #ffffff;
  overflow: visible;
  padding: 0;
  max-height: calc(100vh + 3px);
  max-height: calc(var(--vh, 1vh) * 100); }
  @media only screen and (max-width: 767px) {
    body .simple-popup-content {
      max-width: 316px; } }
  body .simple-popup-content.removeMaxHeight {
    max-height: initial !important; }
  body .simple-popup-content .close:before {
    display: inline-block;
    text-align: center;
    color: #212121 !important;
    width: 24px;
    height: 24px;
    padding: 12px;
    font-size: 0;
    line-height: 0;
    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%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1418 6.64221L17.2553 6.74494C17.8358 7.32542 17.8412 8.26118 17.2601 8.84221L14.102 12.0002L17.2601 15.1582C17.8018 15.6999 17.8373 16.5555 17.358 17.142L17.2553 17.2555C16.6748 17.836 15.7391 17.8414 15.158 17.2603L12 14.1022L8.84203 17.2603C8.30033 17.802 7.44475 17.8375 6.85829 17.3582L6.74475 17.2555C6.16427 16.675 6.15889 15.7392 6.73992 15.1582L9.89803 12.0002L6.73992 8.84221C6.19822 8.30051 6.16271 7.44494 6.64202 6.85847L6.74475 6.74494C7.32524 6.16446 8.26099 6.15907 8.84203 6.7401L12 9.89821L15.158 6.7401C15.6997 6.1984 16.5553 6.16289 17.1418 6.64221Z' fill='%23212121'/%3E%3C/svg%3E%0A"); }
  body .simple-popup-content .close.dark:before {
    color: #ffffff !important;
    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%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1418 6.64221L17.2553 6.74494C17.8358 7.32542 17.8412 8.26118 17.2601 8.84221L14.102 12.0002L17.2601 15.1582C17.8018 15.6999 17.8373 16.5555 17.358 17.142L17.2553 17.2555C16.6748 17.836 15.7391 17.8414 15.158 17.2603L12 14.1022L8.84203 17.2603C8.30033 17.802 7.44475 17.8375 6.85829 17.3582L6.74475 17.2555C6.16427 16.675 6.15889 15.7392 6.73992 15.1582L9.89803 12.0002L6.73992 8.84221C6.19822 8.30051 6.16271 7.44494 6.64202 6.85847L6.74475 6.74494C7.32524 6.16446 8.26099 6.15907 8.84203 6.7401L12 9.89821L15.158 6.7401C15.6997 6.1984 16.5553 6.16289 17.1418 6.64221Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A"); }

body .modalDetails.withOverflow {
  overflow-y: visible; }

body .modalDetails.withMaxWidth {
  width: 100%;
  max-width: 400px;
  margin: auto; }

body .modalDetails.withBgWhite {
  background-color: #ffffff; }

body .modalDetails.withPadding {
  padding: 0 32px 32px; }

body .modalContainer {
  display: none; }

body .modalContainerSimple {
  display: block;
  max-height: 100%;
  overflow-y: auto; }

body .overlayModal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(61, 82, 101, 0.5);
  z-index: 801;
  cursor: pointer; }

body .modalTabs {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 16px; }
  body .modalTabs li {
    display: inline-block;
    margin-right: 16px;
    min-width: 48px; }
    body .modalTabs li:last-child {
      margin-right: 0; }
    body .modalTabs li a {
      width: auto;
      display: block;
      position: relative;
      color: #212121;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      margin-bottom: 8px; }
    body .modalTabs li.active a {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700; }
      body .modalTabs li.active a:after {
        content: '';
        width: 100%;
        display: block;
        height: 2px;
        background: #e20074;
        position: absolute;
        bottom: -8px;
        left: 0; }
  body .modalTabs span {
    margin-left: auto;
    align-self: flex-start;
    cursor: pointer;
    margin-bottom: auto;
    padding: 12px 8px;
    color: #0e8103;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    width: auto;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 16px; }
    body .modalTabs span:hover {
      color: rgba(0, 109, 41, 0.85);
      z-index: 1; }
    body .modalTabs span: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 .modalTabs span-notVisible {
      visibility: hidden; }
    body .modalTabs span.hidden {
      display: none; }
    body .modalTabs span.absoluteLink {
      position: absolute;
      bottom: 8px; }
    body .modalTabs span.whiteLink {
      display: inline-block;
      width: auto;
      color: #ffffff;
      border: 1px solid #ffffff;
      border-radius: 16px;
      margin-left: 8px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        body .modalTabs span.whiteLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    body .modalTabs span.blueTooltipLink {
      color: #212121;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      letter-spacing: 0;
      margin-top: 4px; }
    body .modalTabs span.blueLink {
      display: inline-block;
      width: auto;
      color: #212121;
      margin-left: 24px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        body .modalTabs span.blueLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    body .modalTabs span.inline {
      display: inline-block;
      width: auto; }
    body .modalTabs span.blue {
      color: #212121 !important;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }

body .minimize {
  width: 12px;
  height: 20px;
  display: flex;
  align-items: center;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%); }
  body .minimize:before {
    content: '';
    width: 100%;
    height: 2px;
    display: block;
    background-color: #ffffff; }

body .modalContent {
  padding: 0px 16px 16px 16px;
  height: 370px;
  overflow-y: auto;
  display: flex;
  align-items: center;
  flex-flow: column;
  border-radius: 0 0 16px 16px; }
  body .modalContent .modalList {
    display: none;
    flex-flow: column;
    width: 100%; }
    body .modalContent .modalList .emptyNotifications {
      margin-top: 8px;
      padding-left: 16px; }
    body .modalContent .modalList.active {
      display: flex; }
    body .modalContent .modalList .modalListItem {
      font-size: 16px;
      line-height: 18px;
      padding: 12px 32px 12px 0;
      display: block;
      position: relative; }
      body .modalContent .modalList .modalListItem:last-child:before {
        display: none;
        content: ''; }
      body .modalContent .modalList .modalListItem.hidden {
        display: none !important; }
      body .modalContent .modalList .modalListItem:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 1px;
        background-color: #e6e6e6; }
      body .modalContent .modalList .modalListItem:hover i {
        display: block; }
      body .modalContent .modalList .modalListItem:hover .mark {
        display: block; }
      body .modalContent .modalList .modalListItem .mark {
        content: '';
        width: 8px;
        height: 8px;
        background-color: #ffffff;
        position: absolute;
        right: 16px;
        top: 34px;
        cursor: pointer;
        border: 1px solid #e6e6e6;
        border-radius: 100%; }
      body .modalContent .modalList .modalListItem i {
        color: #212121;
        position: absolute;
        right: 12px;
        top: 6px;
        cursor: pointer; }
        body .modalContent .modalList .modalListItem i:before {
          content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_3210_180531' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_3210_180531)'%3E%3Cpath d='M7.9999 9.06126L4.797 12.2642C4.65618 12.405 4.47937 12.4754 4.26657 12.4754C4.05377 12.4754 3.87696 12.405 3.73614 12.2642C3.59531 12.1233 3.5249 11.9465 3.5249 11.7337C3.5249 11.5209 3.59531 11.3441 3.73614 11.2033L6.93904 8.00039L3.73614 4.79749C3.59531 4.65667 3.5249 4.47986 3.5249 4.26706C3.5249 4.05426 3.59531 3.87745 3.73614 3.73662C3.87696 3.5958 4.05377 3.52539 4.26657 3.52539C4.47937 3.52539 4.65618 3.5958 4.797 3.73662L7.9999 6.93952L11.2028 3.73662C11.3436 3.5958 11.5204 3.52539 11.7332 3.52539C11.946 3.52539 12.1228 3.5958 12.2637 3.73662C12.4045 3.87745 12.4749 4.05426 12.4749 4.26706C12.4749 4.47986 12.4045 4.65667 12.2637 4.79749L9.06077 8.00039L12.2637 11.2033C12.4045 11.3441 12.4749 11.5209 12.4749 11.7337C12.4749 11.9465 12.4045 12.1233 12.2637 12.2642C12.1228 12.405 11.946 12.4754 11.7332 12.4754C11.5204 12.4754 11.3436 12.405 11.2028 12.2642L7.9999 9.06126Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A"); }
      body .modalContent .modalList .modalListItem.newNotification:after {
        content: '';
        width: 100%;
        background-color: #f2f2f3;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        height: 100%; }
      body .modalContent .modalList .modalListItem.newNotification .mark {
        border: none;
        background-color: #0ea600; }
      body .modalContent .modalList .modalListItem.notificationWithImage {
        padding-left: 48px; }
        body .modalContent .modalList .modalListItem.notificationWithImage .notificationIcon {
          position: absolute;
          left: 16px;
          top: 16px;
          width: 24px;
          height: 24px; }
      body .modalContent .modalList .modalListItem span {
        width: 100%;
        display: block;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
        body .modalContent .modalList .modalListItem span.transactionPrice {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600;
          float: right;
          width: auto;
          margin-right: -16px; }
        body .modalContent .modalList .modalListItem span.modalListItemTitleDate {
          margin-top: 4px;
          color: #848484;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400; }
          body .modalContent .modalList .modalListItem span.modalListItemTitleDate .strong {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600; }

body .modalTitle {
  color: #212121;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  padding: 16px 40px;
  background: #ffffff;
  background-repeat: no-repeat;
  position: relative;
  left: 0;
  top: 0;
  display: block;
  text-align: center;
  width: 100%;
  min-height: 32px;
  -webkit-border-radius: 16px 16px 0 0;
  -moz-border-radius: 16px 16px 0 0;
  border-radius: 16px 16px 0 0; }
  body .modalTitle.white {
    background: #ffffff; }
  body .modalTitle .goBack {
    position: absolute;
    left: 6px;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1);
    font-size: 18px;
    display: block;
    cursor: pointer; }
    body .modalTitle .goBack.hidden {
      display: none; }
    body .modalTitle .goBack.backToFLow {
      display: block; }
  body .modalTitle .previousStepIcon {
    position: absolute;
    left: 12px;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1);
    font-size: 18px;
    display: block;
    cursor: pointer; }
    body .modalTitle .previousStepIcon.hidden {
      display: none; }
    body .modalTitle .previousStepIcon.backToFLow {
      display: block; }

.modalIcon.withPadding {
  padding: 32px;
  height: auto; }
  .modalIcon.withPadding img {
    height: 170px; }

.modalText.largeText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.modalText .blueLink {
  text-decoration: underline; }

.modalText strong {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.modalQuestion {
  display: block;
  padding: 16px 0; }

body .firstElement,
body .paymentSteps {
  margin-top: 0 !important; }

.emptyModal {
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 370px; }
  .emptyModal .emptyImage {
    padding-top: 16px;
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .emptyModal .emptyContent {
    display: flex;
    flex-direction: column;
    text-align: center; }
    .emptyModal .emptyContent .emptyTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      margin-bottom: 8px; }
    .emptyModal .emptyContent .emptyText {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }

.giftHeader {
  padding: 1px;
  position: relative;
  background: #e20074;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  overflow: hidden;
  width: calc(100% + 16px);
  left: -8px;
  border-radius: 16px; }
  @media only screen and (max-width: 767px) {
    .giftHeader {
      width: 100%;
      left: 0; } }
  .giftHeader:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: 16px; }
  .giftHeader .giftHeaderContainer {
    background-color: #ffffff;
    display: flex;
    gap: 8px;
    padding: 12px;
    justify-content: center;
    overflow: hidden;
    border-radius: 15px; }
    .giftHeader .giftHeaderContainer img {
      display: block;
      width: 24px;
      height: 24px; }
      @media only screen and (max-width: 767px) {
        .giftHeader .giftHeaderContainer img {
          width: 22px;
          height: 22px; } }
    .giftHeader .giftHeaderContainer span.giftText {
      display: flex;
      flex-direction: column;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: #212121; }
      .giftHeader .giftHeaderContainer span.giftText strong {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }

.simpleModalText {
  display: block;
  text-align: center;
  margin-bottom: 16px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.giftBoxWithBorder {
  display: flex;
  margin: 16px 32px 0;
  background-image: #00a5e3;
  padding: 1px;
  overflow: hidden;
  border-radius: 16px; }
  @media only screen and (max-width: 767px) {
    .giftBoxWithBorder {
      margin: 16px 0 0; } }
  .giftBoxWithBorder .giftBoxWithBorderContainer {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 6px 8px;
    overflow: hidden;
    border-radius: 16px; }
    .giftBoxWithBorder .giftBoxWithBorderContainer span {
      color: #212121;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      margin-left: 4px; }
    .giftBoxWithBorder .giftBoxWithBorderContainer .giftIcon {
      width: 24px;
      height: 24px;
      object-fit: contain;
      object-position: center;
      padding: 2px;
      position: relative;
      top: -6px; }
      @media only screen and (max-width: 767px) {
        .giftBoxWithBorder .giftBoxWithBorderContainer .giftIcon {
          top: -14px; } }

.cancelGenericElement,
.cancelEmbedElement {
  position: absolute;
  right: -16px;
  top: 50%;
  color: #212121 !important;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%); }

i.cancelCosmoteTvGoSubmit, i.cancelCosmoteTvGoEuropeSubmit, i.cancelTrialRemove, i.cancelContactPrompt, i.cancelAddressPrompt, i.cancelFilePrompt, i.cancelAcceptPrompt, i.cancelP2pPrompt, i.cancelGenericElement {
  color: #212121;
  width: 24px;
  height: 24px;
  font-size: 24px;
  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; }

.giftSelectionElement,
.familySelectionElement,
.giftSubmitionElement,
.errorElement,
.confirmationElement,
.maximumElement,
.paymentPromptElement,
.cosmoteTvSubmitElement,
.cosmoteTvGoEuropeSubmitElement,
.diaHiddenElement,
.contactPromptElement,
.addressPromptElement,
.trialPrompt,
.filePromptElement,
.acceptPromptElement,
.p2pCancelPromptElement,
.genericElement,
.embedElement,
.renewPromptElement,
.genericSuccessElement,
.genericErrorElement,
.genericStartoverElement,
.genericFirtErrorElement,
.genericResendElement {
  display: none;
  position: absolute;
  top: 48px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10;
  width: 88%;
  -webkit-border-radius: 16px !important;
  -moz-border-radius: 16px !important;
  border-radius: 16px !important; }
  .giftSelectionElement.absoluteCentered,
  .familySelectionElement.absoluteCentered,
  .giftSubmitionElement.absoluteCentered,
  .errorElement.absoluteCentered,
  .confirmationElement.absoluteCentered,
  .maximumElement.absoluteCentered,
  .paymentPromptElement.absoluteCentered,
  .cosmoteTvSubmitElement.absoluteCentered,
  .cosmoteTvGoEuropeSubmitElement.absoluteCentered,
  .diaHiddenElement.absoluteCentered,
  .contactPromptElement.absoluteCentered,
  .addressPromptElement.absoluteCentered,
  .trialPrompt.absoluteCentered,
  .filePromptElement.absoluteCentered,
  .acceptPromptElement.absoluteCentered,
  .p2pCancelPromptElement.absoluteCentered,
  .genericElement.absoluteCentered,
  .embedElement.absoluteCentered,
  .renewPromptElement.absoluteCentered,
  .genericSuccessElement.absoluteCentered,
  .genericErrorElement.absoluteCentered,
  .genericStartoverElement.absoluteCentered,
  .genericFirtErrorElement.absoluteCentered,
  .genericResendElement.absoluteCentered {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .giftSelectionElement.top-40,
  .familySelectionElement.top-40,
  .giftSubmitionElement.top-40,
  .errorElement.top-40,
  .confirmationElement.top-40,
  .maximumElement.top-40,
  .paymentPromptElement.top-40,
  .cosmoteTvSubmitElement.top-40,
  .cosmoteTvGoEuropeSubmitElement.top-40,
  .diaHiddenElement.top-40,
  .contactPromptElement.top-40,
  .addressPromptElement.top-40,
  .trialPrompt.top-40,
  .filePromptElement.top-40,
  .acceptPromptElement.top-40,
  .p2pCancelPromptElement.top-40,
  .genericElement.top-40,
  .embedElement.top-40,
  .renewPromptElement.top-40,
  .genericSuccessElement.top-40,
  .genericErrorElement.top-40,
  .genericStartoverElement.top-40,
  .genericFirtErrorElement.top-40,
  .genericResendElement.top-40 {
    top: 40%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .giftSelectionElement.topElement,
  .familySelectionElement.topElement,
  .giftSubmitionElement.topElement,
  .errorElement.topElement,
  .confirmationElement.topElement,
  .maximumElement.topElement,
  .paymentPromptElement.topElement,
  .cosmoteTvSubmitElement.topElement,
  .cosmoteTvGoEuropeSubmitElement.topElement,
  .diaHiddenElement.topElement,
  .contactPromptElement.topElement,
  .addressPromptElement.topElement,
  .trialPrompt.topElement,
  .filePromptElement.topElement,
  .acceptPromptElement.topElement,
  .p2pCancelPromptElement.topElement,
  .genericElement.topElement,
  .embedElement.topElement,
  .renewPromptElement.topElement,
  .genericSuccessElement.topElement,
  .genericErrorElement.topElement,
  .genericStartoverElement.topElement,
  .genericFirtErrorElement.topElement,
  .genericResendElement.topElement {
    top: 48px !important;
    -webkit-transform: translate(-50%, 0) !important;
    -moz-transform: translate(-50%, 0) !important;
    transform: translate(-50%, 0) !important; }
  .giftSelectionElement.withMaxWidth,
  .familySelectionElement.withMaxWidth,
  .giftSubmitionElement.withMaxWidth,
  .errorElement.withMaxWidth,
  .confirmationElement.withMaxWidth,
  .maximumElement.withMaxWidth,
  .paymentPromptElement.withMaxWidth,
  .cosmoteTvSubmitElement.withMaxWidth,
  .cosmoteTvGoEuropeSubmitElement.withMaxWidth,
  .diaHiddenElement.withMaxWidth,
  .contactPromptElement.withMaxWidth,
  .addressPromptElement.withMaxWidth,
  .trialPrompt.withMaxWidth,
  .filePromptElement.withMaxWidth,
  .acceptPromptElement.withMaxWidth,
  .p2pCancelPromptElement.withMaxWidth,
  .genericElement.withMaxWidth,
  .embedElement.withMaxWidth,
  .renewPromptElement.withMaxWidth,
  .genericSuccessElement.withMaxWidth,
  .genericErrorElement.withMaxWidth,
  .genericStartoverElement.withMaxWidth,
  .genericFirtErrorElement.withMaxWidth,
  .genericResendElement.withMaxWidth {
    max-width: 370px; }
  .giftSelectionElement.withMaxWidth-516,
  .familySelectionElement.withMaxWidth-516,
  .giftSubmitionElement.withMaxWidth-516,
  .errorElement.withMaxWidth-516,
  .confirmationElement.withMaxWidth-516,
  .maximumElement.withMaxWidth-516,
  .paymentPromptElement.withMaxWidth-516,
  .cosmoteTvSubmitElement.withMaxWidth-516,
  .cosmoteTvGoEuropeSubmitElement.withMaxWidth-516,
  .diaHiddenElement.withMaxWidth-516,
  .contactPromptElement.withMaxWidth-516,
  .addressPromptElement.withMaxWidth-516,
  .trialPrompt.withMaxWidth-516,
  .filePromptElement.withMaxWidth-516,
  .acceptPromptElement.withMaxWidth-516,
  .p2pCancelPromptElement.withMaxWidth-516,
  .genericElement.withMaxWidth-516,
  .embedElement.withMaxWidth-516,
  .renewPromptElement.withMaxWidth-516,
  .genericSuccessElement.withMaxWidth-516,
  .genericErrorElement.withMaxWidth-516,
  .genericStartoverElement.withMaxWidth-516,
  .genericFirtErrorElement.withMaxWidth-516,
  .genericResendElement.withMaxWidth-516 {
    max-width: 516px; }
  .giftSelectionElement.visible,
  .familySelectionElement.visible,
  .giftSubmitionElement.visible,
  .errorElement.visible,
  .confirmationElement.visible,
  .maximumElement.visible,
  .paymentPromptElement.visible,
  .cosmoteTvSubmitElement.visible,
  .cosmoteTvGoEuropeSubmitElement.visible,
  .diaHiddenElement.visible,
  .contactPromptElement.visible,
  .addressPromptElement.visible,
  .trialPrompt.visible,
  .filePromptElement.visible,
  .acceptPromptElement.visible,
  .p2pCancelPromptElement.visible,
  .genericElement.visible,
  .embedElement.visible,
  .renewPromptElement.visible,
  .genericSuccessElement.visible,
  .genericErrorElement.visible,
  .genericStartoverElement.visible,
  .genericFirtErrorElement.visible,
  .genericResendElement.visible {
    display: block; }

.customConePopupContainer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100002;
  overflow-y: auto;
  display: none; }
  .customConePopupContainer .customConePopup {
    border-radius: 4px;
    width: 100%;
    max-width: 400px;
    background-color: #ffffff;
    overflow: visible;
    padding: 0;
    max-height: calc(100vh + 3px);
    max-height: calc(var(--vh, 1vh) * 100);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100003;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media only screen and (max-width: 767px) {
      .customConePopupContainer .customConePopup {
        max-width: 316px; } }
    .customConePopupContainer .customConePopup .close {
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer;
      z-index: 2; }
      .customConePopupContainer .customConePopup .close:before {
        display: inline-block;
        text-align: center;
        color: #ffffff !important;
        width: 30px;
        font-size: 30px;
        line-height: 34px;
        content: '\00d7'; }

.simpleModal {
  z-index: 9996;
  position: fixed; }

.modalInsideModal {
  z-index: 9997;
  position: fixed; }

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

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

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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 220px;
  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;
  left: 50%; }
  @media only screen and (max-width: 480px) {
    body .arrow {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      transform: translateX(0); } }
  body .arrow.arrowWizardLeft {
    left: 70%; }

@media only screen and (max-width: 767px) {
  body.manageOnboarding .arrow {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0); } }

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; }

#slider-range.ui-slider-horizontal {
  height: 6px;
  border: none;
  outline: none;
  background-color: #212121;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }
  #slider-range.ui-slider-horizontal .ui-slider-range {
    background-color: #0ea600;
    border-radius: 0; }
  #slider-range.ui-slider-horizontal .ui-state-default {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 2px solid #0ea600;
    border-radius: 100%;
    outline: none; }
    #slider-range.ui-slider-horizontal .ui-state-default.ui-state-hover {
      width: 16px;
      height: 16px;
      background-color: #ffffff;
      border: 2px solid #0ea600;
      border-radius: 100%;
      outline: none; }

.limitSliderInput .ui-slider-horizontal {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important; }

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

.simple-stepper-item:after {
  box-sizing: border-box; }

.digitalOnboardingHeader .stepperPaddingOverride {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 24px !important;
  padding-right: 12px !important; }

.mobileContentNavigation {
  display: none;
  align-items: stretch;
  justify-content: center;
  flex-flow: row;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid #e6e6e6;
  background-color: #ffffff; }
  @media only screen and (max-width: 1024px) {
    .mobileContentNavigation {
      display: flex; } }
  @media only screen and (max-width: 767px) {
    .mobileContentNavigation {
      margin: 12px 0; } }
  .mobileContentNavigation li {
    flex: 1;
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-color: #ffffff;
    color: #0e8103; }
    .mobileContentNavigation li:last-child, .mobileContentNavigation li.active {
      border-right: none;
      border-left: none; }
      .mobileContentNavigation li:last-child:after, .mobileContentNavigation li.active:after {
        display: none; }
    .mobileContentNavigation li a {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      padding: 8px 12px;
      background-color: #ffffff;
      color: #212121;
      width: 100%;
      display: block;
      text-align: center;
      -webkit-transition: none;
      -moz-transition: none;
      transition: none; }
      @media only screen and (max-width: 767px) {
        .mobileContentNavigation li a {
          padding: 8px 6px; } }
    .mobileContentNavigation li.active {
      background-color: #e20074;
      color: #ffffff; }
      .mobileContentNavigation li.active a {
        background-color: #e20074;
        color: #ffffff; }

.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: #0ea600;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700; }
  .pagination .pageItem .pageLink {
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    margin: 0 8px;
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center; }
  .pagination .pageItem.paginationBtn .pageLink {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    color: #0ea600;
    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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin: 0 8px;
    min-width: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    .pager .page-number.active {
      color: #0ea600;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
    .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', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      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', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      color: #0ea600;
      margin: 0;
      margin-left: 16px; }
    .paginator ul li span {
      color: #212121;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      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', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #212121; }

.giftLabelContainer {
  display: block;
  width: 100%;
  padding: 1px;
  background-color: #e6e6e6;
  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', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }

.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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase; }
    @media only screen and (max-width: 480px) {
      .countDown .countDownTitle {
        margin-right: 12px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; } }
  .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', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%); }
    .countDown .countDownTimer-number {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .countDown .countDownTimer-label {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400; }

.countDownMeta {
  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; }
  .countDownMetaInline {
    margin: 0;
    background-color: transparent;
    color: #212121;
    box-shadow: none; }
  .countDownMeta.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) {
      .countDownMeta.forOffers {
        width: calc(100% - 126px);
        padding: 6px;
        border-radius: 16px 28px 0px 0px; } }
    .countDownMeta.forOffers .countDownImage {
      display: block;
      width: 20px;
      height: auto;
      margin-right: 8px; }
      @media only screen and (max-width: 480px) {
        .countDownMeta.forOffers .countDownImage {
          width: 16px; } }
    @media only screen and (max-width: 480px) {
      .countDownMeta.forOffers .countDownTimer {
        margin: 4px 0; } }
    .countDownMeta.forOffers .countDownTimer-column {
      padding-right: 17px; }
      @media only screen and (max-width: 480px) {
        .countDownMeta.forOffers .countDownTimer-column {
          padding-right: 12px; } }
    .countDownMeta.forOffers .countDownTimer-number {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
    .countDownMeta.forOffers .countDownTimer-label {
      font-size: 12px;
      line-height: 12px; }
  .countDownMeta .countDownImage {
    display: block;
    width: 24px;
    height: auto;
    margin-right: 12px; }
    @media only screen and (max-width: 480px) {
      .countDownMeta .countDownImage {
        margin-right: 8px;
        width: 18px; } }
  .countDownMeta .countDownTitle {
    display: block;
    margin-right: 16px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-transform: uppercase; }
    @media only screen and (max-width: 480px) {
      .countDownMeta .countDownTitle {
        margin-right: 12px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; } }
  .countDownMeta .countDownTimer {
    display: flex; }
    .countDownMeta .countDownTimer-column {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      justify-content: center;
      padding-right: 19px;
      position: relative; }
      @media only screen and (max-width: 480px) {
        .countDownMeta .countDownTimer-column {
          padding-right: 16px; } }
      .countDownMeta .countDownTimer-column:last-child {
        padding-right: 0; }
        .countDownMeta .countDownTimer-column:last-child:after {
          display: none; }
      .countDownMeta .countDownTimer-column:after {
        content: ':';
        position: absolute;
        right: 8px;
        top: 50%;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%); }
    .countDownMeta .countDownTimer-number {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
    .countDownMeta .countDownTimer-label {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400; }

.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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    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', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .timerElementLabel {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }

.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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    border: 1px solid #e6e6e6; }
    @media only screen and (max-width: 767px) {
      .dropdown.deviceDropdown .dropdownButton {
        width: 100%; } }
    .dropdown.deviceDropdown .dropdownButton span {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    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', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .assetsSearchbar-businessContentSearch :-moz-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .assetsSearchbar-businessContentSearch ::-moz-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .assetsSearchbar-businessContentSearch :-ms-input-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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; }

.modalselectioncard-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between; }

.modalselectioncard-section {
  max-width: 360px;
  width: 100%;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  display: flex;
  background-color: #ffffff; }

.modalselectioncard-sectionWithGradient {
  max-width: 360px;
  width: 100%;
  border-radius: 16px;
  background: #00a5e3;
  padding: 3px;
  padding-left: 6px; }

.modalselectioncard-sectionWithGradientContent {
  display: flex;
  background-color: #ffffff;
  border-radius: 15px; }

.modalselectioncard-text {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0;
  margin: 0;
  margin-top: 8px; }

.modalselectioncard-infoContainer {
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }

.modalselectioncard-buttonContainer {
  text-align: right; }

.modalselectioncard-modalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 392px; }
  @media only screen and (max-width: 767px) {
    .modalselectioncard-modalContainer {
      width: 316px; } }

.modalselectioncard-button {
  padding: 12px;
  box-sizing: border-box;
  min-height: 40px;
  min-width: 136px;
  margin-top: 16px; }

.modalselectioncard-checkmarkText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0; }

.modalselectioncard-imageTextContainer {
  display: flex;
  align-items: center;
  align-self: flex-end;
  margin-top: 16px; }

.modalselectioncard-imageTextImage {
  margin-right: 4px; }

.modalselectioncard-imageContainer {
  min-width: 96px;
  background-position: center;
  border-radius: 15px 0 0 15px; }

.modalselectioncard-imageContainerWithParentGradient {
  min-width: 93px;
  background-position: center;
  border-radius: 15px 0 0 15px;
  margin-left: -3px; }

.modalselectioncardParagraph {
  margin-top: 10px;
  margin-bottom: 0;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700; }

.imageTextLabel-modalSelectionCard {
  padding: 6px 14px 6px 4px;
  background-color: #f2f2f3;
  color: #212121;
  min-width: 80px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  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', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  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', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  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', sans-serif;
  font-size: 32px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -2px;
  position: relative; }
  .amountOverview-euros.euros--small {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700; }
    .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', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  position: relative;
  padding-left: 2px;
  bottom: -4px; }

.amountOverview-paymentDeadline {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  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', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .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', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-top: 24px; }
  .whiteBox-disclaimerParagraph-withoutLink {
    margin-top: 64px; }

.whiteBox-simpleLink {
  padding: 12px 8px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @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', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px; }
  .whiteBox-simpleLink.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @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', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }

.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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .outlineElementNormalText {
    margin: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .outlineElementSmallText {
    margin: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    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', sans-serif;
      font-size: 13px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
      font-size: 13px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
        font-size: 24px;
        line-height: 28px;
        font-weight: 700;
        margin-top: 30px;
        display: block;
        margin-bottom: 14px; }
      .routerBox-donut-content-label {
        display: inline-block;
        margin: auto;
        width: auto;
        font-family: 'PeridotPE-ExtraBlack', sans-serif;
        font-size: 10px;
        line-height: 12px;
        font-weight: 800;
        background-color: #e6e6e6;
        padding: 4px;
        border-radius: 4px; }
    .routerBox-donut-indication {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 13px;
      line-height: 16px;
      font-weight: 600; }
  .routerBox-label {
    padding: 8px 12px;
    background-color: #e6e6e6;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    color: #212121;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    min-width: 80px;
    border-radius: 16px 0; }
    .routerBox-label-withoutIcon {
      height: 32px; }
  .routerBox-title {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    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-active + div {
  display: block; }

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

.chipButton {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  padding: 6px;
  padding: 12px 16px;
  background-color: #ffffff;
  border: 1px solid #0e8103;
  border-radius: 16px; }
  .chipButton.secondaryButtonNormalSmall {
    color: #212121;
    border: 1px solid #212121;
    padding: 12px;
    box-sizing: border-box;
    min-height: 32px; }
    .chipButton.secondaryButtonNormalSmall:hover {
      border-color: #0e8103;
      color: #0e8103;
      opacity: 0.85; }
    .chipButton.secondaryButtonNormalSmall: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.secondaryButtonNormalSmall:visited {
      border-color: #0e8103;
      color: #0e8103; }
    .chipButton.secondaryButtonNormalSmall.largeAccounts {
      margin: 0; }
  .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: #0e8103;
      color: #0e8103;
      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: #0e8103;
      color: #0e8103; }
    .chipButton.secondaryButtonNormal.largeAccounts {
      margin: 0; }
  .chipButton:hover {
    color: #0e8103;
    border-color: #0e8103;
    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: #0e8103;
    color: #0e8103; }
  .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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121;
    letter-spacing: 0; }
  .confirmationInfoTextDescription {
    margin: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121;
    letter-spacing: 0;
    text-align: center; }
  .orderCompletionParagraph {
    margin: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #212121;
    letter-spacing: 0;
    text-align: center; }
    .orderCompletionParagraphHighlighted {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }

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

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

.sidePriceCurrent {
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700; }

.sidePriceDescription {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
    .infoElementTitleTextEnd {
      align-self: flex-end; }
  .infoElementDescriptionText {
    display: block;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

.warningBoxSection {
  border: 1px solid #df6938;
  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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .warningBoxSectionTitle {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    margin: 0; }
  .warningBoxSectionDescription {
    margin: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

.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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    color: #9d9d9c; }
  .tabsMenuLine {
    height: 2px;
    background: #e6e6e6;
    margin-top: 6px; }
  .tabsMenuElement.active {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    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', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
    .listedTimelineEmptyDescription {
      margin: 0;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
  .listedTimelineContainer {
    padding: 16px; }
    .listedTimelineContainerTab {
      padding-top: 24px; }
  .listedTimelineLabel {
    display: flex;
    margin-left: -12px; }
  .listedTimelineHeader {
    margin: 0;
    margin-bottom: 16px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .listedTimelineElementTextDescription {
      margin: 0;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      color: #212121;
      letter-spacing: 0; }
    .listedTimelineElementEndText {
      margin: 0;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
    .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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    color: #ffffff !important;
    background: #0e8103;
    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: #0e8103;
      opacity: 0.85; }
    .cardActionsPrimary:visited {
      color: #0e8103;
      border-color: #0e8103; }
    .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: #0e8103;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    padding: 6px;
    padding: 12px 16px;
    background-color: #ffffff;
    border: 1px solid #0e8103;
    border-radius: 16px; }
    .cardActionsSecondary.secondaryButtonNormalSmall {
      color: #212121;
      border: 1px solid #212121;
      padding: 12px;
      box-sizing: border-box;
      min-height: 32px; }
      .cardActionsSecondary.secondaryButtonNormalSmall:hover {
        border-color: #0e8103;
        color: #0e8103;
        opacity: 0.85; }
      .cardActionsSecondary.secondaryButtonNormalSmall: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.secondaryButtonNormalSmall:visited {
        border-color: #0e8103;
        color: #0e8103; }
      .cardActionsSecondary.secondaryButtonNormalSmall.largeAccounts {
        margin: 0; }
    .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: #0e8103;
        color: #0e8103;
        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: #0e8103;
        color: #0e8103; }
      .cardActionsSecondary.secondaryButtonNormal.largeAccounts {
        margin: 0; }
    .cardActionsSecondary:hover {
      color: #0e8103;
      border-color: #0e8103;
      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: #0e8103;
      color: #0e8103; }
    .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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    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', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  margin: 0; }
  .cardTextIcon {
    width: 24px; }
  .cardTextWithIcon {
    display: flex;
    align-items: center;
    gap: 4px; }
    .cardTextWithIcon .cardGiftText,
    .cardTextWithIcon .cardText,
    .cardTextWithIcon .cardTextRed {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 18px;
      line-height: 28px;
      font-weight: 400; }
  .cardTextRed {
    color: #df6938; }
  .cardTextBottom {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-top: 16px; }
  .cardTextNormal {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400; }
  .cardTextList {
    display: flex;
    flex-direction: column;
    gap: 16px; }
    .cardTextListElement {
      display: flex;
      flex-direction: column;
      gap: 4px; }
      .cardTextListElement .cardText {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600; }
      .cardTextListElement .cardTextNormal {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 18px;
        line-height: 28px;
        font-weight: 400; }
      .cardTextListElement .cardTextWithIcon .cardGiftText,
      .cardTextListElement .cardTextWithIcon .cardText,
      .cardTextListElement .cardTextWithIcon .cardTextRed {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 18px;
        line-height: 28px;
        font-weight: 400; }

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

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

.itemSliderList {
  padding: 16px 24px 24px;
  overflow-y: auto;
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 16px; }
  .itemSliderList.noPadding {
    padding: 0; }
  .itemSliderList .itemSlider {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
    border-color: #e6e6e6; }
    .itemSliderList .itemSlider.withGreyBackground {
      border-radius: 4px;
      background-color: #f2f2f3 !important; }
    .itemSliderList .itemSlider.withWhiteBackground {
      border-radius: 16px;
      background-color: #ffffff !important; }
    .itemSliderList .itemSlider .itemSliderLeft {
      display: flex;
      flex-direction: row;
      gap: 16px; }
      .itemSliderList .itemSlider .itemSliderLeft .itemSliderText {
        display: flex;
        flex-direction: column;
        gap: 4px; }
        .itemSliderList .itemSlider .itemSliderLeft .itemSliderText .itemSliderTitle {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          color: #212121; }
        .itemSliderList .itemSlider .itemSliderLeft .itemSliderText .itemSliderBody {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          color: #767676; }
    .itemSliderList .itemSlider .itemSliderRight {
      content: url("../img/icons/RightArrow.svg");
      color: #212121;
      padding-left: 16px; }

.digitalOnboarding {
  background-color: #f2f2f3 !important; }
  .digitalOnboarding .digitalOnboardingHeader {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: static;
    padding: 32px 0 0;
    border-bottom: 2px solid #e20074; }
    .digitalOnboarding .digitalOnboardingHeader.noBorder {
      border-bottom: none !important; }
    .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;
      width: 30px;
      height: 20px; }
      .digitalOnboarding .digitalOnboardingHeader .headerFlag.right {
        position: absolute;
        right: 0;
        margin-right: 48px; }
    .digitalOnboarding .digitalOnboardingHeader .exitIcon {
      padding: 12px;
      margin-left: 32px; }
    @media only screen and (max-width: 480px) {
      .digitalOnboarding .digitalOnboardingHeader .exitIcon {
        margin-left: 0px; } }
    .digitalOnboarding .digitalOnboardingHeader .header-title {
      pointer-events: none;
      cursor: auto;
      margin-left: auto; }
    .digitalOnboarding .digitalOnboardingHeader.withWhiteBackground {
      background-color: #ffffff;
      border-bottom: 2px solid #e20074; }
      .digitalOnboarding .digitalOnboardingHeader.withWhiteBackground.noBorder {
        border-bottom: none !important; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingTitle-small {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 24px;
      line-height: 28px;
      font-weight: 700;
      color: #212121;
      padding-top: 32px;
      text-align: center; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingTitle-large {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 32px;
      line-height: 36px;
      font-weight: 700;
      color: #212121;
      padding-top: 32px;
      text-align: center; }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingLogo {
      content: url("../img/icons/CosmoteLogo.svg");
      justify-content: center; }
      @media screen and (max-width: 500px) {
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingLogo.small {
          height: 64px;
          width: 100%; } }
    .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingLogoAll {
      content: url("../img/icons/CosmoteLogo.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: 1024px) {
            .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: #e20074;
              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: #e20074;
              z-index: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed:not(:first-child):before {
              background-color: #e20074; }
          .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: 1024px) {
            .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: -17px; }
                .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: -17px; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed {
                color: #212121; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed:after {
                  border: none;
                  background-color: #e20074;
                  z-index: 1; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item.completed:not(:first-child):before {
                  background-color: #e20074; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:after {
                margin: 0 8px 0 0;
                width: var(--circle-size-mobile);
                height: var(--circle-size-mobile);
                border: 3px solid #9d9d9c; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-item:before {
                height: 40px;
                width: 2px;
                right: -17px;
                top: -36px; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-title {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400; }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingStepperContainer.digitalOnboardingStepper .simple-stepper-wrapper {
          max-width: 1000px;
          margin: auto 0;
          width: 100%;
          position: relative; }
          @media only screen and (max-width: 1024px) {
            .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;
          right: 0;
          margin: 12px;
          margin-top: 22px;
          transform: rotate(180deg);
          transition: transform 0.1s ease; }
          @media only screen and (max-width: 1024px) {
            .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: 1024px) {
            .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: #e20074;
              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: #e20074;
              z-index: 1; }
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed:not(:first-child):before {
              background-color: #e20074; }
          .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: 1024px) {
            .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: -17px; }
                .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: -17px; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed {
                color: #212121; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed:after {
                  border: none;
                  background-color: #e20074;
                  z-index: 1; }
                .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item.completed:not(:first-child):before {
                  background-color: #e20074; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:after {
                margin: 0 8px 0 0;
                width: var(--circle-size-mobile);
                height: var(--circle-size-mobile);
                border: 3px solid #9d9d9c; }
              .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-item:before {
                height: 40px;
                width: 2px;
                right: -17px;
                top: -36px; } }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-title {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400; }
        .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-wrapper {
          max-width: 1000px;
          margin: auto 0;
          width: 100%;
          position: relative; }
          @media only screen and (max-width: 1024px) {
            .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;
          right: 0;
          margin: 12px;
          margin-top: 22px;
          transform: rotate(180deg);
          transition: transform 0.1s ease; }
          @media only screen and (max-width: 1024px) {
            .digitalOnboarding .digitalOnboardingHeader .digitalOnboardingFiveStepStepperContainer.digitalOnboardingFiveStepStepper .simple-stepper-close-button {
              display: block; } }
    @media screen and ((max-width: 480px)) {
      .digitalOnboarding .digitalOnboardingHeader .headerFlag {
        margin-right: 0; }
      .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: #212121; }
    .digitalOnboarding .digitalOnboardingBody .ui-tooltip {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      color: #212121; }
      .digitalOnboarding .digitalOnboardingBody .ui-tooltip .list {
        display: flex;
        flex-direction: column; }
    .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', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600; }
      .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', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 700; }
      .digitalOnboarding .digitalOnboardingBody .youthCard .bold {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
        .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 .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', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        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', sans-serif;
            font-size: 24px;
            line-height: 28px;
            font-weight: 700;
            color: #212121; }
          .digitalOnboarding .digitalOnboardingBody .newGiftCard .newGiftCardTitle .newGiftCardPriceTag .amount .fraction {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            color: #212121; }
      .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', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; }
        .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', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 700; }
    .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', sans-serif;
        font-size: 24px;
        line-height: 28px;
        font-weight: 700;
        text-align: center;
        max-width: 460px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingSubtitle img {
          max-height: 96px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingSubtitle.whiteLabel {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          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', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #212121; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText.withWidth {
          width: 460px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText.withSmallerWidth {
          max-width: 432px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-assistiveSmall {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          color: #212121; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-smaller {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          color: #212121; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-smaller.alignStart {
            align-self: start; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingText-larger {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 18px;
          line-height: 28px;
          font-weight: 400;
          color: #212121; }
          .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', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #212121; }
      .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', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingInputContainer .digitalOnboardingInputTitle.errorRed {
            color: #df6938 !important; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .digitalOnboardingInputContainer .digitalOnboardingInput {
          border-radius: 16px;
          border: 1px solid #212121;
          background-color: #ffffff;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #212121;
          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: #df6938 !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', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          color: #212121; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .title.errorRed {
            color: #df6938 !important; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .phoneInput {
          max-width: 344px;
          color: #212121;
          border-radius: 16px;
          border: 1px solid #212121;
          background-color: #ffffff;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          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: #df6938 !important; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .portabilityChoice .phoneInput.stretch {
            max-width: unset;
            width: 100%; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card {
        background-color: #ffffff;
        border-radius: 16px;
        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', sans-serif;
            font-size: 22px;
            line-height: 24px;
            font-weight: 600;
            color: #212121; }
          .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 .cardItemList {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: start; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .amount {
            width: 50%; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .amount .integer {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 32px;
              line-height: 36px;
              font-weight: 700;
              color: #212121; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardBody .amount .fraction {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 20px;
              line-height: 24px;
              font-weight: 700;
              color: #212121; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .card .cardFooter {
          display: flex;
          justify-content: start;
          width: 100%;
          padding-top: 8px; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard {
        background-color: #ffffff;
        border-radius: 16px;
        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 {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 16px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .scanningCard .scanningCardHeader .text {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 22px;
            line-height: 24px;
            font-weight: 600;
            color: #212121; }
        .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 .textField .title {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            color: #212121; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .codeExpiresText {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        color: #212121; }
      .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', sans-serif;
        font-size: 32px;
        line-height: 36px;
        font-weight: 700; }
      .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 svg {
            position: absolute; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingContainer .activationStepsList .activationStep svg path {
              fill: #0ea600; }
      .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', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          color: #212121;
          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', sans-serif;
        font-size: 24px;
        line-height: 28px;
        font-weight: 700;
        color: #212121;
        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 .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', sans-serif;
              font-size: 22px;
              line-height: 24px;
              font-weight: 600;
              color: #212121; } }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #212121; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormAssistiveText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: #212121;
        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', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600; }
      .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', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600;
          color: #212121; }
        .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 .emailCheckBoxContainer .emailCheckBox {
            display: flex;
            height: 40px;
            align-items: flex-start; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBoxContainer .emailCheckBox label::before {
              border-radius: 4px;
              background-color: #ffffff; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBoxContainer .emailCheckBox label:focus-visible:before {
              outline: 5px auto -webkit-focus-ring-color; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBoxContainer .emailCheckBox input[type='checkbox']:checked + label:after {
              border-color: #00a5e3; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .youthCheckboxContainer .emailCheckBoxContainer .label {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            color: #212121; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer {
        display: flex;
        flex-direction: row;
        gap: 32px;
        width: 100%; }
        @media only screen and (max-width: 767px) {
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer {
            flex-direction: column; } }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .simActivationIntro {
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 16px;
          width: 100%;
          border-radius: 16px;
          background-color: #ffffff; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormAssistiveContentContainer {
          display: flex;
          flex-direction: column;
          gap: 16px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer.larger {
          max-width: 980px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .noMargin {
          margin: 0; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .checkboxMargin {
          margin: unset;
          margin-right: 16px; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer.alignCheckboxStart {
            align-items: start; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox {
            display: flex;
            height: 40px;
            align-items: flex-start; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox label::before {
              border-radius: 4px;
              background-color: #ffffff; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox label:focus-visible:before {
              outline: 5px auto -webkit-focus-ring-color; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .emailCheckBox input[type='checkbox']:checked + label:after {
              border-color: #00a5e3; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .emailCheckBoxContainer .label {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            color: #212121; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn {
          display: flex;
          flex-direction: column;
          align-items: start;
          gap: 24px;
          width: 50%; }
          @media only screen and (max-width: 767px) {
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn {
              width: 100%; } }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .title {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.fullWidth {
            width: 100%; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.extraHeight {
            margin-bottom: 150px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.oneThird {
            width: 33%; }
            @media only screen and (max-width: 767px) {
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.oneThird {
                width: 100%; } }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn.smallGap {
            gap: 12px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .alignCenter {
            align-self: center;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .alignCenter img {
              max-height: 96px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .smallGapWithColumn {
            display: flex;
            flex-direction: column;
            gap: 8px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            color: #212121;
            padding-left: 0;
            margin: 0; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText li {
              list-style-type: none; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText.column {
              display: flex;
              flex-direction: column; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText.bold {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormColumnText.smallGap {
              display: flex;
              flex-direction: column;
              gap: 8px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .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 .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .box1 {
            display: flex;
            flex-direction: row;
            padding: 16px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .firstHalf {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 8px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .rightIcon {
            display: flex;
            flex-direction: column;
            margin-left: auto;
            align-items: center;
            justify-content: center;
            color: #212121;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .box .divider {
            width: 100%;
            color: #e6e6e6;
            border: 1px solid #e6e6e6; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .emailFields {
            display: flex;
            width: 100%;
            flex-direction: column;
            align-items: start;
            gap: 24px; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: flex-end;
            width: 100%; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp.alignCenter {
              align-items: flex-start; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp.errorStateCenter {
              align-items: center; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .inputWithHelp .iButton {
              position: static; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .boldText {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 16px;
            line-height: 20px;
            font-weight: 700;
            color: #212121; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .boldSmallText {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            color: #212121; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInputTitle {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600;
              color: #212121;
              text-wrap: wrap; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInputTitle.errorRed {
                color: #df6938 !important; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInputTitle.readOnly {
                color: var(--grayscale-4-disable, #5f5f5f); }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput {
              border-radius: 16px;
              border: 1px solid #212121;
              background-color: #ffffff;
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400;
              color: #212121;
              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 .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput:focus-visible {
                outline: 5px auto -webkit-focus-ring-color; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput.withError {
                border-color: #df6938 !important; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .digitalOnboardingDetailsFormInputContainer .digitalOnboardingDetailsFormInput.readOnly {
                border-color: var(--grayscale-4-disable, #848484);
                color: var(--grayscale-4-disable, #848484);
                pointer-events: none; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 12px;
            border-radius: 16px;
            border: 1px solid #e20074;
            background-color: #ffffff; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .title {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 16px;
              line-height: 20px;
              font-weight: 700;
              color: #212121;
              text-align: center; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .subtitle {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 24px;
              line-height: 28px;
              font-weight: 700;
              color: #212121; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .paragraph {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 400;
              color: #212121; }
              .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .paragraph .strong {
                font-family: 'PeridotPE-SemiBold', sans-serif;
                font-size: 12px;
                line-height: 16px;
                font-weight: 600;
                color: #212121; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .cardFooter {
              display: flex;
              justify-content: start;
              width: 100%;
              padding-top: 8px; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingDetailsForm .digitalOnboardingDetailsFormContainer .digitalOnboardingDetailsFormColumn .card .learnMore {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 400;
              color: #212121;
              text-decoration: underline;
              cursor: pointer; }
    .digitalOnboarding .digitalOnboardingBody .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 .digitalOnboardingBody .digitalOnboardingPaymentContainer .digitalOnboardingPaymentTitle {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        display: flex;
        padding: 16px 16px 0;
        justify-content: center;
        align-self: stretch;
        color: #212121; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .paymentSelectTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        color: #212121; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .infoText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: #767676; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .dropdownContainer .dropdownInput {
        border-radius: 16px;
        color: #212121;
        border-color: #212121;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .dropdownContainer .dropdownInput.withError {
          border-color: #df6938; }
      .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 16px;
        align-self: stretch;
        width: 100%; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .radioButtons {
          display: flex;
          flex-direction: row; }
        .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer {
          width: 100%;
          display: flex;
          flex-direction: column;
          position: relative; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInputTitle {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            color: #212121; }
            .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInputTitle.errorRed {
              color: #df6938 !important; }
          .digitalOnboarding .digitalOnboardingBody .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInput {
            border-radius: 16px;
            border: 1px solid #212121;
            background-color: #ffffff;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            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 .digitalOnboardingPaymentContainer .digitalOnboardingPaymentFormContainer .digitalOnboardingPaymentFormInputContainer .digitalOnboardingPaymentFormInput.withError {
              border-color: #df6938 !important; }
    .digitalOnboarding .digitalOnboardingBody .ddFilterWrapper.readOnly .ddFilter .ddFilterContent .dropdown-title {
      color: var(--grayscale-4-disable, #848484); }
    .digitalOnboarding .digitalOnboardingBody .ddFilterWrapper.readOnly .ddFilter .ddFilterContent .ddFilterInputContainer {
      cursor: auto; }
      .digitalOnboarding .digitalOnboardingBody .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 .digitalOnboardingBody .ddFilterWrapper.readOnly .ddFilter .ddFilterContent .ddFilterInputContainer img {
        display: none; }
    .digitalOnboarding .digitalOnboardingBody .box.offerBox {
      padding: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%; }
    .digitalOnboarding .digitalOnboardingBody .box .offerBoxImage {
      align-self: flex-start; }
    .digitalOnboarding .digitalOnboardingBody .box .boxVerticalText {
      display: flex;
      flex-direction: column; }
      .digitalOnboarding .digitalOnboardingBody .box .boxVerticalText .bold {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .digitalOnboarding .digitalOnboardingBody .box .boxVerticalText .normalText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
    .digitalOnboarding .digitalOnboardingBody .box .arrowRight {
      margin-left: auto; }
  .digitalOnboarding .littleGreyText {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #848484; }
    .digitalOnboarding .littleGreyText.link {
      text-decoration: underline; }
  .digitalOnboarding .iotgTermsImage {
    width: 400px; }
  .digitalOnboarding .tooltipTextStrong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #212121; }
  .digitalOnboarding .alignRight {
    align-self: flex-end !important; }
  .digitalOnboarding .eSignFooter {
    position: fixed;
    display: flex;
    flex-direction: column;
    bottom: 0;
    padding: 16px;
    background-color: #ffffff;
    width: 100%;
    gap: 20px; }
    .digitalOnboarding .eSignFooter .normalText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .digitalOnboarding .eSignFooter .normalText.bold {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
    .digitalOnboarding .eSignFooter .progressBarShell {
      display: flex;
      width: 100%;
      flex: 1 0 0;
      border-radius: 12px;
      background: #e6e6e6; }
    .digitalOnboarding .eSignFooter .progressBar {
      height: 100%;
      background-color: #e20074;
      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 .e-sim-body {
    margin: 0 0 150px;
    height: 100%;
    margin-bottom: 100px; }
    .digitalOnboarding .e-sim-body .eSimIntroCard {
      background: #ffffff;
      border-radius: 24px;
      box-shadow: 0 0 2px 0 #00000024, 0 1px 3px 0 #00000033;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px; }
    .digitalOnboarding .e-sim-body .eSimIntroBadges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap; }
    .digitalOnboarding .e-sim-body .eSimIntroBadge {
      flex: 1 1 0;
      padding: 10px 12px;
      border-radius: 16px;
      background: #f2f2f3;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .digitalOnboarding .e-sim-body .eSimIntroBadgeSubtitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimIntroDescription {
      display: block;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimStepsCard {
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 0 2px 0 #00000024, 0 1px 3px 0 #00000033;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px; }
    .digitalOnboarding .e-sim-body .eSimStepsCard .title {
      display: block;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimStepList {
      list-style: none;
      margin: 0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px; }
    .digitalOnboarding .e-sim-body .eSimStepItem {
      display: flex;
      align-items: center;
      gap: 12px; }
    .digitalOnboarding .e-sim-body .eSimStepIcon {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: inline-block;
      margin: 0 !important; }
    .digitalOnboarding .e-sim-body .eSimStepText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121; }
    .digitalOnboarding .e-sim-body .title {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      color: #212121;
      margin: 0; }
    .digitalOnboarding .e-sim-body .description {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      margin: 0;
      max-width: 480px; }
    .digitalOnboarding .e-sim-body .globalHeader {
      padding: 16px 16px 0 16px; }
    .digitalOnboarding .e-sim-body .eSimErrorContainer {
      padding: 24px 16px 0;
      display: flex;
      flex-direction: column;
      align-items: center; }
      .digitalOnboarding .e-sim-body .eSimErrorContainer .eSimErrorIcon {
        margin-bottom: 24px; }
      .digitalOnboarding .e-sim-body .eSimErrorContainer .eSimErrorBox {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 480px;
        width: 100%; }
        .digitalOnboarding .e-sim-body .eSimErrorContainer .eSimErrorBox .eSimErrorTitle {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          color: #212121; }
        .digitalOnboarding .e-sim-body .eSimErrorContainer .eSimErrorBox .eSimErrorDescription {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          color: #212121;
          margin: 0; }
    .digitalOnboarding .e-sim-body .eSimOtpWrapper {
      max-width: 480px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start; }
      .digitalOnboarding .e-sim-body .eSimOtpWrapper.smallGap {
        gap: 16px; }
      .digitalOnboarding .e-sim-body .eSimOtpWrapper > .visitLink {
        align-self: center;
        display: inline-block;
        width: auto;
        text-align: center;
        margin-top: 16px; }
    .digitalOnboarding .e-sim-body .eSimOtpTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      color: #212121;
      max-width: 344px;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimOtpText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      max-width: 480px;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimOtpTimerAndInput {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 480px;
      align-items: center;
      align-self: center;
      margin-top: 24px; }
    .digitalOnboarding .e-sim-body .eSimOtpTimer {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      color: #212121;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimOtpInput {
      width: 144px;
      height: 52px;
      padding: 12px 0 4px;
      border: none;
      border-bottom: 1px solid #212121;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 32px;
      line-height: 36px;
      font-weight: 700;
      text-align: center;
      outline: none; }
    .digitalOnboarding .e-sim-body .eSimOtpHelp {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: #212121;
      margin: 24px 0 0;
      max-width: 480px; }
    .digitalOnboarding .e-sim-body .eSimOtpResend {
      align-self: center;
      margin-top: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      min-height: 40px;
      min-width: 115px;
      border-radius: 16px;
      text-decoration: underline;
      cursor: pointer;
      border: none;
      outline: none;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700; }
      .digitalOnboarding .e-sim-body .eSimOtpResend:hover {
        text-decoration: none; }
    .digitalOnboarding .e-sim-body footer.progressBar .progressBarInner {
      padding: 16px 16px; }
      .digitalOnboarding .e-sim-body footer.progressBar .progressBarInner.noBoxShadow {
        box-shadow: none; }
    .digitalOnboarding .e-sim-body footer.progressBar .progressBarActions {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap; }
    .digitalOnboarding .e-sim-body footer.progressBar #nextEsimStep-otp {
      width: 100%; }
      .digitalOnboarding .e-sim-body footer.progressBar #nextEsimStep-otp .buttonOuter.leftAligned {
        flex: 0 0 auto;
        margin: 0; }
        .digitalOnboarding .e-sim-body footer.progressBar #nextEsimStep-otp .buttonOuter.leftAligned .button.secondaryButton {
          background-color: #ffffff;
          border: 1px solid #212121;
          color: #212121;
          border-radius: 16px;
          padding: 16px 24px; }
    .digitalOnboarding .e-sim-body footer.progressBar .buttonOuter.rightAligned {
      flex: 1 1 auto;
      max-width: 400px;
      margin-left: 8px; }
    .digitalOnboarding .e-sim-body .e-sim-id {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto;
      gap: 24px;
      max-width: 480px;
      padding: 24px 0; }
      .digitalOnboarding .e-sim-body .e-sim-id .title {
        font-family: 'BTCosmo-Bold';
        font-size: 20px;
        line-height: 24px; }
      .digitalOnboarding .e-sim-body .e-sim-id .questionsBox {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px; }
        .digitalOnboarding .e-sim-body .e-sim-id .questionsBox .bold {
          font-family: 'PeridotPE-Bold';
          font-size: 14px;
          line-height: 20px; }
        .digitalOnboarding .e-sim-body .e-sim-id .questionsBox ol {
          margin: 0; }
          .digitalOnboarding .e-sim-body .e-sim-id .questionsBox ol li {
            padding: 8px 0; }
      .digitalOnboarding .e-sim-body .e-sim-id .radioBox {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px; }
        .digitalOnboarding .e-sim-body .e-sim-id .radioBox .existingId-input {
          padding-top: 24px; }
        .digitalOnboarding .e-sim-body .e-sim-id .radioBox .eIdError {
          display: flex;
          align-items: center;
          gap: 4px; }
          .digitalOnboarding .e-sim-body .e-sim-id .radioBox .eIdError.hidden {
            display: none !important; }
  .digitalOnboarding .eSimOtpPage {
    padding: 24px 16px; }
  @media only screen and (max-width: 480px) {
    .digitalOnboarding .e-sim-body footer.progressBar .progressBarInner {
      padding: 16px 16px; }
    .digitalOnboarding .e-sim-body footer.progressBar .buttonOuter.rightAligned {
      max-width: 343px; } }
  .digitalOnboarding .eSimModal-container {
    width: 100%;
    margin: 0px auto;
    background-color: #ffffff;
    transition: all 0.3s ease;
    border-radius: 16px;
    margin: auto;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    max-width: 432px; }
    @media only screen and (max-width: 767px) {
      .digitalOnboarding .eSimModal-container {
        width: 316px; } }
  .digitalOnboarding .eSimEmailModal-container {
    width: 100%;
    margin: 0px auto;
    background-color: #ffffff;
    transition: all 0.3s ease;
    border-radius: 16px;
    margin: auto;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    max-width: 448px; }
    @media only screen and (max-width: 767px) {
      .digitalOnboarding .eSimEmailModal-container {
        width: 316px; } }
  .digitalOnboarding .progressBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    border-radius: 16px 16px 0 0; }
    .digitalOnboarding .progressBar .progressBarInner {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 16px 24px;
      box-shadow: 0 -2px 8px rgba(33, 33, 33, 0.1); }
    .digitalOnboarding .progressBar .progressBarHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px; }
      .digitalOnboarding .progressBar .progressBarHeader .progressBarStepLabel {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        color: #212121; }
    .digitalOnboarding .progressBar .progressBarToggle {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      border-radius: 12px;
      width: 32px;
      height: 32px; }
      .digitalOnboarding .progressBar .progressBarToggle i {
        font-size: 16px;
        color: #212121;
        transition: transform 0.2s ease;
        transform: rotate(180deg); }
    .digitalOnboarding .progressBar.expanded .progressBarToggle i {
      transform: rotate(0deg); }
    .digitalOnboarding .progressBar .progressBarDrawer {
      margin-top: 16px;
      display: none;
      overflow: hidden; }
    .digitalOnboarding .progressBar .progressBarTrack {
      margin-top: 8px; }
    .digitalOnboarding .progressBar .progressBarSteps {
      display: flex;
      width: 100%;
      height: 8px; }
    .digitalOnboarding .progressBar .progressBarStep {
      flex: 1 1 0;
      background: #e6e6e6;
      border-radius: 4px; }
      .digitalOnboarding .progressBar .progressBarStep + .progressBarStep {
        margin-left: 0; }
      .digitalOnboarding .progressBar .progressBarStep.is-active {
        background: #e20074; }
    .digitalOnboarding .progressBar .progressBarStepper {
      width: 100%;
      margin: 0; }
    .digitalOnboarding .progressBar .simple-stepper {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px; }
      .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item {
        position: relative;
        padding-left: 32px;
        padding-top: 8px;
        padding-bottom: 8px;
        color: #9d9d9c;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
        .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item::before {
          content: '';
          position: absolute;
          left: 8px;
          top: 8px;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #ffffff;
          border: 2px solid #e6e6e6;
          z-index: 2; }
        .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item::after {
          content: '';
          position: absolute;
          left: 16px;
          top: 8px;
          bottom: -24px;
          width: 2px;
          background: #e6e6e6;
          z-index: 1; }
        .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item:last-child::after {
          display: none; }
        .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item.completed {
          color: #212121; }
          .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item.completed::before {
            background: #e20074;
            border-color: #e20074; }
          .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item.completed::after {
            background: #e20074; }
        .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item.active {
          color: #212121; }
          .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item.active::before {
            background: #e20074;
            border-color: #e20074; }
        .digitalOnboarding .progressBar .simple-stepper .simple-stepper-item .simple-stepper-title {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: inherit; }
  @media only screen and (max-width: 480px) {
    .digitalOnboarding .e-sim-body footer.progressBar .progressBarInner {
      padding: 16px 16px; }
    .digitalOnboarding .e-sim-body footer.progressBar .progressBarActions {
      justify-content: center;
      padding: 0 16px; } }
  .digitalOnboarding body.modal-open {
    overflow: hidden; }
  .digitalOnboarding .modal-mask--changeSim {
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999; }
  .digitalOnboarding .changeSimModal {
    width: 480px;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 16px; }
    .digitalOnboarding .changeSimModal .paymentContent {
      padding: 0; }
    .digitalOnboarding .changeSimModal .changeSimModalTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      text-align: center;
      padding: 16px 24px 8px 24px; }
    .digitalOnboarding .changeSimModal .changeSimModalContent {
      padding: 0 24px 24px 24px; }
    .digitalOnboarding .changeSimModal .paymentContentTitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      line-height: 20px;
      margin-top: 0;
      margin-bottom: 24px; }
      .digitalOnboarding .changeSimModal .paymentContentTitle strong {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
    .digitalOnboarding .changeSimModal .buttonOuter.changeSimModalActions {
      margin-top: 0;
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      display: flex;
      justify-content: center; }
      .digitalOnboarding .changeSimModal .buttonOuter.changeSimModalActions .changeSimPrimaryBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 16px 24px;
        border-radius: 16px;
        background-color: #0e8103 !important;
        color: #ffffff !important;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        text-align: center;
        text-decoration: none; }
        .digitalOnboarding .changeSimModal .buttonOuter.changeSimModalActions .changeSimPrimaryBtn:hover {
          background-color: rgba(0, 109, 41, 0.85) !important;
          text-decoration: none; }
    @media only screen and (max-width: 480px) {
      .digitalOnboarding .changeSimModal {
        width: 323px;
        max-width: 323px; }
        .digitalOnboarding .changeSimModal .changeSimModalTitle {
          padding: 16px 16px 8px 16px; }
        .digitalOnboarding .changeSimModal .changeSimModalContent {
          padding: 0 16px 16px 16px; } }
  .digitalOnboarding .e-sim-body .e-sim-id {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px; }
    .digitalOnboarding .e-sim-body .e-sim-id .title {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      color: #212121;
      margin: 0; }
    .digitalOnboarding .e-sim-body .e-sim-id .description {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      margin: 0;
      max-width: 480px; }
  .digitalOnboarding .emailBox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
    width: 100%;
    margin-top: 8px; }
  .digitalOnboarding .emailLabel {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121;
    display: block;
    font-family: 'BTCosmo-Bold', sans-serif !important;
    position: static !important;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 8px; }
  @media only screen and (max-width: 480px) {
    .digitalOnboarding .e-sim-body .e-sim-id {
      padding: 24px 16px 0;
      gap: 16px; }
    .digitalOnboarding .e-sim-body .emailBox {
      max-width: 344px;
      width: 100%; } }
  .digitalOnboarding .e-sim-body .eSimEmailSent {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 0px;
    display: flex;
    flex-direction: column;
    gap: 24px; }
    .digitalOnboarding .e-sim-body .eSimEmailSent .eSimEmailSent-titleLine1 {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      color: #212121;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimEmailSent .eSimEmailSent-titleLine2 {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      color: #212121;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimEmailSent .eSimEmailSent-text {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      margin: 0; }
    .digitalOnboarding .e-sim-body .eSimEmailSent .eSimEmailSent-text .bold {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0; }
    .digitalOnboarding .e-sim-body .eSimEmailSent .eSimEmailSent-textPrimary {
      margin-top: 8px; }
    .digitalOnboarding .e-sim-body .eSimEmailSent .eSimEmailSent-textSecondary {
      margin-top: 0; }
    .digitalOnboarding .e-sim-body .eSimEmailSent .eSimEmailSent-text strong {
      font-weight: 700; }
  @media only screen and (max-width: 480px) {
    .digitalOnboarding .e-sim-body .e-sim-body .eSimEmailSent {
      padding: 24px 16px 24px;
      max-width: 480px; } }
  .digitalOnboarding .eSimBold {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700; }
  .digitalOnboarding .eSimBoldSmall {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700; }
  .digitalOnboarding .eSimWarningModal-container {
    width: 100%;
    margin: 0px auto;
    background-color: #ffffff;
    transition: all 0.3s ease;
    border-radius: 16px;
    margin: auto;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    max-width: 380px; }
    @media only screen and (max-width: 767px) {
      .digitalOnboarding .eSimWarningModal-container {
        width: 316px; } }
  .digitalOnboarding .eSinWarningModalBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 16px; }
  @media only screen and (max-width: 480px) {
    .digitalOnboarding .buttonGroup .actionButton {
      width: 100%;
      flex: 1 0 0; } }

/* Mixin for circles */
.header {
  background-color: #ffffff;
  height: 86px;
  height: 5.375rem; }

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

.header-logo {
  display: block;
  width: 301px;
  width: 18.8125rem;
  height: 37px;
  height: 2.3125rem;
  margin-right: 10px;
  margin-right: 0.625rem; }

.header-logo-image {
  width: 100%;
  height: auto; }

.header-user-details {
  display: flex;
  align-items: center;
  position: relative; }
  .header-user-details .header-user-welcome {
    color: #212121;
    margin-right: 8px;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    text-align: right; }
    @media only screen and (max-width: 767px) {
      .header-user-details .header-user-welcome {
        display: none; } }
    .header-user-details .header-user-welcome .header-user-id {
      margin-top: 8px;
      display: block;
      max-width: 232px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }

.header-user-avatar {
  border: 1px solid #212121;
  object-fit: cover;
  object-position: center;
  width: 32px;
  width: 2rem;
  height: 32px;
  height: 2rem;
  line-height: 32px;
  line-height: 2rem;
  color: inherit;
  border-radius: 100%;
  margin-right: 0; }

.header-unknown-avatar {
  object-fit: cover;
  border-radius: 16px 0px;
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--grayscale-light-mode-1-surface, #f2f2f3);
  object-position: center;
  width: 48px;
  width: 3rem;
  height: 48px;
  height: 3rem;
  margin-right: 0; }
  @media only screen and (max-width: 767px) {
    .header-unknown-avatar {
      margin-right: 0; } }

.header-user {
  align-items: center;
  cursor: pointer; }
  @media only screen and (max-width: 1024px) {
    .header-user {
      margin-top: 0; } }

.header-user-options {
  text-align: left;
  display: block;
  color: #212121;
  cursor: pointer;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: 2px; }

.header-user-options-my-account {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  text-align: left;
  display: block;
  cursor: pointer; }

.headerContainer {
  background-color: #ffffff; }
  @media only screen and (max-width: 767px) {
    .headerContainer {
      position: fixed;
      width: 100%;
      height: 62px;
      z-index: 800;
      left: 0;
      top: 0;
      display: block;
      pointer-events: all; } }

.headerContainer-landingPage {
  background-color: #ffffff; }

.header-elements-container {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  max-width: 80rem;
  padding: 52px 32px 32px 32px;
  padding: 3.25rem 2rem 2rem 2rem;
  align-items: center;
  margin: 0 auto;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .header-elements-container {
      height: 62px;
      padding: 8px 12px;
      padding: 0.5rem 0.75rem; } }
  @media only screen and (max-width: 1024px) {
    .header-elements-container {
      padding: 32px 24px 32px 24px;
      padding: 2rem 1.5rem 2rem 1.5rem; } }

.header-elements-container-landingPage {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  max-width: 80rem;
  padding: 16px 24px;
  padding: 1rem 1.5rem;
  align-items: center;
  margin: 0 auto;
  position: relative; }

.topButtons {
  position: absolute;
  right: 18px;
  top: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px; }
  @media only screen and (max-width: 1024px) {
    .topButtons {
      display: none; } }
  .topButtons a {
    margin: 0 4px; }

.topButtons-landingPage {
  position: absolute;
  right: 18px;
  top: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px; }
  .topButtons-landingPage a {
    margin: 0 6px; }

.languageSelect {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding: 8px 8px;
  text-align: center;
  color: #212121 !important;
  flex-flow: column;
  position: relative; }
  .languageSelect i {
    font-size: 18px;
    position: absolute;
    right: 8px;
    top: 4px;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
    .languageSelect i.opened {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }
  .languageSelect .langText {
    min-width: 55px;
    display: block; }
  .languageSelect .langSelected {
    padding-right: 20px; }
  .languageSelect .langInactive {
    color: #212121;
    padding-top: 2px;
    margin-top: 2px;
    border-top: 1px solid #e6e6e6;
    width: 100%;
    padding-right: 20px;
    display: none; }

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

.header-logo {
  display: block;
  width: 180px;
  width: 11.25rem;
  height: 56px;
  height: 3.5rem;
  margin-right: 10px;
  margin-right: 0.625rem; }
  @media only screen and (max-width: 767px) {
    .header-logo {
      width: 150px;
      width: 9.375rem;
      height: 45px;
      height: 2.8125rem;
      margin-right: 0; } }
  .header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; }

.header-logo-landingPage {
  display: block;
  width: 180px;
  width: 11.25rem;
  height: 56px;
  height: 3.5rem;
  margin-right: 10px;
  margin-right: 0.625rem; }
  .header-logo-landingPage img {
    width: 100%;
    height: 100%;
    object-fit: contain; }

.burgerIcon {
  display: none;
  cursor: pointer;
  width: 24px;
  height: 16px;
  position: relative;
  z-index: 30; }
  @media only screen and (max-width: 767px) {
    .burgerIcon {
      display: flex; } }

.navbar-container {
  width: 100%;
  background: #ffffff; }
  @media only screen and (max-width: 767px) {
    .navbar-container {
      position: fixed;
      left: 0;
      top: -1000px;
      z-index: 900;
      height: auto;
      width: 100%;
      -webkit-transition: top 0.2s ease;
      -moz-transition: top 0.2s ease;
      transition: top 0.2s ease; } }
  .navbar-container.active {
    top: 0;
    -webkit-transition: top 0.2s ease;
    -moz-transition: top 0.2s ease;
    transition: top 0.2s ease; }

.navbar {
  max-width: 1280px;
  max-width: 80rem;
  padding: 0 32px;
  padding: 0 2rem;
  margin: 0 auto;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 767px) {
    .navbar {
      padding: 48px 16px 16px 16px;
      align-items: flex-start;
      flex-flow: column; } }

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

.navTabs {
  max-width: 80rem;
  margin: 0 auto;
  padding: 10px 2rem 0 2rem;
  display: flex; }
  @media only screen and (max-width: 767px) {
    .navTabs {
      padding-left: 48px;
      padding-top: 48px;
      margin-bottom: -48px; } }

.navTabsItem {
  display: flex;
  flex-direction: column;
  letter-spacing: 0px;
  color: #212121 !important;
  color: #212121 !important;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400; }
  .navTabsItem.isActive {
    font-family: 'PeridotPE-ExtraBlack', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800; }
    .navTabsItem.isActive:after {
      content: '';
      background-color: #e20074;
      height: 2px; }

.navTabsItem:hover {
  color: #4d4d4d !important; }
  @media only screen and (max-width: 767px) {
    .navTabsItem:hover {
      background-color: rgba(0, 0, 0, 0); } }

.navTabsItem:first-child {
  margin-left: -6px; }

.underlinedSpan {
  padding: 6px; }

.indication {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  margin-left: auto;
  position: relative;
  color: #212121 !important;
  text-transform: uppercase;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 767px) {
    .indication {
      margin-left: 32px;
      margin-top: 24px; } }
  @media only screen and (max-width: 1024px) {
    .indication {
      margin-bottom: 16px;
      margin-top: 16px;
      align-items: center; } }
  .indication:hover, .indication:focus {
    background: none; }
  .indication i {
    display: none;
    padding-right: 8px; }

.closeMobile {
  display: none;
  color: #212121;
  position: absolute;
  left: 12px;
  top: 12px; }
  @media only screen and (max-width: 767px) {
    .closeMobile {
      display: block; } }

.navbar-item {
  position: relative;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: #212121;
  white-space: nowrap;
  border-radius: 16px;
  padding: 14px 16px 16px 16px;
  padding: 0.875rem 1rem 1rem 1rem; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar-item {
      padding: 0 12px;
      padding: 0 0.75rem; } }
  @media only screen and (max-width: 767px) {
    .navbar-item {
      margin: 8px 0;
      padding: 0 0 0 32px;
      width: 100%; } }
  .navbar-item .home-icon {
    fill: #212121; }
  .navbar-item .subMenu {
    position: absolute;
    left: 0;
    bottom: -3px;
    z-index: 4;
    display: none;
    width: auto;
    background: #00a5e3;
    min-width: 192px;
    border-radius: 16px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .navbar-item .subMenu .subMenuList {
      margin: 1px;
      padding: 16px;
      background-color: #ffffff;
      color: #212121;
      display: flex;
      flex-flow: column;
      border-radius: 16px; }
      .navbar-item .subMenu .subMenuList li {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        cursor: pointer; }
        .navbar-item .subMenu .subMenuList li:hover {
          color: #4d4d4d;
          fill: #4d4d4d; }
        .navbar-item .subMenu .subMenuList li:last-child {
          margin-bottom: 0; }
        .navbar-item .subMenu .subMenuList li img {
          margin-right: 6px; }
          .navbar-item .subMenu .subMenuList li img:hover {
            fill: #4d4d4d; }
        .navbar-item .subMenu .subMenuList li .row {
          display: flex;
          flex-flow: row;
          gap: 8px;
          align-items: center; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar-item .hideOnTablet {
      display: none; } }
  .navbar-item.withNotification, .navbar-item.withNotificationBadge, .navbar-item.withIndicator {
    padding-bottom: 14px; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .navbar-item.withNotification, .navbar-item.withNotificationBadge, .navbar-item.withIndicator {
        padding-bottom: 0; } }
    @media only screen and (max-width: 767px) {
      .navbar-item.withNotification, .navbar-item.withNotificationBadge, .navbar-item.withIndicator {
        padding-bottom: 0; } }
    .navbar-item.withNotification.active::before, .navbar-item.withNotificationBadge.active::before, .navbar-item.withIndicator.active::before {
      content: url("data:image/svg+xml,<svg width='16' height='20' viewBox='0 0 16 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8 0L16 8H0L8 0Z' fill='%23E20074'/></svg>%0A");
      left: 50%;
      bottom: -7px;
      transform: translateX(-50%); }
      @media only screen and (max-width: 1024px) {
        .navbar-item.withNotification.active::before, .navbar-item.withNotificationBadge.active::before, .navbar-item.withIndicator.active::before {
          bottom: -18px; } }
      @media only screen and (max-width: 767px) {
        .navbar-item.withNotification.active::before, .navbar-item.withNotificationBadge.active::before, .navbar-item.withIndicator.active::before {
          display: none; } }
    .navbar-item.withNotification span, .navbar-item.withNotificationBadge span, .navbar-item.withIndicator span {
      background: #e20074;
      color: white;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      padding: 4px 8px;
      min-width: 24px;
      text-align: center;
      display: inline-block;
      border-radius: 8px; }
      .navbar-item.withNotification span.alert, .navbar-item.withNotificationBadge span.alert, .navbar-item.withIndicator span.alert {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        background-image: none;
        background-color: #0e8103;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 2px; }
  .navbar-item:hover {
    color: #4d4d4d !important; }
    .navbar-item:hover .home-icon {
      fill: #4d4d4d; }
  .navbar-item:focus {
    box-shadow: 0px 0px 8px 2px rgba(0, 153, 204, 0.6); }
  .navbar-item:first-child {
    margin-left: -1rem;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 767px) {
      .navbar-item:first-child {
        margin-left: 0; } }
  .navbar-item.active {
    font-family: 'PeridotPE-ExtraBlack', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    line-height: 24px;
    color: #212121 !important; }
    @media only screen and (max-width: 767px) {
      .navbar-item.active {
        margin: 8px 0;
        padding: 0 0 0 32px;
        width: 100%; } }
    .navbar-item.active::before {
      content: url("data:image/svg+xml,<svg width='16' height='20' viewBox='0 0 16 8' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8 0L16 8H0L8 0Z' fill='%23E20074'/></svg>%0A");
      width: 16px;
      height: 20px;
      position: absolute;
      left: 50%;
      bottom: -6px;
      transform: translateX(-50%); }
      @media only screen and (max-width: 1024px) {
        .navbar-item.active::before {
          bottom: -18px; } }
      @media only screen and (max-width: 767px) {
        .navbar-item.active::before {
          display: none; } }
    .navbar-item.active .home-icon {
      fill: #212121; }

.my-account.dropdown div[data-toggle='dropdown_cosid'] {
  display: flex;
  align-items: center; }

#cosid_md_login.my-account.dropdown .cosid_modal-dialog div {
  display: grid; }

.home-icon {
  margin-right: 4px;
  margin-right: 0.25rem;
  transition: all ease 0.3s;
  vertical-align: sub; }

.header-user-text {
  margin: 0 8px;
  margin: 0 0.5rem; }
  @media only screen and (max-width: 767px) {
    .header-user-text {
      display: none; } }

.header-unkown-avatar {
  display: flex;
  width: 48px;
  height: 48px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 16px 0px;
  background: var(--grayscale-light-mode-1-surface, #f2f2f3); }

.gradient-line {
  height: 2px;
  background: #e20074; }
  @media only screen and (max-width: 767px) {
    .gradient-line {
      display: none; } }

.magentaColor {
  background: #e20074; }

.gradient-line-landingPage {
  height: 2px;
  background: #00a5e3; }

.dottedBox {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding: 8px;
  border: 1px dashed #00a5e3;
  border-radius: 16px; }
  .dottedBox .dottedBoxTitle {
    display: block;
    margin-bottom: 7px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121; }
  .dottedBox span {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #212121; }
    .dottedBox span strong {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      margin-left: 8px; }

.gradientBoxContainer {
  display: flex;
  margin-bottom: 16px;
  padding: 2px;
  background-image: #00a5e3;
  border-radius: 16px; }
  .gradientBoxContainer .gradientBoxContent {
    display: block;
    padding: 10px;
    background-color: #f2f2f3;
    border-radius: 16px; }
    .gradientBoxContainer .gradientBoxContent p {
      margin: 0; }
      .gradientBoxContainer .gradientBoxContent p a {
        color: #00a5e3;
        text-decoration: underline; }

.migrationDevicesToShow.hidden {
  display: none !important; }

.migrationOfferContainer {
  display: block;
  padding: 2px;
  border-radius: 16px;
  background: #00a5e3;
  width: calc(100% + 32px);
  position: relative;
  left: -16px; }

.migrationOffer {
  border-radius: 15px;
  display: flex;
  padding: 12px;
  background-color: #ffffff; }
  .migrationOffer img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin-right: 8px; }
  .migrationOffer .migrationOfferContent {
    display: flex;
    flex-direction: column;
    width: 100%; }
    .migrationOffer .migrationOfferContent .migrationOfferTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
    .migrationOffer .migrationOfferContent p {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      display: block;
      margin: 0; }
    .migrationOffer .migrationOfferContent .migrationOfferLink {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      color: #0ea600;
      display: block;
      margin-top: 6px; }
      .migrationOffer .migrationOfferContent .migrationOfferLink:hover {
        color: #0ea600; }

.breadcrumb {
  margin: 24px 0; }
  @media only screen and (max-width: 1024px) {
    .breadcrumb {
      display: none; } }
  .breadcrumb li {
    color: #848484;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    padding-left: 22px;
    left: -4px;
    border-radius: 0; }
    .breadcrumb li:after {
      content: '';
      background-image: url("data:image/svg+xml,%3Csvg width='6' height='20' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.41309 0.00585938L1.69434 10H0.573242L4.29883 0.00585938H5.41309Z' fill='%23848484'/%3E%3C/svg%3E%0A");
      position: absolute;
      box-sizing: border-box;
      height: 20px;
      width: 6px;
      top: 1px;
      right: -15px;
      z-index: 1; }
    .breadcrumb li.active {
      color: #212121; }
      .breadcrumb li.active:after {
        display: none; }
      .breadcrumb li.active a {
        color: #212121; }
    .breadcrumb li:first-child {
      padding-left: 0;
      z-index: 2;
      left: 0; }
      .breadcrumb li:first-child:after {
        display: block; }
      .breadcrumb li:first-child.active {
        color: #212121;
        left: 0; }
        .breadcrumb li:first-child.active:after {
          display: none; }
    .breadcrumb li a {
      color: #767676; }

.quickActions {
  flex-flow: column;
  background-color: #ffffff;
  color: #212121;
  padding: 12px 16px 16px; }
  .quickActions .sectionTitle {
    padding: 0 0 8px;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0; }
  .quickActions ul {
    display: flex;
    flex-direction: column; }
    .quickActions ul li {
      line-height: 48px;
      display: flex; }
      .quickActions ul li a {
        padding: 12px 8px;
        color: #0e8103;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        width: auto;
        display: block;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        color: #212121;
        padding: 16px; }
        .quickActions ul li a:hover {
          color: rgba(0, 109, 41, 0.85);
          z-index: 1; }
        .quickActions ul li a: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; }
        .quickActions ul li a-notVisible {
          visibility: hidden; }
        .quickActions ul li a.hidden {
          display: none; }
        .quickActions ul li a.absoluteLink {
          position: absolute;
          bottom: 8px; }
        .quickActions ul li a.whiteLink {
          display: inline-block;
          width: auto;
          color: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 16px;
          margin-left: 8px;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700; }
          @media only screen and (max-width: 767px) {
            .quickActions ul li a.whiteLink {
              margin-left: 0;
              display: block;
              width: 100%;
              margin-top: 12px; } }
        .quickActions ul li a.blueTooltipLink {
          color: #212121;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700;
          letter-spacing: 0;
          margin-top: 4px; }
        .quickActions ul li a.blueLink {
          display: inline-block;
          width: auto;
          color: #212121;
          margin-left: 24px;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700; }
          @media only screen and (max-width: 767px) {
            .quickActions ul li a.blueLink {
              margin-left: 0;
              display: block;
              width: 100%;
              margin-top: 12px; } }
        .quickActions ul li a.inline {
          display: inline-block;
          width: auto; }
        .quickActions ul li a.blue {
          color: #212121 !important;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700; }
        .quickActions ul li a.withNotification span {
          margin-left: 12px;
          background-color: #e20074;
          color: #ffffff;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600;
          padding: 4px 8px;
          text-align: center;
          display: inline-block;
          border-radius: 8px; }

.cb1Header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-bottom: 2px solid #e20074; }
  .cb1Header .cb1HeaderTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
    flex: 1;
    text-align: center;
    font-family: 'BTCosmo-Bold';
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .cb1Header .cb1ExitIcon {
    display: flex;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 12px;
    align-self: flex-start; }
  .cb1Header .cb1HeaderSubheader {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%; }
  .cb1Header .cb1HeaderFlag {
    margin-left: auto;
    width: 24px;
    height: 24px; }

.Cb1stepperWidth {
  width: 70px !important; }

.cb1Tooltip {
  position: absolute;
  display: flex;
  background-color: #e6e6e6;
  margin-top: 11px; }

.cb1Tooltip1 {
  left: 0 !important;
  position: absolute !important;
  top: 450px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 99 !important;
  width: 322px !important;
  padding: 16px !important;
  background-color: #e6e6e6 !important; }
  .cb1Tooltip1 .arrow:after {
    background-color: #e6e6e6 !important; }
  .cb1Tooltip1.hide {
    display: none !important; }

.cb1Tooltip2 {
  left: 28% !important;
  position: absolute !important;
  top: 230px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 99 !important;
  width: 322px !important;
  padding: 16px !important;
  background-color: #e6e6e6 !important; }
  .cb1Tooltip2 .arrow:after {
    background-color: #e6e6e6 !important; }
  .cb1Tooltip2.hide {
    display: none !important; }

.cb1Tooltip3 {
  left: 20% !important;
  position: absolute !important;
  top: 230px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 99 !important;
  width: 322px !important;
  padding: 16px !important;
  background-color: #e6e6e6 !important; }
  .cb1Tooltip3 .arrow:after {
    background-color: #e6e6e6 !important; }
  .cb1Tooltip3.hide {
    display: none !important; }

.cb1Tooltip4 {
  left: 17px !important;
  position: absolute !important;
  top: 400px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 99 !important;
  width: 322px !important;
  padding: 16px !important;
  background-color: #e6e6e6 !important; }
  .cb1Tooltip4 .arrow:after {
    background-color: #e6e6e6 !important; }
  .cb1Tooltip4.hide {
    display: none !important; }

.cb1-tooltip-bottom-part-buttons {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: center;
  margin-left: auto; }

.cb1-ui-tooltip-title {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  flex-wrap: wrap;
  white-space: wrap;
  display: flex !important;
  gap: 16px !important; }
  .cb1-ui-tooltip-title .cb1-ui-tooltip-title-text {
    margin-right: 16px; }

.cb1-tooltip-bottom-part {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  white-space: nowrap; }

.cb1Wrapped {
  display: flex;
  flex-direction: column !important; }

.cb1NoBg {
  background-color: unset !important;
  z-index: 99 !important; }

.cb1ButtonContainer {
  padding: 24px 0px;
  align-self: flex-end; }
  .cb1ButtonContainer .flexEnd {
    margin-left: auto; }

.cb1Pdf {
  width: 100%; }

.cb1TextGroup {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.cb1AlignSelfRight {
  align-self: flex-end; }

.ddFilter.cb1DdFilter {
  border: none !important;
  padding: 0 !important; }

.cb1EntryDetails {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 24px; }

.cb1Ol {
  list-style-type: square;
  margin-left: 20px; }

.cb1ButtonContainer {
  padding: 24px 0px;
  align-self: flex-end;
  margin-top: 32px; }
  .cb1ButtonContainer.group {
    display: flex;
    flex-direction: row;
    gap: 8px; }
    .cb1ButtonContainer.group .withGroup {
      width: 100%;
      align-items: center; }
    .cb1ButtonContainer.group .usnetColor {
      color: unset;
      border-color: unset; }

.cb1Settings {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  color: unset;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.cb1SecondaryBody {
  padding: 24px 16px; }

.cbb1SuccessColumn {
  display: flex;
  flex-direction: row;
  gap: 24px; }
  .cbb1SuccessColumn .cb1SuccessText {
    display: flex;
    flex-direction: column;
    gap: 8px; }

.cb1Body {
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin: 12px;
  justify-content: center;
  align-items: center; }
  .cb1Body .cb1Container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px; }
  .cb1Body .bannerImage {
    width: 100%;
    height: 240px; }
  .cb1Body .cb1SubhedingTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 8px; }
  .cb1Body .cb1ConfirmationText {
    margin-bottom: 24px; }
  .cb1Body .cb1ConfirmationText {
    margin-bottom: 24px; }
  .cb1Body .cb1CompleteContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; }
    .cb1Body .cb1CompleteContainer .cb1CompleteText {
      display: flex;
      flex-direction: column;
      text-align: center; }
  .cb1Body .cb1Content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%; }
    .cb1Body .cb1Content .cb1ColumnContainer {
      display: flex;
      margin-left: 16px; }
      .cb1Body .cb1Content .cb1ColumnContainer .columnText {
        display: flex;
        flex-direction: column;
        list-style-type: square; }
  .cb1Body .cb1Pdf {
    width: 100%; }
  .cb1Body .cb1ButtonContainer {
    padding: 24px 0px;
    align-self: flex-end; }
    .cb1Body .cb1ButtonContainer.group {
      display: flex;
      flex-direction: row;
      gap: 8px; }
      .cb1Body .cb1ButtonContainer.group .withGroup {
        width: 100%;
        align-items: center; }
      .cb1Body .cb1ButtonContainer.group .usnetColor {
        color: unset;
        border-color: unset; }
    .cb1Body .cb1ButtonContainer .cb1button {
      padding: 16px 24px; }
    .cb1Body .cb1ButtonContainer.cb1ButtonComplete {
      align-self: center; }
    .cb1Body .cb1ButtonContainer.fixMargin {
      margin-top: 16px; }
    .cb1Body .cb1ButtonContainer.noMargin {
      margin: 0 !important; }

.cb1DetailsList .detailsBox:not(:last-child) {
  border-bottom: 1px solid #e6e6e6; }

@media only screen and (max-width: 480px) {
  .cb1Body {
    margin: 0; }
  .cb1ButtonContainer {
    width: 100%; }
    .cb1ButtonContainer .cb1button {
      width: 100%; } }

.cb1EntryModalBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px; }
  .cb1EntryModalBody .cb1ModalTitle {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700; }
  .cb1EntryModalBody .cb1ButtonContainer {
    padding: 24px 0px 0px 0px;
    align-self: flex-end; }
    .cb1EntryModalBody .cb1ButtonContainer.group {
      display: flex;
      flex-direction: row;
      gap: 8px; }
      .cb1EntryModalBody .cb1ButtonContainer.group .withGroup {
        width: 100%; }
      .cb1EntryModalBody .cb1ButtonContainer.group .usnetColor {
        color: unset;
        border-color: unset; }
    .cb1EntryModalBody .cb1ButtonContainer .cb1button {
      padding: 12px 16px 12px 16px; }

.cb1DownloadFiles {
  display: flex;
  padding: 12px 0px;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 8px;
  align-self: stretch; }

.cb1Container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 608px; }
  .cb1Container .cb1SettingsIcon {
    display: flex;
    padding: 12px 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    gap: 4px;
    color: unset; }

.cb1ErrorModal {
  display: flex;
  flex-direction: row;
  padding: 24px;
  gap: 24px;
  align-items: center; }
  .cb1ErrorModal .cb1ErrorModalText {
    display: flex;
    flex-direction: column;
    gap: 8px; }

.cb1365Body {
  display: flex;
  flex-direction: column;
  gap: 24px; }
  .cb1365Body .cb365CheckboxGroup {
    display: flex;
    flex-direction: column;
    gap: 16px; }
  .cb1365Body .cb1365Subheading {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

.cb1Main {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.cb1TitleWithStatus {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%; }

.cb1DetailsBoxContainer {
  display: flex;
  flex-direction: column;
  gap: 4px; }

.cb1InternetConnectionNumber {
  padding-top: 8px; }

.cb1InternetCheckboxGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  .cb1InternetCheckboxGroup .cb1InternetCheckboxGroupItem {
    width: 50%; }

.cb1DeactivationButtonGroup {
  display: flex;
  gap: 8px; }
  .cb1DeactivationButtonGroup .mobileDeactivation {
    width: 100%; }

.cb1InternetDetailsContent {
  margin-top: 16px; }

.cb1internetPopupCheckboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  column-gap: 24px; }
  .cb1internetPopupCheckboxes .termsCheckbox {
    display: flex;
    flex: 0 0 calc(50% - 28px);
    box-sizing: border-box;
    align-items: center;
    text-align: center; }

.detailsBox .detailsBottom.cb1ButtonDetails {
  height: 16px !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 0; }

.detailsBox .detailsBottom.fullText {
  height: auto !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  margin-bottom: 0; }

.cb1ModalSecondaryTitle {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 400; }

.searchFilterContainer .searchFilter.noBorder {
  border-top: none !important;
  padding: 0; }

.cb1ImageContainer {
  width: 24px;
  height: 24px;
  margin-right: 4px; }

.cb1LearnMore {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #212121; }

.cb1Heading4 {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

.cb1AssistiveText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #5f5f5f; }

.cb1PinWarningGroup {
  display: flex;
  flex-direction: row;
  margin-top: 32px;
  gap: 8px; }

.cb1NewPinGroup {
  display: flex;
  align-items: center; }
  .cb1NewPinGroup .cb1NewPin {
    margin-left: auto; }

.cbPinInputGroup {
  display: flex;
  gap: 16px; }

.cb1SendPinButton {
  padding: 12px 16px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  justify-content: center;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer; }

.cb1ModalBackArrow {
  display: flex;
  left: 0;
  position: absolute;
  padding-left: 16px; }

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

.cb1ModalBody {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px; }
  .cb1ModalBody.paddingTop {
    padding: 24px 0px; }
    @media screen and ((max-width: 767px)) {
      .cb1ModalBody.paddingTop {
        padding: 14px; } }
  .cb1ModalBody.noHorizontalPadding {
    padding: 24px 0px; }
  .cb1ModalBody.noGap {
    gap: 0px; }
  .cb1ModalBody .cb1LoaderBody {
    padding: 24px 0px; }
  .cb1ModalBody .cbPinBody {
    display: flex;
    flex-direction: column;
    gap: 8px; }
    .cb1ModalBody .cbPinBody .cb1ReceivePinNumberLabel {
      color: #5f5f5f;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 400; }
  .cb1ModalBody .cb1ModalSecondaryTitle {
    display: flex;
    flex-direction: row;
    gap: 4px; }
  .cb1ModalBody .cb1Mobile1Body {
    display: flex;
    flex-direction: column;
    gap: 8px; }
    .cb1ModalBody .cb1Mobile1Body.withGap {
      gap: 24px; }
  .cb1ModalBody .cb1MobileDetailsBox .detailsBox:not(:last-child) {
    border-bottom: 1px solid #ccc; }

.cb1ModalButton {
  align-self: flex-end;
  padding: 16px 24px; }
  .cb1ModalButton.noHorizontalPadding {
    padding: 16px 0px; }

.cb1DetailsNoLink {
  display: flex;
  align-items: center;
  color: #212121; }

.cb1ModalBodySuccess {
  display: flex;
  flex-direction: row;
  gap: 24px;
  padding: 8px 24px 24px 24px; }
  .cb1ModalBodySuccess .deactivationBodyText {
    display: flex;
    gap: 24px; }
  .cb1ModalBodySuccess .successBodyText {
    display: flex;
    gap: 8px;
    flex-direction: column; }
  .cb1ModalBodySuccess.column {
    flex-direction: column; }

.Cb1ButtonPadding {
  padding: 8px 16px 16px 16px; }

.cb1RepresentativeTextPadding {
  margin: 0 !important;
  padding-bottom: 8px; }

.cb1RepresentativeFormGroup {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px; }

.cb1DetailsLink {
  display: flex;
  align-items: center;
  color: #212121; }
  .cb1DetailsLink .marginLeftAuto {
    margin-left: auto; }

.cb1DetailsLinkGroup {
  display: flex;
  align-items: center;
  color: #212121; }

.cb1Active {
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow: visible !important; }

.cb1OfferGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }

.cb1Status {
  display: flex;
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 20px; }
  .cb1Status.inactive {
    background: #e6e6e6;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: unset; }
  .cb1Status.active {
    background: #b8e0ef;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #004b87; }

.cb1Heading5 {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700; }

.cb1OfferCard {
  cursor: pointer;
  width: calc(50% - 4px);
  border-radius: 8px;
  border: 1px solid #e6e6e6;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px; }
  .cb1OfferCard:hover {
    border: 2px solid #666; }
  .cb1OfferCard .cb1OfferCardTitle {
    display: flex;
    flex-direction: row;
    color: #212121;
    align-items: center; }
  .cb1OfferCard .cb1OfferCardDescription {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #212121; }

.cb1OfferGroupTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  padding: 16px 0; }

.sectionTitle.cb1Title {
  display: flex;
  gap: 10px; }

@media only screen and (max-width: 480px) {
  .cb1OfferCard {
    width: 100%; } }

.modalTabs .cb1Tabs {
  display: flex;
  align-items: center;
  justify-self: center;
  padding: 16px 0;
  width: 100%; }
  .modalTabs .cb1Tabs .cb1Tab {
    width: 100%;
    text-align: center; }
    .modalTabs .cb1Tabs .cb1Tab.inactive a {
      color: #5f5f5f !important; }

.modalTitle.cb1PopupTitle {
  padding: 12px 16px; }

@media only screen and (max-width: 767px) {
  .cb1Tooltip1 {
    top: 110px !important; }
  .cb1Tooltip2 {
    left: 5% !important;
    top: -55px !important; }
    .cb1Tooltip2.genericTooltip.connectionsBoxTooltip .arrow {
      display: unset !important; }
    .cb1Tooltip2 .arrow.top.leftCorner {
      left: 10%; }
  .cb1Tooltip3 {
    top: -60px !important;
    left: 5% !important; }
    .cb1Tooltip3.genericTooltip.connectionsBoxTooltip .arrow {
      display: unset !important; }
    .cb1Tooltip3 .arrow.top.rightCorner {
      left: 70%; }
  .cb1Tooltip4 {
    top: 90px !important; }
    .cb1Tooltip4.genericTooltip.connectionsBoxTooltip .arrow {
      display: unset !important; } }

.paymentSteps .paymentStepsContainer.cb1PaymentSteps {
  padding: 16px 8px 58px; }

.cb1DisabledTextColor span {
  color: #5f5f5f; }

.cb1DisabledTextColor input {
  color: #5f5f5f !important; }

@media screen and ((max-width: 480px)) {
  .cbPinInputGroup {
    flex-direction: column; } }

.paymentContent.cb1PaymentContent {
  padding-top: 0 !important; }

.noMargins {
  margin: 0 !important; }

.carouselBox.bigBox.cb1Photo {
  position: relative;
  overflow: hidden; }

.carouselBox.bigBox.cb1Photo .carouselBg.cb1Desktop,
.carouselBox.bigBox.cb1Photo .carouselBg.cb1PhotoMobile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill !important;
  object-position: center; }

.carouselBox.bigBox.cb1Photo .alignButtonBottom {
  position: relative;
  z-index: 5; }

.carouselBox.bigBox.cb1Photo {
  min-height: 290px !important; }

.rightSidebarBox {
  background-color: #ffffff;
  flex-flow: column; }
  .rightSidebarBox .slick-next {
    right: 0;
    opacity: 1;
    line-height: 0;
    width: auto;
    height: auto; }
    .rightSidebarBox .slick-next:before {
      content: url("data:image/svg+xml,%3Csvg width='16' height='24' viewBox='0 0 16 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.959961 3.43205L3.63915 0.800049L15.04 12L3.63915 23.2001L0.959961 20.5681L9.66258 12L0.959961 3.43205Z' fill='%23212121'/%3E%3C/svg%3E%0A");
      color: #212121;
      opacity: 1; }
  .rightSidebarBox .slick-prev {
    display: none !important;
    left: 0;
    opacity: 1;
    line-height: 0;
    width: auto;
    height: auto; }
    .rightSidebarBox .slick-prev.active {
      display: inline-block !important; }
    .rightSidebarBox .slick-prev:before {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='body_1' width='16' height='24'%3E%3Cg transform='matrix(0.17142859 0 0 0.17142859 0.45714313 -0)'%3E%3Cpath d='M88 123.55L71.2551 140L0 70L71.2551 0L88 16.45L33.6086 70L88 123.55z' stroke='none' fill='%23212121' fill-rule='nonzero' /%3E%3C/g%3E%3C/svg%3E");
      color: #212121;
      opacity: 1; }
  .rightSidebarBox .gradientContent {
    padding: 2px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background: #00a5e3;
    border: none; }
  .rightSidebarBox .rightSidebarBoxContent {
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    padding: 12px 16px 16px 16px;
    background-color: #ffffff; }
    .rightSidebarBox .rightSidebarBoxContent .borderedTitle {
      color: #212121;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700;
      position: relative;
      display: flex;
      align-items: center;
      padding-bottom: 8px;
      margin-bottom: 12px;
      border-bottom: 1px solid #e6e6e6; }
      .rightSidebarBox .rightSidebarBoxContent .borderedTitle.withoutBorder {
        border-bottom: none;
        padding-bottom: 0; }
      .rightSidebarBox .rightSidebarBoxContent .borderedTitle.withIcon img {
        margin-right: 10px;
        max-width: 40px;
        width: 100%; }
    .rightSidebarBox .rightSidebarBoxContent .simpleContent {
      padding: 0; }
      .rightSidebarBox .rightSidebarBoxContent .simpleContent p {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        margin: 4px 0; }
    .rightSidebarBox .rightSidebarBoxContent .sliderCols {
      padding: 0 30px; }
      .rightSidebarBox .rightSidebarBoxContent .sliderCols .sliderCol {
        display: flex !important;
        flex-flow: column;
        align-items: center;
        text-align: center;
        border: none;
        outline: none; }
        .rightSidebarBox .rightSidebarBoxContent .sliderCols .sliderCol .sliderColIcon {
          height: 80px;
          width: 100%;
          max-width: 100px;
          position: relative;
          display: flex;
          align-items: center; }
          .rightSidebarBox .rightSidebarBoxContent .sliderCols .sliderCol .sliderColIcon img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain; }
          .rightSidebarBox .rightSidebarBoxContent .sliderCols .sliderCol .sliderColIcon span {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            color: #ffffff;
            padding: 6px 10px;
            background-color: #00a5e3;
            position: absolute;
            right: 0;
            bottom: 2px;
            border-radius: 8px; }
            .rightSidebarBox .rightSidebarBoxContent .sliderCols .sliderCol .sliderColIcon span em {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 600;
              text-transform: uppercase;
              font-style: normal; }
        .rightSidebarBox .rightSidebarBoxContent .sliderCols .sliderCol .sliderColTitle {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          display: block;
          width: 100%;
          margin-top: 6px;
          color: #212121; }

.detailsBox {
  padding: 16px;
  flex-flow: column;
  background-color: #ffffff; }
  .detailsBox .searchFilterContainer {
    margin-top: 12px; }
    .detailsBox .searchFilterContainer .searchFilter {
      border: none; }
  .detailsBox.genericBanner {
    padding: 0;
    position: relative;
    flex-direction: column;
    background-color: #ffffff;
    min-height: 182px; }
    .detailsBox.genericBanner .genericBannerImages {
      display: block;
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
      .detailsBox.genericBanner .genericBannerImages img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top right; }
        .detailsBox.genericBanner .genericBannerImages img.desktop {
          display: block; }
          @media only screen and (max-width: 480px) {
            .detailsBox.genericBanner .genericBannerImages img.desktop {
              display: none; } }
        .detailsBox.genericBanner .genericBannerImages img.mobile {
          display: none; }
          @media only screen and (max-width: 480px) {
            .detailsBox.genericBanner .genericBannerImages img.mobile {
              display: block; } }
    .detailsBox.genericBanner .genericBannerContent {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      padding: 52px 89px 16px 16px;
      width: calc(100% - 138px); }
      @media only screen and (max-width: 480px) {
        .detailsBox.genericBanner .genericBannerContent {
          width: calc(100% - 94px);
          padding: 52px 8px 16px 16px; } }
      .detailsBox.genericBanner .genericBannerContent.withoutLabel {
        padding: 32px 89px 16px 16px; }
        @media only screen and (max-width: 480px) {
          .detailsBox.genericBanner .genericBannerContent.withoutLabel {
            width: calc(100% - 94px);
            padding: 32px 8px 16px 16px; } }
      .detailsBox.genericBanner .genericBannerContent .packageInfo {
        margin-top: 0; }
        .detailsBox.genericBanner .genericBannerContent .packageInfo .packageInfoTitle {
          color: #ffffff;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
        .detailsBox.genericBanner .genericBannerContent .packageInfo .packageInfoContent {
          color: #ffffff;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          margin: 4px 0 0 0; }
          .detailsBox.genericBanner .genericBannerContent .packageInfo .packageInfoContent.fontRegular {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .detailsBox.genericBanner .genericBannerContent .packageInfo .packageInfoContent strong {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600; }
  .detailsBox.withGradient {
    padding: 2px;
    background-color: #00a5e3; }
    .detailsBox.withGradient .detailsContent {
      padding: 16px;
      background-color: #ffffff;
      margin-bottom: 0;
      padding-bottom: 24px;
      border-radius: 16px; }
  .detailsBox.withRightGradient {
    padding: 2px;
    background-color: #00a5e3; }
    .detailsBox.withRightGradient .activeContainer {
      background-color: #ffffff;
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 16px;
      border-radius: 15px; }
  .detailsBox iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100%;
    border: none;
    overflow: hidden;
    display: block;
    border-radius: 16px; }
  .detailsBox .hoverContent {
    padding: 22px 16px;
    background-color: #e6e6e6;
    margin-top: 20px;
    position: relative;
    border-radius: 16px; }
    .detailsBox .hoverContent:before {
      content: '';
      position: absolute;
      right: 50px;
      top: 5px;
      width: 18px;
      height: 18px;
      background-color: #e6e6e6;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      transform-origin: left top;
      -webkit-transform: translateY(-14px) rotate(45deg);
      -moz-transform: translateY(-14px) rotate(45deg);
      transform: translateY(-14px) rotate(45deg);
      border-radius: 4px; }
    .detailsBox .hoverContent .dataRemaining {
      margin-top: 0 !important; }
    .detailsBox .hoverContent .detailsContentLeft {
      align-self: center; }
      .detailsBox .hoverContent .detailsContentLeft .detailsContentText {
        margin-bottom: 0 !important; }
  .detailsBox .detailsContentRight.suspended {
    opacity: 0.5;
    pointer-events: none; }
  .detailsBox.requestsBox {
    padding: 12px 16px; }
  .detailsBox.boxWithTabs {
    padding-bottom: 0;
    overflow: visible; }
    .detailsBox.boxWithTabs.withPadding {
      padding-bottom: 16px; }
      .detailsBox.boxWithTabs.withPadding .detailsContent .detailsContentRight {
        min-width: 25%; }
        @media only screen and (max-width: 767px) {
          .detailsBox.boxWithTabs.withPadding .detailsContent .detailsContentRight {
            min-width: 35%; } }
        .detailsBox.boxWithTabs.withPadding .detailsContent .detailsContentRight .dataRemaining {
          margin-top: 30px; }
      .detailsBox.boxWithTabs.withPadding .detailsContent .detailsContentLeft .detailsContentText {
        margin: 40px 0 8px; }
    .detailsBox.boxWithTabs .detailsContent .detailsContentRight {
      min-width: 22%; }
      @media only screen and (max-width: 767px) {
        .detailsBox.boxWithTabs .detailsContent .detailsContentRight {
          min-width: 35%; } }
      .detailsBox.boxWithTabs .detailsContent .detailsContentRight .dataRemaining {
        margin-top: 30px; }
    .detailsBox.boxWithTabs .detailsContent .detailsContentLeft .detailsContentText {
      margin-top: 56px; }
  .detailsBox.boxWithAlert .detailsContent .detailsContentRight {
    min-width: 25%; }
    @media only screen and (max-width: 767px) {
      .detailsBox.boxWithAlert .detailsContent .detailsContentRight {
        min-width: 35%; } }
  .detailsBox.boxWithOffer .boxOfferContent {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff; }
    .detailsBox.boxWithOffer .boxOfferContent .boxPrice {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 700;
      height: 100%;
      color: #0e8103; }
    .detailsBox.boxWithOffer .boxOfferContent img {
      height: 16px;
      width: 16px; }
    .detailsBox.boxWithOffer .boxOfferContent .boxPrice.warning {
      display: flex;
      align-items: center; }
      .detailsBox.boxWithOffer .boxOfferContent .boxPrice.warning img {
        margin: 0 4px;
        width: 20px;
        height: 20px; }
    .detailsBox.boxWithOffer .boxOfferContent .boxPrice.expiring {
      color: #eabf68; }
      .detailsBox.boxWithOffer .boxOfferContent .boxPrice.expiring img {
        fill: #eabf68; }
    .detailsBox.boxWithOffer .boxOfferContent .boxPrice.barrier {
      color: #df6938; }
      .detailsBox.boxWithOffer .boxOfferContent .boxPrice.barrier img {
        fill: #df6938; }
    .detailsBox.boxWithOffer .boxOfferContent .button {
      min-width: 26px;
      border-radius: 100%;
      background: #ffffff;
      padding: 4px 8px; }
  .detailsBox .detailsIconWrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 480px) {
      .detailsBox .detailsIconWrapper {
        max-width: 260px; } }
    .detailsBox .detailsIconWrapper img {
      height: 24px; }
      @media only screen and (max-width: 480px) {
        .detailsBox .detailsIconWrapper img {
          display: none; } }
  .detailsBox .detailsIconWithWrapper {
    padding: 4px 16px;
    background-color: #e6e6e6;
    color: #212121;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    align-items: center;
    -webkit-border-radius: 14px 0 16px 0;
    -moz-border-radius: 14px 0 16px 0;
    border-radius: 14px 0 16px 0;
    margin-right: 8px;
    min-width: 80px; }
    .detailsBox .detailsIconWithWrapper.withoutIcon {
      padding: 8px 16px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      height: 32px; }
    .detailsBox .detailsIconWithWrapper img {
      height: 24px;
      margin-right: 8px; }
      @media only screen and (max-width: 480px) {
        .detailsBox .detailsIconWithWrapper img {
          display: none; } }
  .detailsBox .detailsIcon {
    padding: 4px 16px;
    background-color: #e6e6e6;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    color: #212121;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    align-items: center;
    min-width: 80px;
    border-radius: 15px 0 15px 0; }
    .detailsBox .detailsIcon.largeAccountsSpan {
      width: 100%;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      z-index: 1; }
    .detailsBox .detailsIcon.withoutIcon {
      padding: 8px 16px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      height: 32px; }
    .detailsBox .detailsIcon img {
      height: 24px;
      margin-right: 8px; }
  .detailsBox .detailsContent {
    display: flex;
    flex-flow: row;
    margin-bottom: 8px;
    margin-top: 10px; }
    .detailsBox .detailsContent.d4uDetailsContent {
      margin-bottom: 0px; }
    .detailsBox .detailsContent.withPadding {
      padding: 16px; }
    .detailsBox .detailsContent.routerSpeed {
      height: 170px;
      justify-content: space-evenly; }
      .detailsBox .detailsContent.routerSpeed .detailsContentRight .dataRemaining {
        margin-bottom: 0;
        min-width: 100px; }
    .detailsBox .detailsContent .switchDate {
      display: block;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      position: relative;
      top: 16px; }
      .detailsBox .detailsContent .switchDate.withAlert {
        display: inline-flex;
        align-items: flex-start;
        color: #212121;
        background-color: #f4f8fb;
        border: 1px solid #2775b2;
        padding: 10px 16px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        border-radius: 16px; }
        .detailsBox .detailsContent .switchDate.withAlert.hidden {
          display: none; }
        .detailsBox .detailsContent .switchDate.withAlert img {
          margin-right: 6px; }
    .detailsBox .detailsContent .discountBox {
      display: block;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      position: relative;
      margin-top: 10px; }
      .detailsBox .detailsContent .discountBox.hidden {
        display: none !important; }
      .detailsBox .detailsContent .discountBox.withAlert {
        display: inline-flex;
        align-items: flex-start;
        color: #212121;
        background-color: #f4f8fb;
        border: 1px solid #2775b2;
        padding: 10px 16px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        border-radius: 16px; }
        .detailsBox .detailsContent .discountBox.withAlert.hidden {
          display: none; }
        .detailsBox .detailsContent .discountBox.withAlert img {
          margin-right: 6px; }
    .detailsBox .detailsContent.fullContent {
      margin-top: 24px;
      display: flex;
      flex-flow: column; }
      .detailsBox .detailsContent.fullContent .detailsContentPlain {
        display: flex;
        flex-flow: column;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
        .detailsBox .detailsContent.fullContent .detailsContentPlain.withBorder {
          padding-bottom: 16px;
          border-bottom: 1px solid #4d4d4d; }
        .detailsBox .detailsContent.fullContent .detailsContentPlain span {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
    .detailsBox .detailsContent.multipleDetails {
      flex-flow: column; }
      .detailsBox .detailsContent.multipleDetails .multipleDetailsCol {
        display: flex;
        flex-flow: row; }
        .detailsBox .detailsContent.multipleDetails .multipleDetailsCol.wrap {
          flex-wrap: wrap; }
        .detailsBox .detailsContent.multipleDetails .multipleDetailsCol.withBorder {
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px solid rgba(33, 33, 33, 0.1); }
        .detailsBox .detailsContent.multipleDetails .multipleDetailsCol.withBottomBorder {
          margin-bottom: 8px;
          padding-bottom: 8px;
          border-bottom: 1px solid rgba(33, 33, 33, 0.1); }
        .detailsBox .detailsContent.multipleDetails .multipleDetailsCol.withSimpleText {
          font-size: 18px;
          line-height: 20px; }
        .detailsBox .detailsContent.multipleDetails .multipleDetailsCol.withButton {
          margin-top: 16px; }
        .detailsBox .detailsContent.multipleDetails .multipleDetailsCol .detailsContentRight .dataRemaining {
          margin-bottom: 0; }
    .detailsBox .detailsContent.tabbedContent {
      display: none; }
      .detailsBox .detailsContent.tabbedContent.active {
        display: flex; }
    .detailsBox .detailsContent .detailsContentRight {
      text-align: center;
      position: relative; }
      .detailsBox .detailsContent .detailsContentRight.carouselDetailsContentRight {
        display: flex;
        align-items: center; }
      .detailsBox .detailsContent .detailsContentRight.withoutTopMarginText {
        margin-top: 0 !important; }
      .detailsBox .detailsContent .detailsContentRight.largeAccountsShop {
        margin-right: 94px; }
        @media only screen and (max-width: 767px) {
          .detailsBox .detailsContent .detailsContentRight.largeAccountsShop {
            margin-right: 0px; } }
      .detailsBox .detailsContent .detailsContentRight .dataRemaining {
        display: flex;
        flex-flow: column;
        position: relative;
        margin: 24px 0 10px;
        height: 94px; }
        .detailsBox .detailsContent .detailsContentRight .dataRemaining .donut {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          align-items: center;
          width: 100%;
          -webkit-transform: rotate(125deg);
          -moz-transform: rotate(125deg);
          transform: rotate(125deg); }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .donut .donutBackground {
            transform-origin: center;
            stroke: #e6e6e6; }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .donut .donutColor {
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
            color: #00a5e3 !important;
            stroke: #00a5e3 !important;
            transform-origin: center; }
        .detailsBox .detailsContent .detailsContentRight .dataRemaining .donutMeta {
          position: absolute;
          display: flex;
          align-self: center;
          align-items: center; }
        .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 32px;
          line-height: 36px;
          font-weight: 700;
          margin-top: 30px;
          margin-bottom: 8px; }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.withImage {
            margin-top: 28px; }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.smallText {
            font-size: 26px; }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.unlimmited {
            font-family: 'PeridotPE-ExtraBlack', sans-serif;
            font-size: 10px;
            line-height: 12px;
            font-weight: 800;
            margin-top: 20px;
            margin-bottom: 8px; }
            .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.unlimmited i {
              display: block;
              text-align: center;
              font-size: 24px;
              margin-inline: auto;
              content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_3163_11820' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'%3E%3Crect width='32' height='32' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_3163_11820)'%3E%3Cpath d='M7.44033 23.3475C5.37723 23.3475 3.6214 22.6232 2.17284 21.1746C0.72428 19.7261 0 17.9702 0 15.9071C0 13.844 0.72428 12.0882 2.17284 10.6396C3.6214 9.19108 5.37723 8.4668 7.44033 8.4668C8.27435 8.4668 9.07545 8.61473 9.84362 8.91058C10.6118 9.20732 11.3032 9.63003 11.9177 10.1787L14.0247 12.1211L11.786 14.1293L9.87654 12.4174C9.54733 12.1321 9.17421 11.9069 8.7572 11.7419C8.34019 11.5777 7.90124 11.4956 7.44033 11.4956C6.21125 11.4956 5.16872 11.9236 4.31276 12.7796C3.45679 13.6355 3.02881 14.678 3.02881 15.9071C3.02881 17.1362 3.45679 18.1787 4.31276 19.0347C5.16872 19.8907 6.21125 20.3186 7.44033 20.3186C7.90124 20.3186 8.34019 20.2361 8.7572 20.0711C9.17421 19.9069 9.54733 19.6822 9.87654 19.3968L20.0823 10.1787C20.6968 9.63003 21.3882 9.20732 22.1564 8.91058C22.9246 8.61473 23.7257 8.4668 24.5597 8.4668C26.6228 8.4668 28.3786 9.19108 29.8272 10.6396C31.2757 12.0882 32 13.844 32 15.9071C32 17.9702 31.2757 19.7261 29.8272 21.1746C28.3786 22.6232 26.6228 23.3475 24.5597 23.3475C23.7257 23.3475 22.9246 23.1991 22.1564 22.9024C21.3882 22.6065 20.6968 22.1842 20.0823 21.6355L17.9753 19.6931L20.214 17.6849L22.1235 19.3968C22.4527 19.6822 22.8258 19.9069 23.2428 20.0711C23.6598 20.2361 24.0988 20.3186 24.5597 20.3186C25.7888 20.3186 26.8313 19.8907 27.6872 19.0347C28.5432 18.1787 28.9712 17.1362 28.9712 15.9071C28.9712 14.678 28.5432 13.6355 27.6872 12.7796C26.8313 11.9236 25.7888 11.4956 24.5597 11.4956C24.0988 11.4956 23.6598 11.5777 23.2428 11.7419C22.8258 11.9069 22.4527 12.1321 22.1235 12.4174L11.9177 21.6355C11.3032 22.1842 10.6118 22.6065 9.84362 22.9024C9.07545 23.1991 8.27435 23.3475 7.44033 23.3475Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A"); }
              .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.unlimmited i.noText {
                margin-bottom: 8px;
                margin-top: 12px; }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.withAlert {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 24px;
            line-height: 28px;
            font-weight: 700;
            margin-top: 24px;
            margin-bottom: 8px; }
            .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.withAlert span {
              font-family: 'PeridotPE-ExtraBlack', sans-serif;
              font-size: 10px;
              line-height: 12px;
              font-weight: 800;
              width: 100%;
              display: block;
              text-align: center;
              margin-bottom: 4px; }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataRemainingNumber.withSpeed {
            margin-top: 36px;
            margin-bottom: 10px;
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 24px;
            line-height: 28px;
            font-weight: 700; }
        .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataSymbolContainer {
          font-family: none; }
          .detailsBox .detailsContent .detailsContentRight .dataRemaining .dataSymbolContainer .dataSymbol {
            display: inline-block;
            margin: auto;
            width: auto;
            font-family: 'PeridotPE-ExtraBlack', sans-serif;
            font-size: 10px;
            line-height: 12px;
            font-weight: 800;
            background-color: #e6e6e6;
            padding: 4px;
            border-radius: 4px;
            position: relative;
            z-index: 1; }
      .detailsBox .detailsContent .detailsContentRight .toPay {
        width: 100%;
        display: block;
        position: relative;
        margin-top: 26px;
        margin-bottom: -6px;
        padding-left: 20px;
        white-space: nowrap; }
        @media only screen and (max-width: 767px) {
          .detailsBox .detailsContent .detailsContentRight .toPay {
            margin-top: 46px;
            padding-left: 0; } }
        .detailsBox .detailsContent .detailsContentRight .toPay.marginBottomExpiredHidden {
          margin-bottom: 20px; }
        .detailsBox .detailsContent .detailsContentRight .toPay.largeAccountsShop {
          margin-top: 56px; }
        .detailsBox .detailsContent .detailsContentRight .toPay.withOldPrice {
          margin-top: 50px; }
          .detailsBox .detailsContent .detailsContentRight .toPay.withOldPrice .oldPrice {
            position: absolute;
            top: -24px;
            right: 0;
            font-size: 14px;
            line-height: 17px; }
        .detailsBox .detailsContent .detailsContentRight .toPay .euros {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 32px;
          line-height: 36px;
          font-weight: 700;
          letter-spacing: -2px;
          position: relative; }
          .detailsBox .detailsContent .detailsContentRight .toPay .euros.euros--small {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700; }
            .detailsBox .detailsContent .detailsContentRight .toPay .euros.euros--small .imgEuro {
              display: none; }
          @media only screen and (max-width: 767px) {
            .detailsBox .detailsContent .detailsContentRight .toPay .euros {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 32px;
              line-height: 36px;
              font-weight: 700; }
              .detailsBox .detailsContent .detailsContentRight .toPay .euros--small {
                font-family: 'BTCosmo-Bold', sans-serif;
                font-size: 24px;
                line-height: 28px;
                font-weight: 700; } }
          .detailsBox .detailsContent .detailsContentRight .toPay .euros .imgEuro {
            display: none; }
        .detailsBox .detailsContent .detailsContentRight .toPay .cents {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          position: relative;
          bottom: 2px; }
          .detailsBox .detailsContent .detailsContentRight .toPay .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%; }
            .detailsBox .detailsContent .detailsContentRight .toPay .cents .imgTooltip.top {
              top: -27px;
              left: unset;
              right: 0; }
        .detailsBox .detailsContent .detailsContentRight .toPay .percentage {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          position: relative;
          padding-left: 2px;
          bottom: -4px; }
      .detailsBox .detailsContent .detailsContentRight .paymentDeadline {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        width: 100%;
        display: block;
        margin: 6px auto;
        max-width: 94px; }
        .detailsBox .detailsContent .detailsContentRight .paymentDeadline.hidden {
          display: none; }
      .detailsBox .detailsContent .detailsContentRight .discountAbsolute {
        display: block;
        text-align: center;
        position: absolute;
        bottom: 2px;
        left: 50%;
        width: 104px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        -webkit-transform: translate(-50%, 100%);
        -moz-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%); }
      .detailsBox .detailsContent .detailsContentRight .visitLink {
        margin: 6px 0;
        position: relative;
        z-index: 4; }
        .detailsBox .detailsContent .detailsContentRight .visitLink.withLabelOnTop {
          margin-top: 16px; }
        .detailsBox .detailsContent .detailsContentRight .visitLink.withTextOnTop {
          margin-top: 8px; }
    .detailsBox .detailsContent .detailsContentLeft {
      flex: 2; }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .detailsBox .detailsContent .detailsContentLeft {
          padding-right: 10%; } }
      @media only screen and (max-width: 767px) {
        .detailsBox .detailsContent .detailsContentLeft {
          padding-right: 4%; } }
      @media only screen and (max-width: 480px) {
        .detailsBox .detailsContent .detailsContentLeft.withBorder {
          padding-right: 0; } }
      .detailsBox .detailsContent .detailsContentLeft.withBorder .noPackages {
        margin-top: 16px;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #4d4d4d;
        display: flex;
        align-items: center; }
        @media only screen and (max-width: 480px) {
          .detailsBox .detailsContent .detailsContentLeft.withBorder .noPackages {
            flex-direction: column;
            align-items: flex-start; } }
        .detailsBox .detailsContent .detailsContentLeft.withBorder .noPackages:last-child {
          margin-bottom: 8px;
          padding-bottom: 0;
          border: none; }
        .detailsBox .detailsContent .detailsContentLeft.withBorder .noPackages span {
          font-size: 16px;
          line-height: 18px;
          margin-right: 12px;
          display: inline-flex; }
        .detailsBox .detailsContent .detailsContentLeft.withBorder .noPackages .button {
          flex: 0 0 auto;
          width: 100%;
          max-width: 165px;
          white-space: nowrap;
          margin-left: auto; }
          @media only screen and (max-width: 480px) {
            .detailsBox .detailsContent .detailsContentLeft.withBorder .noPackages .button {
              margin-left: 0;
              margin-top: 12px; } }
      .detailsBox .detailsContent .detailsContentLeft .detailsContentText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 18px;
        line-height: 28px;
        font-weight: 400;
        display: block;
        width: 100%;
        margin: 40px 0 16px; }
        @media only screen and (max-width: 767px) {
          .detailsBox .detailsContent .detailsContentLeft .detailsContentText {
            font-size: 16px;
            line-height: 18px; } }
        .detailsBox .detailsContent .detailsContentLeft .detailsContentText.boldText {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700; }
        .detailsBox .detailsContent .detailsContentLeft .detailsContentText a {
          color: #212121;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700;
          display: inline-block; }
        .detailsBox .detailsContent .detailsContentLeft .detailsContentText.withSubtext {
          margin-bottom: 2px;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; }
  .detailsBox .detailsBottom {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #767676;
    margin-top: -12px;
    margin-bottom: 16px;
    display: block;
    height: 32px;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    word-wrap: break-all; }
    .detailsBox .detailsBottom.hidden {
      display: none; }
    @supports (-webkit-line-clamp: 2) {
      .detailsBox .detailsBottom {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; } }
    @media only screen and (max-width: 480px) {
      .detailsBox .detailsBottom {
        -webkit-line-clamp: 4;
        height: 64px; } }
    .detailsBox .detailsBottom.reverse {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600; }
      .detailsBox .detailsBottom.reverse span {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
        .detailsBox .detailsBottom.reverse span.connectionsTotal {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600; }
    .detailsBox .detailsBottom.margined {
      margin: 40px 0 0; }
    .detailsBox .detailsBottom.withTooltip {
      padding-right: 40px; }
    .detailsBox .detailsBottom span {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600; }
    .detailsBox .detailsBottom .imgTooltip {
      position: absolute;
      top: 50%;
      right: 42px;
      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%; }
      @media only screen and (max-width: 480px) {
        .detailsBox .detailsBottom .imgTooltip {
          top: 70%; } }
  .detailsBox .boxTabs {
    display: flex;
    align-items: stretch;
    margin-top: 24px;
    width: calc(100% + 32px);
    margin-left: -16px; }
    .detailsBox .boxTabs.hidden {
      display: none; }
    .detailsBox .boxTabs li {
      flex: 1;
      text-align: center;
      position: relative;
      background-color: #e6e6e6; }
      .detailsBox .boxTabs li:first-child {
        border-bottom-left-radius: 16px; }
      .detailsBox .boxTabs li:last-child {
        border-bottom-right-radius: 16px; }
      .detailsBox .boxTabs li:first-child a {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px; }
      .detailsBox .boxTabs li:nth-child(2) a {
        border-radius: 0; }
      .detailsBox .boxTabs li:nth-child(2).active a {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px; }
      .detailsBox .boxTabs li:last-child {
        border-right: none; }
        .detailsBox .boxTabs li:last-child a {
          border-bottom-right-radius: 16px;
          border-bottom-left-radius: 0; }
        .detailsBox .boxTabs li:last-child.active a {
          border-bottom-left-radius: 16px; }
        .detailsBox .boxTabs li:last-child:after {
          display: none; }
      .detailsBox .boxTabs li.active:after {
        display: none; }
      .detailsBox .boxTabs li.active a {
        color: #212121;
        background: #ffffff;
        border-color: transparent; }
      .detailsBox .boxTabs li.active .tabIcon {
        fill: #212121;
        background-color: white; }
      .detailsBox .boxTabs li a {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        color: #000000;
        background-color: #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px;
        white-space: nowrap;
        -webkit-transition: none;
        -moz-transition: none;
        transition: none; }
        @media only screen and (max-width: 767px) {
          .detailsBox .boxTabs li a {
            line-height: 20px; } }

.donutText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  display: block; }

.donutTextMultiple {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  display: block;
  margin-top: 4px;
  max-width: 94px; }
  .donutTextMultiple img {
    margin-top: 4px;
    height: 24px; }

.donutTextContainer {
  width: 100%;
  display: flex;
  justify-content: center; }

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

.businessOneSpan {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  background-color: #ffffff;
  color: #00a5e3;
  padding: 8px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  border: 1px solid #e6e6e6; }

.withErrorState,
.withGift,
.withCountdown {
  position: relative; }
  .withErrorState .box,
  .withGift .box,
  .withCountdown .box {
    z-index: 2; }

.withErrorState {
  margin-top: 16px;
  display: flex;
  flex-direction: column-reverse; }
  .withErrorState .detailsBox {
    margin: 0;
    overflow: visible; }

.errorState {
  display: flex;
  align-items: center;
  background-color: #eabf68;
  position: relative;
  z-index: 0;
  margin-bottom: -16px;
  padding: 8px 16px 24px 16px;
  border-radius: 16px 16px 0 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600; }
  .errorState.withRedBackground {
    color: #ffffff;
    background-color: #df6938;
    font-size: 16px;
    line-height: 16px; }
  .errorState.withBlueBackground {
    background-color: #212121;
    color: #ffffff;
    padding-left: 16px; }
    .errorState.withBlueBackground.active {
      background-color: #9d9d9c;
      padding: 8px 16px 24px 16px; }
    .errorState.withBlueBackground.inactive {
      padding: 2px;
      background: #00a5e3; }
      .errorState.withBlueBackground.inactive span {
        padding: 8px 16px;
        background-color: #212121;
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 0 0 16px 16px; }
  @media only screen and (max-width: 480px) {
    .errorState span {
      font-size: 14px;
      padding-right: 24px; } }
  .errorState .refresh {
    margin-left: auto;
    cursor: pointer; }

.giftBoxPlain {
  display: flex;
  align-items: center;
  background-color: #00a5e3;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  margin-top: -16px;
  padding: 24px 8px 8px;
  overflow: hidden;
  border-radius: 0 0 16px 16px; }
  .giftBoxPlain span {
    color: #ffffff;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    margin-left: 4px; }
    @media only screen and (max-width: 767px) {
      .giftBoxPlain span {
        line-height: 16px; } }
  .giftBoxPlain .giftIcon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    object-position: center;
    padding: 2px; }
    @media only screen and (max-width: 767px) {
      .giftBoxPlain .giftIcon {
        position: relative;
        top: -4px; } }

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0; }
  100% {
    background-position: 468px 0; } }

.animated-background, .loadingBox.packageListItem .packageListImage, .loadingBox.packageListItem .packageListContent .emptyLineShop, .loadingBox.packageListItem .packageListContent .emptySmallLineShop, .loadingBox .emptyButtonFixed, .loadingBox .emptyBox, .loadingBox .emptyLine, .loadingBox .emptyLineSmall, .loadingBox .emptyLine90, .loadingBox .emptyLineXLarge, .loadingBox .emptyLineMedium, .loadingBox .emptyLineLarge, .renewOffers .renewOffersRow .renewOffer.empty .detailsContentLeft .packageInfo .emptyLarge, .renewOffers .renewOffersRow .renewOffer.empty .detailsContentLeft .packageInfo .emptySmall, .renewOffers .renewOffersRow .renewOffer.empty .detailsContentRight .emptyImage, .renewOffers .renewOffersRow .renewOffer.empty .giftContent .fixedGift .emptyLine, .renewOffers .renewOffersRow .renewOffer.empty .giftContent .fixedGift .emptyLineLarge, .renewOffers .renewOffersRow .renewOffer.empty .giftContent .giftsRow .emptyLine, .renewOffers .renewOffersRow .renewOffer.empty .giftContent .giftsRow .gifts .emptyBox, .renewOffers .renewOffersRow .renewOffer.empty .emptyButton, .renewOffers .renewOffersRow .renewOffer.empty .emptyDevice, .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft.loading .loadingLine, .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight.loading .loadingLine, .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails.loading .loadingLine, .emptyOfferBox .leftBox .leftBoxContent .leftBoxImage, .emptyOfferBox .leftBox .leftBoxContent .leftBoxButton, .emptyOfferBox .leftBox .leftBoxContent .leftBoxLine, .emptyOfferBox .leftBox .leftBoxContent .leftBoxLineSmall, .largeAccountsShop-packageListImage, .largeAccountsShop-emptyLineShop, .largeAccountsShop-emptySmallLineShop {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f2f2f3;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative; }

.animated-background-white, .loadingBox.greyBg .emptyBox, .loadingBox.greyBg .emptyLine, .loadingBox.greyBg .emptyLine90, .emptyOfferBox .rightBox .rightBoxContent .rightBoxLine, .emptyOfferBox .rightBox .rightBoxContent .rightBoxLineSmall, .emptyOfferBox .rightBox .rightBoxContent .rightBoxButton {
  animation-duration: 1.25s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #ffffff;
  background: linear-gradient(to right, #ffffff 8%, #fbfbfb 18%, #ffffff 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative; }

.loadingBox .detailsContent {
  margin-bottom: 0;
  align-items: center; }
  .loadingBox .detailsContent.withBorder {
    border-bottom: 2px solid rgba(33, 33, 33, 0.1); }
  .loadingBox .detailsContent.smallMarginTop {
    margin-top: -20px; }
  .loadingBox .detailsContent .detailsContentLeft {
    padding-right: 14%; }
    .loadingBox .detailsContent .detailsContentLeft.withFixedMargin {
      margin-top: 10px; }
  .loadingBox .detailsContent .detailsContentRight.withRelativeMargin {
    position: relative;
    top: -14px; }

.loadingBox.greyBg {
  background-color: #f2f2f3; }
  .loadingBox.greyBg .emptyBox {
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    display: flex;
    border-radius: 16px; }
  .loadingBox.greyBg .emptyLine {
    width: 100%;
    height: 12px;
    background-color: #ffffff;
    display: flex;
    margin: 8px 0; }
  .loadingBox.greyBg .emptyLine90 {
    width: 90%;
    height: 12px;
    background-color: #ffffff;
    display: flex;
    margin: 8px 0; }

.loadingBox.packageListItem {
  border: 1px solid #e6e6e6;
  width: 148px;
  min-height: 215px;
  display: flex;
  flex-flow: column;
  background-color: #ffffff;
  overflow: hidden;
  padding-bottom: 1px;
  margin: 0 6px;
  flex: 0 0 auto;
  border-radius: 16px; }
  .loadingBox.packageListItem:first-child {
    margin-left: 0; }
  .loadingBox.packageListItem:last-child {
    margin-right: 0; }
  .loadingBox.packageListItem .packageListImage {
    width: 100%;
    height: 98px;
    background-color: #f2f2f3;
    display: flex;
    align-items: center; }
    .loadingBox.packageListItem .packageListImage img {
      margin: auto;
      width: 100%;
      height: 100%;
      object-fit: contain; }
  .loadingBox.packageListItem .packageListContent {
    height: 96px !important;
    display: flex;
    flex-flow: column;
    padding: 24px !important;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }
    .loadingBox.packageListItem .packageListContent .emptyLineShop {
      width: 100%;
      height: 8px;
      background-color: #f2f2f3;
      display: flex;
      margin: 4px 0; }
    .loadingBox.packageListItem .packageListContent .emptySmallLineShop {
      width: 50%;
      height: 8px;
      background-color: #f2f2f3;
      display: flex;
      margin: 4px 0; }

.loadingBox .emptyButtonFixed {
  width: 120px;
  height: 24px;
  background-color: #f2f2f3;
  display: flex;
  margin: 26px 0;
  border-radius: 4px; }

.loadingBox .emptyBox {
  width: 80px;
  height: 80px;
  background-color: #f2f2f3;
  display: flex;
  border-radius: 16px; }

.loadingBox .emptyLine {
  width: 100%;
  height: 12px;
  background-color: #f2f2f3;
  display: flex;
  margin: 8px 0; }

.loadingBox .emptyLineSmall {
  width: 25%;
  height: 12px;
  background-color: #f2f2f3;
  display: flex;
  margin: 8px 0; }

.loadingBox .emptyLine90 {
  width: 90%;
  height: 12px;
  background-color: #f2f2f3;
  display: flex;
  margin: 8px 0; }

.loadingBox .emptyLineXLarge {
  width: 183px;
  height: 16px;
  background-color: #f2f2f3;
  display: flex;
  margin: 12px 0; }

.loadingBox .emptyLineMedium {
  width: 127px;
  height: 12px;
  background-color: #f2f2f3;
  display: flex;
  margin: 12px 0; }

.loadingBox .emptyLineLarge {
  width: 140px;
  height: 12px;
  background-color: #f2f2f3;
  display: flex;
  margin: 12px 0; }

.dataRemaining.withInfoBox {
  position: relative; }
  .dataRemaining.withInfoBox .tooltip {
    position: absolute;
    bottom: -6px;
    right: 20px;
    display: flex;
    margin: 0;
    width: 16px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    background-color: #00a5e3;
    color: #ffffff;
    padding: 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 100%; }

.recurringInfo {
  display: flex;
  align-items: center;
  margin-top: 10px; }
  .recurringInfo .recurringInfoIcon {
    width: 16px;
    height: 16px;
    margin-right: 6px; }
  .recurringInfo .recurringInfoText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
    .recurringInfo .recurringInfoText.italic {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }

.recurringPaymentPromptBoxIcon {
  align-self: center;
  height: 47px;
  width: 47px; }

.simpleBox {
  margin-top: 16px; }
  .simpleBox.withTopBorder {
    padding-top: 16px;
    border-top: 1px solid #f2f2f3; }
  .simpleBox span.plainText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

.detailsContentWithTable {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 8px; }
  .detailsContentWithTable .detailsContentText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    display: block;
    width: 100%;
    margin-top: 32px; }

.detailsContentTableContainer {
  margin: 8px 16px;
  margin-bottom: 16px; }

.detailsContentTable {
  background-color: #f2f2f3;
  padding: 8px 16px;
  border-radius: 8px; }

.detailsTableContentRow {
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f3; }
  .detailsTableContentRow:last-child {
    border-bottom: none; }

.detailsTableContentRowMain {
  display: flex;
  align-items: center; }
  .detailsTableContentRowMain > * {
    margin-right: 8px; }

.detailsContentTableImage {
  width: 24px;
  height: auto; }

.detailsTablePrice {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin-left: auto;
  margin-right: 0; }

.detailsTableInfoIcon {
  color: #ffffff;
  width: 16px;
  height: 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #00a5e3;
  cursor: pointer;
  position: relative; }
  .detailsTableInfoIcon.white {
    border: 1px solid #ffffff;
    color: #ffffff; }
  .detailsTableInfoIcon.withTooltip {
    padding-top: 2px;
    margin-left: 6px; }
    @media only screen and (max-width: 480px) {
      .detailsTableInfoIcon.withTooltip {
        display: none !important; } }
  .detailsTableInfoIcon:hover .tableTooltip {
    display: block; }

.tableTooltip {
  position: absolute;
  top: 30px;
  left: unset;
  right: -130px;
  min-width: 274px;
  display: none;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }
  .tableTooltip .highlight {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600; }

.detailsTableBottom {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 4px; }

.detailsTableContentRowBreakdown li {
  margin-top: 4px;
  margin-left: 32px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121;
  opacity: 0.6;
  display: flex; }

.detailsTableContentRowBreakdown li.expired {
  color: #df6938;
  opacity: 1; }

.detailsTableContentRowBreakdown li.almostExpired {
  color: #eabf68;
  opacity: 1; }

.detailsTableContentRowBreakdownPrice {
  display: block;
  margin-left: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.expired {
  color: #df6938; }

.almostExpired {
  color: #eabf68; }

.detailsContent.withWarning {
  flex-flow: row wrap; }

.detailsContentWarningBottom {
  margin-top: 40px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  background-color: #fdf7f5;
  border: 1px solid #df6938;
  color: #212121;
  width: 100%;
  border-radius: 16px;
  padding: 8px 16px; }

.detailsContentWarningTop {
  margin-top: 28px;
  margin-bottom: -22px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  background-color: #fdf7f5;
  border: 1px solid #df6938;
  color: #212121;
  width: 100%;
  border-radius: 16px;
  padding: 8px 16px; }

.detailsContent.withBanner {
  flex-flow: row wrap; }
  .detailsContent.withBanner .buttonWithbanner {
    flex: 1 1 100%; }

.buttonOuter.buttonWithBanner {
  display: flex;
  flex-flow: column;
  width: 100%; }
  .buttonOuter.buttonWithBanner .button {
    margin-top: 8px;
    width: fit-content; }
  .buttonOuter.buttonWithBanner .buttonBanner {
    margin-top: 0px; }

.detailsContent.contextualOffer .detailsContentLeft {
  padding-right: 0;
  display: block; }
  .detailsContent.contextualOffer .detailsContentLeft .contextualOfferImageWrapper {
    background: #00a5e3;
    display: flex;
    padding-right: 1px;
    width: 278px; }
    @media only screen and (max-width: 480px) {
      .detailsContent.contextualOffer .detailsContentLeft .contextualOfferImageWrapper {
        background: #00a5e3;
        padding-right: 0;
        padding-bottom: 1px; } }
    .detailsContent.contextualOffer .detailsContentLeft .contextualOfferImageWrapper img {
      width: 100%;
      max-width: 278px; }

.detailsContent.contextualOffer .detailsContentRight {
  text-align: left;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 16px; }
  .detailsContent.contextualOffer .detailsContentRight .detailsContentText {
    display: block;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 4px; }

@media only screen and (max-width: 480px) {
  .detailsContent.contextualOffer {
    flex-flow: column; } }

.detailsBox.noPadding .buttonOuter.rightAligned.bottomRightMargin {
  margin-bottom: 16px;
  margin-right: 16px; }

.detailsContentSubtext {
  display: block;
  margin-bottom: 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.detailsContent.withoutIcon .detailsContentText.withSubtext {
  margin-top: 20px; }

.offerImage {
  margin-left: 16px; }

.highCharges {
  display: block;
  max-width: 160px;
  font-size: 12px;
  font-style: italic; }

.barrierListItem {
  color: #df6938; }

.searchFilterContainer {
  position: relative; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .searchFilterContainer {
      margin-bottom: 16px; } }
  @media only screen and (max-width: 767px) {
    .searchFilterContainer {
      margin-bottom: 12px; } }
  .searchFilterContainer .searchFilter {
    border-top: 2px solid #f2f2f3;
    padding: 16px;
    background-color: #ffffff;
    display: flex;
    flex-flow: row;
    border-radius: 0 0 16px 16px; }
    .searchFilterContainer .searchFilter .searchFilterContent {
      position: relative;
      display: flex;
      align-items: center;
      flex-flow: column;
      flex: 1; }
      .searchFilterContainer .searchFilter .searchFilterContent span {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        display: inline-block;
        margin-right: 0;
        margin-bottom: 4px;
        width: 100%; }
        .searchFilterContainer .searchFilter .searchFilterContent span.smallText {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          margin-bottom: 2px; }
      .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer {
        position: relative;
        width: 100%; }
        .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer .searchFilterInput {
          box-sizing: border-box;
          width: 100%;
          padding: 8px 40px;
          color: #212121;
          display: inline-block;
          background-color: transparent;
          border: 1px solid #212121;
          border-radius: 16px; }
          .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer .searchFilterInput.mediumText {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600; }
        .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer ::-webkit-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer :-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer ::-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer :-ms-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer i {
          position: absolute;
          right: 2px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          transform: translateY(-50%);
          z-index: 1;
          pointer-events: none;
          line-height: 0; }
          .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer i.icon-lens {
            left: 8px;
            font-size: 24px; }
          .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer i.closeIcon {
            right: -4px;
            cursor: pointer;
            pointer-events: all;
            color: #212121 !important; }
        .searchFilterContainer .searchFilter .searchFilterContent .searchFilterInputContainer .visitLink {
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          transform: translateY(-50%);
          right: 32px;
          display: inline-block;
          width: auto; }
  .searchFilterContainer .searchFilterResultsContainer {
    padding: 16px 24px;
    background-color: #ffffff;
    position: absolute;
    width: calc(100% - 32px);
    bottom: 14px;
    left: 16px;
    z-index: 4;
    display: none;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    border-radius: 0 0 16px 16px; }
    .searchFilterContainer .searchFilterResultsContainer .searchFilterResults {
      display: none;
      margin-bottom: 24px; }
      .searchFilterContainer .searchFilterResultsContainer .searchFilterResults a {
        width: 100%;
        display: block;
        color: #212121;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        padding: 8px 0; }
        .searchFilterContainer .searchFilterResultsContainer .searchFilterResults a span {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; }
    .searchFilterContainer .searchFilterResultsContainer .searchFilterSuggestions a {
      width: 100%;
      display: flex;
      align-items: center;
      color: #212121;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      padding-bottom: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid #f2f2f3; }
      .searchFilterContainer .searchFilterResultsContainer .searchFilterSuggestions a:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border: none; }
      .searchFilterContainer .searchFilterResultsContainer .searchFilterSuggestions a .icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        overflow: hidden;
        font-size: 20px;
        position: relative;
        margin-right: 16px; }

.genericFilterInput,
.genericFilterInputNoJs,
.textFilterInput {
  cursor: auto !important; }

.resetFilters,
.resetTextFilters {
  pointer-events: all !important; }

.noHistoryResults {
  display: flex;
  flex-direction: column;
  text-align: center; }
  .noHistoryResults .noHistoryResultsImage {
    padding: 24px 0; }

.packageInfoCol {
  display: flex;
  margin: 4px 0;
  align-items: center;
  gap: 8px; }

.box.detailsBox .packageInfo .packageInfoContent .packageInfoCol {
  display: flex;
  margin: 4px 0;
  align-items: center; }
  .box.detailsBox .packageInfo .packageInfoContent .packageInfoCol.largeAccountsShop {
    margin-right: 40px;
    padding-left: 12px; }
  .box.detailsBox .packageInfo .packageInfoContent .packageInfoCol img {
    margin-right: 8px; }
  .box.detailsBox .packageInfo .packageInfoContent .packageInfoCol i {
    padding-right: 4px;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    position: relative;
    top: 0;
    font-size: 24px;
    line-height: 18px; }
    .box.detailsBox .packageInfo .packageInfoContent .packageInfoCol i.icon-marker {
      font-size: 24px; }
    .box.detailsBox .packageInfo .packageInfoContent .packageInfoCol i.icon-phone {
      font-size: 24px; }
    .box.detailsBox .packageInfo .packageInfoContent .packageInfoCol i.icon-sms {
      font-size: 24px; }

.packageInfo {
  margin: 30px 0 0 0; }
  .packageInfoDescription {
    display: block;
    margin-top: 4px;
    color: #9d9d9c;
    letter-spacing: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400; }
  .packageInfoWarning {
    display: flex;
    gap: 8px;
    margin: 16px 0; }
    .packageInfoWarningText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
  .packageInfo.carouselPackageInfo {
    margin-bottom: 8px; }
  .packageInfo.withBorder {
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e6e6; }
  .packageInfo.packageInfoWithOffer {
    padding-right: 4%; }
  .packageInfo.packageInfoEmail .packageInfoTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .packageInfo.packageInfoEmail .packageInfoContent.plainText {
    margin: 2px 0 0; }
  .packageInfo .packageInfoTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    width: 100%;
    display: block; }
    .packageInfo .packageInfoTitle.promoTitle {
      color: #ffffff;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 22px;
      line-height: 24px;
      font-weight: 600; }
    .packageInfo .packageInfoTitle.bold {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      margin-top: 4px; }
      @media only screen and (max-width: 480px) {
        .packageInfo .packageInfoTitle.bold {
          font-size: 14px;
          line-height: 16px; } }
    .packageInfo .packageInfoTitle.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: 16px;
      color: #212121;
      border: 1px solid #212121;
      padding: 1px 1px 0px 0px;
      text-align: center;
      border-radius: 100%; }
  .packageInfo .offerBorder {
    background: #00a5e3;
    opacity: 0.25;
    display: block;
    margin-top: 8px;
    margin-bottom: 4px;
    width: 100%;
    height: 1px;
    max-width: 280px; }
    @media only screen and (max-width: 480px) {
      .packageInfo .offerBorder {
        max-width: 160px; } }
  .packageInfo .packageInfoTitleOffer {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    width: 100%;
    display: block; }
  .packageInfo .packageInfoContent {
    display: flex;
    flex-flow: column;
    margin: 12px 0; }
    .packageInfo .packageInfoContent.largeAccountsShop {
      flex-direction: row;
      align-items: flex-start; }
      @media only screen and (max-width: 767px) {
        .packageInfo .packageInfoContent.largeAccountsShop {
          flex-direction: column; } }
    .packageInfo .packageInfoContent.textWithStrong {
      display: block;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
      .packageInfo .packageInfoContent.textWithStrong strong {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700; }
    .packageInfo .packageInfoContent.ratePlanText {
      max-width: 220px;
      color: #212121;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .packageInfo .packageInfoContent.promoText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #ffffff; }
    .packageInfo .packageInfoContent.plainText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      color: #666; }
    .packageInfo .packageInfoContent.plainTextOffer {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .packageInfo .packageInfoContent.lastChildNoMarginBottom .packageInfoCol:last-child {
      margin-bottom: 0; }
    .packageInfo .packageInfoContent .packageInfoCol {
      display: flex;
      margin: 4px 0; }
      .packageInfo .packageInfoContent .packageInfoCol i {
        margin-right: 8px; }
      .packageInfo .packageInfoContent .packageInfoCol.largeAccountsShop {
        margin: 0px 40px; }
      .packageInfo .packageInfoContent .packageInfoCol.noMarginTop {
        margin-top: 0; }
      .packageInfo .packageInfoContent .packageInfoCol.alignStart {
        align-items: flex-start; }
        .packageInfo .packageInfoContent .packageInfoCol.alignStart i.icon-tel {
          position: relative;
          top: 4px; }
      .packageInfo .packageInfoContent .packageInfoCol i {
        padding-right: 4px;
        width: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        position: relative;
        top: 2px;
        font-size: 24px;
        line-height: 24px; }
        .packageInfo .packageInfoContent .packageInfoCol i.icon-size-16 {
          top: 0;
          font-size: 16px;
          line-height: 16px; }
        .packageInfo .packageInfoContent .packageInfoCol i.icon-marker {
          font-size: 24px; }
        .packageInfo .packageInfoContent .packageInfoCol i.icon-phone {
          font-size: 24px; }
        .packageInfo .packageInfoContent .packageInfoCol i.icon-sms {
          font-size: 24px; }
      .packageInfo .packageInfoContent .packageInfoCol .euroSymbol {
        padding-right: 12px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        margin-left: 4px; }
      .packageInfo .packageInfoContent .packageInfoCol li {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        margin-bottom: 2px; }
        .packageInfo .packageInfoContent .packageInfoCol li:last-child {
          margin-bottom: 0; }
        .packageInfo .packageInfoContent .packageInfoCol li strong {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; }
          .packageInfo .packageInfoContent .packageInfoCol li strong.packageInfoStrong {
            letter-spacing: -0.025em; }
  .packageInfo .packageInfoBox {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400; }
    .packageInfo .packageInfoBox.large {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 13px;
      line-height: 16px;
      font-weight: 600;
      margin-top: 16px; }

.settings .packageInfo .packageInfoBox {
  color: #9d9d9c;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.offerImage {
  margin-top: 22px;
  width: 116px;
  height: 116px;
  object-fit: contain;
  object-position: center; }

.businessEmailInput {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  align-items: center; }
  .businessEmailInput .storageLimit {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: auto; }
    .businessEmailInput .storageLimit .stepButton {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: #212121;
      cursor: pointer;
      border-radius: 16px; }
      .businessEmailInput .storageLimit .stepButton.disabled {
        background-color: #848484;
        cursor: default; }
      .businessEmailInput .storageLimit .stepButton img {
        width: 24px;
        height: auto;
        padding: 2px; }
    .businessEmailInput .storageLimit .storageValueContainer {
      display: inline-flex;
      margin: 0 16px;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 40px;
      line-height: 44px;
      font-weight: 700; }

.emailPrice {
  display: flex;
  align-items: center;
  margin: 8px 0 32px;
  text-align: center;
  justify-content: center;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400; }

.switchSettingEmail {
  display: none; }
  .switchSettingEmail.show {
    display: flex; }

.withExtension {
  display: flex;
  align-items: center; }
  .withExtension .inputPrefix {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    display: block;
    margin-right: 5px;
    position: relative;
    top: 2px; }
  .withExtension .inputExtension {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    display: block; }

.businessEmailTop {
  display: flex;
  align-items: center;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 22px;
  line-height: 24px;
  font-weight: 600; }
  .businessEmailTop .boldText {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    position: relative;
    top: 2px;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700; }

.switchSettingsContainer .switchSetting {
  margin: 0 0 16px;
  padding: 0 0 16px;
  align-items: center; }
  .switchSettingsContainer .switchSetting:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none; }
  .switchSettingsContainer .switchSetting .switchSettingContent .switchSettingTitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    line-height: 32px; }
    .switchSettingsContainer .switchSetting .switchSettingContent .switchSettingTitle .regularText {
      margin-left: 8px;
      display: inline-flex;
      align-items: center; }

.switchSetting {
  display: flex;
  flex-flow: row;
  gap: 8px;
  border-bottom: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 24px 0;
  align-items: center; }
  @media only screen and (max-width: 480px) {
    .switchSetting {
      padding: 30px 0 22px; } }
  .switchSetting.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed; }
  .switchSetting.inactive .switchSettingAction .toggleSettingDescription {
    pointer-events: none;
    opacity: 0.3; }
  .switchSetting.withoutBorder {
    border: none; }
  .switchSetting .switchSettingContent {
    padding-right: 120px; }
    @media only screen and (max-width: 480px) {
      .switchSetting .switchSettingContent {
        padding-right: 10px; } }
    .switchSetting .switchSettingContent .switchDate {
      color: #9d9d9c; }
    .switchSetting .switchSettingContent.fullSettingContent {
      padding-right: 0; }
    .switchSetting .switchSettingContent.fullWidthContent {
      width: calc(100% - 30px); }
    .switchSetting .switchSettingContent .switchSettingTitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      line-height: 32px;
      display: flex;
      align-items: center; }
      .switchSetting .switchSettingContent .switchSettingTitle i {
        font-style: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        color: #ffffff;
        padding: 6px 8px;
        background-color: #00a5e3;
        margin-left: 8px;
        border-radius: 12px; }
    .switchSetting .switchSettingContent .switchSettingBottom {
      display: none;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      margin: 24px 0 -12px 0;
      width: calc(100% + 100px); }
      @media only screen and (max-width: 480px) {
        .switchSetting .switchSettingContent .switchSettingBottom {
          width: 100%; } }
      .switchSetting .switchSettingContent .switchSettingBottom.fullWidthContent {
        width: calc(100% + 330px); }
      .switchSetting .switchSettingContent .switchSettingBottom.fullBottom {
        margin-top: 22px;
        width: calc(100% + 76px); }
      .switchSetting .switchSettingContent .switchSettingBottom.fullSetting {
        width: calc(100% + 30px); }
      .switchSetting .switchSettingContent .switchSettingBottom.largeSettingWithDate {
        width: calc(100% + 76px);
        margin: 22px 0 0px; }
      .switchSetting .switchSettingContent .switchSettingBottom.largeSetting {
        width: calc(100% + 76px); }
      .switchSetting .switchSettingContent .switchSettingBottom.large {
        margin-top: 22px; }
  .switchSetting .tvGoSeeMore {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    left: -86px;
    position: absolute; }
  .switchSetting .tvGoModalDetails {
    padding: 16px 24px 24px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    border-radius: 0 0 16px 16px; }
  .switchSetting .switchSettingAction {
    align-self: flex-start;
    margin-left: auto;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 23px; }
    @media only screen and (max-width: 480px) {
      .switchSetting .switchSettingAction {
        align-self: center; } }
    @media only screen and (max-width: 480px) {
      .switchSetting .switchSettingAction .button {
        white-space: nowrap; } }
    .switchSetting .switchSettingAction .switchSettingActionPrice {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      position: absolute;
      z-index: 2;
      left: -12px;
      width: auto;
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      transform: translateX(-100%); }
      @media only screen and (max-width: 480px) {
        .switchSetting .switchSettingAction .switchSettingActionPrice {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          left: 0;
          width: 100%;
          text-align: center;
          top: -6px;
          -webkit-transform: translate(0, -100%);
          -moz-transform: translate(0, -100%);
          transform: translate(0, -100%); } }
      @media only screen and (max-width: 480px) {
        .switchSetting .switchSettingAction .switchSettingActionPrice.noWrap {
          top: 1px; } }
      .switchSetting .switchSettingAction .switchSettingActionPrice.relativePrice {
        position: relative;
        left: 0;
        display: block;
        white-space: nowrap;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0); }
        .switchSetting .switchSettingAction .switchSettingActionPrice.relativePrice.hidden {
          visibility: hidden; }
    .switchSetting .switchSettingAction .toggleSettingDescription {
      color: #212121;
      margin-left: 12px;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      transform: scaleY(1); }
      .switchSetting .switchSettingAction .toggleSettingDescription.active {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }

.borderedBox {
  padding: 1px;
  border-radius: 16px;
  background: #00a5e3; }
  .borderedBox .borderedBoxContent {
    border-radius: 16px;
    background-color: #ffffff;
    padding: 16px; }

.label {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-repeat: no-repeat;
  background-image: none;
  color: #212121;
  background-color: #ffffff;
  border: 1px solid #9d9d9c;
  width: auto;
  height: 24px;
  padding: 6px 8px;
  margin-left: 8px;
  border-radius: 15px; }
  .label.active {
    background: #00a5e3;
    border-color: transparent;
    color: #ffffff; }

.modalDetails .packageDetailsActivation.withoutBorder {
  border: none; }

.settingsSuggestions {
  display: flex;
  flex-flow: column;
  margin: 24px 0 0;
  gap: 12px; }
  .settingsSuggestions .settingsSuggestionsTitle {
    margin-bottom: -4px;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .settingsSuggestions .settingsSuggestionsContent {
    display: flex;
    flex-flow: row;
    align-items: center; }
    .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentLeft.withPadding {
      padding-right: 6%; }
    .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentLeft .settingsSuggestionsContentLeftTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      padding-bottom: 100px; }
    .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentLeft .settingsSuggestionsContentLeftDescription {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      color: #848484; }
    .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentRight {
      margin-left: auto; }
      .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentRight.withButton {
        min-width: 28%;
        text-align: right; }
        .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentRight.withButton .button {
          min-width: 80px; }
      .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentRight.withSwitch {
        min-width: 75px; }
        .settingsSuggestions .settingsSuggestionsContent .settingsSuggestionsContentRight.withSwitch .switch {
          top: 12px; }

.noPackages {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-top: 16px; }

.speedIndication {
  position: relative;
  top: 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.requestsBoxContent {
  display: flex;
  flex-flow: column; }
  .requestsBoxContent.withTopBorder {
    border-top: 1px solid #4d4d4d;
    padding-top: 12px;
    margin-top: 12px; }
  .requestsBoxContent.multipleRequests .requestsBoxCol {
    margin-bottom: 10px;
    padding: 0px 10px 10px;
    border-bottom: 1px solid rgba(33, 33, 33, 0.1); }
    .requestsBoxContent.multipleRequests .requestsBoxCol:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border: none; }
  .requestsBoxContent .requestsBoxCol {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    cursor: pointer; }
    .requestsBoxContent .requestsBoxCol.active {
      position: relative; }
      .requestsBoxContent .requestsBoxCol.active:before {
        content: '';
        display: block;
        position: absolute;
        width: calc(100% + 24px);
        height: calc(100% + 10px);
        top: -10px;
        left: -12px;
        background-color: rgba(33, 33, 33, 0.1);
        border-left: 2px solid #00a5e3; }
      .requestsBoxContent .requestsBoxCol.active:last-child:before {
        height: calc(100% + 24px); }
    .requestsBoxContent .requestsBoxCol img {
      margin-right: 12px;
      width: 38px;
      height: 38px; }
    .requestsBoxContent .requestsBoxCol .requestsBoxText {
      display: flex;
      flex-flow: column;
      align-self: center; }
      .requestsBoxContent .requestsBoxCol .requestsBoxText span {
        width: 100%;
        display: block; }
        .requestsBoxContent .requestsBoxCol .requestsBoxText span.requestsBoxTitle {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
        .requestsBoxContent .requestsBoxCol .requestsBoxText span.requestsBoxDescription {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #767676; }

.signatureText {
  margin: 6px 0 12px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }
  .signatureText span {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }

.tvTitle {
  margin-bottom: 12px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

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

.settingstv .paymentSteps .paymentStepsContainer {
  padding: 16px 48px 78px; }
  @media only screen and (max-width: 767px) {
    .settingstv .paymentSteps .paymentStepsContainer {
      padding: 16px 16px 78px; } }

.settingstv .paymentMethod .renewSelectContainer {
  width: 100%; }

.settingstv .inlineInputs .smallInput {
  flex: none;
  margin-left: 16px;
  max-width: 100px; }
  @media only screen and (max-width: 767px) {
    .settingstv .inlineInputs .smallInput {
      margin-left: 0;
      max-width: 100%;
      width: 100%; } }

.fullWidthBorder {
  width: calc(100% + 48px);
  position: relative;
  left: -24px;
  height: 1px;
  display: block;
  margin: 24px 0;
  background-color: #9d9d9c;
  opacity: 0.5; }

.orderNumber {
  margin-top: 12px;
  margin-bottom: 4px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.tvSection {
  margin-top: 24px;
  display: flex;
  flex-flow: column; }
  .tvSection .tvOption {
    display: flex;
    align-items: center;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(61, 82, 101, 0.12); }
    .tvSection .tvOption:last-child {
      border: none; }
    .tvSection .tvOption .md-radio label span {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .tvSection .tvOption .radioLabel {
      margin-left: auto;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }

.tvSmallText {
  margin-top: 8px;
  display: block;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }
  .tvSmallText .visitLink {
    display: inline-block;
    width: auto; }

.deleteInput {
  position: absolute;
  right: 6px;
  top: 0px;
  cursor: pointer; }

.searchFilterContainer .searchFilter .searchFilterContent .editNameInput {
  position: relative;
  margin-bottom: 8px; }
  .searchFilterContainer .searchFilter .searchFilterContent .editNameInput .submitNameEdit {
    color: #0ea600;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out; }
    .searchFilterContainer .searchFilter .searchFilterContent .editNameInput .submitNameEdit:focus-visible {
      outline: 2px solid #2684ff;
      outline-offset: 10px; }
    .searchFilterContainer .searchFilter .searchFilterContent .editNameInput .submitNameEdit.active {
      right: 8px;
      opacity: 1;
      pointer-events: all;
      visibility: visible; }
  .searchFilterContainer .searchFilter .searchFilterContent .editNameInput .characters {
    position: absolute;
    display: flex;
    align-items: center;
    color: #212121;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    bottom: -12px;
    right: 0;
    width: auto;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    -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; }
    .searchFilterContainer .searchFilter .searchFilterContent .editNameInput .characters.active {
      opacity: 1;
      pointer-events: all;
      visibility: visible; }
    .searchFilterContainer .searchFilter .searchFilterContent .editNameInput .characters .charactersLive {
      color: #212121;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 0; }

.simpleLineTitle {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  width: 100%;
  display: block; }
  .simpleLineTitleAlert {
    display: block;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    position: relative;
    align-items: center;
    background-color: #e6e6e6;
    padding: 12px 16px;
    border-radius: 16px;
    margin-top: 16px; }
  .simpleLineTitle span {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }
  .simpleLineTitle .withTrial {
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 6px 8px;
    height: 22px;
    background-color: #00a5e3;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    border-radius: 8px; }

.scrollableContent {
  padding: 2px 48px;
  margin-top: 16px;
  width: calc(100% + 48px);
  position: relative;
  left: -24px;
  max-height: 36vh;
  overflow: auto; }
  @media only screen and (max-width: 767px) {
    .scrollableContent {
      padding: 2px 12px;
      width: 100%;
      left: 0; } }
  .scrollableContentNarrow {
    padding: 2px 24px; }
  .scrollableContent.forXmas {
    background-color: #ffffff;
    padding: 2px 16px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }
    @media only screen and (max-width: 767px) {
      .scrollableContent.forXmas {
        padding: 2px; } }
    .scrollableContent.forXmas .tvBox:first-child {
      margin-top: 0; }
  .scrollableContent.minHeight {
    max-height: 55vh; }

.activeBox {
  padding: 2px;
  background: #00a5e3;
  border-radius: 16px; }

.tvBox {
  background-color: #f2f2f3;
  position: relative;
  padding: 0;
  margin: 20px 0;
  display: flex;
  overflow: hidden;
  border-radius: 16px; }
  .tvBox.withMigration {
    background-color: #e6e6e6;
    padding: 2px; }
    .tvBox.withMigration .migrationCheck {
      position: absolute;
      width: 24px;
      height: auto;
      right: 0;
      top: 0;
      display: none; }
    .tvBox.withMigration.active .migrationCheck {
      display: block; }
  .tvBox.whiteBoxInitialWidth {
    max-width: initial; }
  .tvBox.whiteBox.active .tvBoxContainer .tvBoxLeft.migrationLeft:after {
    background: #00a5e3; }
  .tvBox.whiteBox .tvBoxContainer {
    background-color: #f2f2f3; }
    .tvBox.whiteBox .tvBoxContainerFullWidth {
      width: 100%; }
    .tvBox.whiteBox .tvBoxContainer .tvBoxLeft {
      color: #212121;
      position: relative; }
      .tvBox.whiteBox .tvBoxContainer .tvBoxLeft.migrationLeft:after {
        background: #e6e6e6; }
      .tvBox.whiteBox .tvBoxContainer .tvBoxLeft .tvBoxTitle span {
        color: #212121; }
      .tvBox.whiteBox .tvBoxContainer .tvBoxLeft .tvBoxContent,
      .tvBox.whiteBox .tvBoxContainer .tvBoxLeft .tvBoxMore {
        color: #212121; }
  .tvBox.default {
    background-color: #f2f2f3; }
    .tvBox.default .tvBoxContainerFullWidth {
      width: 100%; }
    .tvBox.default .tvBoxContainer .tvBoxLeft .tvBoxTitle img {
      padding: 4px; }
  .tvBox.active {
    border: 2px solid #00a5e3; }
    .tvBox.active .tvBoxContainer .tvBoxRight .detailsContentRight .giftCheckbox {
      background-image: url("../img/xmas/active.svg"); }
  .tvBox .tvBoxContainer {
    display: flex;
    overflow: hidden;
    border-radius: 16px; }
    .tvBox .tvBoxContainer .tvBoxLeft {
      padding: 16px;
      display: flex;
      flex-flow: column;
      width: 100%;
      position: relative; }
      .tvBox .tvBoxContainer .tvBoxLeft:after {
        content: '';
        width: 1px;
        height: 90%;
        display: block;
        background-color: #848484;
        position: absolute;
        top: 5%;
        right: 0; }
      .tvBox .tvBoxContainer .tvBoxLeft .tvBoxImage {
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 430px;
        object-fit: cover;
        object-position: center top; }
        @media only screen and (max-width: 767px) {
          .tvBox .tvBoxContainer .tvBoxLeft .tvBoxImage {
            height: 100%; } }
      .tvBox .tvBoxContainer .tvBoxLeft .tvBoxTitle {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        position: relative;
        z-index: 1; }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxTitle.migrationTitle {
          margin-bottom: 0; }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxTitle img {
          margin-right: 8px;
          width: 48px; }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxTitle span {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700; }
      .tvBox .tvBoxContainer .tvBoxLeft .tvBoxContent {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        height: 64px;
        overflow: hidden;
        margin-bottom: 12px;
        position: relative;
        z-index: 1;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out; }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxContent.xmasContent {
          height: 80px; }
          .tvBox .tvBoxContainer .tvBoxLeft .tvBoxContent.xmasContent p:first-child {
            margin-top: 0; }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxContent.migrationContent {
          height: auto;
          margin-bottom: 0; }
          .tvBox .tvBoxContainer .tvBoxLeft .tvBoxContent.migrationContent p {
            margin-top: 12px;
            margin-bottom: 0;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400; }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxContent.active {
          height: auto; }
      .tvBox .tvBoxContainer .tvBoxLeft .tvBoxMore {
        display: flex;
        margin: auto;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        color: #212121;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700; }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxMore i {
          padding-left: 12px;
          font-size: 18px;
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          transform: scaleY(1); }
        .tvBox .tvBoxContainer .tvBoxLeft .tvBoxMore.active i {
          -webkit-transform: scaleY(-1);
          -moz-transform: scaleY(-1);
          transform: scaleY(-1); }
    .tvBox .tvBoxContainer .tvBoxRight {
      padding: 16px;
      display: flex;
      flex-flow: column;
      width: 40%;
      position: relative; }
      .tvBox .tvBoxContainer .tvBoxRight.withXmasGift {
        cursor: pointer; }
      .tvBox .tvBoxContainer .tvBoxRight .boldText {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .tvBox .tvBoxContainer .tvBoxRight.migrationRight {
        padding: 24px 12px; }
        .tvBox .tvBoxContainer .tvBoxRight.migrationRight .boldText {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; }
        .tvBox .tvBoxContainer .tvBoxRight.migrationRight .buttonOuter {
          margin-top: 12px; }
      .tvBox .tvBoxContainer .tvBoxRight.withDiscount {
        padding-top: 26px; }
      .tvBox .tvBoxContainer .tvBoxRight .discount {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: #ffffff;
        background-color: #eabf68;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0 8px;
        height: 24px;
        position: absolute;
        right: 0;
        top: 0; }
        .tvBox .tvBoxContainer .tvBoxRight .discount.auto {
          width: auto; }
      .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight {
        text-align: center; }
        .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .trialLabelContainer {
          display: block;
          width: 100%;
          text-align: right;
          position: relative;
          right: -16px; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .trialLabelContainer .trialLabel {
            display: inline-flex;
            margin-left: auto;
            height: 22px;
            min-width: 60px;
            margin-bottom: 12px;
            padding: 6px 8px;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-color: #00a5e3;
            color: #ffffff;
            font-family: 'PeridotPE-Bold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 700;
            -webkit-border-radius: 12px 0 0 12px;
            -moz-border-radius: 12px 0 0 12px;
            border-radius: 12px 0 0 12px; }
        .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining {
          display: flex;
          flex-flow: column;
          position: relative;
          margin: 24px 0 10px;
          height: 94px; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .donut {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            width: 100%;
            -webkit-transform: rotate(125deg);
            -moz-transform: rotate(125deg);
            transform: rotate(125deg); }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .donut .donutBackground {
              transform-origin: center;
              stroke: #e6e6e6; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .donut .donutColor {
              -webkit-transition: all 1s ease-in-out;
              -moz-transition: all 1s ease-in-out;
              transition: all 1s ease-in-out;
              color: #00a5e3 !important;
              stroke: #00a5e3 !important;
              transform-origin: center; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700;
            margin-top: 36px;
            margin-bottom: 0; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber.withImage {
              margin-top: 28px; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber.smallText {
              font-size: 26px; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber.unlimmited {
              font-family: 'PeridotPE-ExtraBlack', sans-serif;
              font-size: 10px;
              line-height: 12px;
              font-weight: 800;
              margin-top: 26px;
              margin-bottom: 3px; }
              .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber.unlimmited i {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 24px;
                margin-bottom: 4px; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber.withAlert {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              margin-top: 32px; }
              .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber.withAlert span {
                font-family: 'PeridotPE-ExtraBlack', sans-serif;
                font-size: 10px;
                line-height: 12px;
                font-weight: 800;
                width: 100%;
                display: block;
                text-align: center;
                margin-bottom: 4px; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataRemainingNumber.withSpeed {
              font-size: 26px; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .dataRemaining .dataSymbolContainer .dataSymbol {
            display: inline-block;
            margin: auto;
            width: auto;
            font-family: 'PeridotPE-ExtraBlack', sans-serif;
            font-size: 10px;
            line-height: 12px;
            font-weight: 800;
            background-color: #e6e6e6;
            padding: 4px;
            border-radius: 4px;
            position: relative;
            z-index: 1; }
        .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .giftCheckbox {
          position: absolute;
          width: 24px;
          height: 24px;
          right: 9px;
          top: 9px;
          background-image: url("../img/xmas/inactive.svg");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .giftCheckbox input {
            outline: none;
            visibility: hidden; }
        .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay {
          width: 100%;
          display: block;
          position: relative;
          margin-top: 26px;
          margin-bottom: -6px;
          padding-left: 20px;
          white-space: nowrap; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay.xmasPay {
            margin-top: 47px; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .daysIndication {
            display: block;
            margin-top: -14px; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay.withOldPrice {
            margin-top: 26px; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay.withOldPrice .oldPrice {
              position: absolute;
              top: -24px;
              right: 0;
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 400; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .euros {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700;
            position: relative; }
            @media only screen and (max-width: 767px) {
              .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .euros {
                font-family: 'BTCosmo-Bold', sans-serif;
                font-size: 32px;
                line-height: 36px;
                font-weight: 700; } }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .euros.withText {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 24px;
              line-height: 28px;
              font-weight: 700;
              letter-spacing: 0;
              display: block;
              margin-bottom: 16px; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .euros .imgEuro {
              display: none; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .cents {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            position: relative;
            bottom: 2px; }
            .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .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%; }
          .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .toPay .percentage {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            position: relative;
            padding-left: 2px;
            bottom: -4px; }
        .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .paymentDeadline {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          width: 100%;
          display: block;
          margin: 6px 0; }
        .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .discount {
          display: block;
          text-align: center;
          margin: 3px 0 6px;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600; }
        .tvBox .tvBoxContainer .tvBoxRight .detailsContentRight .visitLink {
          margin: 6px 0;
          position: relative;
          z-index: 4; }

.detailsContentRight-boldText {
  margin: 0;
  margin-top: 40px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121; }

.toggleTvAdd {
  min-width: 100% !important; }

.programEdit.withMediumPadding {
  padding: 16px !important; }

.programEdit.withGreyBackground {
  background-color: #f2f2f3;
  border-radius: 16px;
  margin-bottom: 6px; }
  .programEdit.withGreyBackground .programEditRow {
    border-color: rgba(33, 33, 33, 0.1); }
    .programEdit.withGreyBackground .programEditRow .fixedLeftCol {
      min-width: 176px;
      margin-right: 16px; }
    .programEdit.withGreyBackground .programEditRow strong {
      margin-left: 0;
      position: relative;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .programEdit.withGreyBackground .programEditRow strong .imgTooltip {
        position: absolute;
        top: 50%;
        right: 0;
        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%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%); }

.programTitle {
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 12px; }

.packagesDetails {
  display: flex;
  flex-direction: column;
  margin-top: 4px; }
  .packagesDetails .packageRow {
    display: block;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-top: 4px; }
    .packagesDetails .packageRow .packageTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }

.tvDisabled.hidden {
  display: none !important; }

.newPakcagesContainer.hidden {
  display: none !important; }

.arrowMoreContent {
  display: flex;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #212121 !important;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center; }
  .arrowMoreContent i {
    padding-left: 12px;
    font-size: 18px;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
  .arrowMoreContent.active i {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    transform: scaleY(-1); }

.hiddenMoreContent {
  display: none; }

.settingsAlert {
  display: inline-flex;
  align-items: flex-start;
  background-color: #f2f2f3;
  padding: 4px;
  margin-top: 12px;
  border-radius: 16px; }
  .settingsAlert img {
    margin-right: 6px; }

.leftSidebarBoxDetails .badge {
  margin-right: -4px;
  margin-left: auto; }

@media only screen and (min-width: 1025px) and (max-width: 1400px) {
  .family .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a .toHide {
    display: none; } }

@media only screen and (max-width: 480px) {
  .family .mobileFirstContent {
    margin-top: 2px;
    margin-bottom: 12px; } }

@media only screen and (max-width: 767px) {
  .family .flexRow {
    flex-flow: column !important;
    width: 100%; } }

@media only screen and (max-width: 767px) {
  .family .megaFilterContainer .megaFilter .megaFilterContent:first-child {
    margin-right: 0;
    margin-bottom: 12px; } }

@media only screen and (min-width: 1025px) and (max-width: 1230px) {
  .family .megaFilterContainer .megaFilter .megaFilterContent {
    flex: auto; } }

@media only screen and (max-width: 767px) {
  .family .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput.smallInput {
    max-width: 100%; } }

.detailsContentRight .badge {
  width: 66px;
  margin: 6px auto 0; }

.badge {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
  padding: 8px 12px;
  width: auto;
  height: 32px;
  color: #00a5e3;
  margin-left: 8px;
  border-radius: 12px;
  text-transform: uppercase;
  border: 1px solid #e6e6e6; }
  .badge .badgeText {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #00a5e3;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: 700;
    background-color: #ffffff;
    width: auto;
    height: 18px;
    border-radius: 8px; }

.activeBadge {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #00a5e3;
  max-width: 70px !important;
  color: #ffffff;
  top: 50%;
  right: -8px;
  position: absolute;
  padding: 6px 8px;
  border-radius: 12px;
  -webkit-transform: translate(100%, -50%);
  -moz-transform: translate(100%, -50%);
  transform: translate(100%, -50%); }

.controlBox {
  display: flex;
  flex-flow: column;
  width: calc(100% + 32px);
  position: relative;
  margin-left: -16px;
  margin-top: 24px; }
  .controlBox .coltrolBoxContent {
    padding: 14px 24px;
    background-color: #f2f2f3;
    display: flex;
    align-items: center; }
    .controlBox .coltrolBoxContent .controlBoxLeft {
      flex: 2;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .controlBox .coltrolBoxContent .controlBoxRight {
      margin-left: auto;
      flex: 1; }

.limitBox {
  margin-top: 16px;
  background-color: #ffffff;
  display: flex;
  flex-flow: column; }
  .limitBox .limitText {
    padding: 16px;
    font-size: 18px;
    line-height: 20px; }
  .limitBox .limitLeader {
    display: flex;
    flex-flow: column;
    padding: 8px;
    background-color: #f2f2f3; }
    .limitBox .limitLeader .limitLeaderTitle {
      display: flex;
      align-items: center;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      padding: 0 8px; }
    .limitBox .limitLeader .limitLeaderContent {
      display: flex;
      align-items: center; }
      .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol {
        margin: 0 8px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        display: flex;
        flex-flow: column; }
        .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol:first-child {
          width: 55%; }
        .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol .maxLimit {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 40px;
          line-height: 44px;
          font-weight: 700;
          display: flex;
          align-items: flex-end; }
          .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol .maxLimit.withIcon {
            flex-direction: column;
            text-align: center;
            align-items: center; }
            .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol .maxLimit.withIcon img {
              width: 43px;
              height: auto;
              display: block;
              margin-bottom: 4px; }
            .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol .maxLimit.withIcon span {
              line-height: 16px;
              display: block;
              margin-bottom: 6px; }
          .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol .maxLimit span {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            line-height: 36px; }
        .limitBox .limitLeader .limitLeaderContent .limitLeaderContentCol .maxLimitText {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          text-align: center;
          margin-bottom: 8px;
          margin-top: -4px; }
  .limitBox .limitSlider {
    padding: 16px;
    display: flex;
    flex-flow: column; }
    .limitBox .limitSlider .buttonOuter {
      margin-bottom: 8px;
      margin-top: 24px; }
    .limitBox .limitSlider .limitSliderBox {
      display: flex;
      padding-bottom: 20px;
      margin-top: 16px;
      border-bottom: 2px solid rgba(33, 33, 33, 0.1);
      align-items: center; }
      .limitBox .limitSlider .limitSliderBox:first-child {
        margin-top: 0; }
      .limitBox .limitSlider .limitSliderBox:last-child {
        border-bottom: none;
        padding-bottom: 0; }
      .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol {
        display: flex;
        flex-flow: column; }
        .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColLeft {
          width: 100%;
          position: relative;
          z-index: 0;
          border-right: 1px solid #f2f2f3; }
          .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColLeft.withoutBorder {
            border: none; }
          .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColLeft.disabled {
            opacity: 0.38;
            pointer-events: none; }
            .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColLeft.disabled:before {
              content: '';
              position: absolute;
              left: -16px;
              top: -16px;
              width: calc(100% + 16px);
              height: calc(100% + 26px);
              z-index: -1;
              background-color: #f2f2f3;
              opacity: 0.2; }
          .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColLeft.inactive {
            pointer-events: none; }
            .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColLeft.inactive:before {
              content: '';
              display: block;
              width: calc(100% + 12px);
              height: calc(100% + 26px);
              background-color: rgba(216, 216, 216, 0.2);
              position: absolute;
              z-index: -1;
              left: -16px;
              top: -16px; }
        .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColRight {
          margin-left: auto;
          text-align: center;
          align-items: center;
          min-width: 100px;
          padding-left: 10px; }
          @media only screen and (max-width: 480px) {
            .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol.limitSliderBoxColRight {
              justify-content: center; } }
        .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxTitle {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
        .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxText {
          font-size: 14px;
          margin: 16px 0 0;
          padding-right: 10px; }
          .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxText .familyIndication {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            width: 100%;
            display: block;
            margin-top: 8px; }
          .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxText .errorTextFamily {
            display: block;
            width: 100%;
            margin-top: 6px; }
        .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput {
          margin: 8px 0 0;
          display: flex;
          align-items: flex-start; }
          @media only screen and (max-width: 480px) {
            .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput {
              flex-flow: column-reverse; } }
          .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput .leftLimit {
            flex: 2;
            display: flex;
            flex-flow: column; }
            @media only screen and (max-width: 480px) {
              .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput .leftLimit {
                width: 80%; } }
            .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput .leftLimit .limitSliderInput {
              display: block;
              margin: 22px 0; }
          .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput .rightLimit {
            flex: 1;
            display: flex;
            align-items: flex-end;
            max-width: 144px;
            height: 48px;
            justify-content: center;
            font-family: 'PeridotPE-Bold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 700;
            line-height: 36px;
            margin: 0 16px;
            padding: 0 6px;
            border-radius: 12px; }
            @media only screen and (max-width: 480px) {
              .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput .rightLimit {
                margin: 16px;
                width: 120px; } }
            .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxInput .rightLimit span {
              font-size: 36px;
              line-height: 44px; }
        .limitBox .limitSlider .limitSliderBox .limitSliderBoxCol .limitSliderBoxSimpleText {
          font-size: 14px;
          line-height: 14px;
          margin-top: 16px; }

.familyContainer {
  margin-bottom: 26px;
  margin-top: 8px; }
  .familyContainer:last-child {
    margin-bottom: 0; }
  .familyContainer .familyContainerTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    width: 100%;
    display: block;
    margin-bottom: -6px; }

.limitSliderInput .ui-slider {
  border: none !important;
  height: 4px;
  background-color: #0ea600 !important;
  border-radius: 0; }

.limitSliderInput .ui-widget-header {
  border: none !important;
  background: #e6e6e6; }

.limitSliderInput .ui-slider-handle,
.limitSliderInput .ui-state-default,
.limitSliderInput .ui-state-focus,
.limitSliderInput .ui-state-hover {
  height: 16px !important;
  width: 16px !important;
  background: #0ea600 !important;
  border: none !important;
  outline: none !important;
  top: 2px !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 100%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%); }

.notAvailable .limitSliderBoxColRight,
.notAvailable .limitSliderBoxInput {
  opacity: 0.2;
  pointer-events: none; }

.notAvailable .limitSliderBoxText div:not(.paymentDue) {
  opacity: 0.2;
  pointer-events: none; }

.arrowedList {
  display: flex;
  flex-direction: column; }
  .arrowedList .arrowedItem {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
    padding: 22px 0; }
    .arrowedList .arrowedItem.withLink {
      padding-bottom: 38px;
      position: relative;
      cursor: default; }
      .arrowedList .arrowedItem.withLink .visitLink {
        width: auto; }
    .arrowedList .arrowedItem .arrowedItemTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      display: flex;
      width: 100%; }
      .arrowedList .arrowedItem .arrowedItemTitle .arrowedItemPrice {
        margin-left: auto;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        white-space: nowrap; }
    .arrowedList .arrowedItem .arrowedContent {
      margin-left: auto;
      display: flex;
      align-items: center; }
      .arrowedList .arrowedItem .arrowedContent .arrowedItemPrice {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        margin-right: 16px; }
      .arrowedList .arrowedItem .arrowedContent .arrowedItemIcon {
        font-size: 16px;
        line-height: 16px; }

.badgeOne {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: auto;
  height: 24px;
  margin-left: 8px;
  margin-right: 0 !important; }

.coneLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: auto;
  height: 24px;
  margin-right: 0 !important; }

.badgeOneFamily {
  margin-left: 6px;
  width: auto;
  height: 24px; }

.badgeCone {
  display: block;
  height: 24px;
  right: -16px;
  top: 50%;
  width: auto;
  position: absolute;
  -webkit-transform: translate(100%, -50%);
  -moz-transform: translate(100%, -50%);
  transform: translate(100%, -50%); }

.leftSidebarBoxDetails .badgeOne {
  margin-left: auto;
  padding: 0 !important; }

.oneText {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700; }

.oneSelection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0; }
  @media only screen and (max-width: 767px) {
    .oneSelection {
      flex-flow: column; } }
  .oneSelection .packageListItem {
    width: 148px;
    border: 1px solid #e6e6e6;
    min-height: 215px;
    display: flex;
    flex-flow: column;
    background-color: #f2f2f3;
    overflow: hidden;
    padding-bottom: 1px;
    margin: 0 12px;
    border-radius: 16px; }
    .oneSelection .packageListItem.deselected {
      opacity: 0.5;
      pointer-events: none;
      cursor: default;
      padding: 2px 2px 0px 2px;
      background-color: #00a5e3; }
    @media only screen and (max-width: 767px) {
      .oneSelection .packageListItem:first-child {
        margin-bottom: 12px; } }
    .oneSelection .packageListItem.active {
      min-height: 230px;
      width: 178px; }
      .oneSelection .packageListItem.active .packageListImage {
        min-height: 94px; }
      .oneSelection .packageListItem.active .packageListContent {
        font-size: 16px;
        line-height: 16px; }
    .oneSelection .packageListItem .packageListImage {
      height: 75px;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      border-radius: 14px 14px 0 0;
      overflow: hidden; }
      .oneSelection .packageListItem .packageListImage img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 16px; }
    .oneSelection .packageListItem .linearGradient {
      height: 2px;
      width: 100%;
      display: block;
      background: #e20074; }
    .oneSelection .packageListItem .packageListContent {
      height: 96px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      padding: 6px;
      background-color: #f2f2f3; }
    .oneSelection .packageListItem .packageListPrice {
      background-color: #0e8103;
      color: #ffffff;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      display: flex;
      padding: 12px;
      height: 42px;
      cursor: pointer;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      transition: all 0.2s ease;
      border-radius: 0 0 16px 16px; }
      .oneSelection .packageListItem .packageListPrice.inactive {
        background-color: #9d9d9c !important;
        background-image: none;
        cursor: default; }
      .oneSelection .packageListItem .packageListPrice:hover, .oneSelection .packageListItem .packageListPrice:focus {
        background-color: #0ea600; }
      .oneSelection .packageListItem .packageListPrice span {
        width: 100%;
        text-align: right; }
        .oneSelection .packageListItem .packageListPrice span em {
          font-style: normal;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          display: inline-block;
          padding-left: 4px; }

.onePros.bordered .onePro {
  display: flex;
  align-items: flex-start;
  flex-flow: row;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f2f2f3; }
  .onePros.bordered .onePro:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none; }
  .onePros.bordered .onePro img {
    width: 24px;
    height: 24px;
    top: 0;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    object-position: center;
    margin-right: 8px;
    position: relative; }

.onePro {
  display: flex;
  align-items: flex-start;
  flex-flow: row;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin-top: 16px; }
  .onePro:first-child {
    margin-top: 0; }
  .onePro .oneProRight {
    display: flex;
    flex-direction: column; }
    .onePro .oneProRight .oneProTop {
      margin-bottom: 2px; }
    .onePro .oneProRight .oneProBottom {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400; }
  .onePro.withTopAlignedImage {
    margin-top: 12px; }
    .onePro.withTopAlignedImage:first-child {
      margin-top: 0; }
    .onePro.withTopAlignedImage img {
      top: 2px; }
  .onePro img {
    width: 100%;
    max-width: 22px;
    height: 100%;
    max-height: 24px;
    object-fit: contain;
    object-position: center;
    margin-right: 8px;
    position: relative;
    top: -2px; }

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

.oneLabels {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  padding-left: 30px;
  max-height: 330px;
  overflow-y: auto; }
  .oneLabels.forCone {
    padding-left: 0; }
  .oneLabels .oneLabel {
    border-bottom: 1px solid rgba(33, 33, 33, 0.1);
    padding-bottom: 4px;
    margin-bottom: 8px;
    width: 100%;
    display: block; }
    .oneLabels .oneLabel:last-child {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0; }
    .oneLabels .oneLabel .oneFamilyBadge {
      margin-left: auto; }
  .oneLabels .md-checkbox span {
    width: 100%;
    display: block;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .oneLabels .md-checkbox strong {
    width: 100%;
    display: block;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .oneLabels .md-checkbox label {
    display: inline-flex;
    flex-flow: column; }

.selectedLabels {
  display: flex;
  flex-flow: column;
  align-items: flex-start; }
  .selectedLabels .button {
    margin-left: 8px; }
  .selectedLabels .selectGroupLabel {
    display: block;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 12px; }
    .selectedLabels .selectGroupLabel.forCone {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      margin-bottom: 8px; }
  .selectedLabels .selectGroupText {
    display: block;
    margin-bottom: 12px; }
  .selectedLabels .selectGroup {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    width: 100%; }
    .selectedLabels .selectGroup.forCone {
      margin-left: 8px;
      margin-bottom: 12px;
      padding: 12px;
      width: calc(100% - 8px);
      background-color: #f2f2f3;
      border-radius: 16px; }
    .selectedLabels .selectGroup.selectedAssets {
      display: flex;
      margin-bottom: 12px;
      flex-wrap: wrap;
      flex-direction: row;
      padding-left: 0; }
      .selectedLabels .selectGroup.selectedAssets .selectedAsset {
        display: inline-flex;
        align-items: center;
        margin-bottom: 4px;
        margin-right: 8px; }
      .selectedLabels .selectGroup.selectedAssets img {
        width: 16px;
        height: auto;
        display: block;
        margin-right: 4px; }
    .selectedLabels .selectGroup .selectedLabel:last-child {
      border: none;
      padding-bottom: 0;
      margin-bottom: 0; }
  .selectedLabels .selectedLabel {
    border-bottom: 1px solid rgba(33, 33, 33, 0.1);
    padding-bottom: 8px;
    margin-bottom: 8px;
    width: 100%; }
    .selectedLabels .selectedLabel .primaryButtonSmall {
      margin-left: 20px;
      margin-top: 6px;
      min-width: 120px; }
    .selectedLabels .selectedLabel .smallAlert {
      display: flex;
      align-items: flex-start;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 13px;
      line-height: 16px;
      font-weight: 600;
      margin-top: 4px; }
      .selectedLabels .selectedLabel .smallAlert.available {
        color: #00a5e3; }
      .selectedLabels .selectedLabel .smallAlert img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        object-position: center;
        display: block;
        margin-right: 4px;
        position: relative;
        top: -1px; }
    .selectedLabels .selectedLabel span {
      width: 100%;
      display: block;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
      .selectedLabels .selectedLabel span.selectedAlert {
        margin-top: 4px; }
    .selectedLabels .selectedLabel strong {
      width: 100%;
      display: flex;
      align-items: center;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
      .selectedLabels .selectedLabel strong img {
        height: 24px;
        width: auto;
        margin-left: 6px;
        display: block; }
    .selectedLabels .selectedLabel .coneFamilyMembers {
      display: flex;
      flex-direction: column;
      padding-left: 12px;
      margin-top: 8px; }
      .selectedLabels .selectedLabel .coneFamilyMembers span {
        border-bottom: 1px solid rgba(33, 33, 33, 0.1);
        padding-bottom: 8px;
        margin-bottom: 8px;
        width: 100%;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        display: flex;
        align-items: center; }
        .selectedLabels .selectedLabel .coneFamilyMembers span:last-child {
          border: none;
          padding-bottom: 0;
          margin-bottom: 0; }
        .selectedLabels .selectedLabel .coneFamilyMembers span img {
          height: 24px;
          width: auto;
          margin-left: 6px;
          display: block; }

.cosmoteTvSubmitElement,
.cosmoteTvGoEuropeSubmitElement,
.trialPrompt {
  max-width: 416px; }

.modalDetails.diaHiddenElement {
  top: 50%;
  left: 50%;
  max-width: 384px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .modalDetails.diaHiddenElement .modalText {
    min-height: 0;
    margin-bottom: 8px; }

.modalDetails.errorElement {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.withoutLeftMargin {
  margin-left: 0 !important; }

.overlayed:after {
  content: '';
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #212121;
  opacity: 0.3;
  border-radius: 16px; }

.oneContact {
  position: relative;
  margin-top: 30px;
  padding-top: 12px;
  margin-bottom: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f2f2f3; }
  .oneContact .inputWithImage {
    padding-right: 44px; }
  .oneContact .oneContainer i {
    margin-right: 8px; }
  .oneContact:before {
    position: absolute;
    width: calc(100% + 48px);
    height: 1px;
    content: '';
    left: -24px;
    top: 0px;
    background-color: #9d9d9c; }

.withFamilyBadge {
  display: flex !important;
  align-items: center; }
  .withFamilyBadge .familyBadge {
    margin-left: 12px; }
  .withFamilyBadge img.familyBadge {
    height: 24px; }

.smallModalHeader {
  padding: 12px 32px;
  text-align: center;
  margin-top: -16px;
  margin-bottom: 16px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; }
  .smallModalHeader .smallModalTitlte {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121; }
  .smallModalHeader .smallHeaderClose {
    position: absolute;
    right: -16px;
    top: 50%;
    color: #212121;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }

.detailsBottomBox {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 16px;
  margin-bottom: 0;
  display: block;
  height: 16px;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  word-wrap: break-all; }
  @supports (-webkit-line-clamp: 1) {
    .detailsBottomBox {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical; } }
  @media only screen and (max-width: 480px) {
    .detailsBottomBox {
      -webkit-line-clamp: 4;
      height: 64px; } }
  .detailsBottomBox.reverse {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400; }
    .detailsBottomBox.reverse span {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600; }
      .detailsBottomBox.reverse span.connectionsTotal {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
  .detailsBottomBox.margined {
    margin: 40px 0 0; }
  .detailsBottomBox.withTooltip {
    padding-right: 40px; }
  .detailsBottomBox span {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600; }
  .detailsBottomBox .imgTooltip {
    position: absolute;
    top: 0;
    right: 10px;
    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%; }
    @media only screen and (max-width: 480px) {
      .detailsBottomBox .imgTooltip {
        top: 70%; } }

.addNewAssets {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  padding: 1px;
  margin-top: 16px;
  background-color: #00a5e3;
  border-radius: 16px; }
  .addNewAssets .addNewAssetsContainer {
    background-color: #ffffff;
    display: flex;
    align-items: flex-start;
    padding: 8px;
    border-radius: 15px; }
    .addNewAssets .addNewAssetsContainer img {
      width: 16px;
      height: 16px;
      object-fit: contain;
      object-position: center;
      display: block;
      margin-right: 4px; }
    .addNewAssets .addNewAssetsContainer span {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }

.scrolledGifts {
  max-height: 400px;
  overflow: auto;
  width: calc(100% + 48px);
  padding: 0 24px;
  position: relative;
  left: -24px; }

.giftsContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px; }
  .giftsContainer .giftAlert {
    display: flex;
    margin-top: 4px;
    align-items: flex-start;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-left: 8px; }
    .giftsContainer .giftAlert img {
      width: 16px;
      height: 16px;
      object-fit: contain;
      object-position: center;
      display: block;
      position: relative;
      top: -1px;
      margin-right: 4px; }
  .giftsContainer .giftsContainerTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px; }
    .giftsContainer .giftsContainerTitle.withImage {
      display: flex;
      align-items: center; }
      .giftsContainer .giftsContainerTitle.withImage img {
        display: block;
        height: 18px;
        margin-left: 6px; }
  .giftsContainer .giftsContainerSubtitle {
    font-size: 14px;
    line-height: 16px;
    display: block;
    margin-bottom: 8px;
    padding: 0 8px; }
  .giftsContainer .gifts {
    display: flex; }
    .giftsContainer .gifts .gift {
      display: flex;
      flex-direction: column;
      margin-left: 8px;
      padding: 1px;
      background-color: #e6e6e6;
      height: 78px;
      width: 160px;
      cursor: pointer;
      border-radius: 16px; }
      .giftsContainer .gifts .gift.checked {
        background: #00a5e3; }
        .giftsContainer .gifts .gift.checked .giftContainer .giftContent .giftTitle {
          padding: 0; }
          .giftsContainer .gifts .gift.checked .giftContainer .giftContent .giftTitle .giftTitleContainer {
            background: #00a5e3;
            color: #ffffff; }
        .giftsContainer .gifts .gift.checked .giftContainer .giftCheckbox {
          background-image: url("../img/giftSelected.png"); }
      .giftsContainer .gifts .gift.disabled {
        pointer-events: none;
        opacity: 0.6; }
      .giftsContainer .gifts .gift .giftContainer {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 16px; }
        .giftsContainer .gifts .gift .giftContainer .giftCheckbox {
          position: absolute;
          width: 14px;
          height: 14px;
          left: 9px;
          top: 9px;
          background-image: url("../img/giftPlain.png");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat; }
          .giftsContainer .gifts .gift .giftContainer .giftCheckbox input {
            outline: none;
            visibility: hidden; }
        .giftsContainer .gifts .gift .giftContainer .giftContent {
          padding-left: 22px;
          display: flex;
          align-items: center;
          margin: 0;
          flex-direction: row;
          margin-top: 16px; }
          .giftsContainer .gifts .gift .giftContainer .giftContent .giftTitle {
            padding: 1px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            background: #00a5e3;
            border-radius: 100%; }
            .giftsContainer .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background-color: #ffffff;
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 600;
              text-align: center;
              color: #00a5e3;
              border-radius: 100%; }
              .giftsContainer .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer.discount {
                font-size: 10px; }
              .giftsContainer .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer i {
                font-style: normal;
                font-size: 12px;
                line-height: 14px; }
                .giftsContainer .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer i.unlimitedIcon {
                  font-size: 13px;
                  line-height: 0;
                  position: relative;
                  top: 8px; }
          .giftsContainer .gifts .gift .giftContainer .giftContent .giftCategory {
            display: block;
            margin-left: 4px;
            padding-right: 4px;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            color: #212121;
            flex: 1; }

.contentWithScroll {
  display: block;
  max-height: 400px;
  overflow-y: auto;
  padding: 0 24px;
  margin-top: 16px; }
  .contentWithScroll .contactRows {
    display: flex;
    flex-direction: column; }
    .contentWithScroll .contactRows.withBorder .contactRow {
      margin-top: 0;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e6e6e6; }
      .contentWithScroll .contactRows.withBorder .contactRow .boldTitle {
        margin-top: 0 !important; }
      .contentWithScroll .contactRows.withBorder .contactRow:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border: none; }
      .contentWithScroll .contactRows.withBorder .contactRow:before {
        display: none; }
    .contentWithScroll .contactRows .contactRow {
      display: flex;
      flex-direction: column;
      margin-top: 0;
      margin-bottom: 24px;
      position: relative; }
      .contentWithScroll .contactRows .contactRow .boldTitle {
        margin-top: 16px !important; }
        .contentWithScroll .contactRows .contactRow .boldTitle.forCone {
          margin-bottom: 6px;
          position: relative;
          display: flex;
          align-items: center; }
          .contentWithScroll .contactRows .contactRow .boldTitle.forCone .simpleIcon {
            font-size: 24px;
            line-height: 0;
            margin-right: 8px; }
          .contentWithScroll .contactRows .contactRow .boldTitle.forCone .editField {
            font-size: 14px;
            line-height: 0;
            margin-left: 8px;
            cursor: pointer; }
      .contentWithScroll .contactRows .contactRow:before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 1px;
        top: 0;
        left: 0;
        background: #00a5e3; }
      .contentWithScroll .contactRows .contactRow .contactContent {
        padding-left: 12px;
        display: flex;
        flex-direction: column; }
        .contentWithScroll .contactRows .contactRow .contactContent.forCone {
          padding-left: 28px; }
          .contentWithScroll .contactRows .contactRow .contactContent.forCone input {
            border-color: transparent; }
            .contentWithScroll .contactRows .contactRow .contactContent.forCone input:focus {
              border-color: #212121; }
          .contentWithScroll .contactRows .contactRow .contactContent.forCone span {
            margin-bottom: 0;
            font-size: 10px;
            line-height: 11px;
            left: 28px;
            bottom: -2px; }
        .contentWithScroll .contactRows .contactRow .contactContent span {
          display: block;
          margin-bottom: 4px;
          font-size: 16px;
          line-height: 18px; }
        .contentWithScroll .contactRows .contactRow .contactContent .buttonOuter {
          margin-top: 8px; }

.greyIndication {
  background-color: #e6e6e6;
  padding: 8px 12px;
  margin-top: 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  flex: 0 1 100%;
  border-radius: 16px; }
  .greyIndication strong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    display: inline-block !important;
    width: auto !important; }

.flexLabel {
  display: flex !important;
  width: 100%; }

.multipleLabel {
  width: 100%; }

.mainLabel {
  margin-bottom: 12px; }

.subLabel {
  border-bottom: 1px solid rgba(61, 82, 101, 0.1);
  padding-bottom: 4px;
  margin-bottom: 8px; }
  .subLabel:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0; }

.mainLabel strong,
.subLabel strong {
  display: flex !important;
  align-items: center; }
  .mainLabel strong .oneFamilyBadge,
  .subLabel strong .oneFamilyBadge {
    margin-left: 8px !important;
    max-height: 24px; }

.errorImage {
  margin-bottom: 20px; }
  .errorImage img {
    width: 48px; }

.onepRogramDetails {
  display: flex;
  flex-direction: column; }
  .onepRogramDetails.withBorder {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(33, 33, 33, 0.1); }
  .onepRogramDetails .onePorgramTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .onepRogramDetails .onePorgramSubtitle {
    overflow-x: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 2px;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    position: relative; }
    .onepRogramDetails .onePorgramSubtitle.withTooltip {
      padding-right: 18px; }

.onePros.withBorder {
  margin-bottom: 16px;
  padding-bottom: 16px;
  position: relative; }
  .onePros.withBorder:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #00a5e3; }

.modalDetails .imgTooltip.greyTooltip {
  position: absolute;
  bottom: 0;
  right: 0;
  left: unset;
  border: none !important;
  display: inline-block;
  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%; }

.nameserversContent .nameserversList {
  margin: 16px 0;
  padding-left: 16px;
  border-left: 1px solid #9d9d9c;
  margin-left: 16px; }
  .nameserversContent .nameserversList li {
    font-size: 16px;
    line-height: 22px; }

.onboardingTop {
  display: flex;
  background-color: #ffffff;
  margin-top: 16px;
  padding: 0 16px 76px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  align-items: flex-start; }
  .onboardingTop .onboardingRight {
    display: flex;
    flex-direction: column;
    gap: 56px; }
    .onboardingTop .onboardingRight .onboardingLarge {
      position: relative;
      top: 0;
      right: 26px; }
    .onboardingTop .onboardingRight .onboardingMedium {
      position: relative;
      top: 0;
      right: 0; }
      @media only screen and (max-width: 767px) {
        .onboardingTop .onboardingRight .onboardingMedium {
          right: 22px; } }
  .onboardingTop .onboardingBg {
    position: absolute;
    width: 100%;
    left: 0;
    top: 70px;
    z-index: -1; }
    @media only screen and (max-width: 767px) {
      .onboardingTop .onboardingBg {
        top: 112px;
        width: 150%;
        left: -85px; } }
  .onboardingTop .onboardingBg2 {
    position: absolute;
    left: 0;
    top: 48px;
    width: 100%;
    min-width: 418px;
    z-index: -1; }
    @media only screen and (max-width: 767px) {
      .onboardingTop .onboardingBg2 {
        top: 88px;
        width: 150%; } }
  .onboardingTop .onboardingLeft {
    width: 100px;
    padding-right: 12px;
    position: relative;
    left: 0;
    top: 114px; }
    @media only screen and (max-width: 767px) {
      .onboardingTop .onboardingLeft {
        top: 175px; } }
  .onboardingTop .onboardingLeft2 {
    width: 100px;
    padding-right: 16px; }
    @media only screen and (max-width: 767px) {
      .onboardingTop .onboardingLeft2 {
        margin-left: 0;
        padding-right: 0; } }
  .onboardingTop .onboardingRight2 {
    padding-left: 0;
    padding-right: 48px;
    display: flex;
    flex-direction: column;
    gap: 56px; }
    @media only screen and (max-width: 767px) {
      .onboardingTop .onboardingRight2 {
        padding-right: 0; } }
    @media only screen and (max-width: 767px) {
      .onboardingTop .onboardingRight2 .onboardingMedium {
        position: relative;
        right: 14px; } }

.onboardingBottom2 {
  background-color: #ffffff;
  padding: 24px;
  padding-bottom: 26px;
  position: relative;
  border-radius: 0 0 16px 16px; }
  .onboardingBottom2 .onboardingContent {
    margin-top: -50px; }
  .onboardingBottom2 .buttonOuter {
    margin: 16px 0 24px; }
  .onboardingBottom2 ul {
    list-style: disc;
    list-style-position: outside; }
    @media only screen and (max-width: 767px) {
      .onboardingBottom2 ul {
        padding: 8px 20px; } }
    .onboardingBottom2 ul li {
      margin-left: 1em;
      font-size: 20px; }
      .onboardingBottom2 ul li span {
        font-size: 16px; }

.dark .simple-popup-content {
  background-color: #ffffff !important; }

.onboardingLarge {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  display: block; }

.onboardingMedium {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin: 16px 0;
  display: block; }

.onboardingSmall {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  display: block;
  padding: 24px; }

.paymentContentTitle p {
  font-size: 14px; }
  .paymentContentTitle p:first-child {
    margin-top: 0; }
  .paymentContentTitle p a {
    color: #0ea600; }
    .paymentContentTitle p a:hover, .paymentContentTitle p a:focus {
      color: #0ea600; }

.onboarding .acceptTerms label {
  padding: 8px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

@media only screen and (max-width: 767px) {
  .onboarding .inputWithButton {
    flex-flow: column; } }

@media only screen and (max-width: 767px) {
  .onboarding .inputWithButton a:not(.icon-send) {
    margin-left: 0;
    margin-top: 16px;
    width: 100%; } }

.onboarding .paymentInputTitle {
  margin-bottom: 8px;
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.onboarding .relativeBox {
  width: 100%; }

#guide {
  display: none; }

.inputWithButton .icon-send {
  position: absolute;
  right: 8px;
  bottom: 12px;
  color: #0ea600;
  font-size: 24px; }
  .inputWithButton .icon-send.disabled {
    color: #848484;
    pointer-events: none;
    cursor: not-allowed; }

.genericTooltip {
  position: absolute;
  width: 256px;
  max-width: 100% !important;
  z-index: 200 !important; }
  .genericTooltip.right.bottom {
    bottom: 0;
    right: -16px;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%); }
    .genericTooltip.right.bottom.bottom-90 {
      bottom: 90px; }
  @media only screen and (max-width: 767px) {
    .genericTooltip.right {
      right: 0; } }
  .genericTooltip.manageAssetsHomepageTooltip {
    width: 194px; }
  .genericTooltip.eyeTooltip {
    right: -70px;
    bottom: -20px;
    width: 280px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .genericTooltip.eyeTooltip {
        right: -60px;
        width: 260px; } }
    @media only screen and (max-width: 767px) {
      .genericTooltip.eyeTooltip {
        right: 0; } }
    .genericTooltip.eyeTooltip.noSortingButtons {
      right: -88px; }
  .genericTooltip.editInnerTooltip {
    left: 50%;
    bottom: -16px;
    width: 280px;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
  .genericTooltip.editTooltip {
    left: 0;
    bottom: -20px;
    width: 280px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
  .genericTooltip.arrowTooltip {
    right: -106px;
    bottom: -20px;
    width: 270px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .genericTooltip.arrowTooltip {
        right: -66px;
        width: 200px; } }
    @media only screen and (max-width: 767px) {
      .genericTooltip.arrowTooltip {
        right: 0; } }
  .genericTooltip.saveTooltip {
    right: -45px;
    bottom: -16px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    @media only screen and (max-width: 767px) {
      .genericTooltip.saveTooltip {
        right: 0; } }
  .genericTooltip.switchTooltip {
    bottom: 0;
    right: -70px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    @media only screen and (max-width: 767px) {
      .genericTooltip.switchTooltip {
        right: 0; } }
  .genericTooltip.checkBoxesTooltip {
    bottom: 0;
    right: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    @media only screen and (max-width: 767px) {
      .genericTooltip.checkBoxesTooltip {
        right: 0; } }
  .genericTooltip.sortTooltip {
    bottom: 0;
    right: -110px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    @media only screen and (max-width: 767px) {
      .genericTooltip.sortTooltip {
        right: 0; } }
  .genericTooltip.assetsSortIconTooltip {
    width: 194px;
    left: 55px; }
    @media only screen and (max-width: 1024px) {
      .genericTooltip.assetsSortIconTooltip {
        display: none !important; } }
  .genericTooltip.assetsOrdersTootip {
    min-width: 290px;
    left: 30px;
    display: none; }
    @media only screen and (max-width: 480px) {
      .genericTooltip.assetsOrdersTootip {
        display: none !important; } }
  .genericTooltip.firstAssetsSortIconTooltip {
    width: 194px;
    left: 55px; }
  .genericTooltip.storesTooltip {
    right: -104px; }
    @media only screen and (max-width: 767px) {
      .genericTooltip.storesTooltip {
        right: 0; } }
  .genericTooltip.connectionsBoxTooltip {
    left: 50%;
    width: 270px;
    top: -20px;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%); }
    @media only screen and (max-width: 767px) {
      .genericTooltip.connectionsBoxTooltip {
        left: 20%;
        top: -50px;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        transform: translateY(100%); } }
    @media only screen and (max-width: 767px) {
      .genericTooltip.connectionsBoxTooltip .arrow {
        display: none; } }
  .genericTooltip.connectionsBoxColTooltip {
    right: -20px;
    bottom: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%); }
    @media only screen and (max-width: 767px) {
      .genericTooltip.connectionsBoxColTooltip {
        right: 0;
        bottom: -100px;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0); } }
    @media only screen and (max-width: 767px) {
      .genericTooltip.connectionsBoxColTooltip .arrow {
        display: none; } }
  .genericTooltip.largeAccountsTooltip {
    left: 192px;
    top: -12px;
    width: 288px;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
    @media only screen and (max-width: 1024px) {
      .genericTooltip.largeAccountsTooltip {
        display: none !important; } }
  .genericTooltip.largeAccountsSelectTooltip {
    left: 150px;
    bottom: 0;
    width: 268px;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
    @media only screen and (max-width: 1024px) {
      .genericTooltip.largeAccountsSelectTooltip {
        display: none !important; } }
  .genericTooltip.largeAccountsSearchbarTooltip {
    left: 116px;
    bottom: -12px;
    width: 204px;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
    @media only screen and (max-width: 1024px) {
      .genericTooltip.largeAccountsSearchbarTooltip {
        display: none !important; } }
  .genericTooltip.selectBenefitFlow-tooltip {
    bottom: -16px;
    right: -112px;
    width: 220px;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
    @media only screen and (max-width: 480px) {
      .genericTooltip.selectBenefitFlow-tooltip {
        display: none !important; } }
  .genericTooltip.selectBenefitFlow-selectAccountTooltip {
    bottom: 38px;
    right: -116px;
    width: 220px;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
    @media only screen and (max-width: 480px) {
      .genericTooltip.selectBenefitFlow-selectAccountTooltip {
        display: none !important; } }
  .genericTooltip.selectBenefitFlow-labelTooltip {
    bottom: -12px;
    right: -116px;
    width: 220px;
    -webkit-transform: translate(-50%, 100%);
    -moz-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%); }
    @media only screen and (max-width: 480px) {
      .genericTooltip.selectBenefitFlow-labelTooltip {
        display: none !important; } }
  .genericTooltip.largeAccountsSidebarTooltip {
    left: 0;
    top: 104px;
    width: 196px;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0); }
    @media only screen and (max-width: 1024px) {
      .genericTooltip.largeAccountsSidebarTooltip {
        display: none !important; } }
  .genericTooltip.largeAccountsBottomSidebarTooltip {
    left: -16px;
    bottom: -80px;
    width: 212px;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0); }
    @media only screen and (max-width: 1024px) {
      .genericTooltip.largeAccountsBottomSidebarTooltip {
        display: none !important; } }
  .genericTooltip .visitLink {
    color: #0e8103;
    margin-top: 8px; }

.boxWithTooltip {
  position: relative; }
  .boxWithTooltip.sideColumnTooltipBottom {
    margin-bottom: 40px; }

body .arrow.middle.leftCorner {
  left: -43px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg); }

body .arrow.middle.rightCorner {
  right: -43px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg); }

body .arrow.top.middle {
  top: -16px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%); }

body .arrow.top.leftCorner {
  top: -7px;
  left: 0px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%); }

body .arrow.top.rightCorner {
  top: -7px;
  left: 80%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%); }

.tutorialBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px; }
  .tutorialBox .tutorialBoxCol {
    cursor: pointer;
    display: flex;
    flex-flow: column;
    background-color: #e6e6e6;
    border-radius: 16px;
    padding: 1px;
    width: 130px;
    height: 110px; }
    @media only screen and (max-width: 767px) {
      .tutorialBox .tutorialBoxCol {
        width: 90px;
        height: 140px; } }
    .tutorialBox .tutorialBoxCol.active {
      background: #00a5e3; }
    .tutorialBox .tutorialBoxCol .tutorialBoxColContent {
      display: flex;
      flex-flow: column;
      padding: 6px;
      background-color: #ffffff;
      width: 100%;
      height: 100%;
      border-radius: 15px; }
      .tutorialBox .tutorialBoxCol .tutorialBoxColContent i {
        font-size: 12px;
        height: 16px;
        width: 16px;
        display: flex;
        align-items: center;
        justify-content: center; }
        .tutorialBox .tutorialBoxCol .tutorialBoxColContent i.icon-switch {
          position: relative;
          left: 4px; }
      .tutorialBox .tutorialBoxCol .tutorialBoxColContent .simpleText {
        margin-top: 4px;
        font-size: 12px;
        line-height: 12px; }

.manageOnboarding .paymentStepsBar {
  max-width: 350px;
  margin: 8px auto; }

.manageOnboarding .paymentSteps .paymentStepsContainer {
  padding: 16px 24px 24px; }

.manageOnboarding .genericTooltip:not(.homeTooltip) {
  display: none; }

@media only screen and (max-width: 1024px) {
  .manageOnboarding .homeTooltip {
    display: none !important; } }

@media only screen and (max-width: 767px) {
  .manageOnboarding .paymentSteps {
    margin-top: 52px; } }

.indicationBlue.disabled {
  background-color: rgba(61, 82, 101, 0.4);
  pointer-events: none; }

.simpleContent {
  padding: 12px 16px 16px;
  background-color: #ffffff;
  display: flex;
  flex-flow: column;
  border-radius: 0 0 16px 16px; }
  .simpleContent .simpleContentTitle {
    font-size: 14px; }

.editInput {
  display: none; }
  .editInput i {
    color: #0ea600;
    position: absolute;
    right: 0;
    bottom: 2px;
    pointer-events: none; }
  .editInput .simpleInput {
    line-height: 26px !important;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    max-width: 240px; }

.editInputInner {
  display: none;
  margin-right: 12px; }
  .editInputInner i {
    color: #0ea600;
    position: absolute;
    right: 0;
    top: 50%;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }
    .editInputInner i.icon-send {
      font-size: 16px;
      pointer-events: all;
      cursor: pointer; }
  .editInputInner .simpleInput {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    height: 18px !important; }
    .editInputInner .simpleInput.largeFonts {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      height: 26px !important; }

.detailsBox .detailsContent .rightPadding {
  padding-right: 50px; }
  @media only screen and (max-width: 767px) {
    .detailsBox .detailsContent .rightPadding {
      padding-right: 0; } }

.detailsBox .detailsContent .booster {
  width: calc(100% + 32px);
  position: relative;
  left: -16px;
  margin-top: 16px;
  padding: 0 16px;
  background-color: #e6e6e6; }
  .detailsBox .detailsContent .booster.withBoosterPopup {
    cursor: pointer; }
  .detailsBox .detailsContent .booster .boosterIcon {
    -webkit-border-radius: 0 15px 0 0;
    -moz-border-radius: 0 15px 0 0;
    border-radius: 0 15px 0 0;
    position: absolute;
    width: 24px;
    right: 0;
    top: 0;
    z-index: 1; }
  .detailsBox .detailsContent .booster .detailsContentLeft {
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    padding-bottom: 16px; }
    .detailsBox .detailsContent .booster .detailsContentLeft.smallTop {
      padding-top: 18px;
      padding-right: 20px; }
      @media only screen and (max-width: 767px) {
        .detailsBox .detailsContent .booster .detailsContentLeft.smallTop {
          padding-right: 0; } }
    .detailsBox .detailsContent .booster .detailsContentLeft .boosterTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      display: block;
      margin-bottom: 4px; }
    .detailsBox .detailsContent .booster .detailsContentLeft .boosterText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      display: block;
      margin-bottom: 4px; }
  .detailsBox .detailsContent .booster .detailsContentRight {
    margin: 10px 0 8px; }
    .detailsBox .detailsContent .booster .detailsContentRight .dataRemaining.boosterPending {
      width: 96px;
      height: 96px;
      display: flex;
      align-items: center;
      background: linear-gradient(#f0f1f3, #f0f1f3) padding-box, #00a5e3 border-box;
      border: 2px dotted #f2f2f3;
      margin: auto;
      border-radius: 100%; }
      .detailsBox .detailsContent .booster .detailsContentRight .dataRemaining.boosterPending.inactive {
        opacity: 0.6; }
      .detailsBox .detailsContent .booster .detailsContentRight .dataRemaining.boosterPending .boosterContent {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center; }
        .detailsBox .detailsContent .booster .detailsContentRight .dataRemaining.boosterPending .boosterContent .dataRemainingNumber {
          margin-top: 0; }
    .detailsBox .detailsContent .booster .detailsContentRight .dataRemaining .dataRemainingNumber.unlimmited i {
      font-size: 19px; }
    .detailsBox .detailsContent .booster .detailsContentRight .dataRemaining .dataSymbolContainer .dataSymbol {
      background-color: #e6e6e6;
      margin-top: 10px;
      position: relative;
      z-index: 1; }

.boosterLinkRight {
  text-align: right;
  padding-right: 16px; }

.modalDetails.boosterPadding {
  padding: 32px; }

.modalDetails .boosterDetails {
  overflow: visible !important;
  min-height: 0 !important; }

.modalText .gradientText {
  color: #00a5e3;
  display: block;
  margin-top: 8px; }

.modalText .boosterBold {
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.modalText .boosterSimple {
  display: block;
  margin-top: 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.modalText .boosterAlert {
  display: flex;
  margin-top: 20px; }
  .modalText .boosterAlert img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    object-position: center;
    margin-right: 8px;
    margin-top: -6px; }
  .modalText .boosterAlert span {
    font-size: 14px;
    line-height: 14px;
    text-align: left; }

.modalText .boosterBox {
  display: block;
  padding: 16px;
  background-color: #e6e6e6;
  width: calc(100% + 32px);
  position: relative;
  left: -16px;
  margin-top: 28px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: left;
  border-radius: 12px; }
  .modalText .boosterBox .buttonOuter {
    margin-top: 8px;
    text-align: center; }
    .modalText .boosterBox .buttonOuter .button {
      min-width: 124px; }

.packageImageIcon {
  padding-right: 4px;
  width: 25px;
  margin-left: -4px;
  position: relative;
  left: 2px; }

.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', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          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: #e20074;
          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: #e20074;
          border: none; }
        .paymentSteps .paymentStepsContainer .paymentStepsBar .stepCol.active .stepText {
          color: #212121; }

.paymentContent {
  padding: 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 .buttonOuter.center {
      align-self: center; }
  .paymentContent .paymentContentTopMessage {
    display: block;
    margin-bottom: 16px;
    margin-top: -16px;
    text-align: right; }
  .paymentContent .paypentParagraphBottom {
    margin: 0; }
  .paymentContent .paymentContentTitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      padding: 12px 8px;
      border-radius: 16px;
      padding: 12px 8px;
      color: #0e8103;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      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', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700; }
        @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', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        letter-spacing: 0;
        margin-top: 4px; }
      .paymentContent .billActions .billAction.blueLink {
        display: inline-block;
        width: auto;
        color: #212121;
        margin-left: 24px;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700; }
        @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', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700; }
      .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: 64px;
    display: flex;
    flex-flow: column;
    margin-bottom: 16px; }
    .paymentContent .paymentWithIcon img {
      height: 48px;
      position: absolute;
      left: 0;
      top: 0; }
    .paymentContent .paymentWithIcon .paymentWithIconTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700;
      margin-bottom: 4px; }
    .paymentContent .paymentWithIcon .paymentWithIconDescription {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .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', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      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', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        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', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        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', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400; }
            .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsTitle .programDetailsSubtitle.small {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 400;
              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', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol .programDetailsColRight {
            margin-left: auto;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            padding-right: 0; }
          .paymentContent .paymentDetails.renewDetails .programDetails .programDetailsCol p {
            margin: 0;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            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', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 400; }
              .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', sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400; }
              .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', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
      .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', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400; }
      .paymentContent .paymentDetails.chooseOption .smallText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        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', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        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', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
        .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue).withStrongText {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
          .paymentContent .paymentDetails .paymentDetailsCol span:not(.diaFromValue):not(.diaToValue):not(.diaEditFromValue):not(.diaEditToValue).withStrongText strong {
            font-family: 'PeridotPE-Bold', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 700; }
        .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', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        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', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
  .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', sans-serif;
      font-size: 24px;
      line-height: 28px;
      font-weight: 700;
      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: #e20074;
          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', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        width: 100%;
        display: block; }
        .paymentBox .numbersRow li span.strong {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600; }
  .paymentBox .paymentBoxTitle {
    margin-bottom: 12px; }
  .paymentBox .paymentInputTitle {
    margin-bottom: 8px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

.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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  display: flex;
  margin: 32px 0 8px; }

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

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

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

.acceptTermsBottom-label {
  color: #212121;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  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.fullFieldWidth {
    max-width: none !important;
    margin: 16px 0 !important; }
  .paymentMethod .paymentSelectContainer .paymentSelectTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    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', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          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', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600; }
          .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxDetailsInner .recurringPaymentPromptBoxDetailsSubtitle {
            margin-top: 12px;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .recurringPaymentPromptBox .recurringPaymentPromptBoxContainer .recurringPaymentPromptBoxContent .recurringPaymentPromptBoxText .recurringPaymentPromptBoxDetailsInner .recurringPaymentPromptBoxDetailsText {
            margin-top: 4px;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400; }

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

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

.paymentMethod .inlineRadios {
  display: flex;
  align-items: center; }
  .paymentMethod .inlineRadiosTop {
    align-items: flex-start; }
  .paymentMethod .inlineRadios.fullWidth {
    justify-content: space-between; }

.paymentMethod .transferSelectContainer {
  position: relative;
  display: flex;
  flex-flow: column;
  margin: 16px 0 32px;
  max-width: 384px; }
  .paymentMethod .transferSelectContainer.transferInput {
    margin-top: 32px;
    margin-bottom: 8px;
    max-width: 414px; }
  .paymentMethod .transferSelectContainer .transferSelectTitle {
    color: #848484;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 4px; }

.fixedPackages {
  display: flex;
  width: 100%;
  max-width: 488px;
  margin: 24px auto 0; }
  .fixedPackages .numbersRow {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 100%; }
    .fixedPackages .numbersRow li {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      width: auto;
      margin: 0 4px 8px; }
      .fixedPackages .numbersRow li:before {
        display: none !important; }
      .fixedPackages .numbersRow li.active .main {
        color: #212121;
        background-color: #ffffff;
        border: 2px solid #e20074; }
      .fixedPackages .numbersRow li .main {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 42px;
        border: 1px solid #e6e6e6;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 22px;
        line-height: 24px;
        font-weight: 600;
        background-color: #ffffff;
        color: #212121;
        position: relative;
        z-index: 2;
        border-radius: 16px; }
        .fixedPackages .numbersRow li .main i {
          font-size: 18px;
          line-height: 20px;
          font-style: normal;
          margin-left: 1px;
          position: relative;
          top: 2px; }
      .fixedPackages .numbersRow li .footer {
        display: block;
        text-align: center;
        padding: 8px 4px 4px;
        width: 60px;
        height: auto;
        background-color: transparent;
        border: 1px dotted #e6e6e6;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        position: relative;
        z-index: 1;
        top: -4px;
        color: #212121;
        border-radius: 16px; }

.renewals .warningBox {
  max-width: 576px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px 8px 12px; }
  @media only screen and (max-width: 767px) {
    .renewals .warningBox {
      width: calc(100% - 12px); } }
  .renewals .warningBox img {
    display: block;
    height: 24px;
    margin-right: 8px; }
  .renewals .warningBox span {
    display: block;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }

.renewals .megaFilterContainer {
  max-width: 576px; }
  @media only screen and (max-width: 767px) {
    .renewals .megaFilterContainer {
      padding-right: 12px; } }
  @media only screen and (max-width: 767px) {
    .renewals .megaFilterContainer.fullWidth {
      padding-right: 0; } }
  .renewals .megaFilterContainer .megaFilterTop {
    display: flex;
    flex-flow: row; }
    @media only screen and (max-width: 480px) {
      .renewals .megaFilterContainer .megaFilterTop {
        flex-flow: column; } }
  @media only screen and (max-width: 480px) {
    .renewals .megaFilterContainer .megaFilter .megaFilterContent:first-child {
      margin-right: 0;
      margin-bottom: 12px; } }
  .renewals .megaFilterContainer .megaFilterBottom {
    display: block;
    margin-top: 20px;
    align-self: center; }
    .renewals .megaFilterContainer .megaFilterBottom.alignStart {
      align-self: start;
      margin-top: 0;
      padding: 8px 0 8px; }
    .renewals .megaFilterContainer .megaFilterBottom a {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      color: #212121;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: -4px; }
      .renewals .megaFilterContainer .megaFilterBottom a i {
        padding-left: 8px;
        font-size: 24px;
        line-height: 24px;
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        transform: scaleY(1); }
        .renewals .megaFilterContainer .megaFilterBottom a i.active {
          -webkit-transform: scaleY(-1);
          -moz-transform: scaleY(-1);
          transform: scaleY(-1); }

.renewals .megaFilterExpanded .resultsGroupContainer {
  max-height: 110px !important; }
  .renewals .megaFilterExpanded .resultsGroupContainer.withoutShadow {
    margin-bottom: 0; }
    .renewals .megaFilterExpanded .resultsGroupContainer.withoutShadow:before {
      display: none; }

@media only screen and (max-width: 767px) {
  .paymentMethod .inlineRadios.giftSelectionRadios {
    flex-flow: column;
    align-items: flex-start; } }

@media only screen and (max-width: 767px) {
  .renewals .paymentSteps .paymentStepsContainer {
    padding: 36px 28px 78px; } }

.offerListComponent {
  z-index: 2; }
  .offerListComponent .offerList .slick-prev {
    display: none !important;
    left: -12px;
    top: calc(50% - 10px);
    opacity: 1;
    line-height: 0;
    width: 44px;
    height: calc(100% - 18px);
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 2;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%); }
    @media only screen and (max-width: 480px) {
      .offerListComponent .offerList .slick-prev {
        display: none !important; } }
    .offerListComponent .offerList .slick-prev.active {
      display: inline-block !important; }
      @media only screen and (max-width: 767px) {
        .offerListComponent .offerList .slick-prev.active {
          display: none !important; } }
      .offerListComponent .offerList .slick-prev.active.slick-disabled {
        display: none !important; }
    .offerListComponent .offerList .slick-prev:before {
      font-family: 'icomoon';
      content: '\e900';
      color: #212121;
      opacity: 1;
      font-size: 34px; }
  .offerListComponent .offerList .slick-next {
    right: 0;
    top: calc(50% - 10px);
    opacity: 1;
    line-height: 0;
    width: 44px;
    height: calc(100% - 18px);
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%); }
    @media only screen and (max-width: 767px) {
      .offerListComponent .offerList .slick-next {
        display: none !important; } }
    .offerListComponent .offerList .slick-next:before {
      font-family: 'icomoon';
      content: '\e901';
      color: #212121;
      opacity: 1;
      font-size: 34px; }
  .offerListComponent .offerList .slick-list {
    padding: 32px 5% 32px 12px;
    margin-left: -12px; }
    @media only screen and (max-width: 480px) {
      .offerListComponent .offerList .slick-list {
        padding: 0;
        margin-left: 0; } }
    .offerListComponent .offerList .slick-list .slick-track {
      margin: 0; }
      .offerListComponent .offerList .slick-list .slick-track .slick-slide {
        margin: 0 16px 5px 0;
        border: none;
        outline: none; }
        @media only screen and (max-width: 480px) {
          .offerListComponent .offerList .slick-list .slick-track .slick-slide {
            margin: 0 4px 5px 0; } }
  .offerListComponent .offerListTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    width: 100%;
    display: block;
    margin-bottom: 12px; }

.comparedDetails {
  height: 56vh;
  overflow-y: auto; }

.offerListItem {
  display: flex;
  flex-flow: column;
  position: relative;
  border-radius: 16px; }
  .offerListItem:before {
    content: '';
    display: none;
    height: calc(100% + 50px);
    position: absolute;
    left: -8px;
    top: -32px;
    background: #e6e6e6;
    opacity: 0.08;
    z-index: -1;
    border-radius: 16px; }
    @media only screen and (max-width: 767px) {
      .offerListItem:before {
        display: none !important; } }
  .offerListItem.offerBox {
    margin: 0 16px 5px 0 !important; }
  .offerListItem.oneOffer:before {
    display: block;
    width: calc(100% + 16px); }
  .offerListItem.twoOffer:before {
    display: block;
    width: calc(200% + 32px); }
  .offerListItem.threeOffer:before {
    display: block;
    width: calc(300% + 48px); }
  .offerListItem.fourOffer:before {
    display: block;
    width: calc(400% + 64px); }
  .offerListItem.fiveOffer:before {
    display: block;
    width: calc(500% + 80px); }
  .offerListItem a {
    outline: none !important;
    border: none !important; }
    .offerListItem a.whiteButton-offers {
      border: 1px solid #212121 !important; }
  .offerListItem .offerListItemHeader {
    min-height: 24px;
    padding: 12px;
    position: relative;
    background-color: #ffffff;
    border-radius: 16px 16px 0 0; }
    .offerListItem .offerListItemHeader.withImage {
      padding-left: 120px;
      padding-right: 120px; }
      @media only screen and (max-width: 480px) {
        .offerListItem .offerListItemHeader.withImage {
          padding-left: 0; } }
    .offerListItem .offerListItemHeader .titleImg {
      position: absolute;
      left: 16px;
      top: 20px;
      z-index: 2;
      width: 98px;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%); }
      @media only screen and (max-width: 480px) {
        .offerListItem .offerListItemHeader .titleImg {
          display: none; } }
    .offerListItem .offerListItemHeader .offerListItemTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      width: 100%;
      display: block;
      text-align: center; }
      @media only screen and (max-width: 480px) {
        .offerListItem .offerListItemHeader .offerListItemTitle {
          text-align: left;
          padding-left: 12px; } }
    .offerListItem .offerListItemHeader .offerBadge {
      background-color: #e20074;
      height: 100%;
      padding: 3px;
      color: #ffffff;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      flex-flow: row;
      align-items: center;
      -webkit-border-radius: 0 15px 0 0;
      -moz-border-radius: 0 15px 0 0;
      border-radius: 0 15px 0 0; }
      .offerListItem .offerListItemHeader .offerBadge img {
        margin: 0 4px 0 2px;
        height: 16px;
        width: 16px; }
  .offerListItem .offerListItemContent {
    display: flex;
    flex-flow: row; }
    .offerListItem .offerListItemContent .offerListItemContentLeft {
      display: flex;
      flex-flow: column;
      width: 70%; }
      @media only screen and (max-width: 480px) {
        .offerListItem .offerListItemContent .offerListItemContentLeft {
          width: 60%; } }
      .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails {
        display: flex;
        flex-flow: column;
        background-color: #ffffff;
        height: 200px;
        padding: 16px;
        justify-content: space-between; }
        @media only screen and (max-width: 480px) {
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails {
            height: 240px; } }
        .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop {
          display: flex;
          flex-flow: column;
          position: relative;
          gap: 12px; }
          @media only screen and (max-width: 480px) {
            .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop {
              top: 0;
              flex-flow: column;
              margin-top: 30px !important; } }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop-container {
            display: flex;
            flex-direction: column;
            margin: 48px 0 0 !important; }
            .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop-container-row {
              display: flex;
              flex-wrap: wrap; }
              .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop-container-row:last-child {
                margin-bottom: 0; }
            @media only screen and (max-width: 480px) {
              .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop-container {
                margin-bottom: 16px !important; } }
            .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop-container div {
              min-width: 164px;
              margin-bottom: 16px;
              padding-right: 12px !important;
              flex: 1; }
              @media only screen and (max-width: 480px) {
                .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop-container div {
                  padding-right: 0;
                  align-items: flex-start;
                  margin: 2px 0; } }
              .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop-container div i {
                min-width: 24px; }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop div br {
            display: none; }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop div {
            align-items: center;
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            display: flex;
            padding-right: 4%; }
            @media only screen and (max-width: 480px) {
              .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop div {
                padding-right: 0;
                align-items: center;
                margin: 2px 0; } }
            .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop div #text {
              margin-right: 2px; }
            .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop div:last-child {
              padding-right: 0; }
            .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop div i {
              color: #212121;
              padding: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
              text-align: center;
              font-size: 24px;
              margin-right: 4px; }
              @media only screen and (max-width: 480px) {
                .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsTop div i {
                  align-self: flex-start; } }
        .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsBottom .giftBox {
          display: inline-flex;
          -webkit-border-radius: 22px;
          -moz-border-radius: 22px;
          border-radius: 22px;
          padding: 6px 20px 6px 6px;
          flex-flow: row;
          align-items: center; }
          @media only screen and (max-width: 767px) {
            .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsBottom .giftBox {
              padding: 6px 12px 6px 6px; } }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsBottom .giftBox i {
            font-size: 24px;
            color: #e20074;
            margin-right: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%; }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsBottom .giftBox .giftTitle {
            margin-left: 16px;
            display: block;
            width: 100%;
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            color: #212121; }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsBottom .giftBox .giftChange {
            padding: 12px 16px;
            font-family: 'PeridotPE-Bold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 700; }
            @media only screen and (max-width: 767px) {
              .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemDetails .offerListItemDetailsBottom .giftBox .giftChange {
                font-family: 'PeridotPE-Bold', sans-serif;
                font-size: 12px;
                line-height: 16px;
                font-weight: 700; } }
      .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemCompare {
        background-color: #ffffff;
        padding: 16px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        border-radius: 0 0 0 16px; }
        .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemCompare.businessCompare {
          height: 40px; }
        .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemCompare .offerListItemCompareDescription {
          position: relative;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          max-width: 350px;
          display: flex;
          flex-flow: row;
          align-items: flex-start; }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemCompare .offerListItemCompareDescription img {
            margin-right: 4px; }
            @media only screen and (max-width: 480px) {
              .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemCompare .offerListItemCompareDescription img {
                display: none; } }
        .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemCompare .offerDetails {
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 700;
          color: #212121;
          display: flex;
          align-items: center;
          justify-content: center; }
          .offerListItem .offerListItemContent .offerListItemContentLeft .offerListItemCompare .offerDetails i {
            padding-left: 12px;
            font-size: 18px; }
    .offerListItem .offerListItemContent .offerListItemContentRight {
      display: flex;
      flex-flow: column;
      width: 30%;
      justify-content: space-between;
      background-color: #ffffff;
      padding: 12px 6px 24px 7px;
      position: relative;
      border-radius: 0 0 16px 0; }
      @media only screen and (max-width: 480px) {
        .offerListItem .offerListItemContent .offerListItemContentRight {
          width: 40%;
          height: 366px; } }
      .offerListItem .offerListItemContent .offerListItemContentRight.businessContentRight {
        height: 240px; }
        @media only screen and (max-width: 480px) {
          .offerListItem .offerListItemContent .offerListItemContentRight.businessContentRight {
            height: 280px; } }
      .offerListItem .offerListItemContent .offerListItemContentRight:before {
        width: 1px;
        height: 100%;
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        background: #e6e6e6;
        z-index: 2; }
      .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight {
        text-align: center; }
        .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .toPay {
          width: 100%;
          display: block;
          position: relative;
          margin-top: 18px;
          margin-bottom: -6px;
          padding-left: 20px; }
          .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .toPay .euros {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700;
            letter-spacing: -2px;
            position: relative; }
            @media only screen and (max-width: 767px) {
              .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .toPay .euros {
                font-family: 'BTCosmo-Bold', sans-serif;
                font-size: 24px;
                line-height: 28px;
                font-weight: 700; } }
            .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .toPay .euros .imgEuro {
              display: none; }
          .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .toPay .cents {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            position: relative;
            bottom: 2px; }
          .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .toPay .oldPrice {
            position: absolute;
            top: -18px;
            right: 6px;
            font-size: 14px;
            line-height: 17px; }
        .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .paymentDeadline {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          width: 100%;
          display: block;
          margin: 6px 0; }
      .offerListItem .offerListItemContent .offerListItemContentRight .offerDiscount {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center; }
        .offerListItem .offerListItemContent .offerListItemContentRight .offerDiscount span {
          width: 100%;
          display: block; }
          .offerListItem .offerListItemContent .offerListItemContentRight .offerDiscount span.discountTitle {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600; }
          .offerListItem .offerListItemContent .offerListItemContentRight .offerDiscount span.discountNumber {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            color: #0e8103;
            padding-bottom: 10px;
            margin-bottom: 14px;
            margin-top: 2px;
            border-bottom: 1px solid rgba(33, 33, 33, 0.1); }
          .offerListItem .offerListItemContent .offerListItemContentRight .offerDiscount span.discountDescription {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400; }
      .offerListItem .offerListItemContent .offerListItemContentRight .buttonOuter {
        text-align: center; }
        .offerListItem .offerListItemContent .offerListItemContentRight .buttonOuter .primaryButtonNormal {
          width: 100%;
          max-width: 136px;
          min-width: 0; }

.rateplan .offerListItem .offerListItemContent .offerListItemContentRight .buttonOuter .primaryButtonNormal {
  max-width: 100%;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700; }

.rateplan .offerListComponent .offerList .slick-list {
  padding: 32px 5% 18px 12px; }
  @media only screen and (max-width: 480px) {
    .rateplan .offerListComponent .offerList .slick-list {
      padding: 0; } }

.fixedHeight .offerListComponent .offerList .slick-next,
.fixedHeight .offerListComponent .offerList .slick-prev {
  top: 193px;
  height: 388px; }

.fixedHeight.renewals .toggleContent {
  top: -4px;
  margin-bottom: -4px; }

.fixedHeightBusiness .offerListComponent .offerList .slick-next,
.fixedHeightBusiness .offerListComponent .offerList .slick-prev {
  top: 153px;
  height: 310px; }

.fixedHeightBusiness.renewals .toggleContent {
  top: -4px;
  margin-bottom: -4px; }

.renewalsRelativeBox {
  position: relative;
  z-index: 2;
  border-radius: 16px; }
  .renewalsRelativeBox .offerDetails i {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
    .renewalsRelativeBox .offerDetails i.active {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }

.largerTopMarginOnMobile {
  margin-top: 12px !important; }

.longTextLabel {
  white-space: normal;
  /* default, allows wrapping */
  overflow: visible;
  text-overflow: clip;
  transition: all 0.3s ease; }

/* On focus, force single line and ellipsis */
.group.focused .longTextLabel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

@media screen and ((max-width: 480px)) {
  .xl-TextLabel {
    bottom: 0px !important; }
  .group input:focus + .xl-TextLabel {
    bottom: 48px !important; }
  .group input:focus + .longTextLabel {
    margin-top: 20px;
    bottom: 48px !important; }
  .largerTopMarginOnMobile {
    margin-top: 32px !important; } }

.giftSelection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0; }
  @media only screen and (max-width: 767px) {
    .giftSelection {
      display: none; } }
  .giftSelection .packageListItem {
    width: 148px;
    min-height: 215px;
    display: flex;
    flex-flow: column;
    background-color: #f2f2f3;
    overflow: hidden;
    padding-bottom: 1px;
    border-radius: 16px;
    border: 1px solid #e6e6e6; }
    .giftSelection .packageListItem.active {
      min-height: 230px;
      width: 178px; }
      .giftSelection .packageListItem.active .packageListImage {
        min-height: 94px; }
      .giftSelection .packageListItem.active .packageListContent {
        font-size: 16px;
        line-height: 16px; }
    .giftSelection .packageListItem .packageListImage {
      height: 75px;
      background-color: #ffffff;
      display: flex;
      align-items: center; }
      .giftSelection .packageListItem .packageListImage img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    .giftSelection .packageListItem .linearGradient {
      height: 2px;
      width: 100%;
      display: block;
      background: #00a5e3; }
    .giftSelection .packageListItem .packageListContent {
      height: 96px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      padding: 6px; }

.compareContent {
  display: flex;
  flex-flow: column;
  margin-top: 32px; }
  .compareContent .comparedPrograms {
    padding: 17px;
    display: flex;
    justify-content: space-between; }
    .compareContent .comparedPrograms .program {
      display: flex;
      flex-flow: column;
      text-align: center; }
      .compareContent .comparedPrograms .program img {
        padding: 8px; }
      .compareContent .comparedPrograms .program .programName {
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 6px; }
  .compareContent .linearGradient {
    height: 2px;
    width: 100%;
    display: block;
    background: #00a5e3; }
  .compareContent .comparedCol {
    display: flex;
    justify-content: space-between;
    padding: 24px;
    position: relative; }
    .compareContent .comparedCol:nth-child(2n) {
      background-color: #f2f2f3; }
    .compareContent .comparedCol .comparedColTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      position: absolute;
      left: 0;
      top: 8px;
      width: 100%;
      display: block;
      text-align: center; }
    .compareContent .comparedCol .detailsContentRight {
      text-align: center; }
      .compareContent .comparedCol .detailsContentRight .toPay {
        width: 100%;
        display: block;
        position: relative;
        margin-top: 18px;
        margin-bottom: -6px;
        padding-left: 20px; }
        @media only screen and (max-width: 767px) {
          .compareContent .comparedCol .detailsContentRight .toPay {
            margin-top: 46px;
            padding-left: 0; } }
        .compareContent .comparedCol .detailsContentRight .toPay .euros {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 32px;
          line-height: 36px;
          font-weight: 700;
          letter-spacing: -2px;
          position: relative; }
          @media only screen and (max-width: 767px) {
            .compareContent .comparedCol .detailsContentRight .toPay .euros {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 32px;
              line-height: 36px;
              font-weight: 700; } }
          .compareContent .comparedCol .detailsContentRight .toPay .euros .imgEuro {
            display: none; }
        .compareContent .comparedCol .detailsContentRight .toPay .cents {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          position: relative;
          bottom: 2px; }
        .compareContent .comparedCol .detailsContentRight .toPay .oldPrice {
          position: absolute;
          top: -18px;
          right: 6px;
          font-size: 14px;
          line-height: 17px; }
      .compareContent .comparedCol .detailsContentRight .paymentDeadline {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        width: 100%;
        display: block;
        margin: 6px 0; }
      .compareContent .comparedCol .detailsContentRight .dataRemaining {
        display: flex;
        flex-flow: column;
        position: relative;
        margin: 24px 0 10px;
        height: 94px;
        width: 120px; }
        .compareContent .comparedCol .detailsContentRight .dataRemaining .donut {
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          align-items: center;
          width: 100%; }
          .compareContent .comparedCol .detailsContentRight .dataRemaining .donut .donutBackground {
            -webkit-transform: rotate(125deg);
            -moz-transform: rotate(125deg);
            transform: rotate(125deg);
            transform-origin: center;
            stroke: #e6e6e6; }
          .compareContent .comparedCol .detailsContentRight .dataRemaining .donut .donutColor {
            -webkit-transform: rotate(125deg);
            -moz-transform: rotate(125deg);
            transform: rotate(125deg);
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
            color: #00a5e3 !important;
            stroke: #00a5e3 !important;
            transform-origin: center; }
        .compareContent .comparedCol .detailsContentRight .dataRemaining .dataRemainingNumber {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 32px;
          line-height: 36px;
          font-weight: 700;
          margin-top: 36px; }
          .compareContent .comparedCol .detailsContentRight .dataRemaining .dataRemainingNumber.withAlert {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            margin-top: 32px; }
            .compareContent .comparedCol .detailsContentRight .dataRemaining .dataRemainingNumber.withAlert span {
              font-family: 'PeridotPE-ExtraBlack', sans-serif;
              font-size: 10px;
              line-height: 12px;
              font-weight: 800;
              width: 100%;
              display: block;
              text-align: center;
              margin-bottom: 4px; }
          .compareContent .comparedCol .detailsContentRight .dataRemaining .dataRemainingNumber.withSpeed {
            font-size: 26px; }
        .compareContent .comparedCol .detailsContentRight .dataRemaining .dataSymbolContainer .dataSymbol {
          display: inline-block;
          margin: auto;
          width: auto;
          font-family: 'PeridotPE-ExtraBlack', sans-serif;
          font-size: 10px;
          line-height: 12px;
          font-weight: 800;
          background-color: #e6e6e6;
          padding: 4px;
          border-radius: 4px; }

.paymentMethod .renewSelectContainer {
  position: relative;
  display: flex;
  flex-flow: column;
  margin: 8px 0;
  max-width: 100%; }
  .paymentMethod .renewSelectContainer .renewSelectTitle {
    color: #212121;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 4px; }
  .paymentMethod .renewSelectContainer.mobilePhoneGroup {
    gap: 48px; }

.boldTitle {
  width: 100%;
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 12px; }
  .boldTitle.withIcon {
    position: relative;
    padding-left: 24px;
    margin-bottom: 4px; }
    .boldTitle.withIcon i {
      font-size: 20px;
      line-height: 20px;
      position: absolute;
      left: 0;
      top: 0; }
      .boldTitle.withIcon i.icon-euros {
        font-size: 20px; }

.programDetails {
  display: flex;
  flex-flow: column;
  padding-bottom: 16px;
  border-bottom: 1px solid #9d9d9c;
  padding-left: 8px;
  gap: 8px; }
  .programDetails.withLeftPadding {
    padding-left: 24px; }
  .programDetails .programDetailsTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 3px; }
  .programDetails .programDetailsCol {
    display: flex;
    align-items: center;
    margin: 3px 0; }
    .programDetails .programDetailsCol .programDetailsColRight {
      margin-left: auto;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      padding-right: 24px;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .programDetails .programDetailsCol .programDetailsColRight {
          padding-right: 0; } }
      .programDetails .programDetailsCol .programDetailsColRight .imgTooltip {
        position: absolute;
        right: 0;
        top: 2px;
        display: inline-block;
        margin: 0;
        margin-left: 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%; }
        @media only screen and (max-width: 767px) {
          .programDetails .programDetailsCol .programDetailsColRight .imgTooltip {
            width: 14px;
            height: 14px;
            font-size: 12px;
            line-height: 14px;
            position: relative;
            left: 8px;
            top: 0; } }

.detailsBox.popupDetails {
  padding: 0 24px;
  border-bottom: 1px solid rgba(61, 82, 101, 0.12); }
  .detailsBox.popupDetails .packageInfo {
    margin: 20px 0 0px; }

.inlineCol {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(33, 33, 33, 0.1);
  padding-bottom: 8px;
  margin-bottom: 9px;
  align-items: flex-end; }
  @media only screen and (max-width: 767px) {
    .inlineCol {
      align-items: center; } }
  .inlineCol.noBorder {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: -8px; }
  .inlineCol .boldTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .inlineCol .tableCol {
    flex: 1;
    text-align: left; }
    .inlineCol .tableCol.multiText {
      display: flex;
      flex-flow: column;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
      .inlineCol .tableCol.multiText strong {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        font-weight: normal; }

.withdrawContent {
  display: flex;
  align-items: center;
  padding: 24px 0 8px; }
  @media only screen and (max-width: 767px) {
    .withdrawContent {
      flex-direction: column;
      align-items: flex-start; } }
  .withdrawContent .inlineRadios {
    display: flex;
    align-items: center;
    margin-left: 18px; }
    @media only screen and (max-width: 767px) {
      .withdrawContent .inlineRadios {
        margin-left: 0;
        margin-top: 16px; } }
    .withdrawContent .inlineRadios .md-radio {
      margin: 0;
      margin-right: 14px; }
      .withdrawContent .inlineRadios .md-radio:last-child {
        margin-right: 0; }
      .withdrawContent .inlineRadios .md-radio label {
        padding-right: 0; }

.withdrawText {
  display: flex; }
  .withdrawText span {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    padding-right: 8px; }
  .withdrawText .withdrawTooltip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    .withdrawText .withdrawTooltip:hover .withdrawTooltipRightContent {
      opacity: 1;
      visibility: visible;
      pointer-events: all; }
    .withdrawText .withdrawTooltip img {
      width: auto;
      height: 16px; }
    .withdrawText .withdrawTooltip .withdrawTooltipRightContent {
      position: absolute;
      z-index: 2;
      right: -12px;
      top: 50%;
      background-color: #ffffff;
      width: 240px;
      padding: 8px;
      padding-right: 20px;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      border: 1px solid #212121;
      white-space: normal;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      border-radius: 4px;
      -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%); }
      .withdrawText .withdrawTooltip .withdrawTooltipRightContent:before {
        content: '';
        display: block;
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #ffffff;
        z-index: 2;
        left: -3px;
        top: 50%;
        border-left: 1px solid #212121;
        border-top: 1px solid #212121;
        -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; }

.paymentContent.double:not(.simpleDouble) .paymentDetails.renewDetails {
  padding-bottom: 222px; }

.devicesMargin {
  margin-top: 40px; }
  @media only screen and (max-width: 767px) {
    .devicesMargin {
      margin-top: 24px; } }

.deviceComponent {
  display: flex;
  flex-wrap: wrap; }
  .deviceComponent .devicesMax {
    display: flex;
    flex-wrap: wrap;
    max-width: 830px; }
    .deviceComponent .devicesMax .selectVoucherInfoBox.withAlert {
      margin-bottom: 16px; }
    .deviceComponent .devicesMax.fullWidth {
      max-width: 100%;
      flex-wrap: nowrap;
      align-items: flex-start; }
      @media only screen and (max-width: 767px) {
        .deviceComponent .devicesMax.fullWidth {
          padding-top: 16px;
          overflow-x: auto; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .deviceComponent .devicesMax.fullWidth {
          padding-top: 16px; } }
      .deviceComponent .devicesMax.fullWidth .deviceBox {
        width: calc(100% / 3);
        overflow: visible; }
        @media only screen and (max-width: 767px) {
          .deviceComponent .devicesMax.fullWidth .deviceBox {
            width: 70%;
            margin-right: 16px;
            flex: 0 0 auto; } }
        @media only screen and (min-width: 1025px) and (max-width: 1230px) {
          .deviceComponent .devicesMax.fullWidth .deviceBox {
            width: calc(100% / 2); } }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .deviceComponent .devicesMax.fullWidth .deviceBox {
            width: calc(100% / 2); } }
        .deviceComponent .devicesMax.fullWidth .deviceBox:last-child {
          margin-right: 0; }
        .deviceComponent .devicesMax.fullWidth .deviceBox .deviceImage {
          padding: 23px 0 19px; }
          .deviceComponent .devicesMax.fullWidth .deviceBox .deviceImage img {
            width: auto;
            max-width: 212px;
            height: 210px;
            padding: 0; }
            .deviceComponent .devicesMax.fullWidth .deviceBox .deviceImage img.plusIcon {
              width: 64px;
              height: 64px;
              padding: 12px;
              object-fit: unset; }
  .deviceComponent .devicesContainer {
    display: flex;
    flex-wrap: wrap; }
  .deviceComponent .devicesTopOptions {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-right: 24px; }
    @media only screen and (max-width: 767px) {
      .deviceComponent .devicesTopOptions {
        padding-right: 0;
        flex-direction: column;
        margin-bottom: 12px; } }
  .deviceComponent .deviceBox {
    margin-right: 16px;
    margin-bottom: 16px;
    width: calc((100% / 3) - 16px);
    display: flex;
    flex-flow: column;
    background-color: #ffffff; }
    @media only screen and (min-width: 1025px) and (max-width: 1230px) {
      .deviceComponent .deviceBox {
        width: calc((100% / 2) - 16px); } }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .deviceComponent .deviceBox {
        width: calc((100% / 2) - 16px); } }
    @media only screen and (max-width: 767px) {
      .deviceComponent .deviceBox {
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px; } }
    .deviceComponent .deviceBox.calc-4 {
      width: calc((100% / 4) - 16px); }
      @media only screen and (min-width: 1025px) and (max-width: 1230px) {
        .deviceComponent .deviceBox.calc-4 {
          width: calc((100% / 3) - 16px); } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .deviceComponent .deviceBox.calc-4 {
          width: calc((100% / 2) - 16px); } }
      @media only screen and (max-width: 767px) {
        .deviceComponent .deviceBox.calc-4 {
          width: 100%;
          margin-right: 0;
          margin-bottom: 12px; } }
    .deviceComponent .deviceBox.calc-5 {
      width: calc((100% / 5) - 16px); }
      @media only screen and (min-width: 1025px) and (max-width: 1230px) {
        .deviceComponent .deviceBox.calc-5 {
          width: calc((100% / 4) - 16px); } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .deviceComponent .deviceBox.calc-5 {
          width: calc((100% / 2) - 16px); } }
      @media only screen and (max-width: 767px) {
        .deviceComponent .deviceBox.calc-5 {
          width: 100%;
          margin-right: 0;
          margin-bottom: 12px; } }
    .deviceComponent .deviceBox.active {
      background-color: #00a5e3;
      padding: 3px; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .deviceComponent .deviceBox:nth-of-type(odd) {
        margin-right: 16px; } }
    .deviceComponent .deviceBox .removeComparedDevice {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
      background-color: #ffffff;
      border-radius: 100%;
      -webkit-transform: translate(50%, -50%);
      -moz-transform: translate(50%, -50%);
      transform: translate(50%, -50%); }
      .deviceComponent .deviceBox .removeComparedDevice i {
        font-size: 13px;
        line-height: 13px;
        color: #212121; }
    .deviceComponent .deviceBox .deviceBoxContainer {
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      overflow: hidden;
      border-radius: 12px;
      flex: 1; }
      .deviceComponent .deviceBox .deviceBoxContainer.emptyBox {
        height: 260px;
        justify-content: center;
        align-items: center; }
    .deviceComponent .deviceBox .deviceCompare {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      height: 44px; }
      .deviceComponent .deviceBox .deviceCompare .md-checkbox {
        margin: 0; }
    .deviceComponent .deviceBox .deviceImage.category {
      padding: 16px 24px 24px; }
      .deviceComponent .deviceBox .deviceImage.category img {
        width: 100%;
        height: auto;
        display: block;
        padding: 0;
        margin: auto; }
    .deviceComponent .deviceBox .deviceImage img {
      width: auto;
      max-width: 190px;
      height: 188px;
      object-fit: contain;
      object-position: center;
      padding: 6px; }
    .deviceComponent .deviceBox .deviceContent {
      padding: 8px 16px 16px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      min-height: 210px; }
      .deviceComponent .deviceBox .deviceContent.largePadding {
        padding: 16px; }
        .deviceComponent .deviceBox .deviceContent.largePadding .deviceTitle {
          margin-bottom: 8px; }
      .deviceComponent .deviceBox .deviceContent .deviceSubtitle {
        display: block;
        display: -webkit-box;
        margin-bottom: 16px;
        text-align: center;
        height: 34px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; }
      .deviceComponent .deviceBox .deviceContent .deviceTitle {
        margin-bottom: 12px;
        min-height: 48px;
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700; }
      .deviceComponent .deviceBox .deviceContent .deviceDescription {
        margin-bottom: 24px;
        color: #212121;
        height: 60px;
        overflow: hidden; }
      .deviceComponent .deviceBox .deviceContent .visitLink {
        display: block;
        margin-bottom: 12px; }
      .deviceComponent .deviceBox .deviceContent .detailsContentRight {
        text-align: center;
        margin-bottom: 20px; }
        .deviceComponent .deviceBox .deviceContent .detailsContentRight .toPay {
          display: inline-flex;
          position: relative;
          margin-top: 18px;
          align-items: baseline; }
          .deviceComponent .deviceBox .deviceContent .detailsContentRight .toPay .euros {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 22px;
            line-height: 24px;
            font-weight: 600;
            position: relative; }
            .deviceComponent .deviceBox .deviceContent .detailsContentRight .toPay .euros .imgEuro {
              display: none; }
          .deviceComponent .deviceBox .deviceContent .detailsContentRight .toPay .cents {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 22px;
            line-height: 24px;
            font-weight: 600;
            position: relative; }
          .deviceComponent .deviceBox .deviceContent .detailsContentRight .toPay .oldPrice {
            position: absolute;
            top: -18px;
            right: 50%;
            font-size: 14px;
            line-height: 16px;
            text-decoration: line-through;
            width: max-content;
            -webkit-transform: translateX(50%);
            -moz-transform: translateX(50%);
            transform: translateX(50%); }
        .deviceComponent .deviceBox .deviceContent .detailsContentRight .paymentDeadline {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          width: 100%;
          display: block;
          margin: 6px 0; }

.compareBoxContainer {
  display: flex;
  flex-direction: column; }
  .compareBoxContainer .compareBoxHeader {
    display: flex;
    width: 100%;
    position: relative; }
    .compareBoxContainer .compareBoxHeader:after {
      content: '';
      display: block;
      height: 2px;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      background-image: #00a5e3; }
    .compareBoxContainer .compareBoxHeader .genericHeaderBox {
      display: flex; }
      .compareBoxContainer .compareBoxHeader .genericHeaderBox:last-child .compareBoxContent {
        -webkit-border-radius: 0 16px 0 0;
        -moz-border-radius: 0 16px 0 0;
        border-radius: 0 16px 0 0; }
        .compareBoxContainer .compareBoxHeader .genericHeaderBox:last-child .compareBoxContent:before {
          content: '';
          display: block;
          width: 1px;
          height: calc(100% - 32px);
          background-color: #f2f2f3;
          position: absolute;
          left: 0;
          top: 16px;
          -webkit-transform: translateX(-100%);
          -moz-transform: translateX(-100%);
          transform: translateX(-100%); }
      .compareBoxContainer .compareBoxHeader .genericHeaderBox:nth-child(2) .compareBoxContent {
        -webkit-border-radius: 16px 0 0 0;
        -moz-border-radius: 16px 0 0 0;
        border-radius: 16px 0 0 0; }
      .compareBoxContainer .compareBoxHeader .genericHeaderBox.titlesBox {
        width: calc(100% / 4);
        padding-right: 1px; }
        @media only screen and (max-width: 767px) {
          .compareBoxContainer .compareBoxHeader .genericHeaderBox.titlesBox {
            display: none; } }
        .compareBoxContainer .compareBoxHeader .genericHeaderBox.titlesBox .compareBoxContent {
          height: 70px;
          align-self: flex-end;
          padding: 0; }
          .compareBoxContainer .compareBoxHeader .genericHeaderBox.titlesBox .compareBoxContent span {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 22px;
            line-height: 24px;
            font-weight: 600; }
      .compareBoxContainer .compareBoxHeader .genericHeaderBox.deviceBox {
        flex: 2; }
      .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent {
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding: 16px 30px;
        position: relative;
        height: 360px;
        -webkit-border-radius: 16px 16px 0 0;
        -moz-border-radius: 16px 16px 0 0;
        border-radius: 16px 16px 0 0; }
        @media only screen and (max-width: 767px) {
          .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent {
            padding: 12px;
            height: 320px; } }
        .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent {
          display: flex;
          flex-direction: column;
          position: relative;
          width: 100%; }
          .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .removeComparedDevice {
            position: absolute;
            right: 0;
            top: 0;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            transform: translateX(100%); }
            @media only screen and (max-width: 767px) {
              .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .removeComparedDevice {
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400;
                -webkit-transform: translateX(0);
                -moz-transform: translateX(0);
                transform: translateX(0); } }
            .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .removeComparedDevice i {
              font-size: 14px;
              line-height: 14px;
              color: #212121; }
              @media only screen and (max-width: 767px) {
                .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .removeComparedDevice i {
                  font-size: 10px;
                  line-height: 10px; } }
          .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .deviceImage {
            display: block;
            width: 100%;
            text-align: center;
            margin: 8px 0; }
            @media only screen and (max-width: 767px) {
              .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .deviceImage {
                height: 64px;
                margin: 24px 0; } }
            .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .deviceImage img {
              width: auto;
              min-width: 100px;
              height: 120px;
              margin: auto;
              padding: 8px;
              object-fit: contain;
              object-position: center; }
              @media only screen and (max-width: 767px) {
                .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .deviceImage img {
                  width: 65px;
                  height: 65px; } }
          .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .deviceTitle {
            display: block;
            margin-bottom: 12px;
            text-align: center;
            height: 48px;
            overflow: hidden;
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700; }
          .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice {
            margin-bottom: 36px;
            text-align: center; }
            .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice .toPay {
              display: inline-flex;
              position: relative;
              margin-top: 18px;
              margin-bottom: -6px;
              align-items: baseline; }
              .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice .toPay .euros {
                font-family: 'PeridotPE-SemiBold', sans-serif;
                font-size: 22px;
                line-height: 24px;
                font-weight: 600;
                bottom: -6px;
                position: relative; }
                .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice .toPay .euros .imgEuro {
                  display: none; }
              .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice .toPay .cents {
                font-family: 'PeridotPE-SemiBold', sans-serif;
                font-size: 22px;
                line-height: 24px;
                font-weight: 600;
                position: relative;
                padding-left: 2px;
                bottom: -6px; }
              .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice .toPay .oldPrice {
                position: absolute;
                top: -18px;
                right: 0;
                font-size: 14px;
                line-height: 17px;
                -webkit-transform: translateX(50%);
                -moz-transform: translateX(50%);
                transform: translateX(50%);
                width: max-content; }
                @media only screen and (max-width: 767px) {
                  .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice .toPay .oldPrice {
                    font-size: 10px;
                    line-height: 13px;
                    right: 20px; } }
            .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .devicePrice .paymentDeadline {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 400;
              width: 100%;
              display: block;
              margin: 6px 0; }
          .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .buttonOuter {
            text-align: center; }
            @media only screen and (max-width: 767px) {
              .compareBoxContainer .compareBoxHeader .genericHeaderBox .compareBoxContent .deviceContent .buttonOuter .primaryButton.primaryButtonNormal {
                white-space: nowrap;
                padding: 8px; } }
  .compareBoxContainer .compareBoxBody {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 80vh;
    min-height: 400px; }
    .compareBoxContainer .compareBoxBody .deviceTable {
      display: flex;
      flex-direction: column;
      border-radius: 4px; }
      .compareBoxContainer .compareBoxBody .deviceTable .deviceRow {
        background-color: #ffffff;
        min-height: 50px;
        display: flex;
        align-items: center; }
        @media only screen and (max-width: 767px) {
          .compareBoxContainer .compareBoxBody .deviceTable .deviceRow {
            padding: 12px;
            flex-wrap: wrap;
            min-height: 80px; } }
        .compareBoxContainer .compareBoxBody .deviceTable .deviceRow:nth-child(odd) {
          background-color: #f2f2f3; }
        .compareBoxContainer .compareBoxBody .deviceTable .deviceRow span {
          padding: 16px;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          text-align: left;
          display: block;
          width: calc(100% / 4);
          border-right: 1px solid #f2f2f3; }
          @media only screen and (max-width: 767px) {
            .compareBoxContainer .compareBoxBody .deviceTable .deviceRow span {
              padding: 0;
              text-align: center;
              margin-bottom: 12px;
              width: 100%;
              border: none; } }
          .compareBoxContainer .compareBoxBody .deviceTable .deviceRow span.textCenter {
            text-align: center;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            flex: 2;
            border: none; }
            @media only screen and (max-width: 767px) {
              .compareBoxContainer .compareBoxBody .deviceTable .deviceRow span.textCenter {
                margin-bottom: 4px;
                flex: 0 0 auto;
                width: 50%; } }

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

.rangeSliderContainer {
  display: block;
  margin: 22px 0;
  position: relative; }
  .rangeSliderContainer .rangeValue {
    position: absolute;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    bottom: -10px;
    display: block;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .rangeSliderContainer .rangeValue.fromValue {
      left: 0; }
    .rangeSliderContainer .rangeValue.toValue {
      right: 0; }

.sideFilters {
  padding: 16px;
  background-color: #ffffff;
  display: flex;
  flex-flow: column;
  border-top: 2px solid #e6e6e6; }
  .sideFilters .clearFilters {
    display: inline-flex;
    margin-left: auto;
    padding: 12px 8px;
    color: #0e8103;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    width: auto;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700; }
    .sideFilters .clearFilters:hover {
      color: rgba(0, 109, 41, 0.85);
      z-index: 1; }
    .sideFilters .clearFilters: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; }
    .sideFilters .clearFilters-notVisible {
      visibility: hidden; }
    .sideFilters .clearFilters.hidden {
      display: none; }
    .sideFilters .clearFilters.absoluteLink {
      position: absolute;
      bottom: 8px; }
    .sideFilters .clearFilters.whiteLink {
      display: inline-block;
      width: auto;
      color: #ffffff;
      border: 1px solid #ffffff;
      border-radius: 16px;
      margin-left: 8px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        .sideFilters .clearFilters.whiteLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    .sideFilters .clearFilters.blueTooltipLink {
      color: #212121;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      letter-spacing: 0;
      margin-top: 4px; }
    .sideFilters .clearFilters.blueLink {
      display: inline-block;
      width: auto;
      color: #212121;
      margin-left: 24px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        .sideFilters .clearFilters.blueLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    .sideFilters .clearFilters.inline {
      display: inline-block;
      width: auto; }
    .sideFilters .clearFilters.blue {
      color: #212121 !important;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
  .sideFilters .filterHeading {
    display: block;
    margin-bottom: 8px;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700; }
  .sideFilters .typeGroup {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px; }
    .sideFilters .typeGroup .md-radio label {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
  .sideFilters .filterGroup {
    border-bottom: 1px solid #f2f2f3;
    margin: 4px 0 8px; }
    .sideFilters .filterGroup:last-child {
      border: none; }
    .sideFilters .filterGroup .filterGroupTitle {
      width: 100%;
      display: flex;
      align-items: center;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
      margin-bottom: 4px;
      cursor: pointer; }
      .sideFilters .filterGroup .filterGroupTitle i {
        margin-left: auto;
        font-size: 24px;
        line-height: 24px;
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        transform: scaleY(1); }
        .sideFilters .filterGroup .filterGroupTitle i.opened {
          -webkit-transform: scaleY(-1);
          -moz-transform: scaleY(-1);
          transform: scaleY(-1); }
    .sideFilters .filterGroup .filterGroupContent .businessConnections {
      max-width: 100%;
      padding-left: 12px; }
      .sideFilters .filterGroup .filterGroupContent .businessConnections.withoutShadow {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        max-height: 100%; }
    .sideFilters .filterGroup .filterGroupContent .businessToggle {
      background-color: transparent; }
      .sideFilters .filterGroup .filterGroupContent .businessToggle .businessContentSearch {
        max-width: 260px;
        margin: 8px auto 0px; }
      .sideFilters .filterGroup .filterGroupContent .businessToggle a {
        display: block;
        width: 100%;
        margin: 12px 0;
        color: #212121;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }

.devices .component.active {
  display: flex; }

@media only screen and (max-width: 1024px) {
  .devices .component .box.withContent {
    width: 100%; } }

@media only screen and (max-width: 767px) {
  .devicesRenew .paymentSteps {
    margin-top: 50px; } }

.selectDevice {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 86%;
  display: flex;
  align-items: flex-end;
  background-color: #e6e6e6;
  z-index: 10;
  border-radius: 16px 0 0 0;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  max-width: 970px;
  padding: 24px; }
  @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .selectDevice {
      width: 100%; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .selectDevice {
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    .selectDevice {
      width: 100%;
      flex-flow: column;
      align-items: center;
      gap: 16px; } }
  .selectDevice.opened {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .selectDevice .button {
      min-width: 0; } }
  .selectDevice .toggleDevice {
    padding: 16px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    color: #212121;
    background-color: #e6e6e6;
    position: absolute;
    top: 0;
    right: 30px;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    z-index: -1;
    mix-blend-mode: screen;
    display: flex;
    align-items: center;
    border-radius: 16px 16px 0 0; }
    @media only screen and (max-width: 767px) {
      .selectDevice .toggleDevice {
        right: 12px; } }
    .selectDevice .toggleDevice i {
      font-size: 24px;
      padding-left: 4px;
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      transform: scaleY(1); }
      .selectDevice .toggleDevice i.opened {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }
  .selectDevice .selectDeviceLeft {
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 320px) {
      .selectDevice .selectDeviceLeft {
        flex-flow: column; } }
    .selectDevice .selectDeviceLeft .selectedOfferImage {
      width: auto;
      height: 242px;
      border-radius: 4px;
      position: relative; }
      @media only screen and (max-width: 1366px) {
        .selectDevice .selectDeviceLeft .selectedOfferImage {
          width: auto;
          height: 242px; } }
      @media only screen and (max-width: 768px) {
        .selectDevice .selectDeviceLeft .selectedOfferImage {
          width: unset;
          height: unset; } }
    .selectDevice .selectDeviceLeft .plusIcon {
      margin: 0 24px; }
      @media only screen and (max-width: 767px) {
        .selectDevice .selectDeviceLeft .plusIcon {
          margin: 12px; } }
    @media only screen and (max-width: 767px) {
      .selectDevice .selectDeviceLeft img {
        max-width: 200px; } }
    .selectDevice .selectDeviceLeft .slectedDevice {
      position: relative;
      width: 130px;
      height: 200px;
      border-radius: 16px; }
      @media only screen and (max-width: 767px) {
        .selectDevice .selectDeviceLeft .slectedDevice {
          width: 100px;
          height: 146px; } }
      .selectDevice .selectDeviceLeft .slectedDevice canvas {
        width: 130px !important;
        height: 200px !important;
        border-radius: 16px; }
        @media only screen and (max-width: 767px) {
          .selectDevice .selectDeviceLeft .slectedDevice canvas {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            object-position: center; } }
      .selectDevice .selectDeviceLeft .slectedDevice.empty {
        border: 1px dashed #0ea600;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none; }
      .selectDevice .selectDeviceLeft .slectedDevice .selectedDeviceImage {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center; }
      .selectDevice .selectDeviceLeft .slectedDevice .selectedDeviceText {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        color: #0ea600;
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: -1;
        text-align: center; }
        @media only screen and (max-width: 767px) {
          .selectDevice .selectDeviceLeft .slectedDevice .selectedDeviceText {
            padding: 12px; } }
      .selectDevice .selectDeviceLeft .slectedDevice .removeDevice {
        position: absolute;
        width: 18px;
        height: 18px;
        cursor: pointer;
        background-color: #212121;
        display: flex;
        line-height: 0;
        font-size: 10px;
        align-items: center;
        justify-content: center;
        text-align: center;
        top: 0;
        right: 0;
        color: #ffffff;
        border-radius: 100%;
        -webkit-transform: translate(50%, -50%);
        -moz-transform: translate(50%, -50%);
        transform: translate(50%, -50%); }
  .selectDevice .selectDeviceRight {
    margin-left: auto; }
    @media only screen and (max-width: 767px) {
      .selectDevice .selectDeviceRight {
        margin-left: 0; } }
    @media only screen and (max-width: 320px) {
      .selectDevice .selectDeviceRight {
        text-align: center; } }
    @media only screen and (max-width: 320px) {
      .selectDevice .selectDeviceRight .blueButton {
        min-width: 138px; } }
    .selectDevice .selectDeviceRight .inlineButtons a {
      min-width: 112px !important; }

.compareSpecs {
  display: flex;
  flex-direction: column; }
  .compareSpecs.bold span {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    padding-right: 24px;
    text-align: left;
    justify-content: flex-start; }
  .compareSpecs span {
    min-height: 50px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #212121;
    background-color: #ffffff; }
    .compareSpecs span.large {
      min-height: 70px; }
    .compareSpecs span:nth-child(odd) {
      background-color: #f2f2f3; }

.deviceSingleContainer {
  margin-top: 40px; }

.modalDetails .deviceSingle {
  padding: 40px 24px;
  border-radius: 0 0 16px 16px; }
  @media only screen and (max-width: 767px) {
    .modalDetails .deviceSingle {
      padding: 40px 16px; } }
  .modalDetails .deviceSingle .deviceSingleContent .deviceContentDetails {
    padding: 0;
    padding-left: 12px; }
    @media only screen and (max-width: 767px) {
      .modalDetails .deviceSingle .deviceSingleContent .deviceContentDetails {
        padding-left: 0; } }

.deviceSingle {
  background-color: #ffffff;
  padding: 64px 56px 20px 56px;
  display: flex; }
  @media only screen and (max-width: 767px) {
    .deviceSingle {
      padding: 24px 0;
      flex-direction: column; } }
  .deviceSingle .deviceGallery {
    width: 190px;
    display: flex;
    flex-direction: column; }
    @media only screen and (max-width: 767px) {
      .deviceSingle .deviceGallery {
        flex-direction: column;
        margin: auto;
        margin-bottom: 32px; } }
    .deviceSingle .deviceGallery .deviceMainImage {
      display: block;
      margin-bottom: 40px;
      text-align: center; }
      .deviceSingle .deviceGallery .deviceMainImage.withLightGallery .deviceMainGalleryImage {
        cursor: pointer; }
      .deviceSingle .deviceGallery .deviceMainImage .deviceMainGalleryImage {
        cursor: default; }
      .deviceSingle .deviceGallery .deviceMainImage img {
        width: 95px;
        height: 190px;
        object-fit: contain;
        object-position: center; }
    .deviceSingle .deviceGallery .deviceGalleryImages {
      display: flex;
      width: 100%;
      overflow-x: auto; }
      .deviceSingle .deviceGallery .deviceGalleryImages img {
        margin-right: 16px;
        width: 42px;
        height: 42px;
        object-fit: contain;
        object-position: center;
        cursor: pointer; }
        .deviceSingle .deviceGallery .deviceGalleryImages img:last-child {
          margin-right: 0; }
  .deviceSingle .deviceSingleContent {
    display: flex;
    flex-direction: column;
    max-width: 550px; }
    .deviceSingle .deviceSingleContent .deviceContentDetails {
      padding-left: 50px;
      padding-right: 120px;
      display: flex;
      flex-direction: column; }
      @media only screen and (max-width: 767px) {
        .deviceSingle .deviceSingleContent .deviceContentDetails {
          padding: 0 32px; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .deviceSingle .deviceSingleContent .deviceContentDetails {
          padding-right: 50px; } }
      .deviceSingle .deviceSingleContent .deviceContentDetails .deviceTitle {
        display: block;
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        color: #212121;
        margin-bottom: 32px; }
        @media only screen and (max-width: 767px) {
          .deviceSingle .deviceSingleContent .deviceContentDetails .deviceTitle {
            text-align: center; } }
      .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice {
        margin-bottom: 48px; }
        @media only screen and (max-width: 767px) {
          .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice {
            text-align: center; } }
        .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice .toPay {
          display: inline-flex;
          position: relative;
          margin-top: 18px;
          align-items: baseline;
          width: max-content; }
          .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice .toPay .euros {
            position: relative;
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 22px;
            line-height: 24px;
            font-weight: 600; }
            .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice .toPay .euros .imgEuro {
              display: none; }
          .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice .toPay .cents {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 22px;
            line-height: 24px;
            font-weight: 600;
            position: relative; }
          .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice .toPay .oldPrice {
            position: absolute;
            top: -18px;
            right: 50%;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            text-decoration: line-through;
            -webkit-transform: translateX(50%);
            -moz-transform: translateX(50%);
            transform: translateX(50%);
            width: max-content; }
        .deviceSingle .deviceSingleContent .deviceContentDetails .devicePrice .paymentDeadline {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          width: 100%;
          display: block;
          margin: 6px 0; }
      .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes {
        display: flex;
        flex-direction: column; }
        .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute {
          display: flex;
          flex-direction: column;
          margin-bottom: 16px; }
          .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .title {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            display: block;
            margin-bottom: 12px;
            color: #212121; }
          .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceInfo {
            display: flex;
            flex-direction: column;
            padding-left: 12px; }
            .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceInfo li {
              display: block;
              margin-bottom: 8px;
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400;
              position: relative;
              padding-left: 8px; }
              .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceInfo li:before {
                content: '';
                display: block;
                width: 6px;
                height: 6px;
                background-color: #212121;
                position: absolute;
                left: 0;
                top: 6px;
                border-radius: 100%;
                -webkit-transform: translateX(-100%);
                -moz-transform: translateX(-100%);
                transform: translateX(-100%); }
              .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceInfo li:last-child {
                margin-bottom: 0; }
          .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors {
            display: flex;
            align-items: center;
            padding: 0 8px; }
            .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors li {
              margin: 0 4px; }
              .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors li.selected .deviceColor:before {
                opacity: 1;
                visibility: visible;
                pointer-events: all; }
              .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors li .deviceColor {
                width: 16px;
                height: 16px;
                border: 1px solid #212121;
                display: block;
                position: relative;
                cursor: pointer;
                border-radius: 100%; }
                .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors li .deviceColor:before {
                  content: '';
                  width: 20px;
                  height: 20px;
                  border: 1px solid #212121;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  background-color: transparent;
                  opacity: 0;
                  visibility: hidden;
                  pointer-events: none;
                  border-radius: 100%;
                  -webkit-transform: translate(-50%, -50%);
                  -moz-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
                  -webkit-transition: all 0.2s ease;
                  -moz-transition: all 0.2s ease;
                  transition: all 0.2s ease; }
                .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors li .deviceColor.black {
                  background-color: #212121; }
                .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors li .deviceColor.green {
                  background-color: #006d29; }
                .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceColors li .deviceColor.white {
                  background-color: #ffffff; }
          .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceTags {
            display: flex;
            padding: 0 4px;
            align-items: center; }
            .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceTags li {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 600;
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 0 6px;
              padding: 4px;
              border: 1px solid #212121;
              min-width: 54px;
              height: 26px;
              color: #212121;
              cursor: pointer;
              -webkit-transition: all 0.2s ease;
              -moz-transition: all 0.2s ease;
              transition: all 0.2s ease;
              border-radius: 16px; }
              .deviceSingle .deviceSingleContent .deviceContentDetails .deviceAttributes .deviceAttribute .deviceTags li.selected {
                background-color: #212121;
                color: #ffffff; }
      .deviceSingle .deviceSingleContent .deviceContentDetails .buttonOuter {
        margin-top: 12px; }
    .deviceSingle .deviceSingleContent .deviceDetails {
      display: flex;
      flex-direction: column;
      margin-top: 12px; }
      .deviceSingle .deviceSingleContent .deviceDetails .deviceTabs {
        display: flex;
        align-items: center; }
        .deviceSingle .deviceSingleContent .deviceDetails .deviceTabs li {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center; }
          .deviceSingle .deviceSingleContent .deviceDetails .deviceTabs li.active a span:before {
            display: block; }
          .deviceSingle .deviceSingleContent .deviceDetails .deviceTabs li a {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 34px 0; }
            .deviceSingle .deviceSingleContent .deviceDetails .deviceTabs li a span {
              position: relative;
              margin: auto;
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600;
              color: #212121; }
              .deviceSingle .deviceSingleContent .deviceDetails .deviceTabs li a span:before {
                content: '';
                position: absolute;
                left: 50%;
                width: calc(100% + 16px);
                height: 2px;
                background: #00a5e3;
                bottom: -8px;
                display: none;
                -webkit-transform: translateX(-50%);
                -moz-transform: translateX(-50%);
                transform: translateX(-50%); }
      .deviceSingle .deviceSingleContent .deviceDetails .deviceTab {
        display: none; }
        .deviceSingle .deviceSingleContent .deviceDetails .deviceTab.active {
          display: block; }
        .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border-radius: 4px; }
          .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable .deviceRow {
            background-color: #ffffff;
            min-height: 50px;
            display: flex;
            align-items: center; }
            @media only screen and (max-width: 767px) {
              .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable .deviceRow {
                padding: 12px;
                flex-direction: column; } }
            .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable .deviceRow:nth-child(odd) {
              background-color: #f2f2f3; }
            .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable .deviceRow span {
              padding: 16px;
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600;
              text-align: left;
              display: block;
              width: 100%; }
              @media only screen and (max-width: 767px) {
                .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable .deviceRow span {
                  padding: 0;
                  text-align: center;
                  margin-bottom: 12px; } }
              .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable .deviceRow span.textCenter {
                text-align: center;
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 16px;
                line-height: 24px;
                font-weight: 400; }
                @media only screen and (max-width: 767px) {
                  .deviceSingle .deviceSingleContent .deviceDetails .deviceTab .deviceTable .deviceRow span.textCenter {
                    margin-bottom: 4px; } }

body .lg-backdrop {
  background-color: rgba(55, 71, 79, 0.5); }

.compareSpecsBox {
  margin-top: 458px; }
  @media only screen and (max-width: 767px) {
    .compareSpecsBox {
      margin-top: 0; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .compareSpecsBox {
      margin-top: 0; } }

.renewOffersOnModal .renewOffers {
  margin: 0; }
  .renewOffersOnModal .renewOffers .renewOffersRow {
    padding: 0; }
    .renewOffersOnModal .renewOffers .renewOffersRow .renewOffer {
      padding: 0;
      margin: 16px 0; }
      .renewOffersOnModal .renewOffers .renewOffersRow .renewOffer .giftContent {
        margin: 0; }
      .renewOffersOnModal .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift {
        max-width: 148px; }
        .renewOffersOnModal .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer {
          max-width: 148px; }

.renewOffersOnModal .checkboxesList {
  max-width: 342px;
  margin-top: 16px; }

.renewOffersOnModal .checkBoxElement {
  border-bottom: 1px solid #e6e6e6; }
  .renewOffersOnModal .checkBoxElement:last-child {
    border-top: none; }

.modalBoldText {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0px; }

.modalBoldTextUnderline {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0px;
  color: #212121 !important;
  text-decoration: underline;
  margin-top: 24px;
  margin-bottom: 24px;
  display: block; }

.modalSmallRegularText {
  color: #212121;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0px;
  margin-top: 4px; }

.renewOffers {
  display: none;
  flex-direction: column;
  margin-top: 16px; }
  .renewOffersBoxParagraph {
    margin-top: 34px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .renewOffersBoxAction {
    text-align: right; }
  .renewOffers.selectOffers {
    margin-bottom: -15px;
    max-width: 1184px; }
  .renewOffers.single {
    display: flex;
    flex-direction: column;
    margin-top: 0; }
    @media only screen and (max-width: 1024px) {
      .renewOffers.single {
        margin-top: -24px; } }
  .renewOffers.active {
    display: flex; }
  .renewOffers:first-child {
    margin-top: 32px; }
  .renewOffers .heading {
    display: block;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: #212121; }
  .renewOffers .renewOffersRow {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-top: 4px; }
    @media only screen and (max-width: 767px) {
      .renewOffers .renewOffersRow {
        padding-top: 16px; } }
    .renewOffers .renewOffersRow.singleCol {
      overflow: visible;
      flex-direction: column;
      padding-top: 0; }
      @media only screen and (max-width: 767px) {
        .renewOffers .renewOffersRow.singleCol {
          padding-top: 0; } }
      .renewOffers .renewOffersRow.singleCol .renewOffer {
        margin: 0;
        max-width: 100%;
        margin-top: 16px !important; }
        @media only screen and (min-width: 480px) and (max-width: 768px) {
          .renewOffers .renewOffersRow.singleCol .renewOffer {
            width: 100%;
            max-width: 100%;
            margin: 0;
            margin-top: 16px !important; } }
        @media only screen and (max-width: 480px) {
          .renewOffers .renewOffersRow.singleCol .renewOffer {
            width: 100%;
            max-width: 100%;
            margin: 0;
            margin-top: 16px !important; } }
    .renewOffers .renewOffersRow .slick-prev {
      display: none !important;
      left: 0;
      top: 50%;
      opacity: 1;
      line-height: 0;
      width: 44px;
      height: calc(100% - 32px);
      background-color: rgba(255, 255, 255, 0.2);
      z-index: 2;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      transform: translate(0, -50%); }
      @media only screen and (max-width: 480px) {
        .renewOffers .renewOffersRow .slick-prev {
          display: none !important; } }
      .renewOffers .renewOffersRow .slick-prev.active {
        display: inline-block !important; }
        @media only screen and (max-width: 767px) {
          .renewOffers .renewOffersRow .slick-prev.active {
            display: none !important; } }
        .renewOffers .renewOffersRow .slick-prev.active.slick-disabled {
          display: none !important; }
      .renewOffers .renewOffersRow .slick-prev:before {
        font-family: 'icomoon';
        content: '\e900';
        color: #212121;
        opacity: 1;
        font-size: 34px; }
    .renewOffers .renewOffersRow .slick-next {
      right: 0;
      top: 50%;
      opacity: 1;
      line-height: 0;
      width: 44px;
      height: calc(100% - 32px);
      background-color: rgba(255, 255, 255, 0.2);
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      transform: translate(0, -50%); }
      @media only screen and (max-width: 767px) {
        .renewOffers .renewOffersRow .slick-next {
          display: none !important; } }
      .renewOffers .renewOffersRow .slick-next:before {
        font-family: 'icomoon';
        content: '\e901';
        color: #212121;
        opacity: 1;
        font-size: 34px; }
    .renewOffers .renewOffersRow .slick-list {
      padding: 12px 5% 12px 12px;
      margin-left: -12px;
      width: 100%; }
      @media only screen and (max-width: 480px) {
        .renewOffers .renewOffersRow .slick-list {
          padding: 0;
          margin-left: 0; } }
      .renewOffers .renewOffersRow .slick-list .slick-track {
        margin: 0;
        display: flex;
        min-width: 100% !important; }
        .renewOffers .renewOffersRow .slick-list .slick-track .slick-slide {
          margin: 0 16px 5px 0;
          border: none;
          outline: none;
          width: 100% !important; }
          @media only screen and (max-width: 480px) {
            .renewOffers .renewOffersRow .slick-list .slick-track .slick-slide {
              margin: 0 4px 5px 0; } }
    .renewOffers .renewOffersRow .renewOffer {
      display: flex;
      flex-direction: column;
      margin-top: 8px;
      position: relative;
      z-index: 1;
      padding: 16px;
      background-color: #ffffff;
      width: 100%;
      max-width: 576px;
      margin: 0 16px;
      height: auto;
      border-radius: 16px;
      border: 1px solid #e6e6e6; }
      @media only screen and (min-width: 480px) and (max-width: 768px) {
        .renewOffers .renewOffersRow .renewOffer {
          width: calc(100% - 20px);
          flex: 0 0 auto;
          margin: 0 4px; } }
      @media only screen and (max-width: 480px) {
        .renewOffers .renewOffersRow .renewOffer {
          width: calc(100% - 20px);
          min-width: calc(100% - 20px);
          flex: 0 0 auto;
          margin: 0 4px; } }
      .renewOffers .renewOffersRow .renewOffer.withOfferCountdown .detailsContentLeft {
        margin-top: 44px; }
        @media only screen and (max-width: 480px) {
          .renewOffers .renewOffersRow .renewOffer.withOfferCountdown .detailsContentLeft {
            margin-top: 64px; } }
      .renewOffers .renewOffersRow .renewOffer.transparent {
        background-color: initial;
        box-shadow: initial; }
      .renewOffers .renewOffersRow .renewOffer.empty {
        padding: 32px 32px 16px;
        justify-content: space-between;
        min-height: 367px; }
        .renewOffers .renewOffersRow .renewOffer.empty .fixedGifts .fixedGift {
          max-width: none; }
        .renewOffers .renewOffersRow .renewOffer.empty .detailsContentLeft .packageInfo {
          display: flex;
          flex-direction: column; }
          .renewOffers .renewOffersRow .renewOffer.empty .detailsContentLeft .packageInfo .emptyLarge {
            width: 100%;
            max-width: 255px;
            height: 16px;
            background-color: #f2f2f3;
            display: flex;
            margin: 6px 0; }
          .renewOffers .renewOffersRow .renewOffer.empty .detailsContentLeft .packageInfo .emptySmall {
            width: 100%;
            max-width: 163px;
            height: 12px;
            background-color: #f2f2f3;
            display: flex;
            margin: 6px 0; }
        .renewOffers .renewOffersRow .renewOffer.empty .detailsContentRight .emptyImage {
          width: 80px;
          height: 68px;
          background-color: #f2f2f3;
          display: flex;
          margin: 24px 0; }
        .renewOffers .renewOffersRow .renewOffer.empty .giftContent .fixedGift .emptyLine {
          width: 163px;
          height: 12px;
          background-color: #f2f2f3;
          display: flex;
          margin: 4px 0; }
          @media only screen and (max-width: 480px) {
            .renewOffers .renewOffersRow .renewOffer.empty .giftContent .fixedGift .emptyLine {
              width: 100px; } }
        .renewOffers .renewOffersRow .renewOffer.empty .giftContent .fixedGift .emptyLineLarge {
          width: 163px;
          height: 64px;
          background-color: #f2f2f3;
          display: flex;
          margin: 4px 0; }
          @media only screen and (max-width: 480px) {
            .renewOffers .renewOffersRow .renewOffer.empty .giftContent .fixedGift .emptyLineLarge {
              width: 100px; } }
        .renewOffers .renewOffersRow .renewOffer.empty .giftContent .giftsRow .emptyLine {
          width: 257px;
          height: 12px;
          background-color: #f2f2f3;
          display: flex;
          margin: 4px 0; }
          @media only screen and (max-width: 480px) {
            .renewOffers .renewOffersRow .renewOffer.empty .giftContent .giftsRow .emptyLine {
              width: 100%; } }
        .renewOffers .renewOffersRow .renewOffer.empty .giftContent .giftsRow .gifts .emptyBox {
          width: 170px;
          height: 64px;
          background-color: #f2f2f3;
          display: flex;
          margin: 4px 0;
          margin-right: 12px; }
        .renewOffers .renewOffersRow .renewOffer.empty .emptyButton {
          width: 130px;
          height: 32px;
          background-color: #f2f2f3;
          display: inline-flex;
          margin-left: auto; }
        .renewOffers .renewOffersRow .renewOffer.empty .emptyDevice {
          width: 100%;
          height: 126px;
          background-color: #f2f2f3;
          display: inline-flex;
          margin-left: auto; }
      .renewOffers .renewOffersRow .renewOffer .buttonOuter {
        margin-top: 16px; }
        .renewOffers .renewOffersRow .renewOffer .buttonOuter.alignSelfBottom {
          margin-top: auto; }
        .renewOffers .renewOffersRow .renewOffer .buttonOuter .button {
          max-width: 136px;
          min-width: 0;
          width: 100%; }
      .renewOffers .renewOffersRow .renewOffer .separationLine {
        width: calc(100% + 32px);
        position: relative;
        left: -16px;
        height: 1px;
        background-color: #00a5e3;
        display: block; }
      .renewOffers .renewOffersRow .renewOffer .newDevice {
        display: flex;
        padding-top: 15px;
        padding-left: 26px;
        padding-right: 26px;
        background-color: #f2f2f3;
        width: calc(100% + 32px);
        position: relative;
        left: -16px; }
        @media only screen and (max-width: 480px) {
          .renewOffers .renewOffersRow .renewOffer .newDevice {
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 12px; } }
        .renewOffers .renewOffersRow .renewOffer .newDevice .left {
          display: flex;
          flex-direction: column;
          align-self: center;
          margin-right: 26px;
          position: relative;
          top: -6px; }
          @media only screen and (max-width: 480px) {
            .renewOffers .renewOffersRow .renewOffer .newDevice .left {
              margin-right: 12px; } }
          .renewOffers .renewOffersRow .renewOffer .newDevice .left span {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600; }
          .renewOffers .renewOffersRow .renewOffer .newDevice .left p {
            margin-bottom: 4px;
            margin-top: 0;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
        .renewOffers .renewOffersRow .renewOffer .newDevice img {
          width: 120px;
          height: auto;
          margin-left: auto; }
          .renewOffers .renewOffersRow .renewOffer .newDevice img.width-160 {
            width: 160px; }
      .renewOffers .renewOffersRow .renewOffer .withRibbon {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 700;
        color: #ffffff;
        padding: 6px 8px;
        -webkit-border-radius: 8px 0;
        -moz-border-radius: 8px 0;
        border-radius: 8px 0;
        background: #e20074;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        position: absolute;
        right: 12px;
        top: 0;
        z-index: 2;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%); }
        .renewOffers .renewOffersRow .renewOffer .withRibbon.topOffer {
          background-color: #eabf68;
          background-image: none; }
          .renewOffers .renewOffersRow .renewOffer .withRibbon.topOffer img {
            width: 16px;
            height: 16px;
            display: block;
            object-fit: contain;
            object-position: center;
            padding: 2px 0; }
        .renewOffers .renewOffersRow .renewOffer .withRibbon img {
          margin-right: 2px;
          height: 16px;
          width: auto; }
      .renewOffers .renewOffersRow .renewOffer .offersGradient {
        position: absolute;
        z-index: 0;
        width: 100%;
        max-width: 177px;
        height: auto;
        top: 0;
        right: 0;
        border-radius: 0 16px 0 0; }
        @media only screen and (max-width: 480px) {
          .renewOffers .renewOffersRow .renewOffer .offersGradient {
            max-width: 150px; } }
        .renewOffers .renewOffersRow .renewOffer .offersGradient.old {
          height: 130px;
          max-width: 282px; }
      .renewOffers .renewOffersRow .renewOffer .detailsContentRight {
        position: relative;
        right: 8px; }
        @media only screen and (max-width: 480px) {
          .renewOffers .renewOffersRow .renewOffer .detailsContentRight {
            right: 0; } }
        .renewOffers .renewOffersRow .renewOffer .detailsContentRight .toPay {
          margin-top: 12px; }
          .renewOffers .renewOffersRow .renewOffer .detailsContentRight .toPay .oldPrice {
            position: absolute;
            top: -14px;
            right: -6px;
            font-size: 12px;
            line-height: 14px; }
          @media only screen and (max-width: 480px) {
            .renewOffers .renewOffersRow .renewOffer .detailsContentRight .toPay .euros {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 32px;
              line-height: 36px;
              font-weight: 700; } }
        @media only screen and (max-width: 480px) {
          .renewOffers .renewOffersRow .renewOffer .detailsContentRight .paymentDeadline {
            margin: 0 auto; } }
      .renewOffers .renewOffersRow .renewOffer .packageInfo .packageInfoContent {
        padding-left: 8px; }
        .renewOffers .renewOffersRow .renewOffer .packageInfo .packageInfoContent .packageInfoCol i {
          color: #212121;
          display: block; }
        .renewOffers .renewOffersRow .renewOffer .packageInfo .packageInfoContent .packageInfoCol li strong {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          color: #212121; }
          .renewOffers .renewOffersRow .renewOffer .packageInfo .packageInfoContent .packageInfoCol li strong.packageInfoStrong {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            color: #00a5e3;
            line-height: 18px;
            letter-spacing: -0.025em; }
      .renewOffers .renewOffersRow .renewOffer .indications {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        padding-left: 8px; }
        .renewOffers .renewOffersRow .renewOffer .indications .indicationLine {
          display: block;
          margin-bottom: 4px;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400; }
          .renewOffers .renewOffersRow .renewOffer .indications .indicationLine:last-child {
            margin-bottom: 0; }
      .renewOffers .renewOffersRow .renewOffer .giftContent {
        display: flex;
        flex-direction: column;
        margin-top: 24px;
        max-width: 400px; }
        .renewOffers .renewOffersRow .renewOffer .giftContent.fullWidth {
          width: 100%; }
        .renewOffers .renewOffersRow .renewOffer .giftContent .textWithLine {
          display: flex;
          align-items: center;
          position: relative;
          height: 16px;
          margin-bottom: 16px; }
          .renewOffers .renewOffersRow .renewOffer .giftContent .textWithLine.smallMarginBottom {
            margin-bottom: 8px; }
          .renewOffers .renewOffersRow .renewOffer .giftContent .textWithLine:before {
            content: '';
            width: 70%;
            height: 1px;
            display: block;
            position: absolute;
            right: 0;
            top: 50%;
            background: #00a5e3;
            z-index: 0;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            transform: translateY(-50%); }
          .renewOffers .renewOffersRow .renewOffer .giftContent .textWithLine .text {
            height: 100%;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1; }
            .renewOffers .renewOffersRow .renewOffer .giftContent .textWithLine .text span {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 600;
              padding-right: 8px; }
            .renewOffers .renewOffersRow .renewOffer .giftContent .textWithLine .text img {
              display: block;
              margin-right: 2px;
              height: 24px;
              width: 24px;
              object-fit: contain;
              object-position: center;
              padding: 2px;
              position: relative;
              top: -1px; }
      .renewOffers .renewOffersRow .renewOffer .visitLink {
        margin-top: 24px;
        outline: none !important; }
      .renewOffers .renewOffersRow .renewOffer .fixedGifts {
        display: flex;
        margin-bottom: 24px; }
        .renewOffers .renewOffersRow .renewOffer .fixedGifts .fixedGift {
          display: flex;
          flex-direction: column;
          margin-right: 36px;
          max-width: 154px; }
          .renewOffers .renewOffersRow .renewOffer .fixedGifts .fixedGift:last-child {
            margin-right: 0; }
          .renewOffers .renewOffersRow .renewOffer .fixedGifts .fixedGift .fixedGiftTitle {
            display: flex;
            align-items: center;
            background-color: #f2f2f3;
            padding: 8px 12px;
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 13px;
            line-height: 16px;
            font-weight: 600;
            margin-bottom: 4px;
            max-width: 112px;
            border-radius: 16px; }
          .renewOffers .renewOffersRow .renewOffer .fixedGifts .fixedGift .fixedGiftContent {
            display: flex;
            align-items: center;
            min-height: 18px;
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 16px;
            line-height: 20px;
            font-weight: 700;
            color: #212121; }
            .renewOffers .renewOffersRow .renewOffer .fixedGifts .fixedGift .fixedGiftContent i {
              font-size: 14px;
              line-height: 14px;
              width: 16px;
              margin-right: 2px;
              color: #212121;
              display: block; }
      .renewOffers .renewOffersRow .renewOffer .giftsRow {
        display: block;
        margin-top: 24px; }
        .renewOffers .renewOffersRow .renewOffer .giftsRow.hidden {
          display: none; }
        .renewOffers .renewOffersRow .renewOffer .giftsRow .mainTitle {
          display: inline-flex;
          background-color: #f2f2f3;
          padding: 8px 16px;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          margin-bottom: 8px;
          border-radius: 16px; }
        .renewOffers .renewOffersRow .renewOffer .giftsRow .selectionTitle {
          display: block;
          margin-bottom: 8px;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; }
        .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts {
          display: flex; }
          @media only screen and (max-width: 480px) {
            .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts {
              overflow-x: auto; } }
          .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift {
            display: flex;
            flex-direction: column;
            margin-right: 8px;
            padding: 1px;
            background-color: #e6e6e6;
            height: 90px;
            width: 160px;
            cursor: pointer;
            border-radius: 16px; }
            .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift.checked {
              background: #00a5e3; }
              .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift.checked .giftContainer .giftContent .giftTitle {
                padding: 0; }
                .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift.checked .giftContainer .giftContent .giftTitle .giftTitleContainer {
                  background-color: #00a5e3;
                  color: #ffffff; }
              .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift.checked .giftContainer .giftCheckbox {
                background-image: url("../img/giftSelected.png"); }
            .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer {
              display: flex;
              flex-direction: column;
              background-color: #ffffff;
              position: relative;
              width: 100%;
              height: 100%;
              border-radius: 15px; }
              .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftCheckbox {
                position: absolute;
                width: 14px;
                height: 14px;
                left: 9px;
                top: 9px;
                background-image: url("../img/giftPlain.png");
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat; }
                .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftCheckbox input {
                  outline: none;
                  visibility: hidden; }
              .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent {
                padding-left: 22px;
                display: flex;
                align-items: center;
                margin: 0;
                flex-direction: row;
                margin-top: 16px; }
                .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent .giftTitle {
                  padding: 1px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  width: 48px;
                  height: 48px;
                  background: #00a5e3;
                  border-radius: 100%; }
                  .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    background-color: #ffffff;
                    font-family: 'PeridotPE-SemiBold', sans-serif;
                    font-size: 14px;
                    line-height: 16px;
                    font-weight: 600;
                    text-align: center;
                    color: #00a5e3;
                    border-radius: 100%; }
                    .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer.discount {
                      font-size: 10px; }
                    .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer i {
                      font-style: normal;
                      font-family: 'PeridotPE-SemiBold', sans-serif;
                      font-size: 14px;
                      line-height: 16px;
                      font-weight: 600; }
                      .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer i.smallText {
                        font-family: 'PeridotPE-Regular', sans-serif;
                        font-size: 12px;
                        line-height: 16px;
                        font-weight: 400; }
                      .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent .giftTitle .giftTitleContainer i.unlimitedIcon {
                        font-size: 13px;
                        line-height: 0;
                        position: relative;
                        top: 8px; }
                .renewOffers .renewOffersRow .renewOffer .giftsRow .gifts .gift .giftContainer .giftContent .giftCategory {
                  display: block;
                  margin-left: 4px;
                  padding-right: 4px;
                  font-family: 'PeridotPE-Regular', sans-serif;
                  font-size: 12px;
                  line-height: 16px;
                  font-weight: 400;
                  color: #212121;
                  flex: 1; }
      .renewOffers .renewOffersRow .renewOffer .giftsRow:first-child {
        margin-top: initial; }

.programsHeader {
  display: flex; }
  .programsHeader .program {
    display: flex;
    flex-direction: column;
    padding: 8px;
    width: 100%; }
    .programsHeader .program:last-child {
      position: relative;
      left: 12px; }
    .programsHeader .program .programMainTitle {
      display: flex;
      min-height: 28px;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      text-align: center; }
    .programsHeader .program .programTitle {
      display: block;
      text-align: center;
      margin-bottom: 8px;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .programsHeader .program .programPricing {
      position: relative;
      right: 8px; }
      @media only screen and (max-width: 480px) {
        .programsHeader .program .programPricing {
          right: 0; } }
      .programsHeader .program .programPricing .toPay {
        width: 100%;
        display: block;
        position: relative;
        margin-top: 8px;
        margin-bottom: -6px;
        padding-left: 0;
        white-space: nowrap;
        text-align: center; }
        .programsHeader .program .programPricing .toPay.withOldPrice {
          margin-top: 50px; }
          .programsHeader .program .programPricing .toPay.withOldPrice .oldPrice {
            position: absolute;
            top: -24px;
            right: 0;
            font-size: 14px;
            line-height: 17px; }
        .programsHeader .program .programPricing .toPay .euros {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 32px;
          line-height: 36px;
          font-weight: 700;
          letter-spacing: -2px;
          position: relative; }
          @media only screen and (max-width: 767px) {
            .programsHeader .program .programPricing .toPay .euros {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 32px;
              line-height: 36px;
              font-weight: 700; } }
          .programsHeader .program .programPricing .toPay .euros .imgEuro {
            display: none; }
        .programsHeader .program .programPricing .toPay .cents {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          position: relative;
          bottom: 2px; }
          .programsHeader .program .programPricing .toPay .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%; }
            .programsHeader .program .programPricing .toPay .cents .imgTooltip.top {
              top: -27px;
              left: unset;
              right: 0; }
        .programsHeader .program .programPricing .toPay .percentage {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          position: relative;
          padding-left: 2px;
          bottom: -4px; }
      .programsHeader .program .programPricing .paymentDeadline {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        width: 100%;
        display: block;
        margin: 6px auto;
        max-width: 132px;
        text-align: center; }

.programsContainer {
  display: flex; }
  .programsContainer .program {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0 8px; }
    .programsContainer .program:last-child {
      margin-right: 0; }
    .programsContainer .program:first-child {
      margin-left: 0; }
    .programsContainer .program .programMainTitle {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      text-align: center;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
      @media only screen and (max-width: 480px) {
        .programsContainer .program .programMainTitle {
          height: 32px; } }
    .programsContainer .program .programWrapper {
      background-color: #f2f2f3;
      flex: 1;
      border-radius: 18px; }
    .programsContainer .program.new .programWrapper {
      padding: 2px;
      background-color: #00a5e3; }
    .programsContainer .program.new .programContent {
      background-color: #ffffff;
      padding: 6px;
      height: 100%;
      border-radius: 16px; }
      .programsContainer .program.new .programContent .programContentCol i {
        color: #212121;
        display: block; }
      .programsContainer .program.new .programContent .programContentCol ul li strong {
        color: #212121; }
    .programsContainer .program .programContent {
      display: flex;
      flex-direction: column;
      padding: 8px;
      height: 100%; }
      .programsContainer .program .programContent .programContentMain {
        display: flex;
        flex-direction: column; }
        .programsContainer .program .programContent .programContentMain .mainTitle {
          display: block;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600;
          margin-bottom: 8px; }
      .programsContainer .program .programContent .programTitle {
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        min-height: 32px;
        margin-bottom: 8px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
        @media only screen and (max-width: 480px) {
          .programsContainer .program .programContent .programTitle {
            padding: 0; } }
      .programsContainer .program .programContent .programPricing {
        position: relative;
        margin-bottom: 58px; }
        .programsContainer .program .programContent .programPricing .toPay {
          width: 100%;
          display: block;
          position: relative;
          margin-top: 8px;
          margin-bottom: -6px;
          padding-left: 0;
          white-space: nowrap;
          text-align: center; }
          .programsContainer .program .programContent .programPricing .toPay.withOldPrice {
            margin-top: 50px; }
            .programsContainer .program .programContent .programPricing .toPay.withOldPrice .oldPrice {
              position: absolute;
              top: -24px;
              right: 0;
              font-size: 14px;
              line-height: 17px; }
          .programsContainer .program .programContent .programPricing .toPay .euros {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700;
            letter-spacing: -2px;
            position: relative; }
            @media only screen and (max-width: 767px) {
              .programsContainer .program .programContent .programPricing .toPay .euros {
                font-family: 'BTCosmo-Bold', sans-serif;
                font-size: 32px;
                line-height: 36px;
                font-weight: 700; } }
            .programsContainer .program .programContent .programPricing .toPay .euros .imgEuro {
              display: none; }
          .programsContainer .program .programContent .programPricing .toPay .cents {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            position: relative;
            bottom: 2px; }
            .programsContainer .program .programContent .programPricing .toPay .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%; }
              .programsContainer .program .programContent .programPricing .toPay .cents .imgTooltip.top {
                top: -27px;
                left: unset;
                right: 0; }
          .programsContainer .program .programContent .programPricing .toPay .percentage {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            position: relative;
            padding-left: 2px;
            bottom: -4px; }
        .programsContainer .program .programContent .programPricing .paymentDeadline {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          width: 100%;
          display: block;
          bottom: -6px;
          max-width: 140px;
          text-align: center;
          position: absolute;
          left: 50%;
          -webkit-transform: translate(-50%, 100%);
          -moz-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%); }
      .programsContainer .program .programContent .programContentCol {
        display: flex;
        align-items: flex-start; }
        .programsContainer .program .programContent .programContentCol:last-child {
          margin-bottom: 8px; }
        .programsContainer .program .programContent .programContentCol i {
          padding-right: 5px;
          padding-left: 1px;
          padding-bottom: 4px;
          width: 20px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          align-self: flex-start;
          position: relative;
          top: 2px;
          font-size: 14px;
          line-height: 14px;
          overflow: visible; }
          .programsContainer .program .programContent .programContentCol i.icon-marker {
            font-size: 20px; }
          .programsContainer .program .programContent .programContentCol i.icon-phone {
            font-size: 20px; }
          .programsContainer .program .programContent .programContentCol i.icon-sms {
            font-size: 20px; }
        .programsContainer .program .programContent .programContentCol ul {
          display: flex;
          flex-direction: column; }
          .programsContainer .program .programContent .programContentCol ul li {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            margin-bottom: 8px; }
            @media only screen and (max-width: 480px) {
              .programsContainer .program .programContent .programContentCol ul li {
                white-space: normal; } }
            .programsContainer .program .programContent .programContentCol ul li strong {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 600; }
    .programsContainer .program .programMoreContainer {
      display: flex;
      flex-direction: column; }
      .programsContainer .program .programMoreContainer-hidden {
        display: none; }
    .programsContainer .program .programMore {
      display: flex;
      flex-direction: column;
      padding-top: 16px;
      margin-top: 16px;
      border-top: 1px solid #e6e6e6; }
      .programsContainer .program .programMore:first-child {
        margin-top: 0; }
      .programsContainer .program .programMore:last-child {
        margin-bottom: 8px; }
      .programsContainer .program .programMore p {
        font-size: 16px;
        line-height: 18px;
        margin: 0; }
      .programsContainer .program .programMore .moreTitle {
        display: block;
        margin-bottom: 8px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600; }
      .programsContainer .program .programMore ul {
        display: flex;
        flex-direction: column; }
        .programsContainer .program .programMore ul li {
          display: flex;
          flex-direction: column;
          margin-bottom: 8px; }
          .programsContainer .program .programMore ul li:last-child {
            margin-bottom: 0; }
          .programsContainer .program .programMore ul li .heading {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            margin-bottom: 2px;
            display: block; }
          .programsContainer .program .programMore ul li .main {
            font-size: 16px;
            line-height: 18px;
            display: flex;
            align-items: center; }
            .programsContainer .program .programMore ul li .main i {
              width: 16px;
              height: 16px;
              margin-right: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              position: relative;
              top: 0; }
              .programsContainer .program .programMore ul li .main i.iconUnlimited {
                width: auto;
                height: auto;
                font-size: 12px; }
              .programsContainer .program .programMore ul li .main i.icon-sms {
                font-size: 12px; }

.modalDetails.withSpacing {
  padding: 24px 16px; }

.programsAnalysis {
  display: flex;
  flex-direction: column; }
  .programsAnalysis .programs {
    display: flex;
    align-items: center; }
    .programsAnalysis .programs .program {
      display: flex;
      align-items: center;
      cursor: pointer;
      text-align: center;
      justify-content: center;
      width: 50%;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121; }
      .programsAnalysis .programs .program i {
        display: flex;
        width: 24px;
        height: 24px;
        font-size: 24px;
        line-height: 24px;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        color: #212121 !important;
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        transform: scaleY(1); }
      .programsAnalysis .programs .program.active i {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }
  .programsAnalysis .analysisContent {
    display: none;
    width: 100%;
    background-color: #ffffff;
    padding: 8px;
    margin-top: 8px;
    border-radius: 16px; }
    .programsAnalysis .analysisContent .mainTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      display: block;
      margin-bottom: 8px; }
    .programsAnalysis .analysisContent .analysisDetails {
      display: flex;
      flex-direction: column;
      padding-left: 8px;
      padding-right: 26px; }
      .programsAnalysis .analysisContent .analysisDetails .analysisRow {
        display: flex;
        margin-bottom: 4px;
        flex-direction: column; }
        .programsAnalysis .analysisContent .analysisDetails .analysisRow:last-child {
          margin-bottom: 0; }
        .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore {
          cursor: pointer; }
          .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore.active .analysisRowMain i {
            -webkit-transform: translate(100%, -50%) scaleY(-1);
            -moz-transform: translate(100%, -50%) scaleY(-1);
            transform: translate(100%, -50%) scaleY(-1); }
          .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore .analysisRowMain {
            position: relative; }
            .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore .analysisRowMain i {
              display: flex;
              width: 20px;
              height: 20px;
              font-size: 20px;
              line-height: 20px;
              align-items: center;
              justify-content: center;
              position: absolute;
              right: -4px;
              top: 50%;
              -webkit-transform: translate(100%, -50%) scaleY(1);
              -moz-transform: translate(100%, -50%) scaleY(1);
              transform: translate(100%, -50%) scaleY(1); }
          .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore .analysisRowBottom {
            display: none;
            margin-bottom: 4px;
            padding-left: 8px; }
            .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore .analysisRowBottom .bottomRow {
              display: flex;
              width: 100%;
              margin: 2px 0; }
              .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore .analysisRowBottom .bottomRow span {
                font-size: 12px;
                line-height: 14px; }
                .programsAnalysis .analysisContent .analysisDetails .analysisRow.withMore .analysisRowBottom .bottomRow span.right {
                  margin-left: auto; }
        .programsAnalysis .analysisContent .analysisDetails .analysisRow .analysisRowMain {
          display: flex;
          align-items: flex-start;
          width: 100%; }
          .programsAnalysis .analysisContent .analysisDetails .analysisRow .analysisRowMain .rowLeft {
            font-size: 14px;
            line-height: 16px; }
          .programsAnalysis .analysisContent .analysisDetails .analysisRow .analysisRowMain .rowRight {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            margin-left: auto;
            min-width: 100px;
            text-align: right; }

.programsFooter {
  display: flex;
  align-items: flex-start;
  margin-top: 16px; }
  .programsFooter .program {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0 8px;
    padding: 16px;
    background-color: #e6e6e6;
    border-radius: 16px;
    border: 1px solid #e6e6e6; }
    .programsFooter .program:last-child {
      margin-right: 0; }
    .programsFooter .program:first-child {
      margin-left: 0; }
    .programsFooter .program.new {
      background-color: #ffffff; }
      .programsFooter .program.new .programContent .programContentCol i {
        background: #00a5e3;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: block; }
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
          .programsFooter .program.new .programContent .programContentCol i {
            background-image: none;
            -webkit-text-fill-color: #0ea600;
            color: #0ea600; } }
      .programsFooter .program.new .programContent .programContentCol ul li strong {
        color: #00a5e3; }
    .programsFooter .program .programContent {
      display: flex;
      flex-direction: column; }
      .programsFooter .program .programContent .programContentCol {
        display: flex;
        align-items: flex-start;
        margin-bottom: 8px; }
        .programsFooter .program .programContent .programContentCol:last-child {
          margin-bottom: 0; }
        .programsFooter .program .programContent .programContentCol i {
          padding-right: 5px;
          padding-left: 1px;
          padding-bottom: 4px;
          width: 20px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          align-self: flex-start;
          position: relative;
          top: 2px;
          font-size: 14px;
          line-height: 14px;
          overflow: visible; }
          .programsFooter .program .programContent .programContentCol i.icon-marker {
            font-size: 20px; }
          .programsFooter .program .programContent .programContentCol i.icon-phone {
            font-size: 20px; }
          .programsFooter .program .programContent .programContentCol i.icon-sms {
            font-size: 20px; }
        .programsFooter .program .programContent .programContentCol ul {
          display: flex;
          flex-direction: column; }
          .programsFooter .program .programContent .programContentCol ul li {
            font-size: 14px;
            line-height: 16px;
            margin-bottom: 2px; }
            @media only screen and (max-width: 480px) {
              .programsFooter .program .programContent .programContentCol ul li {
                white-space: normal; } }
            .programsFooter .program .programContent .programContentCol ul li:last-child {
              margin-bottom: 0; }
            .programsFooter .program .programContent .programContentCol ul li strong {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 600; }
    .programsFooter .program .programMore {
      display: flex;
      flex-direction: column;
      padding-top: 8px;
      margin-top: 16px;
      border-top: 1px solid #e6e6e6; }
      .programsFooter .program .programMore.withoutBorder {
        padding-top: 0;
        border: none; }
      .programsFooter .program .programMore .moreTitle {
        display: block;
        margin-bottom: 8px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600; }
      .programsFooter .program .programMore ul {
        display: flex;
        flex-direction: column; }
        .programsFooter .program .programMore ul li {
          display: flex;
          flex-direction: column;
          margin-bottom: 8px; }
          .programsFooter .program .programMore ul li:last-child {
            margin-bottom: 0; }
          .programsFooter .program .programMore ul li .heading {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            margin-bottom: 2px;
            display: block; }
          .programsFooter .program .programMore ul li .main {
            font-size: 16px;
            line-height: 18px;
            display: flex;
            align-items: center; }
            .programsFooter .program .programMore ul li .main i {
              width: 16px;
              height: 16px;
              margin-right: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              position: relative;
              top: 0; }
              .programsFooter .program .programMore ul li .main i.iconUnlimited {
                width: auto;
                height: auto;
                font-size: 12px; }
              .programsFooter .program .programMore ul li .main i.icon-sms {
                font-size: 20px; }

.row.fullRight {
  margin-right: 0; }

.row .fullRight {
  padding-right: 0 !important; }

.offerSubtitle {
  font-size: 14px;
  line-height: 16px;
  display: block;
  margin-top: 8px;
  margin-bottom: 16px;
  padding-right: 22%; }
  @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .offerSubtitle {
      padding-right: 26%; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .offerSubtitle {
      padding-right: 10%; } }
  @media only screen and (min-width: 480px) and (max-width: 768px) {
    .offerSubtitle {
      padding-right: 38%; } }
  @media only screen and (max-width: 480px) {
    .offerSubtitle {
      padding-right: 22%; } }

.popupGradient {
  opacity: 0.7;
  background: rgba(55, 71, 79, 0.3) !important;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 900;
  display: none; }

.customPopup {
  position: fixed;
  left: 50%;
  top: 50%;
  display: none;
  z-index: 920;
  width: 100%;
  max-width: 450px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  @media only screen and (max-width: 480px) {
    .customPopup {
      max-width: 300px; } }
  .customPopup .paymentContent {
    padding: 24px;
    padding-bottom: 16px;
    border-radius: 16px; }
    .customPopup .paymentContent .buttonOuter {
      margin-top: 40px; }

.p2pGift {
  margin: 16px 0 8px;
  padding-left: 8px; }

.p2pGiftHeading {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #00a5e3;
  margin-bottom: 4px;
  display: block; }

.p2pGiftDescription {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.p2pGiftDuration {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.offerIconsGradientContainer {
  width: 22px; }

.offerIconsGradient {
  height: 16px;
  width: 16px; }

.requests {
  border-top: 2px solid #f2f2f3;
  background-color: #ffffff; }
  .requests .requestsBoxContent.multipleRequests .requestsBoxCol {
    padding: 12px 16px;
    margin: 0;
    border-left: 2px solid #ffffff; }
    .requests .requestsBoxContent.multipleRequests .requestsBoxCol.active {
      border-left: 2px solid #e20074;
      background-color: #e6e6e6;
      border-bottom: none; }
      .requests .requestsBoxContent.multipleRequests .requestsBoxCol.active:before, .requests .requestsBoxContent.multipleRequests .requestsBoxCol.active:after {
        display: none; }

.notificationsRadioList {
  padding-left: 30px; }

.billSection .dropDownContentBox.small .dropDownCol span {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.billSection .dropDownContentBox.smallFonts .dropDownCol span {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

@media only screen and (max-width: 480px) {
  body .exportBox .flexRow {
    align-items: flex-end; } }

body .dueBill {
  padding-right: 20px;
  margin-bottom: 8px; }

@media only screen and (max-width: 480px) {
  .billStatistics .megaFilter {
    flex-flow: column !important; } }

@media only screen and (max-width: 480px) {
  .billStatistics .megaFilter .megaFilterContent.openMenu {
    margin-bottom: 12px; } }

@media only screen and (max-width: 480px) {
  .billStatistics .megaFilter .megaFilterContent .mediumDrop {
    max-width: 100% !important; } }

@media only screen and (max-width: 480px) {
  .billStatistics .relativeBox {
    width: 100%;
    padding-right: 16px; } }

.billSection .megaFilterContainer {
  z-index: 4; }
  @media only screen and (max-width: 1230px) {
    .billSection .megaFilterContainer .megaFilter .megaFilterContent {
      align-items: flex-start; } }
  .billSection .megaFilterContainer .megaFilter .megaFilterContent .relativeBox {
    width: 100%; }
  .billSection .megaFilterContainer .megaFilter .megaFilterContent.hidden {
    display: none; }

.exportBox {
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
  padding: 16px; }
  .exportBox.ddFilterWrapper {
    border: none; }
  .exportBox .ddFilter {
    border: none !important; }
  .exportBox .exportBoxTitle {
    margin-bottom: 16px;
    display: block;
    width: 100%; }
  .exportBox .inlineRadios {
    padding-left: 16px; }
    @media only screen and (min-width: 480px) and (max-width: 768px) {
      .exportBox .inlineRadios {
        padding-left: 0;
        flex-flow: row !important; } }
    @media only screen and (max-width: 480px) {
      .exportBox .inlineRadios {
        padding-left: 16px;
        flex-flow: column !important; } }
  .exportBox .columnRadios {
    padding-left: 16px; }
    @media only screen and (min-width: 480px) and (max-width: 768px) {
      .exportBox .columnRadios {
        padding-left: 0; } }
    @media only screen and (max-width: 480px) {
      .exportBox .columnRadios {
        padding-left: 16px; } }

@media only screen and (max-width: 480px) {
  .billSection .inlineContent {
    flex-flow: column !important; } }

@media only screen and (min-width: 1025px) and (max-width: 1230px) {
  .billSection .megaFilterContent .relativeBox {
    width: 100%;
    padding-right: 16px; } }

@media only screen and (max-width: 767px) {
  .billSection .megaFilterContent .relativeBox {
    width: 100%;
    padding-right: 16px; } }

@media only screen and (min-width: 1025px) and (max-width: 1230px) {
  .billSection .megaFilterContent .relativeBox .mediumDrop,
  .billSection .megaFilterContent .relativeBox .smallDrop {
    max-width: 100%; } }

@media only screen and (max-width: 767px) {
  .billSection .megaFilterContent .relativeBox .mediumDrop,
  .billSection .megaFilterContent .relativeBox .smallDrop {
    max-width: 100%; } }

.inlineContentLeft {
  margin-right: 48px; }
  @media only screen and (max-width: 480px) {
    .inlineContentLeft {
      margin-right: 0; } }
  .inlineContentLeft .megaFilterContent {
    padding-left: 30px; }

.inlineContentRight .megaFilterContent {
  padding-left: 30px; }
  @media only screen and (max-width: 480px) {
    .inlineContentRight .megaFilterContent .smallDrop {
      max-width: 100%; } }

.megaFilterContent.iddle {
  pointer-events: none;
  opacity: 0.5; }

@media only screen and (max-width: 1024px) {
  .billSection:not(.billMain) .leftSidebar {
    width: 100%; } }

.billSection:not(.billMain) .paymentContent .paymentDetails .paymentDetailsCol span {
  min-width: 60%; }

.detailsTable {
  margin-top: 40px;
  text-align: left;
  height: auto;
  max-height: 340px;
  overflow-y: hidden;
  overflow-x: auto;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
  .detailsTable-fullWidth {
    width: 100%; }
  .detailsTableFullHeight {
    max-height: initial; }
  .detailsTable.scrollableVertical {
    overflow-y: auto; }
  .detailsTable.notStripped {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e6e6e6; }
    .detailsTable.notStripped table th,
    .detailsTable.notStripped table td {
      padding-left: 0;
      padding-right: 24px; }
    .detailsTable.notStripped table tr {
      border-bottom: 1px solid #e6e6e6; }
      .detailsTable.notStripped table tr:nth-of-type(odd) {
        background-color: transparent; }
      .detailsTable.notStripped table tr:last-child {
        border-bottom: none; }
  .detailsTable.withoutHeader table tr {
    border-bottom: none; }
    .detailsTable.withoutHeader table tr:nth-of-type(odd) {
      border-radius: 16px;
      background-color: #f2f2f3; }
    .detailsTable.withoutHeader table tr:last-child {
      border-bottom: none; }
  .detailsTable.withoutShadow:before {
    display: none; }
  .detailsTable.opened {
    max-height: 2000px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  .detailsTable:before {
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0; }
  @media only screen and (max-width: 650px) {
    .detailsTable .billTableResponsive th {
      padding: 4px 4px; } }
  @media only screen and (max-width: 480px) {
    .detailsTable .billTableResponsive th {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600;
      padding: 4px 4px; } }
  @media only screen and (max-width: 650px) {
    .detailsTable .billTableResponsive td {
      padding: 4px 4px; } }
  @media only screen and (max-width: 480px) {
    .detailsTable .billTableResponsive td {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      padding: 4px 4px; }
      .detailsTable .billTableResponsive td .billPhoneNumber {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        word-break: break-word; } }
  .detailsTable .billTableResponsive .downloadFile {
    display: block; }
    @media only screen and (max-width: 480px) {
      .detailsTable .billTableResponsive .downloadFile {
        display: none; } }
  .detailsTable .billTableResponsive .downloadFileNested {
    margin-top: 16px;
    display: none; }
    @media only screen and (max-width: 480px) {
      .detailsTable .billTableResponsive .downloadFileNested {
        display: block; } }

.simpleBorder {
  width: 100%;
  height: 1px;
  background-color: #4d4d4d; }

.borderedToggleContainer {
  position: relative;
  z-index: 0; }
  .borderedToggleContainer.withBackground {
    margin-top: 4px; }
    .borderedToggleContainer.withBackground:after {
      background-color: #f2f2f3;
      content: '';
      width: calc(100% + 32px);
      height: calc(100% + 10px);
      left: -16px;
      top: 2px;
      display: block;
      position: absolute;
      z-index: -1; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }
  table.withoutStripes tr:nth-of-type(odd) {
    background-color: transparent; }
  table.withoutStripes tr:nth-of-type(even) {
    background-color: transparent; }
  table.withoutStripes tr:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none; }
  table.withoutStripes tr th,
  table.withoutStripes tr td {
    padding: 12px 0;
    padding-right: 16px; }
  table tr {
    border-bottom: 1px solid #e6e6e6; }
    table tr:nth-of-type(odd) {
      border-radius: 16px;
      background-color: #f2f2f3; }
    table tr:first-child {
      background-color: #ffffff;
      border-bottom: none; }
    table tr.new td {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700; }
      table tr.new td .visitLink {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700; }
  table th {
    font-weight: normal;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    vertical-align: text-top;
    min-height: 45px;
    padding: 12px 12px;
    border: none; }
    table th.xlarge {
      min-width: 100px; }
    table th.large {
      min-width: 200px; }
    table th.small {
      min-width: 140px; }
  table td {
    font-weight: normal;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    vertical-align: text-top;
    min-height: 45px;
    padding: 12px 12px;
    border: none; }
    table td i {
      margin-left: 24px;
      color: #004b87;
      cursor: pointer; }
    table td span {
      margin-right: 4px;
      width: 20px;
      display: inline-block; }
      table td span.icon-card {
        font-size: 22px; }

.paginated tr:first-child {
  background-color: #f2f2f3;
  border-bottom: 1px solid #e6e6e6; }

.paginated tr.tableHead {
  background-color: #ffffff;
  border-bottom: none; }

.lessMore {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px; }
  .lessMore i {
    padding-left: 8px;
    font-size: 20px;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
  .lessMore.opened i {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    transform: scaleY(-1); }

.programEdit {
  display: flex;
  flex-flow: column;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #9d9d9c;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }
  .programEdit.withPadding {
    padding: 8px; }
  .programEdit.noBorder {
    padding-top: 0;
    margin-top: 0;
    border: none; }
  .programEdit .programEditTitle {
    margin-bottom: 8px;
    width: 100%;
    display: block; }
  .programEdit .programEditFlex {
    display: flex;
    flex-wrap: wrap; }
    .programEdit .programEditFlex .programEditRow {
      min-width: 36%;
      margin-right: 14%;
      padding-right: 12px; }
      @media only screen and (min-width: 480px) and (max-width: 768px) {
        .programEdit .programEditFlex .programEditRow {
          min-width: 40%;
          margin-right: 10%; } }
      @media only screen and (max-width: 480px) {
        .programEdit .programEditFlex .programEditRow {
          margin-right: 0; } }
  .programEdit .programEditRow {
    padding: 16px 0;
    display: flex;
    border-bottom: 1px solid #f2f2f3;
    align-items: center; }
    @media only screen and (max-width: 480px) {
      .programEdit .programEditRow {
        flex-flow: column;
        align-items: flex-start;
        width: 100%; } }
    .programEdit .programEditRow.withoutIcon strong {
      padding-right: 24px; }
    .programEdit .programEditRow strong {
      font-weight: normal;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      margin-left: auto; }
      @media only screen and (max-width: 480px) {
        .programEdit .programEditRow strong {
          margin-top: 4px;
          margin-left: 0; } }
      .programEdit .programEditRow strong i {
        cursor: pointer;
        padding-left: 8px; }

.billSection .inlineInputs .smallInput {
  margin-left: 12px; }
  @media only screen and (max-width: 767px) {
    .billSection .inlineInputs .smallInput {
      margin-left: 0; } }

.billSection .inlineInputs .regularInput {
  margin-left: 12px; }
  @media only screen and (max-width: 767px) {
    .billSection .inlineInputs .regularInput {
      margin-left: 0; } }

.billSection .detailsBox .detailsBottom.margined {
  margin: 30px 0 0; }

.paddingContent {
  padding: 12px 16px;
  display: flex;
  flex-flow: column;
  background-color: #ffffff; }
  .paddingContent.firstContent {
    margin-top: 34px; }
  .paddingContent.noPaddingTop .borderedToggle .borderedToggleHeader {
    font-size: 16px;
    line-height: 18px; }
  .paddingContent .borderedToggle {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #4d4d4d;
    display: flex;
    flex-flow: column; }
    .paddingContent .borderedToggle.withoutBorder {
      border: none;
      padding-bottom: 0; }
    .paddingContent .borderedToggle .borderedToggleHeader {
      display: flex;
      align-items: flex-end;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
      @media only screen and (max-width: 480px) {
        .paddingContent .borderedToggle .borderedToggleHeader {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; } }
      .paddingContent .borderedToggle .borderedToggleHeader .borderedToggleRight {
        margin-left: auto;
        position: relative;
        padding-right: 24px;
        font-size: 16px;
        line-height: 16px;
        min-height: 16px; }
        @media only screen and (max-width: 480px) {
          .paddingContent .borderedToggle .borderedToggleHeader .borderedToggleRight {
            padding-left: 8px; } }
        .paddingContent .borderedToggle .borderedToggleHeader .borderedToggleRight i {
          font-size: 18px;
          position: absolute;
          cursor: pointer;
          right: 0;
          top: 1px;
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          transform: scaleY(1); }
          .paddingContent .borderedToggle .borderedToggleHeader .borderedToggleRight i.opened {
            -webkit-transform: scaleY(-1);
            -moz-transform: scaleY(-1);
            transform: scaleY(-1); }
    .paddingContent .borderedToggle .borderedToggleContent {
      display: flex;
      align-items: flex-end;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 18px;
      line-height: 28px;
      font-weight: 400;
      margin-top: 8px;
      padding-left: 12px; }
      @media only screen and (max-width: 480px) {
        .paddingContent .borderedToggle .borderedToggleContent {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          padding-left: 0; } }
      .paddingContent .borderedToggle .borderedToggleContent .borderedToggleLeft em {
        font-style: normal;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
      .paddingContent .borderedToggle .borderedToggleContent .borderedToggleRight {
        margin-left: auto;
        position: relative;
        padding-right: 24px;
        font-size: 16px;
        line-height: 16px; }
        @media only screen and (max-width: 480px) {
          .paddingContent .borderedToggle .borderedToggleContent .borderedToggleRight {
            padding-left: 8px; } }

.flexTable {
  display: flex;
  flex-flow: column;
  margin-top: 40px;
  overflow-x: auto; }
  .flexTable .flexTableContentRowContainer,
  .flexTable .flexTableRowContainer {
    display: flex;
    padding: 0 8px;
    width: 100%;
    min-width: 800px; }
  .flexTable .flexTableRowContainer {
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6; }
    .flexTable .flexTableRowContainer .flexTableRow {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%; }
      .flexTable .flexTableRowContainer .flexTableRow .flexTableTitle {
        flex: 1;
        padding: 8px;
        min-width: 110px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        min-height: 48px; }
        @media only screen and (max-width: 1024px) {
          .flexTable .flexTableRowContainer .flexTableRow .flexTableTitle {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600; } }
        .flexTable .flexTableRowContainer .flexTableRow .flexTableTitle.large {
          flex: 2;
          min-width: 350px; }
  .flexTable .flexTableContentRowContainer {
    background-color: #f2f2f3; }
    .flexTable .flexTableContentRowContainer .flexTableContentRow {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-bottom: 1px solid #e6e6e6;
      width: 100%; }
      .flexTable .flexTableContentRowContainer .flexTableContentRow .flexTableTitle {
        flex: 1;
        padding: 12px 8px;
        min-width: 110px; }
        .flexTable .flexTableContentRowContainer .flexTableContentRow .flexTableTitle.large {
          flex: 2;
          min-width: 350px; }
    .flexTable .flexTableContentRowContainer:last-child .flexTableContentRow {
      border: none; }

.simpleTable {
  margin-top: 60px;
  text-align: left;
  padding: 0 16px; }
  .simpleTable th:first-child {
    padding-left: 0; }
  .simpleTable td:first-child {
    padding-left: 0; }

.multiTable {
  text-align: left;
  margin: 0 16px;
  position: relative;
  min-height: 40px;
  margin-top: 12px;
  border-bottom: 1px solid #848484; }
  .multiTable th {
    position: relative; }
    .multiTable th:first-child {
      padding-left: 0; }
    .multiTable th td:first-child {
      padding-left: 0; }
    .multiTable th.regularText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .multiTable th .tableArrow {
      position: absolute;
      right: 0;
      top: 14px;
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      transform: scaleY(1);
      font-size: 18px;
      cursor: pointer; }
      .multiTable th .tableArrow.opened {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }

.fullWidthTable {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  padding-right: 20px;
  margin-top: 12px;
  position: relative; }
  .fullWidthTable:after {
    content: '';
    width: calc(100% + 32px);
    left: -16px;
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: #9d9d9c;
    display: block; }
  .fullWidthTable:last-child:after, .fullWidthTable.withoutBorder:after {
    display: none; }
  .fullWidthTable .flexRow {
    padding: 8px 0; }
    .fullWidthTable .flexRow span {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
      .fullWidthTable .flexRow span.fullWidthTitle {
        margin-left: auto; }
  .fullWidthTable .bgDark {
    position: relative;
    z-index: 0; }
    .fullWidthTable .bgDark:before {
      position: absolute;
      content: '';
      width: calc(100% + 52px);
      left: -16px;
      height: 100%;
      background-color: #f2f2f3;
      top: 0;
      z-index: -1; }
    .fullWidthTable .bgDark .flexRow.totalRow span {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
      .fullWidthTable .bgDark .flexRow.totalRow span.fullWidthTitle {
        margin-left: auto; }
    .fullWidthTable .bgDark .flexRow span {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .fullWidthTable .bgDark .flexRow span.fullWidthTitle {
        margin-left: auto; }

body .ui-widget-shadow {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

body .ui-widget.ui-widget-content {
  z-index: 9999999;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border: none; }
  body .ui-widget.ui-widget-content.ui-menu .ui-menu-item {
    background-color: #ffffff;
    border-color: transparent !important;
    box-sizing: border-box; }
    body .ui-widget.ui-widget-content.ui-menu .ui-menu-item:hover {
      background-color: #f2f2f3 !important; }
    body .ui-widget.ui-widget-content.ui-menu .ui-menu-item .ui-menu-item-wrapper {
      box-sizing: border-box;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      line-height: 32px !important;
      display: flex;
      flex-flow: row;
      padding: 0 40px 0px 16px !important;
      background-color: transparent;
      cursor: pointer;
      color: #848484;
      border-color: transparent !important; }

.radioTarget {
  visibility: hidden; }

.alignButtonBottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0px 0px 16px 16px; }

.digitalOnboardingCheckboxLink {
  text-decoration: underline;
  color: #0000ee; }

.fixedConnectionIdentifyContainer {
  max-width: 608px;
  width: 100%; }

.speedUpgrade .speedUpgradeDdBorder.fixedConnectionFormHeader {
  margin-top: 8px; }

.speedUpgrade .speedUpgradeInfo.fixedConnectionInfo {
  padding-bottom: 24px !important; }

.speedUpgrade .speedUpgradeFieldContainer.fixedConnectionAppointment {
  display: flex;
  gap: 16px; }

.speedUpgradeBody .ddFilterResultsContent {
  text-decoration: none !important; }
  .speedUpgradeBody .ddFilterResultsContent:hover {
    text-decoration: none !important; }

.fixedConnectionSuccessHeading {
  margin-top: 72px; }

.fixedConnectionSynopsisMargin {
  margin-top: 16px; }

.fixedConnectionRouter {
  align-self: center; }

.fixedConnectionPDF {
  display: flex;
  align-self: center;
  justify-content: center;
  margin-bottom: 8px; }

.speedUpgrade .digitalConnectionNewAccountForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.fixedconnectionPadding {
  padding-top: 32px; }

.fixedConnectionInfoContainer {
  display: flex;
  padding: 8px 16px 8px 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 16px;
  border: 2px solid #2775b2;
  background: #f4f8fb;
  margin-bottom: 24px; }

.fixedConnectionRouterFieldWrapper {
  margin-top: 40px;
  width: 100%; }

.fixedConnectionInfoContainerContent {
  margin-left: 32px; }

.fixedConnectionInfoContainerHeader {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  display: flex;
  gap: 8px; }

.fixedConnectionSignDocumentsHeading {
  margin-top: 72px; }

.speedUpgrade .speedUpgradeSynipsisBox.fixedConnectionSynopsisBox {
  background-color: unset;
  box-shadow: unset;
  padding: 0;
  margin-top: 32px; }

.fixedConnectionSynopsisBackButton {
  margin-top: 76px; }

.fixedConnectionChangeAppointment {
  display: flex;
  align-self: flex-end;
  color: unset;
  border-color: unset; }

.fixedConnectionAppointmentContainer {
  max-height: 152;
  gap: 32px;
  padding-top: 24px;
  padding-right: 16px;
  padding-bottom: 16px;
  padding-left: 16px;
  padding: 24px 16px 16px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 2px 0px #00000024;
  box-shadow: 0px 1px 3px 0px #00000033;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: unset;
  text-decoration: none !important; }

.fixedConnectionAppointmentContainer.selected {
  border: 1.5px solid #e20074; }

.fixedConnectionOrderNum {
  text-decoration: none !important;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.fixedConnectionBookingButton {
  padding: 16px 24px;
  margin-top: 24px;
  text-decoration: none !important; }

.fixedConnectionAppointmentContainerTextfields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none !important; }

.fixedConnectionAppointmentContainerTextfieldContent {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  font-family: 'PeridotPE-Bold';
  text-decoration: none !important; }

.fixedConnectionAppointmentContainerTextfieldHeader {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-decoration: none !important; }

.speedUpgrade .speedUpgradeInputsList.fixedUpgradeSendEquipmentInputsList {
  max-width: 608px;
  width: 100%;
  gap: 24px; }

.speedUpgrade .speedUpgradeHiddenContainer.fixedConnectionHiddenContainer {
  align-items: unset; }

.speedUpgradeNewAddressRadioButton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0; }

.speedUpgrade .speedUpgradeInputsList.fixedConnectionEntry {
  max-width: 608px;
  width: 100%;
  gap: 0px; }

.fixedConnectionHideContent {
  display: none; }

.md-radio .fixedConnectionRadioIdentSubtext {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 608px;
  width: 100%;
  display: flex;
  flex-direction: column; }
  .md-radio .fixedConnectionRadioIdentSubtext:before {
    margin-top: 12px; }
  .md-radio .fixedConnectionRadioIdentSubtext:after {
    margin-top: 12px; }
  .md-radio .fixedConnectionRadioIdentSubtext:checked {
    margin-top: 12px; }

.fixedConnectionRadioInput {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 16px;
  border-radius: 16px;
  background: #ffffff; }

.fixedConnectionBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 24px 16px; }

.fixedConnectionEntry {
  max-width: 608px;
  width: 100%; }

.speedUpgrade .speedUpgradeInfo.fixedConnectionEntryInfo {
  gap: 8px; }

.speedUpgrade .speedUpgradeInfo.fixedConnectionAddressEntryInfo {
  gap: 8px;
  margin-bottom: 24px; }

.speedUpgrade .speedUpgradeDownloadDocsInfo.fixedConnectionVoucherBody {
  display: flex;
  gap: 16px; }

.fixedConnectionButton.fixedConnectionVoucherButton {
  width: 100%;
  margin-top: 8px; }

.fixedConnectionButton.fixedConnectionVoucherButtonNoBg {
  border-color: #212121;
  color: #212121;
  background-color: unset; }

.fixedConnectionVoucherGroup {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.group label.fixedConnectionDdLabel {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 48px;
  margin-bottom: 48px;
  left: 0; }

.fixedConnectionPopupButtonGroup {
  display: flex;
  flex-direction: row;
  gap: 8px; }

.fixedConnectionPopupButton {
  width: 50%;
  margin-top: 24px; }

.fixedConnectionPopupSingleButton {
  display: flex;
  justify-content: flex-end;
  margin: 24px; }

.fixedConnectionPopupVerticalButtonGroup {
  display: flex;
  flex-direction: column;
  margin: 24px;
  gap: 8px; }

.fixedConnectionAccountSelectionCheckbox {
  display: flex;
  flex-direction: row;
  margin-top: 48px; }

.fixedConnectionContactSelectionCheckbox {
  display: flex;
  flex-direction: row; }

.fixedConnectionNewAddressSelectionCheckbox {
  margin-top: 24px; }

.fixedConnectionAccountSelectContinueButton {
  margin-top: 48px; }

.fixedConnectionWidthLayout {
  max-width: 608px;
  width: 100%; }

.fixedConnectionNewAddressContinueButton {
  display: flex;
  justify-content: flex-end; }

.fixedConnectionIdentifyMarginButton {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px; }

.fixedConenctionAccountContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 608px; }

.fixedConnectionDropdown {
  margin-top: 20px; }

.fixedConenctionAccountSynopsis {
  margin-top: 24px;
  margin-bottom: 24px; }

.fixedConnectionAccountOptions {
  margin-top: 24px; }

.fixedConnectionFormCheckbox {
  margin: 0; }

.fixedConenctionSynopsisHeader {
  margin-bottom: 36px; }

.fixedConnectionAccountSelectionInfo {
  align-self: center;
  margin-left: 20px; }

.fixedConnectionNewAddressAssistive {
  margin-bottom: 8px; }

.fixedConnectionNewAddressContactMargin {
  margin-bottom: 18px; }

.fixedConnectionAccountContactInfo {
  display: flex;
  flex-direction: column;
  gap: 48px; }

.fixedConenctionAccountContactHeading {
  margin-bottom: 24px; }

.fixedConnectionAccountSelectionAssistiveText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.md-radio .fixedUpgradeSendEquipmentAddressRadioHeader {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-bottom: 16px; }

.fixedConnectionFormRequiredAssistive {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600; }

.fixed-connection-modal-container {
  max-width: 707px; }

.fixed-connection-filters-modal-container {
  max-width: 620px; }

.fixedConnectionFiltersModalBody {
  padding: 0;
  border-radius: 0px;
  height: 100%; }

.fixedConnectionNewConnectionBody {
  display: flex;
  flex-direction: column;
  max-width: 608px;
  width: 100%;
  gap: 16px; }

.fixedConnectionBackButton {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  color: #0ea600;
  text-decoration: none !important; }

.fixedConnectionIdentitySubtext {
  margin-bottom: 32px; }

.fixedConnectionStartSubtext {
  margin-bottom: 24px; }

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

.md-radio .fixedConnectionFilterOptionText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.fixedconnectionFiltersRadioContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px; }

.subsidyRadio {
  display: flex;
  flex-direction: row; }

.fixedConnectionNewAddressContinueButton {
  display: flex;
  margin-top: 24px; }

.primaryButton.fixedConnectionContinueButton {
  display: flex;
  align-self: flex-end; }

.buttonGroup.fixedConnectionContinueButton {
  display: flex;
  margin-top: 40px;
  justify-content: flex-end; }

.fixedConnectionButton {
  cursor: pointer;
  text-decoration: none !important;
  background-color: #0e8103;
  max-width: 117px;
  margin-top: 32px;
  padding: 16px 24px 16px 24px; }
  .fixedConnectionButton:hover {
    text-decoration: none; }

.fixedConnectionErrorMsg {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 4px; }

.fixedConnectionBackButtonContainer {
  margin-top: 24px;
  margin-bottom: 24px; }

.fixedConnectionEmailContainer {
  max-width: 508px;
  width: 100%; }

.fixedConnectionAgeConsent {
  display: flex;
  margin-top: 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.fixedConnectionAgeConsent.fixedConnectionIndetificationAge {
  margin-top: 32px; }

.fixedConnectionContainer {
  max-width: 608px;
  width: 100%; }
  @media only screen and (min-width: 480px) and (max-width: 768px) {
    .fixedConnectionContainer.buttonToBottom {
      display: flex;
      flex-direction: column;
      gap: 16px;
      justify-content: space-between;
      height: calc(100vh - 169px); } }

.fixedConnectionAfmSecondField {
  margin-top: 24px; }

.fixedConnectionFiltersModal {
  width: 100%;
  height: 100%;
  background-color: #ffffff; }

.fixedConnectionFormColumn {
  display: flex;
  flex-direction: column;
  width: 50%; }

.fixedConnectionFormAddressContainer {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px; }
  .fixedConnectionFormAddressContainer .item {
    flex: 1 0 40%; }

.fixedConnectionFormColumnContainer {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-bottom: 16px; }

.fixedConnectionFormFullWidthContainer {
  margin-top: 8px; }

.fixedConnectionFormContainerLabel {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

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

.fixedFormField {
  margin-top: 8px;
  margin-bottom: 16px; }

.fixedFormFieldContainer:has(.errorRed:not(.hidden)) .fixedFormField {
  margin-bottom: 4px; }

.fixedConnectionAdminInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px; }
  .fixedConnectionAdminInfo .fixedConnectionAdminInfoHeading {
    font-family: 'BTCosmo-Bold';
    font-size: 20px;
    line-height: 24px; }
  .fixedConnectionAdminInfo .fixedConnectionAssistiveText {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    margin-top: 24px; }

.fixedConnectionEmailVerificationField {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 6px;
  margin-bottom: 32px; }

.fixedConnecitonEmailHeader {
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 8px; }

.fixedConnectionCheckboxWithInfo {
  display: flex; }

.fixedConnectionFieldIcon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: auto;
  pointer-events: none; }

.fixedConnectionSynopsisTooltip {
  width: 24px;
  height: 24px;
  display: flex;
  align-self: center;
  margin-left: auto; }

.speedUpgrade .speedUpgradeFormHeaderServiceText.fixedConnectionSynopsisHeader {
  margin-bottom: 24px; }

.fixedConnectionFieldWithIconGroup {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 2px 0px #00000024;
  margin-top: 16px;
  margin-bottom: 16px;
  box-shadow: 0px 1px 3px 0px #00000033; }

.group.speedUpgradeInput .simpleInput.fixedConnectionFieldWithIcon {
  padding-left: 30px;
  width: 100%;
  border: 1px solid #0099cc; }

.fixedConnectionCheckboxWithInfoTooltip {
  display: flex;
  margin-left: auto; }

.speedUpgrade .speedUpgradeTermsCheckbox.fixedconnectionCheck {
  display: flex;
  margin-top: 28px !important; }

.fixedConnectionCheckboxGroup {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.fixedConnectionIdentDetailsContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px; }

.fixedOnlyCheckBoxWithTextContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px; }

.fixedOnlyCheckBoxContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px; }
  .fixedOnlyCheckBoxContainer.alignCheckboxStart {
    align-items: start; }
  .fixedOnlyCheckBoxContainer .fixedOnlyCheckBox {
    display: flex;
    height: 40px;
    align-items: flex-start; }
    .fixedOnlyCheckBoxContainer .fixedOnlyCheckBox .md-checkbox {
      margin: 0; }
  .fixedOnlyCheckBoxContainer .fixedOnlyChackboxLabel {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

.fixedConnectionSuccessIcon {
  max-width: 60.5px;
  width: 100%;
  max-height: 60.5px;
  height: 100%;
  margin-bottom: 16px; }

.fixedConnectionHeading {
  margin-top: 24px;
  margin-bottom: 8px; }

.fixedConnectionPortInCheckbox {
  margin-top: 24px;
  display: flex;
  align-items: center; }

.fixedConnectionInputWithInfo {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px; }

.fixedConnectionheaderTitle {
  flex: 1;
  text-align: center;
  font-family: 'BTCosmo-Bold';
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

.fixedConnectionCalednarAddress {
  margin-top: 8px;
  margin-bottom: 16px; }

.fixedConnectionCalendar {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  padding: 12px 16px 12px 16px;
  border-radius: 16px;
  gap: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 2px 0px #00000024;
  box-shadow: 0px 1px 3px 0px #00000033; }
  .fixedConnectionCalendar .flatpickr-calendar {
    display: flex !important;
    flex-direction: column;
    visibility: visible !important;
    box-shadow: none !important;
    width: 100%; }
  .fixedConnectionCalendar .flatpickr-months {
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    height: 56px; }
    .fixedConnectionCalendar .flatpickr-months .flatpickr-month {
      height: 56px;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700; }
  .fixedConnectionCalendar .fixedConnectionCalendar .flatpickr-innerContainer .flatpickr-rContainer {
    width: 100%; }
  .fixedConnectionCalendar .flatpickr-days {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; }
  .fixedConnectionCalendar .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 10px;
    padding-bottom: 24px;
    width: 100% !important;
    justify-content: center; }
  .fixedConnectionCalendar .flatpickr-day {
    width: 48px !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; }
  .fixedConnectionCalendar .flatpickr-innerContainer {
    display: inline-flex;
    border-top: 1px solid #5f5f5f;
    justify-content: center; }
    .fixedConnectionCalendar .flatpickr-innerContainer .flatpickr-rContainer {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
  .fixedConnectionCalendar .flatpickr-calendar.inline {
    padding: 10px 20px 10px 20px; }
  .fixedConnectionCalendar .fixedCalendarHeader {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    display: flex;
    margin-bottom: 48px; }
  .fixedConnectionCalendar .numInputWrapper span.arrowUp {
    display: none; }
  .fixedConnectionCalendar .numInputWrapper span.arrowDown {
    display: none; }
  .fixedConnectionCalendar .flatpickr-calendar {
    background: #262626; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-weekday {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
      color: #e1e1e1; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-current-month span.cur-month {
      pointer-events: none;
      color: #e1e1e1;
      background: #262626; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-current-month input.cur-year[disabled] {
      pointer-events: none;
      color: #e1e1e1;
      background: #262626; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-day {
      color: #fff; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-day.selected {
      background-color: #e20074 !important;
      border-color: #e20074 !important;
      color: #fff;
      font-weight: bold;
      width: 48px !important; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-day.today {
      background-color: unset;
      border: 1px solid #e20074;
      border: unset; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-day:hover {
      background-color: #e20074;
      border-color: #e20074; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
      color: #767676;
      text-decoration-line: line-through;
      pointer-events: none; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-day.prevMonthDay {
      pointer-events: none;
      user-select: none;
      background-color: unset !important;
      border: unset !important; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-day.nextMonthDay {
      pointer-events: none;
      user-select: none;
      background-color: unset !important;
      border: unset !important; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
      width: 24px;
      height: 24px; }
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg path,
    .fixedConnectionCalendar .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg path {
      fill: #e1e1e1; }

.fixedConnectionCalendarHeading.fixedConnectionCalendarBooking {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  height: 100%; }

.fixedConnectionMapContainer {
  width: 100%;
  height: 100%;
  padding: 16px;
  gap: 24px;
  border-radius: 16px;
  box-shadow: 0px 1px 3px 0px #00000033;
  margin-bottom: 32px; }

.fixedConnectionMapDivider {
  border: 1px solid #f2f2f3;
  width: 100%; }

.fixedConnectionPopupLayout {
  display: flex;
  flex-direction: row;
  padding: 24px 0px;
  margin-top: 16px;
  gap: 24px; }

.fixedConnectionVoucherLink {
  display: inline-flex;
  gap: 4px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  color: unset; }

.fixedConnectionVoucherBox {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: #ffffff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0px 1px 3px 0px #00000033;
  width: 100%;
  height: 100%; }

.buttonGroup.fixedConnectionCalendarContinueButton {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px; }

.fixedConnectionVoucherInput {
  margin-top: 20px; }

.fixedConnectionVoucherHeader {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

.fixedConnectionFiltersConfirmButton {
  margin-left: auto; }

.fixedConnectionClearFiltersButton {
  gap: 4px;
  border-radius: 12px;
  border: 1px;
  opacity: 0px;
  font-size: 16px;
  height: 100%;
  border: 1px solid #212121;
  color: unset; }

.fixedOnlyCheckBoxLabel {
  margin-left: 8px;
  margin-top: 8px; }

.fixedConnectionTooltipCheckbox {
  width: 24px;
  height: 24px;
  display: flex;
  align-self: center;
  margin-left: auto; }

.fixedOnlyCheckboxFieldLargeText {
  margin-left: 16px; }

.fixedConnectionMapButton {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 12px;
  gap: 4px;
  border-radius: 12px;
  border: 1px;
  border: 1px solid #212121;
  color: unset;
  justify-content: center; }

.fixedConnectionFormGroup {
  margin-top: 32px; }

.fixedConnectionFormContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 76px; }

.fixedConnectionFieldWithInfo {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
  gap: 16px;
  margin-top: 16px; }

.fixedConnectionIdentDetailsInfo {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.fixedConnectionHeader {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }
  .fixedConnectionHeader.fixedConnectionHeaderPosition {
    padding-bottom: 45px;
    left: 0;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

.fixedConnectionErrorText {
  position: unset !important;
  align-self: center; }

.fixedConnectionErrorPosition {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
  font-family: 'PeridotPE-Regular';
  font-size: 10px;
  line-height: 12px; }
  .fixedConnectionErrorPosition.fixedConnectionNormalErrorPosition {
    padding: 0px;
    padding-bottom: 8px; }

.speedUpgrade .speedUpgradeInputsList.fixedConnectionAccountsSection {
  gap: 0px; }

.speedUpgrade .speedLanguageFlags.fixedConnectionSubheader {
  align-self: center; }

.speedUpgrade .speedUpgradeHeader.fixedConnectionHeaderBorder {
  padding: unset;
  padding-right: 16px;
  padding-right: 16px;
  border-bottom: 2px solid; }

.fixedConnectionLanguageFlag {
  align-self: center; }

.fixedConnectionFieldMargin {
  margin-top: 8px; }

.fixedConnectionInlineTooltip {
  width: 24px;
  height: 24px;
  display: flex;
  align-self: center;
  margin-top: 16px; }

.primaryButton.fixedConnectionFormContinueButton {
  display: flex;
  align-self: flex-end; }

label[for='newAccount'] {
  margin-bottom: 0 !important; }

.md-radio.spaRadio {
  margin-bottom: 16px; }

.md-radio .fixedConnectionFieldText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.fixedConnectionFieldWithHeader {
  width: 100%; }

.fixedConnectionTool {
  display: flex;
  align-self: center; }

.fixedConnectionSynopsisTooltip {
  margin-left: auto; }

.fixedConnectionSynopsisWithGifts {
  display: inline-flex;
  width: 100%;
  gap: 8px; }

.fixedConnectionButtonGroup {
  display: flex;
  flex-direction: row;
  gap: 8px; }

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

.fixedConnectionCalendarHeading {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

.fixedConnectionMapConfirmButton {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.fixedConnectionMapConfirmButtonText {
  display: flex;
  justify-content: center; }

.fixedConnectionInfo {
  margin-top: 24px; }

.fixedConnectionPlanSelectDetailsCombo {
  display: flex;
  gap: 6px; }

.fixedConnectionPlanSelectDetailsText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.fixedConnectionPlanSelectOfferDetails {
  background-color: #b8e0ef;
  color: #004b87;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  padding: 4px 8px 4px 8px;
  border-radius: 16px; }

.fixedConnectionDownloadFilesSection {
  display: flex;
  padding: 12px 0px;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap; }

.fixedConnectionDownloadFilesSection:not(:last-child) {
  border-bottom: 1px solid grey; }

.fixedConnectionDocumentTitle {
  margin-left: 8px; }

.fixedConnectionDownloadButton {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center; }

.fixedConnectionDownloadIcon {
  padding: 12px;
  text-decoration: none !important; }

.fixedConnectionDownloadText {
  text-decoration: none !important;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.fixedConnectionDownloadFilesBox {
  display: flex;
  flex-direction: column;
  padding: 16px;
  align-self: stretch;
  border-radius: 16px;
  /* Elevation/1 */
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14); }

.fixedCOnnectionMapButton {
  width: 40%; }

.fixedConnectionPlanSelectSubtext {
  padding: 4px 0px 4px 0px;
  border-radius: 4px;
  background-color: #f2f2f3; }

.fixedConnectionFilters {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 8px;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #212121; }

.filtersTitle {
  display: flex;
  gap: 8px;
  padding-top: 2px;
  color: unset; }

.fixedConnectionPlanSelectSubtextText {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px; }

.fixedConnectionPlanSelectDetails {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.fixedConnectionDrawer {
  display: flex;
  align-self: center;
  gap: 4px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #212121; }

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

.fixedConnectionTooltip {
  display: inline-flex;
  align-self: flex-end;
  justify-content: flex-end; }

.fixedConnectionBigTooltipIcon {
  width: 32px;
  height: 32px;
  display: flex;
  align-self: center; }

.fixedOnlyCheckBoxBigLabel {
  margin-left: 16px; }

.fixedConnectionCheckboxTooltipIcon {
  width: 24px;
  height: 24px;
  display: flex;
  align-self: center;
  margin-left: auto; }

.fixedConnectionTooltipIcon {
  width: 24px;
  height: 24px;
  display: flex;
  align-self: center; }

.fixedConnectionUpgradeExpensivePrice {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px; }

.fixedConnectionUpgradeExpensivePriceCents {
  font-size: 16px;
  line-height: 20px; }

.buttonGroup.fixedConnectionOfferButton {
  display: flex;
  justify-content: flex-end; }

.fixedUpgradeActivationCostText {
  display: flex;
  margin-bottom: 24px;
  color: #767676 !important;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.fixedConnectionOfferButton1 {
  display: flex;
  align-items: flex-end;
  margin-top: 24px;
  padding: 12px 16px 12px 16px;
  background-color: #0e8103;
  text-decoration: none !important; }

.fixedConnectionInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding-bottom: 0px; }

.fixedConnetionHeading {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700; }

.speedUpgrade .speedUpgradeInfo.fixedConnectionInfoPadding {
  padding-bottom: 0px; }

.fixedConnectionFixedFormBackButtonContainer {
  margin-top: 28px;
  margin-bottom: 36px; }

.fixedConnectionFormButton {
  max-width: unset; }

@media only screen and (min-width: 480px) and (max-width: 768px) {
  .digitalOnboardingHeaderUser {
    display: none; } }

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

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

.fixedConnectionFiltersIcon {
  transition: transform 0.3s ease; }

.toggleFiltersIcon {
  margin-left: 12px;
  display: inline-block;
  transition: all 0.2s ease; }

.fixedConnectionAddressField {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.toggleFiltersIcon.flipped {
  transform: scaleY(-1); }

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

.digitalOnboardingHeaderGroup {
  display: flex !important;
  gap: 64px; }

@media screen and ((max-width: 480px)) {
  .fixedConnectionOfferButton1 {
    width: 100% !important; }
  .fixedConnectionHeaderBorder .speedUpgradeSubheader {
    justify-content: unset !important; }
  .fixedConnectionHeaderBorder .digitalOnboardingHeaderGroup {
    margin-left: auto; }
  .group label.fixedConnectionDdLabel {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 58px;
    left: 0; }
  .fixedConnectionFormAddressContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0px; }
  .fixedConnectionAccountSelectionCheckbox {
    margin-top: 24px !important; }
  .fixedConnectionFiltersConfirmButton {
    margin-left: unset; }
  .fixedConnectionPopupLayout {
    display: flex;
    flex-direction: column;
    gap: 24px; }
  .fixedOnlyMobileCheckBoxLabel {
    margin-left: 16px; }
  .fixedConnectionBackButtonContainer {
    margin-top: 4px;
    margin-bottom: 36px; }
  .fixedConnectionButton {
    cursor: pointer;
    max-width: 100% !important;
    width: 100% !important;
    background-color: #0e8103;
    margin-top: 48px;
    padding: 16px 24px 16px 24px; }
  .fixedConnectionFormColumnContainer {
    display: flex;
    flex-direction: column;
    gap: unset;
    margin-bottom: unset; }
    .fixedConnectionFormColumnContainer .fixedConnectionFormColumn {
      gap: 16px;
      margin-bottom: 16px;
      max-width: 100%;
      width: 100%; }
    .fixedConnectionFormColumnContainer .fixedFormField {
      margin-bottom: unset; }
    .fixedConnectionFormColumnContainer.field-nomos {
      order: 1; }
    .fixedConnectionFormColumnContainer.field-dimos {
      order: 2; }
    .fixedConnectionFormColumnContainer.field-odos {
      order: 3; }
    .fixedConnectionFormColumnContainer.field-arithmos {
      order: 4; }
    .fixedConnectionFormColumnContainer.field-perioxi {
      order: 5; }
    .fixedConnectionFormColumnContainer.field-tk {
      order: 6; }
    .fixedConnectionFormColumnContainer.field-orofos-label, .fixedConnectionFormColumnContainer.field-orofos {
      order: 7; } }

.successModalBody {
  display: flex;
  align-items: flex-start; }

.successSection {
  margin-left: 8px; }

.optionsModalListItem {
  padding: 16px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-top: 1px solid #e6e6e6;
  color: #212121;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.optionsModalListItem:first-child {
  border-top: none; }

.icon-rightIconList {
  font-size: 24px; }

.popupHavePaidTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin: 0;
  margin-bottom: 8px;
  color: #212121; }

.popupHavePaidDescription {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  margin-bottom: 48px !important; }
  .popupHavePaidDescription.largeBottomMargin {
    margin-bottom: 48px !important; }

.popupHavePaidFooter {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
  margin-top: 32px;
  color: #212121; }

.popupHavePaidSuccessTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin: 0;
  color: #212121; }

.popupHavePaidSuccessDescription {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121; }

.popupHavePaidSuccessTextBold {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.billIssuesManagement-modal-container-small {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 420px; }
  @media only screen and (max-width: 767px) {
    .billIssuesManagement-modal-container-small {
      width: 316px; } }
  .billIssuesManagement-modal-container-small .withPadding-24 {
    padding: 8px 24px 24px !important; }

.billIssuesManagement-modal-container-medium {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 516px; }
  @media only screen and (max-width: 767px) {
    .billIssuesManagement-modal-container-medium {
      width: 316px; } }
  .billIssuesManagement-modal-container-medium .withPadding-24 {
    padding: 8px 24px 24px !important; }

.billIssuesManagement-modal-container-large {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 664px; }
  @media only screen and (max-width: 767px) {
    .billIssuesManagement-modal-container-large {
      width: 316px; } }

.billIssuesManagement-modal-disclaimerParagraph {
  margin: 0;
  opacity: 0.6;
  color: #212121;
  text-align: center;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.billIssuesManagement-modal-disclaimerSmall {
  margin: 0;
  opacity: 0.6;
  color: #212121;
  text-align: center;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-top: -16px;
  margin-bottom: 16px;
  text-align: left; }

.billIssuesManagement-modal-disclaimerMedium {
  margin: 0;
  opacity: 0.6;
  color: #212121;
  text-align: center;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-top: -16px;
  font-size: 16px;
  margin-bottom: 16px;
  text-align: left; }

.billIssuesManagement-modalParagraph {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  line-height: 16px;
  text-align: left; }

.billIssuesManagement-modalTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin: 0; }

.billIssuesManagement-papyrusIcon {
  width: 20px;
  margin-right: 4px; }

.inputWithSearchBox .billIssuesManagement-inputSearchBox {
  max-height: 210px; }

.billIssuesManagement-moreButton {
  margin-top: 32px;
  text-align: right; }
  @media only screen and (max-width: 767px) {
    .billIssuesManagement-moreButton {
      text-align: center; } }

.billIssuesManagement-modal-bottomParagraph {
  margin: 0;
  color: #848484;
  letter-spacing: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin: 32px 0 16px 0;
  display: flex; }
  .billIssuesManagement-modal-bottomParagraph img {
    height: 24px;
    width: auto;
    margin-right: 8px; }

.billIssuesManagement-modal-resendSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.billIssuesManagement-modal-success-container {
  display: flex;
  margin-top: 8px; }

.billIssuesManagement-modal-success-image {
  width: 32px;
  height: 32px;
  margin-right: 8px; }

.billIssuesManagement-modal-success-paragraph {
  margin: 0;
  letter-spacing: 0px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.connectionsBox {
  background-color: #ffffff;
  display: flex;
  flex-flow: column;
  margin-bottom: 24px; }
  .connectionsBox:first-of-type .moveUpIcon {
    pointer-events: none;
    opacity: 0.6; }
  .connectionsBox:last-of-type .moveDownIcon {
    pointer-events: none;
    opacity: 0.6; }
  .connectionsBox .connectionsBoxHeader {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    height: 32px;
    position: relative;
    z-index: 2;
    background-color: #e6e6e6;
    border-radius: 15px; }
    .connectionsBox .connectionsBoxHeader .connectionsBoxHeaderTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700;
      display: flex;
      align-items: center; }
      .connectionsBox .connectionsBoxHeader .connectionsBoxHeaderTitle i {
        margin-left: 16px;
        font-size: 16px;
        cursor: pointer; }
    .connectionsBox .connectionsBoxHeader .connectionsBoxActions {
      margin-left: auto;
      display: flex;
      align-items: center; }
      .connectionsBox .connectionsBoxHeader .connectionsBoxActions i {
        margin-left: 8px;
        cursor: pointer; }
        .connectionsBox .connectionsBoxHeader .connectionsBoxActions i.hideIcon {
          font-size: 20px; }
          .connectionsBox .connectionsBoxHeader .connectionsBoxActions i.hideIcon.icon-visible {
            font-size: 16px; }
        .connectionsBox .connectionsBoxHeader .connectionsBoxActions i.moveUpIcon, .connectionsBox .connectionsBoxHeader .connectionsBoxActions i.moveDownIcon {
          font-size: 24px; }
        .connectionsBox .connectionsBoxHeader .connectionsBoxActions i.inactive {
          pointer-events: none;
          opacity: 0.6; }
  .connectionsBox .connectionsBoxContent {
    display: flex;
    flex-flow: column;
    padding: 8px 8px 16px;
    background-color: #ffffff; }
    .connectionsBox .connectionsBoxContent.withStores {
      padding-top: 86px;
      min-height: 350px; }
      .connectionsBox .connectionsBoxContent.withStores .businessStores {
        left: 16px;
        position: absolute;
        top: 32px;
        width: calc(100% / 3 - 20px); }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .connectionsBox .connectionsBoxContent.withStores .businessStores {
            width: calc(100% / 2 - 24px); } }
        @media only screen and (max-width: 767px) {
          .connectionsBox .connectionsBoxContent.withStores .businessStores {
            width: calc(100% - 32px); } }
        .connectionsBox .connectionsBoxContent.withStores .businessStores.inactive {
          pointer-events: none;
          opacity: 0.5; }
    .connectionsBox .connectionsBoxContent .connectionsBoxRow {
      display: flex;
      align-items: flex-start; }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .connectionsBox .connectionsBoxContent .connectionsBoxRow {
          flex-wrap: wrap; } }
      @media only screen and (max-width: 767px) {
        .connectionsBox .connectionsBoxContent .connectionsBoxRow {
          flex-wrap: wrap; } }
      .connectionsBox .connectionsBoxContent .connectionsBoxRow.inactive {
        pointer-events: none;
        opacity: 0.5; }
      .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
        background-color: #ffffff;
        margin: 16px;
        display: flex;
        flex-flow: column;
        width: calc(100% / 3 - 16px);
        overflow: visible;
        border: 1px solid #e6e6e6;
        border-radius: 16px; }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
            width: calc(100% / 2 - 16px); } }
        @media only screen and (max-width: 767px) {
          .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
            width: calc(100% - 16px); } }
        .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.single {
          width: 100%; }
        .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .connectionsBoxColTitle {
          color: #212121;
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700;
          position: relative;
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          padding: 12px 16px;
          border-radius: 15px 0 15px 0;
          align-self: flex-start;
          background-color: #e6e6e6; }
          .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .connectionsBoxColTitle img {
            height: 24px;
            padding-right: 6px; }
        .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableListContainerLarge {
          max-height: 652px;
          overflow-y: auto; }
        .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList {
          display: flex;
          flex-flow: column;
          padding: 0 16px 16px; }
          .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li {
            display: flex;
            align-items: center;
            background-color: #f2f2f3;
            margin-top: 12px;
            padding: 8px;
            min-height: 52px;
            border-radius: 16px; }
            .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft {
              display: flex;
              flex-flow: column;
              align-self: flex-start;
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              position: relative; }
              .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                font-family: 'BTCosmo-Bold', sans-serif;
                font-size: 16px;
                line-height: 20px;
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
                max-width: 200px;
                position: relative; }
                @media only screen and (min-width: 1025px) and (max-width: 1230px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 140px; } }
                @media only screen and (min-width: 768px) and (max-width: 1024px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 160px; } }
                @media only screen and (min-width: 480px) and (max-width: 768px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 240px; } }
                @media only screen and (max-width: 480px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 170px; } }
                .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span.wrappedText {
                  white-space: normal; }
                .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span .coneImageLabel {
                  margin-left: 0;
                  width: 20px;
                  height: 20px;
                  object-fit: contain;
                  object-position: center;
                  display: inline-block;
                  margin-bottom: -4px; }
              .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft.large span {
                max-width: 300px; }
                @media only screen and (min-width: 1025px) and (max-width: 1230px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft.large span {
                    max-width: 280px; } }
                @media only screen and (min-width: 768px) and (max-width: 1024px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft.large span {
                    max-width: 100%; } }
                @media only screen and (min-width: 480px) and (max-width: 768px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft.large span {
                    max-width: 260px; } }
                @media only screen and (max-width: 480px) {
                  .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft.large span {
                    max-width: 170px; } }
            .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableRight {
              display: flex;
              align-items: center;
              margin-left: auto; }
              .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableRight .sortIcon {
                color: #9d9d9c;
                margin-left: 8px;
                cursor: move; }
            .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeftAssets {
              display: flex;
              align-items: center; }
              .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeftAssets .sortIcon {
                color: #9d9d9c;
                margin-right: 8px;
                cursor: move; }
        .connectionsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol img {
          height: 24px;
          padding-right: 6px; }
    .connectionsBox .connectionsBoxContent .buttonOuter {
      margin-right: 8px;
      margin-top: 8px; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .manageStores .mainComponent {
    margin-top: 16px; } }

@media only screen and (max-width: 767px) {
  .manageStores .mainComponent {
    margin-top: 12px; } }

.checkBoxIcon {
  width: 16px; }

.selectAllSection {
  display: flex;
  flex-flow: column;
  padding: 0 16px;
  width: 100%;
  background-color: white;
  top: 0;
  z-index: 1; }

.no-csspositionsticky .listAndCategoriesContainer {
  position: relative;
  padding-top: 132px; }

.no-csspositionsticky .selectAllSection {
  display: flex;
  flex-flow: column;
  padding: 0 16px;
  width: 100%;
  background-color: white;
  top: 0;
  z-index: 1;
  position: absolute; }

.no-csspositionsticky .withPersistentScrollBar {
  overflow-y: scroll; }

.listAndCategoriesContainer {
  z-index: 0; }

.assetsBox {
  background-color: #f2f2f3;
  display: flex;
  flex-flow: column;
  margin-bottom: 24px; }
  .assetsBox .connectionsBoxHeader {
    display: flex;
    align-items: center;
    padding: 8px;
    height: 32px;
    position: relative;
    z-index: 2;
    background-color: #e6e6e6;
    border-radius: 15px; }
    .assetsBox .connectionsBoxHeader .connectionsBoxHeaderTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700; }
    .assetsBox .connectionsBoxHeader .connectionsBoxActions {
      margin-left: auto;
      display: flex;
      align-items: center; }
      .assetsBox .connectionsBoxHeader .connectionsBoxActions i {
        margin-left: 8px;
        cursor: pointer; }
        .assetsBox .connectionsBoxHeader .connectionsBoxActions i.hideIcon {
          font-size: 20px; }
          .assetsBox .connectionsBoxHeader .connectionsBoxActions i.hideIcon.icon-visible {
            font-size: 16px; }
        .assetsBox .connectionsBoxHeader .connectionsBoxActions i.moveUpIcon, .assetsBox .connectionsBoxHeader .connectionsBoxActions i.moveDownIcon {
          font-size: 24px; }
        .assetsBox .connectionsBoxHeader .connectionsBoxActions i.inactive {
          pointer-events: none;
          opacity: 0.6; }
  .assetsBox .connectionsBoxContent {
    display: flex;
    flex-flow: column;
    padding: 8px 8px 16px;
    background-color: #ffffff; }
    .assetsBox .connectionsBoxContent.withStores {
      padding-top: 86px; }
      .assetsBox .connectionsBoxContent.withStores .businessStores {
        left: 16px;
        width: calc(100% / 3 - 20px); }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .assetsBox .connectionsBoxContent.withStores .businessStores {
            width: calc(100% / 2 - 24px); } }
        @media only screen and (max-width: 767px) {
          .assetsBox .connectionsBoxContent.withStores .businessStores {
            width: calc(100% - 32px); } }
    .assetsBox .connectionsBoxContent.inactive {
      pointer-events: none;
      opacity: 0.5; }
    .assetsBox .connectionsBoxContent .connectionsBoxRow {
      display: flex;
      align-items: flex-start; }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .assetsBox .connectionsBoxContent .connectionsBoxRow {
          flex-wrap: wrap; } }
      @media only screen and (max-width: 767px) {
        .assetsBox .connectionsBoxContent .connectionsBoxRow {
          flex-wrap: wrap; } }
      .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
        background-color: #ffffff;
        margin: 8px;
        display: flex;
        flex-flow: column;
        width: calc(100% / 3 - 16px);
        border: 1px solid #e6e6e6;
        border-radius: 16px; }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
            width: calc(100% / 2 - 16px); } }
        @media only screen and (max-width: 767px) {
          .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
            width: calc(100% - 16px); } }
        .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.single {
          width: 100%; }
        .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.doubleCheckBoxColumn {
          width: calc(40% - 16px); }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.doubleCheckBoxColumn {
              width: calc(100% - 16px); } }
          @media only screen and (max-width: 767px) {
            .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.doubleCheckBoxColumn {
              width: calc(100% - 16px); } }
        .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.singleCheckBoxColumn {
          width: calc(30% - 16px); }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.singleCheckBoxColumn {
              width: calc(60% - 16px); } }
          @media only screen and (max-width: 767px) {
            .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol.singleCheckBoxColumn {
              width: calc(100% - 16px); } }
        .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .connectionsBoxColTitle {
          color: #212121;
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700;
          position: relative;
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          padding: 12px 16px; }
          .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .connectionsBoxColTitle img {
            height: 24px;
            padding-right: 6px; }
        .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableListContainerLarge {
          max-height: 652px;
          overflow-y: auto;
          overflow-x: hidden; }
          .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableListContainerLarge .selectAllSection {
            display: flex;
            flex-flow: column;
            padding: 0 16px;
            width: 100%;
            background-color: white;
            top: 0;
            z-index: 1;
            position: sticky; }
            .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableListContainerLarge .selectAllSection.scrollableSection {
              padding-bottom: 12px;
              margin-bottom: -12px; }
        .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList {
          display: flex;
          flex-flow: column;
          padding: 0 16px 16px; }
          .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li {
            display: flex;
            align-items: center;
            background-color: #f2f2f3;
            margin-top: 12px;
            padding: 8px;
            min-height: 52px;
            border-radius: 16px; }
            .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft {
              display: flex;
              flex-flow: column;
              align-self: flex-start;
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              position: relative; }
              .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                font-family: 'BTCosmo-Bold', sans-serif;
                font-size: 16px;
                line-height: 20px;
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
                max-width: 180px; }
                @media only screen and (min-width: 1025px) and (max-width: 1230px) {
                  .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 140px; } }
                @media only screen and (min-width: 768px) and (max-width: 1024px) {
                  .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 140px; } }
                @media only screen and (max-width: 767px) {
                  .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 160px; } }
                @media only screen and (min-width: 480px) and (max-width: 768px) {
                  .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 160px; } }
                @media only screen and (max-width: 480px) {
                  .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span {
                    max-width: 110px; } }
                .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span.fullWidthText {
                  max-width: 180px; }
                  @media only screen and (max-width: 480px) {
                    .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span.fullWidthText {
                      max-width: 110px; } }
                .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft span.wrappedText {
                  white-space: normal; }
          .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList .genericTooltip {
            display: none; }
        .assetsBox .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol img {
          height: 24px;
          padding-right: 6px; }
    .assetsBox .connectionsBoxContent .buttonOuter {
      margin-right: 8px;
      margin-top: 8px; }
  .assetsBox .selectAllSectionElement {
    padding: 0 8px;
    display: flex; }
  .assetsBox .leftElementPart {
    display: flex;
    flex: 66%; }
    @media only screen and (max-width: 480px) {
      .assetsBox .leftElementPart {
        flex: 66%; } }
  .assetsBox .doubleCheckBoxPart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: calc(34% / 2); }
  .assetsBox .singleCheckBoxPart {
    flex: 34%; }
  .assetsBox .listElementAssets {
    display: flex;
    align-items: center;
    margin-top: 12px;
    padding: 0 8px; }
  .assetsBox .sortIconContainer {
    display: flex;
    align-items: center; }
    .assetsBox .sortIconContainer .sortIcon {
      color: #9d9d9c;
      margin-right: 20px;
      cursor: move; }
  .assetsBox .rightElementSide {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex: 34%; }
    @media only screen and (max-width: 480px) {
      .assetsBox .rightElementSide {
        flex: 34%; } }
  .assetsBox .assetsSpan {
    color: #212121;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    padding: 16px 20px 0; }
  .assetsBox .headersTypographySpan {
    color: #212121;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-align: center;
    padding: 0.125rem; }

.lightBulbText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.connectionsParagraphLabel {
  margin: 0;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  background-color: #212121;
  color: white;
  padding: 10px;
  border-radius: 4px; }

.minimizer {
  display: flex;
  cursor: pointer;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  padding: 8px;
  position: relative;
  z-index: 2;
  padding-right: 24px; }
  .minimizer.active {
    display: block; }
  .minimizer img:not(.hometooltip):not(.simpleTooltip) {
    position: absolute;
    right: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none; }
    .minimizer img:not(.hometooltip):not(.simpleTooltip).openedSidebar {
      display: block; }

.iconTextContainer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 1rem 0; }
  .iconTextContainer img {
    height: 24px;
    width: 24px; }

.assets-send-icon {
  color: #212121 !important; }

.editIconSpan {
  cursor: pointer;
  margin-left: 0.5rem;
  display: flex; }
  .editIconSpan img {
    height: 18px; }

.centerElementSide {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 100%; }

.currentValueSpan {
  margin-left: 8px;
  opacity: 0.5;
  display: none;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.maxConnectionsModalTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.maxConnectionsModalParagraph {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.maxConnectionsModalButton {
  margin-bottom: 0.5rem; }

.boldFontFamily {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.modalTextWhatsNewAssets {
  font-size: 1.125rem;
  text-align: center;
  background-color: white !important; }

.tabContainer {
  width: 100%;
  display: flex;
  flex-direction: column; }

.topSection {
  display: flex; }

.promoBoxPosition {
  margin-top: 10px;
  margin: 0 -16px; }

.boxFilledWithGradient {
  border-radius: 16px;
  background: transparent;
  display: inline-block;
  padding: 1px;
  text-decoration: none; }

.boxFilledWithGradientContent {
  border-radius: 16px;
  background: #ffffff;
  display: block; }

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

.imageContainer {
  margin-right: 8px; }

.promoContainer {
  display: flex;
  padding: 8px; }

.promoParagraph {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  display: block;
  width: 100%;
  margin-bottom: 4px; }
  @media only screen and (max-width: 767px) {
    .promoParagraph {
      font-size: 16px;
      line-height: 18px; } }

.promoSubParagraph {
  margin: 0;
  margin-bottom: 4px;
  color: rgba(33, 33, 33, 0.6);
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.plusIconContainer {
  margin-right: 4px;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700; }
  .plusIconContainer.withAlert {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
    .plusIconContainer.withAlert span {
      font-family: 'PeridotPE-ExtraBlack', sans-serif;
      font-size: 10px;
      line-height: 12px;
      font-weight: 800;
      width: 100%;
      display: block;
      text-align: center;
      margin-bottom: 4px; }
  .plusIconContainer.withSpeed {
    font-size: 26px; }

.linearGradientLineModal {
  height: 1px;
  width: 100%;
  display: block;
  background: #00a5e3;
  margin-top: 32px;
  margin-bottom: 24px; }

.linearGradientLineModalAbsolute {
  height: 1px;
  width: 100%;
  display: block;
  background: #00a5e3;
  position: absolute; }

.questionParagraphItalicsModal {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 24px; }

.questionParagraphItalicsModalSpan {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.modalImageContainer {
  margin-bottom: -16px;
  background-color: #ffffff; }
  .modalImageContainer img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block; }

.flyingTextContainer {
  align-items: center;
  display: flex;
  justify-content: center;
  transform: translateY(-50%); }

.boxFilledWithGradientFlyingText {
  border-radius: 24px;
  background: transparent;
  display: inline-block;
  padding: 1px;
  text-decoration: none;
  z-index: 1; }

.boxFilledWithGradientContentFlyingText {
  border-radius: 22px;
  background: #ffffff;
  display: block; }

.donutDescriptionText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: block;
  letter-spacing: 0px;
  flex: 1 1 calc(100% - 130px); }
  @media only screen and (max-width: 767px) {
    .donutDescriptionText {
      flex: 1 1 100%; } }

.boxContainerFlyingText {
  display: flex;
  padding: 4px 8px;
  border-radius: 16px;
  border: 1px solid #00a5e3; }

.donutWithPlusImg {
  min-width: 130px; }

.donutWithPlusDataSymbol {
  display: inline-block;
  font-family: 'PeridotPE-ExtraBlack', sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 800;
  background-color: #e6e6e6;
  padding: 4px;
  border-radius: 4px;
  margin-top: 10px; }

.donutWithPlusDescription {
  position: absolute;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  bottom: -8px; }

.donutWithPlusNumber {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 4px; }

.donutWithPlusContent {
  position: absolute;
  right: 10px;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px; }

.donutWithPlusImgContainer {
  position: relative; }

.donutAndTextContainer {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  justify-content: flex-start;
  align-items: center; }

.donutWithPlusTextUnlimited {
  font-family: 'PeridotPE-ExtraBlack', sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 800; }

.d4uImage {
  width: 96px;
  height: 96px;
  object-fit: contain;
  object-position: center; }

.d4uContentLeft {
  justify-content: center;
  display: flex;
  flex-direction: column; }

.d4uTitleText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0px; }

.d4uCodesText {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 44px;
  overflow: hidden;
  margin: 8px 0; }

.d4uCodeSingleText {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0px;
  margin-top: 8px;
  margin-bottom: 2px; }

.d4uCodeText2ndLine {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0px; }

.d4uCodeParagraph {
  margin: 0;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0px;
  margin-bottom: 2px;
  margin-top: 24px; }

.d4uExpirationParagraph {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  font-weight: normal;
  letter-spacing: 0px;
  color: #212121;
  opacity: 60%; }

.d4uPublicationParagraph {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  font-weight: normal;
  letter-spacing: 0px;
  color: #212121;
  opacity: 60%; }

.d4uTopParagraph {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0px; }

.d4uBottomParagraph {
  font-weight: normal;
  letter-spacing: 0px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 24px; }

.modalD4uContentContainer {
  text-align: center; }

.modalD4uSectionOverflow {
  height: 260px;
  overflow-y: auto; }

.carousel {
  width: 500px;
  height: 500px;
  margin: 0px auto; }

.carouselSection {
  background-color: white;
  border-radius: 16px;
  border: 1px solid #e6e6e6; }
  .carouselSection .slick-slide {
    margin: 8px 4px;
    outline: none; }
    .carouselSection .slick-slide .detailsIcon img {
      width: inherit; }
    .carouselSection .slick-slide img {
      border: none; }
    .carouselSection .slick-slide:focus,
    .carouselSection .slick-slide a {
      outline: none; }
    .carouselSection .slick-slide .detailsBox {
      min-height: 208px; }
      @media only screen and (max-width: 480px) {
        .carouselSection .slick-slide .detailsBox {
          min-height: 256px; } }
  .carouselSection .slickBeforeInitialization .hiddenUntilCarouselLoads {
    display: none; }
  .carouselSection .loadingBoxCarousel {
    height: 208px;
    justify-content: center;
    margin-bottom: 8px; }
  .carouselSection .slick-initialized .hiddenUntilCarouselLoads {
    display: block; }
  .carouselSection .slick-initialized .hiddenAfterCarouselLoads {
    display: none !important; }
  .carouselSection .slick-next {
    right: 0;
    opacity: 1;
    line-height: 0;
    width: 30px;
    height: auto;
    z-index: 4;
    padding: 6px;
    padding-right: 4px;
    border-radius: 8px 0px 0px 8px;
    background-color: #f2f2f3; }
    .carouselSection .slick-next:hover, .carouselSection .slick-next:focus {
      background-color: rgba(204, 206, 208, 0.9); }
    .carouselSection .slick-next:before {
      font-family: 'icomoon';
      content: '\e901';
      color: #e20074;
      opacity: 1;
      font-size: 20px;
      font-weight: 500; }
  .carouselSection .slick-prev {
    left: 0;
    opacity: 1;
    line-height: 0;
    width: 30px;
    height: auto;
    z-index: 4;
    padding: 6px;
    padding-left: 4px;
    border-radius: 0px 8px 8px 0px;
    background-color: #f2f2f3;
    top: 110px; }
    .carouselSection .slick-prev:hover, .carouselSection .slick-prev:focus {
      background-color: rgba(204, 206, 208, 0.9); }
    .carouselSection .slick-prev:before {
      font-family: 'icomoon';
      content: '\e900';
      color: #e20074;
      opacity: 1;
      font-size: 20px;
      font-weight: 500; }

.menuCarouselTabs {
  padding: 16px;
  padding-bottom: 6px;
  margin-bottom: -6px;
  letter-spacing: 0px;
  display: none;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700; }
  .menuCarouselTabs.tabsVisible {
    display: flex; }
  .menuCarouselTabs li.active:after {
    display: none; }
  .menuCarouselTabs li.active a {
    color: #0e8103; }
  .menuCarouselTabs li a {
    color: #212121; }

.liItemAll {
  margin-right: 24px; }

.liItemPersonal {
  margin-right: 24px; }

.carouselStep {
  width: 100%;
  text-align: right;
  padding-bottom: 8px;
  padding-right: 16px;
  margin-top: -16px; }

.carouselBoxOneWrapper {
  display: flex;
  background: #00a5e3;
  border-radius: 16px; }
  .carouselBoxOneWrapper .carouselBox {
    margin: 1px; }

.carouselBoxWithCounterWrapper .carouselBox {
  position: relative;
  padding-bottom: 36px; }
  .carouselBoxWithCounterWrapper .carouselBox .countDown {
    position: absolute;
    bottom: 0;
    width: 100%; }
    .carouselBoxWithCounterWrapper .carouselBox .countDown.carouselCountDown {
      height: 36px;
      padding: 0; }

.carouselBoxWithMetaCounterWrapper .carouselBox {
  position: relative;
  border-bottom: none;
  border-radius: 16px 16px 0 0; }

.carouselBoxWithMetaCounterWrapper .countDownMeta {
  position: relative;
  bottom: 0;
  width: 100%;
  border: 1px solid #ffffff;
  border-top: none; }
  .carouselBoxWithMetaCounterWrapper .countDownMeta.carouselCountDownMeta {
    height: 40px;
    background-color: #b8e0ef;
    color: #004b87;
    justify-content: start;
    padding: 8px 16px; }

.carouselBox {
  position: relative;
  padding: 0;
  margin-top: 0; }
  .carouselBox.detailsBox {
    min-height: 100%;
    flex-flow: row;
    margin-top: 1px; }
  .carouselBox.bigBox {
    min-height: 246px !important; }
  .carouselBox.centered {
    display: flex;
    justify-content: center; }

.carouselBg {
  z-index: -10;
  position: absolute;
  object-fit: cover;
  object-position: 100% 50%;
  min-height: 100%;
  max-width: 100%; }
  .carouselBg.carouselBgDesktop {
    width: 100%; }
    @media only screen and (max-width: 480px) {
      .carouselBg.carouselBgDesktop {
        display: none; } }
    .carouselBg.carouselBgDesktop.cb1Desktop {
      min-height: 90px; }
  .carouselBg.carouselBgMobile {
    display: none;
    width: 100%; }
    @media only screen and (max-width: 480px) {
      .carouselBg.carouselBgMobile {
        display: block; } }
    .carouselBg.carouselBgMobile.cb1Mobile {
      min-height: 95px;
      top: 20%; }
  .carouselBg.oldFixedLineCard {
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%; }

.carouselContent {
  padding: 16px;
  width: calc(100% - 138px);
  display: flex; }
  .carouselContent.detailsContent {
    flex-flow: column;
    justify-content: space-between;
    min-height: 100%; }
  @media only screen and (max-width: 480px) {
    .carouselContent {
      width: calc(100% - 96px); } }

.carouselInfo.packageInfo {
  margin-top: 32px;
  margin-bottom: 4px; }
  .carouselInfo.packageInfoWithoutTimer {
    margin-top: 42px;
    margin-bottom: 22px; }

.carouselInfoTitle {
  color: #ffffff; }
  .carouselInfoTitle.packageInfoTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .carouselInfoTitle.lightBg {
    color: #212121; }

.carouselInfoContent {
  color: #ffffff; }
  .carouselInfoContent.lightBg {
    color: #212121; }
  .carouselInfoContent.packageInfoContent {
    margin-top: 4px;
    margin-bottom: 4px; }

.selectBenefitFlow-carouselInfoTitle {
  color: #ffffff; }
  .selectBenefitFlow-carouselInfoTitle.packageInfoTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .selectBenefitFlow-carouselInfoTitle.lightBg {
    color: #212121; }

.selectBenefitFlow-carouselInfoContent {
  color: #ffffff; }
  .selectBenefitFlow-carouselInfoContent.lightBg {
    color: #212121; }
  .selectBenefitFlow-carouselInfoContent.packageInfoContent {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-top: 4px;
    margin-bottom: 6px; }

.selectBenefitFlow-carouselContent {
  padding: 16px;
  padding-left: 24px;
  width: calc(100% - 138px);
  display: flex; }
  .selectBenefitFlow-carouselContent.detailsContent {
    flex-flow: column;
    justify-content: center;
    min-height: 100%;
    align-self: flex-end; }
  @media only screen and (max-width: 480px) {
    .selectBenefitFlow-carouselContent {
      width: calc(100% - 96px); } }

.carouselButtonOuter {
  position: relative; }

.servicePrice {
  display: flex;
  align-items: center;
  margin-top: 8px; }
  .servicePrice .servicePriceLabel {
    margin-right: 12px; }

.chatBox {
  padding: 24px;
  background-color: #f2f2f3;
  height: 336px;
  overflow-y: auto;
  display: flex;
  flex-flow: column; }
  @media only screen and (max-width: 767px) {
    .chatBox {
      padding: 12px; } }
  .chatBox .withAvatar {
    padding-left: 40px;
    position: relative; }
    .chatBox .withAvatar img {
      position: absolute;
      top: calc(50% - 6px);
      left: 0;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%); }
  .chatBox .chatMessageLeft {
    background-color: #ffffff;
    line-height: 18px;
    font-size: 16px;
    padding: 8px 12px;
    min-height: 32px;
    display: inline-flex;
    margin-bottom: 12px;
    max-width: 400px;
    -webkit-border-radius: 8px 8px 8px 0;
    -moz-border-radius: 8px 8px 8px 0;
    border-radius: 8px 8px 8px 0; }
    @media only screen and (max-width: 767px) {
      .chatBox .chatMessageLeft {
        max-width: 300px; } }
    .chatBox .chatMessageLeft a {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      min-width: 360px;
      display: flex;
      align-items: center;
      color: #212121; }
      @media only screen and (max-width: 767px) {
        .chatBox .chatMessageLeft a {
          min-width: 276px; } }
      .chatBox .chatMessageLeft a i {
        margin-left: auto;
        padding-left: 20px; }
  .chatBox .chatMessageRight {
    background-color: #212121;
    color: #ffffff;
    line-height: 18px;
    font-size: 16px;
    padding: 8px 12px;
    min-height: 32px;
    display: inline-flex;
    margin-bottom: 12px;
    float: right;
    text-align: right;
    max-width: 400px;
    -webkit-border-radius: 8px 8px 0 8px;
    -moz-border-radius: 8px 8px 0 8px;
    border-radius: 8px 8px 0 8px; }
    @media only screen and (max-width: 767px) {
      .chatBox .chatMessageRight {
        max-width: 300px; } }

.chatBoxInput {
  height: 56px;
  background-color: #ffffff;
  display: flex;
  align-items: flex-start;
  position: relative;
  border-top: 1px solid #9d9d9c;
  padding: 8px 12px 12px 12px;
  border-radius: 0 0 4px 4px; }
  .chatBoxInput input {
    font-size: 16px;
    line-height: 18px;
    color: #212121;
    width: 100%;
    padding-right: 40px !important; }
  .chatBoxInput ::-webkit-input-placeholder {
    font-size: 16px;
    line-height: 18px;
    color: #9d9d9c; }
  .chatBoxInput :-moz-placeholder {
    font-size: 16px;
    line-height: 18px;
    color: #9d9d9c; }
  .chatBoxInput ::-moz-placeholder {
    font-size: 16px;
    line-height: 18px;
    color: #9d9d9c; }
  .chatBoxInput :-ms-input-placeholder {
    font-size: 16px;
    line-height: 18px;
    color: #9d9d9c; }
  .chatBoxInput i {
    position: absolute;
    right: 12px;
    top: 50%;
    font-size: 22px;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }
    .chatBoxInput i.inactive {
      pointer-events: none;
      opacity: 0.5; }

.toggleChat {
  padding: 10px 8px;
  padding-right: 30px;
  min-width: 140px;
  height: 38px;
  text-align: center;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #ffffff;
  -webkit-border-radius: 16px 16px 0 0;
  -moz-border-radius: 16px 16px 0 0;
  border-radius: 16px 16px 0 0;
  position: fixed;
  bottom: 0;
  right: 30px;
  z-index: 4;
  display: none; }
  @media only screen and (max-width: 767px) {
    .toggleChat {
      right: 12px; } }
  .toggleChat i {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); }

.orders .ddFilterWrapper {
  margin-bottom: 16px; }

.orderBox {
  display: flex;
  flex-flow: column;
  position: relative;
  margin-bottom: 16px;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e6e6e6; }
  .orderBox-history {
    margin-bottom: 8px; }
    .orderBox-history .linearGradientSmall {
      display: none; }
  .orderBox.emptyOrders {
    padding: 24px;
    text-align: center; }
    @media only screen and (max-width: 1024px) {
      .orderBox.emptyOrders.firstComponent {
        margin-top: 16px; } }
    .orderBox.emptyOrders .emptyStateImage {
      width: 100%;
      display: block;
      max-width: 120px;
      margin: 0 auto 16px; }
    .orderBox.emptyOrders .emptyStateTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      margin-bottom: 8px; }
    .orderBox.emptyOrders .emptyStateSubTitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      max-width: 624px;
      margin: auto;
      margin-bottom: 8px; }
      .orderBox.emptyOrders .emptyStateSubTitle .strong {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
  .orderBox .orderBoxHeader {
    background-color: #f2f2f3;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    height: 60px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 16px 16px 0 0; }
    @media only screen and (max-width: 1024px) {
      .orderBox .orderBoxHeader {
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar; } }
    .orderBox .orderBoxHeader .orderBoxHeaderCol {
      padding-right: 48px;
      flex: 0 0 auto;
      color: #212121;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
      .orderBox .orderBoxHeader .orderBoxHeaderCol.withMinWidth {
        min-width: 188px;
        padding-right: 26px; }
      .orderBox .orderBoxHeader .orderBoxHeaderCol.conditionCol {
        padding-right: 0;
        text-align: right; }
        @media only screen and (max-width: 1024px) {
          .orderBox .orderBoxHeader .orderBoxHeaderCol.conditionCol {
            padding-right: 12px; } }
      .orderBox .orderBoxHeader .orderBoxHeaderCol.incomplete {
        color: #0ea600; }
      .orderBox .orderBoxHeader .orderBoxHeaderCol.pending {
        color: #eabf68; }
      .orderBox .orderBoxHeader .orderBoxHeaderCol.completed {
        color: #9d9d9c; }
      .orderBox .orderBoxHeader .orderBoxHeaderCol.cancelled {
        color: #df6938; }
      .orderBox .orderBoxHeader .orderBoxHeaderCol span {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        width: 100%;
        display: block;
        color: #212121; }
        .orderBox .orderBoxHeader .orderBoxHeaderCol span.textWithTooltipContent {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          text-overflow: ellipsis;
          max-width: 145px;
          overflow-x: hidden;
          white-space: nowrap;
          padding-right: 2px; }
      .orderBox .orderBoxHeader .orderBoxHeaderCol .textWithTooltip {
        display: flex; }
        .orderBox .orderBoxHeader .orderBoxHeaderCol .textWithTooltip .customTooltipRight {
          margin-left: auto; }
  .orderBox .orderBoxContent .paymentSteps .paymentStepsContainer {
    max-width: 800px;
    margin: auto; }
  .orderBox .orderBoxContent .orderBoxContentDetails {
    display: none; }
  .orderBox .orderBoxContent .orderDetails {
    padding: 16px 24px 24px 24px; }
    @media only screen and (max-width: 1024px) {
      .orderBox .orderBoxContent .orderDetails {
        padding: 16px;
        padding-top: 8px; } }
    .orderBox .orderBoxContent .orderDetails .paymentContent .billActions.flexRight {
      margin-left: auto;
      align-items: center; }
    .orderBox .orderBoxContent .orderDetails .paymentContent .billActions .billAction {
      color: #212121; }
    .orderBox .orderBoxContent .orderDetails .orderProducts {
      display: flex;
      flex-flow: column;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(61, 82, 101, 0.5);
      margin-bottom: 8px; }
      .orderBox .orderBoxContent .orderDetails .orderProducts.loading {
        padding-bottom: 0;
        margin-bottom: 0;
        border: none; }
        .orderBox .orderBoxContent .orderDetails .orderProducts.loading .orderProductHeading {
          padding: 0; }
      .orderBox .orderBoxContent .orderDetails .orderProducts.withoutBorder {
        margin-bottom: 48px;
        padding-bottom: 0;
        border: none; }
      .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductHeading {
        padding: 0 10px; }
        @media only screen and (max-width: 767px) {
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductHeading {
            padding: 0; } }
      .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        margin-top: 16px;
        padding: 24px;
        background-color: #e6e6e6;
        border-radius: 16px; }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct {
            padding: 16px 12px; } }
        @media only screen and (max-width: 767px) {
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct {
            padding: 16px 24px; } }
        .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct:last-child {
          margin-bottom: 0; }
        .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderProductsDetails {
          padding-left: 8px; }
        .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo {
          display: flex; }
          @media only screen and (max-width: 767px) {
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo {
              flex-direction: column; } }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft {
            width: 270px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #212121;
            padding-right: 24px; }
            @media only screen and (min-width: 768px) and (max-width: 1024px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft {
                width: 200px;
                padding-right: 16px; } }
            @media only screen and (max-width: 767px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft {
                width: 100%;
                padding-right: 0;
                border: none; } }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft.loading {
              display: flex;
              flex-direction: column;
              padding-top: 8px;
              padding-bottom: 30px; }
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft.loading .loadingLine {
                width: 100%;
                height: 12px;
                background-color: #f2f2f3;
                margin: 4px 0; }
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft.loading .loadingLine.large {
                  height: 20px; }
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoLeft.loading .loadingLine.small {
                  width: 70%;
                  max-width: 100%; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoContent {
            display: block; }
            @media only screen and (max-width: 767px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoContent {
                display: none;
                padding-bottom: 44px; } }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainLabel {
            display: flex;
            align-items: center;
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            position: relative;
            pointer-events: none; }
            @media only screen and (max-width: 767px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainLabel {
                cursor: pointer;
                pointer-events: all; } }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainLabel.active i {
              -webkit-transform: scaleY(-1);
              -moz-transform: scaleY(-1);
              transform: scaleY(-1); }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainLabel img {
              width: 28px;
              height: 28px;
              object-fit: contain;
              object-position: center;
              margin-right: 8px;
              padding: 2px; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainLabel i {
              width: 24px;
              height: 24px;
              font-size: 12px;
              line-height: 12px;
              display: none;
              align-items: center;
              justify-content: center;
              margin-left: 8px;
              -webkit-transform: scaleY(1);
              -moz-transform: scaleY(1);
              transform: scaleY(1); }
              @media only screen and (max-width: 767px) {
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainLabel i {
                  display: flex; } }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderGroup {
            display: flex;
            flex-direction: column;
            margin-bottom: 17px;
            padding-left: 8px;
            border-left: 1px solid #212121; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderGroup li {
              line-height: 20px;
              display: flex; }
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderGroup li.strikeThrough {
                text-decoration: line-through; }
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderGroup li .withTrial {
                font-style: normal;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 12px;
                line-height: 16px;
                font-weight: 400;
                color: #ffffff;
                padding: 0 4px;
                height: 22px;
                background-color: #00a5e3;
                margin-left: 8px;
                border-radius: 8px; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderAlert {
            display: block;
            margin-top: 16px;
            padding: 8px 8px 8px 40px;
            border: 1px solid #eabf68;
            background-color: #fefcf7;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            color: #212121;
            width: calc(100% + 16px);
            position: relative;
            left: -8px;
            border-radius: 16px; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderAlert img {
              position: absolute;
              top: 0;
              left: 0;
              margin: 8px;
              height: 24px;
              width: 24px; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderInfo {
            display: flex;
            flex-direction: column; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderInfo .orderInfoRow {
              display: flex;
              width: 100%;
              margin-bottom: 4px; }
              @media only screen and (min-width: 768px) and (max-width: 1024px) {
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderInfo .orderInfoRow {
                  flex-direction: column; } }
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderInfo .orderInfoRow strong {
                font-family: 'PeridotPE-SemiBold', sans-serif;
                font-size: 14px;
                line-height: 16px;
                font-weight: 600;
                white-space: nowrap;
                margin-right: 12px; }
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderInfo .orderInfoRow span {
                width: 100%;
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400; }
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderInfo .orderInfoRow:last-child {
                margin-bottom: 0; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight {
            padding-left: 32px;
            padding-right: 8px;
            width: calc(100% - 270px); }
            @media only screen and (min-width: 768px) and (max-width: 1024px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight {
                width: calc(100% - 200px);
                padding-left: 16px; } }
            @media only screen and (max-width: 767px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight {
                width: 100%;
                padding-left: 0;
                padding-right: 0;
                margin-top: 6px; } }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight.full {
              padding-left: 0; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight.loading {
              display: flex;
              flex-direction: column;
              padding-top: 8px;
              padding-bottom: 30px; }
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight.loading .loadingLine {
                width: 100%;
                height: 12px;
                background-color: #f2f2f3;
                margin: 4px 0;
                max-width: 90%; }
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight.loading .loadingLine.large {
                  height: 20px;
                  max-width: 260px; }
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight.loading .loadingLine.small {
                  width: 80%;
                  max-width: 100%; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight .orderMainLabel {
              margin-bottom: 24px; }
              @media only screen and (max-width: 767px) {
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProduct .orderMainInfo .orderMainInfoRight .orderMainLabel {
                  margin-bottom: 16px; } }
      .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails {
        display: flex;
        align-items: flex-start;
        width: 100%; }
        @media only screen and (max-width: 767px) {
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails {
            flex-direction: column; } }
        .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails.loading {
          display: flex;
          flex-direction: column; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails.loading .loadingLine {
            width: 100%;
            height: 12px;
            background-color: #f2f2f3;
            margin: 4px 0; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails.loading .loadingLine.small {
              width: 50%;
              max-width: 100%; }
        .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft {
          display: flex;
          flex-flow: column;
          width: 243px; }
          @media only screen and (max-width: 767px) {
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft {
              width: 100%;
              margin-bottom: 24px; } }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft.withSubtitle .textWithTooltip {
            display: flex; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft.withSubtitle .textWithTooltip .textWithTooltipContent {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              text-overflow: ellipsis;
              max-width: 100%;
              overflow-x: hidden;
              white-space: nowrap;
              padding-right: 12px;
              padding-left: 14px; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderIndication {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            display: block;
            margin-top: 8px;
            padding-left: 16px; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductsDetailsTitle {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            padding-left: 16px;
            position: relative; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductsDetailsTitle:before {
              content: '';
              display: block;
              position: absolute;
              left: 0;
              top: 2px;
              width: 0;
              height: 0;
              border-top: 6px solid transparent;
              border-bottom: 6px solid transparent;
              border-left: 6px solid #212121; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductTitle {
            color: #212121;
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductTitle.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: 16px;
              color: #212121;
              border: 1px solid #212121;
              padding: 1px 1px 0px 0px;
              text-align: center;
              border-radius: 100%; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderLabel {
            font-size: 16px;
            line-height: 18px;
            margin-left: 16px;
            margin-top: 4px; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductInfo .orderProductList {
            margin: 16px 0;
            padding-left: 16px;
            border-left: 1px solid #9d9d9c;
            margin-left: 16px; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductInfo .orderProductList li {
              font-size: 16px;
              line-height: 22px; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductInfo .orderProductDuration {
            width: 100%;
            display: flex;
            font-size: 14px;
            line-height: 18px;
            margin-bottom: 4px; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsLeft .orderProductInfo .orderProductActivationType {
            width: 100%;
            display: flex;
            font-size: 14px;
            line-height: 14px;
            margin-bottom: 4px; }
        .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight {
          margin-left: auto;
          display: flex;
          justify-content: space-between;
          width: calc(100% - 243px); }
          @media only screen and (max-width: 767px) {
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight {
              width: 100%;
              margin-left: 0;
              display: flex;
              flex-wrap: wrap; } }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight.main {
            padding-left: 24px; }
            @media only screen and (max-width: 767px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight.main {
                padding-left: 0; } }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .textWithTooltip {
            display: flex; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .textWithTooltip .textWithTooltipContent {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              text-overflow: ellipsis;
              max-width: 100%;
              overflow-x: hidden;
              white-space: nowrap;
              padding-right: 4px; }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .textWithTooltip .customTooltipRight .customTooltipRightContent {
              width: 200px;
              padding-right: 8px;
              text-align: left; }
              @media only screen and (max-width: 767px) {
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .textWithTooltip .customTooltipRight .customTooltipRightContent {
                  width: 140px; } }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .orderSimpleText {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400; }
          .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .orderProductsDetailsRightCol {
            display: flex;
            flex-flow: column;
            padding-left: 0;
            width: 100%;
            max-width: 165px; }
            @media only screen and (max-width: 767px) {
              .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .orderProductsDetailsRightCol {
                width: 50%;
                margin-bottom: 16px; } }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .orderProductsDetailsRightCol .orderProductsDetailsRightColTitle {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600;
              margin-bottom: 12px; }
              @media only screen and (max-width: 767px) {
                .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .orderProductsDetailsRightCol .orderProductsDetailsRightColTitle {
                  margin-bottom: 8px; } }
            .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsDetails .orderProductsDetailsRight .orderProductsDetailsRightCol .orderGenericText {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400; }
      .orderBox .orderBoxContent .orderDetails .orderProducts .orderProductsPrice {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        margin-bottom: 4px; }
    .orderBox .orderBoxContent .orderDetails .orderProductsPrice {
      display: flex;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      justify-content: flex-end;
      text-align: right;
      margin-bottom: 2px; }
      .orderBox .orderBoxContent .orderDetails .orderProductsPrice span {
        width: 130px; }
        @media only screen and (max-width: 767px) {
          .orderBox .orderBoxContent .orderDetails .orderProductsPrice span {
            width: 100px; } }
        .orderBox .orderBoxContent .orderDetails .orderProductsPrice span i {
          display: block;
          font-style: normal;
          font-size: 18px;
          line-height: 14px;
          margin: 2px 0; }
    .orderBox .orderBoxContent .orderDetails .boxContactDetailsContainer {
      display: flex;
      align-items: flex-start;
      margin-top: 16px;
      margin-bottom: 16px;
      margin-left: 12px; }
      @media only screen and (max-width: 767px) {
        .orderBox .orderBoxContent .orderDetails .boxContactDetailsContainer {
          flex-direction: column;
          margin-top: 32px;
          margin-bottom: 32px; } }
    .orderBox .orderBoxContent .orderDetails .boxContactDetails {
      display: flex;
      flex-direction: column;
      max-width: 224px;
      margin-right: 16px;
      width: 100%;
      padding: 0; }
      @media only screen and (max-width: 767px) {
        .orderBox .orderBoxContent .orderDetails .boxContactDetails {
          margin-bottom: 16px; } }
      .orderBox .orderBoxContent .orderDetails .boxContactDetails:last-child {
        margin-right: 0; }
        @media only screen and (max-width: 767px) {
          .orderBox .orderBoxContent .orderDetails .boxContactDetails:last-child {
            margin-bottom: 0; } }
      .orderBox .orderBoxContent .orderDetails .boxContactDetails .boxContactRow {
        display: flex;
        align-items: center;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        margin-bottom: 8px; }
        .orderBox .orderBoxContent .orderDetails .boxContactDetails .boxContactRow i {
          width: 16px;
          height: 16px;
          display: block;
          margin-right: 8px;
          font-size: 20px;
          line-height: 16px; }
          .orderBox .orderBoxContent .orderDetails .boxContactDetails .boxContactRow i.icon-euros {
            font-size: 22px;
            line-height: 16px; }
      .orderBox .orderBoxContent .orderDetails .boxContactDetails .boxContactInfo {
        display: flex;
        flex-direction: column;
        padding-left: 24px; }
        .orderBox .orderBoxContent .orderDetails .boxContactDetails .boxContactInfo .boxContactInfoCol {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          margin-bottom: 2px;
          color: #212121; }
        .orderBox .orderBoxContent .orderDetails .boxContactDetails .boxContactInfo a.boxContactInfoCol:hover {
          color: #0ea600; }
    .orderBox .orderBoxContent .orderDetails .orderContactContainer {
      padding-left: 26px; }
    .orderBox .orderBoxContent .orderDetails .orderContact {
      display: flex;
      justify-content: space-between;
      background-color: #ffffff;
      margin: 10px 0;
      border-radius: 16px;
      padding: 8px 12px; }
      @media only screen and (max-width: 767px) {
        .orderBox .orderBoxContent .orderDetails .orderContact {
          flex-flow: column; } }
      .orderBox .orderBoxContent .orderDetails .orderContact.withMaxWidth {
        margin: 24px auto 16px;
        max-width: 643px; }
      .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol {
        display: flex;
        align-items: flex-start;
        border-left: 1px solid #9d9d9c;
        flex: 1;
        flex-direction: column; }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol {
            padding-left: 16px; } }
        @media only screen and (max-width: 767px) {
          .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol {
            padding-left: 0;
            margin-bottom: 6px;
            padding-bottom: 6px;
            border-bottom: 1px solid #9d9d9c;
            border-left: none; } }
        .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol.large {
          flex: 2; }
        .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol:first-child {
          border-left: none; }
        .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol:last-child {
          padding-left: 19px;
          margin-left: 19px; }
          @media only screen and (max-width: 767px) {
            .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol:last-child {
              margin-bottom: 0;
              padding-bottom: 0;
              border-bottom: none; } }
        .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactTitleRow {
          display: flex;
          align-items: flex-start; }
        .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol i {
          font-size: 17px; }
          @media only screen and (max-width: 1024px) {
            .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol i {
              display: none; } }
          .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol i.icon-euros {
            font-size: 20px; }
        .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactDetails {
          display: flex;
          flex-flow: column;
          padding-left: 10px; }
          .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactDetails .orderContactTitle {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            margin-bottom: 12px; }
          .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactDetails .orderContactText {
            margin-bottom: 4px; }
            .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactDetails .orderContactText a {
              color: #212121; }
        .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo {
          display: flex;
          width: 100%; }
          .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoCol {
            display: flex;
            flex-direction: column;
            padding-left: 8px;
            flex: 2; }
            .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoCol .orderContactInfoLabel {
              display: flex;
              align-items: center;
              color: #212121;
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              margin-bottom: 4px; }
              .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoCol .orderContactInfoLabel.disabled {
                opacity: 0.5; }
              .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoCol .orderContactInfoLabel:last-child {
                margin-bottom: 0; }
              .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoCol .orderContactInfoLabel .orderContactInfoValue {
                margin-left: auto;
                padding-right: 4px; }
          .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoDetails {
            display: flex;
            flex: 1;
            flex-direction: column;
            margin-left: 12px;
            padding: 8px 12px;
            background-color: #f2f2f3;
            position: relative;
            margin-top: -6px;
            border-radius: 4px; }
            .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoDetails:before {
              content: '';
              position: absolute;
              left: 0;
              top: 20px;
              width: 12px;
              height: 12px;
              background-color: #f2f2f3;
              -webkit-transform: translateX(-50%) rotate(45deg);
              -moz-transform: translateX(-50%) rotate(45deg);
              transform: translateX(-50%) rotate(45deg); }
            .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoDetails span {
              display: block;
              margin-bottom: 4px; }
              .orderBox .orderBoxContent .orderDetails .orderContact .orderContactCol .orderContactInfo .orderContactInfoDetails span:last-child {
                margin-bottom: 0; }

.progressBarContainer {
  display: block;
  padding: 0 40px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .progressBarContainer {
      padding: 0 30px; } }
  @media only screen and (max-width: 767px) {
    .progressBarContainer {
      padding: 0;
      margin-left: 7px; } }
  .progressBarContainer .orderAlert {
    display: flex;
    align-items: flex-start;
    margin-top: 24px;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    width: calc(100% + 80px);
    position: relative;
    left: -40px; }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .orderAlert {
        width: 100%;
        left: 0; } }
    .progressBarContainer .orderAlert img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      object-position: center;
      margin-right: 6px; }
  .progressBarContainer .progressBar {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-evenly;
    position: relative;
    padding-top: 32px;
    z-index: 2; }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar {
        flex-direction: column;
        height: 200px;
        justify-content: space-between;
        padding-top: 0; } }
    .progressBarContainer .progressBar.small {
      max-width: 100%; }
    .progressBarContainer .progressBar.pending li:first-child:after {
      background: #0ea600; }
    .progressBarContainer .progressBar.cancelled li:first-child:after {
      background-image: none;
      background-color: #df6938; }
    .progressBarContainer .progressBar.cancelled li.active:before {
      background-image: none;
      background-color: #df6938; }
    .progressBarContainer .progressBar.cancelled li.active span {
      color: #df6938; }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.firstStep:after {
        width: 3px;
        height: 0;
        left: 4px;
        top: 4px;
        content: '';
        display: block;
        position: absolute;
        background-color: #0ea600;
        z-index: 0; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.firstStep.cancelled:after {
        background-color: #df6938;
        background-image: none; } }
    .progressBarContainer .progressBar.firstStep li:first-child:after {
      width: 0; }
      @media only screen and (max-width: 767px) {
        .progressBarContainer .progressBar.firstStep li:first-child:after {
          display: none; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.secondStep:after {
        width: 3px;
        height: calc(35% - 12px);
        left: 4px;
        top: 4px;
        content: '';
        display: block;
        position: absolute;
        background-color: #0ea600;
        background-repeat: no-repeat;
        z-index: 0; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.secondStep.cancelled:after {
        background-color: #df6938;
        background-image: none; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.secondStep.medium:after {
        height: calc(40% - 12px); } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.secondStep.small:after {
        height: calc(100% - 12px); } }
    .progressBarContainer .progressBar.secondStep li:first-child:after {
      width: 100%; }
      @media only screen and (max-width: 767px) {
        .progressBarContainer .progressBar.secondStep li:first-child:after {
          display: none; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.thirdStep:after {
        width: 3px;
        height: calc(55% - 12px);
        left: 4px;
        top: 4px;
        content: '';
        display: block;
        position: absolute;
        background: #0ea600;
        z-index: 0; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.thirdStep.cancelled:after {
        background-color: #df6938; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.thirdStep.medium:after {
        height: calc(75% - 12px); } }
    .progressBarContainer .progressBar.thirdStep li:first-child:after {
      width: 200%; }
      @media only screen and (max-width: 767px) {
        .progressBarContainer .progressBar.thirdStep li:first-child:after {
          display: none; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.fourthStep:after {
        width: 3px;
        height: calc(80% - 12px);
        left: 4px;
        top: 4px;
        content: '';
        display: block;
        position: absolute;
        background: #0ea600;
        z-index: 0; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.fourthStep.cancelled:after {
        background-color: #df6938; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.fourthStep.medium:after {
        height: calc(100% - 12px); } }
    .progressBarContainer .progressBar.fourthStep li:first-child:after {
      width: 300%; }
      @media only screen and (max-width: 767px) {
        .progressBarContainer .progressBar.fourthStep li:first-child:after {
          display: none; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.fifthStep:after {
        width: 3px;
        height: calc(100% - 12px);
        left: 4px;
        top: 4px;
        content: '';
        display: block;
        position: absolute;
        background-color: #00a5e3;
        z-index: 0; } }
    @media only screen and (max-width: 767px) {
      .progressBarContainer .progressBar.fifthStep.cancelled:after {
        background-color: #df6938;
        background-image: none; } }
    .progressBarContainer .progressBar.fifthStep li:first-child:after {
      width: 400%; }
      @media only screen and (max-width: 767px) {
        .progressBarContainer .progressBar.fifthStep li:first-child:after {
          display: none; } }
    .progressBarContainer .progressBar:before {
      content: '';
      width: 100%;
      height: 3px;
      background-color: #9d9d9c;
      top: 12px;
      position: absolute;
      left: 2px;
      z-index: 0;
      display: block; }
      @media only screen and (max-width: 767px) {
        .progressBarContainer .progressBar:before {
          width: 3px;
          height: calc(100% - 12px);
          left: 4px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          transform: translateY(-50%); } }
    .progressBarContainer .progressBar li {
      position: relative;
      width: 100%; }
      .progressBarContainer .progressBar li:last-child {
        width: 0; }
        .progressBarContainer .progressBar li:last-child span {
          left: -40px; }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .progressBarContainer .progressBar li:last-child span {
              left: -30px; } }
          @media only screen and (max-width: 767px) {
            .progressBarContainer .progressBar li:last-child span {
              left: 28px;
              text-align: center; } }
        .progressBarContainer .progressBar li:last-child:before {
          top: none;
          bottom: 4px;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          transform: translateY(0); }
      .progressBarContainer .progressBar li:first-child:after {
        content: '';
        display: block;
        position: absolute;
        left: 2px;
        top: -20px;
        background: #0ea600;
        z-index: 0;
        width: 0;
        height: 3px; }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li:first-child:after {
            width: 3px;
            height: 0;
            left: 4px;
            top: 4px; } }
      .progressBarContainer .progressBar li:first-child span {
        text-align: left;
        left: -40px;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        transform: translateX(0); }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .progressBarContainer .progressBar li:first-child span {
            left: -30px; } }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li:first-child span {
            left: 28px;
            text-align: center; } }
      @media only screen and (max-width: 767px) {
        .progressBarContainer .progressBar li:first-child:before {
          top: 4px;
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          transform: translateY(0); } }
      .progressBarContainer .progressBar li:before {
        content: '';
        position: absolute;
        left: 0;
        top: -24px;
        width: 10px;
        height: 10px;
        background-color: #9d9d9c;
        display: block;
        overflow: hidden;
        z-index: 2;
        border-radius: 100%; }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li:before {
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            transform: translateY(-50%); } }
      .progressBarContainer .progressBar li.active:before {
        background: #0ea600; }
      .progressBarContainer .progressBar li.active span {
        color: #0ea600; }
      .progressBarContainer .progressBar li.pending:before {
        top: -20px;
        width: 24px;
        height: 24px;
        background-color: #eabf68;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li.pending:before {
            top: 50%;
            left: 5px; } }
      .progressBarContainer .progressBar li.pending img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        object-position: center;
        display: block;
        position: absolute;
        left: 0;
        top: -20px;
        z-index: 3;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li.pending img {
            top: 50%;
            left: 5px; } }
      .progressBarContainer .progressBar li.pending span {
        color: #eabf68; }
      .progressBarContainer .progressBar li.pending .message {
        position: absolute;
        width: auto;
        white-space: nowrap;
        left: 0;
        display: block;
        bottom: -30px;
        padding: 4px 6px;
        color: #212121;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        border: 1px solid #212121;
        background-color: #9d9d9c;
        z-index: 4;
        border-radius: 16px;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        transition: all 0.2s ease;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%); }
        .progressBarContainer .progressBar li.pending .message:before {
          content: '';
          display: block;
          width: 8px;
          height: 8px;
          background-color: #9d9d9c;
          left: 50%;
          top: 0;
          z-index: 0;
          position: absolute;
          border: 1px solid #212121;
          border-left-color: transparent;
          border-bottom-color: transparent;
          -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          -moz-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg); }
      .progressBarContainer .progressBar li.pending:hover .message {
        opacity: 1;
        visibility: visible;
        pointer-events: all; }
      .progressBarContainer .progressBar li.cancelled:before {
        top: -20px;
        width: 24px;
        height: 24px;
        background-color: #df6938;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li.cancelled:before {
            top: 50%;
            left: 5px; } }
      .progressBarContainer .progressBar li.cancelled img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        object-position: center;
        display: block;
        position: absolute;
        left: 0;
        top: -20px;
        z-index: 3;
        padding: 2px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li.cancelled img {
            top: 50%;
            left: 5px; } }
      .progressBarContainer .progressBar li.cancelled span {
        color: #df6938; }
      .progressBarContainer .progressBar li.checked.alert:before {
        background-color: #f2f2f3;
        border: 2px solid #0ea600; }
      .progressBarContainer .progressBar li.checked.alert img {
        padding: 0; }
      .progressBarContainer .progressBar li.checked:before {
        top: -20px;
        width: 24px;
        height: 24px;
        background-color: #0ea600;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li.checked:before {
            top: 50%;
            left: 5px; } }
      .progressBarContainer .progressBar li.checked img {
        width: 16px;
        height: 16px;
        object-fit: contain;
        object-position: center;
        display: block;
        position: absolute;
        left: 0;
        top: -20px;
        padding: 2px;
        z-index: 3;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li.checked img {
            top: 50%;
            left: 5px; } }
      .progressBarContainer .progressBar li.checked span {
        color: #0ea600; }
      .progressBarContainer .progressBar li span {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        position: relative;
        color: #9d9d9c;
        text-align: center;
        left: 0;
        display: block;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%); }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .progressBarContainer .progressBar li span {
            left: 5px;
            font-size: 12px;
            line-height: 12px; } }
        @media only screen and (max-width: 767px) {
          .progressBarContainer .progressBar li span {
            left: 28px;
            display: inline-block;
            -webkit-transform: translateX(0);
            -moz-transform: translateX(0);
            transform: translateX(0); } }

.orderDeliveryParent {
  display: flex;
  flex-direction: column;
  margin-top: 48px; }
  @media only screen and (max-width: 767px) {
    .orderDeliveryParent {
      margin-top: 24px; } }

.orderDeliveryContainer {
  display: flex;
  flex-direction: column;
  margin-top: 16px; }
  .orderDeliveryContainer .orderDeliveryTitle {
    cursor: pointer;
    display: flex;
    align-items: center; }
    .orderDeliveryContainer .orderDeliveryTitle.active i {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }
    .orderDeliveryContainer .orderDeliveryTitle img {
      width: 24px;
      height: 24px;
      margin-right: 8px; }
    .orderDeliveryContainer .orderDeliveryTitle span {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      margin-right: 6px; }
    .orderDeliveryContainer .orderDeliveryTitle i {
      width: 24px;
      height: 24px;
      font-size: 20px;
      line-height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      transform: scaleY(1); }
  .orderDeliveryContainer .orderDeliveryBody {
    display: none;
    width: 100%; }
    .orderDeliveryContainer .orderDeliveryBody p {
      margin: 8px 0 0;
      padding: 0 32px;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
    .orderDeliveryContainer .orderDeliveryBody .orderLabel {
      padding-left: 32px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-top: 8px; }
      .orderDeliveryContainer .orderDeliveryBody .orderLabel i {
        font-size: 16px;
        line-height: 16px;
        margin-left: 12px;
        color: #0ea600;
        font-style: normal; }
      .orderDeliveryContainer .orderDeliveryBody .orderLabel.withTopSpace {
        margin-top: 24px; }
    .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo {
      display: flex;
      align-items: flex-start;
      margin-top: 8px;
      padding-left: 32px; }
      @media only screen and (max-width: 767px) {
        .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo {
          flex-direction: column;
          margin-top: 0; } }
      .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol {
        width: 100%;
        display: flex;
        flex-direction: column;
        max-width: 180px;
        margin-right: 24px; }
        .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol:last-child {
          margin-right: 0; }
        .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol span {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          margin-bottom: 4px;
          display: block; }
          .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol span:last-child {
            margin-bottom: 0; }
          .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol span.title {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
            margin-top: 8px; }
            .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol span.title:first-child {
              margin-top: 0; }
              @media only screen and (max-width: 767px) {
                .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol span.title:first-child {
                  margin-top: 8px; } }
        .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol .inlineText {
          display: flex;
          margin-bottom: 4px; }
          .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol .inlineText span {
            margin-bottom: 0; }
            .orderDeliveryContainer .orderDeliveryBody .orderDeliveryInfo .orderDeliveryInfoCol .inlineText span:first-child {
              margin-right: 12px; }

.orderProductsDetailsContainer {
  display: flex;
  flex-direction: column; }
  .orderProductsDetailsContainer .orderProductsDetailsContent {
    display: flex;
    flex-direction: column;
    padding-left: 8px; }
    .orderProductsDetailsContainer .orderProductsDetailsContent .orderStatus {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
      line-height: 16px;
      color: #9d9d9c; }
      .orderProductsDetailsContainer .orderProductsDetailsContent .orderStatus.active {
        color: #0ea600; }
    .orderProductsDetailsContainer .orderProductsDetailsContent .orderPrediction {
      display: block;
      margin-bottom: 6px;
      font-size: 16px;
      line-height: 16px; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .orders .mainComponent {
    margin-top: 16px; } }

@media only screen and (max-width: 767px) {
  .orders .mainComponent {
    margin-top: 12px; } }

@media only screen and (max-width: 480px) {
  .orders .megaFilter {
    flex-flow: column !important; } }

@media only screen and (max-width: 480px) {
  .orders .megaFilter .megaFilterContent:first-child {
    margin-right: 0 !important;
    margin-bottom: 12px; } }

.offerBox {
  margin: 36px 0 !important;
  position: relative;
  z-index: 2; }
  .offerBox .offerListItemDetails {
    height: auto !important; }
    .offerBox .offerListItemDetails .offerListItemDetailsTop {
      margin: 16px 0 !important; }
      .offerBox .offerListItemDetails .offerListItemDetailsTop i {
        font-size: 24px;
        padding: 4px;
        margin-right: 4px; }
      .offerBox .offerListItemDetails .offerListItemDetailsTop.fixed {
        flex-wrap: wrap !important; }
        .offerBox .offerListItemDetails .offerListItemDetailsTop.fixed div {
          margin: 10px 0; }
      .offerBox .offerListItemDetails .offerListItemDetailsTop div {
        padding-right: 16px !important; }
    .offerBox .offerListItemDetails .giftBox {
      padding: 0 !important;
      -webkit-border-radius: 0 !important;
      -moz-border-radius: 0 !important;
      border-radius: 0 !important;
      -webkit-box-shadow: none !important;
      -moz-box-shadow: none !important;
      box-shadow: none !important; }
  .offerBox .offerDetails i {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
    .offerBox .offerDetails i.active {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }
  .offerBox .offerListItemCompare {
    height: auto !important;
    min-height: 160px; }
    .offerBox .offerListItemCompare .offerDetails {
      margin-top: 16px !important; }
  .offerBox .offerListItemContentRight {
    height: auto !important;
    padding: 12px 12px 16px 12px !important;
    justify-content: space-evenly !important; }
    .offerBox .offerListItemContentRight .paymentDeadline {
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 6px;
      margin-bottom: 16px !important; }
    .offerBox .offerListItemContentRight .buttonOuter {
      margin-top: 16px !important; }
      .offerBox .offerListItemContentRight .buttonOuter .primaryButtonNormal {
        max-width: 100% !important; }
      .offerBox .offerListItemContentRight .buttonOuter .blueButton {
        background-color: #ffffff;
        color: #212121;
        border: 1px solid #212121 !important;
        margin-top: 12px;
        width: 100%;
        min-width: 0;
        height: auto; }
        .offerBox .offerListItemContentRight .buttonOuter .blueButton:hover, .offerBox .offerListItemContentRight .buttonOuter .blueButton:focus {
          background-color: #212121;
          color: #ffffff; }
  .offerBox .visitLink {
    margin-bottom: 12px; }

.offerBoxContainer {
  position: relative; }

.contentBox .contentBoxTitle {
  display: block;
  width: 100%;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin-top: 8px; }

.contentBox p {
  margin: 8px 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }
  .contentBox p a {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #212121; }
  .contentBox p strong {
    font-weight: normal;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }

.renewals .toggleContent {
  display: none;
  top: -22px;
  margin-bottom: -22px;
  position: relative;
  z-index: 0; }

.renewals .simple-popup-content .toggleContent {
  display: block;
  top: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 0; }
  .renewals .simple-popup-content .toggleContent.hidden {
    display: none; }

.offerListItemDetails {
  position: relative; }

.offerDue {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #f4f8fb;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  border-radius: 0 0 0 16px;
  border-bottom: 1px solid #2775b2;
  border-left: 1px solid #2775b2; }
  .offerDue i {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    font-style: normal;
    margin-right: 6px;
    border-radius: 100%;
    color: #ffffff;
    background-color: #2775b2; }

.toggleProgram {
  display: none;
  width: 100%; }

.emptyOfferBoxParent {
  display: flex;
  flex-flow: row;
  overflow: hidden;
  padding-bottom: 10px;
  margin-top: 20px; }
  .emptyOfferBoxParent .emptyOfferBox {
    width: 100%;
    flex: 1;
    margin: 0 16px; }
    @media only screen and (max-width: 1024px) {
      .emptyOfferBoxParent .emptyOfferBox {
        flex: 0 0 auto;
        overflow-y: hidden; } }
    .emptyOfferBoxParent .emptyOfferBox:first-child {
      margin-left: 0; }
    .emptyOfferBoxParent .emptyOfferBox:last-child {
      margin-right: 0; }
    .emptyOfferBoxParent .emptyOfferBox .rightBox {
      padding: 70px 28px 28px; }

.emptyOfferBox {
  display: flex;
  flex-flow: row;
  margin-top: 42px !important; }
  .emptyOfferBox .leftBox {
    padding: 32px;
    display: flex;
    flex-flow: column;
    width: 70%;
    align-items: center; }
    .emptyOfferBox .leftBox .leftBoxContent {
      display: flex;
      flex-flow: column;
      width: 100%;
      position: relative;
      top: -20px;
      margin-top: -30px; }
      .emptyOfferBox .leftBox .leftBoxContent .leftBoxImage {
        border-radius: 4px;
        background-color: #f2f2f3;
        width: 68px;
        height: 68px;
        margin-bottom: 32px; }
      .emptyOfferBox .leftBox .leftBoxContent .leftBoxButton {
        border-radius: 4px;
        background-color: #f2f2f3;
        width: 70%;
        height: 24px;
        margin-bottom: 30px;
        margin-top: 30px; }
      .emptyOfferBox .leftBox .leftBoxContent .leftBoxLine {
        width: 100%;
        height: 12px;
        background-color: #f2f2f3;
        display: flex;
        margin: 4px 0; }
      .emptyOfferBox .leftBox .leftBoxContent .leftBoxLineSmall {
        width: 25%;
        height: 12px;
        background-color: #f2f2f3;
        display: flex;
        margin: 4px 0; }
  .emptyOfferBox .rightBox {
    display: flex;
    flex-flow: column;
    width: 30%;
    background-color: #f2f2f3;
    padding: 50px 28px 28px;
    border-radius: 0 16px 16px 0; }
    .emptyOfferBox .rightBox .rightBoxContent {
      display: flex;
      flex-flow: column; }
      .emptyOfferBox .rightBox .rightBoxContent .rightBoxLine {
        width: 100%;
        height: 8px;
        background-color: #ffffff;
        display: flex;
        margin: 4px 0; }
      .emptyOfferBox .rightBox .rightBoxContent .rightBoxLineSmall {
        width: 50%;
        height: 8px;
        background-color: #ffffff;
        display: flex;
        margin: 4px 0; }
      .emptyOfferBox .rightBox .rightBoxContent .rightBoxButton {
        width: 80%;
        height: 24px;
        background-color: #ffffff;
        display: flex;
        margin: 44px auto 0;
        border-radius: 12px; }

.playList {
  display: flex;
  flex-direction: column; }
  .playList .offerListItem {
    width: 100%;
    max-width: 592px;
    margin: 20px 0 !important; }

.leftSidebarBox {
  background-color: #ffffff;
  flex-flow: column;
  z-index: 1; }
  .leftSidebarBox.withFloatMenu {
    z-index: unset !important; }
  .leftSidebarBox .sidebarTitle {
    display: flex;
    cursor: pointer;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    padding: 8px 24px 8px 16px;
    position: relative;
    z-index: 0; }
    .leftSidebarBox .sidebarTitle.open {
      border-bottom: 2px solid #e6e6e6;
      margin-bottom: 6px; }
    .leftSidebarBox .sidebarTitle .hometooltip {
      align-self: center;
      width: 16px;
      height: 16px;
      cursor: help;
      padding: 0;
      margin-left: 6px;
      padding: 3px 2px 2px 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border: 1px solid #212121;
      border-radius: 100%; }
    .leftSidebarBox .sidebarTitle .withOverflow {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
    .leftSidebarBox .sidebarTitle .textDetails {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      color: #212121 !important; }
    .leftSidebarBox .sidebarTitle .customTooltip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 4px;
      cursor: pointer; }
      .leftSidebarBox .sidebarTitle .customTooltip:hover:before,
      .leftSidebarBox .sidebarTitle .customTooltip:hover .customTooltipContainer {
        opacity: 1;
        visibility: visible;
        pointer-events: all; }
      .leftSidebarBox .sidebarTitle .customTooltip:before {
        content: '';
        display: block;
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #ffffff;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
        z-index: 2;
        bottom: -13px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        border-radius: 4px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        transition: all 0.2s ease; }
      .leftSidebarBox .sidebarTitle .customTooltip img {
        width: 16px;
        height: auto;
        position: relative;
        top: 3px;
        display: block; }
      .leftSidebarBox .sidebarTitle .customTooltip .customTooltipContainer {
        width: calc(100% - 14px);
        position: absolute;
        left: 7px;
        bottom: 12px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        transform: translateY(100%);
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        transition: all 0.2s ease; }
        .leftSidebarBox .sidebarTitle .customTooltip .customTooltipContainer .customTooltipContent {
          background-color: #ffffff;
          box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
          width: 100%;
          padding: 8px 12px;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #212121;
          white-space: normal;
          margin-top: 18px;
          border-radius: 8px; }
          .leftSidebarBox .sidebarTitle .customTooltip .customTooltipContainer .customTooltipContent .visitLink {
            display: block;
            margin-top: 6px; }
    .leftSidebarBox .sidebarTitle img:not(.hometooltip):not(.simpleTooltip) {
      position: absolute;
      right: 8px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      display: none; }
      .leftSidebarBox .sidebarTitle img:not(.hometooltip):not(.simpleTooltip).openedSidebar {
        display: block; }
  .leftSidebarBox .leftSidebarBoxContent {
    display: none;
    padding-bottom: 6px; }
    .leftSidebarBox .leftSidebarBoxContent.active, .leftSidebarBox .leftSidebarBoxContent.alwaysActive {
      display: block; }
    .leftSidebarBox .leftSidebarBoxContent .borderedTitle {
      color: #212121;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700;
      position: relative;
      display: flex;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid #e6e6e6;
      z-index: 0; }
      .leftSidebarBox .leftSidebarBoxContent .borderedTitle .hometooltip {
        width: 16px;
        height: 16px;
        cursor: help;
        padding: 0;
        margin-left: 6px;
        padding: 3px 2px 2px 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: 1px solid #212121;
        border-radius: 100%; }
      .leftSidebarBox .leftSidebarBoxContent .borderedTitle img {
        width: 24px;
        height: 24px;
        margin-right: 4px; }
    .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails {
      position: relative;
      margin-top: 12px;
      margin-bottom: 6px;
      padding-inline: 16px; }
      .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails .businessConnections a:not(.secondaryButton).activeConnection:after {
        width: 100%;
        left: 0; }
      .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails .businessConnections a:not(.secondaryButton).activeConnection:before {
        left: 0; }
      .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) {
        padding: 12px 8px;
        color: #0e8103;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        width: auto;
        display: block;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 16px 8px;
        margin-top: 4px;
        margin-bottom: 4px;
        color: #212121;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        position: relative;
        flex-wrap: wrap;
        transform: translateZ(0); }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton):hover {
          color: rgba(0, 109, 41, 0.85);
          z-index: 1; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.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);
          z-index: 2; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton)-notVisible {
          visibility: hidden; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).hidden {
          display: none; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).absoluteLink {
          position: absolute;
          bottom: 8px; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).whiteLink {
          display: inline-block;
          width: auto;
          color: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 16px;
          margin-left: 8px;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700; }
          @media only screen and (max-width: 767px) {
            .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).whiteLink {
              margin-left: 0;
              display: block;
              width: 100%;
              margin-top: 12px; } }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).blueTooltipLink {
          color: #212121;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700;
          letter-spacing: 0;
          margin-top: 4px; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).blueLink {
          display: inline-block;
          width: auto;
          color: #212121;
          margin-left: 24px;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700; }
          @media only screen and (max-width: 767px) {
            .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).blueLink {
              margin-left: 0;
              display: block;
              width: 100%;
              margin-top: 12px; } }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).inline {
          display: inline-block;
          width: auto; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).blue {
          color: #212121 !important;
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton):active {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          border-radius: 0px;
          align-self: stretch;
          border-left: 4px solid #e20074;
          background: var(--grayscale-light-mode-1-surface, #f2f2f3);
          outline: none;
          box-shadow: none; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton):focus {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          border-radius: 0px;
          align-self: stretch;
          border-left: 4px solid #e20074;
          background: var(--grayscale-light-mode-1-surface, #f2f2f3);
          outline: none;
          box-shadow: none; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton):hover .optionsParent {
          display: block;
          opacity: 1; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent {
          display: none;
          position: fixed;
          background-color: #ffffff;
          opacity: 1;
          left: -16px;
          bottom: 0;
          z-index: 4;
          border-radius: 16px;
          border: 1px solid #e6e6e6;
          -webkit-transform: translateY(100%);
          -moz-transform: translateY(100%);
          transform: translateY(100%); }
          .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options {
            display: flex;
            align-items: flex-end;
            justify-content: space-evenly;
            padding: 12px; }
            .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option {
              padding: 12px 8px;
              color: #0e8103;
              font-family: 'PeridotPE-Bold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 700;
              width: auto;
              display: block;
              justify-content: center;
              align-items: center;
              border-radius: 16px;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              text-align: center;
              padding: 0 8px;
              border-right: 1px solid #e6e6e6;
              border-radius: 0;
              color: #212121; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option:hover {
                color: rgba(0, 109, 41, 0.85);
                z-index: 1; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option: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; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option-notVisible {
                visibility: hidden; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.hidden {
                display: none; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.absoluteLink {
                position: absolute;
                bottom: 8px; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.whiteLink {
                display: inline-block;
                width: auto;
                color: #ffffff;
                border: 1px solid #ffffff;
                border-radius: 16px;
                margin-left: 8px;
                font-family: 'PeridotPE-Bold', sans-serif;
                font-size: 16px;
                line-height: 16px;
                font-weight: 700; }
                @media only screen and (max-width: 767px) {
                  .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.whiteLink {
                    margin-left: 0;
                    display: block;
                    width: 100%;
                    margin-top: 12px; } }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.blueTooltipLink {
                color: #212121;
                font-family: 'PeridotPE-Bold', sans-serif;
                font-size: 16px;
                line-height: 16px;
                font-weight: 700;
                letter-spacing: 0;
                margin-top: 4px; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.blueLink {
                display: inline-block;
                width: auto;
                color: #212121;
                margin-left: 24px;
                font-family: 'PeridotPE-Bold', sans-serif;
                font-size: 16px;
                line-height: 16px;
                font-weight: 700; }
                @media only screen and (max-width: 767px) {
                  .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.blueLink {
                    margin-left: 0;
                    display: block;
                    width: 100%;
                    margin-top: 12px; } }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.inline {
                display: inline-block;
                width: auto; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option.blue {
                color: #212121 !important;
                font-family: 'PeridotPE-Bold', sans-serif;
                font-size: 16px;
                line-height: 16px;
                font-weight: 700; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option .optionIcon {
                filter: brightness(0) saturate(100%);
                opacity: 1; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option:hover .optionIcon {
                filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(4613%) hue-rotate(153deg) brightness(91%) contrast(101%);
                opacity: 0.85; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option:first-child {
                padding-left: 0; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option:last-child {
                padding-right: 0;
                border-right: none; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) .optionsParent .options .option .optionTitle {
                display: flex;
                align-items: center;
                padding: 0;
                margin-top: 6px;
                font-family: 'PeridotPE-ExtraBlack', sans-serif;
                font-size: 10px;
                line-height: 12px;
                font-weight: 800;
                white-space: nowrap; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).withMultipleBadges {
          flex-flow: column;
          flex-wrap: wrap;
          align-items: flex-start; }
          .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).withMultipleBadges.forCone {
            flex-direction: row;
            align-items: center;
            margin: 8px 0;
            flex-wrap: wrap; }
            .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).withMultipleBadges.forCone span.withMultipleBadgesLeft .toHide {
              padding-left: 0; }
            .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).withMultipleBadges.forCone span.withMultipleBadgesRight {
              padding: 0;
              margin-left: 4px;
              margin-top: 0; }
              .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).withMultipleBadges.forCone span.withMultipleBadgesRight img {
                width: auto;
                height: 24px;
                display: block;
                position: relative;
                top: -1px; }
          .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).withMultipleBadges span.withMultipleBadgesRight {
            padding: 0;
            margin-left: 15px;
            margin-top: 4px; }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).activeConnection {
          position: relative;
          z-index: 1; }
          .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).activeConnection:after {
            content: '';
            display: block;
            position: absolute;
            left: -16px;
            top: 5px;
            background-color: #e6e6e6;
            z-index: -1;
            width: calc(100% + 32px);
            height: calc(80%); }
          .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton).activeConnection:before {
            content: '';
            display: block;
            position: absolute;
            left: -16px;
            top: 5px;
            background: #e20074;
            z-index: 0;
            width: 3px;
            height: calc(80%); }
        .leftSidebarBox .leftSidebarBoxContent .leftSidebarBoxDetails a:not(.secondaryButton) span:not(.withMultipleBadgesLeft) span:not(.badgeText) {
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 16px;
          font-weight: 700;
          padding: 0 4px; }
  .leftSidebarBox.textBox {
    padding: 16px; }
    .leftSidebarBox.textBox.withOverlay {
      position: relative; }
      .leftSidebarBox.textBox.withOverlay:before {
        content: '';
        display: block;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.2;
        background: #00a5e3; }
    .leftSidebarBox.textBox.emptyBox {
      padding: 47px 16px; }
      .leftSidebarBox.textBox.emptyBox .emptyBoxTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        margin-bottom: 8px;
        text-align: center; }
      .leftSidebarBox.textBox.emptyBox .emptyBoxSubTitle {
        font-size: 14px;
        line-height: 16px;
        text-align: center; }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .leftSidebarBox.textBox:first-child {
        margin-top: 0; } }
    .leftSidebarBox.textBox .borderedContent {
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid #e6e6e6; }
      .leftSidebarBox.textBox .borderedContent:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none; }
      .leftSidebarBox.textBox .borderedContent p {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        margin: 4px 0; }
      .leftSidebarBox.textBox .borderedContent.withTooltip {
        position: relative; }

.withMultipleBadges span {
  flex: 0 0 auto; }
  .withMultipleBadges span.withMultipleBadgesLeft {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    padding: 0 !important; }
  .withMultipleBadges spana.withMultipleBadges span {
    flex: 0 0 auto; }
  .withMultipleBadges span.withMultipleBadgesRight {
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: right; }

.withIndex {
  z-index: 4 !important; }

.businessConnections {
  max-height: 135px;
  overflow: hidden;
  max-width: 100%;
  border-bottom: 2px solid #e6e6e6;
  -webkit-transition: max-height 0.2s ease-in-out;
  -moz-transition: max-height 0.2s ease-in-out;
  transition: max-height 0.2s ease-in-out; }
  .businessConnections.opened {
    max-height: 283px;
    overflow-y: auto;
    -webkit-transition: max-height 0.2s ease-in-out;
    -moz-transition: max-height 0.2s ease-in-out;
    transition: max-height 0.2s ease-in-out; }
  .businessConnections.full {
    max-height: 100%;
    overflow: visible;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }

.jsFilterNoResults,
.jsCloseIcon {
  display: none; }

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

.businessToggle {
  background-color: #ffffff;
  max-width: 95%; }
  .businessToggle .businessContentSearch {
    position: relative;
    margin-top: 8px;
    display: none;
    border-radius: 16px;
    border: 1px solid #212121; }
    .businessToggle .businessContentSearch .businessInput {
      padding: 8px 40px;
      box-sizing: border-box;
      width: 100%;
      border: none;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      display: inline-block;
      background-color: transparent; }
    .businessToggle .businessContentSearch ::-webkit-input-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .businessToggle .businessContentSearch :-moz-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .businessToggle .businessContentSearch ::-moz-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .businessToggle .businessContentSearch :-ms-input-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .businessToggle .businessContentSearch i {
      font-size: 18px;
      position: absolute;
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 1;
      pointer-events: none;
      line-height: 0; }
      .businessToggle .businessContentSearch i.icon-lens {
        font-size: 22px;
        left: 8px; }
      .businessToggle .businessContentSearch i.icon-close {
        font-size: 18px;
        right: 8px; }
  .businessToggle .toggleContent {
    text-align: center;
    display: block;
    top: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 0; }
    .businessToggle .toggleContent .toggleText {
      display: none !important;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
      .businessToggle .toggleContent .toggleText.active {
        display: block !important; }
      .businessToggle .toggleContent .toggleText.arrowUp i {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }
      .businessToggle .toggleContent .toggleText i {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        transform: scaleY(1);
        font-size: 20px;
        line-height: 20px;
        position: relative;
        left: 10px;
        top: 2px;
        display: inline-block; }

.emptyConnectionsMessage {
  font-size: 14px;
  display: block;
  width: 100%;
  margin: 12px 0 22px;
  text-align: center; }

.assetNotFoundSpan {
  font-size: 14px;
  display: block;
  width: 100%;
  margin: 12px 0 22px; }

.businessStores {
  position: relative;
  width: 100%;
  left: 0;
  z-index: 1;
  margin-top: 8px;
  margin-bottom: 8px;
  border-radius: 16px; }
  .businessStores.active .mainStore.store {
    -webkit-border-radius: 16px 16px 0 0;
    -moz-border-radius: 16px 16px 0 0;
    border-radius: 16px 16px 0 0; }
  .businessStores .subStores {
    background-color: #f2f2f3;
    display: none;
    padding: 0 12px;
    max-height: 240px;
    overflow-y: auto;
    padding-top: 8px;
    border-radius: 0 0 16px 16px; }
    .businessStores .subStores.showElement {
      display: block; }
    .businessStores .subStores .store {
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e6e6e6;
      position: relative;
      z-index: 2; }
      .businessStores .subStores .store:hover:before {
        background-color: #e6e6e6;
        position: absolute;
        content: '';
        left: -12px;
        top: -8px;
        width: calc(100% + 24px);
        height: calc(100% + 8px);
        z-index: -1; }
      .businessStores .subStores .store:first-child:hover:before {
        position: absolute;
        content: '';
        left: -12px;
        top: 0;
        width: calc(100% + 24px);
        height: 100%;
        z-index: -1; }
      .businessStores .subStores .store:last-child, .businessStores .subStores .store.withoutBorder {
        border: none;
        margin-bottom: 0; }
    .businessStores .subStores .storeLink {
      height: 32px;
      align-items: center;
      display: flex;
      background-color: rgba(33, 33, 33, 0.1);
      width: calc(100% + 24px);
      position: relative;
      left: -12px;
      padding-left: 12px;
      border-radius: 0 0 16px 16px; }
  .businessStores i {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1);
    font-size: 18px;
    position: relative;
    right: 16px;
    top: 14px;
    display: block;
    position: absolute;
    pointer-events: none; }
    .businessStores i.active {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }
  .businessStores .store {
    cursor: pointer; }
    .businessStores .store.mainStore {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      border-radius: 16px;
      background-color: #e6e6e6;
      padding: 12px 36px 12px 12px; }
      .businessStores .store.mainStore.withoutSubstores {
        cursor: default; }
    .businessStores .store.withTooltip {
      padding-right: 20px; }
    .businessStores .store img.storeTooltip {
      position: absolute;
      right: 0;
      top: 0;
      width: 16px; }
    .businessStores .store .storeCboneBadge {
      display: block;
      height: 24px;
      margin-top: 4px; }
    .businessStores .store span {
      width: 100%;
      display: block;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
      .businessStores .store span.storeTooltip {
        position: absolute;
        right: 0;
        top: 0;
        width: 16px;
        border: 1px solid #212121;
        height: 16px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600; }
      .businessStores .store span.wrapText {
        white-space: normal; }
      .businessStores .store span.storeName {
        line-height: 16px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
      .businessStores .store span.storeAddress {
        line-height: 14px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }

.storesContentSearch {
  position: relative;
  padding: 12px 0;
  background-color: #ffffff; }
  .storesContentSearch .storesInput {
    padding: 8px 40px;
    box-sizing: border-box;
    width: 100%;
    font-size: 16px;
    line-height: 16px;
    color: #212121;
    display: inline-block;
    background-color: transparent;
    border-radius: 16px;
    border: 1px solid #212121; }
  .storesContentSearch ::-webkit-input-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .storesContentSearch :-moz-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .storesContentSearch ::-moz-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .storesContentSearch :-ms-input-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .storesContentSearch i {
    position: absolute;
    right: 14px;
    top: 50%;
    -webkit-transform: translateY(-50%) scaleY(1) !important;
    -moz-transform: translateY(-50%) scaleY(1) !important;
    transform: translateY(-50%) scaleY(1) !important;
    z-index: 1;
    pointer-events: none;
    line-height: 0; }
    .storesContentSearch i.icon-lens {
      font-size: 24px;
      left: 12px; }
    .storesContentSearch i.icon-close {
      font-size: 18px;
      right: 12px; }

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

.packageListComponent {
  z-index: 2;
  border-radius: 16px;
  background-color: #ffffff;
  padding: 12px 0px 12px 12px;
  position: relative;
  overflow: hidden;
  border: 1px solid #e6e6e6; }
  @media only screen and (max-width: 480px) {
    .packageListComponent {
      padding: 12px 0px 12px 0; } }
  .packageListComponent.withGradient:before {
    border-radius: 15px;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #e6e6e6;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; }
  .packageListComponent.withGradient .packageList .slick-next {
    background-color: #ffffff; }
  .packageListComponent.withGradient .packageList .slick-prev {
    background-color: #ffffff;
    left: -12px; }
  .packageListComponent .packageList.loadingList {
    display: flex;
    flex-flow: row;
    overflow: hidden; }
  .packageListComponent .packageList .slick-prev {
    display: none !important;
    margin-top: -15px;
    left: -14px;
    line-height: 0;
    width: 34px;
    height: 330px;
    background-color: #e6e6e6;
    z-index: 2;
    overflow-y: hidden;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%); }
    @media only screen and (max-width: 480px) {
      .packageListComponent .packageList .slick-prev {
        display: none !important; } }
    .packageListComponent .packageList .slick-prev.active {
      display: block !important; }
    .packageListComponent .packageList .slick-prev:before {
      content: url("data:image/svg+xml,%3Csvg width='21' height='38' viewBox='0 0 21 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 37L2 18.6471L20 0.999999' stroke='%23E20074' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
      color: #e20074;
      opacity: 1;
      font-size: 34px; }
  .packageListComponent .packageList .slick-next {
    position: absolute;
    margin-top: -15px;
    right: -1px;
    line-height: 0;
    width: 34px;
    height: 330px;
    background-color: #e6e6e6;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    transform: translate(0, -50%); }
    @media only screen and (max-width: 480px) {
      .packageListComponent .packageList .slick-next {
        display: none !important; } }
    .packageListComponent .packageList .slick-next:before {
      content: url("data:image/svg+xml,%3Csvg width='21' height='38' viewBox='0 0 21 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L19 19.3529L1 37' stroke='%23E20074' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
      opacity: 1;
      font-size: 34px; }
  .packageListComponent .packageList .slick-list {
    padding: 0 20% 0 0; }
    @media only screen and (max-width: 480px) {
      .packageListComponent .packageList .slick-list {
        padding: 0 0 0 0; } }
    .packageListComponent .packageList .slick-list .slick-track {
      margin: 0; }
      .packageListComponent .packageList .slick-list .slick-track .slick-slide {
        margin: 0 12px 5px 0;
        border: none;
        outline: none; }
        .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem {
          width: 148px;
          min-height: 215px;
          display: flex;
          flex-flow: column;
          background-color: #f2f2f3;
          overflow: hidden;
          border: 1px solid #e6e6e6;
          border-radius: 16px; }
          .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListImage {
            border-radius: 16px 16px 0 0;
            height: 75px;
            background-color: #ffffff;
            display: flex;
            align-items: center; }
            .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListImage img {
              margin: auto;
              width: 100%;
              height: 100%;
              object-fit: contain; }
          .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .linearGradient {
            height: 20px;
            width: 100%;
            display: block;
            background: #ffffff;
            background-repeat: no-repeat; }
          .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListContent {
            height: 96px;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            background-color: #f2f2f3;
            padding: 6px; }
          .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice {
            background-color: #0e8103;
            color: #ffffff;
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            display: flex;
            padding: 12px;
            height: 42px;
            cursor: pointer;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            transition: all 0.2s ease; }
            .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice:hover {
              background-color: #0e8103;
              opacity: 0.85; }
            .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice: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); }
            .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice span {
              width: 100%;
              text-align: right; }
              .packageListComponent .packageList .slick-list .slick-track .slick-slide.packageListItem .packageListPrice span em {
                font-style: normal;
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400;
                display: inline-block;
                padding-left: 4px; }
  .packageListComponent .packageListTitle {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    width: 100%;
    display: block;
    margin-bottom: 12px; }
    @media only screen and (max-width: 480px) {
      .packageListComponent .packageListTitle {
        padding-left: 12px; } }

.modalIcon {
  background-color: #f2f2f3; }
  .modalIcon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block; }

.toggleBox {
  display: flex;
  flex-direction: column;
  margin-top: 30px; }
  .toggleBox .toggleSimpleContent {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center; }
    .toggleBox .toggleSimpleContent i {
      padding-left: 8px;
      font-size: 18px;
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      transform: scaleY(1); }
      .toggleBox .toggleSimpleContent i.active {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }
  .toggleBox .simpleToggledContent {
    display: none;
    padding-top: 10px; }

.modalDetails {
  padding: 16px 24px 24px 24px;
  background-color: #ffffff;
  box-sizing: border-box;
  border-radius: 16px; }
  .modalDetails .businessConnections.withoutSearch {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }
  .modalDetails .imgTooltip {
    position: relative;
    left: 10px;
    display: inline-block;
    margin: auto;
    width: 16px;
    height: 16px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: #212121;
    border: 1px solid #212121;
    padding: 0;
    text-align: center;
    border-radius: 100%; }
  .modalDetails.firstElement {
    border-radius: 0 0 16px 16px;
    max-height: 80%; }
  .modalDetails .modalText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    max-height: 300px;
    min-height: 60px;
    overflow-y: auto;
    margin-bottom: 16px; }
    .modalDetails .modalText.largeText {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
    .modalDetails .modalText.withLinks a {
      color: #00a5e3;
      text-decoration: underline; }
    .modalDetails .modalText.withoutMargin {
      margin-bottom: 0; }
    .modalDetails .modalText .modalTextWithIcon {
      position: relative;
      padding-left: 42px; }
      .modalDetails .modalText .modalTextWithIcon img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2; }
  .modalDetails .packageDetailsList .packageDetailsListItem {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 2px solid #f2f2f3; }
    .modalDetails .packageDetailsList .packageDetailsListItem:last-child {
      border-color: transparent; }
    .modalDetails .packageDetailsList .packageDetailsListItem .packageDetailsListItemText {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      flex-grow: 2;
      padding-right: 5%; }
    .modalDetails .packageDetailsList .packageDetailsListItem .packageDetailsListItemPrice {
      text-align: right; }
      .modalDetails .packageDetailsList .packageDetailsListItem .packageDetailsListItemPrice .primaryButtonSmall {
        min-width: 80px;
        white-space: nowrap; }
  .modalDetails .packageDetailsActivation {
    padding-top: 16px;
    border-top: 2px solid #f2f2f3;
    margin-top: -8px;
    margin-bottom: 24px; }
    .modalDetails .packageDetailsActivation .packageDetailsActivationText {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      margin-bottom: 24px; }
  .modalDetails .multipleUsers {
    margin-bottom: 24px; }
    .modalDetails .multipleUsers .businessConnections {
      margin: auto;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid #e6e6e6; }
      .modalDetails .multipleUsers .businessConnections label {
        width: 100%;
        margin: 12px 0;
        color: #212121;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700; }
    .modalDetails .multipleUsers .opened {
      max-height: 228px;
      margin: 0;
      padding-left: 50px;
      max-width: 100%; }
      .modalDetails .multipleUsers .opened.large {
        max-height: 288px; }
    .modalDetails .multipleUsers .businessToggle {
      background-color: transparent; }
      .modalDetails .multipleUsers .businessToggle .businessContentSearch {
        margin: 8px auto 0px;
        display: block; }
      .modalDetails .multipleUsers .businessToggle a {
        display: block;
        width: 100%;
        margin: 12px 0;
        color: #212121;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }

.groupedRadios {
  padding-left: 28px;
  margin-top: 14px; }

.megaFilterContainer {
  position: relative;
  z-index: 4; }
  .megaFilterContainer .megaFilter {
    padding: 16px;
    background-color: #ffffff;
    display: flex;
    flex-flow: row; }
    .megaFilterContainer .megaFilter .megaFilterContent {
      position: relative;
      display: flex;
      flex-flow: column;
      flex: 1; }
      .megaFilterContainer .megaFilter .megaFilterContent-withoutInfo {
        align-self: flex-start; }
      .megaFilterContainer .megaFilter .megaFilterContent:first-child {
        margin-right: 16px; }
        @media only screen and (max-width: 480px) {
          .megaFilterContainer .megaFilter .megaFilterContent:first-child {
            margin-right: 0;
            margin-bottom: 16px; } }
      .megaFilterContainer .megaFilter .megaFilterContent-span {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        margin-right: 8px;
        margin-bottom: 4px; }
      .megaFilterContainer .megaFilter .megaFilterContent span {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        display: inline-block;
        margin-right: 28px;
        margin-bottom: 4px; }
      .megaFilterContainer .megaFilter .megaFilterContent .input-subTitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        margin: 0 0 4px 0; }
      .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer {
        position: relative; }
        @media only screen and (min-width: 1025px) and (max-width: 1230px) {
          .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer {
            width: 100%; } }
        @media only screen and (max-width: 767px) {
          .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer {
            width: 100%; } }
        .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput {
          box-sizing: border-box;
          width: 100%;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #212121;
          display: inline-block;
          background-color: transparent;
          border: 1px solid #212121;
          padding: 8px 40px;
          border-radius: 16px; }
          .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput.simpleInput {
            padding: 8px 12px; }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput {
              max-width: 100%; } }
          @media only screen and (min-width: 1025px) and (max-width: 1230px) {
            .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput {
              max-width: 100%; } }
          @media only screen and (max-width: 767px) {
            .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput {
              max-width: 100%; } }
          @media only screen and (min-width: 1025px) and (max-width: 1230px) {
            .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput.smallInput {
              max-width: 100%; } }
          @media only screen and (max-width: 767px) {
            .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer .megaFilterInput.smallInput {
              max-width: 100%; } }
        .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer ::-webkit-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer :-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer ::-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer :-ms-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer 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; }
          .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer i.icon-arrowDown {
            font-size: 18px;
            -webkit-transform: scaleY(1);
            -moz-transform: scaleY(1);
            transform: scaleY(1); }
            .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer i.icon-arrowDown.opened {
              -webkit-transform: scaleY(-1);
              -moz-transform: scaleY(-1);
              transform: scaleY(-1); }
          .megaFilterContainer .megaFilter .megaFilterContent .megaFilterInputContainer i.icon-lens {
            font-size: 22px;
            left: 8px; }
  .megaFilterContainer .megaFilterExpanded {
    background-color: #ffffff;
    display: none;
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: -1;
    box-sizing: border-box;
    border-radius: 0 0 16px 16px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    border: 1px solid #e6e6e6; }
    .megaFilterContainer .megaFilterExpanded .resultsGroupContainer {
      max-height: 200px;
      overflow-y: auto;
      margin: 26px 0 64px 16px;
      padding-bottom: 12px;
      position: relative; }
      .megaFilterContainer .megaFilterExpanded .resultsGroupContainer:before {
        content: '';
        display: block;
        width: 100%;
        height: 10px;
        position: fixed;
        bottom: 41px;
        left: 0; }
      .megaFilterContainer .megaFilterExpanded .resultsGroupContainer.simpleResults {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 26px 16px 16px 16px;
        padding-bottom: 0; }
      .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsTitle {
        margin-bottom: 4px; }
        .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsTitle span {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600;
          padding-bottom: 2px;
          border-bottom: 1px solid #9d9d9c;
          width: auto;
          display: inline-block; }
      .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsGroup {
        margin-bottom: 12px; }
        .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsGroup:last-child {
          margin-bottom: 0; }
        .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsGroup .resultsContent {
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;
          margin-left: -4px; }
          .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsGroup .resultsContent a {
            box-sizing: border-box;
            padding: 6px 8px;
            color: #212121;
            background-color: #f2f2f3;
            font-family: 'PeridotPE-Bold', sans-serif;
            font-size: 16px;
            line-height: 16px;
            font-weight: 700;
            border: 0.5px inset rgba(33, 33, 33, 0.1);
            border-radius: 16px;
            margin: 4px;
            display: flex;
            align-items: center; }
            .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsGroup .resultsContent a.active {
              color: #ffffff;
              background-color: #212121; }
            .megaFilterContainer .megaFilterExpanded .resultsGroupContainer .resultsGroup .resultsContent a i {
              padding: 0 8px 0 0; }
    .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      z-index: 2;
      background-color: #ffffff;
      padding: 12px 8px;
      box-sizing: border-box; }
      @media only screen and (max-width: 767px) {
        .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch {
          padding: 12px 8px; } }
      .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch .megaFilterInput {
        box-sizing: border-box;
        width: 100%;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #212121;
        display: inline-block;
        background-color: transparent;
        border: 1px solid #212121;
        padding: 8px 40px;
        border-radius: 16px; }
      .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch ::-webkit-input-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch :-moz-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch ::-moz-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch :-ms-input-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch i {
        position: absolute;
        right: 18px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: none;
        line-height: 0; }
        .megaFilterContainer .megaFilterExpanded .megaFilterContentSearch i.icon-lens {
          font-size: 22px;
          left: 18px; }

.renewalsB2BBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 600px;
  padding: 8px 8px 0px 8px; }

.renewalsB2B {
  height: 100%; }

.renewalsB2B .renewalsB2BUpgradeContainer {
  display: flex;
  flex-direction: column;
  padding-bottom: 220px; }

.ddFilterWrapper .ddFilter.renewalsB2BFilter {
  border-radius: unset;
  padding: 16px 0px 0px 0px;
  overflow: visible !important;
  flex-flow: unset; }

.renewalsB2BBox {
  border-radius: 16px; }

.renewalsB2BTermsCheckboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  align-items: flex-start;
  justify-content: center; }

.renewalsB2BCompareButton {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  color: #0e8103;
  margin-bottom: 16px; }

.renewalsB2BRenewCheckbox {
  display: flex;
  align-self: center;
  margin-bottom: 16px; }

.renewalsB2BRenewCheckboxSingle {
  width: 50%;
  align-self: unset;
  justify-content: flex-start; }

.renewalsB2BCardDetails {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  gap: 8px; }

.renewalsB2bBestDeal {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  display: flex;
  align-items: flex-start;
  width: 90px;
  padding: 2px;
  gap: 4px;
  right: -7.333px;
  top: 6px;
  border-radius: 2px 2px 0px 2px;
  background: #e20074;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14); }

.renewalsB2bBestDealCompare {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  display: flex;
  align-items: flex-start;
  width: 90px;
  padding: 2px;
  gap: 4px;
  right: -7.333px;
  top: 40%;
  border-radius: 2px 2px 0px 2px;
  background: #e20074;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14); }

.renewalsB2bCardShadow {
  position: absolute;
  right: 0px;
  bottom: -3px; }

.renewalsB2BFieldWithIcon {
  margin-bottom: 0px; }

.renewalsB2BCarouselCardDetails {
  padding-top: 16px;
  margin-top: auto;
  display: flex;
  flex-direction: column; }

.renewalsB2BCarousel {
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  margin-top: 16px; }

.renewalsB2BCompareOffers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  margin-top: 16px;
  flex-direction: column; }

.renewalsB2BCompareOffersBox {
  width: 100%;
  height: 232px; }

.renewalsB2BCompareCardDetails {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px; }

.renewalsB2BCompareCardNormalDetails {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px; }

.gallery-cell-offers-card.gallery-cell-offers-compare-card {
  height: 100%; }

.renewalsB2bCompareBox {
  height: 100%; }

.renewalsB2BOfferCardPrice {
  padding-top: 8px; }

.renewalsB2BContinueButton {
  display: flex;
  align-self: flex-end;
  gap: 4px;
  margin-top: 32px; }

.renewalsB2BContinueButtonSingle {
  width: 50%;
  align-self: unset;
  justify-content: flex-end; }

.renewalsB2BcardDetailsBold {
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700; }
  .renewalsB2BcardDetailsBold.drawerDetails {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 20px !important;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700; }

.b2bCheckbox {
  display: flex;
  flex-direction: row;
  align-items: center; }

.b2bCheckboxLabel {
  margin-top: 4px; }

.fieldDisabled {
  cursor: default !important; }

.renewalsB2BBodyCompletedTextHeader {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.renewalsB2BcardDetailsLight {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.renewalsB2bProfessionalText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-bottom: 24px; }

.renewalsB2BSelectRenewalMethod {
  display: flex;
  flex-direction: row;
  width: fit-content;
  gap: 8px; }

.b2bRenewalsGiftGroup3 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: nowrap; }

.renewalsB2bCompareTooltip {
  display: flex;
  flex-direction: row;
  gap: 8px; }

.b2bRenewalsExitContainer {
  margin-top: 26px; }

@media only screen and (max-width: 1024px) {
  .renewalsB2bFieldWithIconGroup3Gifts {
    min-width: 280px; }
  .renewalsB2BCarouselBox {
    overflow: hidden !important; }
  .renewalsB2bField3Gifts {
    display: flex;
    overflow: auto;
    gap: 8px;
    width: 100%; }
  .renewalsB2bField2Gifts {
    display: flex;
    flex-direction: column !important;
    border-radius: 16px;
    box-shadow: 0px 0px 2px 0px #00000024;
    gap: 8px;
    width: 100% !important; }
  .b2bRenewalsGiftGroup3 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: auto; }
  .renewalsB2BSelectRenewalMethod {
    width: 100%; }
  .renewalsB2bBodyBox {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important; }
  .gallery-renewals-single {
    margin-bottom: 20px;
    width: 100% !important; }
  .renewalsB2BContinueButtonSingle {
    width: 100% !important; }
  .gallery-cell-renewals {
    overflow: auto !important;
    width: 66% !important;
    height: 100% !important; }
  .gallery-cell-renewals-single {
    width: 100% !important; }
  .renewalsB2bBodyBox {
    padding: 16px; }
  .gallery-cell-renewalsDouble {
    width: 66% !important; }
  .renewalsB2BCarousel {
    overflow: auto; }
  .switchSetting .switchSettingAction.renewalsB2BSwitch {
    align-self: flex-start; } }

@media only screen and (max-width: 480px) {
  .renewalsB2bFieldWithIconGroup3Gifts {
    min-width: 280px; }
  .renewalsB2BCarouselBox {
    overflow: hidden !important; }
  .renewalsB2bField3Gifts {
    display: flex;
    overflow: auto;
    gap: 8px;
    width: 100%; }
  .renewalsB2bField2Gifts {
    display: flex;
    flex-direction: column !important;
    border-radius: 16px;
    box-shadow: 0px 0px 2px 0px #00000024;
    gap: 8px;
    width: 100% !important; }
  .b2bRenewalsGiftGroup3 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    overflow: auto; }
  .renewalsB2BSelectRenewalMethod {
    width: 100%; }
  .renewalsB2bBodyBox {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important; }
  .gallery-renewals-single {
    margin-bottom: 20px;
    width: 100% !important; }
  .renewalsB2BContinueButtonSingle {
    width: 100%; }
  .gallery-cell-renewals {
    overflow: auto !important;
    width: 66% !important;
    height: 100% !important; }
  .gallery-cell-renewals-single {
    width: 100% !important; }
  .renewalsB2bBodyBox {
    padding: 16px; }
  .gallery-cell-renewalsDouble {
    width: 66% !important; }
  .renewalsB2BCarousel {
    overflow: auto; }
  .switchSetting .switchSettingAction.renewalsB2BSwitch {
    align-self: flex-start; } }

.renewalsB2BCardHeading {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700; }

.b2bRenewalsSwitchSettingSubtext {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  display: flex;
  width: 90%;
  margin-left: 32px; }

a.box.renewalsB2BSelected {
  border: 2px solid #e20074 !important; }

.box .renewalsB2BConfirmationHeader {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

.box .renewalsB2BCarouselBox {
  border-radius: 8px;
  overflow: visible;
  padding: 12px;
  height: 100%;
  display: flex; }

.box .fixedConnectionPlanSelect {
  height: 100%;
  display: flex;
  flex-direction: column; }

.box .detailsBox.renewalsB2BCarouselBoxWithDeal {
  padding-top: 32px; }

.box .renewalsB2Method {
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  flex: 1 0 0;
  border-radius: 4px;
  color: #212121;
  border: 1.5px solid #e6e6e6;
  padding: 16px 12px;
  padding-right: 36px; }

.b2bIconWrapper {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center; }

.renewalsB2bDrawer {
  display: flex;
  background-color: #ffffff;
  box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.12);
  position: fixed;
  padding: 16px;
  flex-direction: column;
  border-radius: 16px 16px 0px 0px;
  align-items: flex-start;
  width: 100%;
  bottom: 0; }

.renewalsB2bDrawerContainerNoShadow {
  display: flex;
  background-color: #ffffff;
  box-shadow: unset !important;
  position: fixed;
  padding: 16px;
  flex-direction: column;
  border-radius: 16px 16px 0px 0px;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  bottom: 0; }

.b2bRenewalsExitButton {
  width: 100%; }

.renewalsB2bDrawerNoBorderRadius {
  display: flex;
  background-color: #ffffff;
  position: fixed;
  padding: 16px;
  flex-direction: column;
  border-radius: 0px;
  align-items: flex-start;
  gap: 16px;
  width: 100%; }

.renewalsB2bBodyBox {
  padding: 48px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px; }

.renewalsB2bLoaderShell {
  display: flex;
  width: 100%;
  height: 12px;
  flex: 1 0 0;
  border-radius: 12px;
  background: var(--Grayscale-Light-Mode-2, #e6e6e6); }

.renewalsB2bConnection {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 12px;
  gap: 8px;
  border-radius: 8px;
  width: 100%;
  color: #212121;
  border: 1px solid var(--Grayscale-Light-Mode-2, #e6e6e6); }

.renewalsB2bConnectionActive {
  background: var(--Complementary-Info-Fill, #f4f8fb) !important;
  border: 1px solid var(--Secondary-Light-Mode-Base, #09c) !important; }

.renewalsB2bConnectionInactive {
  border: 1px solid var(--Complementary-Warning, #eabf68) !important;
  background: var(--Complementary-Warning-Fill, #fefcf7) !important; }

.renewalsB2bLoaderContainer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px; }

.renewalsB2bDrawerHeader {
  display: inline-flex;
  width: 100%;
  flex-direction: row; }

.renewalsB2bOpenDrawer {
  margin-left: auto;
  height: 32px; }

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

.renewalsB2bLoaderBar {
  height: 100%;
  background-color: #e20074;
  border-radius: 12px;
  line-height: 30px;
  color: transparent;
  user-select: none; }

.renewalsB2bField2Gifts {
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  box-shadow: 0px 0px 2px 0px #00000024;
  gap: 8px;
  width: 50%; }

.renewalsB2bField3Gifts {
  display: flex;
  flex-direction: row;
  gap: 8px;
  min-width: 200px;
  width: 100%; }

.renewalsB2bField1Gifts {
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  box-shadow: 0px 0px 2px 0px #00000024;
  gap: 8px;
  width: 100%; }

.renewalsB2bFieldWithIconGroup3Gifts {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 2px 0px #00000024;
  width: 100%; }

.renewalsB2bFieldWithIconGroup2Gifts {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 2px 0px #00000024;
  flex-shrink: 0;
  width: 100%; }

.speedUpgrade .fixedConnectionCardIcon {
  padding: 4px 16px;
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  min-width: 80px;
  border-radius: 15px 0 15px 0;
  background-color: #e6e6e6;
  color: unset; }

.b2bRenewalsTooltip {
  position: relative;
  display: inline-block;
  cursor: pointer; }

.b2bRenewalsTooltip::after {
  content: attr(title);
  position: absolute;
  bottom: 150%;
  left: 30%;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  padding: 10px;
  white-space: wrap;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 1000;
  overflow: visible; }

.b2bRenewalsTooltip::before {
  content: '';
  position: absolute;
  bottom: 90%;
  left: 50%;
  transform: rotate(180deg) translateX(50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out; }

.b2bRenewalsTooltip:hover::after,
.b2bRenewalsTooltip:hover::before {
  opacity: 1;
  visibility: visible; }

.renewalsB2BCarouselCardDetailsLight {
  display: flex;
  flex-direction: column;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.b2bMandatoryTextDescription {
  margin-top: 16px;
  padding-bottom: 8px; }

.gallery-renewals {
  margin-bottom: 20px; }

.gallery-renewals-single {
  margin-bottom: 20px;
  width: 50%; }

.gallery-cell-renewals {
  width: 33%;
  margin-right: 8px;
  flex-shrink: 0;
  cursor: pointer; }

.gallery-cell-renewalsDouble {
  width: 50%;
  height: 148px;
  margin-right: 8px;
  flex-shrink: 0;
  cursor: pointer; }

.gallery-cell-renewals-single {
  width: 100%;
  margin-right: 0px;
  flex-shrink: 1; }

.gallery-cell-offers {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  gap: 12px; }

.gallery-cell-offers-card {
  width: 100%;
  height: 200px;
  margin-right: 8px;
  overflow: show;
  cursor: pointer;
  flex-shrink: 0; }

.selected-cell {
  border: 1.5px solid #e20074;
  border-radius: 8px;
  height: 100%; }

.gallery-cell-renewals:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white; }

.flickity-prev-next-button {
  display: none; }

.flickity-page-dots .dot.is-selected {
  background: #e20074; }

.renewalsB2bDrawerContainer {
  position: fixed;
  bottom: 160px;
  left: 0;
  width: 100%;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 100px;
  transition: max-height 0.3s ease-in-out;
  border-radius: 15px; }

.b2bMoreTooltip {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: visible; }

.renewalsB2bDrawerHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 8px 0px;
  cursor: pointer; }

.secondaryButton.renewalsB2BSecondaryButton {
  color: unset;
  border-color: unset; }

.renewalsB2bTermsText {
  color: unset; }

.switchSetting.b2bRenewalsSwitchSetting {
  border-bottom: none; }

.b2bRenewalsSwitchSettingHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.renewalsB2BSwitchSettingFooterDetails {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.b2bRenewalsSwitchSettingBottomAssistive {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.b2bFaqModalBody {
  padding: 8px 24px 0px 24px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px; }

.b2bFaqModalButton {
  padding: 24px; }

.b2bFaqModalText {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 500px;
  overflow: auto; }

.b2bRenewalsSwitchSettingBottomRedirect {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  font-weight: 700; }
  .b2bRenewalsSwitchSettingBottomRedirect .b2bUnderline {
    text-decoration-line: underline !important; }

.b2bRenewalsGiftContainer {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0px 1px 3px 0px #00000033; }

.b2bRenewalsTooltip {
  padding: 8px; }

.b2bRenewalsInput {
  padding: 12px 8px;
  margin-top: 8px;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid #212121;
  background: var(--grayscale-0-white, #ffffff); }

.speedUpgradeHeader.fixedConnectionHeaderBorder.b2bRenewalsHeader {
  border-color: #e20074;
  background-color: #ffffff; }

.b2bRenewalsLabel {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
  padding: 16px 0px 0px 0px;
  margin-bottom: 8px; }

.renewalsB2BBodyPopup {
  padding: 16px 16px 0px 16px; }

.renewalsB2BBodyCompleted {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 24px; }

.renewalsB2BBodyCompletedText {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-content: center; }

.renewalsB2bConnectionStatus {
  display: flex;
  align-items: center;
  margin-left: auto; }

.renewalsB2BSwitchSettingFooter {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px; }

.b2bRenewalsTooltipSpacing {
  margin-left: 8px; }

.renewalsB2BConfirmationHeader {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

.renewalsB2BSwitchSettingFooterTextSpacing {
  display: flex;
  margin-left: auto;
  gap: 58px; }

.b2bRenewalsSwitchSettingDetails {
  display: flex;
  gap: 8px;
  align-items: center; }

.b2bRenewalsSwitchSettingBottom {
  display: flex;
  gap: 16px;
  flex-direction: column;
  padding-left: 32px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.renewalsB2bTotalBucketDrawerContent {
  position: fixed;
  bottom: 72px;
  left: 0;
  width: 100%;
  padding: 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  margin-top: 100px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px; }

.renewalsB2bDrawerContent {
  position: absolute;
  left: 0;
  right: 0;
  background: white;
  z-index: 10;
  padding: 16px;
  height: fit-content;
  overflow: auto;
  border-radius: 16px 16px 0px 0px;
  box-shadow: none; }

.renewalsB2bDrawerContent::before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
  border-radius: 16px 16px 0 0; }

.renewalsB2bDrawerContentContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 150px;
  overflow: auto; }

.renewalsB2bDrawerButtons {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
  align-items: flex-end; }

.renewalsB2bDrawerOfferText {
  align-self: flex-start; }

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

.simDisplayBody {
  background-color: #f2f2f3;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: 0px 0px 16px 16px;
  width: 413px;
  width: 100%; }

.modalContainer.simDisplayModal {
  width: 413px;
  width: 100%; }

.simDisplaySim {
  width: 49px;
  height: 49px; }

.modalTitle.simDisplayTitle {
  padding: 16px; }

.simDisplayInputsGroup {
  background-color: #ffffff;
  padding: 0px 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px; }
  .simDisplayInputsGroup .simDisplayInput:not(:last-child) {
    border-bottom: 1px solid #e6e6e6; }

.simDisplayInput {
  padding: 12px 0px;
  color: unset;
  display: flex;
  flex-direction: column; }
  .simDisplayInput .title {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #666; }

.simDisplaySuccess {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 16px;
  border: 2px solid #2775b2;
  background-color: #f4f8fb;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */ }

.ddFilterWrapper {
  position: relative;
  z-index: 0;
  width: 100%;
  border-radius: 16px;
  background-color: #ffffff; }
  .ddFilterWrapper-multiple {
    z-index: 8; }
  .ddFilterWrapper.active {
    z-index: 7; }
  .ddFilterWrapper .box {
    overflow: visible; }
  .ddFilterWrapper .ddFilter {
    padding: 16px 24px;
    background-color: #ffffff;
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    border-top: 2px solid #e6e6e6;
    border-radius: 0 0 15px 15px; }
    @media only screen and (max-width: 480px) {
      .ddFilterWrapper .ddFilter {
        flex-flow: column; } }
    .ddFilterWrapper .ddFilter-multiple {
      gap: 64px; }
      .ddFilterWrapper .ddFilter-multiple-small {
        gap: 16px;
        border: none; }
      @media only screen and (max-width: 480px) {
        .ddFilterWrapper .ddFilter-multiple {
          gap: 0; } }
    .ddFilterWrapper .ddFilter.ddFilterLargeAccountsShop {
      padding: 0; }
    .ddFilterWrapper .ddFilter.flexColumn {
      flex-flow: column; }
    .ddFilterWrapper .ddFilter.noPadding {
      padding: 0; }
    .ddFilterWrapper .ddFilter.ddSimple {
      padding: 8px;
      background-color: transparent;
      justify-content: center;
      align-items: center;
      border-radius: 0; }
    .ddFilterWrapper .ddFilter.wrapped {
      flex-wrap: wrap; }
    .ddFilterWrapper .ddFilter.transparentBg {
      background-color: transparent;
      border: none; }
    .ddFilterWrapper .ddFilter .ddLabel {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      display: inline-block;
      margin-right: 8px; }
    .ddFilterWrapper .ddFilter .detailsBottom {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      display: block;
      margin: 16px 0 0;
      overflow: hidden;
      position: relative;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%; }
      .ddFilterWrapper .ddFilter .detailsBottom.reverse {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600; }
        .ddFilterWrapper .ddFilter .detailsBottom.reverse span {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400; }
          .ddFilterWrapper .ddFilter .detailsBottom.reverse span.connectionsTotal {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 600; }
      .ddFilterWrapper .ddFilter .detailsBottom.withTooltip {
        padding-right: 26px; }
      .ddFilterWrapper .ddFilter .detailsBottom span {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 600; }
      .ddFilterWrapper .ddFilter .detailsBottom .imgTooltip {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-flex;
        margin: auto;
        width: 16px;
        height: 16px;
        font-family: "BTCosmo-Bold";
        font-size: 12px;
        line-height: 14px;
        color: #212121;
        border: 1px solid #212121;
        padding: 0;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 100%; }
        .ddFilterWrapper .ddFilter .detailsBottom .imgTooltip.withSize {
          width: 24px;
          height: 24px; }
    .ddFilterWrapper .ddFilter .ddFilterContent {
      position: relative;
      display: flex;
      flex-flow: column;
      flex: 1;
      align-items: stretch; }
      .ddFilterWrapper .ddFilter .ddFilterContent.smallFilter {
        max-width: 312px; }
      .ddFilterWrapper .ddFilter .ddFilterContent.largeAccountsShop {
        flex-direction: column;
        align-items: stretch;
        width: 100%; }
      .ddFilterWrapper .ddFilter .ddFilterContent-withInfo {
        display: flex;
        flex-direction: column;
        gap: 8px; }
      @media only screen and (min-width: 1025px) and (max-width: 1230px) {
        .ddFilterWrapper .ddFilter .ddFilterContent {
          flex-flow: column;
          flex: 1;
          align-items: stretch; } }
      @media only screen and (max-width: 767px) {
        .ddFilterWrapper .ddFilter .ddFilterContent {
          flex-flow: column;
          flex: 1;
          align-items: stretch; } }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .ddFilterWrapper .ddFilter .ddFilterContent {
          flex-flow: column;
          flex: 1;
          align-items: stretch; } }
      .ddFilterWrapper .ddFilter .ddFilterContent.largeAccountsBills {
        flex-flow: column;
        flex: 1;
        align-items: stretch; }
      .ddFilterWrapper .ddFilter .ddFilterContent:first-child {
        margin-right: 16px; }
        @media only screen and (max-width: 480px) {
          .ddFilterWrapper .ddFilter .ddFilterContent:first-child {
            margin-right: 0;
            margin-bottom: 16px; } }
        .ddFilterWrapper .ddFilter .ddFilterContent:first-child.noMargin {
          margin: 0; }
      .ddFilterWrapper .ddFilter .ddFilterContent.singleDrop {
        min-width: 170px !important;
        flex: 0 0 auto;
        margin-bottom: 0; }
        @media only screen and (min-width: 1025px) and (max-width: 1230px) {
          .ddFilterWrapper .ddFilter .ddFilterContent.singleDrop span {
            margin-right: 8px;
            margin-bottom: 4px;
            width: auto; } }
        .ddFilterWrapper .ddFilter .ddFilterContent.singleDrop .ddFilterInputContainer .ddFilterInput {
          min-width: 170px; }
      .ddFilterWrapper .ddFilter .ddFilterContent.minWidth-170 {
        min-width: 170px !important; }
        .ddFilterWrapper .ddFilter .ddFilterContent.minWidth-170 .ddFilterInputContainer .ddFilterInput {
          min-width: 170px; }
      .ddFilterWrapper .ddFilter .ddFilterContent span {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        display: inline-block;
        margin-right: 28px;
        margin-bottom: 4px; }
        @media only screen and (min-width: 1025px) and (max-width: 1230px) {
          .ddFilterWrapper .ddFilter .ddFilterContent span {
            margin-right: 0;
            width: 100%; } }
        @media only screen and (max-width: 767px) {
          .ddFilterWrapper .ddFilter .ddFilterContent span {
            margin-right: 0;
            width: 100%; } }
      .ddFilterWrapper .ddFilter .ddFilterContent .input-subTitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
      .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        position: relative;
        cursor: pointer; }
        @media only screen and (min-width: 1025px) and (max-width: 1230px) {
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer {
            width: 100%; } }
        @media only screen and (max-width: 767px) {
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer {
            width: 100%; } }
        .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer.genericWidth {
          min-width: 200px !important; }
          @media only screen and (min-width: 1025px) and (max-width: 1230px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer.genericWidth {
              width: auto; } }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer.genericWidth .ddFilterInput {
            min-width: 200px; }
        .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .imgTooltip {
          position: absolute;
          left: inherit;
          right: -40px;
          top: 0; }
          @media only screen and (max-width: 767px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .imgTooltip {
              right: 8px;
              top: -26px; } }
        .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
          box-sizing: border-box;
          width: 100%;
          cursor: pointer;
          color: #212121;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          display: inline-block;
          background-color: transparent;
          border: 1px solid #212121;
          border-radius: 16px;
          padding: 12px 8px; }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
              max-width: 100%; } }
          @media only screen and (min-width: 1025px) and (max-width: 1230px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
              max-width: 100%; } }
          @media only screen and (max-width: 767px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput {
              max-width: 100%; } }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.opened {
            border-radius: 16px 16px 0 0;
            border-bottom: none; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput ::-webkit-input-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput :-moz-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput ::-moz-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput :-ms-input-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput:not(.jsDropdownInput) {
            padding: 12px 40px; }
          @media only screen and (min-width: 1230px) and (max-width: 1280px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.xlargeInput {
              max-width: 100%; } }
          @media only screen and (min-width: 1230px) and (max-width: 1280px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.fullInput {
              max-width: 100%; } }
          @media only screen and (min-width: 1025px) and (max-width: 1230px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.smallInput {
              max-width: 100%; } }
          @media only screen and (max-width: 767px) {
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.smallInput {
              max-width: 100%; } }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.simpleInput {
            text-align: center; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer .ddFilterInput.textInput {
            cursor: text; }
        .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer ::-webkit-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer :-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer ::-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer :-ms-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .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; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.icon-arrowDown {
            font-size: 18px;
            -webkit-transform: scaleY(1);
            -moz-transform: scaleY(1);
            transform: scaleY(1); }
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.icon-arrowDown.opened {
              -webkit-transform: scaleY(-1);
              -moz-transform: scaleY(-1);
              transform: scaleY(-1); }
            .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.icon-arrowDown.withPointerEvents {
              pointer-events: initial; }
          .ddFilterWrapper .ddFilter .ddFilterContent .ddFilterInputContainer i.icon-lens {
            left: 8px;
            font-size: 24px; }
  .ddFilterWrapper .ddFilterExpanded {
    background-color: #ffffff;
    border: 1px solid #212121;
    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 16px 16px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .ddFilterWrapper .ddFilterExpanded-searchAtTop {
      padding-bottom: 16px; }
    * .ddFilterWrapper .ddFilterExpanded.bigFilter {
      min-width: 280px; }
      @media only screen and (max-width: 767px) {
        * .ddFilterWrapper .ddFilterExpanded.bigFilter {
          min-width: unset;
          max-width: 110%; } }
      * .ddFilterWrapper .ddFilterExpanded.bigFilter.full {
        max-width: 600px; }
    * .ddFilterWrapper .ddFilterExpanded.mediumFilter {
      max-width: 100%; }
    .ddFilterWrapper .ddFilterExpanded.withMinWidth-240 {
      min-width: 100%; }
    .ddFilterWrapper .ddFilterExpanded.withMinWidth-290 {
      min-width: 100%; }
    .ddFilterWrapper .ddFilterExpanded.expandedSimple {
      min-width: 0;
      width: 100%;
      left: 0; }
      .ddFilterWrapper .ddFilterExpanded.expandedSimple .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a {
        justify-content: center;
        padding: 12px 8px; }
    .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper {
      max-height: 200px;
      overflow-y: auto;
      margin: 0;
      position: relative; }
      .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper.withoutSearch:after {
        display: none; }
      .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper-searchAtTop {
        padding-top: 8px; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper-searchAtTop:after {
          display: none; }
      .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper.simpleResults {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 26px 16px 16px 16px;
        padding-bottom: 0; }
      .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterNoResults {
        padding: 12px 16px;
        color: #212121;
        display: none; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterNoResults.visible {
          display: block; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterNoResults-searchAtTop {
          padding-bottom: 0; }
      .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup {
        margin-bottom: 12px; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup:last-child {
          margin-bottom: 0; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle {
          margin: 0 8px 4px;
          border-bottom: 1px solid #e6e6e6; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle.largeLabelTitle {
            border-bottom: none; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle.largeLabelTitle span {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle span {
            font-family: 'PeridotPE-SemiBold', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            padding-bottom: 2px;
            width: auto;
            display: inline-block; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle span.boldFont {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsTitle span.small {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            color: #212121;
            margin: 0;
            font-size: 13px; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent {
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;
          overflow-x: hidden; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent.hidden {
            display: none; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            box-sizing: border-box;
            padding: 12px 8px;
            color: #212121;
            display: flex;
            align-items: center;
            width: 100%;
            transition: 0.2s ease-in-out; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a div {
              display: flex; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a.largeLabel {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600;
              color: #212121;
              display: block !important;
              padding-left: 8px; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a:hover, .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a.active {
              color: #ffffff;
              background-color: #00a5e3; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a i {
              margin: 0 8px 0 0; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent a img {
              height: 16px;
              min-width: 16px;
              margin: 0 8px 0 0; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a {
            padding: 0px 16px; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a:hover, .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a.active {
              color: #ffffff;
              background-color: #00a5e3; }
            .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a .md-checkbox {
              margin: 4px 0;
              width: 100%; }
              .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContent-multiple a .md-checkbox label {
                width: 100%;
                color: #212121;
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon.largeResults a div {
          width: 100%; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon.largeResults a div span.small {
            max-width: 100%; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon a {
          flex-direction: column;
          align-items: flex-start; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithIcon a span.small {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            margin-left: 24px;
            max-width: 260px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon.largeResults a div {
          width: 100%; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon.largeResults a div span.small {
            max-width: 100%; }
        .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon a {
          flex-direction: column;
          align-items: flex-start; }
          .ddFilterWrapper .ddFilterExpanded .ddFilterResultsWrapper .ddFilterResultsGroup .ddFilterResultsContentWithoutIcon a span.small {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            max-width: 260px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden; }
  .ddFilterWrapper .ddFilterContentSearch {
    position: relative;
    display: flex;
    margin-right: 0;
    padding: 12px 8px;
    z-index: 2;
    box-sizing: border-box; }
    .ddFilterWrapper .ddFilterContentSearch-iconLeft i {
      left: 8px; }
      .ddFilterWrapper .ddFilterContentSearch-iconLeft i.closeIcon {
        left: 0; }
    .ddFilterWrapper .ddFilterContentSearch-searchAtTop {
      margin-left: 8px;
      margin-right: 24px;
      border: none; }
    .ddFilterWrapper .ddFilterContentSearch .ddFilterInput {
      box-sizing: border-box;
      width: 100%;
      cursor: pointer;
      color: #212121;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      display: inline-block;
      background-color: transparent;
      border: 1px solid #212121;
      border-radius: 16px;
      padding: 8px 40px; }
      .ddFilterWrapper .ddFilterContentSearch .ddFilterInput-iconLeft {
        padding-left: 20px; }
    .ddFilterWrapper .ddFilterContentSearch i {
      position: absolute;
      right: 8px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 1;
      line-height: 0; }
      .ddFilterWrapper .ddFilterContentSearch i.cursorPointer {
        cursor: pointer; }
      .ddFilterWrapper .ddFilterContentSearch i.hidden {
        display: none; }
      .ddFilterWrapper .ddFilterContentSearch i.icon-close {
        cursor: pointer; }
      .ddFilterWrapper .ddFilterContentSearch i.closeIcon {
        right: 0;
        top: 50%; }
        .ddFilterWrapper .ddFilterContentSearch i.closeIcon:before {
          color: #212121 !important; }
      .ddFilterWrapper .ddFilterContentSearch i.icon-lens {
        left: 16px; }

.searchWithSelectAll {
  max-width: 90%;
  margin: 30px auto 0;
  display: block; }
  .searchWithSelectAll .selectAll {
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #212121; }
  .searchWithSelectAll .md-checkbox input {
    display: none; }
    .searchWithSelectAll .md-checkbox input.disabled {
      cursor: not-allowed;
      pointer-events: none; }

.mainGiftBox {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  background-color: #00a5e3;
  background-repeat: no-repeat;
  padding: 10px 12px;
  border-radius: 16px; }
  .mainGiftBox .mainGiftboxHeader {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    width: 100%; }
    .mainGiftBox .mainGiftboxHeader .mainGiftBoxTitle {
      display: flex;
      align-items: center;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      text-transform: uppercase;
      color: #ffffff; }
      .mainGiftBox .mainGiftboxHeader .mainGiftBoxTitle img {
        display: flex;
        width: 16px;
        height: 16px;
        margin-right: 6px;
        object-fit: contain;
        object-position: center; }
    .mainGiftBox .mainGiftboxHeader .mainGiftBoxClose {
      margin-left: auto;
      width: 24px;
      height: 24px;
      display: flex; }
      .mainGiftBox .mainGiftboxHeader .mainGiftBoxClose img {
        width: 100%;
        height: 100%;
        padding: 6px;
        object-fit: contain;
        object-position: center; }
  .mainGiftBox .mainGiftBoxBody {
    display: flex;
    align-items: flex-start;
    padding-right: 32px; }
    .mainGiftBox .mainGiftBoxBody .flexColumn {
      width: 100%; }
    .mainGiftBox .mainGiftBoxBody img {
      width: 48px;
      height: auto;
      display: block;
      margin-right: 10px; }
    .mainGiftBox .mainGiftBoxBody .content {
      color: #ffffff;
      display: block;
      margin-bottom: 6px;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
    .mainGiftBox .mainGiftBoxBody .whiteLink {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      color: #ffffff !important;
      background: #0e8103;
      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;
      max-width: 200px; }
      .mainGiftBox .mainGiftBoxBody .whiteLink:hover {
        background-color: #0e8103;
        opacity: 0.85; }
      .mainGiftBox .mainGiftBoxBody .whiteLink:visited {
        color: #0e8103;
        border-color: #0e8103; }
      .mainGiftBox .mainGiftBoxBody .whiteLink: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); }
      .mainGiftBox .mainGiftBoxBody .whiteLink.disabled {
        background-color: #848484;
        color: #ffffff;
        cursor: not-allowed; }

.popUp {
  position: fixed;
  z-index: 3000001;
  left: 50%;
  top: 50%;
  width: 100%;
  max-width: 405px;
  display: none;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 16px; }
  @media only screen and (max-width: 767px) {
    .popUp {
      max-width: 320px !important;
      top: 0;
      overflow-y: auto;
      height: 100vh;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      transform: translate(-50%, 0); } }
  .popUp .modalDetails.firstElement {
    border-radius: 0 0 16px 16px;
    max-height: 2000px; }
  .popUp.successGiftPopup {
    max-width: 432px; }
  .popUp.open {
    display: block; }
  .popUp .giftUsers {
    height: auto;
    max-height: 220px;
    overflow-y: hidden;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; }
    .popUp .giftUsers.withSearch {
      max-height: 250px; }
    .popUp .giftUsers.active {
      max-height: 490px;
      overflow-y: auto;
      margin-bottom: 8px; }
    .popUp .giftUsers .userGroupLabel {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      color: #212121;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      margin-top: 24px; }
      .popUp .giftUsers .userGroupLabel span {
        margin-left: 4px;
        display: flex;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
    .popUp .giftUsers .groupedUsers {
      padding: 6px;
      border: 1px solid #e6e6e6;
      border-radius: 16px; }
      .popUp .giftUsers .groupedUsers .userGroupTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        color: #212121;
        display: block;
        margin-bottom: 16px; }
      .popUp .giftUsers .groupedUsers .md-radio {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
    .popUp .giftUsers .giftUsersSearch {
      display: flex;
      align-items: center;
      position: relative; }
      .popUp .giftUsers .giftUsersSearch .giftUsersInput {
        box-sizing: border-box;
        width: 100%;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #212121;
        display: inline-block;
        background-color: transparent;
        border-radius: 16px;
        padding: 8px 40px;
        border: 1px solid #212121; }
      .popUp .giftUsers .giftUsersSearch ::-webkit-input-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .popUp .giftUsers .giftUsersSearch :-moz-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .popUp .giftUsers .giftUsersSearch ::-moz-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .popUp .giftUsers .giftUsersSearch :-ms-input-placeholder {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #9d9d9c; }
      .popUp .giftUsers .giftUsersSearch i {
        font-size: 18px;
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 1;
        pointer-events: none;
        line-height: 0;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        transform: translateY(-50%); }
        .popUp .giftUsers .giftUsersSearch i.closeUsersSearch {
          right: 8px;
          font-size: 24px;
          pointer-events: all;
          z-index: 20;
          cursor: pointer; }
        .popUp .giftUsers .giftUsersSearch i.icon-lens {
          font-size: 24px;
          left: 8px; }
  .popUp .giftUsersToggleContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; }
    .popUp .giftUsersToggleContainer:before {
      content: '';
      position: absolute;
      left: -24px;
      top: 0;
      width: calc(100% + 48px);
      height: 2px;
      display: block;
      background-color: #e6e6e6; }
    .popUp .giftUsersToggleContainer .toggleGiftUsers {
      padding: 12px 8px;
      color: #212121;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 700;
      width: "unset";
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16px;
      margin: 8px 0 0;
      position: relative; }
      .popUp .giftUsersToggleContainer .toggleGiftUsers:hover {
        color: #4d4d4d;
        opacity: 0.85; }
      .popUp .giftUsersToggleContainer .toggleGiftUsers: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); }
      .popUp .giftUsersToggleContainer .toggleGiftUsers-notVisible {
        visibility: hidden; }
      .popUp .giftUsersToggleContainer .toggleGiftUsers.hidden {
        display: none; }
      .popUp .giftUsersToggleContainer .toggleGiftUsers.inline {
        display: inline-block;
        width: auto; }
      .popUp .giftUsersToggleContainer .toggleGiftUsers.hidden {
        display: none !important; }
      .popUp .giftUsersToggleContainer .toggleGiftUsers.arrowUp i {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }
      .popUp .giftUsersToggleContainer .toggleGiftUsers i {
        font-size: 18px;
        position: relative;
        left: 10px;
        top: 2px;
        display: inline-block;
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        transform: scaleY(1); }

.backOpacity {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(55, 71, 79, 0.3) !important;
  display: none;
  left: 0;
  top: 0;
  z-index: 3000000; }
  .backOpacity.active {
    display: block; }

.notificationWithGift {
  cursor: pointer; }

.emptyState {
  display: flex;
  flex-direction: column;
  padding: 16px; }
  @media only screen and (max-width: 767px) {
    .emptyState {
      padding: 0; } }
  .emptyState .emptyStateImage {
    display: block;
    margin-bottom: 20px; }
    .emptyState .emptyStateImage img {
      width: 48px;
      height: 48px;
      object-fit: contain;
      object-position: center;
      display: block;
      margin: auto; }
  .emptyState .emptyStateTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    text-align: center; }
  .emptyState .emptyStateContent,
  .emptyState .emptyStateContent p {
    margin: 0;
    display: block;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-align: center; }

.offersContainer {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  background-color: #e6e6e6;
  padding: 18px 32px 16px 16px;
  border-radius: 16px; }
  .offersContainer .offersIntro {
    display: flex;
    flex-direction: column; }
    .offersContainer .offersIntro .offersIntroTitle {
      display: block;
      margin-bottom: 14px;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      color: #212121; }
    .offersContainer .offersIntro .offersIntroBox {
      display: flex;
      flex-direction: column;
      padding: 16px;
      background-color: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6; }
      .offersContainer .offersIntro .offersIntroBox .offersIntroBoxTitle {
        display: block;
        margin-bottom: 4px;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .offersContainer .offersIntro .offersIntroBox .offersIntroBoxList {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0; }
        .offersContainer .offersIntro .offersIntroBox .offersIntroBoxList li {
          display: flex;
          align-items: flex-start;
          padding: 16px 0;
          border-bottom: 1px solid #e6e6e6; }
          .offersContainer .offersIntro .offersIntroBox .offersIntroBoxList li:last-child {
            border: none; }
          .offersContainer .offersIntro .offersIntroBox .offersIntroBoxList li img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            object-position: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 4px; }
          .offersContainer .offersIntro .offersIntroBox .offersIntroBoxList li span {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }

.offersAccordion {
  display: flex;
  flex-direction: column;
  padding-left: 16px; }
  @media only screen and (max-width: 1024px) {
    .offersAccordion {
      padding-left: 0; } }
  .offersAccordion .offersAccordionGroup {
    display: flex;
    flex-direction: column;
    margin-top: 24px; }
    @media only screen and (max-width: 1024px) {
      .offersAccordion .offersAccordionGroup:first-child {
        margin-top: 48px; } }
    .offersAccordion .offersAccordionGroup .offersAccordionGroupTitle {
      display: flex;
      align-items: center;
      cursor: pointer;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
      .offersAccordion .offersAccordionGroup .offersAccordionGroupTitle.active .offersAccordionToggle i {
        -webkit-transform: scaleY(-1);
        -moz-transform: scaleY(-1);
        transform: scaleY(-1); }
      .offersAccordion .offersAccordionGroup .offersAccordionGroupTitle .offersAccordionToggle {
        margin-left: auto;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center; }
        .offersAccordion .offersAccordionGroup .offersAccordionGroupTitle .offersAccordionToggle i {
          font-size: 24px;
          line-height: 24px;
          -webkit-transform: scaleY(1);
          -moz-transform: scaleY(1);
          transform: scaleY(1); }
    .offersAccordion .offersAccordionGroup .offersAccordionGroupContent {
      display: none; }
      .offersAccordion .offersAccordionGroup .offersAccordionGroupContent.active {
        display: block; }
      .offersAccordion .offersAccordionGroup .offersAccordionGroupContent .renewOffer {
        margin-top: 16px; }
        .offersAccordion .offersAccordionGroup .offersAccordionGroupContent .renewOffer.active {
          z-index: 4; }

.p2pAssetsSelection {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
  padding-left: 8px;
  max-width: 375px; }
  .p2pAssetsSelection .p2pAssetsTitle {
    font-size: 14px;
    line-height: 16px;
    display: block; }
  .p2pAssetsSelection .p2pAddonsList {
    display: flex;
    flex-direction: column; }
    .p2pAssetsSelection .p2pAddonsList span {
      margin: 8px 0 0;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .p2pAssetsSelection .p2pAddonsList .p2pAddonCheckbox label {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }

.p2pOffers-imageOne {
  width: 20px;
  margin-bottom: -6px;
  margin-top: 6px;
  margin-left: 6px; }

.p2pOffers-imageOneActiveUser {
  width: 20px;
  margin-bottom: -6px;
  margin-top: 6px;
  margin-left: 10px; }

.upload-area {
  margin-top: 32px;
  margin-bottom: 16px; }
  .upload-area .dottedBox {
    width: 100%;
    max-width: 344px;
    height: 168px;
    margin: 0 auto 8px auto;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: 16px; }
    .upload-area .dottedBox.auto {
      height: auto;
      overflow: visible; }
    .upload-area .dottedBox.large {
      width: 100%;
      max-width: 532px;
      height: 420px;
      overflow-y: auto; }
      .upload-area .dottedBox.large iframe {
        width: 100%;
        height: 100%; }
    .upload-area .dottedBox.withPhotoSlider .reviewShotImageContainer {
      width: 100%;
      background-color: #848484;
      position: relative;
      height: 205px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px; }
      .upload-area .dottedBox.withPhotoSlider .reviewShotImageContainer .reviewShotImage {
        width: 154px;
        height: 180px;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 3;
        overflow: hidden;
        object-fit: cover;
        object-position: center;
        border-radius: 100%;
        -webkit-transform: translate(-50%, -50%) scale(-1, 1);
        -moz-transform: translate(-50%, -50%) scale(-1, 1);
        transform: translate(-50%, -50%) scale(-1, 1); }
    .upload-area .dottedBox .boxSteps {
      position: absolute;
      z-index: 2;
      right: 12px;
      top: 12px;
      background-color: rgba(61, 82, 101, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 12px;
      line-height: 12px;
      min-width: 40px;
      height: 24px;
      border-radius: 4px; }
      .upload-area .dottedBox .boxSteps span {
        color: #ffffff;
        font-size: 12px;
        line-height: 12px; }
    .upload-area .dottedBox img {
      width: 100%;
      height: auto; }
    .upload-area .dottedBox .slick-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: -22px; }
      .upload-area .dottedBox .slick-dots li {
        display: block;
        margin: 0 4px;
        height: 8px;
        width: 8px;
        background-color: #ffffff;
        border: none;
        -webkit-transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        transition: all 0.2s ease;
        border-radius: 100%; }
        .upload-area .dottedBox .slick-dots li.slick-active {
          width: 12px;
          height: 12px;
          background-color: #0ea600; }
        .upload-area .dottedBox .slick-dots li button {
          display: none; }
  .upload-area .photoBox {
    width: 100%;
    max-width: 600px;
    background-color: #9d9d9c;
    position: relative;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    border-radius: 16px; }
    .upload-area .photoBox .photoBoxContainer {
      width: 222px;
      height: 260px;
      display: block;
      background-color: #212121;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 0;
      overflow: hidden;
      border-radius: 100%;
      -webkit-transform: translate(-50%, -50%) scale(-1, 1) !important;
      -moz-transform: translate(-50%, -50%) scale(-1, 1) !important;
      transform: translate(-50%, -50%) scale(-1, 1) !important; }
    .upload-area .photoBox .imageContainer {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      background-color: #212121;
      z-index: 1;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
    .upload-area .photoBox .imageContainerShot {
      display: none; }
    .upload-area .photoBox .imageContainerShotImage {
      width: 380px;
      height: 285px;
      display: none;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 3;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
  .upload-area div.upload-area__text {
    width: 344px;
    font-size: 14px;
    line-height: 16px;
    margin: 0 auto; }

.multipleUsers.withP2p {
  padding-left: 8px; }
  .multipleUsers.withP2p .md-radio label {
    padding-right: 0; }

.collapse-button {
  color: #212121;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 1px solid #212121;
  padding-bottom: 12px;
  margin-bottom: 12px;
  position: relative; }
  .collapse-button::after {
    font-family: 'icomoon';
    font-size: 18px;
    content: '\e905';
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    padding: 0.5rem 0.2rem; }
  .collapse-button.is-active::after {
    transform: scale(-1); }
  .collapse-button.withData {
    display: flex;
    flex-direction: column;
    padding-bottom: 0; }
    .collapse-button.withData span {
      padding: 0px 30px 8px 0;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      opacity: 0.6;
      display: block; }

.collapse {
  padding-bottom: 16px; }

.disclaimer {
  display: flex;
  align-items: center; }
  .disclaimer *:first-child {
    margin-right: 0.6rem; }

.loaderPopupContainer {
  display: none;
  width: 100%;
  height: 100%;
  z-index: 9999999999;
  position: fixed;
  left: 0;
  top: 0; }
  .loaderPopupContainer .loaderPopup {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(55, 71, 79, 0.3) !important; }
    .loaderPopupContainer .loaderPopup .loaderPopupContent {
      display: flex;
      flex-direction: column;
      padding: 48px;
      background-color: #ffffff;
      width: 100%;
      max-width: 600px;
      border-radius: 4px; }
      @media only screen and (max-width: 767px) {
        .loaderPopupContainer .loaderPopup .loaderPopupContent {
          max-width: 300px;
          padding: 32px 16px; } }
      .loaderPopupContainer .loaderPopup .loaderPopupContent .title {
        display: block;
        text-align: center;
        margin-bottom: 8px;
        color: #212121;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600; }
      .loaderPopupContainer .loaderPopup .loaderPopupContent p {
        display: block;
        margin: 0;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #212121;
        text-align: center; }
      .loaderPopupContainer .loaderPopup .loaderPopupContent .loaderDots {
        display: flex;
        margin-top: 32px;
        position: relative;
        align-items: center;
        justify-content: center; }
        .loaderPopupContainer .loaderPopup .loaderPopupContent .loaderDots .loaderDot {
          display: block;
          width: 12px;
          height: 12px;
          margin: 0 8px;
          background-color: #f2f2f3;
          border-radius: 100%; }
        .loaderPopupContainer .loaderPopup .loaderPopupContent .loaderDots .pulse {
          will-change: background-color;
          -webkit-animation: pulse 1.25s infinite ease;
          animation: pulse 1.25s infinite ease; }
          .loaderPopupContainer .loaderPopup .loaderPopupContent .loaderDots .pulse.pulseOne {
            -webkit-animation-delay: 250ms;
            animation-delay: 250ms; }
          .loaderPopupContainer .loaderPopup .loaderPopupContent .loaderDots .pulse.pulseTwo {
            -webkit-animation-delay: 500ms;
            animation-delay: 500ms; }
          .loaderPopupContainer .loaderPopup .loaderPopupContent .loaderDots .pulse.pulseThree {
            -webkit-animation-delay: 750ms;
            animation-delay: 750ms; }
          .loaderPopupContainer .loaderPopup .loaderPopupContent .loaderDots .pulse.pulseFour {
            -webkit-animation-delay: 1000ms;
            animation-delay: 1000ms; }

@-webkit-keyframes pulse {
  0% {
    background-color: #f2f2f3; }
  50% {
    background-color: #0ea600; }
  100% {
    background-color: #f2f2f3; } }

@keyframes pulse {
  0% {
    background-color: #f2f2f3; }
  50% {
    background-color: #0ea600; }
  100% {
    background-color: #f2f2f3; } }

.xmasOffersContainer {
  display: flex;
  flex-direction: column; }
  .xmasOffersContainer .xmasOfferBox {
    display: block;
    margin-bottom: 8px;
    background-color: #ffffff;
    overflow: hidden;
    border-radius: 16px; }
    .xmasOffersContainer .xmasOfferBox:last-child {
      margin-bottom: 0; }
    .xmasOffersContainer .xmasOfferBox.disabled {
      padding: 2px;
      background: #00a5e3; }
    .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent {
      display: flex;
      flex-direction: column;
      position: relative;
      padding: 12px;
      background-color: #ffffff;
      width: 100%;
      height: 168px;
      overflow: hidden;
      border-radius: 16px; }
      @media only screen and (max-width: 767px) {
        .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent {
          height: 126px; } }
      .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: right top;
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        border-radius: 16px; }
        @media only screen and (max-width: 767px) {
          .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent img {
            object-fit: contain; } }
      .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent .xmasIndication {
        display: flex;
        align-items: center;
        height: 35px;
        padding: 6px 8px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        background-color: #ffffff;
        border-radius: 16px; }
        .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent .xmasIndication img {
          width: 24px;
          height: 24px;
          object-fit: contain;
          object-position: center center;
          display: block;
          margin-right: 6px;
          position: relative; }
        .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent .xmasIndication span {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 14px;
          line-height: 16px;
          font-weight: 600; }
      .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent .buttonOuter {
        margin-top: auto;
        position: relative;
        z-index: 1; }
        @media only screen and (max-width: 767px) {
          .xmasOffersContainer .xmasOfferBox .xmasOfferBoxContent .buttonOuter {
            bottom: -6px; } }

.assetsSearchContainer {
  display: flex;
  flex-direction: column;
  max-height: 340px;
  overflow-y: auto;
  padding: 0 16px 8px; }
  .assetsSearchContainer .assetsSearchGroup {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px; }
    .assetsSearchContainer .assetsSearchGroup:last-child {
      margin-bottom: 0; }
    .assetsSearchContainer .assetsSearchGroup .assetsSearchGroupTitle {
      display: block;
      margin-bottom: 4px; }
      .assetsSearchContainer .assetsSearchGroup .assetsSearchGroupTitle span {
        display: inline-block;
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        padding-right: 12px;
        padding-bottom: 2px;
        border-bottom: 1px solid #9d9d9c; }
    .assetsSearchContainer .assetsSearchGroup .paymentDetails.chooseOption {
      padding: 0 8px; }
    .assetsSearchContainer .assetsSearchGroup .paymentDetails .paymentDetailsCol {
      padding: 8px 0 !important; }
      .assetsSearchContainer .assetsSearchGroup .paymentDetails .paymentDetailsCol span:not(.smallText) {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 13px;
        line-height: 16px;
        font-weight: 600;
        margin-bottom: 2px; }
        .assetsSearchContainer .assetsSearchGroup .paymentDetails .paymentDetailsCol span:not(.smallText) strong {
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 700; }

.assetsSearchInputContainer,
.assetsSearchInputWrapper {
  position: relative;
  padding: 8px 16px;
  background-color: #ffffff;
  border-top: 2px solid #e6e6e6;
  border-radius: 0 0 16px 16px; }
  .assetsSearchInputContainer .assetsSearchInputBox,
  .assetsSearchInputWrapper .assetsSearchInputBox {
    position: relative; }
  .assetsSearchInputContainer .assetsSearchInput,
  .assetsSearchInputWrapper .assetsSearchInput {
    box-sizing: border-box;
    width: 100%;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #212121;
    border-radius: 16px;
    border: 1px solid #212121;
    padding: 8px 40px;
    display: inline-block;
    background-color: transparent; }
  .assetsSearchInputContainer ::-webkit-input-placeholder,
  .assetsSearchInputWrapper ::-webkit-input-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .assetsSearchInputContainer :-moz-placeholder,
  .assetsSearchInputWrapper :-moz-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .assetsSearchInputContainer ::-moz-placeholder,
  .assetsSearchInputWrapper ::-moz-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .assetsSearchInputContainer :-ms-input-placeholder,
  .assetsSearchInputWrapper :-ms-input-placeholder {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #9d9d9c; }
  .assetsSearchInputContainer i,
  .assetsSearchInputWrapper i {
    position: absolute;
    right: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%) scaleY(1) !important;
    -moz-transform: translateY(-50%) scaleY(1) !important;
    transform: translateY(-50%) scaleY(1) !important;
    z-index: 1;
    pointer-events: none;
    line-height: 0;
    color: #212121 !important; }
    .assetsSearchInputContainer i.icon-lens,
    .assetsSearchInputWrapper i.icon-lens {
      left: 8px;
      font-size: 24px; }
    .assetsSearchInputContainer i.icon-close,
    .assetsSearchInputWrapper i.icon-close {
      pointer-events: all; }

.selectionModal-modalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 420px; }
  @media only screen and (max-width: 767px) {
    .selectionModal-modalContainer {
      width: 316px; } }

.selectAssetsContainer {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 16px;
  gap: 24px; }
  .selectAssetsContainer .listAssetsContainer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 460px;
    overflow-y: auto; }
    .selectAssetsContainer .listAssetsContainer .assetsGroup {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-self: stretch; }
      .selectAssetsContainer .listAssetsContainer .assetsGroup:last-child {
        margin-bottom: 0; }
      .selectAssetsContainer .listAssetsContainer .assetsGroup .assetsGroupTitle {
        display: flex;
        gap: 8px; }
        .selectAssetsContainer .listAssetsContainer .assetsGroup .assetsGroupTitle span {
          display: inline-block;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          align-self: stretch; }
        .selectAssetsContainer .listAssetsContainer .assetsGroup .assetsGroupTitle .taxIdentificationNumber {
          display: inline-block;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          align-self: stretch; }
      .selectAssetsContainer .listAssetsContainer .assetsGroup .paymentDetails:not(:empty).chooseOption {
        padding: 16px;
        border-radius: 16px;
        border: 1px solid #e6e6e6; }
      .selectAssetsContainer .listAssetsContainer .assetsGroup .paymentDetails:not(:empty) .paymentDetailsCol {
        padding: 12px 16px !important;
        border-bottom: 0px; }
        .selectAssetsContainer .listAssetsContainer .assetsGroup .paymentDetails:not(:empty) .paymentDetailsCol:not(:first-child) {
          border-top: 1px solid #e6e6e6; }
        .selectAssetsContainer .listAssetsContainer .assetsGroup .paymentDetails:not(:empty) .paymentDetailsCol .connectionText {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 13px;
          line-height: 16px;
          font-weight: 600;
          margin-bottom: 2px; }
        .selectAssetsContainer .listAssetsContainer .assetsGroup .paymentDetails:not(:empty) .paymentDetailsCol span.descriptionText {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          color: #848484; }
  .selectAssetsContainer .searchAssetsContainer,
  .selectAssetsContainer .searchAssetsBox {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    position: relative;
    margin-top: 24px; }
    .selectAssetsContainer .searchAssetsContainer .searchAssets,
    .selectAssetsContainer .searchAssetsBox .searchAssets {
      box-sizing: border-box;
      width: 100%;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #212121;
      border-radius: 16px;
      border: 1px solid #212121;
      padding: 8px 40px;
      display: inline-block;
      background-color: transparent; }
    .selectAssetsContainer .searchAssetsContainer ::-webkit-input-placeholder,
    .selectAssetsContainer .searchAssetsBox ::-webkit-input-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .selectAssetsContainer .searchAssetsContainer :-moz-placeholder,
    .selectAssetsContainer .searchAssetsBox :-moz-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .selectAssetsContainer .searchAssetsContainer ::-moz-placeholder,
    .selectAssetsContainer .searchAssetsBox ::-moz-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .selectAssetsContainer .searchAssetsContainer :-ms-input-placeholder,
    .selectAssetsContainer .searchAssetsBox :-ms-input-placeholder {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      color: #9d9d9c; }
    .selectAssetsContainer .searchAssetsContainer i,
    .selectAssetsContainer .searchAssetsBox i {
      position: absolute;
      right: 8px;
      -webkit-transform: translateY(-50%) scaleY(1) !important;
      -moz-transform: translateY(-50%) scaleY(1) !important;
      transform: translateY(-50%) scaleY(1) !important;
      z-index: 1;
      pointer-events: none;
      line-height: 0;
      color: #212121 !important; }
      .selectAssetsContainer .searchAssetsContainer i.icon-lens,
      .selectAssetsContainer .searchAssetsBox i.icon-lens {
        left: 8px;
        font-size: 24px; }
      .selectAssetsContainer .searchAssetsContainer i.icon-close,
      .selectAssetsContainer .searchAssetsBox i.icon-close {
        pointer-events: all; }

.xmasGiftSelectionModalBody {
  display: flex;
  flex-flow: column;
  gap: 24px;
  padding: 24px; }
  .xmasGiftSelectionModalBody .xmasGiftSelectionText {
    padding-bottom: 8px; }
  .xmasGiftSelectionModalBody .xmasGiftSelectionList {
    display: flex;
    flex-flow: column;
    gap: 8px; }
    .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem {
      display: flex;
      overflow: hidden;
      border-radius: 16px;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
      position: relative; }
      .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem:hover {
        cursor: pointer; }
      .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem.disabled {
        cursor: not-allowed;
        pointer-events: none;
        color: #848484; }
        .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem.disabled:before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 140px;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5); }
      .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem .xmas-card-img {
        width: 140px;
        height: 92px;
        border-radius: 16px 0 0 16px; }
      .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem .xmasGiftSelectionListItemText {
        display: flex;
        flex: 1;
        flex-flow: column;
        justify-content: center;
        gap: 8px;
        padding: 8px; }
        .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem .xmasGiftSelectionListItemText .xmasGiftSelectionListItemTextTitle {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700; }
        .xmasGiftSelectionModalBody .xmasGiftSelectionList .xmasGiftSelectionListItem .xmasGiftSelectionListItemText .xmasGiftSelectionListItemTextSubtitle {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400; }

.xmasGiftModalBody {
  display: flex;
  flex-flow: column; }
  .xmasGiftModalBody .flyingTextContainer {
    margin-bottom: -20px; }
  .xmasGiftModalBody .xmasGiftModalBodyMainSection {
    display: flex;
    flex-flow: column;
    gap: 32px;
    padding: 16px 24px 24px; }
    .xmasGiftModalBody .xmasGiftModalBodyMainSection.withSmallGap {
      gap: 16px; }
    .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection {
      display: flex;
      gap: 24px;
      align-items: center; }
      .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection strong {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
      .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftInfoSectionText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        display: flex;
        flex-flow: column;
        justify-content: center;
        flex: 1; }
      .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle {
        position: relative;
        text-align: center;
        min-width: 136px; }
        .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining {
          display: flex;
          flex-flow: column;
          position: relative;
          height: 94px; }
          .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .donut {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            width: 100%;
            -webkit-transform: rotate(125deg);
            -moz-transform: rotate(125deg);
            transform: rotate(125deg); }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .donut .donutBackground {
              transform-origin: center;
              stroke: #e6e6e6; }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .donut .donutColor {
              -webkit-transition: all 1s ease-in-out;
              -moz-transition: all 1s ease-in-out;
              transition: all 1s ease-in-out;
              color: #00a5e3 !important;
              stroke: #00a5e3 !important;
              transform-origin: center; }
          .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .donutMeta {
            position: absolute;
            display: flex;
            align-self: center;
            align-items: center; }
          .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700;
            margin-top: 30px;
            margin-bottom: 8px; }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.withImage {
              margin-top: 28px; }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.smallText {
              font-size: 26px; }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.unlimmited {
              font-family: 'PeridotPE-ExtraBlack', sans-serif;
              font-size: 10px;
              line-height: 12px;
              font-weight: 800;
              margin-top: 20px;
              margin-bottom: 8px; }
              .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.unlimmited i {
                display: block;
                text-align: center;
                font-size: 24px;
                margin-inline: auto;
                content: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_3163_11820' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'%3E%3Crect width='32' height='32' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_3163_11820)'%3E%3Cpath d='M7.44033 23.3475C5.37723 23.3475 3.6214 22.6232 2.17284 21.1746C0.72428 19.7261 0 17.9702 0 15.9071C0 13.844 0.72428 12.0882 2.17284 10.6396C3.6214 9.19108 5.37723 8.4668 7.44033 8.4668C8.27435 8.4668 9.07545 8.61473 9.84362 8.91058C10.6118 9.20732 11.3032 9.63003 11.9177 10.1787L14.0247 12.1211L11.786 14.1293L9.87654 12.4174C9.54733 12.1321 9.17421 11.9069 8.7572 11.7419C8.34019 11.5777 7.90124 11.4956 7.44033 11.4956C6.21125 11.4956 5.16872 11.9236 4.31276 12.7796C3.45679 13.6355 3.02881 14.678 3.02881 15.9071C3.02881 17.1362 3.45679 18.1787 4.31276 19.0347C5.16872 19.8907 6.21125 20.3186 7.44033 20.3186C7.90124 20.3186 8.34019 20.2361 8.7572 20.0711C9.17421 19.9069 9.54733 19.6822 9.87654 19.3968L20.0823 10.1787C20.6968 9.63003 21.3882 9.20732 22.1564 8.91058C22.9246 8.61473 23.7257 8.4668 24.5597 8.4668C26.6228 8.4668 28.3786 9.19108 29.8272 10.6396C31.2757 12.0882 32 13.844 32 15.9071C32 17.9702 31.2757 19.7261 29.8272 21.1746C28.3786 22.6232 26.6228 23.3475 24.5597 23.3475C23.7257 23.3475 22.9246 23.1991 22.1564 22.9024C21.3882 22.6065 20.6968 22.1842 20.0823 21.6355L17.9753 19.6931L20.214 17.6849L22.1235 19.3968C22.4527 19.6822 22.8258 19.9069 23.2428 20.0711C23.6598 20.2361 24.0988 20.3186 24.5597 20.3186C25.7888 20.3186 26.8313 19.8907 27.6872 19.0347C28.5432 18.1787 28.9712 17.1362 28.9712 15.9071C28.9712 14.678 28.5432 13.6355 27.6872 12.7796C26.8313 11.9236 25.7888 11.4956 24.5597 11.4956C24.0988 11.4956 23.6598 11.5777 23.2428 11.7419C22.8258 11.9069 22.4527 12.1321 22.1235 12.4174L11.9177 21.6355C11.3032 22.1842 10.6118 22.6065 9.84362 22.9024C9.07545 23.1991 8.27435 23.3475 7.44033 23.3475Z' fill='%23212121'/%3E%3C/g%3E%3C/svg%3E%0A"); }
                .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.unlimmited i.noText {
                  margin-bottom: 8px;
                  margin-top: 12px; }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.withAlert {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 24px;
              line-height: 28px;
              font-weight: 700;
              margin-top: 24px;
              margin-bottom: 8px; }
              .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.withAlert span {
                font-family: 'PeridotPE-ExtraBlack', sans-serif;
                font-size: 10px;
                line-height: 12px;
                font-weight: 800;
                width: 100%;
                display: block;
                text-align: center;
                margin-bottom: 4px; }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataRemainingNumber.withSpeed {
              margin-top: 36px;
              margin-bottom: 10px;
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 24px;
              line-height: 28px;
              font-weight: 700; }
          .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataSymbolContainer {
            font-family: none; }
            .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftInfoSection .xmasGiftBundle .dataRemaining .dataSymbolContainer .dataSymbol {
              display: inline-block;
              margin: auto;
              width: auto;
              font-family: 'PeridotPE-ExtraBlack', sans-serif;
              font-size: 10px;
              line-height: 12px;
              font-weight: 800;
              background-color: #e6e6e6;
              padding: 4px;
              border-radius: 4px;
              position: relative;
              z-index: 1; }
    .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftActivateSection {
      display: flex;
      flex-flow: column;
      gap: 8px;
      align-items: center; }
      .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftActivateSection .xmas-divider {
        width: 100%;
        height: 1px;
        background-color: #00a5e3; }
      .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftActivateSection .xmasGiftActivateSectionText {
        text-align: center;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
        .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftActivateSection .xmasGiftActivateSectionText strong {
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 700; }
      .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftActivateSection .buttonOuter .button {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        padding: 16px 24px; }
      .xmasGiftModalBody .xmasGiftModalBodyMainSection .xmasGiftActivateSection .toggleBox-container {
        margin: 0; }

.readMoreContainer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 10px; }

.readMoreItem {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 4px; }
  .readMoreItem .readMoreItemParagraph {
    text-align: left; }
    .readMoreItem .readMoreItemParagraph.noMargin {
      margin: 0; }
    .readMoreItem .readMoreItemParagraph a.visitLink {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      padding: 0 !important;
      text-decoration: underline; }

.xmasGiftSuccessModalBody {
  display: flex;
  padding: 24px;
  gap: 24px; }
  .xmasGiftSuccessModalBody img {
    height: 40px;
    width: 40px; }
  .xmasGiftSuccessModalBody .xmasGiftSuccessText {
    display: flex;
    flex: 1;
    flex-flow: column;
    justify-content: center;
    gap: 4px; }
    .xmasGiftSuccessModalBody .xmasGiftSuccessText .xmasGiftSuccessTextTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700; }
    .xmasGiftSuccessModalBody .xmasGiftSuccessText .xmasGiftSuccessTextSubtitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }

.xmasGiftConfirmationModalBody {
  display: flex;
  padding: 8px 24px 24px;
  gap: 24px;
  flex-flow: column; }
  .xmasGiftConfirmationModalBody .xmasGiftConfirmationModalText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .xmasGiftConfirmationModalBody .xmasGiftConfirmationModalInput {
    display: flex;
    flex-flow: column;
    gap: 8px; }
    .xmasGiftConfirmationModalBody .xmasGiftConfirmationModalInput span {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }

.xmasGiftErrorModalBody {
  display: flex;
  padding: 24px;
  gap: 24px; }
  .xmasGiftErrorModalBody img {
    height: 40px;
    width: 40px; }
  .xmasGiftErrorModalBody .xmasGiftErrorText {
    display: flex;
    flex: 1;
    flex-flow: column;
    justify-content: center;
    gap: 4px; }
    .xmasGiftErrorModalBody .xmasGiftErrorText .xmasGiftErrorTextTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700; }
    .xmasGiftErrorModalBody .xmasGiftErrorText .xmasGiftErrorTextSubtitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }

.xmas-packageInfo {
  margin-bottom: 52px; }

.xmas-title {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0;
  margin-bottom: 4px; }

.xmas-description {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0; }

.xmas-errorModalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 358px; }
  @media only screen and (max-width: 767px) {
    .xmas-errorModalContainer {
      width: 316px; } }

.xmas-successModalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 358px; }
  @media only screen and (max-width: 767px) {
    .xmas-successModalContainer {
      width: 316px; } }

.xmas-alertModalDetails {
  padding: 32px;
  background-color: #f2f2f3;
  box-sizing: border-box;
  border-radius: 0 0 16px 16px;
  padding-top: 24px; }

.xmas-offerParagraphText {
  color: #212121;
  letter-spacing: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: center; }

.xmas-offerParagraphTextAlignLeft {
  color: #212121;
  letter-spacing: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: left; }

.xmas-modalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 352px; }
  @media only screen and (max-width: 767px) {
    .xmas-modalContainer {
      width: 316px; } }

.xmas-box {
  height: 100%;
  max-height: 182px; }

.xmas-boxCarousel {
  height: 100%;
  max-height: 208px; }

.xmas-offersDetailsBox {
  height: 100%;
  height: 220px; }

.xmas-detailsContent {
  height: 100%; }

.xmas-detailsContentCarousel {
  height: 100%;
  min-height: 160px; }
  @media only screen and (max-width: 480px) {
    .xmas-detailsContentCarousel {
      min-height: 208px; } }

.xmas-detailsContentLeft {
  justify-content: space-between; }

.boxBackgroundColor.fixedLineB2C {
  background: #00a5e3; }

.aboveBackgroundImage {
  z-index: 1; }

.infoMessageContainer {
  margin-top: 12px;
  padding: 4px;
  background: #f2f2f3;
  border-radius: 4px;
  display: flex;
  align-items: flex-start; }

.infoMessageIcon {
  width: 16px;
  margin-right: 6px; }

.infoMessageSpan {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700; }

.consentBox {
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 24px;
  background-color: #ffffff;
  color: #212121;
  width: 100%; }

.consentBoxLargeHeader {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 16px; }
  .consentBoxLargeHeader.inBetween {
    margin-top: 16px; }
  .consentBoxLargeHeader.withDivider {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6; }

.consentBoxHeader {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: -8px;
  margin-top: 0; }

.consentBoxSubHeader {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: -8px; }

.consentList {
  margin: 0; }

.consentBoxListTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.consentBoxList {
  list-style-type: disc;
  margin-bottom: 8px; }
  .consentBoxList li {
    list-style-position: inside; }
  .consentBoxList.indent li {
    margin-left: 16px; }

.consentBoxGreekList {
  list-style-type: lower-greek;
  margin-bottom: 8px; }
  .consentBoxGreekList li {
    list-style-position: inside; }
  .consentBoxGreekList.indent li {
    margin-left: 16px; }

.profileBoxElementContainer {
  margin-top: 8px;
  width: 100%; }

.profileBoxElementSpan {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.consentProfileHeader {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.consentProfileHeader-larger {
  margin: 0;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

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

.consentLabel {
  width: 100%; }

.consentSubSection {
  margin-top: 48px; }

.consentSubSection-smaller {
  margin-top: 24px; }

.consentButtonContainer {
  display: flex;
  flex-flow: column;
  align-items: center; }

.consentButton {
  background: none;
  width: 200px;
  color: inherit;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  padding: 8px;
  border-radius: 16px;
  margin-bottom: 8px;
  cursor: pointer;
  border-color: #212121;
  border-style: solid; }
  .consentButton:hover {
    opacity: 0.8; }
  .consentButton:visited {
    opacity: 0.9; }
  .consentButton:focus {
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }

.consentLink {
  color: inherit;
  text-decoration: underline; }

.warningModalButtonOuter {
  margin-top: 24px; }

.consentPinContentTitle {
  text-align: center; }

.errorDisclaimer {
  display: block;
  margin-top: -12px; }

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

.consentAdvertiseHeaderIcon {
  z-index: 2;
  flex-shrink: 0;
  color: #00a5e3;
  width: 16px;
  height: 16px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f2f2f3;
  cursor: pointer;
  position: relative;
  margin-left: 8px; }
  .consentAdvertiseHeaderIcon:hover .consentAdvertiseTooltip {
    display: block; }

.consentAdvertiseTooltip {
  z-index: 2;
  position: absolute;
  top: 30px;
  right: -164px;
  min-width: 344px;
  display: none; }
  @media only screen and (max-width: 480px) {
    .consentAdvertiseTooltip {
      min-width: 172px;
      right: -10px; }
      .consentAdvertiseTooltip .arrow {
        left: 90%; } }
  .consentAdvertiseTooltip .highlight {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }

.consentParagraph {
  margin: 0;
  margin-bottom: 8px; }
  .consentParagraph.withTopMargin {
    margin-top: 32px; }
  .consentParagraph-16 {
    padding-bottom: 16px; }
    .consentParagraph-16 .a11yList {
      list-style: disc;
      padding-left: 36px;
      display: flex;
      flex-direction: column;
      gap: 16px; }
      .consentParagraph-16 .a11yList .listGap {
        list-style: disc;
        display: flex;
        flex-direction: column; }
    .consentParagraph-16.withGap {
      display: flex;
      flex-direction: column;
      gap: 16px; }

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

.consentRadiosSection {
  padding: 0 24px; }

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

.consentRadio {
  padding: 8px 0;
  border-bottom: 1px solid #e6e6e6; }
  .consentRadio.noBorder {
    border-bottom: none; }
  .consentRadio .consentRadioLabelBold {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700; }

.consentRadioDetails {
  padding-top: 16px; }

.consentRadio:last-child {
  border-bottom: none; }

.buttonConsentAdvertise {
  align-self: center;
  margin-top: 8px; }

.consentSeeMoreParagraph {
  margin: 0;
  margin-top: 16px; }
  .consentSeeMoreParagraph.center {
    text-align: center;
    align-self: center; }

.consentUndelinedLink {
  color: #212121;
  text-decoration: underline; }

.connectionsLinkWithLabel {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-right: 4px !important;
  padding-left: 8px !important; }

.connectionsLabel {
  color: #212121;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0;
  background: #ffffff;
  border-radius: 2px;
  padding: 4px 2px;
  margin: 0 !important; }

.linkConsentSidebar {
  color: #212121 !important;
  width: 100%; }

.consentModalParagraph {
  margin: 0;
  text-align: center;
  margin-bottom: 32px; }

.consentBoxText {
  display: flex;
  flex-flow: column;
  align-self: center;
  border-bottom: 1px solid #4d4d4d;
  padding: 16px 14px; }
  .consentBoxText.consentBoxTextLast {
    border: none; }

.consentBoxTitle {
  width: 100%;
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0px; }

.consentBoxContent {
  display: flex;
  flex-flow: column; }

.consentBoxCol {
  padding: 0 8px;
  background-color: #ffffff;
  border-left: 2px solid #ffffff; }
  .consentBoxCol:hover, .consentBoxCol.activeConsentBoxCol {
    background-color: rgba(33, 33, 33, 0.1);
    border-left: 2px solid #e20074; }

.borderForCheckbox {
  border-top: 1px solid #e6e6e6; }

.advertisingTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 24px; }

.consentFilterDescription {
  margin-bottom: 8px; }

.consentFilterTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 8px; }

.consentAdvertiseHeaderOuter {
  display: flex;
  align-items: center;
  padding-top: 16px; }

.consentTableWrapper {
  padding-bottom: 24px; }

.consentCookiesTable {
  width: 100%; }
  .consentCookiesTable tr:nth-of-type(odd) {
    background-color: white; }
  .consentCookiesTable tr {
    border: none; }
  .consentCookiesTable th {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    vertical-align: middle;
    border: 1px solid #0e8103; }
  .consentCookiesTable td {
    text-align: center;
    text-wrap: wrap;
    overflow-wrap: break-word;
    width: 25%;
    max-width: 200px;
    border: 1px solid #0e8103; }

.consentCookiesSwitchList {
  display: flex;
  flex-direction: column;
  gap: 24px; }
  .consentCookiesSwitchList .consentCookiesSwitchSetting {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    border-bottom: none;
    padding: 0; }
    .consentCookiesSwitchList .consentCookiesSwitchSetting .consentSwitchContent {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .consentCookiesSwitchList .consentCookiesSwitchSetting .consentSwitchContent .strong {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
    .consentCookiesSwitchList .consentCookiesSwitchSetting .consentCookiesSwitch {
      align-self: center; }

.consentCookiesButtons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 40px;
  gap: 24px; }

.routerBox {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px; }
  .routerBox .routerBoxDropdownContainer {
    display: flex;
    flex-direction: column;
    margin-top: 12px; }
  .routerBox .routerBoxHeader {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center; }
  .routerBox .routerBoxAFM {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .routerBox .primaryButton.maxWidth {
    align-self: center;
    max-width: 147px;
    cursor: pointer; }

.consentContainer {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.consentNormalFont {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-top: 36px; }

.consentLink {
  color: #006d29;
  text-decoration: none;
  padding: 16px 8px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700; }

.switchSetting.routerBoxMore {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 0;
  border: none;
  text-align: center; }
  .switchSetting.routerBoxMore .switchSettingAction {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; }
  .switchSetting.routerBoxMore .routerBoxMoreAction.toggleSettingDescription {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transform: none !important; }
  .switchSetting.routerBoxMore .routerBoxMoreLabel {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    color: #212121;
    transform: none !important; }
  .switchSetting.routerBoxMore .routerBoxMoreAction.toggleSettingDescription i {
    width: 16px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    transform: scaleY(1);
    transition: transform 200ms ease; }
  .switchSetting.routerBoxMore.is-open .routerBoxMoreAction.toggleSettingDescription i {
    transform: scaleY(-1); }
  .switchSetting.routerBoxMore .routerBoxMoreAction.toggleSettingDescription.is-open i,
  .switchSetting.routerBoxMore .routerBoxMoreAction.toggleSettingDescription.active i,
  .switchSetting.routerBoxMore .routerBoxMoreAction.toggleSettingDescription.open i {
    transform: scaleY(-1); }
  .switchSetting.routerBoxMore .routerBoxMoreText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #212121;
    text-align: left;
    margin-top: 16px;
    width: 100%; }

.routerConsentSupportList--noGap {
  margin: 16px 0 24px 0 !important;
  list-style-type: square;
  list-style-position: inside; }

.routerConsentSupportItem--small {
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.routerConsentSupportItem--small:not(:last-child) {
  margin-bottom: 24px; }

.vouchBucketBoxContentText.c1VeticalsMagentaText {
  margin-bottom: 0px !important; }

.c1VerticalSubdivider {
  border-color: #e6e6e6;
  width: 100%;
  margin: 0px; }

.c1VerticalDoubleSubdivider {
  border-color: #e6e6e6;
  opacity: 0.5; }

.c1VerticalSubdividerContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 1px;
  margin: 23px 0px; }

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

.c1VerticalMagentaOneExtraIcon {
  margin-left: auto; }

.ddFilterWrapper .ddFilter.c1VerticalDDPaddings {
  padding: 12px 16px; }

.c1DiscountListSection {
  display: flex;
  flex-direction: column;
  gap: 32px; }

.cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer.c1VerticalListItems {
  gap: 28px; }

.c1VerticalSubdividerSymbol {
  align-self: center;
  padding: 16px; }

.c1VerticalExtraOffers:not(:last-child) {
  border-bottom: 1px solid grey; }

.c1VerticalLogoContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 73.21px;
  background: #f2f2f3; }
  .c1VerticalLogoContainer.boxLogo {
    background: #f87a1d; }
  .c1VerticalLogoContainer.payzyLogo {
    background: #6200ea; }
  .c1VerticalLogoContainer.insuranceLogo {
    background: #001e36; }
  .c1VerticalLogoContainer.germanosLogo {
    background-color: #deeff9; }

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

.c1VerticalOfferContainer {
  display: flex;
  gap: 24px; }

.c1VerticalDiscountTextHeading {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 8px; }

.c1VerticalDiscountButton {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  margin-bottom: 20px;
  width: fit-content;
  color: unset;
  border-radius: 16px;
  border: 1px solid var(--grayscale-5-text, #212121);
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700; }

.cosmoteOneCombo .cosmoteOneStepperForm.noStepper.c1VerticalDiscountBox {
  padding-top: 0px; }

.fwaSubheading {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.fwaDetailsBottom {
  margin-top: 32px !important;
  margin-bottom: 0px !important;
  padding-top: 8px;
  border-top: 1px solid #e6e6e6; }

.boxTabs.fwaBoxTabs {
  margin-top: 16px; }

.fwaCardActions {
  display: flex;
  flex-direction: row;
  gap: 8px; }

.fwaCircleText {
  display: flex;
  margin-top: 32px; }

.detailsContent.FWAwithMargin {
  margin-top: 42px; }

.switchSetting.fwaSwitch {
  padding-bottom: 8px; }

.switchSetting .switchSettingBottom.fwaSwitchSettingBottom {
  padding-bottom: 24px; }

.fwaCardText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 8px; }

.autocompleteWrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  border-radius: 16px;
  border: 1px solid #212121;
  color: #212121;
  background-color: #ffffff; }
  .autocompleteWrapper.iddle {
    pointer-events: none;
    opacity: 0.5; }

.autocompleteInput {
  border: 1px solid transparent;
  padding: 12px 8px;
  font-size: 16px;
  border-radius: 8px;
  color: #212121;
  width: 100%;
  padding-right: 40px !important; }

.leftText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin-right: 8px; }

.rightText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.autocompleteInput:focus {
  outline: none;
  box-shadow: none; }

.autocompleteInput::placeholder {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #9d9d9c; }

.autocomplete-items {
  position: absolute;
  border: #212121;
  z-index: 1;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  background-color: white;
  padding: 8px 12px; }

.autocomplete-items div {
  padding: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #ffffff;
  border-bottom: 1px solid #e6e6e6; }

.autocomplete-items div:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px; }

.autocomplete-items div:last-child {
  border-bottom: none; }

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e6e6e6; }
  .autocomplete-items div:hover.errorMessageBgColor {
    background-color: initial; }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: #00a5e3 !important;
  color: #ffffff; }

.autocompleteItemName {
  color: #212121;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0; }

.addAutocompleteButton {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  letter-spacing: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin-left: 48px;
  text-decoration: underline; }

.addAutocompleteButtonSimple {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  letter-spacing: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin-left: 48px; }

.autocompleteInputWrapper {
  display: flex; }
  .autocompleteInputWrapper .autocompleteInput {
    padding: 12px 0 12px 8px !important; }

.autocompleteInputIcon {
  padding-right: 24px;
  cursor: pointer; }
  .autocompleteInputIcon .searchIcon {
    padding: 0;
    position: relative; }

.addAutocompleteIconButton {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  display: flex;
  align-items: center; }

.largeAccounts-searchBarIconButton {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: absolute;
  right: -16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
  line-height: 0; }

.dashboardSearchbarItem {
  cursor: pointer; }

.searcBarElementModal {
  display: flex;
  justify-content: space-between; }

.searcBarAddedElementModal {
  display: flex;
  justify-content: space-between;
  padding: 6px 0; }

.addedAssetsListModal {
  padding: 0 6px;
  max-height: 270px;
  overflow-y: auto;
  margin-bottom: 24px; }

.searchbarErrorMessage {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0px; }

.searchbarContainer {
  z-index: 5;
  position: relative;
  width: 100%; }

.assetsBoxB2B {
  display: flex;
  flex-flow: column; }
  .assetsBoxB2B .connectionsBoxHeader {
    display: flex;
    align-items: center;
    height: 32px;
    position: relative;
    z-index: 2;
    padding: 10px 16px;
    background-color: #e6e6e6;
    border-radius: 15px; }
  .assetsBoxB2B .connectionsBoxContent {
    display: flex;
    flex-flow: column;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e6e6; }
    .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow {
      display: flex;
      align-items: flex-start; }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow {
          flex-wrap: wrap; } }
      @media only screen and (max-width: 767px) {
        .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow {
          flex-wrap: wrap; } }
      .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
        background-color: #ffffff;
        margin: 8px;
        padding-bottom: 4px;
        display: flex;
        flex-flow: column;
        width: calc(50% - 16px);
        border: 1px solid #e6e6e6;
        border-radius: 16px; }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
          .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
            width: calc(100% / 2 - 16px); } }
        @media only screen and (max-width: 767px) {
          .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol {
            width: calc(100% - 16px); } }
        .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .connectionsBoxColTitle {
          color: #212121;
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700;
          position: relative;
          display: flex;
          align-items: center;
          margin-bottom: 4px;
          padding: 12px 16px;
          border-radius: 15px 0 15px 0;
          align-self: flex-start; }
          .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .connectionsBoxColTitle img {
            height: 24px;
            padding-right: 6px; }
        .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableListContainerLarge {
          max-height: 652px;
          overflow-y: auto;
          overflow-x: hidden; }
        .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList {
          display: flex;
          flex-flow: column;
          padding: 0 16px 16px; }
          .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li {
            display: flex;
            align-items: center;
            background-color: #f2f2f3;
            margin-top: 12px;
            padding: 8px;
            min-height: 52px;
            border-radius: 16px; }
            .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol .sortableList li .sortableLeft {
              display: flex;
              flex-flow: column;
              align-self: flex-start;
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 13px;
              line-height: 16px;
              font-weight: 600;
              position: relative; }
        .assetsBoxB2B .connectionsBoxContent .connectionsBoxRow .connectionsBoxCol img {
          height: 24px;
          padding-right: 6px; }
  .assetsBoxB2B .leftElementPart {
    display: flex;
    flex: 66%; }
    @media only screen and (max-width: 480px) {
      .assetsBoxB2B .leftElementPart {
        flex: 66%; } }
  .assetsBoxB2B .removeLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: calc(34% / 2); }
  .assetsBoxB2B .sortIconContainer {
    display: flex;
    align-items: center; }
    .assetsBoxB2B .sortIconContainer .sortIcon {
      color: #9d9d9c;
      margin-right: 20px;
      cursor: move; }

.iconTextWrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start; }
  .iconTextWrapper img {
    width: 24px;
    height: 24px; }

.searchBarConnections {
  margin: 16px 0; }

.iconTextConnections {
  margin-top: 24px; }
  .iconTextConnections img {
    width: 24px;
    height: 24px; }

.returnToHomepageLink {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #212121 !important;
  margin-bottom: 40px; }
  @media only screen and (max-width: 1024px) {
    .returnToHomepageLink {
      display: none; } }

.largeAccountsRemoveButton {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  margin-right: 8px;
  text-decoration: underline;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700; }

.sectionTitleMediumContainer {
  margin-top: 40px; }

.sectionTitleMediumContainerTop {
  margin-top: 16px; }

.iconTextBills {
  margin-top: 24px; }

.labelNumberDescription {
  color: #212121;
  letter-spacing: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.editableTitleLargeAccounts {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  max-width: 340px; }
  @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .editableTitleLargeAccounts {
      max-width: 180px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .editableTitleLargeAccounts {
      max-width: 140px; } }
  @media only screen and (max-width: 767px) {
    .editableTitleLargeAccounts {
      max-width: 160px; } }
  @media only screen and (min-width: 480px) and (max-width: 768px) {
    .editableTitleLargeAccounts {
      max-width: 160px; } }
  @media only screen and (max-width: 480px) {
    .editableTitleLargeAccounts {
      max-width: 110px; } }

.labelNumberDescription {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  max-width: 340px; }
  @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .labelNumberDescription {
      max-width: 180px; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .labelNumberDescription {
      max-width: 140px; } }
  @media only screen and (max-width: 767px) {
    .labelNumberDescription {
      max-width: 160px; } }
  @media only screen and (min-width: 480px) and (max-width: 768px) {
    .labelNumberDescription {
      max-width: 160px; } }
  @media only screen and (max-width: 480px) {
    .labelNumberDescription {
      max-width: 110px; } }

.largeAccountsManageAssetsEmptyState {
  padding: 32px;
  display: flex;
  flex-flow: column;
  background-color: #ffffff;
  border-radius: 16px;
  border: solid 1px #212121; }

.largeAccountsManageAssetsEmptyStateHeader {
  margin: 0;
  text-align: center;
  letter-spacing: 0px;
  margin-bottom: 8px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.largeAccountsManageAssetsEmptyStateParagraph {
  margin: 0;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.largeAccountsNotificationsEmptyStateHeader {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0px;
  margin-bottom: 8px;
  margin-top: 16px; }

.largeAccountsNotificationsEmptyStateParagraph {
  margin: 0;
  text-align: center;
  letter-spacing: 0px;
  letter-spacing: 0px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.largeAccountsNotificationElement {
  padding: 16px;
  display: flex;
  flex-flow: column;
  background-color: #ffffff;
  align-items: center;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  display: flex;
  flex-direction: row; }

.largeAccountsNotificationElementImage {
  align-self: flex-start;
  margin-right: 12px; }

.largeAccountsNotificationElementHeader {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0px; }

.largeAccountsNotificationElementParagraph {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0px;
  margin-top: 0;
  margin-bottom: 8px; }

.notificationsGradientBox {
  border-radius: 16px;
  margin: 8px 0;
  background: transparent;
  display: inline-block;
  padding: 1px;
  text-decoration: none; }

.notificationsGradientBox:first-child {
  border-radius: 16px;
  margin-top: 0; }

.notificationsGradientBoxContent {
  border-radius: 16px;
  background: #ffffff; }

.largeAccountsShopSectionTitle {
  padding: 8px;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  box-sizing: border-box; }

.largeAccountsTitleLoader {
  background: #f2f2f3;
  border-radius: 16px;
  height: 26px;
  width: 150px;
  margin-top: 18px; }

.largeAccountsShopSectionTitleContainer {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  justify-content: space-between; }

.largeAccountsShopSimpleLink {
  padding: 12px 8px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  width: auto;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  margin-left: 12px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700; }
  .largeAccountsShopSimpleLink:hover {
    color: rgba(0, 109, 41, 0.85);
    z-index: 1; }
  .largeAccountsShopSimpleLink: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; }
  .largeAccountsShopSimpleLink-notVisible {
    visibility: hidden; }
  .largeAccountsShopSimpleLink.hidden {
    display: none; }
  .largeAccountsShopSimpleLink.absoluteLink {
    position: absolute;
    bottom: 8px; }
  .largeAccountsShopSimpleLink.whiteLink {
    display: inline-block;
    width: auto;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .largeAccountsShopSimpleLink.whiteLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .largeAccountsShopSimpleLink.blueTooltipLink {
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px; }
  .largeAccountsShopSimpleLink.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .largeAccountsShopSimpleLink.blueLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .largeAccountsShopSimpleLink.inline {
    display: inline-block;
    width: auto; }
  .largeAccountsShopSimpleLink.blue {
    color: #212121 !important;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }

.largeAccountsShopAllLink {
  margin-top: 26px;
  margin-bottom: 16px;
  padding: 12px 8px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  width: auto;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 16px; }
  .largeAccountsShopAllLink:hover {
    color: rgba(0, 109, 41, 0.85);
    z-index: 1; }
  .largeAccountsShopAllLink: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; }
  .largeAccountsShopAllLink-notVisible {
    visibility: hidden; }
  .largeAccountsShopAllLink.hidden {
    display: none; }
  .largeAccountsShopAllLink.absoluteLink {
    position: absolute;
    bottom: 8px; }
  .largeAccountsShopAllLink.whiteLink {
    display: inline-block;
    width: auto;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .largeAccountsShopAllLink.whiteLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .largeAccountsShopAllLink.blueTooltipLink {
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px; }
  .largeAccountsShopAllLink.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .largeAccountsShopAllLink.blueLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .largeAccountsShopAllLink.inline {
    display: inline-block;
    width: auto; }
  .largeAccountsShopAllLink.blue {
    color: #212121 !important;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }

.ddFilterWrapperLargeAccountsShop {
  max-width: 164px !important;
  z-index: 7;
  margin-right: 16px; }

.largeAccountsShop-ddFilterWrapperSmall {
  max-width: 164px !important;
  z-index: 7;
  margin-right: 16px;
  margin-top: 2px; }

.searchBarLargeAccountsShop {
  margin-top: 12px;
  margin-bottom: 8px; }

.searchBarLargeAccountsShopModal {
  margin: 24px 0; }

.largeAccountsToggleIcon {
  font-size: 18px;
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  transform: scaleY(-1); }
  .largeAccountsToggleIcon.closed {
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }

.activePackageSection {
  background-color: #f2f2f3;
  padding: 16px;
  border-radius: 16px; }

.activePackageSectionHeader {
  margin: 0;
  letter-spacing: 0px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

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

.activePackageName {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0px; }

.activePackageList {
  padding: 0 16px;
  max-width: 420px;
  margin-bottom: -16px; }

.activePackageListItem {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #e6e6e6; }

.activePackageListItem:last-child {
  border-bottom: none; }

.packageListLargeAccounts.slick-initialized .hiddenUntilCarouselLoads {
  display: block; }

.packageListLargeAccounts.slick-initialized .hiddenAfterCarouselLoads {
  display: none !important;
  padding-bottom: 6px; }

.packageListLargeAccounts.slickBeforeInitialization .hiddenUntilCarouselLoads {
  display: none; }

.largeAccountsShop-packageListImage {
  width: 100%;
  height: 75px;
  background-color: #f2f2f3;
  display: flex;
  align-items: center; }
  .largeAccountsShop-packageListImage img {
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain; }

.largeAccountsShop-packageListContent {
  display: flex;
  flex-flow: column;
  padding: 6px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.largeAccountsShop-emptyLineShop {
  width: 130px;
  height: 12px;
  margin-bottom: 4px;
  background-color: #f2f2f3; }

.largeAccountsShop-emptySmallLineShop {
  width: 88px;
  height: 12px;
  background-color: #f2f2f3; }

.largeAccountsShop-emptyBottomLineShop {
  width: 46px;
  height: 16px;
  background-color: #f2f2f3;
  position: absolute;
  bottom: 12px;
  right: 12px; }

.largeAccountsShop-packageListItem {
  border: 1px solid #e6e6e6;
  width: 148px;
  min-height: 215px;
  display: flex;
  flex-flow: column;
  background-color: #ffffff;
  overflow: hidden;
  padding-bottom: 1px;
  margin: 0 6px;
  flex: 0 0 auto;
  border-radius: 16px;
  position: relative; }
  .largeAccountsShop-packageListItem:first-child {
    margin-left: 0; }
  .largeAccountsShop-packageListItem:last-child {
    margin-right: 0; }

.largeAccountsShop-loadingList {
  display: flex;
  flex-flow: row;
  overflow: hidden;
  padding-bottom: 6px; }

.largeAccountsShop-topSectionText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: inline-block;
  margin-right: 0;
  margin-bottom: 4px;
  margin-right: 8px; }

.largeAccountsBills-topSectionText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: inline-block;
  margin-right: 0;
  margin-bottom: 4px;
  margin-right: 8px; }

.largeAccountsShop-searchFilterContent {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%; }

.largeAccountsShop-searchFilterInputContainer {
  flex: 1;
  min-width: 164px; }

.largeAccountsShop-ddFilterInput {
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  color: #212121;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: inline-block;
  background-color: transparent;
  border: 1px solid #212121;
  border-radius: 16px;
  padding: 12px 8px; }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .largeAccountsShop-ddFilterInput {
      max-width: 100%; } }
  @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .largeAccountsShop-ddFilterInput {
      max-width: 100%; } }
  @media only screen and (max-width: 767px) {
    .largeAccountsShop-ddFilterInput {
      max-width: 100%; } }
  .largeAccountsShop-ddFilterInput.opened {
    border-radius: 16px 16px 0 0;
    border-bottom: none; }
  .largeAccountsShop-ddFilterInput ::-webkit-input-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .largeAccountsShop-ddFilterInput :-moz-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .largeAccountsShop-ddFilterInput ::-moz-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .largeAccountsShop-ddFilterInput :-ms-input-placeholder {
    color: #9d9d9c;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .largeAccountsShop-ddFilterInput:not(.jsDropdownInput) {
    padding: 12px 40px; }

.largeAccountsShop-searchbarErrorBox {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 16px;
  margin-top: 2px;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0px; }

.largeAccountsShop-searchFilterWithTitle {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .informationSidebar {
    width: 100%; } }

.largeAccountsSidebar {
  padding: 16px; }

.largeAccountsBorderedContent {
  margin-bottom: 12px;
  border-bottom: 1px solid #e6e6e6; }
  .largeAccountsBorderedContent:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none; }
  .largeAccountsBorderedContent p {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin: 4px 0; }

.largeAccountsContactUsButton {
  width: 100%; }

.searchBarDashboard {
  margin-bottom: 24px; }

.largeAccountsDashboardEmptyState {
  padding: 24px;
  display: flex;
  flex-flow: column;
  background-color: #ffffff;
  align-items: center;
  border-radius: 16px;
  border: 1px solid #e6e6e6; }

.largeAccountsManageAssetsButton {
  margin-top: 24px; }

.largeAccountsEmptyStateIcon {
  margin-bottom: 20px; }

.noDueBillsIcon {
  margin-bottom: 16px; }

.largeAccountsEmptyStateButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px; }
  @media only screen and (max-width: 480px) {
    .largeAccountsEmptyStateButtons {
      flex-direction: column; } }

.notInterestedButton {
  margin-right: 32px; }
  @media only screen and (max-width: 480px) {
    .notInterestedButton {
      margin-right: 0;
      margin-bottom: 16px; } }

.noDueBillsHeader {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0px; }

.largeAccountsInfoBox {
  background: #d8d8d8;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: flex-start; }

.largeAccountsInfoBoxIcon {
  margin-right: 8px; }

.largeAccountsModalButton {
  padding-bottom: 24px;
  padding-top: 12px; }

.largeAccountsOnboardingMessage {
  padding: 0 88px; }

.largeAccountsModalBg {
  position: absolute;
  width: 100%;
  left: 0;
  top: 84px;
  z-index: -1; }
  @media only screen and (max-width: 767px) {
    .largeAccountsModalBg {
      top: 84px;
      width: 226%; } }

.onboardingTopLargeAccounts {
  display: flex;
  margin-top: 16px;
  padding: 0 24px 100px;
  position: relative;
  overflow: hidden;
  z-index: 0;
  align-items: flex-start; }
  @media only screen and (max-width: 767px) {
    .onboardingTopLargeAccounts {
      padding: 0 28px 76px; } }

.largeAccountsOnboardingTopMessage {
  max-width: 378px;
  position: relative;
  top: 58px;
  right: 12px; }
  @media only screen and (max-width: 767px) {
    .largeAccountsOnboardingTopMessage {
      top: 48px; } }

.onboardingCosmoteSvg {
  width: 32px;
  height: 35px;
  flex-shrink: 0;
  margin-right: 4px; }

.largeAccountsDashboard-emptyStateIcon {
  margin-bottom: 6px; }

.largeAccountsDashboard-searchbarErrorBox {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 16px;
  margin-top: 2px;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0px; }

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

.largeAccountsDashboard-searchFilterContent {
  margin-top: 32px; }

.largeAccountsDashboard-searchFilter {
  border-radius: 4px; }

.largeAccountsDashboard-searchFilterWithTitle {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

.iconTextConnections {
  margin-top: 24px; }
  .iconTextConnections img {
    width: 24px;
    height: 24px; }

.navTabsBills {
  margin: 0 auto;
  display: flex;
  margin-bottom: 32px; }

.navTabsItemBills {
  display: flex;
  flex-direction: column;
  letter-spacing: 0px;
  color: #212121 !important;
  color: #212121 !important;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  cursor: pointer; }
  .navTabsItemBills.isActive {
    font-family: 'PeridotPE-ExtraBlack', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800; }
    .navTabsItemBills.isActive:after {
      content: '';
      background-color: #e20074;
      height: 2px; }

.navTabsItemBills:hover {
  color: #ffffff;
  background: rgba(33, 33, 33, 0.2); }
  @media only screen and (max-width: 767px) {
    .navTabsItemBills:hover {
      background-color: rgba(0, 0, 0, 0); } }

.ddFilterWrapperLargeAccounts {
  max-width: 325px !important;
  z-index: 7;
  align-self: flex-start;
  margin-left: -8px; }

.searchFilterLargeAccounts {
  margin-top: 32px; }

.largeAccountsConnectionsText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 16px; }

.largeAccountsConnectionsSpan {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.largeAccountsFriendlyNameSpan {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  margin-bottom: 8px; }

.largeAccountsFriendlyName {
  padding-left: 6px;
  margin-bottom: 8px; }

.largeAccountsWrapper {
  margin-top: 32px !important; }
  @media only screen and (max-width: 1024px) {
    .largeAccountsWrapper {
      margin-top: 16px !important; } }

.inputSpanFriendlyName {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: inline !important;
  margin: 0 !important; }

.inputSpanNumber {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  display: inline !important;
  margin: 0 !important; }

.seeMoreSection {
  text-align: center; }

.visitLinkSeeMore {
  margin-bottom: 10px;
  display: flex !important;
  justify-content: center; }
  .visitLinkSeeMore i {
    font-size: 22px;
    display: block;
    align-self: flex-start; }
    .visitLinkSeeMore i.opened {
      transform: rotate(180deg); }

.allBoxesCountSpan {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.visibleBoxesCountSpan {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.seeMoreTextSpan {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.iconTextWrapperBills {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 32px;
  margin-bottom: 24px; }
  .iconTextWrapperBills img {
    height: 24px;
    width: 24px; }

.searchBarBills {
  margin: 16px 0; }
  .searchBarBills.noMarginTop {
    margin-top: 0; }

.largeAccountsBills-emptyStateIcon {
  margin-bottom: 6px; }

.largeAccountsBills-searchFilterContent {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%; }

.largeAccountsBills-searchFilterInputContainer {
  flex: 1;
  min-width: 164px; }

.largeAccountsBills-searchbarErrorBox {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 16px;
  margin-top: 2px;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0px; }

.largeAccountsBills-searchFilterWithTitle {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px; }

.generalSelect {
  max-width: 300px;
  min-width: 204px;
  margin-top: 24px;
  margin-bottom: 8px; }
  @media only screen and (max-width: 480px) {
    .generalSelect {
      width: 100%; } }
  @media only screen and (max-width: 1024px) {
    .generalSelect {
      margin-bottom: 0; } }

.dashboardSelect {
  max-width: 300px;
  min-width: 204px;
  margin: 24px 0; }
  @media only screen and (max-width: 480px) {
    .dashboardSelect {
      width: 100%; } }
  @media only screen and (max-width: 1024px) {
    .dashboardSelect {
      margin-top: 16px; } }

.selectWithBreadcrumb {
  max-width: 300px;
  min-width: 204px;
  margin-top: 24px;
  margin-bottom: 8px; }
  @media only screen and (max-width: 480px) {
    .selectWithBreadcrumb {
      width: 100%; } }
  @media only screen and (max-width: 1024px) {
    .selectWithBreadcrumb {
      margin-top: 16px;
      margin-bottom: 24px; } }

.shopSelect {
  max-width: 300px;
  min-width: 204px;
  margin-top: 24px; }
  @media only screen and (max-width: 480px) {
    .shopSelect {
      width: 100%; } }

/*the container must be positioned relative:*/
.custom-select {
  position: relative; }

.custom-select-loading {
  pointer-events: none; }

.custom-select select {
  display: none;
  /*hide original SELECT element:*/ }

.select-selected {
  background-color: #ffffff;
  position: relative;
  width: 100%;
  left: 0;
  z-index: 1;
  border-radius: 16px;
  color: #212121;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0px; }

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: '';
  display: inline-block;
  background: url("../img/generalpurposedropdown/select-closed-icon.svg") no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin: 0;
  right: 8px; }

.select-selected.select-arrow-active {
  border-radius: 16px 16px 0 0;
  border-bottom: none; }

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  position: absolute;
  content: '';
  display: inline-block;
  background: url("../img/generalpurposedropdown/select-open-icon.svg") no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin: 0;
  right: 8px; }

/*style the items (options), including the selected item:*/
.select-items div {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  padding: 12px 8px; }

.select-selected {
  padding: 12px 40px 12px 8px;
  border: 1px solid #212121;
  cursor: pointer;
  user-select: none;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex; }

/*style items (options):*/
.select-items {
  background-color: #ffffff;
  width: 100%;
  left: 0;
  border-radius: 0 0 16px 16px;
  border: 1px solid #212121;
  border-top: none;
  position: absolute;
  z-index: 100; }

.select-items div:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom: 1px solid #e6e6e6; }

/*hide the items when the select box is closed:*/
.select-hide {
  display: none; }

.select-items div:hover,
.same-as-selected {
  background-color: #00a5e3;
  color: white; }

.selectItemText {
  padding-right: 24px; }

.fakeElement {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  padding: 0 16px;
  border: 1px solid transparent;
  letter-spacing: 0px;
  padding-right: 38px;
  text-align: left;
  border-top: none;
  border-bottom: none;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.fakeElement:after {
  position: absolute;
  content: '';
  display: inline-block;
  background: url("../img/generalpurposedropdown/select-open-icon.svg") no-repeat;
  background-position: center;
  width: 24px;
  height: 24px;
  margin: 0;
  right: 8px; }

.generalPurposeDropdown-elementContainer {
  display: flex;
  width: 100%; }

.generalPurposeDropdown-elementFriendlyNameSpan {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis; }

.expiryInfoModalContent {
  padding: 8px 24px 24px 24px;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  flex-flow: column; }

.expiryInfoButton {
  text-align: left;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit; }
  .expiryInfoButton.hidden {
    display: none; }
  .expiryInfoButton.noMarginBottom {
    margin-bottom: 0; }

.expiryInfoVisitLink {
  padding: 12px 8px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  width: 100%;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  text-align: left; }
  .expiryInfoVisitLink:hover {
    color: rgba(0, 109, 41, 0.85);
    z-index: 1; }
  .expiryInfoVisitLink: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; }
  .expiryInfoVisitLink-notVisible {
    visibility: hidden; }
  .expiryInfoVisitLink.hidden {
    display: none; }
  .expiryInfoVisitLink.absoluteLink {
    position: absolute;
    bottom: 8px; }
  .expiryInfoVisitLink.whiteLink {
    display: inline-block;
    width: auto;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .expiryInfoVisitLink.whiteLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .expiryInfoVisitLink.blueTooltipLink {
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px; }
  .expiryInfoVisitLink.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .expiryInfoVisitLink.blueLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .expiryInfoVisitLink.inline {
    display: inline-block;
    width: auto; }
  .expiryInfoVisitLink.blue {
    color: #212121 !important;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }

.expiryInfoOrange {
  color: #df6938; }

.selectMainBenefitModal-modalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 512px; }
  @media only screen and (max-width: 767px) {
    .selectMainBenefitModal-modalContainer {
      width: 316px; } }

.selectMainBenefitModal-errorModalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 384px; }
  @media only screen and (max-width: 767px) {
    .selectMainBenefitModal-errorModalContainer {
      width: 316px; } }

.selectMainBenefitModal-modalContent {
  padding: 24px;
  display: flex;
  flex-direction: column; }

.selectMainBenefitModal-listTop {
  margin-bottom: 32px; }

.selectMainBenefitModal-listTopElement {
  margin: 0;
  margin-bottom: 16px; }

.selectMainBenefitModal-listTopElement:last-child {
  margin-bottom: 0; }

.selectMainBenefitModal-list {
  margin-bottom: 24px; }

.selectMainBenefitModal-listElementContainer {
  display: flex;
  align-items: flex-start; }

.selectMainBenefitModal-listElementContainerFaded {
  display: flex;
  align-items: flex-start;
  opacity: 0.5; }

.selectMainBenefitModal-listElementText {
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-left: 8px;
  align-self: center; }
  .selectMainBenefitModal-listElementText-noImage {
    margin-left: 0; }

.selectMainBenefitModal-listElementTitle {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0; }

.selectMainBenefitModal-listElementDesctiption {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0; }

.selectMainBenefitModal-listElement {
  margin: 0;
  margin-bottom: 16px;
  margin-right: 12px; }

.selectMainBenefitModal-listElement:last-child {
  margin-bottom: 0; }

.selectMainBenefitModal-buttonContainer {
  min-width: 282px;
  align-self: center; }

.selectMainBenefitModal-smallModalContainer {
  padding: 24px;
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;
  align-items: center; }

.selectMainBenefitModal-errorModalParagraph {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  max-width: 336px;
  margin-top: 8px;
  margin-bottom: 16px; }

.selectMainBenefitModal-manyConnectionsParagraph {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  margin-top: 8px;
  margin-bottom: 16px; }

.selectMainBenefitModal-warningFontBold {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600; }

.selectMainBenefitModal-smallModalTitle {
  margin: 0;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  max-width: 320px; }

.selectMainBenefitModal-buttonsSection {
  display: flex;
  flex-wrap: wrap;
  padding: 0 34px;
  justify-content: center; }

.selectMainBenefitModal-smallModalCancelButton {
  color: #212121;
  background-color: #ffffff;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #212121;
  padding: 12px;
  border-radius: 16px;
  min-width: 128px; }
  .selectMainBenefitModal-smallModalCancelButton:hover {
    opacity: 0.8; }
  .selectMainBenefitModal-smallModalCancelButton:visited {
    opacity: 0.9; }
  .selectMainBenefitModal-smallModalCancelButton:focus {
    box-shadow: 0px 0px 8px 3px rgba(0, 153, 204, 0.7); }

.selectMainBenefitModal-smallModalConfirmButton {
  min-width: 128px;
  padding: 12px;
  min-width: 128px;
  box-sizing: border-box;
  min-height: 40px;
  margin-left: 12px; }
  @media only screen and (max-width: 767px) {
    .selectMainBenefitModal-smallModalConfirmButton {
      margin-top: 12px;
      margin-left: 0; } }

.selectMainBenefitModal-modalContainerSelectTaxId {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 432px; }
  @media only screen and (max-width: 767px) {
    .selectMainBenefitModal-modalContainerSelectTaxId {
      width: 316px; } }

.selectMainBenefitModal-modalContainerSelectCompany {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 432px;
  margin-top: 100px;
  margin-bottom: 100px; }
  @media only screen and (max-width: 767px) {
    .selectMainBenefitModal-modalContainerSelectCompany {
      width: 316px; } }

.selectMainBenefitModal-informationIcon {
  pointer-events: all;
  position: absolute;
  right: 8px; }

.selectMainBenefitModal-disabledContent {
  pointer-events: none;
  color: rgba(33, 33, 33, 0.4) !important; }

.selectMainBenefitModal-tooManyConnectionsModal {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 404px; }
  @media only screen and (max-width: 767px) {
    .selectMainBenefitModal-tooManyConnectionsModal {
      width: 316px; } }

.selectMainBenefitModal-tooManyConnectionsModalContainer {
  padding: 24px;
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;
  align-items: center; }

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

.selectMainBenefitModal-warningFontRegular {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.selectBenefitFlow-modalContainer {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 512px; }
  @media only screen and (max-width: 767px) {
    .selectBenefitFlow-modalContainer {
      width: 316px; } }

.selectBenefitFlow-greyTooltip {
  position: absolute;
  bottom: 0;
  right: 0;
  left: unset;
  display: inline-block;
  width: 16px;
  height: 16px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #212121 !important;
  border: 1px solid #212121;
  padding: 0;
  text-align: center;
  border-radius: 100%; }

.selectBenefitFlow-arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  bottom: -16px;
  height: 14px;
  top: -14px;
  bottom: auto;
  left: 76%; }
  @media only screen and (max-width: 480px) {
    .selectBenefitFlow-arrow {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      transform: translateX(0); } }
  .selectBenefitFlow-arrow:after {
    content: '';
    position: absolute;
    left: 22px;
    bottom: -20px;
    top: auto;
    width: 22px;
    height: 24px;
    transform: rotate(45deg);
    background: #e6e6e6;
    border-radius: 4px; }

.selectBenefitFlow-title {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 24px; }

.selectBenefitFlow-list {
  padding: 0 8px;
  margin-bottom: 16px; }

.selectBenefitFlow-paragraphEdit {
  margin: 0 8px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.selectBenefitFlow-contactInfoTop {
  display: flex;
  align-items: center;
  margin-bottom: 4px; }

.selectBenefitFlow-contactInfoBottom {
  margin-left: 32px; }

.selectBenefitFlow-contactInfoContainer {
  padding: 12px 24px;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  margin: 0 -24px; }

.selectBenefitFlow-titleAccount {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121; }

.selectBenefitFlow-descriptionConnections {
  overflow-x: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #212121;
  position: relative;
  padding-right: 16px; }

.selectBenefitFlow-descriptionConnections {
  overflow-x: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  position: relative; }

.selectBenefitFlow-benefitsSection {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  margin-bottom: 12px; }

.selectBenefitFlow-listElementTitle {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0; }

.selectBenefitFlow-listElementTitleBold {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0; }

.selectBenefitFlow-linearGradient {
  height: 2px;
  width: 100%;
  display: block;
  background: #00a5e3;
  margin-top: 4px; }

.selectBenefitFlow-benefitGroup {
  margin-bottom: 12px; }

.selectBenefitFlow-benefitGroupTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0; }

.selectBenefitFlow-benefitGroupBottom {
  margin-top: 32px;
  margin-bottom: 12px; }

.selectBenefitFlow-buttonContainer {
  min-width: 100px;
  align-self: flex-end;
  margin-top: 16px; }

.selectBenefitFlow-buttonContainerNoTerms {
  min-width: 100px;
  align-self: flex-end;
  margin-top: 32px; }

.selectBenefitFlow-termsLabel {
  margin-left: 4px; }

.selectBenefitFlow-checkbox {
  position: relative;
  margin: 8px;
  text-align: left;
  margin-top: 16px;
  margin-bottom: 0; }
  .selectBenefitFlow-checkbox.termsCheckbox {
    display: flex; }
    .selectBenefitFlow-checkbox.termsCheckbox label:before {
      top: 8px; }
    .selectBenefitFlow-checkbox.termsCheckbox input[type='checkbox'] {
      margin: 0; }
      .selectBenefitFlow-checkbox.termsCheckbox input[type='checkbox']:checked + label:after {
        top: 13.6px; }
  .selectBenefitFlow-checkbox.md-checkbox-inline {
    display: inline-block; }
  .selectBenefitFlow-checkbox.invoiceCheckbox {
    display: flex;
    margin: 0;
    opacity: 0.9; }
  .selectBenefitFlow-checkbox.greenCheckbox {
    margin: 0; }
    .selectBenefitFlow-checkbox.greenCheckbox label {
      background: #00a5e3;
      display: block;
      width: 22px;
      height: 22px;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 5px; }
      .selectBenefitFlow-checkbox.greenCheckbox label:before {
        border: none;
        background-color: #ffffff !important;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .selectBenefitFlow-checkbox.greenCheckbox input[type='checkbox']:checked + label:after {
      top: 6px;
      left: 5px; }
  .selectBenefitFlow-checkbox label {
    cursor: pointer; }
    .selectBenefitFlow-checkbox label.regularText {
      width: 100%;
      margin-left: 6px; }
    .selectBenefitFlow-checkbox label:before, .selectBenefitFlow-checkbox label:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box; }
    .selectBenefitFlow-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; }
    .selectBenefitFlow-checkbox label a {
      padding: 0 !important;
      margin: 0 !important;
      text-decoration: underline; }
    .selectBenefitFlow-checkbox label a.visitLink.blue {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .selectBenefitFlow-checkbox label .checkboxContent {
      display: inline-flex;
      flex-direction: column;
      position: relative;
      top: -2px; }
      .selectBenefitFlow-checkbox label .checkboxContent .checkboxTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
      .selectBenefitFlow-checkbox label .checkboxContent .checkboxSubtitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
    .selectBenefitFlow-checkbox label.withIndication {
      position: relative;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      padding-left: 30px; }
      .selectBenefitFlow-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', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        padding: 0 8px;
        color: #00a5e3;
        border-radius: 12px; }
        .selectBenefitFlow-checkbox label.withIndication .charge.chargeSend {
          color: #004b87; }
  .selectBenefitFlow-checkbox input.disabled {
    cursor: not-allowed;
    pointer-events: none; }
  .selectBenefitFlow-checkbox input[type='checkbox'] {
    outline: 0;
    visibility: hidden;
    width: 24px;
    margin: 0;
    margin-right: 10px; }
    .selectBenefitFlow-checkbox input[type='checkbox']:checked + label:before {
      background: transparent; }
    .selectBenefitFlow-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; }
    .selectBenefitFlow-checkbox input[type='checkbox']:disabled + label:before {
      border-color: #f2f2f3; }
    .selectBenefitFlow-checkbox input[type='checkbox']:disabled:checked + label:before {
      background: #f2f2f3; }
  .selectBenefitFlow-checkbox a {
    padding: 0 !important; }

.selectBenefitFlow-modalImage {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  height: 205px;
  background-color: white; }

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

.selectBenefitFlow-modalContent {
  padding: 24px; }

.selectBenefitFlow-modalTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  margin-top: -8px;
  margin-bottom: 16px; }

.selectBenefitFlow-modalParagraph {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  line-height: 16px;
  margin-top: 0;
  margin-bottom: 8px; }

.selectBenefitFlow-modalParagraph:last-child {
  margin-bottom: 0; }

.selectBenefitFlow-modalParagraphWithBorder {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  border-top: 1px solid #212121;
  padding-top: 8px;
  margin-bottom: 0;
  margin-top: 0; }

.selectBenefitFlow-modalParagraphHighlight {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.selectBenefitFlow-benefitSubList {
  display: flex;
  flex-direction: column; }

.selectBenefitFlow-benefitSubListFaded {
  display: flex;
  flex-direction: column;
  opacity: 0.5; }

.selectBenefitFlow-benefitSubListElement {
  display: flex;
  margin-bottom: 4px;
  align-items: flex-start; }

.selectBenefitFlow-benefitSubListElement:last-child {
  margin-bottom: 0; }

.selectBenefitFlow-checkboxContainerList {
  max-height: 320px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 16px; }
  .selectBenefitFlow-checkboxContainerList.withoutShadow {
    box-shadow: none;
    max-height: initial;
    overflow-y: initial; }

.selectBenefitFlow-radioListContainer {
  max-height: 320px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 16px; }
  .selectBenefitFlow-radioListContainer.withoutShadow {
    box-shadow: none;
    max-height: initial;
    overflow-y: initial; }
  .selectBenefitFlow-radioListContainer li {
    margin-bottom: 8px; }

.selectBenefitFlow-inputWithImage {
  position: relative;
  padding-left: 32px; }
  .selectBenefitFlow-inputWithImage i {
    position: absolute;
    right: 16px;
    top: 10px;
    cursor: pointer; }

.selectBenefitFlow-selectAccountTooltipSmall {
  bottom: -6px;
  right: -116px;
  width: 220px;
  -webkit-transform: translate(-50%, 100%);
  -moz-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%); }
  @media only screen and (max-width: 480px) {
    .selectBenefitFlow-selectAccountTooltipSmall {
      display: none !important; } }

.benefitbox-inlineButtonsContainer {
  display: flex; }
  @media only screen and (max-width: 480px) {
    .benefitbox-inlineButtonsContainer {
      flex-direction: column;
      align-items: flex-start; } }
  .benefitbox-inlineButtonsContainer a:first-child {
    margin-right: 12px; }
    @media only screen and (max-width: 480px) {
      .benefitbox-inlineButtonsContainer a:first-child {
        margin-right: 0;
        margin-bottom: 12px; } }

.benefitbox-title {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0;
  margin-bottom: 4px; }

.benefitbox-desrtiption {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0;
  margin-bottom: 12px; }

.benefitbox-contentContainer {
  display: flex;
  flex-direction: column; }

.benefitbox-smallImage {
  object-fit: contain;
  object-position: center; }

.benefitbox-detailsContent {
  display: flex;
  flex-flow: row;
  margin-top: 8px; }

.manageScheme-box-paragraphTop {
  color: #212121;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  margin-top: 8px;
  margin-bottom: 16px; }

.manageScheme-box-paragraphAccountNumber {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121; }

.manageScheme-titleUndelinedGradient-container {
  margin-bottom: 8px; }

.manageScheme-list {
  padding: 0 8px;
  margin-bottom: 16px;
  margin-top: 8px; }

.manageScheme-listNoMarginBottom {
  padding: 0 8px;
  margin-bottom: 16px;
  margin-top: 8px; }

.manageScheme-listMainBenefit {
  margin-top: 8px; }

.manageScheme-listTopElement {
  margin: 0;
  margin-bottom: 16px; }

.manageScheme-listTopElement:last-child {
  margin-bottom: 0; }

.manageScheme-listElementContainer {
  display: flex;
  align-items: flex-start; }

.manageScheme-listElementText {
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-left: 8px;
  align-self: center; }
  .manageScheme-listElementText-noImage {
    margin-left: 0; }

.manageScheme-listElementTitle {
  margin: 0;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0; }

.manageScheme-listElementDesctiption {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0; }

.manageScheme-listElementDesctiption {
  margin: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0; }

.manageScheme-button {
  margin-top: 8px; }

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

.manageScheme-warningSection-image {
  width: 24px; }

.manageScheme-donut {
  min-width: 96px;
  margin-top: -6px !important; }
  @media only screen and (max-width: 480px) {
    .manageScheme-donut {
      margin-top: 16px !important; } }

.manageScheme-iconImage-section {
  display: flex;
  justify-content: center;
  margin-top: 10px; }

.manageScheme-informationIcon {
  pointer-events: all;
  margin-right: -28px; }

.manageScheme-detailsContentRight {
  max-height: 116px; }

.landingPage-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 24px; }

.landingPage-body {
  position: relative;
  height: 100vh; }

.landingPage-backgroundImage {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 0;
  max-height: 194px; }

.internetBackup-modal-paragraph {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0; }
  .internetBackup-modal-paragraph-centered {
    text-align: center; }

.internetBackup-modal-button {
  text-align: right;
  margin-top: 24px; }

.internetBackup-modal-container {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  transition: all 0.3s ease;
  border-radius: 16px;
  margin: auto;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 482px; }
  @media only screen and (max-width: 767px) {
    .internetBackup-modal-container {
      width: 316px; } }

.internetBackup-modal-content {
  padding: 16px; }

.internetBackup-modal-list {
  display: flex;
  flex-flow: column;
  margin-top: 16px; }
  .internetBackup-modal-list-scrollableContainer {
    padding-right: 16px;
    overflow-y: auto;
    margin-right: 16px;
    margin-bottom: 8px; }
    .internetBackup-modal-list-scrollableContainer-small {
      max-height: 254px; }
    .internetBackup-modal-list-scrollableContainer-medium {
      max-height: 362px; }
  .internetBackup-modal-list-element {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 12px 0;
    position: relative;
    border-bottom: 1px solid rgba(33, 33, 33, 0.1); }
    .internetBackup-modal-list-element:last-child {
      border-bottom: none; }
    .internetBackup-modal-list-element-content {
      display: flex;
      flex-flow: column !important;
      color: #212121;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      letter-spacing: 0; }
      .internetBackup-modal-list-element-content-bold {
        font-weight: normal;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .internetBackup-modal-list-element-content-description {
        margin-top: 2px; }
    .internetBackup-modal-list-element-icon {
      margin-left: auto;
      font-style: normal;
      color: #212121; }

.ordersHistory-search {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important; }

.ordersHistory-emptyState {
  display: flex;
  align-items: center;
  justify-content: center; }
  .ordersHistory-emptyState-image {
    max-width: 64px; }
  .ordersHistory-emptyState-title {
    margin: 16px 0 0 0;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121;
    letter-spacing: 0;
    text-align: center; }
  .ordersHistory-emptyState-description {
    margin: 8px 0 0 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #212121; }

.ordersHistory-notification {
  display: flex;
  align-items: flex-start;
  margin-top: 8px;
  margin-bottom: 16px; }
  .ordersHistory-notification-icon {
    height: 20px;
    margin-right: 4px; }
  .ordersHistory-notification-paragraph {
    margin: 0;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    color: #212121; }

.ordersHistory-group {
  margin-bottom: 32px;
  padding-top: 8px; }
  .ordersHistory-group-heading {
    margin: 0 0 24px 0;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    color: #212121;
    letter-spacing: 0; }

.ordersHistory-container {
  background-color: #ffffff;
  padding: 12px 44px 12px 16px;
  display: flex;
  justify-content: flex-start;
  min-height: 60px;
  flex-wrap: nowrap;
  border-radius: 15px; }

.ordersHistory-icon {
  height: 24px;
  width: 24px; }

.ordersHistory-details {
  display: flex;
  flex-direction: column;
  margin-left: 8px; }
  .ordersHistory-details-title {
    margin: 0;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121;
    letter-spacing: 0; }
  .ordersHistory-details-description {
    margin: 4px 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #212121;
    letter-spacing: 0; }
  .ordersHistory-details-status {
    margin: 4px 0 0 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #767676;
    letter-spacing: 0; }

.ordersHistory-loadingState {
  border-radius: 16px;
  background: #ffffff;
  padding: 24px;
  display: flex;
  margin-bottom: 8px; }
  .ordersHistory-loadingState-group {
    margin-top: 40px; }
  .ordersHistory-loadingState-box {
    background: #f2f2f3;
    border-radius: 8px;
    width: 24px;
    height: 24px; }
  .ordersHistory-loadingState-container {
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    margin-bottom: -4px;
    width: 100%; }
    .ordersHistory-loadingState-container-rectangular {
      background: #f2f2f3;
      height: 12px;
      width: 100%;
      max-width: 312px;
      margin-bottom: 4px; }
      .ordersHistory-loadingState-container-rectangular-bigger {
        max-width: 380px; }

.ordersHistory-content {
  padding: 24px 24px 32px 24px; }

.ordersHistory-collapsible-summary {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0; }

.ordersHistory-collapsible-content {
  padding-left: 28px;
  padding-top: 16px; }

.ordersHistory-collapsible-icon {
  width: 12px; }
  .ordersHistory-collapsible-icon-container {
    padding: 6px 6px 6px 8px; }

.ordersHistory-collapsible-details {
  padding: 28px 28px 28px 12px; }

.ordersHistory-product {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  margin-right: 8px; }
  .ordersHistory-product-icon {
    padding: 4px;
    margin-right: 4px; }
  .ordersHistory-product-iconPhone {
    padding: 4px;
    font-size: 20px; }
  .ordersHistory-product-iconMonitor {
    padding: 0;
    margin-right: 4px;
    font-size: 20px; }
  .ordersHistory-product-container {
    padding-top: 16px; }

.ordersHistory-products {
  display: flex;
  flex-wrap: wrap;
  padding-left: 28px; }

.ordersHistory-box {
  border: 1px solid #e6e6e6;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 24px;
  margin-bottom: 16px;
  margin-right: 10px; }
  .ordersHistory-box-section {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -24px; }
  .ordersHistory-box-element {
    padding-right: 40px;
    padding-bottom: 24px; }
    .ordersHistory-box-element-progress {
      width: 344px; }
    .ordersHistory-box-element-table {
      min-width: 316px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      background-color: transparent;
      border: none;
      margin-top: -4px;
      display: flex; }
      @media only screen and (max-width: 767px) {
        .ordersHistory-box-element-table {
          min-width: initial; } }
      .ordersHistory-box-element-table-row {
        border: none; }
        .ordersHistory-box-element-table-row:first-child {
          background-color: transparent; }
      .ordersHistory-box-element-table-cell {
        padding: 4px 12px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        color: #212121;
        letter-spacing: 0; }
        .ordersHistory-box-element-table-cell:first-child {
          padding-left: 0; }
        .ordersHistory-box-element-table-cell-bold {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
    .ordersHistory-box-element-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px; }
      .ordersHistory-box-element-item-left {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px; }
        .ordersHistory-box-element-item-left-title {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          color: #212121;
          letter-spacing: 0; }
        .ordersHistory-box-element-item-left-count {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          letter-spacing: 0; }
      .ordersHistory-box-element-item-price {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        color: #212121;
        letter-spacing: 0; }
    .ordersHistory-box-element-price {
      text-align: left;
      min-width: 120px;
      flex: 0; }
      @media only screen and (max-width: 767px) {
        .ordersHistory-box-element-price {
          display: none; } }
    .ordersHistory-box-element-heading {
      margin: 0;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      color: #212121; }
      .ordersHistory-box-element-heading-priceSpan {
        display: none; }
        @media only screen and (max-width: 767px) {
          .ordersHistory-box-element-heading-priceSpan {
            display: block; } }

.ordersHistory-progressBar {
  position: relative;
  margin-left: 10px;
  margin-top: 24px; }
  .ordersHistory-progressBar::after {
    content: '';
    position: absolute;
    width: 2px;
    left: 15px;
    background-color: #848484;
    top: 0;
    bottom: 0;
    margin-top: 18px;
    margin-bottom: 12px; }
  .ordersHistory-progressBar-green::after {
    content: '';
    position: absolute;
    width: 2px;
    left: 15px;
    background-color: #0ea600;
    top: 0;
    bottom: 0;
    margin-top: 18px;
    margin-bottom: 12px; }
  .ordersHistory-progressBar-element {
    display: flex;
    align-items: center;
    margin-bottom: 16px; }
    .ordersHistory-progressBar-element:last-child {
      margin-bottom: 0; }
  .ordersHistory-progressBar-section {
    display: flex;
    align-items: center; }
    @media only screen and (max-width: 767px) {
      .ordersHistory-progressBar-section {
        flex-wrap: wrap; } }
  .ordersHistory-progressBar-span {
    margin-left: 4px;
    display: flex;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #848484; }
    .ordersHistory-progressBar-span-active {
      margin-left: 4px;
      color: #212121; }
  .ordersHistory-progressBar-image {
    width: 16px;
    height: 16px;
    margin: 8px;
    z-index: 1; }
    .ordersHistory-progressBar-image-large {
      width: 24px;
      height: 24px;
      margin-left: 4px;
      margin-right: 4px;
      z-index: 1; }

.ordersHistory-paragraph {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center; }
  .ordersHistory-paragraph-icon {
    margin-right: 4px; }
  .ordersHistory-paragraph:last-child {
    margin-bottom: 0; }

.ordersHistory-chipButton {
  margin-left: 4px; }

.ordersHistory-separator {
  margin: 0;
  border: none;
  height: 1px;
  color: #212121;
  background-color: #212121;
  opacity: 0.5;
  margin: 8px 0 16px 0; }

.ordersHistory-print {
  color: #212121;
  align-self: flex-end;
  cursor: pointer;
  margin-left: 16px;
  margin-top: 16px;
  min-width: 94px; }

.ordersHistory-orderInfo {
  display: flex;
  justify-content: space-between; }
  @media only screen and (max-width: 767px) {
    .ordersHistory-orderInfo {
      flex-direction: column; } }

.ordersHistory-message {
  margin-top: 18px;
  width: 100%; }
  .ordersHistory-message-container {
    display: flex;
    padding: 8px;
    background-color: #f4f8fb;
    border: 1px solid #2775b2;
    border-radius: 16px; }
  .ordersHistory-message-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px; }
  .ordersHistory-message-paragraph {
    margin: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #212121;
    letter-spacing: 0; }

.ordersHistory-modal-body {
  padding: 8px 48px 24px 48px; }

.ordersHistory-modal-heading {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  margin: 16px 0; }

.ordersHistory-modal-paragraph {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  margin: 8px 0; }
  .ordersHistory-modal-paragraph-bottom {
    margin-top: 24px;
    margin-left: -32px;
    margin-right: -32px;
    color: #848484; }
  .ordersHistory-modal-paragraph:last-child {
    margin-bottom: 0; }
  .ordersHistory-modal-paragraph:first-child {
    margin-top: 16px; }
  .ordersHistory-modal-paragraph-single {
    margin-top: 16px;
    margin-bottom: 24px; }
    .ordersHistory-modal-paragraph-single:last-child {
      margin-bottom: 24px; }

.ordersHistory-modal-span {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.ordersHistory-modal-link {
  text-decoration: underline;
  color: #00a5e3 !important; }

.ordersHistory-footer {
  display: flex;
  flex-direction: column;
  gap: 24px; }

.tvTrialsModalTitleContainer {
  padding-left: 24px; }

.tvTrialsModalAlert {
  margin-top: 8px;
  margin-bottom: 24px;
  display: flex;
  gap: 8px; }
  .tvTrialsModalAlertImage {
    height: 16px;
    width: 16px;
    align-self: flex-start; }

.tvTrialsModalActions {
  display: flex;
  gap: 16px;
  max-width: 324px;
  margin: auto; }

.tvTrialsPaymentSelect {
  margin-top: 34px !important; }

.shopEmptyState {
  display: flex;
  align-items: center;
  justify-content: center; }
  .shopEmptyStateImage {
    max-width: 64px; }
  .shopEmptyStateTitle {
    margin: 0;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    color: #212121;
    letter-spacing: 0;
    text-align: center;
    line-height: 20px; }
  .shopEmptyStateDescription {
    margin: 0;
    margin-top: 8px;
    color: #212121;
    letter-spacing: 0;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700; }

.bottomFixedPanel {
  padding: 10px;
  padding: 16px 24px;
  padding-left: 48px;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background-color: #e6e6e6;
  z-index: 10;
  border-radius: 16px 0 0 0;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  bottom: 22px;
  margin-bottom: -22px; }
  @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .bottomFixedPanel {
      width: 100%; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .bottomFixedPanel {
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    .bottomFixedPanel {
      width: 100%;
      flex-flow: column;
      align-items: center;
      gap: 16px; } }
  .bottomFixedPanel.opened {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  @media only screen and (max-width: 480px) {
    .bottomFixedPanel {
      padding: 16px; } }
  .bottomFixedPanelContainer {
    margin-bottom: 72px; }
    @media only screen and (max-width: 767px) {
      .bottomFixedPanelContainer {
        margin-bottom: 136px; } }
  .bottomFixedPanelContents {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 24px; }
  .bottomFixedPanelActions {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-end; }
  .bottomFixedPanelAction {
    max-height: 40px; }

.proofOfOwnershipModal {
  max-width: 32.25rem; }
  .proofOfOwnershipModal .proofOfOwnershipSendEmailBox {
    margin: 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column; }
    .proofOfOwnershipModal .proofOfOwnershipSendEmailBox .proofOfOwnershipSendEmailTitle {
      margin-bottom: 2.625rem; }
    .proofOfOwnershipModal .proofOfOwnershipSendEmailBox .proofOfOwnershipSendEmailInput {
      margin-bottom: 1.5rem; }
    .proofOfOwnershipModal .proofOfOwnershipSendEmailBox .proofOfOwnershipSendEmailButton {
      align-self: flex-end;
      max-width: 7.75rem; }
    @media screen and (max-width: 25rem) {
      .proofOfOwnershipModal .proofOfOwnershipSendEmailBox .proofOfOwnershipSendEmailTitle {
        margin-bottom: 2.625rem;
        text-align: center; }
      .proofOfOwnershipModal .proofOfOwnershipSendEmailBox .proofOfOwnershipSendEmailButton {
        align-self: stretch;
        width: 100%;
        max-width: 100%; } }
  .proofOfOwnershipModal.proofOfOwnershipErrorTryLaterModal {
    max-width: 25rem; }
    .proofOfOwnershipModal.proofOfOwnershipErrorTryLaterModal .proofOfOwnershipErrorTryLaterBox {
      display: flex;
      flex-direction: column;
      margin: 1.5rem;
      align-items: center; }
      .proofOfOwnershipModal.proofOfOwnershipErrorTryLaterModal .proofOfOwnershipErrorTryLaterBox .proofOfOwnershipErrorTryLaterTitle {
        text-align: center;
        margin-bottom: 1.5rem; }
      .proofOfOwnershipModal.proofOfOwnershipErrorTryLaterModal .proofOfOwnershipErrorTryLaterBox .proofOfOwnershipErrorTryLaterButton {
        padding: 0.75rem;
        width: 100%;
        max-width: 9.375rem; }
  .proofOfOwnershipModal .proofOfOwnershipSuccessBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch; }
    .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessIcon {
      margin: 1.5rem;
      height: 5.25rem;
      width: 5.25rem; }
    .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessTitle {
      margin-bottom: 0.375rem;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700; }
    .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessContent {
      margin-inline: 1.5rem;
      margin-bottom: 0.5rem;
      text-align: center; }
    .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessActions {
      display: flex;
      flex-direction: row;
      align-self: stretch;
      justify-content: space-between;
      margin: 1.5rem; }
      .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessActions .proofOfOwnershipSuccessActionElement {
        display: flex;
        align-items: center;
        color: #0ea600;
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 600; }
        .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessActions .proofOfOwnershipSuccessActionElement i {
          margin-right: 0.375rem; }
    @media only screen and (max-width: 47.9375rem) {
      .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessActions {
        flex-direction: column;
        align-items: center; }
        .proofOfOwnershipModal .proofOfOwnershipSuccessBox .proofOfOwnershipSuccessActions .proofOfOwnershipSuccessActionElement {
          margin: 0.5rem 0; } }
  .proofOfOwnershipModal .proofOfOwnershipOPTAuth {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.5rem; }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipOPTAuthTitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      margin-bottom: 0.5rem; }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin {
      display: flex;
      margin-top: 1.5rem;
      align-self: stretch; }
      .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipPrefilledCellphoneNumber {
        display: flex;
        flex-direction: column;
        align-self: flex-end;
        color: #212121;
        padding-bottom: 0;
        flex-grow: 2; }
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipPrefilledCellphoneNumber .prefilledCellphoneNumberTitle {
          color: #212121;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          margin-bottom: 0.25rem;
          letter-spacing: 0em; }
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipPrefilledCellphoneNumber .prefilledCellphoneNumber {
          padding: 12px 8px;
          border-radius: 16px;
          border: 1px solid #212121; }
      .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipDropdownSelect {
        max-width: 20.25rem; }
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipDropdownSelect .proofOfOwnershipDropdownSelectTitle {
          color: #212121;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          letter-spacing: 0; }
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipDropdownSelect input {
          border-bottom: solid 0.0625rem #212121; }
      @media only screen and (max-width: 47.9375rem) and (min-width: 25rem) {
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipDropdownSelect {
          max-width: 7.5rem; } }
      .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipGetPinButton {
        font-size: 1rem;
        margin: 0 0 0 1rem;
        padding: 0.75rem 1rem;
        height: 2.5rem;
        min-width: 0;
        align-self: flex-end; }
    @media only screen and (max-width: 25rem) {
      .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin {
        flex-direction: column;
        align-items: center; }
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipPrefilledCellphoneNumber {
          width: 100%;
          align-self: center; }
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipDropdownSelect {
          width: 100%;
          align-self: center; }
        .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipGetPin .proofOfOwnershipGetPinButton {
          margin: 1rem 0 0 0;
          padding: 0.75rem;
          height: 2.5rem;
          width: 100%; } }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipInsertPin label {
      margin-top: 0.375rem;
      color: #212121;
      letter-spacing: 0;
      text-align: left;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipInsertPin .proofOfOwnershipErrorWrongPinTitle {
      color: #df6938; }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipErrorWrongPinMessage {
      align-self: flex-start;
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 0.875rem;
      color: #df6938;
      margin-bottom: -0.875rem; }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipErrorMaxTriesReached {
      align-self: flex-start;
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 0.875rem;
      color: #df6938;
      margin-bottom: -0.875rem; }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipTimeLimitWarning {
      margin-top: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-around; }
      .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipTimeLimitWarning .proofOfOwnershipTimeLimitWarningIcon {
        width: 1.5rem;
        margin-right: 8px; }
      .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipTimeLimitWarning .proofOfOwnershipTimeLimitWarningText {
        text-align: left;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: #848484; }
    .proofOfOwnershipModal .proofOfOwnershipOPTAuth .proofOfOwnershipResendPinText {
      display: flex;
      align-items: center;
      margin: 0.5rem 0 0;
      color: #212121;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }

.multiple-reports-wrapper {
  display: flex;
  margin: 24px;
  justify-content: space-between;
  align-items: center; }
  @media only screen and (max-width: 650px) {
    .multiple-reports-wrapper {
      flex-flow: column; } }
  .multiple-reports-wrapper .multiple-reports-box-container {
    max-width: 100%;
    width: 100%;
    flex-grow: 1; }
    @media only screen and (max-width: 1024px) {
      .multiple-reports-wrapper .multiple-reports-box-container {
        max-width: 260px;
        width: 260px; } }
    @media only screen and (max-width: 650px) {
      .multiple-reports-wrapper .multiple-reports-box-container {
        width: 100%;
        max-width: 500px; } }
    .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-header {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      margin-bottom: 16px; }
    .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box {
      padding: 16px;
      height: 600px;
      max-width: 100%;
      margin: 0;
      border: 1px solid #212121;
      border-radius: 16px;
      overflow-y: hidden;
      display: flex;
      flex-direction: column; }
      @media only screen and (min-width: 1440px) {
        .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box {
          height: 800px; } }
      .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-search {
        margin: 0; }
      .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-select {
        border-bottom: 1px solid #212121;
        padding: 8px 0 12px 0;
        margin: 0 0 16px 0; }
        .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-select a {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #212121; }
          .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-select a label {
            padding-left: 32px;
            display: flex; }
          .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-select a.disabled {
            cursor: not-allowed;
            pointer-events: none;
            opacity: 0.5; }
      .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-list-wrapper {
        position: relative;
        height: 100%; }
        .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-list-wrapper .multiple-reports-list {
          max-height: 100%;
          overflow-y: auto;
          border: none;
          display: flex;
          flex-flow: column;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0; }
          .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-list-wrapper .multiple-reports-list a {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            color: #212121; }
            .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-list-wrapper .multiple-reports-list a label {
              padding-left: 32px;
              display: flex;
              align-items: center;
              justify-content: space-between; }
              .multiple-reports-wrapper .multiple-reports-box-container .multiple-reports-box .multiple-reports-list-wrapper .multiple-reports-list a label .md-checkbox-labelIcon {
                margin: 0; }
  .multiple-reports-wrapper .multiple-reports-button-box {
    display: flex;
    flex-flow: column;
    max-width: 48px;
    gap: 16px;
    margin: 0 24px; }
    .multiple-reports-wrapper .multiple-reports-button-box .primaryButton {
      padding: 12px;
      width: 48px;
      height: 48px;
      min-width: 0; }
    @media only screen and (max-width: 650px) {
      .multiple-reports-wrapper .multiple-reports-button-box {
        transform: rotate(90deg); } }

.multiple-reports-dropdown {
  max-width: 320px; }

.vouchEmptyBucketBox {
  padding: 24px 32px; }
  .vouchEmptyBucketBox .vouchEmptyBucketBoxTitle {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: #212121;
    margin-bottom: 8px;
    text-align: center; }
  .vouchEmptyBucketBox .vouchEmptyBucketBoxSubtitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-align: center; }

.megaFilterContainer.vouchBucketBox span.sectionTitle,
.ddFilterWrapper.vouchBucketBox span.sectionTitle {
  border-radius: 16px 16px 0 0 !important;
  border-bottom: 2px solid #e6e6e6; }

.megaFilterContainer.vouchBucketBox .megaFilter .megaFilterContent span,
.ddFilterWrapper.vouchBucketBox .megaFilter .megaFilterContent span {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.megaFilterContainer.vouchBucketBox .ddFilter .ddFilterContent span,
.ddFilterWrapper.vouchBucketBox .ddFilter .ddFilterContent span {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.megaFilterContainer.vouchBucketBox .ddFilter .ddFilterContent .vouchBucketBoxContentText,
.ddFilterWrapper.vouchBucketBox .ddFilter .ddFilterContent .vouchBucketBoxContentText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #212121;
  margin-right: 0px;
  margin-bottom: 16px; }

.megaFilterContainer.vouchBucketBox .ddFilter .ddFilterContent .vouchBucketBoxInputTitle,
.ddFilterWrapper.vouchBucketBox .ddFilter .ddFilterContent .vouchBucketBoxInputTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  margin-right: 0px;
  margin-bottom: 8px; }

.megaFilterContainer.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom,
.ddFilterWrapper.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: normal;
  column-gap: 4px;
  margin: 8px 0 0; }
  .megaFilterContainer.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom p,
  .ddFilterWrapper.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .megaFilterContainer.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom a,
  .ddFilterWrapper.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom a {
    position: static;
    flex-shrink: 0;
    margin: unset; }
  .megaFilterContainer.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom .vouchBucketVisitLink,
  .ddFilterWrapper.vouchBucketBox .ddFilter .detailsBottom.vouchBucketBoxDetailsBottom .vouchBucketVisitLink {
    display: flex;
    justify-content: flex-start;
    width: 29%;
    padding: 0;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600; }

.b2bWalletPopupBody {
  padding: 0px 16px 16px 40px; }
  .b2bWalletPopupBody .b2bWalletList {
    display: flex;
    flex-direction: column;
    max-height: 336px;
    overflow-y: scroll; }
    .b2bWalletPopupBody .b2bWalletList .b2bWalletListAnchorItem {
      width: 100%;
      display: flex;
      color: unset; }
    .b2bWalletPopupBody .b2bWalletList :not(:last-child) {
      border-bottom: 1px solid #e6e6e6; }
    .b2bWalletPopupBody .b2bWalletList .b2bWalletListItem {
      padding: 12px 16px;
      margin-right: 16px; }

.vouchBucketRemainderBox {
  padding: 24px 16px;
  row-gap: 24px; }

.vouchBucketRemainder {
  border-bottom: 1px solid #9d9d9c; }
  .vouchBucketRemainder .remainderTitle {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px; }
  .vouchBucketRemainder .vouchBucketRemainderAmount {
    display: flex;
    flex-direction: row;
    column-gap: 4px;
    margin-bottom: 16px;
    align-items: center; }
    .vouchBucketRemainder .vouchBucketRemainderAmount img {
      color: #00a5e3; }
    .vouchBucketRemainder .vouchBucketRemainderAmount .remainderInt {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 32px;
      line-height: 36px;
      font-weight: 700;
      color: #212121; }
    .vouchBucketRemainder .vouchBucketRemainderAmount .remainderDec {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 24px;
      line-height: 28px;
      font-weight: 700;
      color: #212121; }
    .vouchBucketRemainder .vouchBucketRemainderAmount .remainderExpDate {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }

.noBorder {
  border: none !important; }

.vouchBucketRemainderDetailsTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }

.vouchBucketRemainderDetailsList li {
  margin: 0 16px 12px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6e6e6; }
  .vouchBucketRemainderDetailsList li .detailsListItemTitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 4px; }
  .vouchBucketRemainderDetailsList li .detailsListItemSubtitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    display: block; }
  .vouchBucketRemainderDetailsList li .detailsListItemAmountInt {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .vouchBucketRemainderDetailsList li .detailsListItemAmountDec {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700; }
  .vouchBucketRemainderDetailsList li .detailsListItemNote {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #848484;
    display: block; }

.vouchBucketRemainderDetailsList li:last-child {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px; }

.voucherization-bucket-error-state {
  display: flex;
  flex-flow: column;
  gap: 8px; }
  .voucherization-bucket-error-state .voucherization-bucket-error-state-title {
    display: inline-flex;
    gap: 8px;
    align-items: center; }
    .voucherization-bucket-error-state .voucherization-bucket-error-state-title span {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .voucherization-bucket-error-state .voucherization-bucket-error-state-title img {
      height: 24px;
      width: 24px; }
  .voucherization-bucket-error-state .voucherization-bucket-error-state-subtitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }

.activateSIMButton {
  padding: 16px 24px;
  font-size: 16px; }

.productCompleteMargin {
  margin-bottom: 32px; }

.alignProgressItemsStart {
  align-items: start; }

.progressTextWithMargin {
  margin-top: 4px; }

.progressIconNoMarginTop {
  margin-top: 0; }

.progressItemLessMarginBottom {
  margin-bottom: 8px; }

.cancelButton {
  border-color: #df6938;
  color: #df6938;
  margin-bottom: 16px; }
  .cancelButton:hover {
    border-color: #df6938;
    color: #df6938;
    opacity: 0.85; }
  .cancelButton.noBottomMargin {
    margin-bottom: 0 !important; }
  .cancelButton:visited {
    border-color: #df6938;
    color: #df6938; }

.bottomInfoText {
  padding-top: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px; }

.infoRedText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-wrap: nowrap;
  color: #df6938; }

.dangerTextContainer {
  display: flex;
  padding: 8px 16px;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  border: 2px solid #df6938;
  background: #fdf7f5;
  margin-bottom: 24px; }
  .dangerTextContainer.withMarginTop {
    margin-top: 24px; }
  .dangerTextContainer .dangerText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }

.cancelActivationModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 24px; }
  .cancelActivationModalBody .modalParagraph {
    text-align: center;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }

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

body .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;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 16px;
  transition: all 0.2s ease; }
  body .greenButton.disabled {
    color: #848484;
    border-color: #848484;
    pointer-events: none;
    cursor: not-allowed; }
  body .greenButton.greenButtonFullWidth {
    width: 100%; }

body .modalSliderList {
  padding: 16px 24px 24px;
  overflow-y: auto;
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 16px;
  border-radius: 0 0 16px 16px; }
  body .modalSliderList.noGap {
    gap: 0; }
  body .modalSliderList .modalItemSlider {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 16px; }
    body .modalSliderList .modalItemSlider.borderTop {
      border-top: 1px solid #e6e6e6; }
    body .modalSliderList .modalItemSlider.withGreyBackground {
      border-radius: 4px;
      background-color: #f2f2f3 !important; }
    body .modalSliderList .modalItemSlider .modalItemSliderText {
      display: flex;
      flex-direction: column;
      gap: 4px; }
      body .modalSliderList .modalItemSlider .modalItemSliderText .modalItemSliderTitle {
        font-family: 'PeridotPE-SemiBold';
        font-size: 18px;
        line-height: 20px;
        color: #212121; }
        body .modalSliderList .modalItemSlider .modalItemSliderText .modalItemSliderTitle-small {
          font-family: 'PeridotPE-Regular';
          font-size: 16px;
          line-height: 24px;
          color: #212121; }
      body .modalSliderList .modalItemSlider .modalItemSliderText .modalItemSliderBody {
        font-family: 'PeridotPE-Regular';
        font-size: 12px;
        line-height: 16px;
        color: #767676; }
    body .modalSliderList .modalItemSlider .slider {
      color: black; }

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

.contractRepository .box.leftSidebarBox.withMargin.textBox > .gapContent + .lightDivider {
  margin: 24px 0 !important; }

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 {
  overflow: hidden;
  transform: translateZ(0); }

header.spaHeader--appView .header-title img {
  display: block;
  width: 210px;
  height: auto; }

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

@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,
  header.spaHeader--appView .digitalOnboardingLogo.small,
  header.spaHeader--appView .header-title {
    display: none !important; }
  header.spaHeader--appView .exitIcon,
  header.spaHeader--appView .spaAppInlineTitle {
    display: none !important; }
  header.spaHeader--appView .spaAppMobileLogo {
    width: 128px !important;
    height: 37px !important;
    max-height: 37px !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.spaHeader--appView .old-logo {
    display: flex !important;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: center;
    margin: 0 !important;
    transform: translateX(-8px) !important; }
  header.spaHeader--appView.digitalOnboardingHeader {
    padding-top: 0 !important; } }

.arrowDown {
  width: 16px;
  height: 16px; }

.termsText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.detailsText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  display: block;
  width: 100%;
  margin: 64px 0 16px; }
  .detailsText.withFUP {
    margin-bottom: 0;
    margin-top: 56px; }
    .detailsText.withFUP.onShowDetails {
      margin-top: 32px; }

.detailsContentTextOnShowDetails {
  margin-top: 32px !important; }

.detailsMidText {
  margin-top: 4px !important; }

.detailsSubText {
  margin-bottom: 32px !important; }
  .detailsSubText.withFUP {
    margin-bottom: 24px !important; }
  .detailsSubText.seeDetails {
    margin-bottom: 0 !important; }

.detailedInfo {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400; }

.buttonTop {
  margin-top: 8px; }

.detailsLink {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--primary-dark, #006d29);
  text-decoration-line: underline;
  margin: 6px 0;
  position: relative;
  z-index: 4; }

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

.dataRemainingOnShowDetails-remaining {
  margin-top: 56px !important; }

.dataRemainingOnShowDetails-noRemaining {
  margin-top: 32px; }

.voucherization-renewal-offer-card.detailsBox.renewOffer {
  padding: 0; }

.voucherization-renewal-offer-card .voucherization-renewal-offer-card-title-section {
  display: flex;
  align-items: flex-start; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-title-section .voucherization-renewal-offer-card-title {
    display: flex;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    padding: 12px 16px;
    align-content: center;
    align-self: center;
    flex: 1;
    justify-content: center; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-title-section .voucherization-renewal-offer-card-title-badge {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    background-color: #e20074;
    color: #ffffff;
    padding: 16px 12px;
    border-radius: 0 16px 0 0; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-title-section .voucherization-renewal-offer-card-title-badge.noBorderRadius {
      border-radius: 0; }

.voucherization-renewal-offer-card.renewOffer .voucherization-renewal-offer-card-content .buttonOuter {
  margin: 0; }

.voucherization-renewal-offer-card .voucherization-renewal-offer-card-content {
  padding: 16px;
  display: flex;
  flex-flow: column;
  gap: 16px;
  flex: 1; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-details-content {
    margin: 0 !important; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-details-content .detailsContentRight .paymentDeadline {
      color: #9d9d9c; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-indications {
    display: flex;
    flex-flow: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #e6e6e6; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-indications .voucherization-renewal-offer-indicationLine {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-indications .voucherization-renewal-offer-indicationLine strong {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section-title {
    display: flex;
    flex-flow: column; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section-title .voucherization-renewal-gifts-section-title-bold {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 700; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section-title .voucherization-renewal-gifts-section-title-normal {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section {
    display: flex;
    flex-flow: row;
    gap: 12px; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section .voucherization-renewal-gift-box {
      border-radius: 16px;
      border: 2px solid #e6e6e6;
      padding: 8px;
      display: flex;
      flex-flow: column;
      gap: 8px;
      flex: 1 0 0; }
      .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section .voucherization-renewal-gift-box .md-radio {
        margin: 0; }
        .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section .voucherization-renewal-gift-box .md-radio label {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400; }
      .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section .voucherization-renewal-gift-box .voucherization-renewal-gift-box-text {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
      .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-gifts-section .voucherization-renewal-gift-box.selected {
        border: 2px solid #004b87; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-gift-section {
    display: flex;
    flex-flow: column;
    gap: 16px; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-gift-section .voucherization-renewal-offer-gift-section-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 18px;
      line-height: 28px;
      font-weight: 400;
      padding-top: 16px;
      border-top: 1px solid #00a5e3; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-gift-section .voucherization-renewal-offer-gift-section-description {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button {
    padding: 12px 8px;
    color: #0e8103;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    width: 100%;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    display: flex;
    align-self: center;
    margin-top: auto; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button:hover {
      color: rgba(0, 109, 41, 0.85);
      z-index: 1; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button: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; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button-notVisible {
      visibility: hidden; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.hidden {
      display: none; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.absoluteLink {
      position: absolute;
      bottom: 8px; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.whiteLink {
      display: inline-block;
      width: auto;
      color: #ffffff;
      border: 1px solid #ffffff;
      border-radius: 16px;
      margin-left: 8px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.whiteLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.blueTooltipLink {
      color: #212121;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      letter-spacing: 0;
      margin-top: 4px; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.blueLink {
      display: inline-block;
      width: auto;
      color: #212121;
      margin-left: 24px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.blueLink {
          margin-left: 0;
          display: block;
          width: 100%;
          margin-top: 12px; } }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.inline {
      display: inline-block;
      width: auto; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-offer-compare-program-button.blue {
      color: #212121 !important;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renew-program-button {
    max-width: unset;
    width: 100%; }
  .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-device-section {
    display: flex;
    flex-flow: row;
    padding: 16px 16px 0;
    gap: 32px;
    background-color: #e6e6e6;
    border-top: 1px solid #00a5e3;
    width: calc(100% + 32px);
    position: relative;
    left: -16px; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-device-section .voucherization-renewal-offer-device-text {
      display: flex;
      flex-flow: column;
      gap: 8px;
      padding-bottom: 16px; }
      .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-device-section .voucherization-renewal-offer-device-text .voucherization-renewal-offer-device-title {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600; }
      .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-device-section .voucherization-renewal-offer-device-text .voucherization-renewal-offer-device-description {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
    .voucherization-renewal-offer-card .voucherization-renewal-offer-card-content .voucherization-renewal-offer-device-section img {
      align-self: flex-end; }

.voucherization-mandatory-reminder {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600; }

.voucherization-renewal-offer-details {
  display: flex;
  flex-flow: column;
  gap: 12px;
  padding: 0;
  margin: 0; }
  .voucherization-renewal-offer-details .voucherization-renewal-offer-details-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start; }
    .voucherization-renewal-offer-details .voucherization-renewal-offer-details-item ul {
      display: flex;
      flex-flow: column;
      gap: 4px; }

.selectVoucherModalBody {
  display: flex;
  flex-flow: column;
  padding: 24px;
  gap: 24px; }
  .selectVoucherModalBody .selectVoucherModalDescription {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
    .selectVoucherModalBody .selectVoucherModalDescription strong {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 700; }
  .selectVoucherModalBody .md-radio {
    margin: 0; }
    .selectVoucherModalBody .md-radio .imgTooltip {
      max-width: 24px;
      max-height: 24px; }
    .selectVoucherModalBody .md-radio label span {
      display: inline-flex;
      gap: 8px; }
  .selectVoucherModalBody .selectVoucherInfoBox {
    margin-top: 24px; }

.selectVoucherInfoBox.withAlert {
  width: 100%;
  display: inline-flex;
  align-items: flex-start;
  color: #212121;
  background-color: #f4f8fb;
  border: 1px solid #2775b2;
  padding: 8px 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  border-radius: 16px; }
  .selectVoucherInfoBox.withAlert strong {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700; }
  .selectVoucherInfoBox.withAlert.hidden {
    display: none; }
  .selectVoucherInfoBox.withAlert img {
    margin-right: 8px;
    width: 24px;
    height: auto; }

.voucherization-header-section {
  margin: 16px 0;
  padding-top: 16px;
  max-width: 576px;
  display: flex;
  flex-flow: column;
  gap: 16px;
  border-top: 1px solid #00a5e3; }
  .voucherization-header-section .voucherization-header-section-heading {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

.voucherization-renew-program-select-voucher-step {
  display: flex;
  flex-flow: column;
  gap: 24px;
  padding: 16px 24px 24px; }
  .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-heading {
    display: flex;
    flex-flow: column;
    gap: 8px; }
    .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-heading .voucherization-renew-program-select-voucher-heading-device-name {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700; }
    .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-heading .voucherization-renew-program-select-voucher-heading-description {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      display: inline-flex;
      justify-content: space-between; }
  .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container {
    display: flex;
    flex-flow: column;
    gap: 24px;
    align-items: center; }
    .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-title {
      align-self: flex-start; }
    .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-input-wrapper {
      display: inline-flex;
      gap: 16px;
      align-items: flex-start;
      width: 100%;
      margin-top: 24px; }
      .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-input-wrapper .voucherization-renew-program-select-voucher-slider-button {
        width: 32px;
        height: 32px; }
        .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-input-wrapper .voucherization-renew-program-select-voucher-slider-button img {
          width: 32px;
          height: 32px;
          cursor: pointer; }
      .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-input-wrapper .voucherization-renew-program-select-voucher-slider-input-container {
        display: flex;
        flex-flow: column;
        width: 100%;
        margin-top: 4px; }
        .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-input-wrapper .voucherization-renew-program-select-voucher-slider-input-container .voucherization-renew-program-select-voucher-slider-input-value {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 22px;
          line-height: 24px;
          font-weight: 600;
          align-self: flex-end;
          margin-bottom: 8px; }
        .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-input-wrapper .voucherization-renew-program-select-voucher-slider-input-container .voucherization-renew-program-select-voucher-slider-limits {
          display: inline-flex;
          justify-content: space-between;
          margin-bottom: 8px; }
    .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-slider-container .voucherization-renew-program-select-voucher-slider-bottom-description {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
  .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-final-price {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: inline-flex;
    justify-content: space-between; }
    .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-final-price .voucherization-renew-program-select-voucher-final-value {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 22px;
      line-height: 24px;
      font-weight: 600; }
  .voucherization-renew-program-select-voucher-step .voucherization-renew-program-select-voucher-next-step-button {
    width: 100%; }

.voucherization-renew-program-details-step {
  padding: 16px 24px 24px;
  display: flex;
  flex-flow: column;
  gap: 32px; }
  .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section {
    display: flex;
    flex-flow: column; }
    .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-details-header {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700; }
    .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renewal-offer-details {
      padding: 16px 0; }
    .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info {
      display: flex;
      flex-flow: column;
      gap: 12px;
      padding: 16px 0 0;
      border-top: 1px solid #e6e6e6; }
      .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info .voucherization-renew-program-program-info-row {
        display: inline-flex;
        justify-content: space-between;
        gap: 8px; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info .voucherization-renew-program-program-info-row span {
          display: inline-flex;
          gap: 8px; }
          .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info .voucherization-renew-program-program-info-row span a {
            height: 24px;
            width: 24px; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info .voucherization-renew-program-program-info-row .voucherization-renew-program-program-info-price {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info .voucherization-renew-program-program-info-row .voucherization-renew-program-program-info-duration {
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 700; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info .voucherization-renew-program-program-info-row.smallText {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-program-info .voucherization-renew-program-program-info-row.moreInfo a {
          text-decoration: underline;
          margin: 0;
          padding: 0;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400; }
    .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-save-voucher-section {
      display: flex;
      flex-flow: column;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid #e6e6e6;
      margin-top: 24px; }
      .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-save-voucher-section .voucherization-renew-program-voucher-remainder {
        display: inline-flex;
        justify-content: space-between; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-save-voucher-section .voucherization-renew-program-voucher-remainder .voucherization-renew-program-voucher-remainder-text {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-save-voucher-section .voucherization-renew-program-voucher-remainder .voucherization-renew-program-voucher-remainder-value {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700; }
      .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-save-voucher-section .voucherization-renew-program-voucher-expiration {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400; }
    .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section {
      display: flex;
      flex-flow: column;
      gap: 8px;
      margin-top: 24px; }
      .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section .voucherization-renew-program-device-name {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700; }
      .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section .voucherization-renew-program-device-info-row {
        display: inline-flex;
        justify-content: space-between;
        gap: 8px; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section .voucherization-renew-program-device-info-row span {
          display: inline-flex;
          gap: 8px; }
          .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section .voucherization-renew-program-device-info-row span a {
            height: 24px;
            width: 24px; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section .voucherization-renew-program-device-info-row .voucherization-renew-program-device-info-price {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700; }
      .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section .voucherization-renew-program-device-voucher-usage {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        padding-top: 8px;
        border-top: 1px solid #e6e6e6; }
        .voucherization-renew-program-details-step .voucherization-renew-program-program-details-section .voucherization-renew-program-use-voucher-for-device-section .voucherization-renew-program-device-voucher-usage strong {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600; }
  .voucherization-renew-program-details-step .voucherization-renew-program-customer-details-section {
    display: flex;
    flex-flow: column;
    gap: 16px; }
    .voucherization-renew-program-details-step .voucherization-renew-program-customer-details-section .voucherization-renew-program-customer-details-section-header {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700; }
    .voucherization-renew-program-details-step .voucherization-renew-program-customer-details-section .voucherization-renew-program-customer-details-section-inputs {
      display: flex;
      flex-flow: column;
      gap: 24px; }
      .voucherization-renew-program-details-step .voucherization-renew-program-customer-details-section .voucherization-renew-program-customer-details-section-inputs .voucherization-renew-program-input-container {
        display: flex;
        flex-flow: column;
        gap: 8px;
        position: relative; }
        .voucherization-renew-program-details-step .voucherization-renew-program-customer-details-section .voucherization-renew-program-customer-details-section-inputs .voucherization-renew-program-input-container .voucherization-renew-program-input-title {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
  .voucherization-renew-program-details-step .voucherization-renew-program-address-details-section {
    display: flex;
    flex-flow: column;
    gap: 16px; }
    .voucherization-renew-program-details-step .voucherization-renew-program-address-details-section .voucherization-renew-program-address-details-section-header {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700; }
    .voucherization-renew-program-details-step .voucherization-renew-program-address-details-section .voucherization-renew-program-address-details-section-inputs {
      display: flex;
      flex-flow: column;
      gap: 24px; }
      .voucherization-renew-program-details-step .voucherization-renew-program-address-details-section .voucherization-renew-program-address-details-section-inputs .voucherization-renew-program-input-container {
        display: flex;
        flex-flow: column;
        gap: 8px;
        position: relative; }
        .voucherization-renew-program-details-step .voucherization-renew-program-address-details-section .voucherization-renew-program-address-details-section-inputs .voucherization-renew-program-input-container.disabled {
          color: #848484; }
          .voucherization-renew-program-details-step .voucherization-renew-program-address-details-section .voucherization-renew-program-address-details-section-inputs .voucherization-renew-program-input-container.disabled input {
            color: #848484;
            border-color: #848484; }
        .voucherization-renew-program-details-step .voucherization-renew-program-address-details-section .voucherization-renew-program-address-details-section-inputs .voucherization-renew-program-input-container .voucherization-renew-program-input-title {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600; }
  .voucherization-renew-program-details-step .md-checkbox-simple.voucherization-acceptTerms {
    margin: 0; }
    .voucherization-renew-program-details-step .md-checkbox-simple.voucherization-acceptTerms a {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      padding: 0 !important;
      text-decoration: underline; }
  .voucherization-renew-program-details-step .voucherization-renew-program-warning-box {
    padding: 8px 16px;
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    background-color: #fefcf7;
    border: 1px solid #eabf68;
    border-radius: 16px; }
    .voucherization-renew-program-details-step .voucherization-renew-program-warning-box .voucherization-renew-program-warning-box-text {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
  .voucherization-renew-program-details-step .fillMandatoryFields {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600; }

.voucherization-renew-program-inline-inputs-container {
  display: inline-flex;
  gap: 8px; }
  @media only screen and (max-width: 767px) {
    .voucherization-renew-program-inline-inputs-container {
      flex-flow: column;
      gap: 24px; } }
  .voucherization-renew-program-inline-inputs-container .bigInputContainer {
    flex: 3; }
    @media only screen and (max-width: 767px) {
      .voucherization-renew-program-inline-inputs-container .bigInputContainer {
        flex: unset; } }
  .voucherization-renew-program-inline-inputs-container .mediumInputContainer {
    flex: 2; }
    @media only screen and (max-width: 767px) {
      .voucherization-renew-program-inline-inputs-container .mediumInputContainer {
        flex: unset; } }
  .voucherization-renew-program-inline-inputs-container .smallInputContainer {
    flex: 1; }
    @media only screen and (max-width: 767px) {
      .voucherization-renew-program-inline-inputs-container .smallInputContainer {
        flex: unset; } }

.voucherization-renew-program-success-step {
  padding: 24px;
  display: flex;
  gap: 24px; }
  @media only screen and (max-width: 767px) {
    .voucherization-renew-program-success-step {
      flex-flow: column; } }
  .voucherization-renew-program-success-step img {
    width: 84px;
    height: 84px; }
    @media only screen and (max-width: 767px) {
      .voucherization-renew-program-success-step img {
        align-self: center; } }
  .voucherization-renew-program-success-step .voucherization-renew-program-success-step-text {
    display: flex;
    flex-flow: column;
    gap: 8px; }
    .voucherization-renew-program-success-step .voucherization-renew-program-success-step-text .voucherization-successStepTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700; }
    .voucherization-renew-program-success-step .voucherization-renew-program-success-step-text .voucherization-successStepSubTitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }

.selectVoucherErrorModalBody {
  padding: 24px;
  display: flex;
  flex-flow: column;
  gap: 24px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.range__container {
  display: grid;
  place-items: center; }

/* Custom input range */
.range {
  height: 24px;
  width: 100%;
  display: grid; }

.range__content {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center; }

.range__slider {
  width: 100%;
  height: 8px;
  background-color: #e6e6e6;
  border-radius: 24px;
  overflow: hidden; }

.range__slider-line {
  width: 100%;
  height: 100%;
  background: #00a5e3;
  width: 0; }

.range__thumb {
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 100%;
  border: 1px solid #00a5e3;
  position: absolute; }

/* Value input range */
.range__value {
  position: absolute;
  top: -26px;
  left: -50%;
  display: grid;
  place-items: center; }

.range__value-number {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700; }
  .range__value-number .euro {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .range__value-number .cents {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700; }

/* Default input range */
.range__input {
  appearance: none;
  width: 100%;
  height: 8px;
  position: absolute;
  opacity: 0; }

.range__input::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 100%;
  border: 1px solid #00a5e3; }

.range__input::-webkit-slider-thumb:hover {
  cursor: pointer; }

.voucherizationPaymentTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }
  .voucherizationPaymentTitle .voucherizationPaymentSubTitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

.forOffers.voucherizationCountDown {
  width: 100%;
  border-radius: 16px 16px 0 0;
  position: relative;
  background-color: #b8e0ef;
  color: #004b87; }

.programModalContent {
  padding: 16px;
  display: flex;
  flex-flow: row;
  gap: 8px; }
  .programModalContent .programWrapper {
    display: flex;
    flex-flow: column;
    gap: 16px;
    flex: 1; }
    .programModalContent .programWrapper .programMainTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700; }
    .programModalContent .programWrapper .programCard {
      display: flex;
      padding: 16px;
      flex-direction: column;
      align-items: flex-start;
      flex: 1 0 0;
      align-self: stretch;
      border-radius: 16px;
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2); }
      .programModalContent .programWrapper .programCard.newProgramCard {
        border: solid 2px #004b87; }
      .programModalContent .programWrapper .programCard .compareProgramTitle {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700; }
      .programModalContent .programWrapper .programCard .programCardContainer {
        display: flex;
        padding: 16px 0px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
        align-self: stretch; }
        .programModalContent .programWrapper .programCard .programCardContainer .programPricing {
          display: flex;
          flex-direction: column;
          max-width: 92px;
          height: 86px; }
          .programModalContent .programWrapper .programCard .programCardContainer .programPricing .toPay .euros {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700; }
          .programModalContent .programWrapper .programCard .programCardContainer .programPricing .toPay .cents {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700; }
          .programModalContent .programWrapper .programCard .programCardContainer .programPricing .paymentDeadline {
            color: #848484;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400; }
        .programModalContent .programWrapper .programCard .programCardContainer .programCardContent {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
          flex: 1 0 0;
          align-self: stretch; }
          .programModalContent .programWrapper .programCard .programCardContainer .programCardContent .programCardContentHeading {
            display: flex;
            padding: 4px 0px;
            align-items: center;
            align-self: stretch;
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 16px;
            line-height: 20px;
            font-weight: 700;
            color: #9d9d9c;
            border-top: 1px solid #e6e6e6; }
          .programModalContent .programWrapper .programCard .programCardContainer .programCardContent .programCardContentList {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            flex: 1 0 0;
            align-self: stretch; }
            .programModalContent .programWrapper .programCard .programCardContainer .programCardContent .programCardContentList .programCardContentListItem {
              display: flex;
              align-items: flex-start;
              gap: 8px;
              align-self: stretch; }
              .programModalContent .programWrapper .programCard .programCardContainer .programCardContent .programCardContentList .programCardContentListItem ul .grey-title {
                color: #848484;
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400; }
              .programModalContent .programWrapper .programCard .programCardContainer .programCardContent .programCardContentList .programCardContentListItem.renewalGift {
                flex-direction: column; }
                .programModalContent .programWrapper .programCard .programCardContainer .programCardContent .programCardContentList .programCardContentListItem.renewalGift strong {
                  font-family: 'PeridotPE-Bold', sans-serif;
                  font-size: 16px;
                  line-height: 24px;
                  font-weight: 700; }
                .programModalContent .programWrapper .programCard .programCardContainer .programCardContent .programCardContentList .programCardContentListItem.renewalGift .grey-title {
                  color: #848484;
                  font-family: 'PeridotPE-Regular', sans-serif;
                  font-size: 14px;
                  line-height: 20px;
                  font-weight: 400; }

.cosmoteOneCombo .link {
  color: #212121;
  text-decoration: underline; }

.cosmoteOneCombo .simpleDivider {
  margin-bottom: 24px; }

.cosmoteOneCombo .lightDivider {
  display: flex;
  width: 100%;
  height: 1px;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  flex-shrink: 0;
  margin: 0;
  background-color: #e6e6e6; }

.cosmoteOneCombo .assistiveText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #848484; }
  .cosmoteOneCombo .assistiveText.black {
    color: #212121; }
  .cosmoteOneCombo .assistiveText .strong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600; }
  .cosmoteOneCombo .assistiveText.paddingTop {
    padding-top: 8px; }
  .cosmoteOneCombo .assistiveText.withInfo {
    display: inline-block; }
    .cosmoteOneCombo .assistiveText.withInfo a {
      display: inline-block;
      width: 16px;
      height: 16px;
      position: relative;
      top: 3px;
      margin-left: 2px; }

.cosmoteOneCombo .iconTextRow {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 8px; }

.cosmoteOneCombo .textButtonRow {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px; }
  .cosmoteOneCombo .textButtonRow .text {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .cosmoteOneCombo .textButtonRow .whiteButtonNoBorder {
    color: #0ea600 !important;
    background-color: #ffffff; }

.cosmoteOneCombo .slick-prev {
  top: 50%;
  height: 24px;
  width: 32px; }
  .cosmoteOneCombo .slick-prev::before {
    font-size: 16px;
    line-height: 0.8; }

.cosmoteOneCombo .slick-next {
  top: 50%;
  height: 24px;
  width: 32px; }
  .cosmoteOneCombo .slick-next::before {
    font-size: 16px;
    line-height: 0.8; }

.cosmoteOneCombo .carouselItem {
  height: 242px; }

.cosmoteOneCombo .carouselDetailsContent {
  flex-flow: column;
  justify-content: end;
  min-height: 100%; }

.cosmoteOneCombo .carouselDetailsBox.withoutPadding {
  padding: 0; }

.cosmoteOneCombo .campaignCarouselContent {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 8px;
  padding: 0;
  margin: 0; }
  .cosmoteOneCombo .campaignCarouselContent .campaignCarouselRight {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 12px 8px;
    gap: 16px; }
    .cosmoteOneCombo .campaignCarouselContent .campaignCarouselRight .campaignText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .cosmoteOneCombo .campaignCarouselContent .campaignCarouselRight .campaignText .strong {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }

.cosmoteOneCombo .campaignCarouselSection {
  border: none;
  box-sizing: border-box;
  position: relative;
  z-index: 10000;
  width: 100%;
  left: 0;
  margin: 0; }

.cosmoteOneCombo .campaignCarouselBox {
  min-height: unset;
  height: auto;
  border: none;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  margin: 0; }

.cosmoteOneCombo .createCosmoteOneModalContainer-large {
  max-width: 516px; }

.cosmoteOneCombo .createCosmoteOneModalContent {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch; }
  .cosmoteOneCombo .createCosmoteOneModalContent.moreGap {
    gap: 24px; }
  .cosmoteOneCombo .createCosmoteOneModalContent .createCosmoteOneModalParagraph {
    text-align: start;
    align-self: start;
    max-height: 512px;
    overflow: auto;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
    .cosmoteOneCombo .createCosmoteOneModalContent .createCosmoteOneModalParagraph .strong {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700; }

.cosmoteOneCombo .cosmoteOneModalBodyTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  align-self: start; }

.cosmoteOneCombo .cosmoteOneInputContainer {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  width: 100%;
  flex-flow: column;
  position: relative; }
  .cosmoteOneCombo .cosmoteOneInputContainer .cosmoteOneComboErrorWrongPinMessage {
    display: none; }
  .cosmoteOneCombo .cosmoteOneInputContainer.error .inputWithButton {
    margin-bottom: 0; }
  .cosmoteOneCombo .cosmoteOneInputContainer.error .cosmoteOneInputTitle {
    color: #df6938; }
  .cosmoteOneCombo .cosmoteOneInputContainer.error .cosmoteOneComboErrorWrongPinMessage {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    display: block;
    align-self: flex-start;
    color: #df6938;
    margin-bottom: 16px; }
  .cosmoteOneCombo .cosmoteOneInputContainer.noMargin {
    margin-bottom: 0; }
  .cosmoteOneCombo .cosmoteOneInputContainer .cosmoteOneInputTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    padding-bottom: 8px; }
    .cosmoteOneCombo .cosmoteOneInputContainer .cosmoteOneInputTitle.disabled {
      color: #848484; }
  .cosmoteOneCombo .cosmoteOneInputContainer .sendPinContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px; }
    .cosmoteOneCombo .cosmoteOneInputContainer .sendPinContainer .buttonText {
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 700;
      text-wrap: nowrap; }
  .cosmoteOneCombo .cosmoteOneInputContainer .submitPIN {
    cursor: pointer;
    pointer-events: all; }
    .cosmoteOneCombo .cosmoteOneInputContainer .submitPIN.disabled {
      pointer-events: none; }

.cosmoteOneCombo .cosmoteOneDropdownContainer {
  border-top: none;
  padding: 0;
  width: 100%; }
  .cosmoteOneCombo .cosmoteOneDropdownContainer .dropdownWrapper {
    width: 100%; }
    .cosmoteOneCombo .cosmoteOneDropdownContainer .dropdownWrapper .dropdownTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      padding-bottom: 8px; }

.cosmoteOneCombo .cosmoteOneStepperForm {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch; }
  .cosmoteOneCombo .cosmoteOneStepperForm.noStepper {
    padding: 32px 0 8px 0;
    gap: 32px; }
  .cosmoteOneCombo .cosmoteOneStepperForm.smallerTopPadding {
    padding-top: 8px; }
  .cosmoteOneCombo .cosmoteOneStepperForm .textWithInfo {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: inline-block; }
    .cosmoteOneCombo .cosmoteOneStepperForm .textWithInfo a {
      display: inline-block;
      height: 24px;
      width: 24px;
      position: relative;
      top: 4px;
      margin-left: 2px; }
  .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch; }
    .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody.withPadding {
      padding: 16px 16px 0 16px !important; }
    .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody.withPadding-16-24 {
      padding: 0 16px 24px !important; }
    .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .cosmoteOneStepperFormTitle {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      align-self: start; }
    .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .cosmoteOneStepperFormParagraphSmall {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
    .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer {
      display: flex;
      padding: 16px;
      flex-direction: column;
      gap: 16px;
      align-items: start;
      align-self: stretch;
      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); }
      .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer.noElevation {
        box-shadow: none;
        border: none;
        padding: 0; }
      .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection {
        width: 100%;
        display: flex;
        flex-direction: column; }
        .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionHeader {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          padding-bottom: 8px; }
        .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody {
          width: 100%;
          max-height: 240px;
          overflow: auto; }
          .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset {
            display: flex;
            padding: 12px;
            align-items: center;
            gap: 8px;
            align-self: stretch; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset:not(:first-child) {
              border-top: 1px solid #e6e6e6; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset.noPadding {
              padding: 0; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .assetCheckBox {
              margin: 0; }
              .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .assetCheckBox input:disabled + label:before {
                border: 1px solid #848484;
                background: #f2f2f3; }
              .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .assetCheckBox input:disabled:checked + label:before {
                background: #f2f2f3; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .assetText {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400; }
              .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .assetText.disabled {
                color: #848484; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .assetNotification {
              display: flex;
              padding: 4px 8px;
              margin-left: 8px;
              align-items: flex-start;
              border-radius: 16px;
              background-color: #b8e0ef;
              font-family: 'PeridotPE-Bold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 700;
              color: #004b87; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .discountItem {
              display: flex;
              flex-direction: row;
              gap: 8px;
              align-items: center; }
              .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsCheckboxListSection .assetsCheckboxListSectionBody .asset .discountItem .assetText {
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 16px;
                line-height: 24px;
                font-weight: 400; }
      .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .addAssets {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center; }
        .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .addAssets.withExtraPadding {
          padding: 12px; }
        .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .addAssets p {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400; }
      .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection {
        width: 100%;
        display: flex;
        flex-direction: column; }
        .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionHeader {
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 20px;
          line-height: 24px;
          font-weight: 700;
          padding-bottom: 8px; }
          .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionHeader-small {
            font-family: 'PeridotPE-Bold', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 700; }
        .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionSubheader {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          padding: 8px 0 8px; }
        .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody {
          width: 100%; }
          .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .plusDivider {
            display: flex;
            flex-direction: row;
            gap: 8px;
            padding: 0 12px 0;
            align-items: center;
            justify-content: center;
            width: 100%; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .plusDivider .line {
              display: flex;
              width: 50%;
              height: 1px;
              justify-content: center;
              align-items: center;
              flex-shrink: 0;
              background-color: #e6e6e6; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .plusDivider .plus {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 12px;
              line-height: 16px;
              font-weight: 400;
              color: #848484; }
          .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .discount {
            display: flex;
            padding: 12px;
            align-items: center;
            gap: 8px;
            align-self: stretch; }
            .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .discount .discountItem {
              display: flex;
              flex-direction: row;
              gap: 8px;
              align-items: center; }
              .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .discount .discountItem .discountText {
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 16px;
                line-height: 24px;
                font-weight: 400; }
                .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .discount .discountItem .discountText .strong {
                  font-family: 'PeridotPE-Bold', sans-serif;
                  font-size: 16px;
                  line-height: 24px;
                  font-weight: 700; }
                .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .discount .discountItem .discountText .heading {
                  font-family: 'PeridotPE-SemiBold', sans-serif;
                  font-size: 18px;
                  line-height: 20px;
                  font-weight: 600; }
                .cosmoteOneCombo .cosmoteOneStepperForm .cosmoteOneStepperFormBody .assetsContainer .assetsDiscountListSection .assetsDiscountListSectionBody .discount .discountItem .discountText .small {
                  font-family: 'PeridotPE-Regular', sans-serif;
                  font-size: 14px;
                  line-height: 20px;
                  font-weight: 400; }
  .cosmoteOneCombo .cosmoteOneStepperForm .contactContainer {
    display: flex;
    padding: 16px;
    flex-direction: column;
    gap: 16px;
    align-items: start;
    align-self: stretch;
    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); }
    .cosmoteOneCombo .cosmoteOneStepperForm .contactContainer .contactSectionHeader {
      width: 100%;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700;
      padding-bottom: 8px; }
    .cosmoteOneCombo .cosmoteOneStepperForm .contactContainer .contactSectionSubheader {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      padding: 8px 0 8px; }
  .cosmoteOneCombo .cosmoteOneStepperForm .stepCompleteContainer {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: start; }
    .cosmoteOneCombo .cosmoteOneStepperForm .stepCompleteContainer.center {
      align-items: center; }
    .cosmoteOneCombo .cosmoteOneStepperForm .stepCompleteContainer .stepCompleteContent {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 8px; }
      .cosmoteOneCombo .cosmoteOneStepperForm .stepCompleteContainer .stepCompleteContent .textBold {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700; }
      .cosmoteOneCombo .cosmoteOneStepperForm .stepCompleteContainer .stepCompleteContent .textNormal {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }

.cosmoteOneCombo .blueFrame {
  display: flex;
  padding: 8px 16px;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  border: 2px solid #2775b2;
  background-color: #f4f8fb; }
  .cosmoteOneCombo .blueFrame .text {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }

.cosmoteOneCombo .yellowFrame {
  display: flex;
  padding: 8px 16px;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  border: 2px solid #eabf68;
  background-color: #fefcf7; }
  .cosmoteOneCombo .yellowFrame .text {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .cosmoteOneCombo .yellowFrame.withBottomMargin {
    margin-bottom: 8px; }
  .cosmoteOneCombo .yellowFrame.withTopMargin {
    margin-top: 24px; }

.cosmoteOneCombo .somethingWentWrong .orderBox.emptyOrders {
  padding: 16px;
  text-align: left; }

.cosmoteOneCombo .somethingWentWrong .orderBox .somethingWentWrongTitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  justify-content: start;
  margin-bottom: 8px; }
  .cosmoteOneCombo .somethingWentWrong .orderBox .somethingWentWrongTitle .emptyStateTitle {
    text-align: left;
    margin: 0; }

.cosmoteOneCombo .failureModalContent {
  padding: 8px 24px 24px; }

.cosmoteOneCombo .cosmoteOneDropdownInput.noDropdown i {
  display: none; }

.ddTextInputWrapper {
  width: 100%; }
  .ddTextInputWrapper-multiple {
    z-index: 8; }
  .ddTextInputWrapper.active {
    z-index: 7; }
  .ddTextInputWrapper .box {
    overflow: visible;
    background-color: none; }
  .ddTextInputWrapper .ddTextInput {
    display: flex;
    flex-flow: row;
    align-items: flex-start; }
    .ddTextInputWrapper .ddTextInput-multiple {
      gap: 64px; }
      .ddTextInputWrapper .ddTextInput-multiple-small {
        gap: 16px;
        border: none; }
      @media only screen and (max-width: 480px) {
        .ddTextInputWrapper .ddTextInput-multiple {
          gap: 0; } }
    .ddTextInputWrapper .ddTextInput.ddTextInputLargeAccountsShop {
      padding: 0; }
    .ddTextInputWrapper .ddTextInput.flexColumn {
      flex-flow: column; }
    .ddTextInputWrapper .ddTextInput.wrapped {
      flex-wrap: wrap; }
    .ddTextInputWrapper .ddTextInput .ddLabel {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      display: inline-block;
      margin-right: 8px; }
    .ddTextInputWrapper .ddTextInput .ddTextInputContent {
      position: relative;
      display: flex;
      flex-flow: column;
      flex: 1;
      align-items: stretch; }
      .ddTextInputWrapper .ddTextInput .ddTextInputContent.largeAccountsBills {
        flex-flow: column;
        flex: 1;
        align-items: stretch; }
      .ddTextInputWrapper .ddTextInput .ddTextInputContent:first-child.noMargin {
        margin: 0; }
      .ddTextInputWrapper .ddTextInput .ddTextInputContent span {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        color: #212121;
        display: inline-block;
        margin-bottom: 8px; }
      .ddTextInputWrapper .ddTextInput .ddTextInputContent .input-subTitle {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
      .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        position: relative;
        cursor: pointer; }
        @media only screen and (min-width: 1025px) and (max-width: 1230px) {
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer {
            width: 100%; } }
        @media only screen and (max-width: 767px) {
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer {
            width: 100%; } }
        .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput {
          box-sizing: border-box;
          width: 100%;
          cursor: pointer;
          color: #212121;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          display: inline-block;
          background-color: transparent;
          border: 1px solid #212121;
          border-radius: 16px;
          padding: 12px 8px; }
          @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput {
              max-width: 100%; } }
          @media only screen and (min-width: 1025px) and (max-width: 1230px) {
            .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput {
              max-width: 100%; } }
          @media only screen and (max-width: 767px) {
            .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput {
              max-width: 100%; } }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput.opened {
            border-radius: 16px 16px 0 0;
            border-bottom: none; }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput ::-webkit-input-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput :-moz-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput ::-moz-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput :-ms-input-placeholder {
            color: #9d9d9c;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer .ddTextInput:not(.jsDropdownInput) {
            padding: 12px 40px; }
        .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer ::-webkit-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer :-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer ::-moz-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer :-ms-input-placeholder {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #9d9d9c; }
        .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer 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; }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer i.withPointerEvents {
            pointer-events: initial; }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer i.icon-arrowDown {
            font-size: 18px;
            -webkit-transform: scaleY(1);
            -moz-transform: scaleY(1);
            transform: scaleY(1); }
            .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer i.icon-arrowDown.opened {
              -webkit-transform: scaleY(-1);
              -moz-transform: scaleY(-1);
              transform: scaleY(-1); }
          .ddTextInputWrapper .ddTextInput .ddTextInputContent .ddTextInputContainer i.icon-lens {
            left: 8px;
            font-size: 24px; }
  .ddTextInputWrapper .ddTextInputExpanded {
    background-color: #ffffff;
    border: 1px solid #212121;
    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 16px 16px;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
    .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper {
      max-height: 200px;
      overflow-y: auto;
      margin: 0;
      position: relative; }
      .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper-searchAtTop {
        padding-top: 8px; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper-searchAtTop:after {
          display: none; }
      .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper.simpleResults {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 26px 16px 16px 16px;
        padding-bottom: 0; }
      .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputNoResults {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        padding: 0 16px;
        color: #212121;
        display: none; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputNoResults.visible {
          display: block; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputNoResults-searchAtTop {
          padding-bottom: 0; }
      .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup {
        margin-bottom: 12px; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup:last-child {
          margin-bottom: 0; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsTitle {
          margin: 0 8px 4px;
          border-bottom: 1px solid #e6e6e6; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsTitle.largeLabelTitle {
            border-bottom: none; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsTitle.largeLabelTitle span {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsTitle span {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            padding-bottom: 2px;
            width: auto;
            display: inline-block; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsTitle span.boldFont {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsTitle span.small {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 14px;
            line-height: 20px;
            font-weight: 400;
            color: #212121;
            margin: 0;
            font-size: 13px; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent {
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;
          overflow-x: hidden; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent.hidden {
            display: none; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent a {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            box-sizing: border-box;
            padding: 12px 8px;
            color: #212121;
            display: flex;
            align-items: center;
            width: 100%;
            transition: 0.2s ease-in-out; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent a div {
              display: flex; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent a.largeLabel {
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600;
              color: #212121;
              display: block !important;
              padding-left: 8px; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent a:hover, .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent a.active {
              color: #ffffff;
              background-color: #00a5e3; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent a i {
              margin: 0 8px 0 0; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent a img {
              height: 16px;
              min-width: 16px;
              margin: 0 8px 0 0; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent-multiple a {
            padding: 0px 16px; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent-multiple a:hover, .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent-multiple a.active {
              color: #ffffff;
              background-color: #00a5e3; }
            .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent-multiple a .md-checkbox {
              margin: 4px 0;
              width: 100%; }
              .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContent-multiple a .md-checkbox label {
                width: 100%;
                color: #212121;
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithIcon.largeResults a div {
          width: 100%; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithIcon.largeResults a div span.small {
            max-width: 100%; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithIcon a {
          flex-direction: column;
          align-items: flex-start; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithIcon a span.small {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            margin-left: 24px;
            max-width: 260px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithoutIcon.largeResults a div {
          width: 100%; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithoutIcon.largeResults a div span.small {
            max-width: 100%; }
        .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithoutIcon a {
          flex-direction: column;
          align-items: flex-start; }
          .ddTextInputWrapper .ddTextInputExpanded .ddTextInputResultsWrapper .ddTextInputResultsGroup .ddTextInputResultsContentWithoutIcon a span.small {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            max-width: 260px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden; }
  .ddTextInputWrapper .ddTextInputContentSearch {
    position: relative;
    display: flex;
    margin-right: 0;
    padding: 12px 8px;
    z-index: 2;
    box-sizing: border-box; }
    .ddTextInputWrapper .ddTextInputContentSearch .iconLeft {
      left: 8px; }
      .ddTextInputWrapper .ddTextInputContentSearch .iconLeft.closeIcon {
        left: 0; }
    .ddTextInputWrapper .ddTextInputContentSearch-searchAtTop {
      margin-left: 8px;
      margin-right: 24px;
      border: none; }
    .ddTextInputWrapper .ddTextInputContentSearch .ddTextInput {
      box-sizing: border-box;
      width: 100%;
      cursor: pointer;
      color: #212121;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      display: inline-block;
      background-color: #ffffff;
      border: 1px solid #212121;
      border-radius: 16px;
      padding: 8px 40px; }
      .ddTextInputWrapper .ddTextInputContentSearch .ddTextInput-iconLeft img {
        left: 8px; }
        .ddTextInputWrapper .ddTextInputContentSearch .ddTextInput-iconLeft img.closeIcon {
          left: 0; }
    .ddTextInputWrapper .ddTextInputContentSearch img {
      position: absolute;
      right: 8px;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      z-index: 1;
      line-height: 0; }
      .ddTextInputWrapper .ddTextInputContentSearch img.cursorPointer {
        cursor: pointer; }
      .ddTextInputWrapper .ddTextInputContentSearch img.hidden {
        display: none; }
      .ddTextInputWrapper .ddTextInputContentSearch img.icon-close {
        cursor: pointer; }
      .ddTextInputWrapper .ddTextInputContentSearch img.closeIcon {
        right: 16px;
        top: 50%; }
        .ddTextInputWrapper .ddTextInputContentSearch img.closeIcon:before {
          color: #212121 !important; }
      .ddTextInputWrapper .ddTextInputContentSearch img.icon-lens {
        left: 16px; }

.contractRepository .visitLinksContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-bottom: 8px; }
  .contractRepository .visitLinksContainer .visitLink {
    text-align: center; }

.contractRepository .withPadding {
  padding: 8px !important; }

.contractRepository .contractBox {
  display: flex;
  flex-flow: column;
  position: relative;
  margin: 16px 0;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e6e6e6; }

.contractRepository .assetInputWrapper.disabled .inputTitle {
  color: #848484; }

.contractRepository .assetInputWrapper.disabled .dropdownContainer input {
  color: #848484;
  border: 1px solid #848484;
  pointer-events: none; }

.contractRepository .assetInputWrapper.disabled .dropdownContainer i.icon-arrowDown {
  display: none; }

.contractRepository .lightDivider {
  display: flex;
  width: 100%;
  height: 1px;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  flex-shrink: 0;
  margin: 0;
  background-color: #e6e6e6; }

.contractRepository .footerText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #848484; }

.contractRepository .viewOrder {
  padding: 0 24px 24px;
  display: flex;
  gap: 24px;
  flex-direction: column;
  align-items: center; }

.contractRepository .withMarginBottom {
  margin-bottom: 16px; }

.contractRepository .detailsPackage {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.contractRepository .detailsPrice {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700; }

.contractRepository .programDetails {
  border: none;
  padding-bottom: 32px; }

.contractRepository .noMarginBottom {
  margin-bottom: 0 !important; }

.contractRepository .groupContainer {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  margin-bottom: 16px; }
  .contractRepository .groupContainer .programDetailsGroup {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e6e6e6; }
    .contractRepository .groupContainer .programDetailsGroup:last-child {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none; }
    .contractRepository .groupContainer .programDetailsGroup span {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .contractRepository .groupContainer .programDetailsGroup span:last-child {
        margin-bottom: 0; }
      .contractRepository .groupContainer .programDetailsGroup span.withoutIcon {
        padding-left: 20px; }
      .contractRepository .groupContainer .programDetailsGroup span img {
        width: 18px;
        height: 18px;
        display: block;
        object-fit: contain;
        object-position: center;
        margin-right: 4px; }
      .contractRepository .groupContainer .programDetailsGroup span i {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        font-size: 18px; }

.contractRepository .cotractRepositoryOPTAuth {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .contractRepository .cotractRepositoryOPTAuth .inputWithButton {
    width: 100%; }
  .contractRepository .cotractRepositoryOPTAuth .contractRepositoryInsertPin label {
    margin-top: 0.375rem;
    color: #212121;
    letter-spacing: 0;
    text-align: left;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .contractRepository .cotractRepositoryOPTAuth .contractRepositoryInsertPin .contractRepositoryErrorWrongPinMessage {
    display: none; }
  .contractRepository .cotractRepositoryOPTAuth .contractRepositoryInsertPin.error .contractRepositoryErrorWrongPinTitle {
    color: #df6938; }
  .contractRepository .cotractRepositoryOPTAuth .contractRepositoryInsertPin.error .contractRepositoryErrorWrongPinMessage {
    display: block;
    align-self: flex-start;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 0.875rem;
    color: #df6938;
    margin-bottom: -0.875rem; }
  .contractRepository .cotractRepositoryOPTAuth .contractRepositoryErrorMaxTriesReached {
    align-self: flex-start;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 0.875rem;
    color: #df6938;
    margin-bottom: -0.875rem; }
  .contractRepository .cotractRepositoryOPTAuth .contractRepositoryTimeLimitWarningIcon {
    width: 1.5rem;
    margin-right: 8px; }

.contractRepository .seeContractButton {
  width: 185px;
  padding: 16px 24px; }

.termsLink.visitLink.blue {
  text-decoration: underline;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121; }

.checkboxTextWrapper {
  margin-top: 8px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121; }

.termsCheckboxesContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-bottom: 8px;
  gap: 24px; }

.tvNetflix .tvNetflixModalContainer {
  width: 100%;
  display: flex;
  flex-direction: column; }
  .tvNetflix .tvNetflixModalContainer .headerContainer {
    width: 100%; }
    @media only screen and (max-width: 767px) {
      .tvNetflix .tvNetflixModalContainer .headerContainer {
        position: static; } }
  .tvNetflix .tvNetflixModalContainer .navbar-container {
    background-color: transparent; }
  .tvNetflix .tvNetflixModalContainer .navbar {
    padding: 2px 24px 0; }
  .tvNetflix .tvNetflixModalContainer .gradient-line {
    width: 100%; }
    @media only screen and (max-width: 1024px) {
      .tvNetflix .tvNetflixModalContainer .gradient-line {
        position: relative;
        bottom: -12px;
        display: block; } }
  .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all 1s ease-in-out; }
    .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody.hidden {
      display: none; }
    .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .buttonOuter.chooseFlavorButton {
      align-self: end; }
    .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .tvNetflixInfoText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
      .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .tvNetflixInfoText.marginBottom {
        display: block;
        margin-bottom: 24px; }
    .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer {
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: 16px;
      align-items: flex-end;
      flex-wrap: wrap; }
      .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer.flavorsContainerNoWrap {
        flex-wrap: nowrap; }
      .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .purchasedFlavorCard {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 380px;
        border-radius: 16px;
        background-color: #0099cc;
        margin-right: 8px; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .purchasedFlavorCard.hidden {
          display: none; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .purchasedFlavorCard .myPackage {
          display: block;
          padding: 8px;
          font-family: 'BTCosmo-Bold', sans-serif;
          font-size: 16px;
          line-height: 20px;
          font-weight: 700;
          color: #ffffff;
          text-align: center; }
      .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 16px;
        border: 1px solid #e6e6e6;
        background: #ffffff;
        padding: 16px;
        min-width: 268px;
        max-width: 268px;
        min-height: 350px;
        gap: 16px;
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        z-index: 10000; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard.pointer {
          cursor: pointer; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard.hidden {
          display: none; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard.picked {
          border: 1px solid #0099cc; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard.chosen {
          min-height: 340px; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .title {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          gap: 8px;
          height: 36px; }
          .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .title .md-radio label:before {
            top: -2px; }
          .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .title .md-radio label:after {
            top: 2px; }
          .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .title .toggleContentLabel {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 16px;
            line-height: 20px;
            font-weight: 700; }
            .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .title .toggleContentLabel.light {
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .subtitle {
          display: flex;
          flex-direction: column; }
          .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .subtitle .price .amount {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 32px;
            line-height: 36px;
            font-weight: 700; }
          .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .subtitle .price .decimal {
            font-family: 'BTCosmo-Bold', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700; }
          .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .subtitle .priceInfo {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            color: #848484; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .benefitList {
          display: flex;
          flex-direction: column;
          gap: 12px; }
          .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .benefitList .benefit {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: start;
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorCard .buttonOuter.chooseFlavorButton {
          align-self: center;
          margin-top: auto;
          display: none; }
      .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorInfo {
        width: 100%;
        min-height: 351px;
        align-self: start;
        padding-left: 8px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        justify-content: space-between; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorInfo.hidden {
          display: none; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorInfo.moreHeight {
          min-height: 387px; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorInfo .flavorInfoText {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400; }
        .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsContainer .flavorInfo .buttonGroup {
          display: flex;
          flex-direction: row;
          justify-content: end;
          align-items: center;
          gap: 8px;
          position: relative; }
    .tvNetflix .tvNetflixModalContainer .tvNetflixModalBody .flavorsInfoText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      color: #848484; }
  .tvNetflix .tvNetflixModalContainer .toggleContentLabel {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

.tvNetflix .contactContent {
  display: flex;
  flex-direction: column;
  gap: 24px; }
  .tvNetflix .contactContent span {
    display: block;
    font-size: 16px;
    line-height: 18px; }
  .tvNetflix .contactContent .buttonOuter {
    margin-top: 8px; }

.tvNetflix .tvNetflixOTPAuth {
  display: flex;
  flex-direction: column;
  align-items: start; }
  .tvNetflix .tvNetflixOTPAuth .completeButton {
    align-self: flex-end;
    padding: 12px 16px;
    margin-top: 16px; }
  .tvNetflix .tvNetflixOTPAuth .blueFrame {
    display: flex;
    padding: 8px 16px;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
    border: 2px solid #2775b2;
    background-color: #f4f8fb; }
    .tvNetflix .tvNetflixOTPAuth .blueFrame .text {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
  .tvNetflix .tvNetflixOTPAuth .inputWithButton {
    width: 100%; }
  .tvNetflix .tvNetflixOTPAuth .tvNetflixInsertPin label {
    margin-top: 0.375rem;
    color: #212121;
    letter-spacing: 0;
    text-align: left;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .tvNetflix .tvNetflixOTPAuth .tvNetflixInsertPin .tvNetflixErrorWrongPinMessage {
    display: none; }
  .tvNetflix .tvNetflixOTPAuth .tvNetflixInsertPin.error .tvNetflixErrorWrongPinTitle {
    color: #df6938; }
  .tvNetflix .tvNetflixOTPAuth .tvNetflixInsertPin.error .tvNetflixErrorWrongPinMessage {
    display: block;
    align-self: flex-start;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 0.875rem;
    color: #df6938;
    margin-bottom: -0.875rem; }
  .tvNetflix .tvNetflixOTPAuth .tvNetflixErrorMaxTriesReached {
    align-self: flex-start;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 0.875rem;
    color: #df6938;
    margin-bottom: -0.875rem; }
  .tvNetflix .tvNetflixOTPAuth .tvNetflixTimeLimitWarningIcon {
    width: 1.5rem;
    margin-right: 8px; }
  .tvNetflix .tvNetflixOTPAuth .tvNetflixOTPHiddenContent {
    width: 100%; }

.tvNetflix .tvNetflixOfferListItem {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 4px; }

.tvNetflix .offerBox .offerListItemDetails .offerListItemDetailsTop {
  margin-top: 0 !important; }

.tvNetflix .offerListItemContentLeft .offerListItemDetails {
  border-right: 1px solid #00a5e3; }

.tvNetflix .offerBox .offerListItemContentRight {
  justify-content: start !important; }
  .tvNetflix .offerBox .offerListItemContentRight:before {
    display: none !important; }
  .tvNetflix .offerBox .offerListItemContentRight .detailsContentRight {
    text-align: start; }
  .tvNetflix .offerBox .offerListItemContentRight .discountDescription {
    text-align: start; }

.tvNetflix .offerListItem .offerListItemContent .offerListItemContentRight .detailsContentRight .toPay {
  margin-top: 0 !important;
  padding-left: 0 !important; }

.tvNetflix .offerListItemTitle {
  text-align: start !important; }

.tvNetflix .offerListItemHeader {
  padding: 16px !important; }

.tvNetflix .paymentDeadline {
  border-bottom: none !important; }

.tvNetflix .tvNetflixSecondaryButton {
  margin-top: 8px; }

.tvNetflix .giftTitle {
  margin-left: 0 !important;
  color: #2775b2 !important; }

.tvNetflix .tvNetflixForm .paymentContentTitle {
  margin-bottom: 32px; }

.tvNetflix .tvNetflixForm .paymentMethod .paymentSelectContainer {
  margin: 0 !important;
  max-width: 100% !important; }

.tvNetflix .tvNetflixForm .continueButton {
  margin-top: 32px; }

.tvNetflix .tvNetflixForm .acceptTerms {
  margin-top: 24px; }

.tvNetflix .tvNetflixForm .smallerInput {
  max-width: 320px; }

.tvNetflix .tvNetflixForm .programDetails {
  padding-left: 0 !important; }

.tvNetflix .tvNetflixForm .blueButtonSmall {
  padding: 16px 24px;
  display: flex;
  width: max-content;
  height: auto; }

.tvNetflix .tvNetflixCompletion {
  padding-left: 108px; }
  .tvNetflix .tvNetflixCompletion img {
    width: 84px;
    height: 84px;
    flex-shrink: 0; }
  .tvNetflix .tvNetflixCompletion .purchaseCompletionParagraph {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: start; }

.tvNetflix .tvNetflixDetailsBoxWithPadding {
  padding-bottom: 32px; }

.tvNetflix .signatureText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.tvNetflix .largeBoldText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  padding-bottom: 24px; }

.tvNetflix .programItems {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 24px;
  margin-bottom: 16px; }
  .tvNetflix .programItems.noGapAndMargin {
    gap: 0;
    margin-bottom: 0; }
  .tvNetflix .programItems .programItem {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: space-between; }
    .tvNetflix .programItems .programItem .programItemTitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .tvNetflix .programItems .programItem .programItemPrice {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
  .tvNetflix .programItems .inProgressText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #848484; }
  .tvNetflix .programItems .manageNetflixButton {
    margin-top: 8px;
    width: max-content; }
  .tvNetflix .programItems .programInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    color: #212121;
    background-color: #f4f8fb;
    border: 1px solid #2775b2;
    padding: 10px 16px;
    border-radius: 16px;
    margin-top: 8px; }
    .tvNetflix .programItems .programInfo .info {
      display: flex;
      flex-direction: row;
      align-items: start;
      gap: 8px; }
      .tvNetflix .programItems .programInfo .info .text {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        align-items: flex-start; }
    .tvNetflix .programItems .programInfo .activateButton {
      min-width: unset;
      width: max-content;
      align-self: start;
      padding: 8px 12px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 700;
      height: unset;
      border-radius: 12px; }
      .tvNetflix .programItems .programInfo .activateButton.marginLeft {
        margin-left: 32px; }

.tvNetflix .visitLinksContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-bottom: 8px;
  margin-top: 8px; }
  .tvNetflix .visitLinksContainer.noTopMargin {
    margin-top: 0; }
  .tvNetflix .visitLinksContainer .visitLink {
    text-align: center; }

.tvNetflix .footerText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #848484; }

.tvNetflix .tvNetflixInformativeBox {
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-top: 24px; }

.tvNetflix .successModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 48px;
  gap: 16px; }

.tvNetflix .tvNetflixPackageListItem .tvNetflixPackageImage {
  margin: auto; }

.tvNetflix .md-checkbox-simple.netflix-acceptTerms {
  margin: 8px 0 0; }
  .tvNetflix .md-checkbox-simple.netflix-acceptTerms a {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    padding: 0 !important;
    text-decoration: underline; }

.tvNetflix .assetInputWrapper.disabled .inputTitle {
  color: #212121; }

.tvNetflix .assetInputWrapper.disabled .dropdownContainer input {
  color: #848484;
  pointer-events: none;
  border: 1px solid #212121; }

.tvNetflix .assetInputWrapper.disabled .dropdownContainer i {
  display: none; }

.tvNetflix .netflixInfo {
  padding-bottom: 16px; }

.tvNetflix .tvNetflixOfferListHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-top: 32px; }

.tvNetflix .tvImage {
  width: 98px; }

.tvNetflix .packageContains {
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  padding-bottom: 24px; }

.tvNetflix .withoutTopPadding {
  padding-top: 0 !important; }

.kalaActiveConnectionsReport .completeModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 48px;
  gap: 16px; }
  .kalaActiveConnectionsReport .completeModalBody.failureContainer {
    flex-direction: row;
    gap: 24px;
    align-items: start; }

.kalaActiveConnectionsReport .kalaActiveConnectionsReportModalBody {
  padding: 12px 16px 24px; }

.kalaActiveConnectionsReport .kalaActiveConnectionsReportModalTitle {
  padding: 16px 24px 12px; }

.kalaMassActivation .modalBody {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px 24px; }
  .kalaMassActivation .modalBody.noGap {
    gap: 0; }
  .kalaMassActivation .modalBody .modalBodyTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    padding-bottom: 4px; }
  .kalaMassActivation .modalBody .modalBodySubText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    padding-bottom: 4px; }

.kalaMassActivation .noMargin {
  margin: 0; }

.kalaMassActivation .continueButton {
  align-self: center;
  margin-top: 8px; }
  .kalaMassActivation .continueButton .blueButton {
    min-width: unset; }

.kalaMassActivation .phoneNumberInput {
  width: 100%;
  margin-top: 8px; }
  .kalaMassActivation .phoneNumberInput.disabled {
    display: block; }
    .kalaMassActivation .phoneNumberInput.disabled .simpleInput {
      pointer-events: none;
      border: 1px solid #848484;
      color: #848484; }
    .kalaMassActivation .phoneNumberInput.disabled .phoneNumberInputTitle {
      color: #848484; }
  .kalaMassActivation .phoneNumberInput .phoneNumberInputTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    display: block;
    padding-bottom: 8px; }
  .kalaMassActivation .phoneNumberInput .errorMessage {
    display: none; }

.kalaMassActivation .phoneListInput {
  width: 100%; }
  .kalaMassActivation .phoneListInput .phoneListInputTitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    display: block;
    padding-bottom: 8px; }
  .kalaMassActivation .phoneListInput .simpleInput {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    width: 100%;
    display: flex;
    height: 112px;
    border-radius: 16px;
    border: 1px solid var(--grayscale-5-text, #212121);
    height: 112px;
    padding: 8px 16px 8px 8px;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    resize: none;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }
  .kalaMassActivation .phoneListInput .errorMessage {
    display: none; }
  .kalaMassActivation .phoneListInput.error .simpleInput {
    border: 1px solid #df6938; }
  .kalaMassActivation .phoneListInput.error .phoneListInputTitle {
    color: #212121; }
  .kalaMassActivation .phoneListInput.error .errorMessage {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #df6938;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 4px;
    padding-top: 4px; }

.kalaMassActivation span .strong {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.kalaMassActivation .completionContainer {
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 24px; }
  .kalaMassActivation .completionContainer .completionIcon {
    width: 40px;
    height: 40px; }

.kalaMassActivation .activatePackageRadioContainer {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px; }
  .kalaMassActivation .activatePackageRadioContainer.hidden {
    display: none; }

.kalaMassActivation .textWithInfo {
  display: flex;
  flex-direction: row;
  gap: 8px; }
  .kalaMassActivation .textWithInfo img {
    position: relative;
    top: 1px; }

.kalaMassActivation .checkboxesModalContainer {
  max-width: 844px; }

.kalaMassActivation .multiple-reports-wrapper {
  margin: 24px 0 0;
  width: 100%; }
  .kalaMassActivation .multiple-reports-wrapper .multiple-reports-box-container {
    max-width: unset; }

.kalaMassActivation .multiple-reports-box {
  height: 256px !important; }

.kalaMassActivation .inputWithButton {
  width: 100%;
  margin-bottom: 0; }
  .kalaMassActivation .inputWithButton .icon-cancel {
    position: absolute;
    right: 8px;
    bottom: 12px;
    top: 12px;
    font-size: 24px;
    display: none; }
    .kalaMassActivation .inputWithButton .icon-cancel.active {
      cursor: pointer;
      display: block; }

.kalaMassActivation .assetDropdownInput.opened {
  border-radius: 16px 16px 0 0;
  border-bottom: none; }

.kalaMassActivation .assetDropdownContentBox {
  position: absolute;
  z-index: 2;
  width: 100%;
  flex-flow: column;
  border: 1px solid #212121;
  border-top: none;
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  max-width: 434px;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  transform: translateY(100%);
  display: none; }
  .kalaMassActivation .assetDropdownContentBox.opened {
    display: block; }

.kalaMassActivation .assetDropDownCol {
  color: #212121;
  padding: 12px 8px;
  display: flex;
  align-items: baseline; }
  .kalaMassActivation .assetDropDownCol span {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    position: relative;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    cursor: pointer; }
    .kalaMassActivation .assetDropDownCol span em {
      font-style: normal;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: -4px; }
  .kalaMassActivation .assetDropDownCol.selected {
    background-color: #00a5e3;
    color: #ffffff; }
    .kalaMassActivation .assetDropDownCol.selected.secondaryBckg {
      background-color: #00a5e3; }
  .kalaMassActivation .assetDropDownCol:hover {
    background-color: #00a5e3;
    color: #ffffff; }
  .kalaMassActivation .assetDropDownCol i {
    margin-right: 4px; }

.kalaMassActivation .selectedAssetsContainer {
  overflow: auto; }
  .kalaMassActivation .selectedAssetsContainer .selectedAsset {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 0; }
    .kalaMassActivation .selectedAssetsContainer .selectedAsset .icon-remove {
      cursor: pointer; }
    .kalaMassActivation .selectedAssetsContainer .selectedAsset.hidden {
      display: none; }

.kalaMassActivation .addAssetDropdownInput.opened {
  border-radius: 16px 16px 0 0;
  border-bottom: none; }

.kalaMassActivation .addAssetDropdownContentBox {
  position: absolute;
  z-index: 2;
  width: 100%;
  flex-flow: column;
  border: 1px solid #212121;
  border-top: none;
  background-color: #ffffff;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  max-width: 320px;
  display: none; }
  .kalaMassActivation .addAssetDropdownContentBox.opened {
    display: block; }

.kalaMassActivation .addAssetDropDownCol {
  color: #212121;
  padding: 12px 8px;
  display: flex;
  align-items: baseline; }
  .kalaMassActivation .addAssetDropDownCol span {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    position: relative;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    cursor: pointer; }
    .kalaMassActivation .addAssetDropDownCol span em {
      font-style: normal;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: -4px; }
  .kalaMassActivation .addAssetDropDownCol.selected {
    background-color: #00a5e3;
    color: #ffffff; }
    .kalaMassActivation .addAssetDropDownCol.selected.secondaryBckg {
      background-color: #00a5e3; }
  .kalaMassActivation .addAssetDropDownCol:hover {
    background-color: #00a5e3;
    color: #ffffff; }
  .kalaMassActivation .addAssetDropDownCol i {
    margin-right: 4px; }

.kalaMassActivation .emptyList {
  display: flex;
  align-self: center;
  padding: 8px; }
  .kalaMassActivation .emptyList.hidden {
    display: none; }

.kalaMassActivation .addPhoneNumberContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: end; }
  .kalaMassActivation .addPhoneNumberContainer .addAssetButton .blueButton {
    min-width: unset;
    padding: 16px 24px;
    font-size: 16px;
    height: unset; }
  .kalaMassActivation .addPhoneNumberContainer .addPhoneNumberInput {
    margin-bottom: 0;
    width: 100%; }
  .kalaMassActivation .addPhoneNumberContainer.error .addPhoneNumberInput .phoneNumberInput .simpleInput {
    border: 1px solid #df6938; }
  .kalaMassActivation .addPhoneNumberContainer.error .addPhoneNumberInput .phoneNumberInput .errorMessage {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #df6938;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 4px;
    padding-top: 4px; }
  .kalaMassActivation .addPhoneNumberContainer.error .addAssetButton {
    margin-bottom: 24px; }

.kalaMassActivation .searchAssetInput {
  padding: 8px 40px;
  box-sizing: border-box;
  width: 100%;
  border: none;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  display: inline-block;
  background-color: transparent; }

.faultNavigatorHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background-color: #ffffff; }
  .faultNavigatorHeader .faultNavigatorBackButton {
    position: absolute;
    display: flex;
    left: 7px;
    padding: 12px; }
  .faultNavigatorHeader .faultNavigatorHeaderTitle {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }

.modalTitle.faultNavigatorModalTitle {
  padding: 12px 16px; }

.faultNavigatorCircleDeadline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%; }
  .faultNavigatorCircleDeadline .faultNavigatorCircleDeadlineDate {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }

.faultNavigatorProgress {
  pointer-events: none; }
  .faultNavigatorProgress.step1 {
    position: absolute;
    top: 0;
    left: 169px; }
    .faultNavigatorProgress.step1.current {
      right: 0px;
      left: 0px;
      transform: rotateZ(304deg);
      z-index: 1; }
  .faultNavigatorProgress.step2 {
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotate(3deg); }
    .faultNavigatorProgress.step2.complete {
      top: 81px;
      left: 289px;
      transform: rotateY(180deg) rotateZ(4deg); }
  .faultNavigatorProgress.step3 {
    position: absolute;
    bottom: 0px;
    left: 170px; }
    .faultNavigatorProgress.step3.current {
      left: 0px;
      transform: rotateZ(64deg);
      z-index: 1; }
  .faultNavigatorProgress.step4 {
    position: absolute;
    left: 27px;
    bottom: 0; }
    .faultNavigatorProgress.step4.current {
      left: 0px;
      z-index: 1;
      transform: rotateZ(124deg); }
  .faultNavigatorProgress.step5 {
    position: absolute;
    top: 0;
    left: 0px; }
    .faultNavigatorProgress.step5.complete {
      top: 91px;
      left: 0px; }
    .faultNavigatorProgress.step5.current {
      z-index: 1;
      transform: rotateZ(183deg); }
  .faultNavigatorProgress.step6 {
    position: absolute;
    left: 68px;
    transform: rotate(60deg);
    bottom: 209px; }
    .faultNavigatorProgress.step6.current {
      transform: rotateZ(243deg);
      bottom: 0;
      left: 0;
      z-index: 1; }
  .faultNavigatorProgress.step7 {
    position: absolute;
    top: 0;
    left: 0px;
    transform: rotate(1deg); }

.faultNavigatorPopupBody {
  padding: 8px 24px 24px 24px;
  margin-top: 24px; }
  .faultNavigatorPopupBody .faultNavigatorPopupTitle {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    margin-top: 16px; }

.faultNavigatorPopupText {
  display: flex;
  flex-direction: column;
  gap: 16px; }
  .faultNavigatorPopupText .faultNavigatorPopupInfo {
    display: flex;
    flex-direction: column;
    gap: 16px; }
  .faultNavigatorPopupText .faultNavigatorInfoText {
    display: flex;
    gap: 16px; }

.faultNavigatorBody {
  display: flex;
  padding: 16px 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px; }
  .faultNavigatorBody.faultNavigatorBodyNoPadding {
    padding: 0px; }

.faultNavigatorHistoryButton {
  border-top: 1px solid #e6e6e6;
  padding: 16px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; }
  .faultNavigatorHistoryButton .faultNavigatorHistoryIconContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000000; }

.faultNavigatorShowMoreText {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
  color: #0e8103; }

.box.faultNavigatorDetailsBox {
  display: flex;
  padding: 0;
  width: 100%; }
  .box.faultNavigatorDetailsBox .faultNavigatorButtonGroup {
    margin-top: 41px;
    padding: 15px 16px 16px 16px; }
  .box.faultNavigatorDetailsBox .faultNavigatorDetailsBoxGroups {
    display: flex;
    gap: 17px;
    color: #212121; }

.box.faultNavigatorErrorBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 16px 8px 8px;
  background-color: #fefcf7;
  border: 2px solid #da7800; }
  .box.faultNavigatorErrorBox .faultNavigatorErrorBoxDetails {
    font-weight: 400 !important; }
  .box.faultNavigatorErrorBox .faultNavigatorErrorBoxImg {
    align-self: flex-start; }
  .box.faultNavigatorErrorBox.forTechnitial {
    width: auto; }
  .box.faultNavigatorErrorBox.forApp {
    border: 2px solid #2775b2;
    background-color: #f4f8fb;
    width: 100%; }
  .box.faultNavigatorErrorBox .faultNavigatorErrorBoxButton {
    width: 100%;
    padding: 16px 24px;
    margin-top: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    color: #212121;
    background-color: #fefcf7;
    border-color: #212121; }
  .box.faultNavigatorErrorBox .faultNavigatorErrorBoxTitle {
    display: flex;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 4px; }
  .box.faultNavigatorErrorBox .faultNavigatorErrorBoxContent {
    display: flex;
    gap: 8px; }
  .box.faultNavigatorErrorBox .faultNavigatorErrorBoxText {
    display: flex;
    flex-direction: column; }

.box.faultNavigatorSupportBox {
  width: 100%;
  padding: 16px; }

.box.faultNavigatorOfferBox {
  display: flex;
  flex-direction: column;
  width: 358px;
  padding: 12px;
  gap: 8px; }
  .box.faultNavigatorOfferBox .faultNavigatorOfferBoxTitle {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    display: flex;
    gap: 8px;
    color: #212121; }
  .box.faultNavigatorOfferBox .primaryButton {
    margin-top: 8px;
    padding: 16px 24px; }
  .box.faultNavigatorOfferBox .faultNavigatorOfferBoxText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #767676; }

.box.faultNavigatorBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 16px;
  width: auto; }

.box .circleText {
  display: flex;
  position: absolute;
  flex-direction: column;
  transform: translateY(350%); }
  .box .circleText .circleSubtext {
    font-size: 0.8em;
    color: #666; }

.box .progressWrapper {
  position: relative;
  align-self: center;
  width: 328px;
  height: 328px; }

.box .progressRing {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1, -1) rotate(15deg);
  transform-origin: center; }

.box .progressRingBg {
  fill: none;
  stroke: #e0e0e0; }

.box .progressRingFillBackground {
  fill: none;
  stroke: #e6e6e6;
  stroke-width: 20;
  stroke-linecap: round; }

.box .progressRingFill {
  fill: none;
  stroke: #33a229;
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 968; }
  .box .progressRingFill.step-1 {
    stroke-dashoffset: 774.4 !important; }
  .box .progressRingFill.step-2 {
    stroke-dashoffset: 400 !important; }
  .box .progressRingFill.step-3 {
    stroke-dashoffset: 200 !important; }
  .box .progressRingFill.step-4 {
    stroke-dashoffset: 0 !important; }

.box .faultNavigatorProgressStatus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  text-align: center; }
  .box .faultNavigatorProgressStatus .faultNavigatorProgressStatusTitle {
    display: flex;
    font-size: 24px !important;
    font-weight: 700;
    text-align: center;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700; }
  .box .faultNavigatorProgressStatus .faultNavigatorProgressStatusContext {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    width: 224px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #767676; }

.box .faultNavigatorBoxTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  padding-bottom: 16px; }
  .box .faultNavigatorBoxTitle.web {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    border-radius: 16px 0px;
    background-color: #e6e6e6;
    position: absolute; }

.box.hideGiftBox {
  display: none !important; }

.faultNavigatorSupportBox {
  display: flex;
  flex-direction: column; }
  .faultNavigatorSupportBox li:not(:last-child) {
    border-bottom: 1px solid #e6e6e6; }
  .faultNavigatorSupportBox .faultNavigatorButton {
    padding: 12px 0px;
    display: flex;
    flex-direction: row;
    color: #000000; }
    .faultNavigatorSupportBox .faultNavigatorButton .faultNavigatorButtonInactive {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600;
      display: flex;
      padding: 8px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border-radius: 12px;
      background-color: #f2f2f3; }
    .faultNavigatorSupportBox .faultNavigatorButton .faultNavigatorButtonActive {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600;
      color: #00699e;
      display: flex;
      padding: 8px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border-radius: 12px;
      background-color: #b8e0ef; }
    .faultNavigatorSupportBox .faultNavigatorButton .faultNavigatorButtonImgGroup {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-right: auto; }
    .faultNavigatorSupportBox .faultNavigatorButton .faultNavigatorButtonImgGroupRightSide {
      display: flex;
      align-items: center;
      gap: 8px; }
    .faultNavigatorSupportBox .faultNavigatorButton .faultNavigatorButtonSubtext {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      color: #767676; }
    .faultNavigatorSupportBox .faultNavigatorButton .faultNavigatorButtonImgGroupText {
      display: flex;
      flex-direction: column;
      margin-right: 8px; }
  .faultNavigatorSupportBox .faultNavigatorBoxSecondaryText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 16px; }
  .faultNavigatorSupportBox .secondaryButton {
    padding: 16px 24px; }
  .faultNavigatorSupportBox .faultNavigatorReviewBoxTitle {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 8px; }

.fn-offerCard {
  display: flex;
  flex-direction: column;
  gap: 8px; }
  .fn-offerCard .detailsIcon {
    display: inline-flex;
    align-items: center;
    gap: 8px; }
    .fn-offerCard .detailsIcon img {
      width: 24px;
      height: 24px;
      display: block; }
  .fn-offerCard .detailsContent {
    display: flex; }
  .fn-offerCard .detailsContentLeft {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .fn-offerCard .packageInfoTitleOffer {
    display: inline-flex;
    align-items: center;
    gap: 8px; }
  .fn-offerCard .packageInfoTitleOffer img {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0; }

.no-pdt {
  padding-top: 0 !important; }

#portalOnlyModal {
  overflow: hidden !important; }

#portalOnlyModal .modal-wrapper,
#portalOnlyModal .modal-body,
#portalOnlyModal .modal-container {
  overflow: hidden !important;
  max-height: none !important; }

.mr-8 {
  margin-right: 8px !important; }

.ml-8 {
  margin-left: 8px !important; }

.detailsIcon--compact {
  gap: 8px; }

.detailsIcon--compact img {
  margin-right: 0 !important; }

.packageInfo--grouped {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.packageInfo--grouped .packageInfoTitleOffer {
  display: flex;
  align-items: center;
  gap: 8px; }

.fn-offerCard .packageInfoTitleOffer--meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.fn-offerCard .packageInfoTitleOffer--meta img {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto; }

.fn-offerCard .fn-offerCard__button {
  margin-top: 8px; }

.fn-offerCard .fn-offerCard__button .primaryButton {
  margin-top: 16px; }

.fn-offerCard .packageInfoTitleOffer--description {
  margin-top: 0;
  color: var(--Grayscale-Light-Mode-3, var(--grayscale-3-meta, #666));
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.fn-offerCard .packageInfo--grouped {
  gap: 16px; }

.fn-offerCard .packageInfo--grouped .packageInfoTitleOffer--description {
  margin-top: -16px; }

/* === Faults Modals (Active / Resolved / Only Active / Only Solved) === */
#fnResolvedFaultsModal .modal-wrapper,
#fnOnlyActiveFaultsModal .modal-wrapper,
#fnOnlySolvedFaultsModal .modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; }

#fnResolvedFaultsModal .modal-container.modal-container-large,
#fnOnlyActiveFaultsModal .modal-container.modal-container-large,
#fnOnlySolvedFaultsModal .modal-container.modal-container-large {
  width: 576px;
  height: 887px;
  max-width: 576px;
  max-height: 887px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16px;
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden; }

#fnResolvedFaultsModal .modalTitle,
#fnOnlyActiveFaultsModal .modalTitle,
#fnOnlySolvedFaultsModal .modalTitle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important; }

#fnResolvedFaultsModal .modalTitle .modal-closeButton,
#fnOnlyActiveFaultsModal .modalTitle .modal-closeButton,
#fnOnlySolvedFaultsModal .modalTitle .modal-closeButton {
  position: absolute;
  right: 0;
  top: 0;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important; }

#fnResolvedFaultsModal .modalTitle .modal-closeButton::before,
#fnOnlyActiveFaultsModal .modalTitle .modal-closeButton::before,
#fnOnlySolvedFaultsModal .modalTitle .modal-closeButton::before {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px;
  line-height: 24px; }

#fnResolvedFaultsModal .fn-faultModal__top,
#fnOnlyActiveFaultsModal .fn-faultModal__top,
#fnOnlySolvedFaultsModal .fn-faultModal__top {
  display: flex;
  flex-direction: column;
  gap: 24px; }

#fnResolvedFaultsModal .fn-faultModal__divider,
#fnOnlyActiveFaultsModal .fn-faultModal__divider,
#fnOnlySolvedFaultsModal .fn-faultModal__divider {
  height: 1px;
  width: 100%;
  background: var(--Grayscale-2, #e6e6e6); }

#fnResolvedFaultsModal .fn-faultModal__searchWrap,
#fnOnlyActiveFaultsModal .fn-faultModal__searchWrap,
#fnOnlySolvedFaultsModal .fn-faultModal__searchWrap {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box; }

#fnResolvedFaultsModal .businessContentSearch.fn-faultModal__search,
#fnOnlyActiveFaultsModal .businessContentSearch.fn-faultModal__search,
#fnOnlySolvedFaultsModal .businessContentSearch.fn-faultModal__search {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px 8px 8px !important;
  border: 1px solid var(--neutral-grayscale-5-text, #212121) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important; }

#fnResolvedFaultsModal .businessContentSearch.fn-faultModal__search .icon-lens,
#fnOnlyActiveFaultsModal .businessContentSearch.fn-faultModal__search .icon-lens,
#fnOnlySolvedFaultsModal .businessContentSearch.fn-faultModal__search .icon-lens {
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important; }

#fnResolvedFaultsModal .businessContentSearch.fn-faultModal__search .businessInput,
#fnOnlyActiveFaultsModal .businessContentSearch.fn-faultModal__search .businessInput,
#fnOnlySolvedFaultsModal .businessContentSearch.fn-faultModal__search .businessInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121 !important; }

#fnResolvedFaultsModal .businessContentSearch.fn-faultModal__search .businessInput::placeholder,
#fnOnlyActiveFaultsModal .businessContentSearch.fn-faultModal__search .businessInput::placeholder,
#fnOnlySolvedFaultsModal .businessContentSearch.fn-faultModal__search .businessInput::placeholder {
  color: var(--neutral-grayscale-4-disable, #848484) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; }

#fnResolvedFaultsModal .fn-faultModal__dd,
#fnOnlyActiveFaultsModal .fn-faultModal__dd,
#fnOnlySolvedFaultsModal .fn-faultModal__dd {
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box; }

#fnResolvedFaultsModal .modal-body,
#fnResolvedFaultsModal .modal-container,
#fnResolvedFaultsModal .fn-faultModal,
#fnResolvedFaultsModal .ddFilter,
#fnResolvedFaultsModal .ddFilterContent,
#fnOnlyActiveFaultsModal .modal-body,
#fnOnlyActiveFaultsModal .modal-container,
#fnOnlyActiveFaultsModal .fn-faultModal,
#fnOnlyActiveFaultsModal .ddFilter,
#fnOnlyActiveFaultsModal .ddFilterContent,
#fnOnlySolvedFaultsModal .modal-body,
#fnOnlySolvedFaultsModal .modal-container,
#fnOnlySolvedFaultsModal .fn-faultModal,
#fnOnlySolvedFaultsModal .ddFilter,
#fnOnlySolvedFaultsModal .ddFilterContent {
  overflow: visible !important; }

#fnResolvedFaultsModal .ddFilterWrapper,
#fnResolvedFaultsModal .ddFilter,
#fnResolvedFaultsModal .ddFilterContent,
#fnOnlyActiveFaultsModal .ddFilterWrapper,
#fnOnlyActiveFaultsModal .ddFilter,
#fnOnlyActiveFaultsModal .ddFilterContent,
#fnOnlySolvedFaultsModal .ddFilterWrapper,
#fnOnlySolvedFaultsModal .ddFilter,
#fnOnlySolvedFaultsModal .ddFilterContent {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important; }

#fnResolvedFaultsModal .ddFilterWrapper::before,
#fnResolvedFaultsModal .ddFilterWrapper::after,
#fnResolvedFaultsModal .ddFilter::before,
#fnResolvedFaultsModal .ddFilter::after,
#fnResolvedFaultsModal .ddFilterContent::before,
#fnResolvedFaultsModal .ddFilterContent::after,
#fnOnlyActiveFaultsModal .ddFilterWrapper::before,
#fnOnlyActiveFaultsModal .ddFilterWrapper::after,
#fnOnlyActiveFaultsModal .ddFilter::before,
#fnOnlyActiveFaultsModal .ddFilter::after,
#fnOnlyActiveFaultsModal .ddFilterContent::before,
#fnOnlyActiveFaultsModal .ddFilterContent::after,
#fnOnlySolvedFaultsModal .ddFilterWrapper::before,
#fnOnlySolvedFaultsModal .ddFilterWrapper::after,
#fnOnlySolvedFaultsModal .ddFilter::before,
#fnOnlySolvedFaultsModal .ddFilter::after,
#fnOnlySolvedFaultsModal .ddFilterContent::before,
#fnOnlySolvedFaultsModal .ddFilterContent::after {
  content: none !important;
  display: none !important; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__field,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__field,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__field {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__label,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__label,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__label {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__inputRow,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__inputRow,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__inputRow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--grayscale-5-text, #212121);
  cursor: pointer;
  box-sizing: border-box; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__value,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__value,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__value {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 0 5px 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  color: #212121 !important;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__chevron,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__chevron,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__chevron {
  flex: 0 0 auto; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__menu,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__menu,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__menu {
  background: #fff;
  border-radius: 16px;
  border: none;
  overflow: hidden;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12); }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__menuWrap,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__menuWrap,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__menuWrap {
  max-height: 180px;
  overflow-y: auto; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__option.active:first-child,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__option.active:first-child,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__option.active:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__options,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__options,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__options {
  display: flex;
  flex-direction: column; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__option,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__option,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__option {
  display: flex;
  align-items: center;
  padding: 16px;
  text-decoration: none;
  color: var(--grayscale-5-text, #212121);
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__option.active,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__option.active,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__option.active {
  background: var(--grayscale-1, #f2f2f3); }

#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.open .ddFilterExpanded,
#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.active .ddFilterExpanded,
#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.is-open .ddFilterExpanded,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.open .ddFilterExpanded,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.active .ddFilterExpanded,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.is-open .ddFilterExpanded,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.open .ddFilterExpanded,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.active .ddFilterExpanded,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.is-open .ddFilterExpanded {
  position: absolute !important;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 9999; }

#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.open .fn-ddFilter__chevron,
#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.active .fn-ddFilter__chevron,
#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.is-open .fn-ddFilter__chevron,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.open .fn-ddFilter__chevron,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.active .fn-ddFilter__chevron,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.is-open .fn-ddFilter__chevron,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.open .fn-ddFilter__chevron,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.active .fn-ddFilter__chevron,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.is-open .fn-ddFilter__chevron {
  transform: rotate(180deg); }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__search,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__search,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__search {
  display: none !important; }

#fnResolvedFaultsModal .fn-ddFilter__underline,
#fnOnlyActiveFaultsModal .fn-ddFilter__underline,
#fnOnlySolvedFaultsModal .fn-ddFilter__underline {
  display: none !important; }

#fnResolvedFaultsModal .ddFilterWrapper .ddFilter,
#fnOnlyActiveFaultsModal .ddFilterWrapper .ddFilter,
#fnOnlySolvedFaultsModal .ddFilterWrapper .ddFilter {
  padding: 0 !important; }

#fnResolvedFaultsModal .ddFilterWrapper .ddFilter .ddFilterContent:first-child,
#fnOnlyActiveFaultsModal .ddFilterWrapper .ddFilter .ddFilterContent:first-child,
#fnOnlySolvedFaultsModal .ddFilterWrapper .ddFilter .ddFilterContent:first-child {
  margin-right: 0 !important; }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0 16px 24px 0 !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--grayscale-3-meta, #666) var(--Grayscale-2, #e6e6e6);
  scrollbar-gutter: stable; }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar {
  width: 16px; }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-track,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-track,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-track {
  background: transparent; }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-track-piece,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-track-piece,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-track-piece {
  background: var(--Grayscale-2, #e6e6e6);
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: padding-box; }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-thumb,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-thumb,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-thumb {
  background: var(--grayscale-3-meta, #666);
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: padding-box;
  min-height: 55px; }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-button,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-button,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll::-webkit-scrollbar-button {
  width: 0;
  height: 0; }

#fnResolvedFaultsModal .fn-faultModal__resultsList,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important; }

#fnResolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin {
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
  background: #f2f2f3;
  border-radius: 16px;
  padding: 16px;
  border: 0; }

#fnResolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsIcon,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsIcon,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsIcon {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #e6e6e6;
  margin-bottom: 0 !important; }

#fnResolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsIcon img,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsIcon img,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsIcon img {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto; }

#fnResolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsContent,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsContent,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .detailsContent {
  margin-top: 28px !important; }

#fnResolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .packageInfoTitleOffer,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .packageInfoTitleOffer,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .packageInfoTitleOffer {
  display: inline-flex;
  align-items: center;
  gap: 8px; }

#fnResolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .packageInfoTitleOffer img,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .packageInfoTitleOffer img,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList > .box.withMargin.detailsBox.withoutTopMargin .packageInfoTitleOffer img {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0; }

#fnResolvedFaultsModal .fn-faultModal__cards .visitLink,
#fnOnlyActiveFaultsModal .fn-faultModal__cards .visitLink,
#fnOnlySolvedFaultsModal .fn-faultModal__cards .visitLink {
  padding: 0 0 0 8px !important; }

/* (leave fnClearResolvedSuccessModal as-is - separate modal) */
#fnResolvedFaultsModal .modal-wrapper,
#fnOnlyActiveFaultsModal .modal-wrapper,
#fnOnlySolvedFaultsModal .modal-wrapper,
#fnClearResolvedSuccessModal .modal-wrapper {
  min-height: 100dvh !important; }

@media (max-width: 640px) {
  #fnResolvedFaultsModal .modal-wrapper,
  #fnOnlyActiveFaultsModal .modal-wrapper,
  #fnOnlySolvedFaultsModal .modal-wrapper,
  #fnClearResolvedSuccessModal .modal-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important; }
  #fnResolvedFaultsModal .modal-container.modal-container-large,
  #fnOnlyActiveFaultsModal .modal-container.modal-container-large,
  #fnOnlySolvedFaultsModal .modal-container.modal-container-large {
    width: 576px !important;
    max-width: calc(100vw - (var(--fn-modal-side) * 2)) !important;
    max-height: calc(100dvh - (var(--fn-modal-gap) * 2)) !important;
    margin-bottom: var(--fn-modal-gap) !important;
    margin-top: var(--fn-modal-gap) !important;
    height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: max-width 180ms ease, max-height 180ms ease; }
  #fnClearResolvedSuccessModal .modal-container.modal-container-small {
    max-width: calc(100vw - (var(--fn-modal-side) * 2)) !important;
    max-height: calc(100dvh - (var(--fn-modal-gap) * 2)) !important;
    margin-bottom: var(--fn-modal-gap) !important;
    margin-top: var(--fn-modal-gap) !important;
    transition: max-width 180ms ease, max-height 180ms ease; } }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important; }

#fnResolvedFaultsModal .fn-faultModal__resultsList::after,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsList::after,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsList::after {
  display: block !important;
  height: 16px !important; }

@supports not (height: 100dvh) {
  @media (max-width: 640px) {
    #fnResolvedFaultsModal .modal-container.modal-container-large,
    #fnOnlyActiveFaultsModal .modal-container.modal-container-large,
    #fnOnlySolvedFaultsModal .modal-container.modal-container-large,
    #fnClearResolvedSuccessModal .modal-container.modal-container-small {
      max-height: calc(100vh - (var(--fn-modal-gap) * 2)) !important; } } }

.fn-offerCard .fn-offerCard__button .primaryButton {
  margin-top: 0 !important; }

#fnResolvedFaultsModal .modal-container.modal-container-large,
#fnOnlyActiveFaultsModal .modal-container.modal-container-large,
#fnOnlySolvedFaultsModal .modal-container.modal-container-large {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - (var(--fn-modal-gap) * 2)) !important;
  overflow: hidden !important; }

#fnResolvedFaultsModal .modal-body.fn-faultModal,
#fnOnlyActiveFaultsModal .modal-body.fn-faultModal,
#fnOnlySolvedFaultsModal .modal-body.fn-faultModal {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important; }

#fnResolvedFaultsModal .fn-faultModal__resultsScroll,
#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important; }

.fn-dotPill {
  display: inline-flex;
  align-items: center;
  gap: 8px; }

.fn-dotPill__dot {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px;
  display: block; }

.fn-dotPill__text {
  display: block; }

#fnResolvedFaultsModal .fn-filtersRow,
#fnOnlyActiveFaultsModal .fn-filtersRow,
#fnOnlySolvedFaultsModal .fn-filtersRow {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  box-sizing: border-box; }

#fnResolvedFaultsModal .fn-faultDatesRow,
#fnOnlyActiveFaultsModal .fn-faultDatesRow,
#fnOnlySolvedFaultsModal .fn-faultDatesRow {
  display: flex;
  gap: 16px;
  flex: 2 1 0;
  min-width: 0;
  box-sizing: border-box; }

#fnResolvedFaultsModal .fn-dateField,
#fnOnlyActiveFaultsModal .fn-dateField,
#fnOnlySolvedFaultsModal .fn-dateField,
#fnResolvedFaultsModal .fn-typeField,
#fnOnlyActiveFaultsModal .fn-typeField,
#fnOnlySolvedFaultsModal .fn-typeField {
  flex: 1 1 0;
  min-width: 0; }

#fnResolvedFaultsModal .fn-dateLabel,
#fnOnlyActiveFaultsModal .fn-dateLabel,
#fnOnlySolvedFaultsModal .fn-dateLabel {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--grayscale-light-mode-4-disable, var(--grayscale-4-disable, #5f5f5f));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  font-style: normal; }

#fnResolvedFaultsModal .fn-dateControl,
#fnOnlyActiveFaultsModal .fn-dateControl,
#fnOnlySolvedFaultsModal .fn-dateControl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box; }

#fnResolvedFaultsModal .fn-dateInputRow,
#fnOnlyActiveFaultsModal .fn-dateInputRow,
#fnOnlySolvedFaultsModal .fn-dateInputRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box; }

#fnResolvedFaultsModal .fn-dateValue,
#fnOnlyActiveFaultsModal .fn-dateValue,
#fnOnlySolvedFaultsModal .fn-dateValue {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--grayscale-5-text, #212121);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-style: normal; }

.fn-dateIcon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: block; }

.fn-dateUnderline {
  height: 1px;
  width: 100%;
  align-self: stretch;
  display: block;
  background: var(--grayscale-5-text, #212121); }

#fnResolvedFaultsModal .dropdownContainer.fn-dateInputRow,
#fnOnlyActiveFaultsModal .dropdownContainer.fn-dateInputRow,
#fnOnlySolvedFaultsModal .dropdownContainer.fn-dateInputRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 24px; }

#fnResolvedFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateValue,
#fnOnlyActiveFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateValue,
#fnOnlySolvedFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateValue {
  height: 24px;
  line-height: 24px;
  display: block; }

#fnResolvedFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateIcon,
#fnOnlyActiveFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateIcon,
#fnOnlySolvedFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  font-size: 24px;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  position: relative;
  top: 0; }

#fnResolvedFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateIcon::before,
#fnOnlyActiveFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateIcon::before,
#fnOnlySolvedFaultsModal .dropdownContainer.fn-dateInputRow .fn-dateIcon::before {
  line-height: 24px !important;
  display: block; }

#fnResolvedFaultsModal .fn-dateValue,
#fnOnlyActiveFaultsModal .fn-dateValue,
#fnOnlySolvedFaultsModal .fn-dateValue,
#fnResolvedFaultsModal input.fromDate,
#fnOnlyActiveFaultsModal input.fromDate,
#fnOnlySolvedFaultsModal input.fromDate,
#fnResolvedFaultsModal input.toDate,
#fnOnlyActiveFaultsModal input.toDate,
#fnOnlySolvedFaultsModal input.toDate,
#fnResolvedFaultsModal .flatPicker,
#fnOnlyActiveFaultsModal .flatPicker,
#fnOnlySolvedFaultsModal .flatPicker {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  background: none !important;
  background-image: none !important; }

#fnResolvedFaultsModal .fn-dateValue::-webkit-calendar-picker-indicator,
#fnOnlyActiveFaultsModal .fn-dateValue::-webkit-calendar-picker-indicator,
#fnOnlySolvedFaultsModal .fn-dateValue::-webkit-calendar-picker-indicator,
#fnResolvedFaultsModal input.fromDate::-webkit-calendar-picker-indicator,
#fnOnlyActiveFaultsModal input.fromDate::-webkit-calendar-picker-indicator,
#fnOnlySolvedFaultsModal input.fromDate::-webkit-calendar-picker-indicator,
#fnResolvedFaultsModal input.toDate::-webkit-calendar-picker-indicator,
#fnOnlyActiveFaultsModal input.toDate::-webkit-calendar-picker-indicator,
#fnOnlySolvedFaultsModal input.toDate::-webkit-calendar-picker-indicator,
#fnResolvedFaultsModal .flatPicker::-webkit-calendar-picker-indicator,
#fnOnlyActiveFaultsModal .flatPicker::-webkit-calendar-picker-indicator,
#fnOnlySolvedFaultsModal .flatPicker::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  display: none !important;
  -webkit-appearance: none !important; }

#fnResolvedFaultsModal .fn-dateValue::-webkit-inner-spin-button,
#fnOnlyActiveFaultsModal .fn-dateValue::-webkit-inner-spin-button,
#fnOnlySolvedFaultsModal .fn-dateValue::-webkit-inner-spin-button,
#fnResolvedFaultsModal .fn-dateValue::-webkit-outer-spin-button,
#fnOnlyActiveFaultsModal .fn-dateValue::-webkit-outer-spin-button,
#fnOnlySolvedFaultsModal .fn-dateValue::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important; }

.fn-clearWrap {
  position: relative;
  width: fit-content;
  margin-left: auto;
  display: inline-block; }

.fn-clearTooltip {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 354px;
  z-index: 99999;
  display: none; }

.fn-clearWrap:hover .fn-clearTooltip {
  display: block; }

.fn-clearTooltip__pointer {
  position: absolute;
  top: -8px;
  right: 24px;
  width: 16px;
  height: 8px;
  display: block; }

.fn-clearTooltip__bubble {
  background: var(--Grayscale-2, #e6e6e6);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.fn-clearTooltip__text {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
  width: 100%;
  text-align: left;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.fn-clearTooltip__btn {
  margin-left: auto;
  align-self: auto; }

.fn-clearTooltip.is-hidden {
  display: none !important; }

.fnTabPanel.is-hidden {
  display: none !important; }

.fnTopTabs {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 8px; }

.fnTopTabs .fnTopTab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 6px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: var(--grayscale-light-mode-4-disable, var(--grayscale-4-disable, #5f5f5f));
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-style: normal; }

.fnTopTabs .fnTopTab.is-active {
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121)); }

.fnTopTabs .fnTopTabs__underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: #e60073;
  transition: transform 200ms ease, width 200ms ease; }

.fnFaultDateLabel {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  text-align: left;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Bold', 'PeridotPE-Regular', Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; }

#fnResolvedFaultsModal .packageInfo,
#fnOnlyActiveFaultsModal .packageInfo,
#fnOnlySolvedFaultsModal .packageInfo {
  margin-top: 0 !important; }

.fn-emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 0px 24px;
  gap: 8px; }

.fn-emptyState.is-hidden {
  display: none !important; }

.fn-emptyState__icon {
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  display: block; }

.fn-emptyState__title {
  color: #000;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  font-style: normal;
  margin: 0; }

.fn-emptyState__text {
  color: var(--Grayscale-Light-Mode-3, var(--grayscale-3-meta, #666));
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-style: normal;
  margin: 0; }

#fnResolvedFaultsModal.fnEmpty .modal-container.modal-container-large,
#fnOnlyActiveFaultsModal.fnEmpty .modal-container.modal-container-large,
#fnOnlySolvedFaultsModal.fnEmpty .modal-container.modal-container-large {
  height: auto !important;
  max-height: calc(100dvh - (var(--fn-modal-gap) * 2)) !important; }

#fnResolvedFaultsModal.fnEmpty .fn-faultModal__resultsScroll,
#fnOnlyActiveFaultsModal.fnEmpty .fn-faultModal__resultsScroll,
#fnOnlySolvedFaultsModal.fnEmpty .fn-faultModal__resultsScroll {
  flex: 0 1 auto !important;
  overflow: visible !important;
  padding: 0 !important; }

#fnClearResolvedSuccessModal .modal-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100dvh !important; }

#fnClearResolvedSuccessModal .modal-container.modal-container-small {
  width: 576px !important;
  max-width: 576px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  border-radius: 16px;
  background: #fff;
  max-height: calc(100dvh - (var(--fn-modal-gap) * 2)) !important;
  overflow: hidden !important; }

@media (max-width: 640px) {
  #fnClearResolvedSuccessModal .modal-container.modal-container-small {
    max-width: calc(100vw - (var(--fn-modal-side) * 2)) !important; } }

#fnClearResolvedSuccessModal .fn-successModal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 8px 0 0; }

:root {
  --fn-modal-side: 16px;
  --fn-modal-gap: 16px; }

@media (max-width: 640px) {
  #fnResolvedFaultsModal .modal-container.modal-container-large,
  #fnOnlyActiveFaultsModal .modal-container.modal-container-large,
  #fnOnlySolvedFaultsModal .modal-container.modal-container-large {
    width: calc(100vw - (var(--fn-modal-side) * 2)) !important;
    max-width: calc(100vw - (var(--fn-modal-side) * 2)) !important;
    max-height: calc(100dvh - (var(--fn-modal-gap) * 2)) !important;
    height: auto !important;
    margin: var(--fn-modal-gap) auto !important;
    padding: 16px !important;
    border-radius: 16px;
    overflow: hidden !important;
    box-sizing: border-box !important; } }

.fnFaultsTip {
  position: relative;
  display: inline-flex;
  align-items: center; }

.fnFaultsTip__icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #212121;
  color: #212121;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  text-decoration: none; }

.fnFaultsTip__bubble {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  left: auto;
  z-index: 9999;
  width: 314px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  color: #212121;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 150ms ease 120ms, visibility 0ms linear 120ms, transform 150ms ease 120ms; }

.fnFaultsTip__bubble::after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 12px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff; }

.fnFaultsTip:hover .fnFaultsTip__bubble,
.fnFaultsTip.isOpen .fnFaultsTip__bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 150ms ease 120ms, visibility 0ms linear 0ms, transform 150ms ease 120ms; }

.fnFaultsTip:not(:hover):not(.isOpen) .fnFaultsTip__bubble {
  transition: opacity 150ms ease 80ms, visibility 0ms linear 230ms, transform 150ms ease 80ms; }

.fn-offerCard,
.fn-offerCard .detailsIcon {
  overflow: visible !important; }

.fn-offerCard .fn-tooltipWrap {
  position: relative; }

.fn-offerCard .fn-clearTooltip__pointer {
  position: absolute;
  top: -8px;
  left: 32px;
  width: 16px;
  height: 8px;
  display: block; }

.fn-offerCard .fn-clearTooltip__bubble {
  background: var(--Grayscale-2, #e6e6e6);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.fn-offerCard .fn-clearTooltip__btn {
  margin-left: auto; }

#fnOnlyActiveFaultsModal .fn-dateField--to,
#fnResolvedFaultsModal .fn-dateField--to,
#fnOnlySolvedFaultsModal .fn-dateField--to {
  display: none !important; }

#fnOnlyActiveFaultsModal .fn-filtersRow,
#fnResolvedFaultsModal .fn-filtersRow,
#fnOnlySolvedFaultsModal .fn-filtersRow {
  display: flex !important;
  gap: 16px !important;
  width: 100%; }

#fnOnlyActiveFaultsModal .fn-faultDatesRow,
#fnOnlyActiveFaultsModal .fn-typeField,
#fnResolvedFaultsModal .fn-faultDatesRow,
#fnResolvedFaultsModal .fn-typeField,
#fnOnlySolvedFaultsModal .fn-faultDatesRow,
#fnOnlySolvedFaultsModal .fn-typeField {
  flex: 0 0 calc(50% - 8px) !important;
  max-width: calc(50% - 8px) !important;
  min-width: 0 !important; }

#fnOnlyActiveFaultsModal .fn-faultDatesRow,
#fnResolvedFaultsModal .fn-faultDatesRow,
#fnOnlySolvedFaultsModal .fn-faultDatesRow {
  display: block !important; }

#fnOnlyActiveFaultsModal .fn-dateField--from,
#fnResolvedFaultsModal .fn-dateField--from,
#fnOnlySolvedFaultsModal .fn-dateField--from {
  width: 100% !important;
  flex: 1 1 auto !important; }

#fnOnlyActiveFaultsModal .fn-loaderMask,
#fnResolvedFaultsModal .fn-loaderMask,
#fnOnlySolvedFaultsModal .fn-loaderMask {
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 1; }

#fnOnlyActiveFaultsModal .fn-loaderWrap,
#fnResolvedFaultsModal .fn-loaderWrap,
#fnOnlySolvedFaultsModal .fn-loaderWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh; }

#fnOnlyActiveFaultsModal .fn-loaderSpinner,
#fnResolvedFaultsModal .fn-loaderSpinner,
#fnOnlySolvedFaultsModal .fn-loaderSpinner {
  width: 64px;
  height: 64px;
  animation: fn-rotation 1.2s infinite linear; }

#fnOnlyActiveFaultsModal .fn-loaderMask.is-hidden,
#fnResolvedFaultsModal .fn-loaderMask.is-hidden,
#fnOnlySolvedFaultsModal .fn-loaderMask.is-hidden {
  display: none; }

#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll,
#fnResolvedFaultsModal .fn-faultModal__resultsScroll,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll {
  position: relative; }

#fnOnlyActiveFaultsModal .fn-inlineLoader,
#fnResolvedFaultsModal .fn-inlineLoader,
#fnOnlySolvedFaultsModal .fn-inlineLoader {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; }

#fnOnlyActiveFaultsModal .fn-inlineLoader.is-hidden,
#fnResolvedFaultsModal .fn-inlineLoader.is-hidden,
#fnOnlySolvedFaultsModal .fn-inlineLoader.is-hidden {
  display: none; }

#fnOnlyActiveFaultsModal .fn-inlineLoader__spinner,
#fnResolvedFaultsModal .fn-inlineLoader__spinner,
#fnOnlySolvedFaultsModal .fn-inlineLoader__spinner {
  width: 64px;
  height: 64px;
  animation: fn-rotation 1.2s infinite linear; }

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

#fnOnlyActiveFaultsModal.fnCompact .modal-container.modal-container-large,
#fnResolvedFaultsModal.fnCompact .modal-container.modal-container-large,
#fnOnlySolvedFaultsModal.fnCompact .modal-container.modal-container-large {
  height: auto !important; }

#fnOnlyActiveFaultsModal .detailsIcon strong,
#fnResolvedFaultsModal .detailsIcon strong,
#fnOnlySolvedFaultsModal .detailsIcon strong {
  font-weight: 700; }

#fnOnlyActiveFaultsModal .detailsIcon > span strong,
#fnResolvedFaultsModal .detailsIcon > span strong,
#fnOnlySolvedFaultsModal .detailsIcon > span strong {
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Bold', 'PeridotPE-Regular', Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 20px; }

#fnResolvedFaultsModal .fn-ddFilter__inputRow,
#fnOnlyActiveFaultsModal .fn-ddFilter__inputRow,
#fnOnlySolvedFaultsModal .fn-ddFilter__inputRow {
  min-height: 24px !important;
  align-items: center !important; }

#fnResolvedFaultsModal .fn-ddFilter__value,
#fnOnlyActiveFaultsModal .fn-ddFilter__value,
#fnOnlySolvedFaultsModal .fn-ddFilter__value {
  height: 24px !important;
  line-height: 24px !important;
  display: block !important; }

#fnResolvedFaultsModal .fn-ddFilter__chevron,
#fnOnlyActiveFaultsModal .fn-ddFilter__chevron,
#fnOnlySolvedFaultsModal .fn-ddFilter__chevron {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  top: 0 !important;
  color: #212121 !important; }

#fnResolvedFaultsModal .fn-ddFilter__chevron::before,
#fnOnlyActiveFaultsModal .fn-ddFilter__chevron::before,
#fnOnlySolvedFaultsModal .fn-ddFilter__chevron::before {
  line-height: 24px !important;
  display: block !important; }

#fnOnlyActiveFaultsModal .modal-container.modal-container-large,
#fnOnlySolvedFaultsModal .modal-container.modal-container-large {
  height: 887px !important;
  max-height: 887px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; }

#fnOnlyActiveFaultsModal .modal-body.fn-faultModal,
#fnOnlySolvedFaultsModal .modal-body.fn-faultModal {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important; }

#fnOnlyActiveFaultsModal .fn-faultModal__resultsScroll,
#fnOnlySolvedFaultsModal .fn-faultModal__resultsScroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important; }

#fnOnlyActiveFaultsModal .flatpickr-calendar,
#fnResolvedFaultsModal .flatpickr-calendar,
#fnOnlySolvedFaultsModal .flatpickr-calendar {
  z-index: 1000001 !important; }

.fn-offerTipAnchor {
  position: relative;
  display: inline-flex; }

.fn-offerCard .fn-clearTooltip.fn-cardTooltip.fn-offerTip {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 490px;
  max-width: calc(100vw - 32px);
  z-index: 2147483647;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 150ms ease, visibility 0ms linear 150ms, transform 150ms ease; }

.fn-offerCard .fn-offerTip .fn-clearTooltip__pointer {
  position: absolute;
  top: -8px;
  left: 24px;
  width: 16px;
  height: 8px;
  display: block; }

.fn-offerCard .fn-offerTip .fn-clearTooltip__bubble {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  border-radius: 16px;
  background: var(--Grayscale-2, #e6e6e6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.fn-offerCard .fn-offerTip .fn-clearTooltip__text {
  width: 100%;
  text-align: left;
  line-height: 18px; }

.fn-offerTip.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important; }

.fn-iframe .modal-mask.modal-mask-visible {
  z-index: 1000 !important; }

.fn-iframe .noOverlayLayer {
  position: relative !important;
  z-index: 1001 !important; }

.fn-iframe .box.fn-iframe-size,
.fn-iframe .detailsBox.fn-iframe-size {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important; }

.fn-iframe .fn-iframe-size iframe {
  width: 100% !important;
  height: 90vh !important;
  border: 0 !important;
  display: block !important; }

.modal-mask.noAnimation {
  transition: none !important; }

.fn-offerCard,
.fn-offerCard .detailsIcon {
  overflow: visible !important; }

.fn-offerCard:has(.fn-clearTooltip__bubble) {
  position: relative; }

.fn-offerCard:has(.fn-clearTooltip__bubble):hover {
  z-index: 9999; }

.fn-offerCard .fn-offerTipAnchor {
  position: relative;
  display: inline-flex; }

.fn-offerCard .fn-offerTipAnchor::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 12px; }

.fn-offerCard .fn-clearTooltip.fn-cardTooltip.fn-offerTip {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 490px;
  max-width: calc(100vw - 32px);
  z-index: 2147483647;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 100ms ease, transform 100ms ease; }

.fn-offerCard .fn-offerTip:has(.fn-clearTooltip__bubble) .fn-clearTooltip__bubble {
  pointer-events: auto; }

.fn-offerCard .fn-offerTipAnchor:hover .fn-offerTip,
.fn-offerCard .fn-offerTip:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0); }

#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.open .ddFilterExpanded,
#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.active .ddFilterExpanded,
#fnResolvedFaultsModal .fn-ddFilter .ddFilterContent.is-open .ddFilterExpanded,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.open .ddFilterExpanded,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.active .ddFilterExpanded,
#fnOnlyActiveFaultsModal .fn-ddFilter .ddFilterContent.is-open .ddFilterExpanded,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.open .ddFilterExpanded,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.active .ddFilterExpanded,
#fnOnlySolvedFaultsModal .fn-ddFilter .ddFilterContent.is-open .ddFilterExpanded {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 100% !important;
  z-index: 9999; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__menu,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__menu,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__menu {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12); }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__menuWrap,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__menuWrap,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__menuWrap,
#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__options,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__options,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__options {
  margin-top: 0 !important;
  padding-top: 0 !important; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__option:first-child,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__option:first-child,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__option:first-child {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__inputRow,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__inputRow,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__inputRow {
  display: flex;
  align-items: center;
  min-height: 32px; }

#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__value,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__value,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__value,
#fnResolvedFaultsModal .fn-ddFilter .fn-ddFilter__inputRow,
#fnOnlyActiveFaultsModal .fn-ddFilter .fn-ddFilter__inputRow,
#fnOnlySolvedFaultsModal .fn-ddFilter .fn-ddFilter__inputRow {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important; }

.fn-dateIcon,
.fn-dateIcon::before {
  color: #212121 !important; }

.fn-dateLabel {
  color: #212121 !important; }

.fn-offerCard .fn-offerTip .fn-clearTooltip__btn {
  margin-top: 8px; }

.fn-faultModal__search img {
  vertical-align: middle; }

#fnResolvedFaultsModal .fn-ddFilter__chevron,
#fnOnlyActiveFaultsModal .fn-ddFilter__chevron,
#fnOnlySolvedFaultsModal .fn-ddFilter__chevron {
  position: relative;
  top: -8px !important; }

#fnResolvedFaultsModal .businessContentSearch .closeInputIcon.icon-close,
#fnResolvedFaultsModal .businessContentSearch .closeInputIcon.icon-close:before,
#fnOnlyActiveFaultsModal .businessContentSearch .closeInputIcon.icon-close,
#fnOnlyActiveFaultsModal .businessContentSearch .closeInputIcon.icon-close:before,
#fnOnlySolvedFaultsModal .businessContentSearch .closeInputIcon.icon-close,
#fnOnlySolvedFaultsModal .businessContentSearch .closeInputIcon.icon-close:before {
  color: #212121 !important;
  opacity: 1 !important; }

.fnInfoBannerCard {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 16px !important;
  border-radius: 16px;
  border: 2px solid var(--Status-Info-Status-Info, #2775b2) !important;
  background: var(--Status-Info-Status-Info-Fill, #f4f8fb) !important;
  width: 100%;
  box-sizing: border-box; }

.fnInfoBannerCard .fnInfoBannerIcon {
  position: static !important;
  left: auto !important;
  top: auto !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 24px;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 0 !important; }

.fnInfoBannerCard .fnInfoBannerIcon img {
  display: block;
  width: 24px;
  height: 24px; }

.fnInfoBannerCard .detailsContent {
  display: flex;
  flex: 1;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important; }

.fnInfoBannerCard .detailsContentLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important; }

.fnInfoBannerTitle,
.fnInfoBannerText {
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.fnInfoBannerTitle {
  font-family: 'BTCosmo-Bold', Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; }

.fnInfoBannerText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-style: normal; }

.fn-offerCard .fn-offerIcon {
  margin-right: 0 !important; }

.fnFaultsTip {
  position: relative;
  display: inline-flex;
  align-items: center; }

.fnFaultsTip__bubble {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 9999;
  width: 314px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  color: #212121;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 150ms ease, visibility 0ms linear 150ms, transform 150ms ease; }

.fnFaultsTip__bubble::after {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 12px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff; }

.fnFaultsTip:hover .fnFaultsTip__bubble,
.fnFaultsTip:focus-within .fnFaultsTip__bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0); }

body .notificationsDate {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin-top: 16px; }

body .notificationTitle {
  display: block;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin-top: 24px; }

body .notificationSubtitle {
  display: block;
  margin-top: 24px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

body .notificationText {
  display: block;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-top: 24px; }
  body .notificationText.smallMargin {
    margin-top: 8px; }

body .notificationAssistiveText {
  display: block;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin: 8px 0 24px 0;
  color: #848484; }

body .noNotificationsContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0;
  margin: 16px 0;
  gap: 12px; }
  body .noNotificationsContainer .noNotificationsTitle {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  body .noNotificationsContainer .noNotificationsText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

:root {
  --viewport-height: 100vh; }

.appleWatch {
  height: 100%;
  background-color: #ffffff; }
  .appleWatch p {
    margin: 0; }
  .appleWatch .errorText {
    position: relative;
    bottom: 8px; }
  .appleWatch .simple-popup-content .close:before {
    display: none; }
  .appleWatch .appleWatchContainer {
    display: flex;
    flex-direction: column;
    min-height: var(--viewport-height);
    background-color: #f2f2f3; }
  .appleWatch .appleWatchHeader {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    padding-bottom: 24px;
    background-color: #ffffff;
    margin: 16px 16px 0; }
    .appleWatch .appleWatchHeader.moreMargin24 {
      margin: 24px 16px; }
  .appleWatch .appleWatchGDPR {
    position: absolute;
    left: 16px;
    top: 16px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    border: 1px solid #212121;
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700; }
  .appleWatch .appleWatchLanguageSwitch {
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
    z-index: 2;
    height: 24px;
    width: 24px; }
  .appleWatch .lightDivider.lessMargin16 {
    margin: 16px 0 16px; }
  .appleWatch .appleWatchLink {
    color: #212121;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    text-decoration-line: underline;
    padding: 0;
    text-align: center; }
    .appleWatch .appleWatchLink.small {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
    .appleWatch .appleWatchLink.medium {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
  .appleWatch .appleWatchContent {
    flex-grow: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 0 16px; }
    .appleWatch .appleWatchContent .appleWatchBackButton {
      display: flex;
      align-items: center;
      gap: 4px; }
    .appleWatch .appleWatchContent .appleWatchBackButtonColors {
      fill: #0e8103; }
    .appleWatch .appleWatchContent.noHeader {
      padding-top: 24px; }
    .appleWatch .appleWatchContent.withGap16 {
      gap: 16px; }
    .appleWatch .appleWatchContent .appleWatchHeading {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      gap: 4px;
      padding-bottom: 8px; }
      .appleWatch .appleWatchContent .appleWatchHeading.morePadding16 {
        padding-bottom: 16px; }
      .appleWatch .appleWatchContent .appleWatchHeading.morePadding24 {
        padding-bottom: 24px; }
      .appleWatch .appleWatchContent .appleWatchHeading .appleWatchHeadingIntro {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600; }
      .appleWatch .appleWatchContent .appleWatchHeading .appleWatchHeadingPrompt {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700; }
    .appleWatch .appleWatchContent .appleWatchText {
      text-align: start;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .appleWatch .appleWatchContent .appleWatchText .appleWatchTextBold {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700; }
    .appleWatch .appleWatchContent .appleWatchRadiosContainer {
      display: flex;
      gap: 16px;
      flex-direction: column;
      margin: 24px 0; }
      @media only screen and (max-width: 480px) {
        .appleWatch .appleWatchContent .appleWatchRadiosContainer .ddFilterContent {
          margin-bottom: 0; } }
      .appleWatch .appleWatchContent .appleWatchRadiosContainer .simpleInput {
        background-color: #ffffff; }
      .appleWatch .appleWatchContent .appleWatchRadiosContainer.noMarginLessGap {
        margin: 0;
        gap: 4px; }
      .appleWatch .appleWatchContent .appleWatchRadiosContainer .ddFilterWrapper .ddFilter {
        border-top: none;
        background-color: unset; }
    .appleWatch .appleWatchContent .appleWatchRadioLabel {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
      .appleWatch .appleWatchContent .appleWatchRadioLabel .appleWatchRadioSubLabel {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
    .appleWatch .appleWatchContent .loader-mask {
      position: fixed;
      z-index: 10000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      display: table;
      opacity: 1; }
    .appleWatch .appleWatchContent .loader-wrapper {
      display: flex;
      flex-direction: column;
      gap: 18px;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 100vh; }
      .appleWatch .appleWatchContent .loader-wrapper .loader-text {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: #848484;
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700; }
      .appleWatch .appleWatchContent .loader-wrapper .loader-bold-text {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        margin-top: 24px; }
      .appleWatch .appleWatchContent .loader-wrapper .loader-gray-text {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 700;
        color: #848484;
        margin-top: -8px; }
    .appleWatch .appleWatchContent .loader {
      animation: rotation 1.2s infinite linear;
      width: 64px;
      height: 64px; }

@keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(-359deg); } }
    .appleWatch .appleWatchContent .appleWatchCard {
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14);
      display: flex;
      padding: 16px;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      align-self: stretch; }
      .appleWatch .appleWatchContent .appleWatchCard.noGap {
        gap: 0; }
      .appleWatch .appleWatchContent .appleWatchCard.withMargin16 {
        margin: 16px 0; }
      .appleWatch .appleWatchContent .appleWatchCard.withMargin32 {
        margin: 32px 0 16px; }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchSwitchList {
        display: flex;
        flex-direction: column;
        gap: 16px; }
      @media only screen and (max-width: 480px) {
        .appleWatch .appleWatchContent .appleWatchCard .switchSettingAction.appleWatchSwitchSettingAction {
          align-self: flex-start; } }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardTitleContainer {
        display: flex;
        flex-direction: column;
        gap: 4px; }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardTitle {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700; }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardSubtitle {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700; }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardTitleAssistive {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        color: #848484; }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchTooltipContainer {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center; }
      .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardContent {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;
        align-items: start; }
        .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardContent .appleWatchESIM {
          display: flex;
          flex-direction: row;
          gap: 8px; }
        .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardContent .appleWatchPrice {
          width: 33%;
          display: flex;
          flex-direction: column; }
          .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardContent .appleWatchPrice .appleWatchAmount {
            display: flex;
            flex-direction: row;
            align-items: end; }
            .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardContent .appleWatchPrice .appleWatchAmount .appleWatchAmountNumber {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 32px;
              line-height: 36px;
              font-weight: 700; }
            .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardContent .appleWatchPrice .appleWatchAmount .appleWatchAmountDecimal {
              font-family: 'BTCosmo-Bold', sans-serif;
              font-size: 20px;
              line-height: 24px;
              font-weight: 700; }
          .appleWatch .appleWatchContent .appleWatchCard .appleWatchCardContent .appleWatchPrice .appleWatchFee {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 12px;
            line-height: 16px;
            font-weight: 400;
            color: #848484; }
      .appleWatch .appleWatchContent .appleWatchCard .lightDivider {
        margin: 0; }
        .appleWatch .appleWatchContent .appleWatchCard .lightDivider.lessMargin {
          margin: -8px 0 0; }
    .appleWatch .appleWatchContent .appleWatchSlidersContainer li {
      border-top: 1px solid #e6e6e6; }
    .appleWatch .appleWatchContent .appleWatchSlidersContainer li:first-child {
      border-top: none; }
    .appleWatch .appleWatchContent .appleWatchSlidersContainer .appleWatchSlider {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
      padding: 12px 0;
      cursor: pointer; }
      .appleWatch .appleWatchContent .appleWatchSlidersContainer .appleWatchSlider .appleWatchSliderText {
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        display: flex;
        flex-direction: column; }
        .appleWatch .appleWatchContent .appleWatchSlidersContainer .appleWatchSlider .appleWatchSliderText a {
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 400;
          color: #004b87; }
    .appleWatch .appleWatchContent .appleWatchTerms {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
      .appleWatch .appleWatchContent .appleWatchTerms.appleWatchCardTerms {
        border-radius: 8px 8px 0px 0px;
        padding: 16px;
        background: white;
        box-shadow: -1.5px -1.5px 1.5px 0 rgba(0, 0, 0, 0.1), 1.5px -1.5px 1.5px 0 rgba(0, 0, 0, 0.1);
        /* Top-Right shadow */ }
        .appleWatch .appleWatchContent .appleWatchTerms.appleWatchCardTerms.bottom {
          border-radius: 8px;
          box-shadow: -1.5px -1.5px 1.5px 0 rgba(0, 0, 0, 0.1), 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.1);
          /* Top-Right shadow */ }
      .appleWatch .appleWatchContent .appleWatchTerms .apleWatchTermsTitle {
        font-family: 'PeridotPE-Bold', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        padding-bottom: 8px;
        display: block; }
      .appleWatch .appleWatchContent .appleWatchTerms .appleWatchTermsContainer {
        max-height: calc(100vh - 450px);
        overflow: scroll;
        display: flex;
        flex-direction: column; }
        .appleWatch .appleWatchContent .appleWatchTerms .appleWatchTermsContainer .blueButton {
          min-width: 84px;
          margin: 24px 0 8px;
          align-self: end; }
    .appleWatch .appleWatchContent .appleWatchInfoText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
    .appleWatch .appleWatchContent .appleWatchSectionTitle {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600;
      margin: 24px 0 12px; }
    .appleWatch .appleWatchContent .appleWatchBoldInfoText {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
    .appleWatch .appleWatchContent .appleWatchOTPContainer {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 24px;
      align-items: center;
      margin-top: 16px; }
      .appleWatch .appleWatchContent .appleWatchOTPContainer .appleWatchOTPInput {
        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', sans-serif;
        font-size: 32px;
        line-height: 36px;
        font-weight: 700; }
    .appleWatch .appleWatchContent .appleWatchCarousel {
      display: flex;
      flex-direction: row;
      gap: 8px;
      overflow: auto; }
      .appleWatch .appleWatchContent .appleWatchCarousel .appleWatchCarouselCard {
        width: 282px;
        border-radius: 16px;
        background-color: #ffffff;
        border: 1px solid #e20074;
        display: flex;
        padding: 16px;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        flex-shrink: 0; }
    .appleWatch .appleWatchContent .appleWatchCarousel::-webkit-scrollbar {
      display: none; }
    .appleWatch .appleWatchContent .appleWatchStepsContainer {
      margin: 24px 0 8px;
      display: flex;
      flex-direction: column;
      gap: 16px; }
      .appleWatch .appleWatchContent .appleWatchStepsContainer .appleWatchStep {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: 4px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400; }
        .appleWatch .appleWatchContent .appleWatchStepsContainer .appleWatchStep .bold {
          font-family: 'PeridotPE-Bold', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 700; }
    .appleWatch .appleWatchContent .appleWatchSimpleInputTitle {
      display: block;
      padding-bottom: 8px;
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 18px;
      line-height: 20px;
      font-weight: 600; }
  .appleWatch .appleWatchWhiteButton {
    padding: 16px 24px;
    width: 100%;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    margin-top: 8px;
    height: 48px; }
  .appleWatch .appleWatchTransparentButton {
    padding: 16px 24px;
    width: 100%;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    border: none;
    height: 48px; }
  .appleWatch .appleWatchFooter {
    display: block;
    width: 100%;
    padding: 16px 16px 24px; }
  .appleWatch .appleWatchButtonContainer {
    display: flex;
    flex-direction: column; }
  .appleWatch .appleWatchPolicyLink {
    color: #004b87;
    text-align: start;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    text-decoration-line: underline;
    margin: 32px 0 16px;
    display: block; }
  .appleWatch .ui-tooltip {
    max-width: unset;
    right: 8px;
    left: 8px !important;
    padding: 16px; }
  .appleWatch .ui-widget.ui-widget-content {
    background-color: #e6e6e6;
    box-shadow: 0px 24px 38px 0px rgba(0, 0, 0, 0.14), 0px 9px 46px 0px rgba(0, 0, 0, 0.12), 0px 11px 15px 0px rgba(0, 0, 0, 0.2); }
  .appleWatch .arrow {
    left: 175px; }
  .appleWatch .arrow:after {
    background-color: #e6e6e6;
    left: 0; }
  .appleWatch .close {
    display: none; }
  @media only screen and (max-width: 767px) {
    .appleWatch .simple-popup-content {
      max-width: 328px; } }
  .appleWatch .appleWatchModalContent {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 24px;
    display: block; }
    .appleWatch .appleWatchModalContent.noMargin {
      margin-bottom: 0; }
    .appleWatch .appleWatchModalContent.longText {
      text-align: start; }
  .appleWatch .appleWatchModalSubtitle {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 8px; }
  .appleWatch .appleWatchModalTitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-weight: 600; }
  .appleWatch .appleWatchModalDetails {
    padding-top: 8px; }
    .appleWatch .appleWatchModalDetails.paddingBottom32 {
      padding-bottom: 32px; }
  .appleWatch .appleWatchModalText {
    max-height: 400px; }
  .appleWatch .appleWatchTerms label {
    padding: 12px; }
  .appleWatch .freeTrialBox {
    border-radius: 2px 2px 0px 2px;
    background: #e20074;
    /* Elevation/1 */
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 8px 2px;
    justify-content: center;
    gap: 4px;
    width: 100%; }
    .appleWatch .freeTrialBox .freeTrialBoxTitle {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      color: #ffffff; }
  .appleWatch .appleWatchGeneralGap8Container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 16px; }
    .appleWatch .appleWatchGeneralGap8Container.alignStart {
      align-items: start; }
    .appleWatch .appleWatchGeneralGap8Container.marginTop12 {
      margin-top: 12px; }
  .appleWatch .appleWatchGeneralPadding16Container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px; }
  .appleWatch .appleWatchIconTextContainer {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center; }
  .appleWatch .appleWatchSmallText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .appleWatch .appleWatchBrandBox {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: #f2f2f3;
    justify-content: center;
    width: fit-content; }
  .appleWatch .verticalLightDivider {
    border-left: 1px solid #e6e6e6;
    height: 32px; }
  .appleWatch .appleWatchDot {
    display: flex;
    gap: 4px;
    align-items: start;
    flex-direction: row; }
  .appleWatch .appleWatchNewHeader {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 16px;
    border-bottom: 2px solid #e20074;
    margin-bottom: 24px;
    background-color: #ffffff; }
  .appleWatch .appleWatchHeaderFlag {
    width: 30px;
    height: 20px; }
  .appleWatch .appleWatchNewHeaderGroup {
    display: flex;
    align-items: center;
    gap: 24px; }
  .appleWatch .appleWatchHeaderIcons {
    padding: 8px; }
  .appleWatch .appleWatchNewHeaderGDPR {
    display: flex;
    color: #212121;
    align-items: center;
    gap: 4px; }

.seasonalitySettingDescriptionText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  line-height: 16px; }
  .seasonalitySettingDescriptionText .strong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }

.seasonalityCallToActionButton {
  margin-top: 8px; }

.seasonalitySwitchSetting {
  flex-flow: column;
  align-items: unset; }

.seasonalitySwitchSettingTop {
  display: flex;
  flex-flow: row; }
  .seasonalitySwitchSettingTop .switchSettingAction {
    align-self: flex-end; }

.seasonalityBadge {
  display: block;
  border-radius: 20px;
  padding: 4px 8px;
  margin-left: 8px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600; }
  .seasonalityBadge.pending {
    color: #212121;
    background: #e6e6e6; }
  .seasonalityBadge.active {
    color: #004b87;
    background: #b8e0ef; }

.seasonalityModalBody {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 16px;
  padding: 20px 24px 24px; }
  .seasonalityModalBody .seasonalityModalText {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

.seasonalityPopupButton {
  align-self: end; }

.switchSetting .switchSettingContent .seasonalitySwitchSettingBottom {
  margin: 0; }
  .switchSetting .switchSettingContent .seasonalitySwitchSettingBottom.paddingBottom {
    padding-bottom: 16px; }

.yellowFrame {
  display: flex;
  padding: 8px 16px;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  border: 2px solid #eabf68;
  background-color: #fefcf7; }
  .yellowFrame .text {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .yellowFrame.withBottomMargin {
    margin-bottom: 8px; }
  .yellowFrame.withTopMargin {
    margin-top: 24px; }
  .yellowFrame.withTopMargin-4 {
    margin-top: 4px; }

.switchSetting .seasonalitySwitchSettingContent {
  padding: 0;
  width: 100%; }

.myDataModalBody {
  padding: 12px 16px 24px;
  display: flex;
  flex-flow: column; }
  .myDataModalBody .modalDescription {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    padding-bottom: 32px; }

.myDataSuccessModalBody {
  padding: 20px 24px 24px; }

.businessAccountTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  padding: 20px 0 12px; }

.withTopMargin-24 {
  margin-top: 24px; }

.myDataDetailsBox {
  width: 100%; }

.speedPerRegionInfoBox {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #e20074;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  background-color: #ffffff;
  max-width: fit-content; }
  .speedPerRegionInfoBox.marginTop16 {
    margin-top: 16px; }
  .speedPerRegionInfoBox.marginBottom24 {
    margin-bottom: 24px; }
  .speedPerRegionInfoBox #speedPerRegionLink {
    color: #212121;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-decoration: underline;
    display: inline;
    padding: 0; }
  .speedPerRegionInfoBox.hide {
    display: none; }

.megaFilterContainer.vouchBucketBox .ddFilter .ddFilterContent .vouchBucketBoxContentText.webexAccountsInfo,
.ddFilterWrapper.vouchBucketBox .ddFilter .ddFilterContent .vouchBucketBoxContentText.webexAccountsInfo {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.ddFilterWrapper .ddFilter .ddFilterContent:first-child.webexAcountsInfoBox {
  margin-right: 0;
  width: 100%; }

.webexAccountsContainer {
  display: flex;
  padding: 24px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  background: #ffffff; }
  .webexAccountsContainer .webexAccountsDivider {
    width: 100%;
    height: 1px;
    background: #e6e6e6; }
  .webexAccountsContainer .webexAccount {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    align-self: stretch; }
    .webexAccountsContainer .webexAccount .webexAccountHeader {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 22px;
      line-height: 24px;
      font-weight: 600; }
    .webexAccountsContainer .webexAccount .webexAccountInfo {
      display: flex;
      flex-direction: column;
      gap: 8px; }
      .webexAccountsContainer .webexAccount .webexAccountInfo .webexAccountInfoTitle {
        font-family: 'PeridotPE-SemiBold', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600; }
      .webexAccountsContainer .webexAccount .webexAccountInfo .webexAccountInfoText {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700; }

.webexModalBody {
  display: flex;
  padding: 20px 24px 24px;
  flex-direction: column;
  align-items: start;
  gap: 16px;
  align-self: stretch; }
  .webexModalBody .paymentWithIcon img {
    width: 40px;
    height: 40px; }

.webexCompleteText {
  margin-top: 8px; }

.webexActionButton {
  align-self: end;
  margin-top: 0 !important; }

.webexInfoText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.webexFailureText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.webexDropdownTitle {
  padding-bottom: 8px; }

.switchSetting .switchSettingContent .switchSettingTitle.webexSwitchSettingTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.webexAccountNumbers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px; }
  .webexAccountNumbers .webexNumber {
    display: flex;
    flex-direction: row;
    gap: 16px; }
    .webexAccountNumbers .webexNumber .webexLabel-active {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600;
      display: flex;
      padding: 4px 8px;
      justify-content: center;
      align-items: flex-start;
      border-radius: 20px;
      background: #0099cc;
      color: #ffffff; }
    .webexAccountNumbers .webexNumber .webexLabel-inactive {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 12px;
      line-height: 16px;
      font-weight: 600;
      display: flex;
      padding: 4px 8px;
      justify-content: center;
      align-items: flex-start;
      border-radius: 20px;
      background: #848484;
      color: #ffffff; }

.speedUpgrade {
  height: 100%; }
  .speedUpgrade.speedUpgradeHeight {
    height: 100vh; }
  .speedUpgrade .speedUpgradeExitButton {
    width: 24px;
    height: 24px;
    margin: 12px; }
  .speedUpgrade .speedUpgradeContainer {
    display: flex;
    flex-direction: column; }
  .speedUpgrade .speedUpgradeBlueInfoContainer {
    padding: 8px 16px;
    display: flex;
    gap: 8px;
    border: 2px solid #2775b2;
    background-color: #f4f8fb;
    border-radius: 16px; }
  .speedUpgrade .speedUpgradeSynipsisBoxContentHeaderNote {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin-top: 24px; }
  .speedUpgrade .speedUpgradeHeader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #79bf14; }
    .speedUpgrade .speedUpgradeHeader .speedUpgradeHeaderTitle {
      padding: 6px 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between; }
    .speedUpgrade .speedUpgradeHeader #speedUpgradeHeaderExit {
      flex: 0 0 auto;
      margin: 12px; }
    .speedUpgrade .speedUpgradeHeader #speedUpgradeHeaderFormTitle {
      flex: 1;
      text-align: center;
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 32px;
      line-height: 36px;
      font-weight: 700; }
    .speedUpgrade .speedUpgradeHeader .speedUpgradeSubheader {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 4px 8px;
      align-items: center; }
    @media (max-width: 768px) {
      .speedUpgrade .speedUpgradeHeader #speedUpgradeHeaderFormTitle {
        font-family: 'BTCosmo-Bold', sans-serif;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700; } }
  .speedUpgrade .speedUpgradeBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 16px; }
  .speedUpgrade .speedUpgradeDownloadDocsBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 32px;
    padding: 0px; }
  .speedUpgrade .speedUpgradeButtonGroup {
    justify-content: end; }
  .speedUpgrade .speedUpgradeContinueButton {
    width: 100%; }
    .speedUpgrade .speedUpgradeContinueButton.responsive {
      width: auto; }
      @media only screen and (max-width: 480px) {
        .speedUpgrade .speedUpgradeContinueButton.responsive {
          width: 100%; } }
  .speedUpgrade .speedUpgradeAddresBackButton {
    margin-top: 0px; }
  .speedUpgrade .speedUpgradeEquipmentFormBackButton {
    display: inline-flex;
    margin-left: 32px; }
  .speedUpgrade .speedUpgradeContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 680px;
    gap: 24px; }
  .speedUpgrade .speedUpgradeInputsList {
    display: flex;
    flex-direction: column;
    gap: 52px; }
  .speedUpgrade .speedUpgradeSendEquipmentInputsList {
    gap: 0px; }
  .speedUpgrade .speedUpgradeInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding-bottom: 18px; }
    .speedUpgrade .speedUpgradeInfo .speedUpgradeInfoHeading {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 20px;
      line-height: 24px;
      font-weight: 700; }
    .speedUpgrade .speedUpgradeInfo .speedUpgradeInfoText {
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .speedUpgrade .speedUpgradeInfo .speedUpgradeAssistiveText {
      font-family: 'PeridotPE-SemiBold', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600; }
  .speedUpgrade .speedUpgradeInfo.speedUpgradeInfoMargin {
    margin-bottom: 6px; }
  .speedUpgrade .speedUpgradeInput label {
    display: block; }
  .speedUpgrade .speedUpgradeInput .simpleInput {
    border: 1px solid; }
  .speedUpgrade .speedUpgradeInput.disabled .simpleInput {
    pointer-events: none;
    cursor: not-allowed; }
  .speedUpgrade .speedUpgradeInputsSendEquipmentList {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px; }
  .speedUpgrade .speedUpgradeFieldHeader {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeFieldContainer {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .speedUpgrade .speedUpgradeInputDropdownField {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #ffffff;
    border-radius: 16px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    width: 100%; }
  .speedUpgrade .speedUpgradeTransformationSubmitButton {
    margin-top: 48px; }
  .speedUpgrade .speedUpgradeTransformationFormHeader {
    align-self: flex-start;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 16px; }
  .speedUpgrade .speedUpgradeSynopsisBody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 648px; }
  .speedUpgrade .speedUpgradeSynopsisHeading {
    display: flex;
    justify-content: center;
    align-items: flex-start; }
  .speedUpgrade .speedUpgradeSynipsisBox {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #ffffff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0px 0px 2px 0px #00000024;
    box-shadow: 0px 1px 3px 0px #00000033;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    width: 100%; }
  .speedUpgrade .speedUpgradeSynopsisBodyWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px 64px; }
  .speedUpgrade .speedUpgradeFormHeader {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeFormHeaderServiceText {
    margin-top: 32px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .speedUpgrade .speedUpgradeSynipsisBoxContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 44px; }
  .speedUpgrade .speedUpgradeSynipsisBoxOfferBox {
    margin-top: 8px;
    margin-bottom: 16px; }
  .speedUpgrade .speedUpgradeSynipsisBoxContentHeader {
    margin-top: 4px;
    margin-bottom: 8px;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeCheckBox {
    width: 100%;
    margin-top: 16px; }
  .speedUpgrade .speedUpgradeCheckBoxTerms {
    color: #212121;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid; }
  .speedUpgrade .speedUpgradeTermsCheckbox {
    margin: 16px 0; }
    .speedUpgrade .speedUpgradeTermsCheckbox #termsCheckbox {
      margin-right: 8px; }
    .speedUpgrade .speedUpgradeTermsCheckbox label:before {
      background-color: #ffffff; }
    .speedUpgrade .speedUpgradeTermsCheckbox input[type='checkbox']:checked + label:before {
      background-color: #ffffff; }
  .speedUpgrade .speedUpgradeDetailsIcon {
    padding: 4px 16px;
    background-color: #2775b2;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    color: #ffffff;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    min-width: 80px;
    border-radius: 15px 0 15px 0; }
  .speedUpgrade .speedUpgradeDetailsIcon.speedUpgradeNewDetailsIcon {
    background-color: #004b87; }
  .speedUpgrade .speedUpgradeOfferDetails {
    display: flex;
    flex-direction: column; }
  .speedUpgrade .speedUpgradeUpperDetails {
    display: flex;
    margin-top: 42px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; }
  .speedUpgrade .speedUpgradeBottomDetails {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 32px; }
  .speedUpgrade .speedOfferBox {
    box-shadow: 0px 0px 2px 0px #00000024;
    box-shadow: 0px 1px 3px 0px #00000033;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    width: 100%; }
  .speedUpgrade .speedUpgradeCardOffer {
    margin-top: 24px;
    margin-bottom: 16px; }
  .speedUpgrade .speedUpgradeNeedEquipmentCheck {
    margin: 0px; }
  .speedUpgrade .speedUpgradeCheckBoxTooltip {
    width: 24px;
    height: 24px;
    padding: 8px 0px;
    margin-left: 16px; }
  .speedUpgrade .speedUpgradeReturnEquipmentBox {
    padding: 8px 16px;
    gap: 8px;
    border-radius: 16px;
    border-width: 2px;
    background: #f4f8fb;
    border: 2px solid;
    margin-bottom: 24px;
    display: flex; }
  .speedUpgrade .speedUpgradeFlag {
    align-self: flex-end; }
  .speedUpgrade .speedUpgradeHeaderPaggins {
    padding: 0px 8px 4px 8px; }
  .speedUpgrade .speedUpgradeCheckBoxWithTooltip {
    display: flex;
    flex-direction: row; }
  .speedUpgrade .speedOfferDetailsUpper {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px; }
  .speedUpgrade .speedOfferDetailsMiddleUpper {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-top: 16px; }
  .speedUpgrade .speedUpgradeDuration {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }
  .speedUpgrade .speedUpgradeOfferPriceContentText {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeSendEquipmentButton {
    margin-top: 32px; }
  .speedUpgrade .speedUpgradeRouterFieldHeader {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .speedUpgrade .speedUpgradeRouterFieldWrapper {
    margin-top: 12px;
    width: 100%;
    margin-bottom: 16px; }
  .speedUpgrade .speedUpgradeRouterBox {
    flex-direction: row;
    margin-top: 16px;
    gap: 8px;
    justify-content: flex-start;
    display: inline-flex;
    align-items: center; }
  .speedUpgrade .speedOfferDetailsMiddle {
    margin-top: 12px;
    display: flex;
    align-self: center;
    flex-direction: column;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }
  .speedUpgrade .speedUpgradeOfferPriceContent {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    font-size: 32px;
    font-weight: 700;
    line-height: 36px; }
  .speedUpgrade .speedUpgradeOfferPriceContentCents {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px; }
  .speedUpgrade .speedUpgradeMonthlyFixedPrice {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 16px;
    gap: 56px; }
  .speedUpgrade .speedUpgradeOfferFinalInfo {
    margin-right: 8px; }
  .speedUpgrade .freeMonth {
    align-self: center; }
  .speedUpgrade .speedUpgradeIcon {
    display: flex;
    align-self: center;
    width: 64px;
    height: 64px; }
  .speedUpgrade .speedUpgradeSuccessPageBodySmall {
    margin-top: 32px;
    display: flex;
    align-self: center;
    justify-content: center;
    width: 480px; }
  .speedUpgrade .speedupgradeOrderNumber {
    margin-top: 8px;
    margin-bottom: 24px; }
  .speedUpgrade .speedUpgradeSuccessPageSubdetails {
    display: flex;
    justify-content: center;
    margin-bottom: 16px; }
  .speedUpgrade .SpeedUpgradeSeeOrderButton {
    margin-top: 8px; }
  .speedUpgrade .speedUpgradeInfoIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #212121;
    border: 1px solid #212121;
    background-color: white;
    font-size: 12px;
    font-weight: bold; }
  .speedUpgrade .speedUpgradeInfoTermDetails {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .speedUpgrade .speedUpgradeInfoWrapper {
    display: inline-flex;
    justify-content: space-between;
    gap: 8px; }
    .speedUpgrade .speedUpgradeInfoWrapper span {
      display: inline-flex;
      gap: 8px; }
      .speedUpgrade .speedUpgradeInfoWrapper span a {
        height: 24px;
        width: 24px; }
  .speedUpgrade .closeDropdownField {
    display: none; }
  .speedUpgrade .speedUpgradeSignDocText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .speedUpgrade .speedUpgradeSignDocAssistiveText {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600; }
  .speedUpgrade .speeedUpgradeSignDocsBackButton {
    margin-left: 40px;
    margin-bottom: 10px;
    display: flex; }
  .speedUpgrade .speedUpgradeDivider {
    width: 96%;
    background-color: #848484;
    height: 1px; }
  .speedUpgrade .speedDownloadDocsBox {
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row; }
  .speedUpgrade .speedUpgradeDownloadDocumenIcon {
    margin-left: auto; }
  .speedUpgrade .speedUpgradeDownloadDocumentName {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .speedUpgrade .speedUpgradeFontBodyLabel {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400; }
  .speedUpgrade .speedUpgradeDownloadDocsInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding-bottom: 0px; }
    @media only screen and (max-width: 650px) {
      .speedUpgrade .speedUpgradeDownloadDocsInfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px; } }
  .speedUpgrade .speedUpgradeErrorPage {
    gap: 24px;
    padding-bottom: 0px; }
  .speedUpgrade .speedUpgradeDownloadDocsContent {
    gap: 0px; }
  .speedUpgrade .speedUpgradeBackButton {
    margin-top: 44px;
    margin-left: 40px;
    margin-bottom: 68px;
    display: inline-flex;
    gap: 8px; }
  .speedUpgrade .backButtonSynopsis {
    margin-top: 32px;
    margin-bottom: 24px; }
  .speedUpgrade .speedUpgradeSuccesPageHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeDdBackground {
    background-color: transparent; }
  .speedUpgrade .speedUpgradeDdBorder {
    border-top: 0px;
    background-color: unset; }
  .speedUpgrade .ddFilterWrapper .ddFilter .ddFilterContent.speedUpgradeDdInputField {
    margin-right: 0px; }
  .speedUpgrade .speedUpgradeAddMargin {
    margin-top: 16px; }
  .speedUpgrade .speedUpgradeAddHeaderMargin {
    margin-top: 40px; }
  .speedUpgrade .speedUpgradeErrorButton {
    bottom: 0px; }
  .speedUpgrade .speedupgradeHideError {
    display: none !important; }
  .speedUpgrade .speedUpgradeVoucherError {
    display: none; }
  .speedUpgrade .speedUpgradeVoucherCheck .speedUpgradeVoucherErrorBorder {
    border-color: #df6938 !important; }
  .speedUpgrade .speedUpgradeVoucherCheck .speedUpgradeVoucherError {
    display: flex;
    align-items: center; }
  .speedUpgrade .speedUpgradeSuccesPageDetails {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px; }
    @media only screen and (max-width: 650px) {
      .speedUpgrade .speedUpgradeSuccesPageDetails {
        align-items: start; } }
  .speedUpgrade .speedUpgradeSuccesPageDetails.noButton {
    margin-top: 16px;
    gap: 8px; }
  .speedUpgrade .checkboxGroup {
    display: flex;
    flex-direction: row;
    margin-top: 12px; }
  .speedUpgrade .checkboxDetailsText {
    display: flex;
    flex-direction: column; }
  .speedUpgrade .checkboxHeader {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 8px; }
  .speedUpgrade .checkboxDescription {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .speedUpgrade .radio-label {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin-bottom: 24px; }
  .speedUpgrade .speedUpgradeVoucherGroup {
    display: flex;
    flex-direction: column;
    gap: 8px; }
  .speedUpgrade .speedUpgradeVoucherHeader {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  .speedUpgrade .speedUpgradeVoucherDetails {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  .speedUpgrade .speedUpgradeTransformationVoucherHeader {
    align-self: flex-start; }
  .speedUpgrade .gigabitVoucher {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px; }
  .speedUpgrade .speedUpgradeNoVoucher {
    display: flex;
    align-self: center;
    padding: 16px 8px;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    cursor: pointer; }
  .speedUpgrade .speedLanguageFlags {
    width: 30px;
    height: 20px;
    cursor: pointer; }
  .speedUpgrade .speedUpgradeUpperDetailsHeader {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeOfferTransformationDetails {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeOfferTransformationMiddleUpperDetails {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .speedUpgrade .speedOfferTransformationDetailsMiddle {
    margin-bottom: 16px; }
  .speedUpgrade .speedTransformationSeeMore {
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700; }
  .speedUpgrade .speedUpgradeTransformationMonthlyFixedPrice {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 0; }
  .speedUpgrade .speedUpgradeTransformationSynipsisBox {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 0px 2px 0px #00000024;
    box-shadow: 0px 1px 3px 0px #00000033;
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    width: 100%; }
  .speedUpgrade .speedUpgradeTransformationSendEquipment {
    margin-bottom: 32px; }
  .speedUpgrade .speedUpgradeTransformationSendEquipmentHeader {
    font-size: 18px;
    line-height: 20px;
    color: #848484;
    margin-bottom: 8px;
    margin-top: 40px; }
  .speedUpgrade .group .speedUpgradeTransformationFormHeadings {
    color: #848484; }
  .speedUpgrade .speedUpgradeTransformationSendEquipmentVoucherHeader {
    margin-top: 24px; }
  .speedUpgrade .speedUpgradeTransformationSendSynopsisEquipmentHeader {
    margin-top: 24px; }
  .speedUpgrade .speedUpgradeReadDocumentsPDF {
    display: flex;
    width: 100%; }
  .speedUpgrade .speedUpgradeSendEquipmentAddressRadioHeader {
    margin-bottom: 12px; }
  .speedUpgrade .speedUpgradeTransformationNewAddress {
    margin-top: 24px;
    margin-bottom: 16px; }
  .speedUpgrade .speedUpgradeTransformationContent {
    gap: 0px; }
  .speedUpgrade .speedUpgradeHiddenContainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%; }
  .speedUpgrade .speedUpgradeTransformationHideContent {
    display: none; }

.speedUpgradeMarginTop {
  margin-top: 32px; }

.speedUpgradeDdFilterDropdownBackground {
  text-decoration: none !important;
  padding-right: 2rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important; }
  .speedUpgradeDdFilterDropdownBackground:hover {
    text-decoration: none; }

.speedUpgradeLegalRepHeading {
  margin-top: 17px; }

.speedUpgradePopup .speedUpgradePopupDivider {
  width: 485px;
  border-top: 1px solid #0099cc;
  margin-top: 32px;
  margin-bottom: 16px; }

.speedUpgradePopup .speedUpgradePopupLayout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 16px 24px 24px 24px; }
  .speedUpgradePopup .speedUpgradePopupLayout .speedUpgradePopupDetailsText {
    display: flex;
    align-self: flex-start;
    color: #212121;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .speedUpgradePopup .speedUpgradePopupLayout .speedUpgradePopupConnectionsContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin-left: 24px;
    margin-right: 24px;
    padding: 16px;
    gap: 0px;
    border-radius: 16px;
    border: 1px solid #e6e6e6; }

.speedUpgradePopup .speedUpgradePopupContainer {
  max-width: 420px; }

.speedUpgradePopup .speedUpgradePopupResumeOrderLayout {
  display: flex;
  flex-direction: column; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerElement {
  display: flex;
  padding: 12px 16px 12px 16px;
  gap: 8px;
  color: unset; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerAddBorderTop {
  border-top: 1px solid #e6e6e6; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerIcon {
  display: flex;
  align-self: flex-end;
  margin-left: auto; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerElementGroup {
  display: flex;
  flex-direction: column; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerIconMultipleRows {
  align-self: center; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerTitle {
  display: flex;
  align-self: flex-start;
  margin-top: 24px;
  margin-bottom: 8px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerElementSubtext {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  color: #848484; }

.speedUpgradePopup .speedUpgradePopupCloseButton {
  padding: 4px; }

.speedUpgradePopup .speedUpgradePopupConnectionsContainerElementHeader {
  display: flex;
  flex-direction: column; }

.speedUpgradePopup .speedUpgradePopupUpperContainer {
  display: flex;
  align-self: center;
  justify-content: center; }

.speedUpgradePopup .speedUpgradePopupExitButton {
  color: #0ea600;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  margin-top: 16px; }

.speedUpgradePopup .speedUpgradePopupContinueButton {
  margin-top: 16px; }

.speedUpgradePopup .speedUpgradePopupSecondaryButton {
  margin-top: 8px; }

.speedUpgradePopup .speedUpgradePopupText {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.speedUpgradePopup .speedUpgradePopupLinkText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin-top: 24px;
  text-decoration-line: underline; }

.speedUpgradePopup .speedUpgradePopupUpperContainerContentHeader {
  margin-bottom: 8px; }

.speedUpgradePopup .speedUpgradePopupUpperContainerText1 {
  margin-top: 24px; }

.speedUpgradePopup .speedUpgradePopupUpperContainerText2 {
  margin-top: 24px; }

.speedUpgradePopup .speedUpgradePopupUpperContainerLayout {
  display: flex;
  flex-direction: column; }

.speedUpgradeDropdown a {
  text-decoration: none !important; }

body.speedUpgrade.spaBodyContainer--primary a {
  text-decoration: none !important; }

body.speedUpgrade.spaBodyContainer--primary a.speedUpgradeLink {
  text-decoration: underline !important; }

.semi-digital-box {
  padding: 0px 16px 16px 16px; }

.semi-digital-inner-box-padding {
  padding: 8px 16px !important; }

.modalTitle.youthModalTitle {
  padding: 0;
  background-color: #f2f2f3; }

.modalTitle .youthBanner {
  height: 100%;
  width: 100%;
  position: relative;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px; }

.youthBody {
  padding: 24px;
  background-color: #f2f2f3;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px; }
  .youthBody .assistive {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
    .youthBody .assistive-grey {
      color: #666; }
  .youthBody .bold {
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700; }
    .youthBody .bold-small {
      font-family: 'BTCosmo-Bold', sans-serif;
      font-size: 16px;
      line-height: 20px;
      font-weight: 700; }
  .youthBody .youthCard {
    display: flex;
    position: relative;
    max-width: 752px;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #ffffff;
    bottom: 50px; }
    .youthBody .youthCard .title {
      display: flex;
      flex-direction: column;
      gap: 8px; }
  .youthBody .youthColumns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px; }
    @media only screen and (max-width: 560px) {
      .youthBody .youthColumns {
        flex-direction: column; } }
    .youthBody .youthColumns .center {
      align-self: center; }
    .youthBody .youthColumns .column {
      background-color: #ffffff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      border-radius: 16px; }
      .youthBody .youthColumns .column .header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        max-height: 32px; }
        @media only screen and (max-width: 560px) {
          .youthBody .youthColumns .column .header {
            flex-direction: column-reverse;
            margin-right: auto;
            padding-left: 0; } }
        .youthBody .youthColumns .column .header .textGroup {
          display: flex;
          gap: 8px;
          align-items: center; }
        .youthBody .youthColumns .column .header .chipContainer {
          margin-left: auto; }
          @media only screen and (max-width: 560px) {
            .youthBody .youthColumns .column .header .chipContainer {
              margin-left: 0;
              padding: 16px 0px;
              margin-top: 16px; } }
        .youthBody .youthColumns .column .header .chip {
          color: #004b87;
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600;
          border-radius: 20px;
          padding: 4px 8px;
          background-color: #b8e0ef;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          max-height: 24px;
          max-width: 100px; }
          .youthBody .youthColumns .column .header .chip.green {
            color: #006d29;
            background-color: #bde8bb; }
      .youthBody .youthColumns .column .content {
        display: flex;
        flex-direction: column;
        gap: 24px; }
        @media screen and (max-width: 567px) {
          .youthBody .youthColumns .column .content {
            margin-top: 30px; } }
        .youthBody .youthColumns .column .content .contentGroup {
          display: flex;
          flex-direction: row;
          gap: 8px; }
          .youthBody .youthColumns .column .content .contentGroup .textGroup {
            display: flex;
            flex-direction: column;
            gap: 8px; }
    .youthBody .youthColumns .youthButton {
      display: flex;
      cursor: pointer;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 4px; }
      .youthBody .youthColumns .youthButton .chevron {
        position: relative;
        top: 1px;
        height: 16px;
        width: 16px; }

.eSimIntroContent {
  padding: 16px 16px 0px;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.eSimIntroTextPrimary {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
  color: #212121; }

.eSimIntroChecklist {
  border-radius: 16px;
  background: #ffffff; }

.eSimIntroChecklistList {
  list-style: none;
  margin: 0;
  padding: 0; }
  .eSimIntroChecklistList li {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    position: relative;
    padding-left: 24px; }
    .eSimIntroChecklistList li::before {
      content: '•';
      position: absolute;
      left: 0;
      top: 0;
      font-size: 20px;
      line-height: 20px;
      color: #000; }
  .eSimIntroChecklistList li:last-child {
    margin-bottom: 0; }

.eSimIntroTextSecondary {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121; }

.eSimIntroFootnote {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #212121;
  text-align: left;
  width: 100%;
  max-width: 454px;
  display: block; }

.eSimIntroDivider {
  width: 100%;
  height: 1px;
  margin: 8px 0; }

.eSimIntroHero {
  display: block;
  width: 100%;
  height: auto; }

.eSimIntroFaqLink {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px 8px;
  margin: 0 auto;
  text-align: center;
  color: #0e8103;
  font-family: 'PeridotPE-Bold';
  font-size: 14px;
  line-height: 16px; }

.eSimButtons {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 100%;
  max-height: 48px;
  text-align: center; }
  .eSimButtons .eSimPrimaryButton {
    width: 100%; }

@media only screen and (max-width: 480px) {
  .eSimButtons {
    margin-top: 16px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px; }
  .eSimPrimaryButton {
    width: 100% !important; } }

.infoCards {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.infoCard {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff; }

.infoCard-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center; }

.infoCard-icon img {
  max-width: 100%;
  height: auto;
  display: block; }

.infoCard-text {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
  color: #212121; }

.infoCard-text .bold {
  font-weight: 700; }

.eSimReminderTextPrimary {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
  color: #212121; }

.eSimReminderTextSecondary {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin: 0;
  padding: 16px;
  color: #212121; }

#eSimReminderEid .eSimReminderIcon {
  display: block;
  margin: 0 auto; }

#eSimReminderEid .eSimReminderContent {
  display: flex;
  flex-direction: column;
  text-align: center; }

#eSimReminderEid .eSimReminderTextPrimary {
  padding-top: 0px 24px; }

#eSimReminderEid .eSimReminderActions {
  padding: 24px 0px 24px; }

#eSimReminderEid .eSimReminderContent {
  padding: 8px 24px 0px;
  display: flex;
  flex-direction: column; }

.eSimReminderTextPrimary {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
  text-align: left;
  color: #212121; }

.eSimAlertTextPrimary {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
  text-align: left;
  color: #212121; }

.eSimAlertTextSecondary {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin: 0;
  text-align: center;
  padding: 16px;
  color: #212121; }

.eSimAlertModal .eSimAlertIcon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto; }

.eSimAlertModal .eSimAlertContent {
  padding: 8px 24px 0px;
  display: flex;
  flex-direction: column; }

.eSimAlertModal .eSimAlertActions {
  padding: 24px 0px 24px; }

.eSimAlertModal .eSimAlertActions .button {
  width: 100%; }

.chooseMsisdnBody {
  padding: 0px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px; }

.chooseMsisdnLink {
  display: flex;
  align-items: center;
  color: #212121;
  gap: 16px; }

.labelAfm {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #212121;
  display: block;
  margin-bottom: 8px; }

.entryformtext {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  width: 100%;
  display: block;
  padding: 16px 16px 0px;
  margin-bottom: -16px;
  text-align: left;
  color: var(--spa-text-primary); }

.entryformtext.bold {
  font-weight: 400 !important; }

.eSimAssistiveText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  color: #212121; }

.eSimErrorChecklist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0; }

.eSimErrorChecklistItem {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  position: relative;
  padding-left: 24px; }
  .eSimErrorChecklistItem::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px;
    line-height: 24px;
    color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121)); }
  .eSimErrorChecklistItem:not(:last-child) {
    margin-bottom: 8px; }

.eSimBodyRegular {
  color: var(--On-Colors-Surface-High-emphasis, #212121);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'Peridot PE', 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; }

.eSimBodyBold {
  color: var(--On-Colors-Surface-High-emphasis, #212121);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'Peridot PE', 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; }

.eSimErrorChecklistList {
  list-style: none;
  margin: 8px 0 0;
  padding: 0; }

.eSimErrorChecklistItem {
  position: relative;
  padding-left: 24px; }

.eSimErrorChecklistItem::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 20px;
  line-height: 24px; }

.eSimErrorChecklistItem:not(:last-child) {
  margin-bottom: 8px; }

.dark-mode .eSimErrorChecklistItem::before {
  color: #e1e1e1 !important; }

.ml-8 {
  margin-left: 8px !important; }

.questionsBox ol {
  margin: 0;
  padding-left: 20px; }

.questionsBox .eSimSubList {
  padding-left: 0;
  margin-left: 0;
  list-style-type: square;
  list-style-position: outside; }

.questionsBox .eSimSubListItem {
  margin: 0;
  padding-left: 0;
  text-align: left; }

.questionsBox .eSimSubListItem::marker {
  font-size: 0.9em; }

.dark-mode .questionsBox .eSimSubListItem::marker {
  color: #e1e1e1; }

.questionsBox .eSimSubList.no-space {
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: square;
  list-style-position: outside; }

.questionsBox .eSimStepsItem--withSublist > .eSimSubList--noGap {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0px !important;
  list-style-type: square;
  list-style-position: outside; }

.questionsBox .eSimStepsItem--withSublist > .eSimSubList--noGap > li {
  margin: 0 !important;
  padding: 0 !important; }

.questionsBox .eSimStepsItem--withSublist > .eSimSubList--noGap > li::marker {
  font-size: 0.9em; }

.eSimCompatContainer {
  box-sizing: border-box;
  width: 100%;
  max-width: 668px;
  margin: 0 auto;
  padding: 24px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px !important; }

@media (max-width: 768px) {
  .eSimCompatContainer {
    max-width: 100%;
    padding: 16px;
    gap: 16px; } }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer {
  box-sizing: border-box;
  width: 100%;
  max-width: 668px;
  margin: 0 auto;
  padding: 24px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px; }

@media (max-width: 768px) {
  .digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer {
    max-width: 100%;
    padding: 16px 16px 0;
    gap: 16px; } }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left {
  text-align: left;
  align-items: stretch; }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left .title,
.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left span,
.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left p,
.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left .bold {
  text-align: left; }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left .questionsBox {
  text-align: left; }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left .questionsBox .eSimStepsList {
  margin: 0;
  padding-left: 20px;
  list-style-position: outside; }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left .questionsBox .eSimStepsItem {
  text-align: left; }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left .questionsBox .eSimSubList--noGap {
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  list-style-position: outside; }

.digitalOnboarding .e-sim-body .e-sim-id.eSimCompatContainer--left .radioBox {
  text-align: left; }

.digitalOnboarding .questionsBox.eSimCompatQuestions--left {
  text-align: left; }

.digitalOnboarding .questionsBox.eSimCompatQuestions--left .eSimStepsList {
  padding-left: 20px;
  margin: 0; }

.mb-24 {
  margin-bottom: 24px !important; }

.digitalOnboarding .e-sim-body .e-sim-id .radioBox.radioBox--noMargin .Radio--noMargin {
  margin: 0 !important;
  padding: 0 !important; }

.digitalOnboarding .e-sim-body .e-sim-id .radioBox.radioBox-eSim {
  padding: 24px 16px 24px !important;
  gap: 24px !important; }

.digitalOnboarding .e-sim-body .e-sim-id .radioBox.radioBox-eSim .md-radio label {
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Regular', 'Peridot PE', sans-serif !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 24px; }

.digitalOnboarding .e-sim-body footer.progressBar.progressBar--eSimNoGap .progressBarActions {
  margin-top: 0 !important; }

.digitalOnboarding .e-sim-body footer.progressBar.progressBar--eSimNoGap {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.digitalOnboarding .e-sim-body footer.progressBar.progressBar--eSimNoGap .progressBarInner {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.digitalOnboarding .e-sim-body footer.progressBar.progressBar--eSimNoGap .buttonOuter {
  width: 100% !important;
  margin: 0 !important; }

.digitalOnboarding .e-sim-body footer.progressBar.progressBar--eSimNoGap .buttonOuter.rightAligned {
  justify-content: stretch !important; }

.digitalOnboarding .e-sim-body footer.progressBar.progressBar--eSimNoGap a.button.fullWidth {
  display: block !important;
  width: 100% !important;
  margin: 0 !important; }

.digitalOnboarding .e-sim-body footer.progressBar--eSimNoGap .eSimPrimaryButtonFix {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 24px !important;
  gap: 4px;
  max-width: 400px;
  width: 100%;
  border-radius: 16px;
  box-sizing: border-box; }

.entrypointButton {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch; }

.cb1ButtonDetails.mt-12 {
  margin-top: 4px; }

#eSimEntryModal .eSimIntroTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  display: block; }

#eSimEntryModal .eSimBoldEntrypoint {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.eSimBodyRegularFixed {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-weight: 400;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.eSimBodyRegularBoldFixed {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.callForwardingLink {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--Complementary-Info, var(--Status-Info-Status-Info, #2775b2));
  font-feature-settings: 'liga' off, 'clig' off;
  text-decoration: underline !important;
  cursor: pointer; }

.spaBodyContainer--primary .callForwardingLink {
  text-decoration: underline !important; }

.ml-0 {
  margin-left: 0 !important; }

.disabled.disabled-color {
  background-color: #5f5f5f !important;
  border-color: #5f5f5f !important;
  color: #ffffff !important;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none; }

body.wide-content .e-sim-body,
body.wide-content .eSimOtpPage,
body.wide-content .eSimOtpWrapper {
  width: 100% !important;
  max-width: none !important; }

body.wide-content .eSimOtpWrapper {
  width: 100% !important;
  max-width: 732px !important;
  margin: 0 auto !important;
  padding: 24px 32px 32px 32px !important;
  box-sizing: border-box !important; }

body.wide-content .eSimOtpWrapper .eSimOtpText,
body.wide-content .eSimOtpWrapper .eSimOtpHelp {
  display: block;
  width: 100%;
  max-width: none !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere; }

@media (max-width: 768px) {
  body.wide-content .eSimOtpWrapper,
  body.wide-content .eSimOtpWrapper.page-gutter {
    padding: 24px 0px 0px !important; } }

#wrongOtpmodal .modal-container {
  width: 323px !important;
  max-width: 323px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  border-radius: 16px !important; }

#eSimReminderEid .eSimAlertTitle,
#eSimEidInput .eSimAlertTitle,
#wrongOtpmodal .eSimAlertTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, #212121);
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  display: block;
  width: 100%;
  padding: 8px 0px 16px;
  margin: 0; }

#eSimReminderEid .modal-container,
#eSimEidInput .modal-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 323px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box; }

.digitalOnboarding .eSimAssistiveText {
  font-size: 14px;
  line-height: 20px; }

.fnTermsRow {
  display: flex;
  align-items: flex-start;
  gap: 12px; }

.fnTermsRow__box {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 20px;
  cursor: pointer; }

.fnTermsRow__text {
  margin: 0; }

.md-checkbox .fnTerms__link {
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121)) !important;
  text-decoration: underline !important;
  text-decoration-skip-ink: none; }

.dark-mode .md-checkbox .fnTerms__link {
  color: #fff !important;
  text-decoration-color: #fff !important; }

.mt-8 {
  margin-top: 8px; }

.fnTooltipFixed {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: start; }

.fnTooltipFixed .imgTooltip {
  margin: 0 !important;
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin-top: 38px !important;
  margin-right: 8px !important; }

.inputWithHelp.fnTooltipFixed {
  gap: 24px !important; }

.inputWithHelp.fnTooltipFixed {
  align-items: center !important; }

.fnTooltipFixed .fnDocTooltipIcon {
  width: 26px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  overflow: visible !important; }

.fnTooltipFixed .fnDocTooltipIcon::before,
.fnTooltipFixed .fnDocTooltipIcon::after {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important; }

.centerImage {
  display: block;
  margin: 0 auto; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipIcon {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipBubble {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 999999;
  display: none;
  width: 543px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  padding: 12px 14px;
  color: #212121;
  font-size: 12px;
  line-height: 16px; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipIcon:hover .fnDocTooltipBubble {
  display: block; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipBubble__arrow {
  position: absolute;
  top: -8px;
  right: 14px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipBubble .list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px; }

body.digitalOnboarding .fnTooltipFixed {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: start; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipWrap {
  position: relative;
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin-top: 38px;
  margin-right: 8px; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipIcon {
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  overflow: visible;
  cursor: pointer; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipBubble {
  position: absolute;
  top: calc(100% + 10px);
  right: -14px;
  z-index: 999999;
  display: none;
  width: 543px;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  padding: 12px 14px;
  color: #212121;
  font-size: 12px;
  line-height: 16px;
  max-height: none;
  overflow: visible; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipWrap:hover .fnDocTooltipBubble {
  display: block; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipBubble .list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipBubble__arrow {
  position: absolute;
  top: -8px;
  right: 18px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff; }

body.digitalOnboarding .fnTooltipFixed .fnDocTooltipBubble__arrow {
  position: absolute;
  top: -8px;
  right: 18px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff; }

body.digitalOnboarding.dark-mode .fnTooltipFixed .fnDocTooltipBubble__arrow {
  border-bottom-color: #262626 !important; }

body.digitalOnboarding .fnTooltipFixed .spaTooltipIcon.withMargin {
  margin-top: 38px !important; }

.eSimAssistiveTextSmall {
  font-size: 14px !important;
  line-height: 20px !important; }

.eSimScreenPadding {
  padding: 48px 16px !important;
  box-sizing: border-box; }

.eSimText16 {
  font-size: 16px !important;
  line-height: 24px; }

body.digitalOnboarding .inputWithHelp.fnTooltipFixed > a.fnDocTooltipIcon {
  width: 26px !important;
  height: 24px !important; }

@media (max-width: 768px) {
  body.digitalOnboarding .inputWithHelp.fnTooltipFixed > a.fnDocTooltipIcon {
    width: 28px !important;
    height: 24px !important; } }

body.wide-content .eSimOtpWrapper.page-gutter {
  padding: 24px 0px 24px !important;
  box-sizing: border-box; }

@media (min-width: 480px) {
  body.wide-content .eSimOtpWrapper.page-gutter {
    padding: 24px 0px 24px !important; } }

.mt-0 {
  margin-top: 0 !important; }

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

body.wide-content .e-sim-id.section-gutter {
  padding: 24px;
  box-sizing: border-box; }

@media (min-width: 480px) {
  body.wide-content .e-sim-id.section-gutter {
    padding: 24px; } }

.pt-0 {
  padding-top: 0 !important; }

.digitalOnboarding .e-sim-body .e-sim-id .pt-0 {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  gap: 0 !important; }

footer.progressBar {
  border-radius: 16px; }

footer.progressBar .progressBarInner {
  border-radius: 16px;
  overflow: hidden; }

#eSimEmailNotFound .modal-container.eSimEmailModal {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 323px !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box !important; }

#eSimEmailNotFound .modalTitle {
  padding: 16px !important;
  margin: 0 !important; }

.fnTooltipFixed .fnDocTooltipIcon {
  background: none !important; }

.fnTooltipFixed .fnDocTooltipIcon::before,
.fnTooltipFixed .fnDocTooltipIcon::after {
  content: none !important;
  display: none !important; }

.eSimPageWidth {
  box-sizing: border-box;
  width: 100%;
  max-width: 732px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.eSimPageWidth > * {
  width: 100%;
  max-width: none !important; }

@media (max-width: 768px) {
  .eSimPageWidth {
    max-width: 100%;
    padding: 16px;
    gap: 16px; } }

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

.eSimOtpLabel {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #000 !important;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'PeridotPE-Regular' !important;
  font-size: 16px !important;
  line-height: 24px !important; }

.eSimHelperText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #000;
  font-feature-settings: 'liga' off, 'clig' off; }

.eSimEmailTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: var(--grayscale-5-text, #212121) !important;
  font-feature-settings: 'liga' off, 'clig' off;
  display: block;
  margin: 0 0 8px 0; }

#eSim-existing-email-field .spaField .errorIcon {
  display: none;
  width: 20px;
  height: 20px; }

#eSim-existing-email-field .spaField .errorText {
  display: block;
  padding-top: 4px !important;
  padding-left: 24px;
  padding-bottom: 12px !important;
  font-size: 14px !important; }

#eSim-existing-email-field .spaField:has(.errorText) .errorIcon {
  display: block;
  position: absolute;
  left: 0; }

#eSim-existing-email-field.emailBox.spaField .fullWidth.group > label.emailLabel {
  font-family: 'PeridotPE-SemiBold' !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  font-feature-settings: 'liga' off, 'clig' off !important;
  margin: 0 0 8px 0 !important; }

.eSimPageWidth {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important; }

.eSimTooltipIcon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; }

.fnTooltipFixed .fnDocTooltipIcon.eSimTooltipIcon {
  background: unset !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; }

.eSimTooltipIcon {
  background-image: url("../img/tooltipicon.svg"); }

.dark-mode .eSimTooltipIcon {
  background-image: url("../img/tooltipIconDarkmode.svg"); }

.fnTooltipFixed a.fnDocTooltipIcon.eSimTooltipIcon {
  background: url("../img/tooltipicon.svg") no-repeat center !important;
  background-size: contain !important;
  width: 25px !important;
  height: 24px !important;
  display: inline-block !important; }

.dark-mode .fnTooltipFixed a.fnDocTooltipIcon.eSimTooltipIcon {
  background-image: url("../img/tooltipIconDarkmode.svg") !important; }

.fnTooltipFixed a.fnDocTooltipIcon.eSimTooltipIcon img.tooltipIconImg {
  display: none !important; }

.centerEmailBlock {
  text-align: center; }

.eSimLawfulRepresentative .ddFilterInputContainer {
  display: flex !important;
  align-items: center !important; }

.eSimLawfulRepresentative .ddFilterInputContainer .ddFilterInput {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-left: 12px !important;
  padding-right: 28px !important; }

.eSimLawfulRepresentative .ddFilterInputContainer .icon-arrowDown {
  flex: 0 0 auto !important; }

.eSimLawfulRepresentative .ddFilterInputContainer {
  position: relative !important;
  width: 100% !important; }

.eSimLawfulRepresentative .ddFilterInputContainer input.ddFilterInput {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 44px !important; }

.eSimLawfulRepresentative .ddFilterInputContainer .icon-arrowDown {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important; }

.eSimIntroContent.eSimFill {
  padding: 24px 32px 32px 32px !important;
  gap: 24px !important;
  width: 100%;
  box-sizing: border-box; }

.digitalOnboarding .e-sim-body .e-sim-id {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 732px !important;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  padding: 24px 32px 32px 32px !important;
  gap: 24px !important; }

@media (max-width: 768px) {
  .digitalOnboarding .e-sim-body .e-sim-id {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    gap: 16px !important; } }

.digitalOnboarding .e-sim-body .eSimErrorContainer .eSimErrorBox {
  max-width: none !important;
  width: 100%; }

.digitalOnboarding .e-sim-body .eSimErrorContainer {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 732px !important;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  padding: 24px 32px 32px 32px !important; }

@media (max-width: 768px) {
  .digitalOnboarding .e-sim-body .eSimErrorContainer {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    gap: 16px !important; } }

.digitalOnboarding .e-sim-body .e-sim-id #eSim-existing-email-field,
.digitalOnboarding .e-sim-body .e-sim-id #eSim-existing-email-field .fullWidth.group,
.digitalOnboarding .e-sim-body .e-sim-id #eSim-existing-email-field .fullWidth.group > label,
.digitalOnboarding .e-sim-body .e-sim-id #eSim-existing-email-field .fullWidth.group > input {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important; }

#eSim-existing-email-field .errorIcon {
  display: none;
  width: 20px;
  height: 20px; }

#eSim-existing-email-field .errorText {
  display: block;
  padding-top: 4px !important;
  padding-left: 22px;
  font-size: 14px !important; }

#eSim-existing-email-field:has(.errorText) .errorIcon {
  display: block;
  position: absolute;
  left: 0; }

#eSim-existing-email-field .fullWidth.group {
  position: relative; }

#eSim-existing-email-field.emailBox.spaField .fullWidth.group > label.emailLabel {
  font-family: 'PeridotPE-SemiBold' !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  font-feature-settings: 'liga' off, 'clig' off !important;
  margin: 0 0 8px 0 !important; }

.digitalOnboarding .e-sim-body .eSimEmailSent {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 732px !important;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  padding: 24px 32px 32px 32px !important;
  gap: 24px; }

@media (max-width: 768px) {
  .digitalOnboarding .e-sim-body .eSimEmailSent {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    gap: 16px; } }

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

.digitalOnboarding .e-sim-body .e-sim-id .eSimEmailSent {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px; }

@media (max-width: 768px) {
  .digitalOnboarding .e-sim-body .e-sim-id .eSimEmailSent {
    padding: 0 !important;
    gap: 16px; } }

.digitalOnboarding .e-sim-body .eSimContainer {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 732px !important;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  padding: 24px 32px 32px 32px !important;
  gap: 24px; }

@media (max-width: 768px) {
  .digitalOnboarding .e-sim-body .eSimContainer {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    gap: 16px; } }

@media (max-width: 768px) {
  body.digitalOnboarding .e-sim-body .e-sim-id.eSimIntroContent {
    padding: 0 !important;
    margin-top: 24px !important; } }

body.digitalOnboarding .e-sim-body .e-sim-id.section-gutter #eSim-existing-email-field .errorText {
  display: block !important;
  padding-top: 4px !important;
  padding-left: 22px !important;
  margin: 0 !important; }

body.digitalOnboarding .e-sim-body .e-sim-id.section-gutter #eSim-existing-email-field .errorText * {
  margin: 0 !important; }

body.digitalOnboarding .e-sim-body .e-sim-id.section-gutter #eSim-existing-email-field:has(.errorText) .errorIcon {
  display: block !important;
  position: absolute !important;
  left: 0 !important; }

body.digitalOnboarding .e-sim-body .e-sim-id.section-gutter #eSim-existing-email-field .eSimEmailHelper {
  display: block;
  margin-top: 16px !important; }

body.digitalOnboarding .e-sim-body .e-sim-id.section-gutter #eSim-existing-email-field .fullWidth.group:has(.errorText:not(.hidden)) + .eSimEmailHelper {
  margin-top: 24px !important; }

body.digitalOnboarding .e-sim-body .e-sim-id.section-gutter #eSim-existing-email-field .fullWidth.group:has(#invalidErrorText:not(.hidden)) + .eSimEmailHelper {
  margin-top: 24px !important; }

body.digitalOnboarding .e-sim-body .e-sim-id.section-gutter #eSim-existing-email-field .fullWidth.group:has([data-error-message-is-required]:not(.hidden)) + .eSimEmailHelper {
  margin-top: 24px !important; }

.globalHeader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-bottom: 2px solid #e20074; }
  .globalHeader .headerTitle {
    padding: 6px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .globalHeader .headerTextTitle {
    margin: 0 auto;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .globalHeader .subheader {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 4px 8px;
    align-items: center; }
  .globalHeader .headerLanguageFlag {
    width: 30px;
    cursor: pointer;
    height: 20px; }
  .globalHeader .headerExitIcon {
    width: 24px;
    height: 24px;
    padding: 12px; }

.globalHeader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  border-bottom: 2px solid #e20074; }
  .globalHeader .headerTitle {
    padding: 6px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .globalHeader .headerTextTitle {
    margin: 0 auto;
    font-family: 'BTCosmo-Bold', sans-serif;
    font-size: 20px;
    line-height: 24px;
    font-weight: 700; }
  .globalHeader .subheader {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 4px 8px;
    align-items: center; }
  .globalHeader .headerLanguageFlag {
    width: 30px;
    cursor: pointer;
    height: 20px; }
  .globalHeader .headerExitIcon {
    width: 24px;
    height: 24px;
    padding: 12px; }

.moneyboxSecondDivider {
  height: 2px;
  width: 100%;
  align-self: stretch;
  background-color: #e0e0e0; }

.moneyboxBanner {
  display: flex;
  align-self: stretch;
  height: 160px;
  padding: 16px;
  gap: 24px;
  box-sizing: border-box;
  border-radius: 16px;
  background: linear-gradient(270deg, #dd0072 0%, #a00053 100%);
  overflow: hidden; }

.moneyBoxBannerContentStack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  /* title → text */ }

.moneyBoxBannerContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 16px; }

.moneyBoxBannerTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxBannerAmount {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap; }

.moneyBoxBannerEuros {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 32px;
  line-height: 36px;
  font-weight: 700;
  color: var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxBannerCents {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  font-feature-settings: 'liga' off, 'clig' off;
  margin-left: 2px; }

.moneyBoxBannerBtn {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 16px; }

.moneyBoxBannerVisual {
  position: relative;
  flex: 0 0 220px;
  height: 100%; }

.moneyBoxBannerRing {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 230px;
  height: 230px;
  pointer-events: none; }

.moneyBoxBannerCoin {
  position: absolute;
  right: 85px;
  top: 50%;
  transform: translateY(-50%);
  width: 81px;
  height: auto;
  pointer-events: none; }

@media (max-width: 480px) {
  .moneyboxBanner {
    gap: 12px;
    padding: 12px;
    height: 160px; }
  .moneyBoxBannerContent {
    flex: 1 1 auto;
    min-width: 0; }
  .moneyBoxBannerTitle {
    margin-bottom: 0; }
  .moneyBoxBannerAmount {
    margin-bottom: 0; }
  .moneyBoxBannerActionSpacer {
    margin-top: 24px; }
  .moneyBoxBannerVisual {
    flex: 0 0 120px;
    height: 100%; }
  .moneyBoxBannerRing {
    right: -25px;
    width: 160px;
    height: 160px; }
  .moneyBoxBannerCoin {
    right: 25px;
    width: 60px; } }

.moneyBoxHeader {
  padding: 16px 16px 0; }

.moneyBoxTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--On-Colors-Surface-High-emphasis, #212121);
  font-feature-settings: 'liga' off, 'clig' off; }

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

.moneyBoxSection {
  margin: 0;
  padding: 0;
  width: 100%; }

.moneyBoxSectionTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 0 0 4px; }

.moneyBoxSectionMeta {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--Grayscale-Light-Mode-3, var(--grayscale-3-meta, #666));
  font-feature-settings: 'liga' off, 'clig' off;
  display: block;
  margin: 0 0 16px; }

.moneyBoxList {
  list-style: none;
  margin: 0;
  padding: 0; }

.moneyBoxRow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0; }

.moneyBoxRow + .moneyBoxRow {
  margin-top: 16px; }

.moneyBoxRowIcon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px; }

.moneyBoxRowText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBox .lightDivider {
  height: 1px;
  background-color: #e6e6e6;
  margin: 32px 0;
  border: 0; }

.moneyBoxFooterText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 0; }

.moneyBoxActions {
  display: flex;
  justify-content: flex-end;
  width: 100%; }

.noTopPadding-16-8 {
  padding: 0 16px 8px !important; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer {
  margin: 0;
  padding: 16px 0; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer + .moneyBoxExtraOffer {
  border-top: 1px solid #e6e6e6; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer .c1VerticalOfferContainer {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer .c1VerticalLogoContainer {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 64px; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer .c1VerticalDiscountTextGroup {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer .c1VerticalDiscountTextHeading {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #212121;
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 0; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer .discountText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #212121;
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 0; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer .c1VerticalDiscountButton {
  margin-left: auto;
  align-self: flex-start;
  white-space: nowrap; }

.moneyBoxExtraOffersList .moneyBoxExtraOffer .c1VerticalDiscountTextGroup .c1VerticalDiscountButton {
  margin-top: 24px; }

.moneyBoxExtra .moneyBoxExtraList {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important; }

.moneyBoxExtra .c1DiscountListSection.moneyBoxExtraList {
  gap: 0 !important; }

.moneyBoxExtra .moneyBoxExtraItem {
  padding: 16px 0;
  border: none; }

.moneyBoxExtra .moneyBoxExtraOffer {
  display: flex;
  align-items: flex-start; }

.moneyBoxExtra .moneyBoxExtraLogo {
  display: flex;
  width: 64px;
  height: 64px;
  justify-content: center;
  align-items: center;
  gap: 11.007px;
  flex: 0 0 64px; }

.moneyBoxExtra .moneyBoxExtraTextGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0; }

.moneyBoxExtra .moneyBoxExtraTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin: 0;
  color: #212121;
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxExtra .moneyBoxExtraText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin: 0;
  color: #212121;
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxExtra .moneyBoxExtraBtn {
  align-self: center;
  white-space: nowrap; }

@media (max-width: 480px) {
  .moneyBoxExtra .moneyBoxExtraOffer {
    flex-wrap: wrap; }
  .moneyBoxExtra .moneyBoxExtraTextGroup {
    flex: 1 1 calc(100% - 88px); }
  .moneyBoxExtra .moneyBoxExtraBtn {
    margin-left: 88px;
    margin-top: 12px;
    align-self: flex-start; } }

.moneyBoxExtraText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 0; }

.moneyboxDivider {
  display: block;
  height: 1px;
  background-color: #e6e6e6;
  margin: 32px 0;
  width: 100%;
  align-self: stretch; }

.moneyboxDividerFull {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto; }

.moneyBox .moneyBoxContent {
  width: 100%;
  align-items: stretch !important; }

.moneyBoxContent {
  align-items: stretch; }

.moneyBox .moneyboxDivider {
  width: 100%;
  align-self: stretch !important;
  flex: 0 0 auto; }

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

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

.mb-24 {
  margin-bottom: 24px !important; }

.moneyBoxFilter .ddFilterContent:first-child {
  margin-right: 0 !important; }

.moneyBoxDiscountAnalysisModal {
  width: 592px;
  max-width: calc(100vw - 48px);
  border-radius: 16px; }

.moneyBoxDiscountAnalysisModal .moneyBoxList,
.moneyBoxDiscountAnalysisModal .moneyBoxContent,
.moneyBoxDiscountAnalysisModal .createCosmoteOneModalContent,
.moneyBoxDiscountAnalysisModal .createCosmoteOneModalContent.moneyBox {
  width: 100%;
  max-width: none;
  align-items: stretch; }

.moneyBoxDiscountAnalysisModal .createCosmoteOneModalContent {
  padding: 24px !important;
  gap: 0 !important; }

.moneyBoxDiscountAnalysisHeader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px !important; }

.moneyBoxDiscountAnalysisHeaderTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxDiscountAnalysisHeader .modal-closeButton {
  position: absolute;
  right: 16px;
  top: 16px; }

.moneyBoxDiscountAnalysisModal .modal-closeButton:before {
  padding: 0; }

.moneyBoxDiscountAnalysisTop {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.moneyBoxDiscountAnalysisMonth {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxDiscountAnalysisSubTitle {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  margin: 24px 0 0; }

.moneyBoxDiscountAnalysisList {
  margin: 0;
  padding: 0; }

.moneyBoxDiscountAnalysisRow {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  text-decoration: none;
  color: inherit; }

.moneyBoxDiscountAnalysisRowLeft {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; }

.moneyBoxDiscountAnalysisLabel {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.moneyBoxDiscountAnalysisRowRight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; }

.moneyBoxDiscountAnalysisAmount {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  white-space: nowrap; }

.moneyBoxDiscountAnalysisModal .icon-arrowDown {
  width: 16px;
  height: 16px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.moneyBoxDiscountAnalysisModal .moneyBoxArrowDown {
  transform: rotate(0deg) !important;
  transition: transform 0.2s ease; }

.moneyBoxDiscountAnalysisModal .toggleSettingDescription[aria-expanded='true'] .moneyBoxArrowDown,
.moneyBoxDiscountAnalysisModal .toggleSettingDescription.active .moneyBoxArrowDown,
.moneyBoxDiscountAnalysisModal .toggleSettingDescription.open .moneyBoxArrowDown {
  transform: rotate(180deg) !important; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisTotal {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisEuros {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 24px; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisCents {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  margin-left: 2px; }

.moneyBoxDiscountAnalysisFootnote {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--Grayscale-Light-Mode-3, var(--grayscale-3-meta, #666));
  font-feature-settings: 'liga' off, 'clig' off;
  display: block;
  font-size: 12px; }

.moneyBoxDiscountAnalysisModal li.switchSetting.moneyBoxDiscountAnalysisItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  box-shadow: none !important; }

.moneyBoxDiscountAnalysisModal .switchSettingAction {
  width: 100%;
  margin-left: 0 !important; }

.moneyBoxDiscountAnalysisModal .toggleSettingDescription {
  transform: none !important; }

.moneyBoxDiscountAnalysisModal .toggleSettingDescription * {
  transform: none !important; }

.moneyBoxDiscountAnalysisModal .switchSettingAction > a.moneyBoxDiscountAnalysisRow {
  padding: 0 !important; }

.moneyBoxDiscountAnalysisModal li.switchSetting.moneyBoxDiscountAnalysisItem > .switchSettingContent.moneyBoxDiscountAnalysisDetails {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: visible !important; }

.moneyBoxDiscountAnalysisModal .switchSetting .switchSettingBottom {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important; }

.moneyBoxDiscountAnalysisModal li.switchSetting.moneyBoxDiscountAnalysisItem > .switchSettingAction > a.toggleSettingDescription[aria-expanded='true'] + .switchSettingContent.moneyBoxDiscountAnalysisDetails {
  padding-top: 16px !important;
  padding-bottom: 0 !important; }

.moneyBoxDiscountAnalysisModal .moneyboxDivider {
  margin: 24px 0 !important; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailItem {
  display: flex;
  flex-direction: column;
  gap: 4px; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailsInner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailMsisdn {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--Grayscale-Light-Mode-3, var(--grayscale-3-meta, #666));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailLine {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  column-gap: 8px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailDesc {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  min-width: 0 !important;
  overflow-wrap: anywhere; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailPrice {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--grayscale-light-mode-5-text, var(--grayscale-5-text, #212121));
  font-feature-settings: 'liga' off, 'clig' off;
  justify-self: end !important;
  white-space: nowrap !important;
  margin-right: 24px !important; }

@media (max-width: 480px) {
  .moneyBoxDiscountAnalysisModal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px); }
  .moneyBoxDiscountAnalysisTop,
  .moneyBoxDiscountAnalysisRow {
    padding-left: 16px;
    padding-right: 16px; }
  .moneyBoxDiscountAnalysisSubTitle {
    margin-left: 16px;
    margin-right: 16px; }
  .moneyBoxDiscountAnalysisFootnote {
    padding-left: 16px;
    padding-right: 16px; } }

.moneyBoxDiscountAnalysisModal .switchSettingAction .toggleSettingDescription {
  margin-left: 0 !important; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailItem {
  margin-bottom: 16px !important; }

.moneyBoxDiscountAnalysisModal .moneyBoxDiscountAnalysisDetailItem:last-of-type {
  margin-bottom: 0 !important; }

.mb-8 {
  margin-bottom: 8px !important; }

.moneyBoxPromoBannerTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxPromoBannerText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxPromoBannerBtn {
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--grayscale-light-mode-0-white, var(--grayscale-0-white, #fff));
  text-align: center;
  font-feature-settings: 'liga' off, 'clig' off; }

.moneyBoxSectionMeta.noMarginBottom {
  margin-bottom: 0 !important; }

.cosmoteOneCombo .cosmoteOneStepperFormBody .assetsDiscountListSectionBody.discount {
  padding: 0 !important; }

.icon-tick-selected-button {
  font-size: 24px;
  margin-right: 8px; }

.buttonDescriptionContainer {
  display: flex;
  flex-direction: column;
  text-align: center; }

.buttonDescriptionContainerAlignEnd {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: flex-end; }

.buttonDescriptionText {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #212121;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  margin-top: 8px; }

.buttonDesctiptionSection {
  display: flex;
  justify-content: flex-end; }

.informationSpan {
  position: relative;
  bottom: 0;
  left: 4px;
  display: inline-block;
  margin: auto;
  width: 16px;
  height: 16px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  background-color: #00a5e3;
  color: #ffffff !important;
  padding: 0;
  text-align: center;
  border-radius: 100%;
  cursor: pointer; }
  .informationSpan.withTooltip {
    padding-top: 2px;
    margin-left: 6px; }
    @media only screen and (max-width: 480px) {
      .informationSpan.withTooltip {
        display: none !important; } }
  .informationSpan:hover .tableTooltipPointingLeft {
    display: block; }
  .informationSpan-icon {
    margin: 0;
    left: initial;
    flex-shrink: 0;
    margin-top: 2px; }
  .informationSpan-container {
    display: flex;
    gap: 4px; }

.tableTooltipPointingLeft {
  position: absolute;
  left: 40px;
  bottom: -66px;
  min-width: 274px;
  display: none;
  transform: translate3d(0, 0, 0); }

.bottomPanelSection {
  padding: 10px;
  padding-top: 16px;
  padding-left: 24px;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background-color: #e6e6e6;
  z-index: 10;
  border-radius: 16px 0 0 0;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: -20px; }
  @media only screen and (min-width: 1025px) and (max-width: 1230px) {
    .bottomPanelSection {
      width: 100%; } }
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .bottomPanelSection {
      width: 100%; } }
  @media only screen and (max-width: 767px) {
    .bottomPanelSection {
      width: 100%;
      flex-flow: column;
      align-items: center;
      gap: 16px; } }
  .bottomPanelSection.opened {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease; }

.bottomPanelTogglerButton {
  padding: 6px 4px;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: #212121;
  background-color: #e6e6e6;
  position: absolute;
  top: 0;
  right: 30px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
  z-index: -1;
  mix-blend-mode: screen;
  display: flex;
  align-items: center;
  border-radius: 16px 16px 0 0; }
  @media only screen and (max-width: 767px) {
    .bottomPanelTogglerButton {
      right: 12px; } }
  .bottomPanelTogglerButton i {
    font-size: 12px;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    transform: scaleY(1); }
    .bottomPanelTogglerButton i.opened {
      -webkit-transform: scaleY(-1);
      -moz-transform: scaleY(-1);
      transform: scaleY(-1); }

.bottomPanelContainer {
  display: flex;
  flex-direction: column;
  width: 100%; }

.selectOfferLayout {
  padding-bottom: 106px; }

.visitLinksContainer {
  display: flex;
  align-items: space-between;
  align-self: flex-end; }

.bottomPanelRightSide {
  align-self: flex-end;
  display: flex;
  flex-wrap: wrap; }

.bottomPanelRightSideButton {
  margin: 4px; }

.bottomPanelSectionContent {
  display: flex;
  justify-content: space-between; }

.panelLinkLeft {
  padding: 12px 8px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  width: initial;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  margin-right: 42px; }
  .panelLinkLeft:hover {
    color: rgba(0, 109, 41, 0.85);
    z-index: 1; }
  .panelLinkLeft: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; }
  .panelLinkLeft-notVisible {
    visibility: hidden; }
  .panelLinkLeft.hidden {
    display: none; }
  .panelLinkLeft.absoluteLink {
    position: absolute;
    bottom: 8px; }
  .panelLinkLeft.whiteLink {
    display: inline-block;
    width: auto;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .panelLinkLeft.whiteLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .panelLinkLeft.blueTooltipLink {
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px; }
  .panelLinkLeft.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .panelLinkLeft.blueLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .panelLinkLeft.inline {
    display: inline-block;
    width: auto; }
  .panelLinkLeft.blue {
    color: #212121 !important;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }

.panelLinkRight {
  padding: 12px 8px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  width: initial;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 16px; }
  .panelLinkRight:hover {
    color: rgba(0, 109, 41, 0.85);
    z-index: 1; }
  .panelLinkRight: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; }
  .panelLinkRight-notVisible {
    visibility: hidden; }
  .panelLinkRight.hidden {
    display: none; }
  .panelLinkRight.absoluteLink {
    position: absolute;
    bottom: 8px; }
  .panelLinkRight.whiteLink {
    display: inline-block;
    width: auto;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .panelLinkRight.whiteLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .panelLinkRight.blueTooltipLink {
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px; }
  .panelLinkRight.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      .panelLinkRight.blueLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  .panelLinkRight.inline {
    display: inline-block;
    width: auto; }
  .panelLinkRight.blue {
    color: #212121 !important;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }

.bottomPanelParagraph {
  margin: 0;
  padding-bottom: 24px;
  max-width: 490px; }

.detailsGroupBorderTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-top: 1px solid #9d9d9c;
  padding-top: 12px;
  margin-top: 12px; }

.detailsGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 16px; }

.detailsGroupRightElement {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.togglerElementIcon {
  -webkit-transform: scaleY(-1);
  -moz-transform: scaleY(-1);
  transform: scaleY(-1); }
  .togglerElementIcon.opened {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    transform: scaleY(-1); }

.dataTogglerElementIconContainer i {
  font-size: 24px;
  margin-left: 4px; }

.dataTogglerElementIconContainer .spanSeeMore {
  display: flex; }

.dataTogglerElementIconContainer .spanSeeLess {
  display: none; }

.dataTogglerElementIconContainer.opened .spanSeeMore {
  display: none; }

.dataTogglerElementIconContainer.opened .spanSeeLess {
  display: flex; }

.togglerElementContainer {
  display: flex;
  cursor: pointer;
  align-self: center; }

.togglerElementParagraph {
  display: flex;
  align-items: center;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center; }

.programAssetTitle {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center; }

.programAssetTitleIcon {
  margin-right: 8px; }

.rateplanRenewModalTitle {
  width: 100%;
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 16px; }

.successStepTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0; }

.successStepSubTitle {
  margin-bottom: 16px;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0; }

.successStepDescription {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 16px; }

.successStepDescriptionLast {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 16px;
  margin-bottom: 24px; }

.sectionAssetLabel {
  display: flex;
  margin-left: -16px;
  margin-bottom: 12px; }

.sectionAssetLabelIconText {
  padding: 6px 14px 6px 10px;
  background-color: #e6e6e6;
  width: auto;
  color: #212121;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: flex;
  align-items: center;
  min-width: 80px;
  border-radius: 0 16px 16px 0; }

.sectionAssetLabelText {
  margin-left: 4px; }

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

.wrapper {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto; }

.wrapperCarousel {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto; }

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem; }

.row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -moz-box-flex: 0;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 14px;
  margin-left: 14px; }

.row.reverse {
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.col.reverse {
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

.col-xs {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: auto;
  -moz-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto; }

.col-xs-1 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 8.33333%;
  -moz-flex-basis: 8.33333%;
  -ms-flex-preferred-size: 8.33333%;
  flex-basis: 8.33333%;
  max-width: 8.33333%; }

.col-xs-2 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 16.66667%;
  -moz-flex-basis: 16.66667%;
  -ms-flex-preferred-size: 16.66667%;
  flex-basis: 16.66667%;
  max-width: 16.66667%; }

.col-xs-3 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 25%;
  -moz-flex-basis: 25%;
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%; }

.col-xs-4 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 33.33333%;
  -moz-flex-basis: 33.33333%;
  -ms-flex-preferred-size: 33.33333%;
  flex-basis: 33.33333%;
  max-width: 33.33333%; }

.col-xs-5 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 41.66667%;
  -moz-flex-basis: 41.66667%;
  -ms-flex-preferred-size: 41.66667%;
  flex-basis: 41.66667%;
  max-width: 41.66667%; }

.col-xs-6 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 50%;
  -moz-flex-basis: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%; }

.col-xs-7 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 58.33333%;
  -moz-flex-basis: 58.33333%;
  -ms-flex-preferred-size: 58.33333%;
  flex-basis: 58.33333%;
  max-width: 58.33333%; }

.col-xs-8 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 66.66667%;
  -moz-flex-basis: 66.66667%;
  -ms-flex-preferred-size: 66.66667%;
  flex-basis: 66.66667%;
  max-width: 66.66667%; }

.col-xs-9 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 75%;
  -moz-flex-basis: 75%;
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%; }

.col-xs-10 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 83.33333%;
  -moz-flex-basis: 83.33333%;
  -ms-flex-preferred-size: 83.33333%;
  flex-basis: 83.33333%;
  max-width: 83.33333%; }

.col-xs-11 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 91.66667%;
  -moz-flex-basis: 91.66667%;
  -ms-flex-preferred-size: 91.66667%;
  flex-basis: 91.66667%;
  max-width: 91.66667%; }

.col-xs-12 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  -webkit-flex-basis: 100%;
  -moz-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%; }

.col-xs-offset-0 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 0; }

.col-xs-offset-1 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 8.33333%; }

.col-xs-offset-2 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 16.66667%; }

.col-xs-offset-3 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 25%; }

.col-xs-offset-4 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 33.33333%; }

.col-xs-offset-5 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 41.66667%; }

.col-xs-offset-6 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 50%; }

.col-xs-offset-7 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 58.33333%; }

.col-xs-offset-8 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 66.66667%; }

.col-xs-offset-9 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 75%; }

.col-xs-offset-10 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 83.33333%; }

.col-xs-offset-11 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 91.66667%; }

.col-xs-offset-12 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 16px;
  padding-left: 16px;
  margin-left: 100%; }

.col-xs {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-basis: 0;
  -moz-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%; }

.start-xs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  text-align: left; }

.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  text-align: center; }

.end-xs {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  text-align: right; }

.top-xs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start; }

.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.bottom-xs {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end; }

.around-xs {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around; }

.between-xs {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.first-xs {
  order: -1; }

.last-xs {
  order: 1; }

@media only screen and (min-width: 48em) {
  .container {
    width: 46rem; }
  .col-sm {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto; }
  .col-sm-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 8.33333%;
    -moz-flex-basis: 8.33333%;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .col-sm-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 16.66667%;
    -moz-flex-basis: 16.66667%;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .col-sm-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-sm-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 33.33333%;
    -moz-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .col-sm-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 41.66667%;
    -moz-flex-basis: 41.66667%;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .col-sm-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-sm-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 58.33333%;
    -moz-flex-basis: 58.33333%;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .col-sm-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 66.66667%;
    -moz-flex-basis: 66.66667%;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .col-sm-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 75%;
    -moz-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-sm-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 83.33333%;
    -moz-flex-basis: 83.33333%;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .col-sm-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 91.66667%;
    -moz-flex-basis: 91.66667%;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .col-sm-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-sm-offset-0 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 0; }
  .col-sm-offset-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 8.33333%; }
  .col-sm-offset-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 16.66667%; }
  .col-sm-offset-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 25%; }
  .col-sm-offset-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 33.33333%; }
  .col-sm-offset-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 41.66667%; }
  .col-sm-offset-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 50%; }
  .col-sm-offset-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 58.33333%; }
  .col-sm-offset-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 66.66667%; }
  .col-sm-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 75%; }
  .col-sm-offset-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 83.33333%; }
  .col-sm-offset-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 91.66667%; }
  .col-sm-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 100%; }
  .col-sm {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }
  .start-sm {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left; }
  .center-sm {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    text-align: center; }
  .end-sm {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right; }
  .top-sm {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start; }
  .middle-sm {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  .bottom-sm {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end; }
  .around-sm {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around; }
  .between-sm {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  .first-sm {
    order: -1; }
  .last-sm {
    order: 1; } }

@media only screen and (min-width: 62em) {
  .container {
    width: 61rem; }
  .col-md {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto; }
  .col-md-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 8.33333%;
    -moz-flex-basis: 8.33333%;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .col-md-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 16.66667%;
    -moz-flex-basis: 16.66667%;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .col-md-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-md-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 33.33333%;
    -moz-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .col-md-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 41.66667%;
    -moz-flex-basis: 41.66667%;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .col-md-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-md-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 58.33333%;
    -moz-flex-basis: 58.33333%;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .col-md-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 66.66667%;
    -moz-flex-basis: 66.66667%;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .col-md-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 75%;
    -moz-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-md-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 83.33333%;
    -moz-flex-basis: 83.33333%;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .col-md-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 91.66667%;
    -moz-flex-basis: 91.66667%;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .col-md-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-md-offset-0 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 0; }
  .col-md-offset-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 8.33333%; }
  .col-md-offset-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 16.66667%; }
  .col-md-offset-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 25%; }
  .col-md-offset-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 33.33333%; }
  .col-md-offset-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 41.66667%; }
  .col-md-offset-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 50%; }
  .col-md-offset-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 58.33333%; }
  .col-md-offset-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 66.66667%; }
  .col-md-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 75%; }
  .col-md-offset-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 83.33333%; }
  .col-md-offset-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 91.66667%; }
  .col-md-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 100%; }
  .col-md {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }
  .start-md {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left; }
  .center-md {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    text-align: center; }
  .end-md {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right; }
  .top-md {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start; }
  .middle-md {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  .bottom-md {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end; }
  .around-md {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around; }
  .between-md {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  .first-md {
    order: -1; }
  .last-md {
    order: 1; } }

@media only screen and (min-width: 75em) {
  .container {
    width: 71rem; }
  .col-lg {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto; }
  .col-lg-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 8.33333%;
    -moz-flex-basis: 8.33333%;
    -ms-flex-preferred-size: 8.33333%;
    flex-basis: 8.33333%;
    max-width: 8.33333%; }
  .col-lg-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 16.66667%;
    -moz-flex-basis: 16.66667%;
    -ms-flex-preferred-size: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%; }
  .col-lg-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-lg-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 33.33333%;
    -moz-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%; }
  .col-lg-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 41.66667%;
    -moz-flex-basis: 41.66667%;
    -ms-flex-preferred-size: 41.66667%;
    flex-basis: 41.66667%;
    max-width: 41.66667%; }
  .col-lg-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-lg-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 58.33333%;
    -moz-flex-basis: 58.33333%;
    -ms-flex-preferred-size: 58.33333%;
    flex-basis: 58.33333%;
    max-width: 58.33333%; }
  .col-lg-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 66.66667%;
    -moz-flex-basis: 66.66667%;
    -ms-flex-preferred-size: 66.66667%;
    flex-basis: 66.66667%;
    max-width: 66.66667%; }
  .col-lg-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 75%;
    -moz-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-lg-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 83.33333%;
    -moz-flex-basis: 83.33333%;
    -ms-flex-preferred-size: 83.33333%;
    flex-basis: 83.33333%;
    max-width: 83.33333%; }
  .col-lg-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 91.66667%;
    -moz-flex-basis: 91.66667%;
    -ms-flex-preferred-size: 91.66667%;
    flex-basis: 91.66667%;
    max-width: 91.66667%; }
  .col-lg-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-lg-offset-0 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 0; }
  .col-lg-offset-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 8.33333%; }
  .col-lg-offset-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 16.66667%; }
  .col-lg-offset-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 25%; }
  .col-lg-offset-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 33.33333%; }
  .col-lg-offset-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 41.66667%; }
  .col-lg-offset-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 50%; }
  .col-lg-offset-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 58.33333%; }
  .col-lg-offset-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 66.66667%; }
  .col-lg-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 75%; }
  .col-lg-offset-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 83.33333%; }
  .col-lg-offset-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 91.66667%; }
  .col-lg-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 16px;
    padding-left: 16px;
    margin-left: 100%; }
  .col-lg {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }
  .start-lg {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left; }
  .center-lg {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    text-align: center; }
  .end-lg {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right; }
  .top-lg {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start; }
  .middle-lg {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  .bottom-lg {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end; }
  .around-lg {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around; }
  .between-lg {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  .first-lg {
    order: -1; }
  .last-lg {
    order: 1; } }

* {
  box-sizing: border-box; }

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

a {
  color: #0e8103;
  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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700; }
    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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }
  body .userText strong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

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

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

body .withBullets {
  display: inline-flex;
  flex-direction: column;
  margin: 0 auto; }
  body .withBullets li {
    padding-left: 8px;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #212121;
  margin-top: 26px;
  margin-bottom: 24px; }
  body .centeredText strong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

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

body .returnLink {
  padding: 12px 8px;
  color: #0e8103;
  font-family: 'PeridotPE-Bold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  width: auto;
  display: block;
  justify-content: center;
  align-items: center;
  border-radius: 16px; }
  body .returnLink:hover {
    color: rgba(0, 109, 41, 0.85);
    z-index: 1; }
  body .returnLink: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 .returnLink-notVisible {
    visibility: hidden; }
  body .returnLink.hidden {
    display: none; }
  body .returnLink.absoluteLink {
    position: absolute;
    bottom: 8px; }
  body .returnLink.whiteLink {
    display: inline-block;
    width: auto;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 16px;
    margin-left: 8px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      body .returnLink.whiteLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  body .returnLink.blueTooltipLink {
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px; }
  body .returnLink.blueLink {
    display: inline-block;
    width: auto;
    color: #212121;
    margin-left: 24px;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
    @media only screen and (max-width: 767px) {
      body .returnLink.blueLink {
        margin-left: 0;
        display: block;
        width: 100%;
        margin-top: 12px; } }
  body .returnLink.inline {
    display: inline-block;
    width: auto; }
  body .returnLink.blue {
    color: #212121 !important;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700; }
  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 .popupTitle {
  display: block;
  text-align: left;
  margin-bottom: 24px;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  position: absolute;
  left: 0;
  top: -4px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%); }

.simpleInfoBox {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600; }

.diaIndication {
  margin-top: 12px;
  display: block;
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  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-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.boldTitle {
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700; }
  .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; }

.successBody {
  display: flex;
  flex-direction: row;
  gap: 24px; }
  .successBody .successBodyText {
    display: flex;
    gap: 8px;
    flex-direction: column; }

.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: #212121 !important; }

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

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

.strongText {
  font-family: 'PeridotPE-SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600; }

body {
  margin: 0;
  padding: 0;
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  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', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 600;
      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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  body .tvGoBox {
    padding: 8px 12px;
    background-color: #e6e6e6;
    left: 0;
    top: 0;
    width: 115px;
    color: #212121;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    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: #df6938 !important; }
  body .invalid input {
    border-color: #df6938 !important; }
  body .invalid label,
  body .invalid .fieldIndication {
    color: #df6938 !important; }
  body .inputWithImage .errorText {
    left: 34px; }
  body .errorText {
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%); }
  body .errorTextSimple {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;
    -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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    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', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400; }
      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', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700; }
    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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }
  body .withEdit {
    display: flex;
    align-items: flex-start; }
    body .withEdit i {
      margin-left: 16px;
      cursor: pointer; }
  body .regularText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  body .lightText {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
  body .fullWidth {
    max-width: 100% !important;
    width: 100% !important; }
  body .largeTopPadding {
    padding-top: 50px !important; }
  body .ribbonTitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #ffffff;
    padding: 6px 16px;
    -webkit-border-radius: 16px 0;
    -moz-border-radius: 16px 0;
    border-radius: 16px 0;
    background-color: #e20074;
    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='%238B0047'/%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', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #9d9d9c;
    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', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      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', sans-serif;
              font-size: 18px;
              line-height: 20px;
              font-weight: 600; }
            body .box.withBackgroundColor .detailsContent .detailsContentLeft .packageInfo .packageInfoContent {
              margin-top: 12px;
              margin-bottom: 0;
              color: #ffffff;
              font-family: 'PeridotPE-Regular', sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400; }
          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', sans-serif;
                  font-size: 18px;
                  line-height: 20px;
                  font-weight: 600;
                  color: #ffffff; }
                body .box.withBackground.withXmasBackground .detailsContent .detailsContentLeft .packageInfo .packageInfoContent span {
                  display: block;
                  font-family: 'PeridotPE-SemiBold', sans-serif;
                  font-size: 14px;
                  line-height: 16px;
                  font-weight: 600;
                  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', sans-serif;
              font-size: 16px;
              line-height: 24px;
              font-weight: 400; }
        body .box.withBackground .withParentBackground .packageInfoTitleOffer {
          font-family: 'PeridotPE-SemiBold', sans-serif;
          font-size: 18px;
          line-height: 20px;
          font-weight: 600;
          color: #ffffff; }
        body .box.withBackground .withParentBackground .plainTextOffer {
          color: #ffffff;
          margin-top: 4px;
          font-family: 'PeridotPE-Regular', sans-serif;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400; }
          body .box.withBackground .withParentBackground .plainTextOffer.largeOfferText {
            font-family: 'PeridotPE-Regular', sans-serif;
            font-size: 18px;
            line-height: 28px;
            font-weight: 400;
            display: block;
            padding-right: 24px; }
            @media only screen and (max-width: 480px) {
              body .box.withBackground .withParentBackground .plainTextOffer.largeOfferText.withMobileFonts {
                font-family: 'PeridotPE-Regular', sans-serif;
                font-size: 14px;
                line-height: 20px;
                font-weight: 400; } }
            body .box.withBackground .withParentBackground .plainTextOffer.largeOfferText strong {
              display: inline-block;
              font-family: 'PeridotPE-SemiBold', sans-serif;
              font-size: 14px;
              line-height: 16px;
              font-weight: 600; }
        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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400; }
    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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  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: #df6938; }
  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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    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: #0e8103;
    font-family: 'PeridotPE-Bold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    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', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @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', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700;
      letter-spacing: 0;
      margin-top: 4px; }
    body .visitLink.blueLink {
      display: inline-block;
      width: auto;
      color: #212121;
      margin-left: 24px;
      font-family: 'PeridotPE-Bold', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }
      @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', sans-serif;
      font-size: 16px;
      line-height: 16px;
      font-weight: 700; }

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

.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; }

.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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }
  .plainTextElement strong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600; }

.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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

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

.sectionTitle {
  padding: 12px 16px;
  font-family: 'BTCosmo-Bold', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #212121;
  background: #ffffff;
  width: 100%;
  display: block;
  box-sizing: border-box; }
  .sectionTitle.withInfoIcon {
    display: flex; }
  .sectionTitle.sectionTitleGrey {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    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', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  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', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .dropdownContainer :-moz-placeholder {
    color: #848484;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .dropdownContainer ::-moz-placeholder {
    color: #848484;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .dropdownContainer :-ms-input-placeholder {
    color: #848484;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }
  .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 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; }
    .dropdownContainer i.icon-arrowDown {
      font-size: 18px;
      -webkit-transform: translateY(-50%) scaleY(1);
      -moz-transform: translateY(-50%) scaleY(1);
      transform: translateY(-50%) scaleY(1); }
      .dropdownContainer i.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%;
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #212121;
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid #212121;
    border-radius: 16px;
    padding: 12px 8px; }
    .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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400;
      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', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .dropDownContentBox .megaFilterContentSearch :-moz-placeholder {
      color: #9d9d9c;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .dropDownContentBox .megaFilterContentSearch ::-moz-placeholder {
      color: #9d9d9c;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .dropDownContentBox .megaFilterContentSearch :-ms-input-placeholder {
      color: #9d9d9c;
      font-family: 'PeridotPE-Regular', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 400; }
    .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', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        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', sans-serif;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400;
          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', sans-serif;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      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', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    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', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

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

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

.mediumDrop {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }

.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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 8px; }
  .plainTextCol .plainTextColDescription {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400; }

.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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.lightLabel {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

.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; }

body .slick-slider:not(.sliderCols):not(.contextualCarouselHomepage) .slick-next:focus {
  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; }

body .slick-slider:not(.sliderCols):not(.contextualCarouselHomepage) .slick-prev:focus {
  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', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  margin-bottom: 4px; }

.alertMessage .alertContent {
  font-family: 'PeridotPE-Regular', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400; }
  .alertMessage .alertContent strong {
    font-family: 'PeridotPE-SemiBold', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600; }

.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', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700; }
  .plainLink.activeConnection {
    position: relative;
    z-index: 1; }
    .plainLink.activeConnection:before {
      content: '';
      display: block;
      position: absolute;
      left: -16px;
      top: -6px;
      background: #e20074;
      z-index: 0;
      width: 3px;
      height: calc(100% + 12px); }
    .plainLink.activeConnection:after {
      content: '';
      display: block;
      position: absolute;
      left: -16px;
      top: -6px;
      background-color: #f2f2f3;
      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', sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 4px;
    display: block; }
  body .emptyGift .emptyStateSubTitle {
    font-family: 'PeridotPE-Regular', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    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', sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400; }

@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', sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  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', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        color: #ffffff; }
      body .onPopup.withBackground .withParentBackground .plainTextOffer {
        color: #ffffff;
        margin-top: 4px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
      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', sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight: 600;
        color: #ffffff; }
      body .onPopup.withBackgroundSimple .withParentBackground .plainTextOffer {
        color: #ffffff;
        margin-top: 4px;
        font-family: 'PeridotPE-Regular', sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; }
      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', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400; }
  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;
  min-width: 100px; }
  .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', sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  transform: translateY(100%); }

i {
  font-style: normal; }

#simple-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100001; }

.simple-popup-content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 80%;
  max-width: 100%;
  z-index: 100002;
  padding: 30px 40px;
  overflow: auto; }

.simple-popup-content .close {
  position: absolute;
  right: 0;
  top: 0; }

.simple-popup-content .close::before {
  display: inline-block;
  text-align: center;
  content: "\00d7";
  font-size: 40px;
  color: #d3d3d3;
  width: 40px;
  line-height: 40px; }

.simple-popup-content .close:hover {
  cursor: hand;
  cursor: pointer; }

.simple-popup-content .close:hover::before {
  color: grey; }

#simple-popup-backdrop, .simple-popup-backdrop-content {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000; }

#simple-popup, #simple-popup-backdrop, #simple-popup-backdrop.hide-it, #simple-popup.hide-it {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity; }

#simple-popup-backdrop.hide-it, #simple-popup.hide-it {
  opacity: 0; }

#simple-popup, #simple-popup-backdrop {
  opacity: 1; }

@charset "UTF-8";
/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: "←"; }
    [dir="rtl"] .slick-prev:before {
      content: "→"; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: "→"; }
    [dir="rtl"] .slick-next:before {
      content: "←"; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); }

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible; }

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999; }

.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); }

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px; }

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px); }

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block; }

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important; }

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; }

.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0; }

.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6; }

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto; }

.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px; }

.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.rightMost:after {
  left: auto;
  right: 22px; }

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px; }

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px; }

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%; }

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6; }

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff; }

.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%; }

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6; }

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff; }

.flatpickr-calendar:focus {
  outline: 0; }

.flatpickr-wrapper {
  position: relative;
  display: inline-block; }

.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 28px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  line-height: 16px;
  height: 28px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9); }

.flatpickr-months .flatpickr-prev-month.disabled,
.flatpickr-months .flatpickr-next-month.disabled {
  display: none; }

.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative; }

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  /*
      /*rtl:begin:ignore*/
  /*
      */
  left: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */ }

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  /*
      /*rtl:begin:ignore*/
  /*
      */
  right: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */ }

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9; }

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747; }

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px; }

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit; }

.numInputWrapper {
  position: relative;
  height: auto; }

.numInputWrapper input,
.numInputWrapper span {
  display: inline-block; }

.numInputWrapper input {
  width: 100%; }

.numInputWrapper input::-ms-clear {
  display: none; }

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1); }

.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2); }

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute; }

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0; }

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%; }

.numInputWrapper span.arrowDown {
  top: 50%; }

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%; }

.numInputWrapper span svg {
  width: inherit;
  height: auto; }

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5); }

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05); }

.numInputWrapper:hover span {
  opacity: 1; }

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 6.16px 0 0 0;
  line-height: 1;
  height: 28px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px); }

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0; }

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05); }

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block; }

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9); }

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9); }

.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial; }

.flatpickr-current-month input.cur-year:focus {
  outline: 0; }

.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none; }

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px; }

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: bolder; }

.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0; }

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 307.875px; }

.flatpickr-days:focus {
  outline: 0; }

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  opacity: 1; }

.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
  box-shadow: -1px 0 0 #e6e6e6; }

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
  -ms-flex-preferred-size: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center; }

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6; }

.flatpickr-day.today {
  border-color: #959ea9; }

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff; }

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7; }

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px; }

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0; }

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
  box-shadow: -10px 0 0 #569ff7; }

.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px; }

.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; }

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default; }

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1); }

.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; }

.flatpickr-day.hidden {
  visibility: hidden; }

.rangeMode .flatpickr-day {
  margin-top: 1px; }

.flatpickr-weekwrapper {
  display: inline-block;
  float: left; }

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
  box-shadow: 1px 0 0 #e6e6e6; }

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px; }

.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none; }

.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden; }

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both; }

.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 40%;
  height: 40px;
  float: left; }

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939; }

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939; }

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%; }

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%; }

.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.flatpickr-time input.flatpickr-hour {
  font-weight: bold; }

.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400; }

.flatpickr-time input:focus {
  outline: 0;
  border: 0; }

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  display: inline-block;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center; }

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400; }

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #f3f3f3; }

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

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }