source-for-widget-for-funding

Link to article: source-for-widget-for-funding.

Module Styles

• 
  /* Black Highlighter Theme Typefaces */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,900;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
  
  /* GoFundMe Theme Typefaces */
  @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap');
  
  /* IndieGoGo Theme Typefaces */
  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,900;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;900&display=swap');
  
  /* Kickstarter Theme Typefaces */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap');
  
  /* Ko-Fi Theme Typefaces */
  @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
  
  :root {
  
  /* Widget Typefaces */
  --fr-title-font: verdana, arial, helvetica, sans-serif;
  --fr-body-font: verdana, arial, helvetica, sans-serif;
  --fr-logo-font: verdana, arial, helvetica, sans-serif;
  
  /* BHL Title Typeface, used for the title link when BHL= true */
  
  /* Widget Base Colors */
  --fr-widget-bg-color: 255, 255, 255;
  --fr-widget-border-color: 102, 0, 0;
  
  /* Title Link Text Colors */
  --fr-title-color: 187, 0, 17; /* hsv: 355°, 100%, 73% */
  --fr-title-hover: 212, 0, 18; /* hsv: 355°, 100%, 83% */
  
  /* Title Button Colors when Inactive, when title_button= true */
  --fr-title-btn-color: 187, 0, 17;
  --fr-title-btn-color-border: 102, 0, 0;
  --fr-title-btn-color-bg1: 255, 240, 240;
  --fr-title-btn-color-bg2: 247, 233, 236;
  --fr-title-btn-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-color-bg1)) 40%,
    rgb(var(--fr-title-btn-color-bg2)) 140%);
  
  /* Title Button Colors when Hovered Over, when title_button= true */
  --fr-title-btn-hover: 212, 0, 18;
  --fr-title-btn-hover-border: 102, 0, 0;
  --fr-title-btn-hover-bg1: 204, 192, 192;
  --fr-title-btn-hover-bg2: 196, 185, 188;
  --fr-title-btn-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-hover-bg1)) 40%,
    rgb(var(--fr-title-btn-hover-bg2)) 140%);
  
  /* Title Button Sliding Hover Overlay, when title_button= true & shape= BHL */
  --fr-title-btn-accent: 133, 0, 5;
  
  /* Progress Bar Colors */
  --fr-progress-bar-color: 102, 0, 0;
  --fr-progress-bar-bg-color: 230, 246, 239;
  
  /* Text Color of the current Amount Raised */
  --fr-progress-text-color: 102, 0, 0;
  
  /* Text Color of the rest of the Progress Message */
  --fr-progress-goal-color: 150, 150, 150;
  
  /* Text Color of the Description */
  --fr-description-color: 50, 50, 50;
  
  /* Donate Button Colors when Inactive */
  --fr-donate-color: 170, 0, 17; /* hsv: 354°, 100%, 67% */
  --fr-donate-color-border: 102, 0, 0;
  --fr-donate-color-bg1: 255, 240, 240; /* hsv: 0°, 6%, 100% */
  --fr-donate-color-bg2: 247, 233, 236; /* hsv: 345°, 6%, 97% */
  --fr-donate-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-color-bg1)) 40%,
    rgb(var(--fr-donate-color-bg2)) 140%);
    
  /* Donate Button Colors when Hovered Over */
  --fr-donate-hover: 196, 0, 20;  /* hsv: 354°, 100%, 77% */
  --fr-donate-hover-border: 102, 0, 0;
  --fr-donate-hover-bg1: 204, 192, 192; /* hsv: 0°, 6%, 80% */
  --fr-donate-hover-bg2: 196, 185, 188; /* hsv: 345°, 6%, 77% */
  --fr-donate-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-hover-bg1)) 40%,
    rgb(var(--fr-donate-hover-bg2)) 140%);
  
  /* Donate Button Sliding Hover Overlay, when shape= BHL */
  --fr-donate-accent: 133, 0, 5;
  
  /* Text Color of the "Logo" next to the Donate Button */
  --fr-logo-color: 0, 73, 119;
  
  }
  
  /* Black Highlighter Theme Color Scheme, 
  with fallback values based on the core BHL color scheme. */
  
  .fr-widget.theme-fr-Black-Highlighter,
  .fr-widget.theme-fr-Black-highlighter,
  .fr-widget.theme-fr-BLACK-HIGHLIGHTER,
  .fr-widget.theme-fr-black-highlighter,
  .fr-widget.theme-fr-BlackHighlighter,
  .fr-widget.theme-fr-Blackhighlighter,
  .fr-widget.theme-fr-BLACKHIGHLIGHTER,
  .fr-widget.theme-fr-blackhighlighter,
  .fr-widget.theme-fr-BHL,
  .fr-widget.theme-fr-Bhl,
  .fr-widget.theme-fr-bhl {
  --fr-title-font: var(--title-font, Inter), Poppins, Franklin Gothic Medium, Franklin Gothic, 
      ITC Franklin Gothic, "Helvetica Neue", "Helvetica", Arial, sans-serif;
  --fr-body-font: var(--body-font, Inter), Raleway, Arimo, Verdana, Geneva, "Helvetica Neue", 
      "Helvetica", Arial, sans-serif;
  --fr-logo-font: Orbitron, Verdana, Geneva, sans-serif;
  --fr-widget-bg-color: var(--swatch-secondary-color, 245, 245, 245), .25;
  --fr-widget-border-color: var(--swatch-tertiary-color, 170, 170, 170);
  --fr-title-color: var(--swatch-text-dark, 40, 40, 40);
  --fr-title-hover: var(--swatch-text-general, 60, 60, 60);
  --fr-title-btn-color: var(--swatch-menutxt-general-color, 30, 30, 30);
  --fr-title-btn-color-border: var(--swatch-border-color, 30, 30, 30);
  --fr-title-btn-color-bg1: var(--swatch-primary-darker, 100, 46, 44), .15;
  --fr-title-btn-color-bg2: var(--swatch-primary-darkest, 100, 3, 15), .15;
  --fr-title-btn-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-color-bg1)) 40%,
    rgb(var(--fr-title-btn-color-bg2)) 140%);
  --fr-title-btn-hover: var(--swatch-menutxt-dark-color, 15, 15, 15);
  --fr-title-btn-hover-border: var(--swatch-border-color, 30, 30, 30);
  --fr-title-btn-hover-bg1: var(--swatch-primary-darker, 100, 46, 44), .35;
  --fr-title-btn-hover-bg2: var(--swatch-primary-darkest, 100, 3, 15), .35;
  --fr-title-btn-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-hover-bg1)) 40%,
    rgb(var(--fr-title-btn-hover-bg2)) 140%);
  --fr-title-btn-accent: var(--bright-accent, 133, 0, 5);
  --fr-progress-bar-color: var(--bright-accent, 133, 0, 5);
  --fr-progress-bar-bg-color: var(--pale-accent, 230, 40, 60), .25;
  --fr-progress-text-color: var(--swatch-important-text, 133, 0, 5);
  --fr-progress-goal-color: var(--swatch-text-general, 15, 15, 15), .5;
  --fr-description-color: var(--swatch-text-general, 15, 15, 15);
  --fr-donate-color: var(--swatch-menutxt-general-color, 30, 30, 30);
  --fr-donate-color-border: var(--swatch-border-color, 30, 30, 30);
  --fr-donate-color-bg1: var(--swatch-primary-darker, 100, 46, 44), .15;
  --fr-donate-color-bg2: var(--swatch-primary-darkest, 100, 3, 15), .15;
  --fr-donate-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-color-bg1)) 40%,
    rgb(var(--fr-donate-color-bg2)) 140%);
  --fr-donate-hover: var(--swatch-menutxt-dark-color, 15, 15, 15);
  --fr-donate-hover-border: var(--swatch-border-color, 30, 30, 30);
  --fr-donate-hover-bg1: var(--swatch-primary-darker, 100, 46, 44), .35;
  --fr-donate-hover-bg2: var(--swatch-primary-darkest, 100, 3, 15), .35;
  --fr-donate-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-hover-bg1)) 40%,
    rgb(var(--fr-donate-hover-bg2)) 140%);
  --fr-donate-accent: var(--bright-accent, 133, 0, 5);
  --fr-logo-color: var(--alt-accent, 221, 102, 17);
  }
  
  /* GoFundMe Theme Color Scheme */
  
  .fr-widget.theme-fr-GoFundMe,
  .fr-widget.theme-fr-Gofundme,
  .fr-widget.theme-fr-GOFUNDME,
  .fr-widget.theme-fr-gofundme,
  .fr-widget.theme-fr-GFM,
  .fr-widget.theme-fr-Gfm,
  .fr-widget.theme-fr-gfm {
  --fr-title-font: Lato, Trebuchet, Arial, sans-serif;
  --fr-body-font: Lato, Trebuchet, Arial, sans-serif;
  --fr-logo-font: Spartan, Helvetica, Arial, sans-serif;
  --fr-widget-bg-color: 255, 255, 255;
  --fr-widget-border-color: 200, 200, 200;
  --fr-title-color: 40, 40, 40;
  --fr-title-hover: 60, 60, 60;
  --fr-title-btn-color: 40, 40, 40;
  --fr-title-btn-color-border: 192, 103, 40;
  --fr-title-btn-color-bg1: 253, 186, 51;
  --fr-title-btn-color-bg2: 245, 127, 49;
  --fr-title-btn-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-color-bg1)) 40%,
    rgb(var(--fr-title-btn-color-bg2)) 140%);
  --fr-title-btn-hover: 60, 60, 60;
  --fr-title-btn-hover-border: 140, 75, 29;
  --fr-title-btn-hover-bg1: 201, 147, 40;
  --fr-title-btn-hover-bg2: 194, 101, 39;
  --fr-title-btn-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-hover-bg1)) 40%,
    rgb(var(--fr-title-btn-hover-bg2)) 140%);
  --fr-title-btn-accent: 233, 233, 25;
  --fr-progress-bar-color: 2, 169, 91;
  --fr-progress-bar-bg-color: 230, 246, 239;
  --fr-progress-text-color: 0, 0, 0;
  --fr-progress-goal-color: 118, 118, 118;
  --fr-description-color: 0, 0, 0;
  --fr-donate-color: 40, 40, 40;
  --fr-donate-color-border: 192, 103, 40; /* hsv: 25°, 79%, 75% */
  --fr-donate-color-bg1: 253, 186, 51; /* hsv: 40°, 80%, 99% */
  --fr-donate-color-bg2: 245, 127, 49; /* hsv: 24°, 80%, 96% */
  --fr-donate-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-color-bg1)) 40%,
    rgb(var(--fr-donate-color-bg2)) 140%);
  --fr-donate-hover: 60, 60, 60;
  --fr-donate-hover-border: 140, 75, 29; /* hsv: 25°, 79%, 55% */
  --fr-donate-hover-bg1: 201, 147, 40; /* hsv: 40°, 80%, 79% */
  --fr-donate-hover-bg2: 194, 101, 39; /* hsv: 24°, 80%, 76% */
  --fr-donate-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-hover-bg1)) 40%,
    rgb(var(--fr-donate-hover-bg2)) 140%);
  --fr-donate-accent: 233, 233, 25;
  --fr-logo-color: 2, 169, 91;
  }
  
  /* IndieGoGo Theme Color Scheme */
  
  .fr-widget.theme-fr-IndieGoGo,
  .fr-widget.theme-fr-Indiegogo,
  .fr-widget.theme-fr-INDIEGOGO,
  .fr-widget.theme-fr-indiegogo,
  .fr-widget.theme-fr-IGG,
  .fr-widget.theme-fr-Igg,
  .fr-widget.theme-fr-igg {
  --fr-title-font: Source Sans Pro, Trebuchet, Arial, sans-serif;
  --fr-body-font: Source Sans Pro, Trebuchet, Arial, sans-serif;
  --fr-logo-font: Titillium Web, Trebuchet, Arial, sans-serif;
  --fr-widget-bg-color: 255, 255, 255;
  --fr-widget-border-color: 200, 200, 200;
  --fr-title-color: 42, 42, 42;
  --fr-title-hover: 62, 62, 62;
  --fr-title-btn-color: 255, 255, 255;
  --fr-title-btn-color-border: 168, 13, 124;
  --fr-title-btn-color-bg1: 229, 16, 117;
  --fr-title-btn-color-bg2: 222, 16, 167;
  --fr-title-btn-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-color-bg1)) 40%,
    rgb(var(--fr-title-btn-color-bg2)) 140%);
  --fr-title-btn-hover: 255, 255, 255;
  --fr-title-btn-hover-border: 117, 9, 87;
  --fr-title-btn-hover-bg1: 207, 12, 103;
  --fr-title-btn-hover-bg2: 199, 12, 149;
  --fr-title-btn-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-hover-bg1)) 40%,
    rgb(var(--fr-title-btn-hover-bg2)) 140%);
  --fr-title-btn-accent: 133, 50, 95;
  --fr-progress-bar-color: 52, 202, 150;
  --fr-progress-bar-bg-color: 221, 221, 221;
  --fr-progress-text-color: 42, 42, 42;
  --fr-progress-goal-color: 42, 42, 42;
  --fr-description-color: 42, 42, 42;
  --fr-donate-color: 255, 255, 255;
  --fr-donate-color-border: 168, 13, 124; /* hsv: 317°, 92%, 66% */
  --fr-donate-color-bg1: 229, 16, 117; /* hsv: 332°, 93%, 90% */
  --fr-donate-color-bg2: 222, 16, 167; /* hsv: 316°, 93%, 87% */
  --fr-donate-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-color-bg1)) 40%,
    rgb(var(--fr-donate-color-bg2)) 140%);
  --fr-donate-hover: 255, 255, 255;
  --fr-donate-hover-border: 117, 9, 87; /* hsv: 317°, 92%, 46% */
  --fr-donate-hover-bg1: 207, 12, 103; /* hsv: 332°, 94%, 81% */
  --fr-donate-hover-bg2: 199, 12, 149; /* hsv: 316°, 94%, 78% */
  --fr-donate-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-hover-bg1)) 40%,
    rgb(var(--fr-donate-hover-bg2)) 140%);
  --fr-donate-accent: 133, 50, 95;
  --fr-logo-color: 229, 16, 117;
  }
  
  /* Kickstarter Theme Color Scheme */
  
  .fr-widget.theme-fr-KickStarter,
  .fr-widget.theme-fr-Kickstarter,
  .fr-widget.theme-fr-KICKSTARTER,
  .fr-widget.theme-fr-kickstarter,
  .fr-widget.theme-fr-KS,
  .fr-widget.theme-fr-Ks,
  .fr-widget.theme-fr-ks {
  --fr-title-font: Roboto, Helvetica, Arial, sans-serif;
  --fr-body-font: Roboto, Helvetica, Arial, sans-serif;
  --fr-logo-font: Sniglet, classic-comic, Comic Sans MS, Comic Sans, cursive;
  --fr-widget-bg-color: 251, 250, 250;
  --fr-widget-border-color: 200, 200, 200;
  --fr-title-color: 40, 40, 40;
  --fr-title-hover: 60, 60, 60;
  --fr-title-btn-color: 255, 255, 255;
  --fr-title-btn-color-border: 1, 74, 30;
  --fr-title-btn-color-bg1: 2, 136, 88;
  --fr-title-btn-color-bg2: 1, 128, 50;
  --fr-title-btn-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-color-bg1)) 40%,
    rgb(var(--fr-title-btn-color-bg2)) 140%);
  --fr-title-btn-hover: 255, 255, 255;
  --fr-title-btn-hover-border: 1, 26, 10;
  --fr-title-btn-hover-bg1: 1, 87, 56;
  --fr-title-btn-hover-bg2: 1, 79, 30;
  --fr-title-btn-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-hover-bg1)) 40%,
    rgb(var(--fr-title-btn-hover-bg2)) 140%);
  --fr-title-btn-accent: 0, 133, 5;
  --fr-progress-bar-color: 0, 158, 116;
  --fr-progress-bar-bg-color: 232, 232, 232;
  --fr-progress-text-color: 0, 158, 116;
  --fr-progress-goal-color: 101, 105, 105;
  --fr-description-color: 40, 40, 40;
  --fr-donate-color: 255, 255, 255;
  --fr-donate-color-border: 1, 74, 30; /* hsv: 144°, 98%, 29% */
  --fr-donate-color-bg1: 2, 136, 88; /* hsv: 159°, 99%, 53% */
  --fr-donate-color-bg2: 1, 128, 50; /* hsv: 143°, 99%, 50% */
  --fr-donate-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-color-bg1)) 40%,
    rgb(var(--fr-donate-color-bg2)) 140%);
  --fr-donate-hover: 255, 255, 255;
  --fr-donate-hover-border: 1, 26, 10; /* hsv: 143°, 98%, 10% */
  --fr-donate-hover-bg1: 1, 87, 56; /* hsv: 158°, 99%, 34% */
  --fr-donate-hover-bg2: 1, 79, 30; /* hsv: 142°, 99%, 31% */
  --fr-donate-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-hover-bg1)) 40%,
    rgb(var(--fr-donate-hover-bg2)) 140%);
  --fr-donate-accent: 0, 133, 5;
  --fr-logo-color: 5, 206, 120;
  }
  
  /* Ko-Fi Theme Color Scheme */
  
  .fr-widget.theme-fr-Ko-Fi,
  .fr-widget.theme-fr-Ko-fi,
  .fr-widget.theme-fr-KO-FI,
  .fr-widget.theme-fr-ko-fi,
  .fr-widget.theme-fr-KoFi,
  .fr-widget.theme-fr-Kofi,
  .fr-widget.theme-fr-KOFI,
  .fr-widget.theme-fr-kofi {
  --fr-title-font: Quicksand, Ubuntu, Helvetica, Century Gothic, sans-serif;
  --fr-body-font: Quicksand, Ubuntu, Helvetica, Century Gothic, sans-serif;
  --fr-title-font: Nunito, Arial, sans-serif;
  --kofi-title-bg1: 41, 171, 224; /* 197°, 82%, 88% */
  --kofi-title-bg2: 39, 214, 217; /* 181°, 82%, 85% */
  --kofi-title-border: 27, 78, 140; /* 213°, 81%, 55% */
  --kofi-btn-color: 255, 255, 255;
  --kofi-btn-hover: 245, 245, 245;
  --fr-widget-bg-color: 255, 255, 255;
  --fr-widget-border-color: 200, 200, 200;
  --fr-title-color: var(--kofi-title-bg1);
  --fr-title-hover: var(--kofi-title-bg1), .85;
  --fr-title-btn-color: var(--kofi-btn-color);
  --fr-title-btn-color-border: var(--kofi-title-border);
  --fr-title-btn-color-bg1: var(--kofi-title-bg1);
  --fr-title-btn-color-bg2: var(--kofi-title-bg2);
  --fr-title-btn-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-color-bg1)) 40%,
    rgb(var(--fr-title-btn-color-bg2)) 140%);
  --fr-title-btn-hover: var(--kofi-btn-hover);
  --fr-title-btn-hover-border: var(--kofi-title-border), .85;
  --fr-title-btn-hover-bg1: var(--kofi-title-bg1), .85;
  --fr-title-btn-hover-bg2: var(--kofi-title-bg2), .85;
  --fr-title-btn-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-title-btn-hover-bg1)) 40%,
    rgb(var(--fr-title-btn-hover-bg2)) 140%);
  --fr-title-btn-accent: 0, 5, 133;
  --fr-progress-bar-color: 205, 175, 25;
  --fr-progress-bar-bg-color: 240, 240, 240;
  --fr-progress-text-color: 38, 39, 42;
  --fr-progress-goal-color: 100, 101, 104;
  --fr-description-color: 38, 39, 42;
  --fr-donate-color: var(--kofi-btn-color);
  --fr-donate-color-border: 196, 107, 75; /* hsv: 16°, 62%, 77% */
  --fr-donate-color-bg1: 255, 95, 95; /* hsv: 0°, 63%, 100% */
  --fr-donate-color-bg2: 255, 135, 95; /* hsv: 15°, 63%, 97% */
  --fr-donate-color-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-color-bg1)) 40%,
    rgb(var(--fr-donate-color-bg2)) 140%);
  --fr-donate-hover: var(--kofi-btn-hover);
  --fr-donate-hover-border: 145, 79, 55; /* hsv: 16°, 62%, 57% */
  --fr-donate-hover-bg1: 196, 73, 73; /* hsv: 0°, 63%, 80% */
  --fr-donate-hover-bg2: 196, 104, 73; /* hsv: 15°, 63%, 77% */
  --fr-donate-hover-gradient: linear-gradient(180deg,
    rgb(var(--fr-donate-hover-bg1)) 40%,
    rgb(var(--fr-donate-hover-bg2)) 140%);
  --fr-donate-accent: 133, 0, 5;
  --fr-logo-color: 59, 202, 159;
  }
  
  /* Widget CSS Code */
  
  .fr-widget {
    background-color: rgb(var(--fr-widget-bg-color));
    border: 1px solid rgb(var(--fr-widget-border-color));
    border-radius: 10px;
    box-shadow: 0 2px 6px rgb(var(--fr-widget-border-color), 0.5);
    margin-left: auto;
    margin-right: auto;
    max-width: 480px;
    overflow: hidden;
    font-family: var(--fr-body-font);
  }
  .shape-fr-BHL.fr-widget,
  .shape-fr-bhl.fr-widget {
    border-radius: 0;
    box-shadow: none;
  }
  .fr-image {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: .5rem;
  }
  .fr-image img {
    width: 100%;
  }
  .fr-image.img-fr-none {
    display: none;
  }
  .fr-title {
    font-family: var(--fr-title-font);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.25;
    padding: .5rem 1rem;
  }
  .shape-fr-BHL.fr-title,
  .shape-fr-bhl.fr-title {
    padding: .5rem .5rem;
  }
  .fr-title a {
    color: rgb(var(--fr-title-color));
    text-decoration: none;
    margin-bottom: .5rem;
    margin-top: 0;
  }
  .fr-title.tb-fr-true a {
    color: rgb(var(--fr-title-btn-color));
    background: var(--fr-title-btn-color-gradient);
    border: 1px solid rgb(var(--fr-title-btn-color-border));
  }
  .fr-title a:hover {
    color: rgb(var(--fr-title-hover));
  }
  .fr-title.tb-fr-true a:hover {
    color: rgb(var(--fr-title-btn-hover));
    background: var(--fr-title-btn-hover-gradient);
    border: 1px solid rgb(var(--fr-title-btn-hover-border));
  }
  .fr-title.tb-fr-true {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .fr-title.tb-fr-true a {
    background-clip: padding-box;
    border-radius: .75rem;
    padding: 1rem 2rem;
    margin-bottom: .25rem;
    margin-left: 0;
    margin-right: 0;
    position: relative;
    max-width: 30rem;
    width: 100%;
    display: flex;
    flex-grow: 2;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 80ms cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
  }
  .shape-fr-BHL.fr-title.tb-fr-true a,
  .shape-fr-bhl.fr-title.tb-fr-true a {
    border-radius: 0;
  }
  .shape-fr-BHL.fr-title.tb-fr-true a::before,
  .shape-fr-bhl.fr-title.tb-fr-true a::before {
    content: " ";
    width: 125%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(var(--fr-title-btn-accent), .25);
    opacity: 1;
    z-index: 1;
    transform: translateX(calc(-100% - 4rem));
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
  }
  .shape-fr-BHL.fr-title.tb-fr-true a:hover::before,
  .shape-fr-bhl.fr-title.tb-fr-true a:hover::before {
    transform: translateX(-1rem);
  }
  .fr-title-text {
    display: inline-flex;
    align-content: flex-start;
    vertical-align: top;
    z-index: 2;
  }
  .fr-title-icon {
    display: none;
  }
  .fr-title-icon span {
    display: none;
  }
  .fr-title-icon.icon-fr-{$title_icon_name} {
    content: " ";
    background-image: url("{$title_icon_url}");
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: center;
    margin-right: .5rem;
    display: inline-block;
    height: 2rem;
    width: 2rem;
    z-index: 2;
    animation: {$title_icon_anim};
  }
  .fr-content {
    padding: 0 1rem;
  }
  .shape-fr-BHL.fr-content,
  .shape-fr-bhl.fr-content {
    padding: 0 .5rem;
  }
  .fr-progress-cont {
    margin-bottom: .5rem;
  }
  .fr-prog-bar-cont {
    margin-bottom: .5rem;
    margin-top: .25rem;
    background-color: rgb(var(--fr-progress-bar-bg-color));
    border-radius: .125rem;
    max-width: 100%;
  }
  .fr-prog-bar {
    background: rgb(var(--fr-progress-bar-color));
    border-radius: .125rem;
    display: inline-block;
    height: .5rem;
    max-width: 100%;
  }
  .shape-fr-BHL.fr-prog-bar-cont,
  .shape-fr-bhl.fr-prog-bar-cont {
    border-radius: 0;
  }
  .shape-fr-BHL.fr-prog-bar,
  .shape-fr-bhl.fr-prog-bar {
    border-radius: 0;
  }
  .fr-prog-text {
    color: rgb(var(--fr-progress-text-color));
    display: flex;
    font-family: var(--fr-title-font);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: .8;
    margin-bottom: .25rem;
    margin-top: .25rem;
  }
  .fr-prog-goal {
    color: rgb(var(--fr-progress-goal-color));
    font-family: var(--fr-body-font);
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.21;
    display: flex;
    padding-left: .5rem;
  }
  .fr-desc {
    color: rgb(var(--fr-description-color));
    margin-bottom: .5rem;
  }
  .fr-desc p {
    margin: .25em 0;
  }
  .hide-fr-desc-true {
    display: none;
  }
  .fr-button-cont {
    align-items: center;
    display: flex;
    margin-bottom: 1rem;
  }
  .shape-fr-BHL.fr-button-cont,
  .shape-fr-bhl.fr-button-cont {
    margin-bottom: .5rem;
  }
  .hide-fr-donate-true {
    display: none;
  }
  .fr-button-cont a {
    background: var(--fr-donate-color-gradient);
    background-clip: padding-box;
    border: 1px solid rgb(var(--fr-donate-color-border));
    border-radius: .5rem;
    box-shadow: 0 6px 14px rgb(0 0 0 / 10%);
    color: rgb(var(--fr-donate-color));
    font-family: var(--fr-title-font);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .02em;
    position: relative;
    max-width: 12rem;
    white-space: nowrap;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: .75rem 1rem;
    display: flex;
    flex-grow: 2;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 80ms cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
  }
  .fr-button-cont a:hover {
    background: var(--fr-donate-hover-gradient);
    border: 1px solid rgb(var(--fr-donate-hover-border));
    color: rgb(var(--fr-donate-hover));
  }
  .shape-fr-BHL.fr-button-cont a,
  .shape-fr-bhl.fr-button-cont a {
    border-radius: 0;
    box-shadow: none;
  }
  .shape-fr-BHL.fr-button-cont a::before,
  .shape-fr-bhl.fr-button-cont a::before {
    content: " ";
    display: inline;
    width: 125%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(var(--fr-donate-accent), .25);
    opacity: 1;
    z-index: 1;
    transform: translateX(calc(-100% - 4rem));
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
  }
  .shape-fr-BHL.fr-button-cont a:hover::before,
  .shape-fr-bhl.fr-button-cont a:hover::before {
    transform: translate(-1rem);
  }
  .fr-button-backup {
    display: none!important;
  }
  .fr-button-backup.donate-fr-none {
    display: flex!important;
  }
  .fr-button-donate.donate-fr-none {
    display: none!important;
  }
  .fr-button-text {
    display: inline-flex;
    align-content: flex-start;
    vertical-align: top;
    z-index: 2;
  }
  .fr-button-icon {
    display: none;
  }
  .fr-button-icon span {
    display: none;
  }
  .fr-button-icon.icon-fr-{$donate_icon_name} {
    content: " ";
    background-image: url("{$donate_icon_url}");
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    background-position: center;
    margin-right: .5rem;
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    z-index: 2;
    animation: {$donate_icon_anim};
  }
  .fr-logo {
    color: rgb(var(--fr-logo-color));
    height: 2rem;
    width: 7.5rem;
    overflow: hidden;
    margin-left: 1rem!important;
    font-family: var(--fr-logo-font);
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  @keyframes icon-wiggle {
      0% {transform:rotate(0) scale(1)}
     60% {transform:rotate(0) scale(1)}
     75% {transform:rotate(0) scale(1.12)}
     80% {transform:rotate(0) scale(1.1)}
     84% {transform:rotate(-10deg) scale(1.1)}
     88% {transform:rotate(10deg) scale(1.1)}
     92% {transform:rotate(-10deg) scale(1.1)}
     96% {transform:rotate(10deg) scale(1.1)}
    100% {transform:rotate(0) scale(1)}
  }

Inline Styles

• display:[[#ifexpr {$goal} > 0 | block | none]];

• width: calc({$amt} / {$goal} * 100%);

• display: inline-flex;

• display:[[#ifexpr {$amt} < 0 | inline | none]];

• display: inline-flex;

• display:[[#ifexpr {$goal} < 0 | inline | none]];

• padding-left:0.25rem;

Includes

• (none)

CSS Classes

• fr-widget

• shape-fr-{$shape}

• {$aux_class}

• theme-fr-{$theme}

• tb-fr-{$title_button}

• fr-image

• shape-fr-{$shape}

• {$aux_class}

• img-fr-{$image_url}

• fr-title

• shape-fr-{$shape}

• {$aux_class}

• 
        tb-fr-{$title_button}

• fr-title-icon

• shape-fr-{$shape}

• {$aux_class}

• 
                                      icon-fr-{$title_icon_name}

• fr-title-text

• shape-fr-{$shape}

• {$aux_class}

• fr-content

• shape-fr-{$shape}

• {$aux_class}

• fr-progress-cont

• shape-fr-{$shape}

• {$aux_class}

• fr-prog-bar-cont

• shape-fr-{$shape}

• {$aux_class}

• fr-prog-bar

• shape-fr-{$shape}

• {$aux_class}

• fr-prog-text

• shape-fr-{$shape}

• {$aux_class}

• fr-neg-before

• fr-fig-huge

• fr-fig-reg

• fr-fig12-10

• fr-fig9-8

• fr-fig9

• fr-fig8

• fr-fig7

• fr-fig6-5

• fr-fig6

• fr-fig5

• fr-fig4

• fr-fig3-2

• fr-fig3

• fr-fig2

• fr-fig1

• fr-fig-tiny

• fr-prog-goal

• shape-fr-{$shape}

• {$aux_class}

• fr-neg-before

• fr-fig-huge

• fr-fig-reg

• fr-fig12-10

• fr-fig9-8

• fr-fig9

• fr-fig8

• fr-fig7

• fr-fig6-5

• fr-fig6

• fr-fig5

• fr-fig4

• fr-fig3-2

• fr-fig3

• fr-fig2

• fr-fig1

• fr-fig-tiny

• fr-desc

• shape-fr-{$shape}

• {$aux_class}

• hide-fr-desc-{$hide_desc}

• fr-button-cont

• shape-fr-{$shape}

• {$aux_class}

• 
          hide-fr-donate-{$hide_donate}

• fr-button-donate

• shape-fr-{$shape}

• {$aux_class}

• donate-fr-{$donate_url}

• fr-button-icon

• shape-fr-{$shape}

• {$aux_class}

• 
                                          icon-fr-{$donate_icon_name}

• fr-button-text

• shape-fr-{$shape}

• {$aux_class}

• fr-button-backup

• shape-fr-{$shape}

• {$aux_class}

• donate-fr-{$donate_url}

• fr-button-icon

• shape-fr-{$shape}

• {$aux_class}

• 
                                          icon-fr-{$donate_icon_name}

• fr-button-text

• shape-fr-{$shape}

• {$aux_class}

• fr-logo

• shape-fr-{$shape}

• {$aux_class}

Page Source

[[module CSS]]

/* Black Highlighter Theme Typefaces */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400;0,900;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* GoFundMe Theme Typefaces */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,900;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap');

/* IndieGoGo Theme Typefaces */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,900;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;900&display=swap');

/* Kickstarter Theme Typefaces */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap');

/* Ko-Fi Theme Typefaces */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

:root {

/* Widget Typefaces */
--fr-title-font: verdana, arial, helvetica, sans-serif;
--fr-body-font: verdana, arial, helvetica, sans-serif;
--fr-logo-font: verdana, arial, helvetica, sans-serif;

/* BHL Title Typeface, used for the title link when BHL= true */

/* Widget Base Colors */
--fr-widget-bg-color: 255, 255, 255;
--fr-widget-border-color: 102, 0, 0;

/* Title Link Text Colors */
--fr-title-color: 187, 0, 17; /* hsv: 355°, 100%, 73% */
--fr-title-hover: 212, 0, 18; /* hsv: 355°, 100%, 83% */

/* Title Button Colors when Inactive, when title_button= true */
--fr-title-btn-color: 187, 0, 17;
--fr-title-btn-color-border: 102, 0, 0;
--fr-title-btn-color-bg1: 255, 240, 240;
--fr-title-btn-color-bg2: 247, 233, 236;
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);

/* Title Button Colors when Hovered Over, when title_button= true */
--fr-title-btn-hover: 212, 0, 18;
--fr-title-btn-hover-border: 102, 0, 0;
--fr-title-btn-hover-bg1: 204, 192, 192;
--fr-title-btn-hover-bg2: 196, 185, 188;
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);

/* Title Button Sliding Hover Overlay, when title_button= true & shape= BHL */
--fr-title-btn-accent: 133, 0, 5;

/* Progress Bar Colors */
--fr-progress-bar-color: 102, 0, 0;
--fr-progress-bar-bg-color: 230, 246, 239;

/* Text Color of the current Amount Raised */
--fr-progress-text-color: 102, 0, 0;

/* Text Color of the rest of the Progress Message */
--fr-progress-goal-color: 150, 150, 150;

/* Text Color of the Description */
--fr-description-color: 50, 50, 50;

/* Donate Button Colors when Inactive */
--fr-donate-color: 170, 0, 17; /* hsv: 354°, 100%, 67% */
--fr-donate-color-border: 102, 0, 0;
--fr-donate-color-bg1: 255, 240, 240; /* hsv: 0°, 6%, 100% */
--fr-donate-color-bg2: 247, 233, 236; /* hsv: 345°, 6%, 97% */
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
  
/* Donate Button Colors when Hovered Over */
--fr-donate-hover: 196, 0, 20;  /* hsv: 354°, 100%, 77% */
--fr-donate-hover-border: 102, 0, 0;
--fr-donate-hover-bg1: 204, 192, 192; /* hsv: 0°, 6%, 80% */
--fr-donate-hover-bg2: 196, 185, 188; /* hsv: 345°, 6%, 77% */
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);

/* Donate Button Sliding Hover Overlay, when shape= BHL */
--fr-donate-accent: 133, 0, 5;

/* Text Color of the "Logo" next to the Donate Button */
--fr-logo-color: 0, 73, 119;

}

/* Black Highlighter Theme Color Scheme, 
with fallback values based on the core BHL color scheme. */

.fr-widget.theme-fr-Black-Highlighter,
.fr-widget.theme-fr-Black-highlighter,
.fr-widget.theme-fr-BLACK-HIGHLIGHTER,
.fr-widget.theme-fr-black-highlighter,
.fr-widget.theme-fr-BlackHighlighter,
.fr-widget.theme-fr-Blackhighlighter,
.fr-widget.theme-fr-BLACKHIGHLIGHTER,
.fr-widget.theme-fr-blackhighlighter,
.fr-widget.theme-fr-BHL,
.fr-widget.theme-fr-Bhl,
.fr-widget.theme-fr-bhl {
--fr-title-font: var(--title-font, Inter), Poppins, Franklin Gothic Medium, Franklin Gothic, 
    ITC Franklin Gothic, "Helvetica Neue", "Helvetica", Arial, sans-serif;
--fr-body-font: var(--body-font, Inter), Raleway, Arimo, Verdana, Geneva, "Helvetica Neue", 
    "Helvetica", Arial, sans-serif;
--fr-logo-font: Orbitron, Verdana, Geneva, sans-serif;
--fr-widget-bg-color: var(--swatch-secondary-color, 245, 245, 245), .25;
--fr-widget-border-color: var(--swatch-tertiary-color, 170, 170, 170);
--fr-title-color: var(--swatch-text-dark, 40, 40, 40);
--fr-title-hover: var(--swatch-text-general, 60, 60, 60);
--fr-title-btn-color: var(--swatch-menutxt-general-color, 30, 30, 30);
--fr-title-btn-color-border: var(--swatch-border-color, 30, 30, 30);
--fr-title-btn-color-bg1: var(--swatch-primary-darker, 100, 46, 44), .15;
--fr-title-btn-color-bg2: var(--swatch-primary-darkest, 100, 3, 15), .15;
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);
--fr-title-btn-hover: var(--swatch-menutxt-dark-color, 15, 15, 15);
--fr-title-btn-hover-border: var(--swatch-border-color, 30, 30, 30);
--fr-title-btn-hover-bg1: var(--swatch-primary-darker, 100, 46, 44), .35;
--fr-title-btn-hover-bg2: var(--swatch-primary-darkest, 100, 3, 15), .35;
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);
--fr-title-btn-accent: var(--bright-accent, 133, 0, 5);
--fr-progress-bar-color: var(--bright-accent, 133, 0, 5);
--fr-progress-bar-bg-color: var(--pale-accent, 230, 40, 60), .25;
--fr-progress-text-color: var(--swatch-important-text, 133, 0, 5);
--fr-progress-goal-color: var(--swatch-text-general, 15, 15, 15), .5;
--fr-description-color: var(--swatch-text-general, 15, 15, 15);
--fr-donate-color: var(--swatch-menutxt-general-color, 30, 30, 30);
--fr-donate-color-border: var(--swatch-border-color, 30, 30, 30);
--fr-donate-color-bg1: var(--swatch-primary-darker, 100, 46, 44), .15;
--fr-donate-color-bg2: var(--swatch-primary-darkest, 100, 3, 15), .15;
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
--fr-donate-hover: var(--swatch-menutxt-dark-color, 15, 15, 15);
--fr-donate-hover-border: var(--swatch-border-color, 30, 30, 30);
--fr-donate-hover-bg1: var(--swatch-primary-darker, 100, 46, 44), .35;
--fr-donate-hover-bg2: var(--swatch-primary-darkest, 100, 3, 15), .35;
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);
--fr-donate-accent: var(--bright-accent, 133, 0, 5);
--fr-logo-color: var(--alt-accent, 221, 102, 17);
}

/* GoFundMe Theme Color Scheme */

.fr-widget.theme-fr-GoFundMe,
.fr-widget.theme-fr-Gofundme,
.fr-widget.theme-fr-GOFUNDME,
.fr-widget.theme-fr-gofundme,
.fr-widget.theme-fr-GFM,
.fr-widget.theme-fr-Gfm,
.fr-widget.theme-fr-gfm {
--fr-title-font: Lato, Trebuchet, Arial, sans-serif;
--fr-body-font: Lato, Trebuchet, Arial, sans-serif;
--fr-logo-font: Spartan, Helvetica, Arial, sans-serif;
--fr-widget-bg-color: 255, 255, 255;
--fr-widget-border-color: 200, 200, 200;
--fr-title-color: 40, 40, 40;
--fr-title-hover: 60, 60, 60;
--fr-title-btn-color: 40, 40, 40;
--fr-title-btn-color-border: 192, 103, 40;
--fr-title-btn-color-bg1: 253, 186, 51;
--fr-title-btn-color-bg2: 245, 127, 49;
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);
--fr-title-btn-hover: 60, 60, 60;
--fr-title-btn-hover-border: 140, 75, 29;
--fr-title-btn-hover-bg1: 201, 147, 40;
--fr-title-btn-hover-bg2: 194, 101, 39;
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);
--fr-title-btn-accent: 233, 233, 25;
--fr-progress-bar-color: 2, 169, 91;
--fr-progress-bar-bg-color: 230, 246, 239;
--fr-progress-text-color: 0, 0, 0;
--fr-progress-goal-color: 118, 118, 118;
--fr-description-color: 0, 0, 0;
--fr-donate-color: 40, 40, 40;
--fr-donate-color-border: 192, 103, 40; /* hsv: 25°, 79%, 75% */
--fr-donate-color-bg1: 253, 186, 51; /* hsv: 40°, 80%, 99% */
--fr-donate-color-bg2: 245, 127, 49; /* hsv: 24°, 80%, 96% */
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
--fr-donate-hover: 60, 60, 60;
--fr-donate-hover-border: 140, 75, 29; /* hsv: 25°, 79%, 55% */
--fr-donate-hover-bg1: 201, 147, 40; /* hsv: 40°, 80%, 79% */
--fr-donate-hover-bg2: 194, 101, 39; /* hsv: 24°, 80%, 76% */
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);
--fr-donate-accent: 233, 233, 25;
--fr-logo-color: 2, 169, 91;
}

/* IndieGoGo Theme Color Scheme */

.fr-widget.theme-fr-IndieGoGo,
.fr-widget.theme-fr-Indiegogo,
.fr-widget.theme-fr-INDIEGOGO,
.fr-widget.theme-fr-indiegogo,
.fr-widget.theme-fr-IGG,
.fr-widget.theme-fr-Igg,
.fr-widget.theme-fr-igg {
--fr-title-font: Source Sans Pro, Trebuchet, Arial, sans-serif;
--fr-body-font: Source Sans Pro, Trebuchet, Arial, sans-serif;
--fr-logo-font: Titillium Web, Trebuchet, Arial, sans-serif;
--fr-widget-bg-color: 255, 255, 255;
--fr-widget-border-color: 200, 200, 200;
--fr-title-color: 42, 42, 42;
--fr-title-hover: 62, 62, 62;
--fr-title-btn-color: 255, 255, 255;
--fr-title-btn-color-border: 168, 13, 124;
--fr-title-btn-color-bg1: 229, 16, 117;
--fr-title-btn-color-bg2: 222, 16, 167;
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);
--fr-title-btn-hover: 255, 255, 255;
--fr-title-btn-hover-border: 117, 9, 87;
--fr-title-btn-hover-bg1: 207, 12, 103;
--fr-title-btn-hover-bg2: 199, 12, 149;
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);
--fr-title-btn-accent: 133, 50, 95;
--fr-progress-bar-color: 52, 202, 150;
--fr-progress-bar-bg-color: 221, 221, 221;
--fr-progress-text-color: 42, 42, 42;
--fr-progress-goal-color: 42, 42, 42;
--fr-description-color: 42, 42, 42;
--fr-donate-color: 255, 255, 255;
--fr-donate-color-border: 168, 13, 124; /* hsv: 317°, 92%, 66% */
--fr-donate-color-bg1: 229, 16, 117; /* hsv: 332°, 93%, 90% */
--fr-donate-color-bg2: 222, 16, 167; /* hsv: 316°, 93%, 87% */
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
--fr-donate-hover: 255, 255, 255;
--fr-donate-hover-border: 117, 9, 87; /* hsv: 317°, 92%, 46% */
--fr-donate-hover-bg1: 207, 12, 103; /* hsv: 332°, 94%, 81% */
--fr-donate-hover-bg2: 199, 12, 149; /* hsv: 316°, 94%, 78% */
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);
--fr-donate-accent: 133, 50, 95;
--fr-logo-color: 229, 16, 117;
}

/* Kickstarter Theme Color Scheme */

.fr-widget.theme-fr-KickStarter,
.fr-widget.theme-fr-Kickstarter,
.fr-widget.theme-fr-KICKSTARTER,
.fr-widget.theme-fr-kickstarter,
.fr-widget.theme-fr-KS,
.fr-widget.theme-fr-Ks,
.fr-widget.theme-fr-ks {
--fr-title-font: Roboto, Helvetica, Arial, sans-serif;
--fr-body-font: Roboto, Helvetica, Arial, sans-serif;
--fr-logo-font: Sniglet, classic-comic, Comic Sans MS, Comic Sans, cursive;
--fr-widget-bg-color: 251, 250, 250;
--fr-widget-border-color: 200, 200, 200;
--fr-title-color: 40, 40, 40;
--fr-title-hover: 60, 60, 60;
--fr-title-btn-color: 255, 255, 255;
--fr-title-btn-color-border: 1, 74, 30;
--fr-title-btn-color-bg1: 2, 136, 88;
--fr-title-btn-color-bg2: 1, 128, 50;
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);
--fr-title-btn-hover: 255, 255, 255;
--fr-title-btn-hover-border: 1, 26, 10;
--fr-title-btn-hover-bg1: 1, 87, 56;
--fr-title-btn-hover-bg2: 1, 79, 30;
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);
--fr-title-btn-accent: 0, 133, 5;
--fr-progress-bar-color: 0, 158, 116;
--fr-progress-bar-bg-color: 232, 232, 232;
--fr-progress-text-color: 0, 158, 116;
--fr-progress-goal-color: 101, 105, 105;
--fr-description-color: 40, 40, 40;
--fr-donate-color: 255, 255, 255;
--fr-donate-color-border: 1, 74, 30; /* hsv: 144°, 98%, 29% */
--fr-donate-color-bg1: 2, 136, 88; /* hsv: 159°, 99%, 53% */
--fr-donate-color-bg2: 1, 128, 50; /* hsv: 143°, 99%, 50% */
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
--fr-donate-hover: 255, 255, 255;
--fr-donate-hover-border: 1, 26, 10; /* hsv: 143°, 98%, 10% */
--fr-donate-hover-bg1: 1, 87, 56; /* hsv: 158°, 99%, 34% */
--fr-donate-hover-bg2: 1, 79, 30; /* hsv: 142°, 99%, 31% */
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);
--fr-donate-accent: 0, 133, 5;
--fr-logo-color: 5, 206, 120;
}

/* Ko-Fi Theme Color Scheme */

.fr-widget.theme-fr-Ko-Fi,
.fr-widget.theme-fr-Ko-fi,
.fr-widget.theme-fr-KO-FI,
.fr-widget.theme-fr-ko-fi,
.fr-widget.theme-fr-KoFi,
.fr-widget.theme-fr-Kofi,
.fr-widget.theme-fr-KOFI,
.fr-widget.theme-fr-kofi {
--fr-title-font: Quicksand, Ubuntu, Helvetica, Century Gothic, sans-serif;
--fr-body-font: Quicksand, Ubuntu, Helvetica, Century Gothic, sans-serif;
--fr-title-font: Nunito, Arial, sans-serif;
--kofi-title-bg1: 41, 171, 224; /* 197°, 82%, 88% */
--kofi-title-bg2: 39, 214, 217; /* 181°, 82%, 85% */
--kofi-title-border: 27, 78, 140; /* 213°, 81%, 55% */
--kofi-btn-color: 255, 255, 255;
--kofi-btn-hover: 245, 245, 245;
--fr-widget-bg-color: 255, 255, 255;
--fr-widget-border-color: 200, 200, 200;
--fr-title-color: var(--kofi-title-bg1);
--fr-title-hover: var(--kofi-title-bg1), .85;
--fr-title-btn-color: var(--kofi-btn-color);
--fr-title-btn-color-border: var(--kofi-title-border);
--fr-title-btn-color-bg1: var(--kofi-title-bg1);
--fr-title-btn-color-bg2: var(--kofi-title-bg2);
--fr-title-btn-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-color-bg1)) 40%,
  rgb(var(--fr-title-btn-color-bg2)) 140%);
--fr-title-btn-hover: var(--kofi-btn-hover);
--fr-title-btn-hover-border: var(--kofi-title-border), .85;
--fr-title-btn-hover-bg1: var(--kofi-title-bg1), .85;
--fr-title-btn-hover-bg2: var(--kofi-title-bg2), .85;
--fr-title-btn-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-title-btn-hover-bg1)) 40%,
  rgb(var(--fr-title-btn-hover-bg2)) 140%);
--fr-title-btn-accent: 0, 5, 133;
--fr-progress-bar-color: 205, 175, 25;
--fr-progress-bar-bg-color: 240, 240, 240;
--fr-progress-text-color: 38, 39, 42;
--fr-progress-goal-color: 100, 101, 104;
--fr-description-color: 38, 39, 42;
--fr-donate-color: var(--kofi-btn-color);
--fr-donate-color-border: 196, 107, 75; /* hsv: 16°, 62%, 77% */
--fr-donate-color-bg1: 255, 95, 95; /* hsv: 0°, 63%, 100% */
--fr-donate-color-bg2: 255, 135, 95; /* hsv: 15°, 63%, 97% */
--fr-donate-color-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-color-bg1)) 40%,
  rgb(var(--fr-donate-color-bg2)) 140%);
--fr-donate-hover: var(--kofi-btn-hover);
--fr-donate-hover-border: 145, 79, 55; /* hsv: 16°, 62%, 57% */
--fr-donate-hover-bg1: 196, 73, 73; /* hsv: 0°, 63%, 80% */
--fr-donate-hover-bg2: 196, 104, 73; /* hsv: 15°, 63%, 77% */
--fr-donate-hover-gradient: linear-gradient(180deg,
  rgb(var(--fr-donate-hover-bg1)) 40%,
  rgb(var(--fr-donate-hover-bg2)) 140%);
--fr-donate-accent: 133, 0, 5;
--fr-logo-color: 59, 202, 159;
}

/* Widget CSS Code */

.fr-widget {
  background-color: rgb(var(--fr-widget-bg-color));
  border: 1px solid rgb(var(--fr-widget-border-color));
  border-radius: 10px;
  box-shadow: 0 2px 6px rgb(var(--fr-widget-border-color), 0.5);
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
  overflow: hidden;
  font-family: var(--fr-body-font);
}
.shape-fr-BHL.fr-widget,
.shape-fr-bhl.fr-widget {
  border-radius: 0;
  box-shadow: none;
}
.fr-image {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: .5rem;
}
.fr-image img {
  width: 100%;
}
.fr-image.img-fr-none {
  display: none;
}
.fr-title {
  font-family: var(--fr-title-font);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.25;
  padding: .5rem 1rem;
}
.shape-fr-BHL.fr-title,
.shape-fr-bhl.fr-title {
  padding: .5rem .5rem;
}
.fr-title a {
  color: rgb(var(--fr-title-color));
  text-decoration: none;
  margin-bottom: .5rem;
  margin-top: 0;
}
.fr-title.tb-fr-true a {
  color: rgb(var(--fr-title-btn-color));
  background: var(--fr-title-btn-color-gradient);
  border: 1px solid rgb(var(--fr-title-btn-color-border));
}
.fr-title a:hover {
  color: rgb(var(--fr-title-hover));
}
.fr-title.tb-fr-true a:hover {
  color: rgb(var(--fr-title-btn-hover));
  background: var(--fr-title-btn-hover-gradient);
  border: 1px solid rgb(var(--fr-title-btn-hover-border));
}
.fr-title.tb-fr-true {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fr-title.tb-fr-true a {
  background-clip: padding-box;
  border-radius: .75rem;
  padding: 1rem 2rem;
  margin-bottom: .25rem;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  max-width: 30rem;
  width: 100%;
  display: flex;
  flex-grow: 2;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 80ms cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.shape-fr-BHL.fr-title.tb-fr-true a,
.shape-fr-bhl.fr-title.tb-fr-true a {
  border-radius: 0;
}
.shape-fr-BHL.fr-title.tb-fr-true a::before,
.shape-fr-bhl.fr-title.tb-fr-true a::before {
  content: " ";
  width: 125%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgb(var(--fr-title-btn-accent), .25);
  opacity: 1;
  z-index: 1;
  transform: translateX(calc(-100% - 4rem));
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
}
.shape-fr-BHL.fr-title.tb-fr-true a:hover::before,
.shape-fr-bhl.fr-title.tb-fr-true a:hover::before {
  transform: translateX(-1rem);
}
.fr-title-text {
  display: inline-flex;
  align-content: flex-start;
  vertical-align: top;
  z-index: 2;
}
.fr-title-icon {
  display: none;
}
.fr-title-icon span {
  display: none;
}
.fr-title-icon.icon-fr-{$title_icon_name} {
  content: " ";
  background-image: url("{$title_icon_url}");
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  background-position: center;
  margin-right: .5rem;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  z-index: 2;
  animation: {$title_icon_anim};
}
.fr-content {
  padding: 0 1rem;
}
.shape-fr-BHL.fr-content,
.shape-fr-bhl.fr-content {
  padding: 0 .5rem;
}
.fr-progress-cont {
  margin-bottom: .5rem;
}
.fr-prog-bar-cont {
  margin-bottom: .5rem;
  margin-top: .25rem;
  background-color: rgb(var(--fr-progress-bar-bg-color));
  border-radius: .125rem;
  max-width: 100%;
}
.fr-prog-bar {
  background: rgb(var(--fr-progress-bar-color));
  border-radius: .125rem;
  display: inline-block;
  height: .5rem;
  max-width: 100%;
}
.shape-fr-BHL.fr-prog-bar-cont,
.shape-fr-bhl.fr-prog-bar-cont {
  border-radius: 0;
}
.shape-fr-BHL.fr-prog-bar,
.shape-fr-bhl.fr-prog-bar {
  border-radius: 0;
}
.fr-prog-text {
  color: rgb(var(--fr-progress-text-color));
  display: flex;
  font-family: var(--fr-title-font);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: .8;
  margin-bottom: .25rem;
  margin-top: .25rem;
}
.fr-prog-goal {
  color: rgb(var(--fr-progress-goal-color));
  font-family: var(--fr-body-font);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.21;
  display: flex;
  padding-left: .5rem;
}
.fr-desc {
  color: rgb(var(--fr-description-color));
  margin-bottom: .5rem;
}
.fr-desc p {
  margin: .25em 0;
}
.hide-fr-desc-true {
  display: none;
}
.fr-button-cont {
  align-items: center;
  display: flex;
  margin-bottom: 1rem;
}
.shape-fr-BHL.fr-button-cont,
.shape-fr-bhl.fr-button-cont {
  margin-bottom: .5rem;
}
.hide-fr-donate-true {
  display: none;
}
.fr-button-cont a {
  background: var(--fr-donate-color-gradient);
  background-clip: padding-box;
  border: 1px solid rgb(var(--fr-donate-color-border));
  border-radius: .5rem;
  box-shadow: 0 6px 14px rgb(0 0 0 / 10%);
  color: rgb(var(--fr-donate-color));
  font-family: var(--fr-title-font);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .02em;
  position: relative;
  max-width: 12rem;
  white-space: nowrap;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: .75rem 1rem;
  display: flex;
  flex-grow: 2;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 80ms cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.fr-button-cont a:hover {
  background: var(--fr-donate-hover-gradient);
  border: 1px solid rgb(var(--fr-donate-hover-border));
  color: rgb(var(--fr-donate-hover));
}
.shape-fr-BHL.fr-button-cont a,
.shape-fr-bhl.fr-button-cont a {
  border-radius: 0;
  box-shadow: none;
}
.shape-fr-BHL.fr-button-cont a::before,
.shape-fr-bhl.fr-button-cont a::before {
  content: " ";
  display: inline;
  width: 125%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgb(var(--fr-donate-accent), .25);
  opacity: 1;
  z-index: 1;
  transform: translateX(calc(-100% - 4rem));
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  clip-path: polygon(0.00% 0.00%, 100% 0px, 90% 100%, 0px 100%);
}
.shape-fr-BHL.fr-button-cont a:hover::before,
.shape-fr-bhl.fr-button-cont a:hover::before {
  transform: translate(-1rem);
}
.fr-button-backup {
  display: none!important;
}
.fr-button-backup.donate-fr-none {
  display: flex!important;
}
.fr-button-donate.donate-fr-none {
  display: none!important;
}
.fr-button-text {
  display: inline-flex;
  align-content: flex-start;
  vertical-align: top;
  z-index: 2;
}
.fr-button-icon {
  display: none;
}
.fr-button-icon span {
  display: none;
}
.fr-button-icon.icon-fr-{$donate_icon_name} {
  content: " ";
  background-image: url("{$donate_icon_url}");
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  background-position: center;
  margin-right: .5rem;
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  z-index: 2;
  animation: {$donate_icon_anim};
}
.fr-logo {
  color: rgb(var(--fr-logo-color));
  height: 2rem;
  width: 7.5rem;
  overflow: hidden;
  margin-left: 1rem!important;
  font-family: var(--fr-logo-font);
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@keyframes icon-wiggle {
    0% {transform:rotate(0) scale(1)}
   60% {transform:rotate(0) scale(1)}
   75% {transform:rotate(0) scale(1.12)}
   80% {transform:rotate(0) scale(1.1)}
   84% {transform:rotate(-10deg) scale(1.1)}
   88% {transform:rotate(10deg) scale(1.1)}
   92% {transform:rotate(-10deg) scale(1.1)}
   96% {transform:rotate(10deg) scale(1.1)}
  100% {transform:rotate(0) scale(1)}
}
[[/module]]

[[div class="fr-widget shape-fr-{$shape} {$aux_class} theme-fr-{$theme} tb-fr-{$title_button}"]]
  [[div class="fr-image shape-fr-{$shape} {$aux_class} img-fr-{$image_url}"]]
    [[image {$image_url} link="*{$main_url}"]]
  [[/div]]
  [[div_ class="fr-title shape-fr-{$shape} {$aux_class} 
      tb-fr-{$title_button}"]]
    [[a target="_blank" href="{$main_url}"]] \
      [[span class="fr-title-icon shape-fr-{$shape} {$aux_class} 
                                    icon-fr-{$title_icon_name}"]]@<&nbsp;>@[[/span]] \
      [[span class="fr-title-text shape-fr-{$shape} {$aux_class}"]]{$title}[[/span]] \
    [[/a]]
  [[/div]]
  [[div_ class="fr-content shape-fr-{$shape} {$aux_class}"]]
    [[div_ class="fr-progress-cont shape-fr-{$shape} {$aux_class}" 
           style="display:[[#ifexpr {$goal} > 0 | block | none]];"]]
      [[div_ class="fr-prog-bar-cont shape-fr-{$shape} {$aux_class}"]]
        [[span class="fr-prog-bar shape-fr-{$shape} {$aux_class}" 
               style="width: calc({$amt} / {$goal} * 100%);"]]
        [[/span]]
      [[/div]]
      [[div_ class="fr-prog-text shape-fr-{$shape} {$aux_class}" style="display: inline-flex;"]]
  [[span class="fr-neg-before" style="display:[[#ifexpr {$amt} < 0 | inline | none]];"]]- \
  [[/span]]{$curr_sym} \
  [[span class="fr-fig-huge" style="display:[!-- if amt >= 1,000,000,000,000 --]
    [[#ifexpr abs({$amt}) < 1000000000000 | none | inline]];"]] \
    [[#expr abs({$amt}) ]] \
  [[/span]] \
  [[span class="fr-fig-reg" style="display:[!-- if amt < 1,000,000,000,000 --]
    [[#ifexpr abs({$amt}) < 1000000000000 | inline-flex | none]];"]] \
    [!-- Section 000,XXX,XXX,XXX.xxx --] \
    [[span class="fr-fig12-10" style="display:[!-- if amt >= 1,000,000,000 --]
      [[#ifexpr abs({$amt}) < 1000000000 | none | inline]];"]] \
      [[#expr (abs({$amt}) - abs({$amt}) % 1000000000) / 1000000000 ]]{$num_sep} \
    [[/span]] \
    [!-- Section XXX,000,XXX,XXX.xxx --] \
    [[span class="fr-fig9-8" style="display:[!-- if amt >= 1,000,000,000 --]
      [[#ifexpr abs({$amt}) < 1000000000 | none | inline-flex]];"]] \
      [[span class="fr-fig9" style="display:[!-- if amt == X,0XX,XXX,XXX --]
        [[#ifexpr (abs({$amt}) % 1000000000) < 100000000 | inline | none]];"]] 0 [[/span]] \
      [[span class="fr-fig8" style="display:[!-- if amt == X,X0X,XXX,XXX --]
        [[#ifexpr (abs({$amt}) % 1000000000) < 10000000 | inline | none]];"]] 0 [[/span]] \
    [[/span]] \
    [[span class="fr-fig7" style="display:[!-- if amt >= 1,000,000,000 --]
      [[#ifexpr abs({$amt}) < 1000000000 | none | inline]];"]] \
      [[#expr (abs({$amt}) % 1000000000 - abs({$amt}) % 1000000) / 1000000 ]]{$num_sep} \
    [[/span]] \
    [!-- Section XXX,XXX,000,XXX.xxx --] \
    [[span class="fr-fig6-5" style="display:[!-- if amt >= 1,000,000 --]
      [[#ifexpr abs({$amt}) < 1000000 | none | inline-flex]];"]] \
      [[span class="fr-fig6" style="display:[!-- if amt == X,0XX,XXX --]
        [[#ifexpr (abs({$amt}) % 1000000) < 100000 | inline | none]];"]] 0 [[/span]] \
      [[span class="fr-fig5" style="display:[!-- if amt == X,X0X,XXX --]
        [[#ifexpr (abs({$amt}) % 1000000) < 10000 | inline | none]];"]] 0 [[/span]] \
    [[/span]] \
    [[span class="fr-fig4" style="display:[!-- if amt >= 1,000 --]
      [[#ifexpr abs({$amt}) < 1000 | none | inline]];"]] \
      [[#expr (abs({$amt}) % 1000000 - abs({$amt}) % 1000) / 1000 ]]{$num_sep} \
    [[/span]] \
    [!-- Section XXX,XXX,XXX,000.xxx --] \
    [[span class="fr-fig3-2" style="display:[!-- if amt >= 1,000 --]
      [[#ifexpr abs({$amt}) < 1000 | none | inline-flex]];"]] \
      [[span class="fr-fig3" style="display:[!-- if amt == X,0XX --]
        [[#ifexpr (abs({$amt}) % 1000) < 100 | inline | none]];"]] 0 [[/span]] \
      [[span class="fr-fig2" style="display:[!-- if amt == X,X0X --]
        [[#ifexpr (abs({$amt}) % 1000) < 10 | inline | none]];"]] 0 [[/span]] \
    [[/span]] \
    [[span class="fr-fig1" style="display:[!-- if amt >= 1.0e-12 --]
      [[#ifexpr abs({$amt}) < 0.000000000001 | none | inline]];"]] \
      [[#expr abs({$amt}) % 1000 - abs({$amt}) % 1 ]] \
    [[/span]] \
    [[span class="fr-fig-tiny" style="display:[!-- if amt < 1.0e-12 --]
      [[#ifexpr abs({$amt}) < 0.000000000001 | inline | none]];"]] \
      [[#expr abs({$amt}) ]] \
    [[/span]] \
  [[/span]] \
        [[span class="fr-prog-goal shape-fr-{$shape} {$aux_class}" 
               style="display: inline-flex;"]] raised of \
  [[span class="fr-neg-before" style="display:[[#ifexpr {$goal} < 0 | inline | none]];"]]- \
  [[/span]]{$curr_sym} \
  [[span class="fr-fig-huge" style="display:[!-- if amt >= 1,000,000,000,000 --]
    [[#ifexpr abs({$goal}) < 1000000000000 | none | inline]];"]] \
    [[#expr abs({$goal}) ]] \
  [[/span]] \
  [[span class="fr-fig-reg" style="display:[!-- if amt < 1,000,000,000,000 --]
    [[#ifexpr abs({$goal}) < 1000000000000 | inline-flex | none]];"]] \
    [!-- Section 000,XXX,XXX,XXX.xxx --] \
    [[span class="fr-fig12-10" style="display:[!-- if amt >= 1,000,000,000 --]
      [[#ifexpr abs({$goal}) < 1000000000 | none | inline]];"]] \
      [[#expr (abs({$goal}) - abs({$goal}) % 1000000000) / 1000000000 ]]{$num_sep} \
    [[/span]] \
    [!-- Section XXX,000,XXX,XXX.xxx --] \
    [[span class="fr-fig9-8" style="display:[!-- if amt >= 1,000,000,000 --]
      [[#ifexpr abs({$goal}) < 1000000000 | none | inline-flex]];"]] \
      [[span class="fr-fig9" style="display:[!-- if amt == X,0XX,XXX,XXX --]
        [[#ifexpr (abs({$goal}) % 1000000000) < 100000000 | inline | none]];"]] 0 [[/span]] \
      [[span class="fr-fig8" style="display:[!-- if amt == X,X0X,XXX,XXX --]
        [[#ifexpr (abs({$goal}) % 1000000000) < 10000000 | inline | none]];"]] 0 [[/span]] \
    [[/span]] \
    [[span class="fr-fig7" style="display:[!-- if amt >= 1,000,000,000 --]
      [[#ifexpr abs({$goal}) < 1000000000 | none | inline]];"]] \
      [[#expr (abs({$goal}) % 1000000000 - abs({$goal}) % 1000000) / 1000000 ]]{$num_sep} \
    [[/span]] \
    [!-- Section XXX,XXX,000,XXX.xxx --] \
    [[span class="fr-fig6-5" style="display:[!-- if amt >= 1,000,000 --]
      [[#ifexpr abs({$goal}) < 1000000 | none | inline-flex]];"]] \
      [[span class="fr-fig6" style="display:[!-- if amt == X,0XX,XXX --]
        [[#ifexpr (abs({$goal}) % 1000000) < 100000 | inline | none]];"]] 0 [[/span]] \
      [[span class="fr-fig5" style="display:[!-- if amt == X,X0X,XXX --]
        [[#ifexpr (abs({$goal}) % 1000000) < 10000 | inline | none]];"]] 0 [[/span]] \
    [[/span]] \
    [[span class="fr-fig4" style="display:[!-- if amt >= 1,000 --]
      [[#ifexpr abs({$goal}) < 1000 | none | inline]];"]] \
      [[#expr (abs({$goal}) % 1000000 - abs({$goal}) % 1000) / 1000 ]]{$num_sep} \
    [[/span]] \
    [!-- Section XXX,XXX,XXX,000.xxx --] \
    [[span class="fr-fig3-2" style="display:[!-- if amt >= 1,000 --]
      [[#ifexpr abs({$goal}) < 1000 | none | inline-flex]];"]] \
      [[span class="fr-fig3" style="display:[!-- if amt == X,0XX --]
        [[#ifexpr (abs({$goal}) % 1000) < 100 | inline | none]];"]] 0 [[/span]] \
      [[span class="fr-fig2" style="display:[!-- if amt == X,X0X --]
        [[#ifexpr (abs({$goal}) % 1000) < 10 | inline | none]];"]] 0 [[/span]] \
    [[/span]] \
    [[span class="fr-fig1" style="display:[!-- if amt >= 1.0e-12 --]
      [[#ifexpr abs({$goal}) < 0.000000000001 | none | inline]];"]] \
      [[#expr abs({$goal}) % 1000 - abs({$goal}) % 1 ]] \
    [[/span]] \
    [[span class="fr-fig-tiny" style="display:[!-- if amt < 1.0e-12 --]
      [[#ifexpr abs({$goal}) < 0.000000000001 | inline | none]];"]] \
      [[#expr abs({$goal}) ]] \
    [[/span]] \
  [[/span]] \
          [[span style="padding-left:0.25rem;"]]goal![[/span]] \
        [[/span]]
      [[/div]]
    [[/div]]
    [[div class="fr-desc shape-fr-{$shape} {$aux_class} hide-fr-desc-{$hide_desc}"]]
      {$description}
    [[/div]]
    [[div_ class="fr-button-cont shape-fr-{$shape} {$aux_class} 
        hide-fr-donate-{$hide_donate}"]]
      [[a target="_blank" href="{$donate_url}" 
          class="fr-button-donate shape-fr-{$shape} {$aux_class} donate-fr-{$donate_url}"]] \
        [[span class="fr-button-icon shape-fr-{$shape} {$aux_class} 
                                        icon-fr-{$donate_icon_name}"]]@<&nbsp;>@[[/span]] \
        [[span class="fr-button-text shape-fr-{$shape} {$aux_class}"]]Donate Now[[/span]] \
      [[/a]] \
      [[a target="_blank" href="{$main_url}" 
          class="fr-button-backup shape-fr-{$shape} {$aux_class} donate-fr-{$donate_url}"]] \
        [[span class="fr-button-icon shape-fr-{$shape} {$aux_class} 
                                        icon-fr-{$donate_icon_name}"]]@<&nbsp;>@[[/span]] \
        [[span class="fr-button-text shape-fr-{$shape} {$aux_class}"]]Donate Now[[/span]] \
      [[/a]] \
      [[span class="fr-logo shape-fr-{$shape} {$aux_class}"]]{$logo_text}[[/span]]
    [[/div]]
  [[/div]]
[[/div]]