@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/76338ad002f5dacc_PoppinsRegular.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/64a1678bb2b8e6e4_PoppinsLight.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/61b738123817ba04_PoppinsBold.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('https://cdn.folloze.com/theme/add9cba503917dee_PoppinsLightItalic.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('https://cdn.folloze.com/theme/94955900997e50ee_PoppinsBoldItalic.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('https://cdn.folloze.com/theme/1372bdceeef7a8e7_PoppinsItalic.ttf');
}




html {
    font-size: 16px !important;
  }
  .modal-is-opened {
    overflow: hidden !important;
  }
  :root,
  :host,
  .code-block__preview {
    /************************************************
      ================ color palette ==================
      ************************************************/
    /*primary*/
    --fz-color-primary-1: unset; /*mandatory update - should be lightest*/
    --fz-color-primary-2: unset; /*mandatory update*/
    --fz-color-primary-3: rgb(21, 101, 192); /*mandatory update - main brand color*/
    --fz-color-primary-4: rgb(8, 29, 77); /*mandatory update*/
    --fz-color-primary-5: unset; /*mandatory update - should be darkest*/
    --fz-color-primary-6: unset;
    --fz-color-primary-7: unset;
    --fz-color-primary-8: unset;
    --fz-color-primary-9: unset;
    --fz-color-primary-10: unset;
  
    /*secondary*/
    --fz-color-secondary-1: unset; /*mandatory update - can be unset*/
    --fz-color-secondary-2: unset; /*mandatory update - can be unset*/
    --fz-color-secondary-3: unset; /*mandatory update - can be unset*/
    --fz-color-secondary-4: unset; /*mandatory update - can be unset*/
    --fz-color-secondary-5: unset; /*mandatory update - can be unset*/
    --fz-color-secondary-6: unset;
    --fz-color-secondary-7: unset;
    --fz-color-secondary-8: unset;
    --fz-color-secondary-9: unset;
    --fz-color-secondary-10: unset;
  
    /* tertiary */
    --fz-color-tertiary-1: rgb(150, 234, 170);
    --fz-color-tertiary-2: rgb(219, 65, 223);
    --fz-color-tertiary-3: rgb(95, 214, 255);
    --fz-color-tertiary-4: unset;
    --fz-color-tertiary-5: unset;
    --fz-color-tertiary-6: unset;
    --fz-color-tertiary-7: unset;
    --fz-color-tertiary-8: unset;
    --fz-color-tertiary-9: unset;
    --fz-color-tertiary-10: unset;
  
    /*neutral - best if greyscale gradient*/
    --fz-color-neutral-1: rgb(220, 220, 220); /*not bg-mandatory best as lightest grey/white*/
    --fz-color-neutral-2: rgb(164, 164, 164); /*bg-mandatory*/
    --fz-color-neutral-3: rgb(113, 113, 113); /*bg-mandatory best as medium grey*/
    --fz-color-neutral-4: rgb(71, 71, 71); /*bg-mandatory*/
    --fz-color-neutral-5: rgb(46, 46, 46); /*not bg-mandatory best as darkest grey/black*/
    --fz-color-neutral-6: unset;
    --fz-color-neutral-7: unset;
    --fz-color-neutral-8: unset;
    --fz-color-neutral-9: unset;
    --fz-color-neutral-10: unset;
  
    /* Neutral one-offs */
    --fz-color-neutral-0: rgb(255, 255, 255); /*always white*/
    --fz-color-neutral-1000: rgb(0, 0, 0); /*always black*/
  
    /* Success */
    --fz-color-success-1: rgb(240, 253, 244); /* not editable */
    --fz-color-success-2: rgb(134, 239, 172); /* not editable */
    --fz-color-success-3: rgb(34, 197, 94); /* not editable */
    --fz-color-success-4: rgb(22, 163, 74); /* not editable */
    --fz-color-success-5: rgb(20, 83, 45); /* not editable */
  
    /* Warning */
    --fz-color-warning-1: rgb(255, 251, 235); /* not editable */
    --fz-color-warning-2: rgb(252, 211, 77); /* not editable */
    --fz-color-warning-3: rgb(245, 158, 11); /* not editable */
    --fz-color-warning-4: rgb(217, 119, 6); /* not editable */
    --fz-color-warning-5: rgb(120, 53, 15); /* not editable */
  
    /* Danger */
    --fz-color-danger-1: rgb(254, 242, 242); /* not editable */
    --fz-color-danger-2: rgb(252, 165, 165); /* not editable */
    --fz-color-danger-3: rgb(239, 68, 68); /* not editable */
    --fz-color-danger-4: rgb(220, 38, 38); /* not editable */
    --fz-color-danger-5: rgb(127, 29, 29); /* not editable */
  
    /* Info */
    --fz-color-info-1: rgb(239, 246, 255); /* not editable */
    --fz-color-info-2: rgb(147, 197, 253); /* not editable */
    --fz-color-info-3: rgb(59, 130, 246); /* not editable */
    --fz-color-info-4: rgb(37, 99, 235); /* not editable */
    --fz-color-info-5: rgb(30, 58, 138); /* not editable */
  
    /* Spacings */
    --fz-spacing-5x-small: 0.125rem; /* 2px */
    --fz-spacing-4x-small: 0.25rem; /* 4px */
    --fz-spacing-3x-small: 0.375rem; /* 6px */
    --fz-spacing-2x-small: 0.5rem; /* 8px */
    --fz-spacing-1x-small: 0.625rem; /* 10px */
    --fz-spacing-x-small: 0.75rem; /* 12px */
    --fz-spacing-small: 1rem; /* 16px */
    --fz-spacing-medium: 1.25rem; /* 20px */
    --fz-spacing-large: 1.5rem; /* 24px */
    --fz-spacing-x-large: 2rem; /* 32px */
    --fz-spacing-2x-large: 2.5rem; /* 40px */
    --fz-spacing-3x-large: 3rem; /* 48px */
    --fz-spacing-4x-large: 3.5rem; /* 56px */
    --fz-spacing-5x-large: 4rem; /* 64px */
    --fz-spacing-6x-large: 5rem; /* 80px */
    --fz-spacing-7x-large: 6rem; /* 96px */
  
    /* Weights */
    --fz-weight-thin: 100; /* not editable */
    --fz-weight-light: 300; /* not editable */
    --fz-weight-regular: 400; /* not editable */
    --fz-weight-medium: 500; /* not editable */
    --fz-weight-semi-bold: 600; /* not editable */
    --fz-weight-bold: 700; /* not editable */
    --fz-weight-extra-bold: 800; /* not editable */
    /************************************************
      ===================== Globals ===================
      ************************************************/
    /* Global animations */
    --fz-animation-1-play-state: paused;
    --fz-animation-1-name: fadeInDown;
    --fz-animation-1-duration: 700ms;
    --fz-animation-1-delay: 200ms;
    --fz-animation-1-fill-mode: both;
  
    /* Global shadows */
    --fz-shadow-none: none; /* only for drop down selection */
    --fz-shadow-x-small: 0px 1px 2px rgba(17, 24, 39, 0.06),
      0px 1px 3px rgba(17, 24, 39, 0.1);
    --fz-shadow-small: 0px 2px 4px rgba(17, 24, 39, 0.06),
      0px 4px 6px rgba(17, 24, 39, 0.1);
    --fz-shadow-medium: 0px 10px 15px rgba(17, 24, 39, 0.1),
      0px 4px 6px rgba(17, 24, 39, 0.05);
    --fz-shadow-large: 0px 20px 25px rgba(17, 24, 39, 0.1),
      0px 10px 10px rgba(17, 24, 39, 0.04);
    --fz-shadow-x-large: 0px 25px 50px rgba(17, 24, 39, 0.25);
    --fz-shadow-x-small-top: 0px -1px 2px rgba(17, 24, 39, 0.06),
      0px -1px 3px rgba(17, 24, 39, 0.1);
    --fz-shadow-medium-top: 0px -10px 15px rgba(17, 24, 39, 0.1),
      0px -4px 6px rgba(17, 24, 39, 0.05);
  
    /* Global link colors */
    --fz-link-color: rgb(59, 130, 246);
    --fz-link-color-hover: rgb(37, 99, 235);
    --fz-link-color-visited: var(--fz-link-color);
    --fz-link-color-actived: var(--fz-link-color);
    --fz-link-decoration: none;
    --fz-link-decoration-hover: underline;
  
    /* Global Border radius sizes */
    --fz-border-radius-none: 0;
    --fz-border-radius-x-small: 8px;
    --fz-border-radius-small: 12px;
    --fz-border-radius-medium: 16px;
    --fz-border-radius-large: 24px;
    --fz-border-radius-x-large: 14px;
    --fz-border-radius-circle: 50%;
    --fz-border-radius-pill: 9999px;
  
    /* Fonts */
    /*font family*/
    --fz-font-family-1: "Poppins", sans-serif; /*mandatory update*/
    --fz-font-family-2: "Poppins", sans-serif; /*mandatory update*/
    --fz-font-family-3: "Poppins", sans-serif; /*mandatory update*/
  
    /* this will change all spacing in the page (i.e) */
    --fz-base-font-size: 16px; /* not editable */
  
  /************************************************
    ===================== headings ==================
    ************************************************/
    /* global headings */
    --fz-heading-1-font-size-factor: 1;
    --fz-heading-1-line-height-factor: 1;
    --fz-heading-1-letter-spacing-factor: 1;
  
    --fz-heading-2-font-size-factor: 1;
    --fz-heading-2-line-height-factor: 1;
    --fz-heading-2-letter-spacing-factor: 1;
  
    --fz-heading-3-font-size-factor: 1;
    --fz-heading-3-line-height-factor: 1;
    --fz-heading-3-letter-spacing-factor: 1;
  
    --fz-heading-4-font-size-factor: 1;
    --fz-heading-4-line-height-factor: 1;
    --fz-heading-4-letter-spacing-factor: 1;
  
    --fz-heading-5-font-size-factor: 1;
    --fz-heading-5-line-height-factor: 1;
    --fz-heading-5-letter-spacing-factor: 1;
  
    --fz-heading-6-font-size-factor: 1;
    --fz-heading-6-line-height-factor: 1;
    --fz-heading-6-letter-spacing-factor: 1;
  
    --fz-paragraph-1-font-size-factor: 1;
    --fz-paragraph-1-line-height-factor: 1;
    --fz-paragraph-1-letter-spacing-factor: 1;
  
    --fz-paragraph-2-font-size-factor: 1;
    --fz-paragraph-2-line-height-factor: 1;
    --fz-paragraph-2-letter-spacing-factor: 1;
  
    --fz-paragraph-3-font-size-factor: 1;
    --fz-paragraph-3-line-height-factor: 1;
    --fz-paragraph-3-letter-spacing-factor: 1;
  
    --fz-system-text-1-font-size-factor: 1;
    --fz-system-text-1-line-height-factor: 1;
    --fz-system-text-1-letter-spacing-factor: 1;
  
    /*text styles*/
    --fz-heading-1-color: var(--fz-color-primary-4);
    --fz-heading-1-weight: var(--fz-weight-semibold);
    --fz-heading-1-font-family: var(--fz-font-family-1);
    --fz-heading-1-font-size: calc(
      4rem * var(--fz-heading-1-font-size-factor)
    ); /* 64px */
    --fz-heading-1-letter-spacing: calc(
      -0.03em * var(--fz-heading-1-letter-spacing-factor)
    );
    --fz-heading-1-line-height: calc(
      1.2 * var(--fz-heading-1-line-height-factor)
    );
  
    --fz-heading-2-color: var(--fz-color-primary-4);
    --fz-heading-2-weight: var(--fz-weight-semibold);
    --fz-heading-2-font-family: var(--fz-font-family-1);
    --fz-heading-2-font-size: calc(
      3rem * var(--fz-heading-2-font-size-factor)
    ); /* 48px */
    --fz-heading-2-letter-spacing: calc(
      0.001em * var(--fz-heading-2-letter-spacing-factor)
    );
    --fz-heading-2-line-height: calc(
      1.4 * var(--fz-heading-2-line-height-factor)
    );
  
    --fz-heading-3-color: var(--fz-color-primary-4);
    --fz-heading-3-weight: var(--fz-weight-medium);
    --fz-heading-3-font-family: var(--fz-font-family-1);
    --fz-heading-3-font-size: calc(
      2.5rem * var(--fz-heading-3-font-size-factor)
    ); /* 40px */
    --fz-heading-3-line-height: calc(
      1.4 * var(--fz-heading-3-line-height-factor)
    );
    --fz-heading-3-letter-spacing: calc(
      normal * var(--fz-heading-3-letter-spacing-factor)
    );
  
    --fz-heading-4-color: var(--fz-color-primary-4);
    --fz-heading-4-weight: var(--fz-weight-medium);
    --fz-heading-4-font-family: var(--fz-font-family-1);
    --fz-heading-4-font-size: calc(
      2.25rem * var(--fz-heading-4-font-size-factor)
    ); /* 36px */
    --fz-heading-4-line-height: calc(
      1.4 * var(--fz-heading-4-line-height-factor)
    );
    --fz-heading-4-letter-spacing: calc(
      normal * var(--fz-heading-4-letter-spacing-factor)
    );
  
    --fz-heading-5-color: var(--fz-color-primary-4);
    --fz-heading-5-weight: var(--fz-weight-regular);
    --fz-heading-5-font-family: var(--fz-font-family-1);
    --fz-heading-5-font-size: calc(
      1.5rem * var(--fz-heading-5-font-size-factor)
    ); /* 24px */
    --fz-heading-5-line-height: calc(
      1.5 * var(--fz-heading-5-line-height-factor)
    );
    --fz-heading-5-letter-spacing: calc(
      normal * var(--fz-heading-5-letter-spacing-factor)
    );
  
    --fz-heading-6-color: var(--fz-color-primary-4);
    --fz-heading-6-weight: var(--fz-weight-regular);
    --fz-heading-6-font-family: var(--fz-font-family-1);
    --fz-heading-6-font-size: calc(
      1.25rem * var(--fz-heading-6-font-size-factor)
    ); /* 20px */
    --fz-heading-6-line-height: calc(
      1.5 * var(--fz-heading-6-line-height-factor)
    );
    --fz-heading-6-letter-spacing: calc(
      normal * var(--fz-heading-6-letter-spacing-factor)
    );
  
    --fz-paragraph-1-color: var(--fz-color-primary-4);
    --fz-paragraph-1-weight: var(--fz-weight-regular);
    --fz-paragraph-1-font-family: var(--fz-font-family-1);
    --fz-paragraph-1-font-size: calc(
      1.125rem * var(--fz-paragraph-1-font-size-factor)
    ); /* 18px */
    --fz-paragraph-1-line-height: calc(
      1.5 * var(--fz-paragraph-1-line-height-factor)
    );
    --fz-paragraph-1-letter-spacing: calc(
      normal * var(--fz-paragraph-1-letter-spacing-factor)
    );
  
    --fz-paragraph-2-color: var(--fz-color-primary-4);
    --fz-paragraph-2-weight: var(--fz-weight-regular);
    --fz-paragraph-2-font-family: var(--fz-font-family-1);
    --fz-paragraph-2-font-size: calc(
      1rem * var(--fz-paragraph-2-font-size-factor)
    ); /* 16px */
    --fz-paragraph-2-line-height: calc(
      1.5 * var(--fz-paragraph-2-line-height-factor)
    );
    --fz-paragraph-2-letter-spacing: calc(
      normal * var(--fz-paragraph-2-letter-spacing-factor)
    );
  
    --fz-paragraph-3-color: var(--fz-color-primary-4);
    --fz-paragraph-3-weight: var(--fz-weight-regular);
    --fz-paragraph-3-font-family: var(--fz-font-family-1);
    --fz-paragraph-3-font-size: calc(
      0.875rem * var(--fz-paragraph-3-font-size-factor)
    ); /* 14px */
    --fz-paragraph-3-line-height: calc(
      1.5 * var(--fz-paragraph-3-line-height-factor)
    );
    --fz-paragraph-3-letter-spacing: calc(
      normal * var(--fz-paragraph-3-letter-spacing-factor)
    );
  
    --fz-system-text-1-color: var(--fz-color-primary-4);
    --fz-system-text-1-weight: var(--fz-weight-regular);
    --fz-system-text-1-font-family: var(--fz-font-family-1);
    --fz-system-text-1-font-size: calc(
      0.75rem * var(--fz-system-text-1-font-size-factor)
    ); /* 12px */
    --fz-system-text-1-line-height: calc(
      1.5 * var(--fz-system-text-1-line-height-factor)
    );
    --fz-system-text-1-letter-spacing: calc(
      0.04em * var(--fz-system-text-1-letter-spacing-factor)
    );
  
   /************************************************
      ===================== Buttons ===================
      ************************************************/
    /* global for buttons */
    --fz-btn-global-font-family: var(--fz-font-family-1);
    --fz-btn-global-font-size: var(
      --fz-base-font-size
    ); /* not editable - changes per button size*/
    --fz-btn-global-weight: 700; /* bold - not editable */
    --fz-btn-global-line-height: 1em; /* not editable */
    --fz-btn-global-letter-spacing: normal; /* not editable */
    --fz-btn-global-padding: 0.95em 2em; /* not editable */
    --fz-btn-global-disabled-bg: rgb(243, 244, 246); /* not editable */
    --fz-btn-global-disabled-color: rgb(209, 213, 219); /* not editable */
    --fz-btn-global-disabled-border-color: var(
      --fz-btn-global-disabled-bg
    ); /* not editable */
    --fz-btn-global-animation-transition: background 200ms ease-in-out; /* not editable */
    --fz-btn-global-focus-bg: var(--fz-color-primary-3); /* not editable */
    --fz-btn-global-focus-color: var(--fz-color-neutral-0); /* not editable */
    --fz-btn-global-focus-border-color: var(
      --fz-color-neutral-0
    ); /* not editable */
    --fz-btn-global-shadow: var(--fz-shadow-x-small);
    --fz-btn-global-border-radius: var(--fz-border-radius-pill); /*set default button corner type*/
    --fz-btn-global-border-width: 2px; /*set default button outline width*/
    --fz-btn-global-border: none;
  
    /* Primary button - meant for use on light background */
    --flz-primary: "on"; /* mandatory on */
    --fz-btn-primary-bg: var(--fz-color-tertiary-3);
    --fz-btn-primary-color: var(--fz-color-primary-4);
    --fz-btn-primary-border: none;
    --fz-btn-primary-hover-bg: var(--fz-color-primary-4);
    --fz-btn-primary-hover-color: var(--fz-color-neutral-0);
    --fz-btn-primary-hover-border: none;
    --fz-btn-primary-padding: var(--fz-btn-global-padding); /* not editable */
    --fz-btn-primary-border-radius: var(
      --fz-btn-global-border-radius
    ); /* not editable */
  
    /* Secondary button - meant for use on dark background */
    --flz-secondary: "on"; /* mandatory on */
    --fz-btn-secondary-bg: var(--fz-color-neutral-0);
    --fz-btn-secondary-color: var(--fz-color-primary-4);
    --fz-btn-secondary-border: none;
    --fz-btn-secondary-hover-bg: var(--fz-color-tertiary-1);
    --fz-btn-secondary-hover-color: var(--fz-color-primary-4);
    --fz-btn-secondary-hover-border:none;
    --fz-btn-secondary-padding: var(--fz-btn-global-padding); /* not editable */
    --fz-btn-secondary-border-radius: var(
      --fz-btn-global-border-radius
    ); /* not editable */
  
    /* Tertiary button */
    --flz-custom-1: "off";
    --fz-btn-custom-1-bg: none;
    --fz-btn-custom-1-color: var(--fz-color-primary-4);
    --fz-btn-custom-1-border: var(--fz-btn-global-border-width) solid
      var(--fz-color-primary-4);
    --fz-btn-custom-1-hover-bg: var(--fz-color-primary-4);
    --fz-btn-custom-1-hover-color: var(--fz-color-neutral-0);
    --fz-btn-custom-1-hover-border: var(--fz-btn-global-border-width) solid
      var(--fz-color-primary-4);
    --fz-btn-custom-1-padding: var(--fz-btn-global-padding); /* not editable */
    --fz-btn-custom-1-border-radius: var(
      --fz-btn-global-border-radius
    ); /* not editable */
  
    /* forth button */
    --flz-custom-2: "off";
    --fz-btn-custom-2-bg: none;
    --fz-btn-custom-2-color: var(--fz-color-tertiary-1);
    --fz-btn-custom-2-border: var(--fz-btn-global-border-width) solid
      var(--fz-color-primary-3);
    --fz-btn-custom-2-hover-bg: var(--fz-color-primary-3);
    --fz-btn-custom-2-hover-color: var(--fz-color-neutral-0);
    --fz-btn-custom-2-hover-border: var(--fz-btn-global-border-width) solid
      var(--fz-color-primary-3);
    --fz-btn-custom-2-padding: var(--fz-btn-global-padding); /* not editable */
    --fz-btn-custom-2-border-radius: var(
      --fz-btn-global-border-radius
    ); /* not editable */
  
    /* Curved button */
    --flz-curved: "off";
    --fz-btn-curved-bg: var(--fz-color-primary-1);
    --fz-btn-curved-color: var(--fz-color-primary-5);
    --fz-btn-curved-border: var(--fz-btn-global-border-width) solid
      var(--fz-color-primary-1);
    --fz-btn-curved-hover-bg: var(--fz-color-primary-5);
    --fz-btn-curved-hover-color: var(--fz-color-primary-1);
    --fz-btn-curved-hover-border: var(--fz-btn-global-border-width) solid
      var(--fz-color-primary-5);
    --fz-btn-curved-padding: 0.5em 1em; /* not editable */
    --fz-btn-curved-border-radius: var(
      --fz-border-radius-pill
    ); /* not editable */
  
    /* link button - meant for use on light background */
    --flz-link: "on"; /* mandatory on */
    --fz-btn-link-bg: none;
    --fz-btn-link-color: var(--fz-color-tertiary-3);
    --fz-btn-link-border: none;
    --fz-btn-link-hover-bg: none;
    --fz-btn-link-hover-color: var(--fz-color-neutral-2);
    --fz-btn-link-hover-border: none;
    --fz-btn-link-padding: none; /* not editable */
    --fz-btn-link-border-radius: var(
      --fz-btn-global-border-radius
    ); /* not editable */
    --fz-btn-link-decoration: none;
    --fz-btn-link-decoration-hover: none;
  
    /* link 2 button - meant for use on dark background */
    --flz-link-2: "on"; /* mandatory on */
    --fz-btn-link-2-bg: none;
    --fz-btn-link-2-color: var(--fz-color-neutral-0);
    --fz-btn-link-2-border: none;
    --fz-btn-link-2-hover-bg: none;
    --fz-btn-link-2-hover-color: var(--fz-color-tertiary-4);
    --fz-btn-link-2-hover-border: none;
    --fz-btn-link-2-padding: none; /* not editable */
    --fz-btn-link-2-border-radius: var(
      --fz-btn-global-border-radius
    ); /* not editable */
    --fz-btn-link-2-decoration: none;
    --fz-btn-link-2-decoration-hover: none;
  
    /* circle button - share button */
    --flz-circle: "on"; /* mandatory on */
    --fz-btn-circle-bg: var(--fz-color-tertiary-3);
    --fz-btn-circle-color: var(--fz-color-primary-4);
    --fz-btn-circle-border: none;
    --fz-btn-circle-hover-bg: var(--fz-color-primary-4);
    --fz-btn-circle-hover-color: var(--fz-color-neutral-0);
    --fz-btn-circle-hover-border: none;
    --fz-btn-circle-padding: var(--fz-btn-global-padding); /* not editable */
    --fz-btn-circle-border-radius: 50%; /* not editable */
  
    /************************************************
        ====================   Tabs   ===================
        ************************************************/
    /* tab-1 - classic content section tab */
    --fz-tabs-1-shadow: var(--fz-shadow-none);
    --fz-tabs-1-border-radius: var(--fz-border-radius-none)
      var(--fz-border-radius-none) var(--fz-border-radius-none)
      var(--fz-border-radius-none);
    --fz-tabs-1-bg: none;
    --fz-tabs-1-bg-hover: none;
    --fz-tabs-1-bg-selected: none;
    --fz-tabs-1-color: var(--fz-color-neutral-3);
    --fz-tabs-1-color-hover: var(--fz-color-primary-3);
    --fz-tabs-1-color-selected: var(--fz-color-primary-3);
    --fz-tabs-1-border-color: none;
    --fz-tabs-1-border-color-hover: none;
    --fz-tabs-1-border-color-selected: var(--fz-color-primary-3);
    --fz-tabs-1-border-width: 2px;
    --fz-tabs-1-border-top: none;
    --fz-tabs-1-border-right: none;
    --fz-tabs-1-border-bottom: none;
    --fz-tabs-1-border-left: none;
    --fz-tabs-1-border-hover-top: none;
    --fz-tabs-1-border-hover-right: none;
    --fz-tabs-1-border-hover-bottom: none;
    --fz-tabs-1-border-hover-left: none;
    --fz-tabs-1-border-selected-top: none;
    --fz-tabs-1-border-selected-right: none;
    --fz-tabs-1-border-selected-bottom: var(--fz-tabs-1-border-width) solid
      var(--fz-tabs-1-color-selected);
    --fz-tabs-1-border-selected-left: none;
  
    /* tab-2 - accent content section tab */
    --fz-tabs-2-shadow: var(--fz-shadow-none);
    --fz-tabs-2-border-radius: var(--fz-border-radius-pill);
    --fz-tabs-2-bg: none;
    --fz-tabs-2-bg-hover: var(--fz-color-primary-1);
    --fz-tabs-2-bg-selected: var(--fz-color-primary-3);
    --fz-tabs-2-color: var(--fz-color-neutral-3);
    --fz-tabs-2-color-hover: var(--fz-color-neutral-3);
    --fz-tabs-2-color-selected: var(--fz-color-neutral-0);
    --fz-tabs-2-border-color: none;
    --fz-tabs-2-border-color-hover: none;
    --fz-tabs-2-border-color-selected: none;
    --fz-tabs-2-border-width: 0;
    --fz-tabs-2-border-top: none;
    --fz-tabs-2-border-right: none;
    --fz-tabs-2-border-bottom: none;
    --fz-tabs-2-border-left: none;
    --fz-tabs-2-border-hover-top: none;
    --fz-tabs-2-border-hover-right: none;
    --fz-tabs-2-border-hover-bottom: none;
    --fz-tabs-2-border-hover-left: none;
    --fz-tabs-2-border-selected-top: none;
    --fz-tabs-2-border-selected-right: none;
    --fz-tabs-2-border-selected-bottom: none;
    --fz-tabs-2-border-selected-left: none;
  
    /************************************************
      ====================  Tiles  ===================
      ************************************************/
    --fz-tile-1-shadow: var(--fz-shadow-small);
    --fz-tile-1-border-radius: var(--fz-border-radius-medium);
    --fz-tile-1-social-icons-color: var(--fz-color-primary-4);
    --fz-tile-1-icon-type-color: var(
      --fz-color-neutral-2
    ); /* also the read more / less button on mobile */
    --fz-tile-1-title-color: var(--fz-color-neutral-5);
    --fz-tile-1-bg: var(--fz-color-neutral-0);
    --fz-tile-1-hover-color: var(
      --fz-color-neutral-0
    ); /* on mobile the color should be like description color */
    --fz-tile-1-hover-bg: var(--fz-color-primary-4);
    --fz-tile-1-font-weight: var(--fz-weight-semi-bold);
    --fz-tile-1-title-font-family: var(--fz-font-family-1);
    --fz-tile-1-title-font-size: calc(
      1rem * var(--fz-paragraph-2-font-size-factor)
    );
    --fz-tile-1-description-font-family: var(--fz-tile-1-title-font-family);
    --fz-tile-1-description-font-size: var(
      --fz-tile-1-title-font-size,
      --fz-paragraph-2-font-size
    );
    --fz-tile-1-description-font-weight: var(--fz-paragraph-2-weight);
  
    /************************************************
      ====================  images  ===================
      ************************************************/
    --fz-image-1-shadow: var(--fz-shadow-none);
    --fz-image-1-boarder-radius: var(--fz-border-radius-medium);
    --fz-image-1-border: none;
  
    /************************************************
      ==================== sections ===================
      ************************************************/
    --fz-section-height-short: 26.25rem; /* 420px not editable */
    --fz-section-height-medium: 36.875rem; /* 590px not editable */
    --fz-section-height-tall: 49.25rem; /* 788px not editable */
    --fz-section-bg: transparent; /* not editable */
    --fz-section-padding-step: 10px; /* not editable - padding will we in multiplies of this value */
  
    /************************************************
      ========== checkboxes & radio btns =============
      ************************************************/
    --fz-checkbox-radio-corner-radius: var(--fz-border-radius-x-small);
    --fz-checkbox-radio-color-selected: var(--fz-color-info-3);
    --fz-checkbox-radio-color-unselected: var(--fz-color-neutral-0);
    --fz-checkbox-radio-color-selected-hover: var(--fz-color-info-4);
    --fz-checkbox-radio-color-unselected-hover: var(--fz-color-neutral-2); /*updated*/
    --fz-checkbox-radio-border-color: var(--fz-color-neutral-3);
  
    /************************************************
      ================ item viewer ====================
      ************************************************/
    --fz-item-viewer-width: calc(100vw * 0.6); /* not editable */
    --fz-item-viewer-width-mobile: 100vw; /* not editable */
    --fz-item-viewer-header-height: 50px; /* not editable */
  
    /************************************************
      ================ outline ====================
      ************************************************/
    --fz-outline-btn-focus: 2px solid var(--fz-color-info-3);
    --fz-outline-btn-focus-offset: var(--fz-spacing-5x-small);
  
    /************************************************
      ====================   Article   ================
      ************************************************/
    --fz-article-title-color: var(--fz-heading-2-color);
    --fz-article-title-weight: var(--fz-heading-2-weight);
    --fz-article-title-font-family: var(--fz-heading-2-font-family);
    --fz-article-title-font-size: var(--fz-heading-2-font-size);
    --fz-article-title-letter-spacing: var(--fz-heading-2-letter-spacing);
    --fz-article-title-line-height: var(--fz-heading-2-line-height);
  
    --fz-article-heading-color: var(--fz-heading-4-color);
    --fz-article-heading-weight: var(--fz-heading-4-weight);
    --fz-article-heading-font-family: var(--fz-heading-4-font-family);
    --fz-article-heading-font-size: var(--fz-heading-4-font-size);
    --fz-article-heading-line-height: var(--fz-heading-4-line-height);
    --fz-article-heading-letter-spacing: var(--fz-heading-4-letter-spacing);
  
    --fz-aricle-subheading-color: var(--fz-heading-5-color);
    --fz-aricle-subheading-weight: var(--fz-heading-5-weight);
    --fz-aricle-subheading-font-family: var(--fz-heading-5-font-family);
    --fz-aricle-subheading-font-size: var(--fz-heading-5-font-size);
    --fz-aricle-subheading-line-height: var(--fz-heading-5-line-height);
    --fz-aricle-subheading-letter-spacing: var(--fz-heading-5-letter-spacing);
  
    --fz-article-normal-color: var(--fz-paragraph-1-color);
    --fz-article-normal-weight: var(--fz-paragraph-1-weight);
    --fz-article-normal-font-family: var(--fz-paragraph-1-font-family);
    --fz-article-normal-font-size: var(--fz-paragraph-1-font-size);
    --fz-article-normal-line-height: var(--fz-paragraph-1-line-height);
    --fz-article-normal-letter-spacing: var(--fz-paragraph-1-letter-spacing);
  
    --fz-article-quote-color: var(--fz-heading-5-color);
    --fz-article-quote-weight: var(--fz-heading-5-weight);
    --fz-article-quote-font-family: var(--fz-heading-5-font-family);
    --fz-article-quote-font-size: var(--fz-heading-5-font-size);
    --fz-article-quote-line-height: var(--fz-heading-5-line-height);
    --fz-article-quote-letter-spacing: var(--fz-heading-5-letter-spacing);
  
    --fz-aricle-author-color: var(--fz-paragraph-2-color);
    --fz-aricle-author-weight: var(--fz-paragraph-2-weight);
    --fz-aricle-author-font-family: var(--fz-paragraph-2-font-family);
    --fz-aricle-author-font-size: var(--fz-paragraph-2-font-size);
    --fz-aricle-author-line-height: var(--fz-paragraph-2-line-height);
    --fz-aricle-author-letter-spacing: var(--fz-paragraph-2-letter-spacing);
  
    --fz-article-info-color: var(--fz-system-text-1-color);
    --fz-article-info-weight: var(--fz-system-text-1-weight);
    --fz-article-info-font-family: var(--fz-system-text-1-font-family);
    --fz-article-info-font-size: var(--fz-system-text-1-font-size);
    --fz-article-info-line-height: var(--fz-system-text-1-line-height);
    --fz-article-info-letter-spacing: var(--fz-system-text-1-letter-spacing);
  
    /************************************************
      ====================   Forms   ==================
      ************************************************/
    --fz-form-title-color: var(--fz-paragraph-1-color);
    --fz-form-title-weight: var(--fz-paragraph-1-weight);
    --fz-form-title-font-family: var(--fz-paragraph-1-font-family);
    --fz-form-title-font-size: var(--fz-paragraph-1-font-size);
    --fz-form-title-line-height: var(--fz-paragraph-1-line-height);
    --fz-form-title-letter-spacing: var(--fz-paragraph-1-letter-spacing);
  
    --fz-form-label-color: var(--fz-system-text-1-color);
    --fz-form-label-weight: var(--fz-system-text-1-weight);
    --fz-form-label-font-family: var(--fz-system-text-1-font-family);
    --fz-form-label-font-size: var(--fz-system-text-1-font-size);
    --fz-form-label-line-height: var(--fz-system-text-1-line-height);
    --fz-form-label-letter-spacing: var(--fz-system-text-1-letter-spacing);
  
    --fz-form-privacy-msg-color: var(--fz-system-text-1-color);
    --fz-form-privacy-msg-weight: var(--fz-system-text-1-weight);
    --fz-form-privacy-msg-font-family: var(--fz-system-text-1-font-family);
    --fz-form-privacy-msg-font-size: var(--fz-system-text-1-font-size);
    --fz-form-privacy-msg-line-height: var(--fz-system-text-1-line-height);
    --fz-form-privacy-msg-letter-spacing: var(--fz-system-text-1-letter-spacing);
  
    --fz-form-input-border: 1px solid var(--fz-system-text-1-color);
    --fz-form-input-border-hover: 1px solid var(--fz-system-text-1-color);
    --fz-form-input-border-focus: 1px solid var(--fz-color-info-3);
  
    --fz-form-input-bg: var(--fz-color-neutral-0);
    --fz-form-input-bg-hover: var(--fz-color-neutral-0);
    --fz-form-input-bg-focus: var(--fz-color-neutral-0);
  
    /* already connected */
    --fz-form-placeholder-color: rgba(0, 0, 0, 0.6);
    --fz-form-input-color: var(--fz-color-neutral-1000);
  
    --fz-form-bg: var(--fz-color-neutral-0);
    --fz-form-accent-color: var(--fz-color-primary-3);
  }
  
  /* PLEASE NOTE - the order is important. do not change.
  the factors are a little counter intuitive the start from big and go to small */
  /* this is for above 1536px */
  @media screen and (min-width: 1536px) {
    :root,
    :host {
      --fz-heading-1-font-size-factor: 1;
      --fz-heading-1-line-height-factor: 1;
      --fz-heading-1-letter-spacing-factor: 1;
  
      --fz-heading-2-font-size-factor: 1;
      --fz-heading-2-line-height-factor: 1;
      --fz-heading-2-letter-spacing-factor: 1;
  
      --fz-heading-3-font-size-factor: 1;
      --fz-heading-3-line-height-factor: 1;
      --fz-heading-3-letter-spacing-factor: 1;
  
      --fz-heading-4-font-size-factor: 1;
      --fz-heading-4-line-height-factor: 1;
      --fz-heading-4-letter-spacing-factor: 1;
  
      --fz-heading-5-font-size-factor: 1;
      --fz-heading-5-line-height-factor: 1;
      --fz-heading-5-letter-spacing-factor: 1;
  
      --fz-heading-6-font-size-factor: 1;
      --fz-heading-6-line-height-factor: 1;
      --fz-heading-6-letter-spacing-factor: 1;
  
      --fz-paragraph-1-font-size-factor: 1;
      --fz-paragraph-1-line-height-factor: 1;
      --fz-paragraph-1-letter-spacing-factor: 1;
  
      --fz-paragraph-2-font-size-factor: 1;
      --fz-paragraph-2-line-height-factor: 1;
      --fz-paragraph-2-letter-spacing-factor: 1;
  
      --fz-paragraph-3-font-size-factor: 1;
      --fz-paragraph-3-line-height-factor: 1;
      --fz-paragraph-3-letter-spacing-factor: 1;
  
      --fz-system-text-1-font-size-factor: 1;
      --fz-system-text-1-line-height-factor: 1;
      --fz-system-text-1-letter-spacing-factor: 1;
    }
  }
  
  /* desktop sizes - in headings section */
  
  /* for small screen (640px - 1024px) */
  @media screen and (max-width: 1024px) {
    :root,
    :host {
      --fz-heading-1-font-size-factor: 0.8;
      --fz-heading-1-line-height-factor: 1;
      --fz-heading-1-letter-spacing-factor: 1;
  
      --fz-heading-2-font-size-factor: 0.9;
      --fz-heading-2-line-height-factor: 1;
      --fz-heading-2-letter-spacing-factor: 1;
  
      --fz-heading-3-font-size-factor: 1;
      --fz-heading-3-line-height-factor: 1;
      --fz-heading-3-letter-spacing-factor: 1;
  
      --fz-heading-4-font-size-factor: 1;
      --fz-heading-4-line-height-factor: 1;
      --fz-heading-4-letter-spacing-factor: 1;
  
      --fz-heading-5-font-size-factor: 1;
      --fz-heading-5-line-height-factor: 1;
      --fz-heading-5-letter-spacing-factor: 1;
  
      --fz-heading-6-font-size-factor: 1;
      --fz-heading-6-line-height-factor: 1;
      --fz-heading-6-letter-spacing-factor: 1;
  
      --fz-paragraph-1-font-size-factor: 1;
      --fz-paragraph-1-line-height-factor: 1;
      --fz-paragraph-1-letter-spacing-factor: 1;
  
      --fz-paragraph-2-font-size-factor: 1;
      --fz-paragraph-2-line-height-factor: 1;
      --fz-paragraph-2-letter-spacing-factor: 1;
  
      --fz-paragraph-3-font-size-factor: 1;
      --fz-paragraph-3-line-height-factor: 1;
      --fz-paragraph-3-letter-spacing-factor: 1;
  
      --fz-system-text-1-font-size-factor: 1;
      --fz-system-text-1-line-height-factor: 1;
      --fz-system-text-1-letter-spacing-factor: 1;
    }
  }
  
  /* for mobile to 640px (0 - 640px) */
  @media screen and (max-width: 640px) {
    :root,
    :host {
      --fz-heading-1-font-size-factor: 0.65;
      --fz-heading-1-line-height-factor: 1;
      --fz-heading-1-letter-spacing-factor: 1;
  
      --fz-heading-2-font-size-factor: 0.75;
      --fz-heading-2-line-height-factor: 1;
      --fz-heading-2-letter-spacing-factor: 1;
  
      --fz-heading-3-font-size-factor: 1;
      --fz-heading-3-line-height-factor: 1;
      --fz-heading-3-letter-spacing-factor: 1;
  
      --fz-heading-4-font-size-factor: 1;
      --fz-heading-4-line-height-factor: 1;
      --fz-heading-4-letter-spacing-factor: 1;
  
      --fz-heading-5-font-size-factor: 1;
      --fz-heading-5-line-height-factor: 1;
      --fz-heading-5-letter-spacing-factor: 1;
  
      --fz-heading-6-font-size-factor: 1;
      --fz-heading-6-line-height-factor: 1;
      --fz-heading-6-letter-spacing-factor: 1;
  
      --fz-paragraph-1-font-size-factor: 1;
      --fz-paragraph-1-line-height-factor: 1;
      --fz-paragraph-1-letter-spacing-factor: 1;
  
      --fz-paragraph-2-font-size-factor: 1;
      --fz-paragraph-2-line-height-factor: 1;
      --fz-paragraph-2-letter-spacing-factor: 1;
  
      --fz-paragraph-3-font-size-factor: 1;
      --fz-paragraph-3-line-height-factor: 1;
      --fz-paragraph-3-letter-spacing-factor: 1;
  
      --fz-system-text-1-font-size-factor: 1;
      --fz-system-text-1-line-height-factor: 1;
      --fz-system-text-1-letter-spacing-factor: 1;
    }
  }