/**
 * SFUMATO is a scalable SCSS framework that leverages modern CSS standards.
 * Documented with the Nucleus style guide syntax: https://holidaypirates.github.io/nucleus/annotation-reference.html
 */
/**
 * SFUMATO is a scalable SCSS framework that leverages modern CSS standards.
 * DO NOT EDIT THIS FILE.
 * Documented with the Nucleus style guide syntax: https://holidaypirates.github.io/nucleus/annotation-reference.html
 */
/**
 * @nuclide Strip Unit
 * @section Functions > Measurements
 * @modifiers
 *  sf-strip-unit() - Strip the unit off a measure (e.g. 1px = 1).
 * @markup
 *  sf-strip-unit(1vw)
 */
/**
 * @nuclide Number to Pixels
 * @section Functions > Media
 * @modifiers
 *  sf-number2px($number) - Ensure a number uses pixel units.
 * @markup
 *  pixels: sf-number2px(100);
 */
/**
 * @nuclide Value to Length
 * @section Functions > Conversions
 * @modifiers
 *  sf-to-length() - Add a unit to a value, returning a proper CSS measurement.
 * @markup
 *  sf-to-length(10, "rem");
 */
/**
 * @nuclide Get Block from Value
 * @section Functions > Conversions
 * @modifiers
 *  sf-get-unit() - Strip the value from a measurement, returning the unit as a string.
 * @markup
 *  sf-get-unit(10rem);
 */
/**
 * @nuclide String to Number
 * @section Functions > Measurements
 * @modifiers
 *  sf-to-number() - Convert a string to a proper SCSS number.
 * @markup
 *  sf-to-number("1vw")
 */
/**
 * @nuclide String Ends With
 * @section Functions > Strings
 * @modifiers
 *  sf-str-endswith() - Determine if string ends with a substring.
 * @markup
 *  sf-str-endswith("source string", "substring");
 */
/**
 * @nuclide String Split
 * @section Functions > Strings
 * @modifiers
 *  sf-str-split() - Split a string into parts using a delimiter.
 * @markup
 *  sf-str-split("source string", " ");
 */
/**
 * @nuclide Color Luminance
 * @section Functions > Color
 * @modifiers
 *  sf-luminance($color) - Calculate the luminance for a color. See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 * @markup
 *  sf-luminance(#ff0000)
 */
/**
 * @nuclide Color Contrast Ratio
 * @section Functions > Color
 * @modifiers
 *  sf-contrast($back, $front) - Calculate the contrast ratio between two colors. See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 * @markup
 *  sf-contrast(#ff0000, #ffff00)
 */
/**
 * @nuclide Generate Contrast Color
 * @section Functions > Color
 * @modifiers
 *  sf-generate-contrast-color($color, $light, $dark) - Determine whether to use dark or light text on top of given color. Returns black for dark text and white for light text. Optionally pass in colors to use for light and dark foregrounds; defaults to black and white.
 * @markup
 *  sf-generate-contrast-color(#ff0000, $light: #ffffff, $dark: #000000)
 */
/**
 * @nuclide Color Channel Values
 * @section Variables > Color
 * @modifiers
 *  $sf-linear-channel-values - Precomputed linear color channel values, for use in contrast calculations. See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests. This lookup table is needed since there is no `pow` in SASS.
 * @markup
 *  Algorithm, for c in 0 to 255:
 *  f(c) {
 *    c = c / 255;
 *    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
 *  }
 */
/**
 * @nuclide Get a media query feature set by name
 * @section Functions > Media Queries
 * @modifiers
 *  sf-get-feature($name, $features: $media-features) - Get a media query feature set by name (e.g. portrait); for use in media queries. Values in the $media-features variable.
 * @markup
 *  width: sf-get-feature(tabp);
 */
/**
 * @nuclide Get Breakpoint Width
 * @section Functions > Media Queries
 * @modifiers
 *  sf-get-breakpoint-width($name, $breakpoints) - Get the named media breakpoint width from a map.
 * @markup
 *  width: sf-get-breakpoint-width(tabp);
 */
/**
 * @nuclide Animation
 * @section Mixins > Animation
 * @modifiers
 *  sf-animate() - Establish CSS animation properties for an element.
 * @markup
 *  @include sf-animate(
 *    $property: all,
 *    $delay: 0,
 *    $duration: 0.5s,
 *    $kind: ease);
 */
/**
 * @nuclide Color CSS Custom Property Generator
 * @section Functions > Color
 * @modifiers
 *  sf-generate-css-color-property($name, $hex-color, $alpha, $hex-color-dark, $alpha-dark) - Create color CSS custom properties (e.g. --sf-color-primary).
 * @markup
 *  sf-generate-css-color-property(
 *    $name: "primary",
 *    $hex-color: #00315c,
 *    $alpha: 1.0,
 *    $hex-color-dark: #00315c,
 *    $alpha-dark: 1.0
 *  )
 */
/**
 * @nuclide Internal call to generate all CSS Custom Properties for colors
 * @section Functions > Color
 * @modifiers
 *  sf-generate-all-color-custom-properties() - Create all CSS custom properties for colors; used internally.
 * @markup
 *  sf-generate-all-color-custom-properties()
 */
/**
 * @nuclide Placeholder Style
 * @section Forms > Inputs
 * @modifiers
 *  @include sf-placeholder - Style an input control placeholder.
 * @markup
 *  @include sf-placeholder { color: #252525; }
 */
/**
 * @nuclide Media Query
 * @section Functions > Media
 * @modifiers
 *  sf-media($feature, $from, $upto, $type) - Styles should only be applied to a specific media breakpoint.
 * @markup
 *  @include sf-media($feature:portrait, $from:tabp) {
 *    ...
 *  }
 */
/**
 * @nuclide Render Table Column
 * @section Mixins > Tables
 * @modifiers
 *  sf-table-column ($from, $upto) - Style table columns by index range (e.g. columns 1 through 5); styles apply to th and td within tr, thead, tbody, and tfoot.
 * @markup
 *  @include sf-table-column(1, 5) {
 *    ...
 *  }
 */
/**
 * @nuclide Hide Table Column
 * @section Mixins > Tables
 * @modifiers
 *  sf-hide-table-column ($child) - Use `display: none` to hide a table column at a specified index.
 * @markup
 *  .hidden {
 *    @include sf-hide-table-column(3);
 *  }
 */
/**
 * @nuclide Clamp text to a maximum number of lines
 * @section Mixins > Styles
 * @modifiers
 *  @include sf-line-clamp() - Clamp text to a maximum number of lines with an ellipsis at the end.
 * @markup
 *  @include sf-line-clamp($lines: 2) {
 *  }
 */
/**
 * @nuclide Prevent text selection for an element
 * @section Mixins > Styles
 * @markup
 *  @include sf-no-selection() {
 *  }
 */
/**
 * @nuclide Enable all selection types for an element
 * @section Mixins > Styles
 * @markup
 *  @include sf-all-selection() {
 *  }
 */
/**
 * @nuclide Enable only text selection for an element
 * @section Mixins > Styles
 * @markup
 *  @include sf-text-selection() {
 *  }
 */
/**
 * @nuclide Responsive YouTube Video Container
 * @section Functions > Media
 * @modifiers
 *  sf-youtube-container{} - Responsive video container for YouTube embeds
 * @markup
 *  .video-container {
 *    @include sf-youtube-container();
 *  }
 */
/**
 * @atom SFUMATO Version
 * @section Configuration
 * @modifiers
 *  sf-version-info () - Will set the content of the element to the SFUMATO version text.
 * @markup
 *   <span id="sfumato-version" role="status">
 *     @include sf-version-info();
 *   </span>
 */
/**
 * @nuclide Media Breakpoints
 * @section Media Breakpoints
 * Following are settings for media breakpoints. Uses px units.
 */
/**
 * @nuclide Measurements
 * @section Measurements
 * Following are settings for various measurements like margins, default line thickness, etc.
 */
:root {
  --phab-breakpoint: 400px;
  --tabp-breakpoint: 540px;
  --tabl-breakpoint: 800px;
  --note-breakpoint: 1280px;
  --desk-breakpoint: 1440px;
  --elas-breakpoint: 1600px;
  /**
   * @nuclide Line Thickness
   * @section Measurements
   * Defines the line thickness for borders, <hr> tags, etc.
   */
  --sf-line-width: 1px;
  /**
   * @nuclide Border Radius
   * @section Measurements
   * Border radius for containers like video, images, code blocks, etc.
   */
  --sf-border-radius: 0.25rem;
  /**
   * @nuclide Block Layout Spacing
   * @section Measurements > Blocks
   * Spacing for sf-block layouts.
   * @markup
   * <sf-block id="hero-unit">
   *     <sf-block-outer-wrapper>
   *         <sf-block-inner-wrapper>
   *             ...
   *         </sf-block-inner-wrapper>
   *     </sf-block-outer-wrapper>
   * </sf-block>
   */
  --sf-zero-block-lr-padding: 1.25rem;
  --sf-zero-block-tb-padding: 2rem;
  --sf-phab-block-lr-padding: var(--sf-zero-block-lr-padding);
  --sf-phab-block-tb-padding: var(--sf-zero-block-tb-padding);
  --sf-tabp-block-lr-padding: 3rem;
  --sf-tabp-block-tb-padding: 2rem;
  --sf-tabl-block-lr-padding: var(--sf-tabp-block-lr-padding);
  --sf-tabl-block-tb-padding: var(--sf-tabp-block-tb-padding);
  --sf-note-block-lr-padding: var(--sf-tabl-block-lr-padding);
  --sf-note-block-tb-padding: var(--sf-tabl-block-tb-padding);
  --sf-desk-block-lr-padding: var(--sf-note-block-lr-padding);
  --sf-desk-block-tb-padding: var(--sf-note-block-tb-padding);
  --sf-elas-block-lr-padding: var(--sf-desk-block-lr-padding);
  --sf-elas-block-tb-padding: var(--sf-desk-block-tb-padding);
}

/**
 * @nuclide Fonts
 * @section Typography > Fonts
 * Following are font face configurations.
 */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 200;
  src: url(../../webfonts/Roboto-Thin.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100 200;
  src: url(../../webfonts/Roboto-ThinItalic.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url(../../webfonts/Roboto-Light.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: url(../../webfonts/Roboto-LightItalic.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url(../../webfonts/Roboto-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url(../../webfonts/Roboto-Italic.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url(../../webfonts/Roboto-Medium.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url(../../webfonts/Roboto-MediumItalic.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600 700;
  src: url(../../webfonts/Roboto-Bold.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 600 700;
  src: url(../../webfonts/Roboto-BoldItalic.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800 900;
  src: url(../../webfonts/Roboto-Black.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 800 900;
  src: url(../../webfonts/Roboto-BlackItalic.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  src: url(../../webfonts/JetBrainsMono-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  src: url(../../webfonts/JetBrainsMono-Italic.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  src: url(../../webfonts/JetBrainsMono-Bold.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 700;
  src: url(../../webfonts/JetBrainsMono-BoldItalic.woff2) format("woff2");
}
:root {
  /**
   * @nuclide Font 
   * @section Typography > Font Families
   * Following are default font families for various type styles.
   */
  --sf-font-family-body: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica, Calibri, Arial, sans-serif;
  --sf-font-family-heading: "Roboto", -apple-system, BlinkMacSystemFont, Helvetica, Calibri, Arial, sans-serif;
  --sf-font-family-mono: "JetBrains Mono", -apple-system-mono, "Menlo", "Consolas", "Monaco", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Courier", "Courier New", monospace;
  --sf-font-family-forms: -apple-system, BlinkMacSystemFont, Helvetica, Calibri, Arial, sans-serif;
}

:root {
  /**
   * @nuclide Font 
   * @section Typography > Font Styles
   * Following are default font styles for various elements.
   */
  --sf-bold-font-weight: 700;
  --sf-small-font-size: 0.8rem;
  --sf-small-line-height: 1.3;
  --sf-code-font-size: 0.8rem;
  --sf-code-line-height: 1.3;
  --sf-zero-font-size: 4.35vw;
  --sf-zero-font-weight: 400;
  --sf-zero-line-height: 1.5;
  --sf-phab-font-size: 4vw;
  --sf-phab-font-weight: var(--sf-zero-font-weight);
  --sf-phab-line-height: var(--sf-zero-line-height);
  --sf-tabp-font-size: 1.6vw;
  --sf-tabp-font-weight: var(--sf-phab-font-weight);
  --sf-tabp-line-height: var(--sf-phab-line-height);
  --sf-tabl-font-size: 0.9vw;
  --sf-tabl-font-weight: var(--sf-tabp-font-weight);
  --sf-tabl-line-height: var(--sf-tabp-line-height);
  --sf-note-font-size: 0.9vw;
  --sf-note-font-weight: var(--sf-tabl-font-weight);
  --sf-note-line-height: var(--sf-tabl-line-height);
  --sf-desk-font-size: 0.9vw;
  --sf-desk-font-weight: var(--sf-note-font-weight);
  --sf-desk-line-height: var(--sf-note-line-height);
  --sf-elas-font-size: calc(1600px * (0.9 / 100));
  --sf-elas-font-weight: var(--sf-desk-font-weight);
  --sf-elas-line-height: var(--sf-desk-line-height);
}

:root {
  /**
   * @nuclide H1 Font Style 
   * @section Typography > Font Styles
   * Following are default font styles for this heading style.
   */
  --sf-h1-font-family: var(--sf-font-family-body);
  --sf-zero-h1-font-size: 2.25rem;
  --sf-zero-h1-font-weight: 400;
  --sf-zero-h1-line-height: 1.2;
  --sf-zero-h1-margin-top: 1rem;
  --sf-zero-h1-margin-bottom: 1.5rem;
  --sf-phab-h1-font-size: var(--sf-zero-h1-font-size);
  --sf-phab-h1-font-weight: var(--sf-zero-h1-font-weight);
  --sf-phab-h1-line-height: var(--sf-zero-h1-line-height);
  --sf-phab-h1-margin-top: var(--sf-zero-h1-margin-top);
  --sf-phab-h1-margin-bottom: var(--sf-zero-h1-margin-bottom);
  --sf-tabp-h1-font-size: var(--sf-phab-h1-font-size);
  --sf-tabp-h1-font-weight: var(--sf-phab-h1-font-weight);
  --sf-tabp-h1-line-height: var(--sf-phab-h1-line-height);
  --sf-tabp-h1-margin-top: var(--sf-phab-h1-margin-top);
  --sf-tabp-h1-margin-bottom: var(--sf-phab-h1-margin-bottom);
  --sf-tabl-h1-font-size: var(--sf-tabp-h1-font-size);
  --sf-tabl-h1-font-weight: var(--sf-tabp-h1-font-weight);
  --sf-tabl-h1-line-height: var(--sf-tabp-h1-line-height);
  --sf-tabl-h1-margin-top: var(--sf-tabp-h1-margin-top);
  --sf-tabl-h1-margin-bottom: var(--sf-tabp-h1-margin-bottom);
  --sf-note-h1-font-size: var(--sf-tabl-h1-font-size);
  --sf-note-h1-font-weight: var(--sf-tabl-h1-font-weight);
  --sf-note-h1-line-height: var(--sf-tabl-h1-line-height);
  --sf-note-h1-margin-top: var(--sf-tabl-h1-margin-top);
  --sf-note-h1-margin-bottom: var(--sf-tabl-h1-margin-bottom);
  --sf-desk-h1-font-size: var(--sf-note-h1-font-size);
  --sf-desk-h1-font-weight: var(--sf-note-h1-font-weight);
  --sf-desk-h1-line-height: var(--sf-note-h1-line-height);
  --sf-desk-h1-margin-top: var(--sf-note-h1-margin-top);
  --sf-desk-h1-margin-bottom: var(--sf-note-h1-margin-bottom);
  --sf-elas-h1-font-size: var(--sf-desk-h1-font-size);
  --sf-elas-h1-font-weight: var(--sf-desk-h1-font-weight);
  --sf-elas-h1-line-height: var(--sf-desk-h1-line-height);
  --sf-elas-h1-margin-top: var(--sf-desk-h1-margin-top);
  --sf-elas-h1-margin-bottom: var(--sf-desk-h1-margin-bottom);
}

:root {
  /**
   * @nuclide H2 Font Style 
   * @section Typography > Font Styles
   * Following are default font styles for this heading style.
   */
  --sf-h2-font-family: var(--sf-h1-font-family);
  --sf-zero-h2-font-size: 1.8rem;
  --sf-zero-h2-font-weight: 400;
  --sf-zero-h2-line-height: 1.2;
  --sf-zero-h2-margin-top: 0.75rem;
  --sf-zero-h2-margin-bottom: 1.25rem;
  --sf-phab-h2-font-size: var(--sf-zero-h2-font-size);
  --sf-phab-h2-font-weight: var(--sf-zero-h2-font-weight);
  --sf-phab-h2-line-height: var(--sf-zero-h2-line-height);
  --sf-phab-h2-margin-top: var(--sf-zero-h2-margin-top);
  --sf-phab-h2-margin-bottom: var(--sf-zero-h2-margin-bottom);
  --sf-tabp-h2-font-size: var(--sf-phab-h2-font-size);
  --sf-tabp-h2-font-weight: var(--sf-phab-h2-font-weight);
  --sf-tabp-h2-line-height: var(--sf-phab-h2-line-height);
  --sf-tabp-h2-margin-top: var(--sf-phab-h2-margin-top);
  --sf-tabp-h2-margin-bottom: var(--sf-phab-h2-margin-bottom);
  --sf-tabl-h2-font-size: var(--sf-tabp-h2-font-size);
  --sf-tabl-h2-font-weight: var(--sf-tabp-h2-font-weight);
  --sf-tabl-h2-line-height: var(--sf-tabp-h2-line-height);
  --sf-tabl-h2-margin-top: var(--sf-tabp-h2-margin-top);
  --sf-tabl-h2-margin-bottom: var(--sf-tabp-h2-margin-bottom);
  --sf-note-h2-font-size: var(--sf-tabl-h2-font-size);
  --sf-note-h2-font-weight: var(--sf-tabl-h2-font-weight);
  --sf-note-h2-line-height: var(--sf-tabl-h2-line-height);
  --sf-note-h2-margin-top: var(--sf-tabl-h2-margin-top);
  --sf-note-h2-margin-bottom: var(--sf-tabl-h2-margin-bottom);
  --sf-desk-h2-font-size: var(--sf-note-h2-font-size);
  --sf-desk-h2-font-weight: var(--sf-note-h2-font-weight);
  --sf-desk-h2-line-height: var(--sf-note-h2-line-height);
  --sf-desk-h2-margin-top: var(--sf-note-h2-margin-top);
  --sf-desk-h2-margin-bottom: var(--sf-note-h2-margin-bottom);
  --sf-elas-h2-font-size: var(--sf-desk-h2-font-size);
  --sf-elas-h2-font-weight: var(--sf-desk-h2-font-weight);
  --sf-elas-h2-line-height: var(--sf-desk-h2-line-height);
  --sf-elas-h2-margin-top: var(--sf-desk-h2-margin-top);
  --sf-elas-h2-margin-bottom: var(--sf-desk-h2-margin-bottom);
}

:root {
  /**
   * @nuclide H3 Font Style 
   * @section Typography > Font Styles
   * Following are default font styles for this heading style.
   */
  --sf-h3-font-family: var(--sf-h2-font-family);
  --sf-zero-h3-font-size: 1.5rem;
  --sf-zero-h3-font-weight: 400;
  --sf-zero-h3-line-height: 1.3;
  --sf-zero-h3-margin-top: 0.5rem;
  --sf-zero-h3-margin-bottom: 1rem;
  --sf-phab-h3-font-size: var(--sf-zero-h3-font-size);
  --sf-phab-h3-font-weight: var(--sf-zero-h3-font-weight);
  --sf-phab-h3-line-height: var(--sf-zero-h3-line-height);
  --sf-phab-h3-margin-top: var(--sf-zero-h3-margin-top);
  --sf-phab-h3-margin-bottom: var(--sf-zero-h3-margin-bottom);
  --sf-tabp-h3-font-size: var(--sf-phab-h3-font-size);
  --sf-tabp-h3-font-weight: var(--sf-phab-h3-font-weight);
  --sf-tabp-h3-line-height: var(--sf-phab-h3-line-height);
  --sf-tabp-h3-margin-top: var(--sf-phab-h3-margin-top);
  --sf-tabp-h3-margin-bottom: var(--sf-phab-h3-margin-bottom);
  --sf-tabl-h3-font-size: var(--sf-tabp-h3-font-size);
  --sf-tabl-h3-font-weight: var(--sf-tabp-h3-font-weight);
  --sf-tabl-h3-line-height: var(--sf-tabp-h3-line-height);
  --sf-tabl-h3-margin-top: var(--sf-tabp-h3-margin-top);
  --sf-tabl-h3-margin-bottom: var(--sf-tabp-h3-margin-bottom);
  --sf-note-h3-font-size: var(--sf-tabl-h3-font-size);
  --sf-note-h3-font-weight: var(--sf-tabl-h3-font-weight);
  --sf-note-h3-line-height: var(--sf-tabl-h3-line-height);
  --sf-note-h3-margin-top: var(--sf-tabl-h3-margin-top);
  --sf-note-h3-margin-bottom: var(--sf-tabl-h3-margin-bottom);
  --sf-desk-h3-font-size: var(--sf-note-h3-font-size);
  --sf-desk-h3-font-weight: var(--sf-note-h3-font-weight);
  --sf-desk-h3-line-height: var(--sf-note-h3-line-height);
  --sf-desk-h3-margin-top: var(--sf-note-h3-margin-top);
  --sf-desk-h3-margin-bottom: var(--sf-note-h3-margin-bottom);
  --sf-elas-h3-font-size: var(--sf-desk-h3-font-size);
  --sf-elas-h3-font-weight: var(--sf-desk-h3-font-weight);
  --sf-elas-h3-line-height: var(--sf-desk-h3-line-height);
  --sf-elas-h3-margin-top: var(--sf-desk-h3-margin-top);
  --sf-elas-h3-margin-bottom: var(--sf-desk-h3-margin-bottom);
}

:root {
  /**
   * @nuclide H4 Font Style 
   * @section Typography > Font Styles
   * Following are default font styles for this heading style.
   */
  --sf-h4-font-family: var(--sf-h3-font-family);
  --sf-zero-h4-font-size: 1.25rem;
  --sf-zero-h4-font-weight: 500;
  --sf-zero-h4-line-height: 1.35;
  --sf-zero-h4-margin-top: 0.5rem;
  --sf-zero-h4-margin-bottom: 1rem;
  --sf-phab-h4-font-size: var(--sf-zero-h4-font-size);
  --sf-phab-h4-font-weight: var(--sf-zero-h4-font-weight);
  --sf-phab-h4-line-height: var(--sf-zero-h4-line-height);
  --sf-phab-h4-margin-top: var(--sf-zero-h4-margin-top);
  --sf-phab-h4-margin-bottom: var(--sf-zero-h4-margin-bottom);
  --sf-tabp-h4-font-size: var(--sf-phab-h4-font-size);
  --sf-tabp-h4-font-weight: var(--sf-phab-h4-font-weight);
  --sf-tabp-h4-line-height: var(--sf-phab-h4-line-height);
  --sf-tabp-h4-margin-top: var(--sf-phab-h4-margin-top);
  --sf-tabp-h4-margin-bottom: var(--sf-phab-h4-margin-bottom);
  --sf-tabl-h4-font-size: var(--sf-tabp-h4-font-size);
  --sf-tabl-h4-font-weight: var(--sf-tabp-h4-font-weight);
  --sf-tabl-h4-line-height: var(--sf-tabp-h4-line-height);
  --sf-tabl-h4-margin-top: var(--sf-tabp-h4-margin-top);
  --sf-tabl-h4-margin-bottom: var(--sf-tabp-h4-margin-bottom);
  --sf-note-h4-font-size: var(--sf-tabl-h4-font-size);
  --sf-note-h4-font-weight: var(--sf-tabl-h4-font-weight);
  --sf-note-h4-line-height: var(--sf-tabl-h4-line-height);
  --sf-note-h4-margin-top: var(--sf-tabl-h4-margin-top);
  --sf-note-h4-margin-bottom: var(--sf-tabl-h4-margin-bottom);
  --sf-desk-h4-font-size: var(--sf-note-h4-font-size);
  --sf-desk-h4-font-weight: var(--sf-note-h4-font-weight);
  --sf-desk-h4-line-height: var(--sf-note-h4-line-height);
  --sf-desk-h4-margin-top: var(--sf-note-h4-margin-top);
  --sf-desk-h4-margin-bottom: var(--sf-note-h4-margin-bottom);
  --sf-elas-h4-font-size: var(--sf-desk-h4-font-size);
  --sf-elas-h4-font-weight: var(--sf-desk-h4-font-weight);
  --sf-elas-h4-line-height: var(--sf-desk-h4-line-height);
  --sf-elas-h4-margin-top: var(--sf-desk-h4-margin-top);
  --sf-elas-h4-margin-bottom: var(--sf-desk-h4-margin-bottom);
}

:root {
  /**
   * @nuclide H5 Font Style 
   * @section Typography > Font Styles
   * Following are default font styles for this heading style.
   */
  --sf-h5-font-family: var(--sf-h4-font-family);
  --sf-zero-h5-font-size: 1.1rem;
  --sf-zero-h5-font-weight: 500;
  --sf-zero-h5-line-height: 1.5;
  --sf-zero-h5-margin-top: 0.5rem;
  --sf-zero-h5-margin-bottom: 0.75rem;
  --sf-phab-h5-font-size: var(--sf-zero-h5-font-size);
  --sf-phab-h5-font-weight: var(--sf-zero-h5-font-weight);
  --sf-phab-h5-line-height: var(--sf-zero-h5-line-height);
  --sf-phab-h5-margin-top: var(--sf-zero-h5-margin-top);
  --sf-phab-h5-margin-bottom: var(--sf-zero-h5-margin-bottom);
  --sf-tabp-h5-font-size: var(--sf-phab-h5-font-size);
  --sf-tabp-h5-font-weight: var(--sf-phab-h5-font-weight);
  --sf-tabp-h5-line-height: var(--sf-phab-h5-line-height);
  --sf-tabp-h5-margin-top: var(--sf-phab-h5-margin-top);
  --sf-tabp-h5-margin-bottom: var(--sf-phab-h5-margin-bottom);
  --sf-tabl-h5-font-size: var(--sf-tabp-h5-font-size);
  --sf-tabl-h5-font-weight: var(--sf-tabp-h5-font-weight);
  --sf-tabl-h5-line-height: var(--sf-tabp-h5-line-height);
  --sf-tabl-h5-margin-top: var(--sf-tabp-h5-margin-top);
  --sf-tabl-h5-margin-bottom: var(--sf-tabp-h5-margin-bottom);
  --sf-note-h5-font-size: var(--sf-tabl-h5-font-size);
  --sf-note-h5-font-weight: var(--sf-tabl-h5-font-weight);
  --sf-note-h5-line-height: var(--sf-tabl-h5-line-height);
  --sf-note-h5-margin-top: var(--sf-tabl-h5-margin-top);
  --sf-note-h5-margin-bottom: var(--sf-tabl-h5-margin-bottom);
  --sf-desk-h5-font-size: var(--sf-note-h5-font-size);
  --sf-desk-h5-font-weight: var(--sf-note-h5-font-weight);
  --sf-desk-h5-line-height: var(--sf-note-h5-line-height);
  --sf-desk-h5-margin-top: var(--sf-note-h5-margin-top);
  --sf-desk-h5-margin-bottom: var(--sf-note-h5-margin-bottom);
  --sf-elas-h5-font-size: var(--sf-desk-h5-font-size);
  --sf-elas-h5-font-weight: var(--sf-desk-h5-font-weight);
  --sf-elas-h5-line-height: var(--sf-desk-h5-line-height);
  --sf-elas-h5-margin-top: var(--sf-desk-h5-margin-top);
  --sf-elas-h5-margin-bottom: var(--sf-desk-h5-margin-bottom);
}

:root {
  /**
   * @nuclide H6 Font Style 
   * @section Typography > Font Styles
   * Following are default font styles for this heading style.
   */
  --sf-h6-font-family: var(--sf-h5-font-family);
  --sf-zero-h6-font-size: 1rem;
  --sf-zero-h6-font-weight: 600;
  --sf-zero-h6-line-height: 1.5;
  --sf-zero-h6-margin-top: 0.5rem;
  --sf-zero-h6-margin-bottom: 0.75rem;
  --sf-phab-h6-font-size: var(--sf-zero-h6-font-size);
  --sf-phab-h6-font-weight: var(--sf-zero-h6-font-weight);
  --sf-phab-h6-line-height: var(--sf-zero-h6-line-height);
  --sf-phab-h6-margin-top: var(--sf-zero-h6-margin-top);
  --sf-phab-h6-margin-bottom: var(--sf-zero-h6-margin-bottom);
  --sf-tabp-h6-font-size: var(--sf-phab-h6-font-size);
  --sf-tabp-h6-font-weight: var(--sf-phab-h6-font-weight);
  --sf-tabp-h6-line-height: var(--sf-phab-h6-line-height);
  --sf-tabp-h6-margin-top: var(--sf-phab-h6-margin-top);
  --sf-tabp-h6-margin-bottom: var(--sf-phab-h6-margin-bottom);
  --sf-tabl-h6-font-size: var(--sf-tabp-h6-font-size);
  --sf-tabl-h6-font-weight: var(--sf-tabp-h6-font-weight);
  --sf-tabl-h6-line-height: var(--sf-tabp-h6-line-height);
  --sf-tabl-h6-margin-top: var(--sf-tabp-h6-margin-top);
  --sf-tabl-h6-margin-bottom: var(--sf-tabp-h6-margin-bottom);
  --sf-note-h6-font-size: var(--sf-tabl-h6-font-size);
  --sf-note-h6-font-weight: var(--sf-tabl-h6-font-weight);
  --sf-note-h6-line-height: var(--sf-tabl-h6-line-height);
  --sf-note-h6-margin-top: var(--sf-tabl-h6-margin-top);
  --sf-note-h6-margin-bottom: var(--sf-tabl-h6-margin-bottom);
  --sf-desk-h6-font-size: var(--sf-note-h6-font-size);
  --sf-desk-h6-font-weight: var(--sf-note-h6-font-weight);
  --sf-desk-h6-line-height: var(--sf-note-h6-line-height);
  --sf-desk-h6-margin-top: var(--sf-note-h6-margin-top);
  --sf-desk-h6-margin-bottom: var(--sf-note-h6-margin-bottom);
  --sf-elas-h6-font-size: var(--sf-desk-h6-font-size);
  --sf-elas-h6-font-weight: var(--sf-desk-h6-font-weight);
  --sf-elas-h6-line-height: var(--sf-desk-h6-line-height);
  --sf-elas-h6-margin-top: var(--sf-desk-h6-margin-top);
  --sf-elas-h6-margin-bottom: var(--sf-desk-h6-margin-bottom);
}

/**
 * @nuclide Grayscale Colors
 * @section Colors > Palette > Grayscale
 * These colors are core colors used across the application.
 * DO NOT REMOVE any of these colors. But feel free to change their values.
 * Contrast colors are foreground colors for their named complement.
 */
:root {
  /**
   * @nuclide White
   * @section Colors > Palette > Grayscale
   * Generates base color with contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Black
   * @section Colors > Palette > Grayscale
   * Generates base color with contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Always White
   * @section Colors > Palette > Grayscale
   * Generates base color with contrast color
   */
  /**
   * @nuclide Always Black
   * @section Colors > Palette > Grayscale
   * Generates base color with contrast color
   */
  /**
   * @nuclide Super Light
   * @section Colors > Palette > Grayscale
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Light
   * @section Colors > Palette > Grayscale
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Medium
   * @section Colors > Palette > Grayscale
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Dark
   * @section Colors > Palette > Grayscale
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Black Translucent
   * @section Colors > Palette > Grayscale
   * Generates base color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide White Translucent
   * @section Colors > Palette > Grayscale
   * Generates base color
   */
  /* Tint and shade values are reversed here for dark themes */
}

/**
 * @nuclide Primary Colors
 * @section Colors > Palette > Primary
 * These colors are core colors used across the application.
 * DO NOT REMOVE any of these colors. But feel free to change their values.
 * Contrast colors are foreground colors for their named complement.
 */
:root {
  /**
   * @nuclide Silver
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Gold
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Brown
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Yellow
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Orange
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Red
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Purple
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Blue
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Green
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
}

/**
 * @nuclide Brand Colors
 * @section Colors > Palette > Brand
 * These colors are core colors used across the application.
 * DO NOT REMOVE any of these colors. But feel free to change their values.
 * Contrast colors are foreground colors for their named complement.
 */
:root {
  /**
   * @nuclide Primary
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Secondary
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Tertiary
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Quaternary
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Quinary
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
}

/**
 * @nuclide Platform Colors
 * @section Colors > Palette > Platform
 * These colors are specific to your application.
 */
:root {
  /**
   * @nuclide Canvas Gradient 1
   * @section Colors > Palette > Platform
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Canvas Gradient 2
   * @section Colors > Palette > Platform
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Menu Hover
   * @section Colors > Palette > Platform
   * Generates base color and contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Overlay
   * @section Colors > Palette > Platform
   * Generates base color and contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Overlay
   * @section Colors > Palette > Platform
   * Generates base color and contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Busy Overlay
   * @section Colors > Palette > Platform
   * Generates base color and contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Blank Canvas
   * @section Colors > Palette > Platform
   * Generates base color and contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Canvas
   * @section Colors > Palette > Platform
   * Generates base color and contrast color
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Panel
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Tab
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Tab Alt
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Tab Line
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Tab Selected
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Tab Line Selected
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Grid row hover background
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Grid row hover background
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Grid row hover background
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Grid row hover background
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Input Background
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Input Background
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Input Accent
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Input Accent
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Published
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Unpublished
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Favorite
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Flag
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Watch
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Critical
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Notification
   * @section Colors > Palette > Platform
   * Generates base color, tint, and shade variations
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Secondary
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
  /**
   * @nuclide Task Completed
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Completed Badge
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Completed Badge Foreground
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Delayed
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Delayed Badge
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Delayed Badge Foreground
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task At-Risk
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task At-Risk Badge
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task At-Risk Badge Foreground
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Missing Timeline
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Missing Timeline Badge
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Missing Timeline Badge Foreground
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Not Started
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Not Started Badge
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task Not Started Badge Foreground
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task On-Track
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task On-Track Badge
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Task On-Track Badge Foreground
   * @section Colors > Palette > Brand
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /**
   * @nuclide Red
   * @section Colors > Palette > Primary
   * Generates base color, tint, and shade variations, along with contrast colors for each
   */
  /* Tint and shade values are reversed here for dark themes */
}

:root {
  --sfumato-dummy-prefix: '';
  --sf-color-white: white;
  --sf-color-white-rgb: 255,255,255;
  --sf-color-white-contrast: #000000;
  --sf-color-black: black;
  --sf-color-black-rgb: 0,0,0;
  --sf-color-black-contrast: #ffffff;
  --sf-color-always-white: white;
  --sf-color-always-white-rgb: 255,255,255;
  --sf-color-always-white-contrast: #000000;
  --sf-color-always-black: black;
  --sf-color-always-black-rgb: 0,0,0;
  --sf-color-always-black-contrast: #ffffff;
  --sf-color-super-light: #f8f8f8;
  --sf-color-super-light-rgb: 248,248,248;
  --sf-color-super-light-tint: rgb(251.15, 251.15, 251.15);
  --sf-color-super-light-shade: rgb(136.4, 136.4, 136.4);
  --sf-color-super-light-contrast: #000000;
  --sf-color-super-light-tint-contrast: #000000;
  --sf-color-super-light-shade-contrast: #ffffff;
  --sf-color-light: #ededed;
  --sf-color-light-rgb: 237,237,237;
  --sf-color-light-tint: rgb(245.1, 245.1, 245.1);
  --sf-color-light-shade: rgb(130.35, 130.35, 130.35);
  --sf-color-light-contrast: #000000;
  --sf-color-light-tint-contrast: #000000;
  --sf-color-light-shade-contrast: #ffffff;
  --sf-color-medium: #757575;
  --sf-color-medium-rgb: 117,117,117;
  --sf-color-medium-tint: rgb(179.1, 179.1, 179.1);
  --sf-color-medium-shade: rgb(64.35, 64.35, 64.35);
  --sf-color-medium-contrast: #ffffff;
  --sf-color-medium-tint-contrast: #000000;
  --sf-color-medium-shade-contrast: #ffffff;
  --sf-color-dark: #222222;
  --sf-color-dark-rgb: 34,34,34;
  --sf-color-dark-tint: rgb(133.45, 133.45, 133.45);
  --sf-color-dark-shade: rgb(18.7, 18.7, 18.7);
  --sf-color-dark-contrast: #ffffff;
  --sf-color-dark-tint-contrast: #ffffff;
  --sf-color-dark-shade-contrast: #ffffff;
  --sf-color-black-translucent: rgba(0, 0, 0, 0.25);
  --sf-color-black-translucent-rgb: 0,0,0;
  --sf-color-white-translucent: rgba(255, 255, 255, 0.25);
  --sf-color-white-translucent-rgb: 255,255,255;
  --sf-color-silver: #a6a3a3;
  --sf-color-silver-rgb: 166,163,163;
  --sf-color-silver-tint: rgb(206.05, 204.4, 204.4);
  --sf-color-silver-shade: rgb(91.9745856354, 88.9754143646, 88.9754143646);
  --sf-color-silver-contrast: #000000;
  --sf-color-silver-tint-contrast: #000000;
  --sf-color-silver-shade-contrast: #ffffff;
  --sf-color-gold: #b68c41;
  --sf-color-gold-rgb: 182,140,65;
  --sf-color-gold-tint: rgb(216.9342105263, 192.337854251, 148.4157894737);
  --sf-color-gold-shade: rgb(100.1, 77, 35.75);
  --sf-color-gold-contrast: #ffffff;
  --sf-color-gold-tint-contrast: #000000;
  --sf-color-gold-shade-contrast: #ffffff;
  --sf-color-brown: #604131;
  --sf-color-brown-rgb: 96,65,49;
  --sf-color-brown-tint: rgb(187.1603448276, 144.2413793103, 122.0896551724);
  --sf-color-brown-shade: rgb(52.8, 35.75, 26.95);
  --sf-color-brown-contrast: #ffffff;
  --sf-color-brown-tint-contrast: #ffffff;
  --sf-color-brown-shade-contrast: #ffffff;
  --sf-color-yellow: #e8b825;
  --sf-color-yellow-rgb: 232,184,37;
  --sf-color-yellow-tint: rgb(242.35, 215.95, 135.1);
  --sf-color-yellow-shade: rgb(133.8302904564, 104.3630705394, 14.1197095436);
  --sf-color-yellow-contrast: #000000;
  --sf-color-yellow-tint-contrast: #000000;
  --sf-color-yellow-shade-contrast: #ffffff;
  --sf-color-orange: #d66629;
  --sf-color-orange-rgb: 214,102,41;
  --sf-color-orange-tint: rgb(232.45, 170.85, 137.3);
  --sf-color-orange-shade: rgb(117.7, 56.1, 22.55);
  --sf-color-orange-contrast: #ffffff;
  --sf-color-orange-tint-contrast: #000000;
  --sf-color-orange-shade-contrast: #ffffff;
  --sf-color-red: #f04141;
  --sf-color-red-rgb: 240,65,65;
  --sf-color-red-tint: rgb(246.75, 150.5, 150.5);
  --sf-color-red-shade: rgb(155.4756097561, 12.2743902439, 12.2743902439);
  --sf-color-red-contrast: #ffffff;
  --sf-color-red-tint-contrast: #000000;
  --sf-color-red-shade-contrast: #ffffff;
  --sf-color-purple: #6a3db6;
  --sf-color-purple-rgb: 106,61,182;
  --sf-color-purple-tint: rgb(172.2080246914, 145.0135802469, 218.1364197531);
  --sf-color-purple-shade: rgb(58.3, 33.55, 100.1);
  --sf-color-purple-contrast: #ffffff;
  --sf-color-purple-tint-contrast: #ffffff;
  --sf-color-purple-shade-contrast: #ffffff;
  --sf-color-blue: #0088ff;
  --sf-color-blue-rgb: 0,136,255;
  --sf-color-blue-tint: rgb(114.75, 189.55, 255);
  --sf-color-blue-shade: rgb(0, 74.8, 140.25);
  --sf-color-blue-contrast: #ffffff;
  --sf-color-blue-tint-contrast: #000000;
  --sf-color-blue-shade-contrast: #ffffff;
  --sf-color-green: #27b36b;
  --sf-color-green-rgb: 39,179,107;
  --sf-color-green-tint: rgb(123.1311926606, 226.2688073394, 173.2266055046);
  --sf-color-green-shade: rgb(21.45, 98.45, 58.85);
  --sf-color-green-contrast: #ffffff;
  --sf-color-green-tint-contrast: #000000;
  --sf-color-green-shade-contrast: #ffffff;
  --sf-color-primary: #00315c;
  --sf-color-primary-rgb: 0,49,92;
  --sf-color-primary-tint: rgb(25.1, 147.5467391304, 255);
  --sf-color-primary-shade: rgb(0, 26.95, 50.6);
  --sf-color-primary-contrast: #ffffff;
  --sf-color-primary-tint-contrast: #ffffff;
  --sf-color-primary-shade-contrast: #ffffff;
  --sf-color-secondary: #27aae1;
  --sf-color-secondary-rgb: 39,170,225;
  --sf-color-secondary-tint: rgb(136.2, 208.25, 238.5);
  --sf-color-secondary-shade: rgb(17.7073170732, 95.0292682927, 127.4926829268);
  --sf-color-secondary-contrast: #ffffff;
  --sf-color-secondary-tint-contrast: #000000;
  --sf-color-secondary-shade-contrast: #ffffff;
  --sf-color-tertiary: #304659;
  --sf-color-tertiary-rgb: 48,70,89;
  --sf-color-tertiary-tint: rgb(121.7273722628, 154.6711678832, 183.1226277372);
  --sf-color-tertiary-shade: rgb(26.4, 38.5, 48.95);
  --sf-color-tertiary-contrast: #ffffff;
  --sf-color-tertiary-tint-contrast: #ffffff;
  --sf-color-tertiary-shade-contrast: #ffffff;
  --sf-color-quaternary: #27e193;
  --sf-color-quaternary-rgb: 39,225,147;
  --sf-color-quaternary-tint: rgb(136.2, 238.5, 195.6);
  --sf-color-quaternary-shade: rgb(17.7073170732, 127.4926829268, 81.4536585366);
  --sf-color-quaternary-contrast: #000000;
  --sf-color-quaternary-tint-contrast: #000000;
  --sf-color-quaternary-shade-contrast: #ffffff;
  --sf-color-quinary: #27e193;
  --sf-color-quinary-rgb: 39,225,147;
  --sf-color-quinary-tint: rgb(136.2, 238.5, 195.6);
  --sf-color-quinary-shade: rgb(17.7073170732, 127.4926829268, 81.4536585366);
  --sf-color-quinary-contrast: #000000;
  --sf-color-quinary-tint-contrast: #000000;
  --sf-color-quinary-shade-contrast: #ffffff;
  --sf-color-canvas-gradient1: #00315c;
  --sf-color-canvas-gradient1-rgb: 0,49,92;
  --sf-color-canvas-gradient2: #011f43;
  --sf-color-canvas-gradient2-rgb: 1,31,67;
  --sf-color-menu-hover: #527799;
  --sf-color-menu-hover-rgb: 82,119,153;
  --sf-color-menu-hover-contrast: #ffffff;
  --sf-color-light: #e8edf3;
  --sf-color-light-rgb: 232,237,243;
  --sf-color-light-tint: rgb(242.35, 245.1, 248.4);
  --sf-color-light-shade: rgb(91.5357142857, 127.0714285714, 169.7142857143);
  --sf-color-light-contrast: #000000;
  --sf-color-light-tint-contrast: #000000;
  --sf-color-light-shade-contrast: #ffffff;
  --sf-color-overlay: rgba(48, 70, 89, 0.95);
  --sf-color-overlay-rgb: 48,70,89;
  --sf-color-overlay-contrast: #ffffff;
  --sf-color-busy-overlay: rgba(255, 255, 255, 0.75);
  --sf-color-busy-overlay-rgb: 255,255,255;
  --sf-color-busy-overlay-contrast: #000000;
  --sf-color-blank-canvas: #00315c;
  --sf-color-blank-canvas-rgb: 0,49,92;
  --sf-color-blank-canvas-contrast: #ffffff;
  --sf-color-canvas: #fafbfc;
  --sf-color-canvas-rgb: 250,251,252;
  --sf-color-canvas-contrast: #000000;
  --sf-color-panel: white;
  --sf-color-panel-rgb: 255,255,255;
  --sf-color-panel-tint: white;
  --sf-color-panel-shade: rgb(140.25, 140.25, 140.25);
  --sf-color-panel-contrast: #000000;
  --sf-color-panel-tint-contrast: #000000;
  --sf-color-panel-shade-contrast: #ffffff;
  --sf-color-tab: #e8edf3;
  --sf-color-tab-rgb: 232,237,243;
  --sf-color-tab-tint: rgb(242.35, 245.1, 248.4);
  --sf-color-tab-shade: rgb(91.5357142857, 127.0714285714, 169.7142857143);
  --sf-color-tab-contrast: #000000;
  --sf-color-tab-tint-contrast: #000000;
  --sf-color-tab-shade-contrast: #ffffff;
  --sf-color-tab-alt: #546eb2;
  --sf-color-tab-alt-rgb: 84,110,178;
  --sf-color-tab-alt-tint: rgb(160.95, 175.25, 212.65);
  --sf-color-tab-alt-shade: rgb(44.7407258065, 59.847983871, 99.3592741935);
  --sf-color-tab-alt-contrast: #ffffff;
  --sf-color-tab-alt-tint-contrast: #000000;
  --sf-color-tab-alt-shade-contrast: #ffffff;
  --sf-color-tab-line: #7e848b;
  --sf-color-tab-line-rgb: 126,132,139;
  --sf-color-tab-line-tint: rgb(184.05, 187.35, 191.2);
  --sf-color-tab-line-shade: rgb(69.0081632653, 72.5775510204, 76.7418367347);
  --sf-color-tab-line-contrast: #ffffff;
  --sf-color-tab-line-tint-contrast: #000000;
  --sf-color-tab-line-shade-contrast: #ffffff;
  --sf-color-tab-selected: #d4effc;
  --sf-color-tab-selected-rgb: 212,239,252;
  --sf-color-tab-selected-tint: rgb(231.35, 246.2, 253.35);
  --sf-color-tab-selected-shade: rgb(16.8173913043, 166.3739130435, 238.3826086957);
  --sf-color-tab-selected-contrast: #000000;
  --sf-color-tab-selected-tint-contrast: #000000;
  --sf-color-tab-selected-shade-contrast: #ffffff;
  --sf-color-tab-line-selected: #27aae1;
  --sf-color-tab-line-selected-rgb: 39,170,225;
  --sf-color-tab-line-selected-tint: rgb(136.2, 208.25, 238.5);
  --sf-color-tab-line-selected-shade: rgb(17.7073170732, 95.0292682927, 127.4926829268);
  --sf-color-tab-line-selected-contrast: #ffffff;
  --sf-color-tab-line-selected-tint-contrast: #000000;
  --sf-color-tab-line-selected-shade-contrast: #ffffff;
  --sf-color-grid-row-hover-bg: #eaf9ff;
  --sf-color-grid-row-hover-bg-rgb: 234,249,255;
  --sf-color-grid-row-hover-bg-tint: rgb(243.45, 251.7, 255);
  --sf-color-grid-row-hover-bg-shade: rgb(13.95, 186.1285714286, 255);
  --sf-color-grid-row-hover-bg-contrast: #000000;
  --sf-color-grid-row-hover-bg-tint-contrast: #000000;
  --sf-color-grid-row-hover-bg-shade-contrast: #000000;
  --sf-color-grid-row-hover-outline: #c3e9fa;
  --sf-color-grid-row-hover-outline-rgb: 195,233,250;
  --sf-color-grid-row-hover-outline-tint: rgb(222, 242.9, 252.25);
  --sf-color-grid-row-hover-outline-shade: rgb(18.8269230769, 161.9115384615, 225.9230769231);
  --sf-color-grid-row-hover-outline-contrast: #000000;
  --sf-color-grid-row-hover-outline-tint-contrast: #000000;
  --sf-color-grid-row-hover-outline-shade-contrast: #ffffff;
  --sf-color-grid-row-selected-bg: #d8f4ff;
  --sf-color-grid-row-selected-bg-rgb: 216,244,255;
  --sf-color-grid-row-selected-bg-tint: rgb(233.55, 248.95, 255);
  --sf-color-grid-row-selected-bg-shade: rgb(4.05, 184.2192307692, 255);
  --sf-color-grid-row-selected-bg-contrast: #000000;
  --sf-color-grid-row-selected-bg-tint-contrast: #000000;
  --sf-color-grid-row-selected-bg-shade-contrast: #000000;
  --sf-color-grid-row-selected-outline: #6cc9f4;
  --sf-color-grid-row-selected-outline-rgb: 108,201,244;
  --sf-color-grid-row-selected-outline-tint: rgb(174.15, 225.3, 248.95);
  --sf-color-grid-row-selected-outline-shade: rgb(13.4784810127, 127.4329113924, 180.1215189873);
  --sf-color-grid-row-selected-outline-contrast: #000000;
  --sf-color-grid-row-selected-outline-tint-contrast: #000000;
  --sf-color-grid-row-selected-outline-shade-contrast: #ffffff;
  --sf-color-input-background: white;
  --sf-color-input-background-rgb: 255,255,255;
  --sf-color-input-background-tint: white;
  --sf-color-input-background-shade: rgb(140.25, 140.25, 140.25);
  --sf-color-input-background-contrast: #000000;
  --sf-color-input-background-tint-contrast: #000000;
  --sf-color-input-background-shade-contrast: #ffffff;
  --sf-color-read-only-input-background: #e8edf3;
  --sf-color-read-only-input-background-rgb: 232,237,243;
  --sf-color-read-only-input-background-tint: rgb(242.35, 245.1, 248.4);
  --sf-color-read-only-input-background-shade: rgb(91.5357142857, 127.0714285714, 169.7142857143);
  --sf-color-read-only-input-background-contrast: #000000;
  --sf-color-read-only-input-background-tint-contrast: #000000;
  --sf-color-read-only-input-background-shade-contrast: #ffffff;
  --sf-color-input-accent: #b2bfc9;
  --sf-color-input-accent-rgb: 178,191,201;
  --sf-color-input-accent-tint: rgb(212.65, 219.8, 225.3);
  --sf-color-input-accent-shade: rgb(85.9259541985, 106.6118320611, 122.5240458015);
  --sf-color-read-only-input-accent: #cdcdcd;
  --sf-color-read-only-input-accent-rgb: 205,205,205;
  --sf-color-read-only-input-accent-tint: rgb(227.5, 227.5, 227.5);
  --sf-color-read-only-input-accent-shade: rgb(112.75, 112.75, 112.75);
  --sf-color-published: #00a12d;
  --sf-color-published-rgb: 0,161,45;
  --sf-color-published-tint: rgb(63.05, 255, 116.700621118);
  --sf-color-published-shade: rgb(0, 88.55, 24.75);
  --sf-color-unpublished: black;
  --sf-color-unpublished-rgb: 0,0,0;
  --sf-color-unpublished-tint: rgb(114.75, 114.75, 114.75);
  --sf-color-unpublished-shade: black;
  --sf-color-favorite: #27aae1;
  --sf-color-favorite-rgb: 39,170,225;
  --sf-color-flag: #613995;
  --sf-color-flag-rgb: 97,57,149;
  --sf-color-watch: #e68200;
  --sf-color-watch-rgb: 230,130,0;
  --sf-color-critical: #546eb2;
  --sf-color-critical-rgb: 84,110,178;
  --sf-color-notification: #ff0101;
  --sf-color-notification-rgb: 255,1,1;
  --sf-color-highlight: #f3faff;
  --sf-color-highlight-rgb: 243,250,255;
  --sf-color-highlight-tint: rgb(248.4, 252.25, 255);
  --sf-color-highlight-shade: rgb(18.9, 156.625, 255);
  --sf-color-highlight-contrast: #000000;
  --sf-color-highlight-tint-contrast: #000000;
  --sf-color-highlight-shade-contrast: #ffffff;
  --sf-color-task-completed: #27aae1;
  --sf-color-task-completed-rgb: 39,170,225;
  --sf-color-task-completed-tint: rgb(136.2, 208.25, 238.5);
  --sf-color-task-completed-shade: rgb(17.7073170732, 95.0292682927, 127.4926829268);
  --sf-color-task-completed-contrast: #ffffff;
  --sf-color-task-completed-tint-contrast: #000000;
  --sf-color-task-completed-shade-contrast: #ffffff;
  --sf-color-task-completed-light: #c9deff;
  --sf-color-task-completed-light-rgb: 201,222,255;
  --sf-color-task-completed-light-tint: rgb(225.3, 236.85, 255);
  --sf-color-task-completed-light-shade: rgb(0, 97.5333333333, 250.8);
  --sf-color-task-completed-light-contrast: #000000;
  --sf-color-task-completed-light-tint-contrast: #000000;
  --sf-color-task-completed-light-shade-contrast: #ffffff;
  --sf-color-task-completed-badge: rgba(39, 170, 225, 0.1);
  --sf-color-task-completed-badge-rgb: 39,170,225;
  --sf-color-task-completed-badge-tint: rgba(136.2, 208.25, 238.5, 0.1);
  --sf-color-task-completed-badge-shade: rgba(17.7073170732, 95.0292682927, 127.4926829268, 0.1);
  --sf-color-task-completed-badge-contrast: #ffffff;
  --sf-color-task-completed-badge-tint-contrast: #000000;
  --sf-color-task-completed-badge-shade-contrast: #ffffff;
  --sf-color-task-completed-badge-fg: #27aae1;
  --sf-color-task-completed-badge-fg-rgb: 39,170,225;
  --sf-color-task-completed-badge-fg-tint: rgb(136.2, 208.25, 238.5);
  --sf-color-task-completed-badge-fg-shade: rgb(17.7073170732, 95.0292682927, 127.4926829268);
  --sf-color-task-completed-badge-fg-contrast: #ffffff;
  --sf-color-task-completed-badge-fg-tint-contrast: #000000;
  --sf-color-task-completed-badge-fg-shade-contrast: #ffffff;
  --sf-color-task-delayed: #e13b27;
  --sf-color-task-delayed-rgb: 225,59,39;
  --sf-color-task-delayed-tint: rgb(238.5, 147.2, 136.2);
  --sf-color-task-delayed-shade: rgb(127.4926829268, 29.512195122, 17.7073170732);
  --sf-color-task-delayed-contrast: #ffffff;
  --sf-color-task-delayed-tint-contrast: #000000;
  --sf-color-task-delayed-shade-contrast: #ffffff;
  --sf-color-task-delayed-light: #fcd0d3;
  --sf-color-task-delayed-light-rgb: 252,208,211;
  --sf-color-task-delayed-light-tint: rgb(253.35, 229.15, 230.8);
  --sf-color-task-delayed-light-shade: rgb(237.82, 15.18, 30.36);
  --sf-color-task-delayed-light-contrast: #000000;
  --sf-color-task-delayed-light-tint-contrast: #000000;
  --sf-color-task-delayed-light-shade-contrast: #ffffff;
  --sf-color-task-delayed-badge: rgba(225, 59, 39, 0.1);
  --sf-color-task-delayed-badge-rgb: 225,59,39;
  --sf-color-task-delayed-badge-tint: rgba(238.5, 147.2, 136.2, 0.1);
  --sf-color-task-delayed-badge-shade: rgba(127.4926829268, 29.512195122, 17.7073170732, 0.1);
  --sf-color-task-delayed-badge-contrast: #ffffff;
  --sf-color-task-delayed-badge-tint-contrast: #000000;
  --sf-color-task-delayed-badge-shade-contrast: #ffffff;
  --sf-color-task-delayed-badge-fg: #e13b27;
  --sf-color-task-delayed-badge-fg-rgb: 225,59,39;
  --sf-color-task-delayed-badge-fg-tint: rgb(238.5, 147.2, 136.2);
  --sf-color-task-delayed-badge-fg-shade: rgb(127.4926829268, 29.512195122, 17.7073170732);
  --sf-color-task-delayed-badge-fg-contrast: #ffffff;
  --sf-color-task-delayed-badge-fg-tint-contrast: #000000;
  --sf-color-task-delayed-badge-fg-shade-contrast: #ffffff;
  --sf-color-task-at-risk: #ffd000;
  --sf-color-task-at-risk-rgb: 255,208,0;
  --sf-color-task-at-risk-tint: rgb(255, 229.15, 114.75);
  --sf-color-task-at-risk-shade: rgb(140.25, 114.4, 0);
  --sf-color-task-at-risk-contrast: #000000;
  --sf-color-task-at-risk-tint-contrast: #000000;
  --sf-color-task-at-risk-shade-contrast: #ffffff;
  --sf-color-task-at-risk-light: #ffeac0;
  --sf-color-task-at-risk-light-rgb: 255,234,192;
  --sf-color-task-at-risk-light-tint: rgb(255, 243.45, 220.35);
  --sf-color-task-at-risk-light-shade: rgb(245.85, 163.9, 0);
  --sf-color-task-at-risk-light-contrast: #000000;
  --sf-color-task-at-risk-light-tint-contrast: #000000;
  --sf-color-task-at-risk-light-shade-contrast: #000000;
  --sf-color-task-at-risk-badge: rgba(255, 221, 44, 0.1);
  --sf-color-task-at-risk-badge-rgb: 255,221,44;
  --sf-color-task-at-risk-badge-tint: rgba(255, 236.3, 138.95, 0.1);
  --sf-color-task-at-risk-badge-shade: rgba(164.45, 137.9509478673, 0, 0.1);
  --sf-color-task-at-risk-badge-contrast: #000000;
  --sf-color-task-at-risk-badge-tint-contrast: #000000;
  --sf-color-task-at-risk-badge-shade-contrast: #ffffff;
  --sf-color-task-at-risk-badge-fg: #ffd000;
  --sf-color-task-at-risk-badge-fg-rgb: 255,208,0;
  --sf-color-task-at-risk-badge-fg-tint: rgb(255, 229.15, 114.75);
  --sf-color-task-at-risk-badge-fg-shade: rgb(140.25, 114.4, 0);
  --sf-color-task-at-risk-badge-fg-contrast: #000000;
  --sf-color-task-at-risk-badge-fg-tint-contrast: #000000;
  --sf-color-task-at-risk-badge-fg-shade-contrast: #ffffff;
  --sf-color-task-missing-timeline: white;
  --sf-color-task-missing-timeline-rgb: 255,255,255;
  --sf-color-task-missing-timeline-tint: white;
  --sf-color-task-missing-timeline-shade: rgb(140.25, 140.25, 140.25);
  --sf-color-task-missing-timeline-contrast: #000000;
  --sf-color-task-missing-timeline-tint-contrast: #000000;
  --sf-color-task-missing-timeline-shade-contrast: #ffffff;
  --sf-color-task-missing-timeline-badge: rgba(255, 255, 255, 0.1);
  --sf-color-task-missing-timeline-badge-rgb: 255,255,255;
  --sf-color-task-missing-timeline-badge-tint: rgba(255, 255, 255, 0.1);
  --sf-color-task-missing-timeline-badge-shade: rgba(140.25, 140.25, 140.25, 0.1);
  --sf-color-task-missing-timeline-badge-contrast: #000000;
  --sf-color-task-missing-timeline-badge-tint-contrast: #000000;
  --sf-color-task-missing-timeline-badge-shade-contrast: #ffffff;
  --sf-color-task-missing-timeline-badge-fg: #252525;
  --sf-color-task-missing-timeline-badge-fg-rgb: 37,37,37;
  --sf-color-task-missing-timeline-badge-fg-tint: rgb(135.1, 135.1, 135.1);
  --sf-color-task-missing-timeline-badge-fg-shade: rgb(20.35, 20.35, 20.35);
  --sf-color-task-missing-timeline-badge-fg-contrast: #ffffff;
  --sf-color-task-missing-timeline-badge-fg-tint-contrast: #ffffff;
  --sf-color-task-missing-timeline-badge-fg-shade-contrast: #ffffff;
  --sf-color-task-not-started: #e0e0e0;
  --sf-color-task-not-started-rgb: 224,224,224;
  --sf-color-task-not-started-tint: rgb(237.95, 237.95, 237.95);
  --sf-color-task-not-started-shade: rgb(123.2, 123.2, 123.2);
  --sf-color-task-not-started-contrast: #000000;
  --sf-color-task-not-started-tint-contrast: #000000;
  --sf-color-task-not-started-shade-contrast: #ffffff;
  --sf-color-task-not-started-light: #d5d9e0;
  --sf-color-task-not-started-light-rgb: 213,217,224;
  --sf-color-task-not-started-light-tint: rgb(231.9, 234.1, 237.95);
  --sf-color-task-not-started-light-shade: rgb(102.0664383562, 115.2363013699, 138.2835616438);
  --sf-color-task-not-started-light-contrast: #000000;
  --sf-color-task-not-started-light-tint-contrast: #000000;
  --sf-color-task-not-started-light-shade-contrast: #ffffff;
  --sf-color-task-not-started-badge: rgba(245, 245, 245, 0.1);
  --sf-color-task-not-started-badge-rgb: 245,245,245;
  --sf-color-task-not-started-badge-tint: rgba(249.5, 249.5, 249.5, 0.1);
  --sf-color-task-not-started-badge-shade: rgba(134.75, 134.75, 134.75, 0.1);
  --sf-color-task-not-started-badge-contrast: #000000;
  --sf-color-task-not-started-badge-tint-contrast: #000000;
  --sf-color-task-not-started-badge-shade-contrast: #ffffff;
  --sf-color-task-not-started-badge-fg: #e0e0e0;
  --sf-color-task-not-started-badge-fg-rgb: 224,224,224;
  --sf-color-task-not-started-badge-fg-tint: rgb(237.95, 237.95, 237.95);
  --sf-color-task-not-started-badge-fg-shade: rgb(123.2, 123.2, 123.2);
  --sf-color-task-not-started-badge-fg-contrast: #000000;
  --sf-color-task-not-started-badge-fg-tint-contrast: #000000;
  --sf-color-task-not-started-badge-fg-shade-contrast: #ffffff;
  --sf-color-task-on-track: #27e193;
  --sf-color-task-on-track-rgb: 39,225,147;
  --sf-color-task-on-track-tint: rgb(136.2, 238.5, 195.6);
  --sf-color-task-on-track-shade: rgb(17.7073170732, 127.4926829268, 81.4536585366);
  --sf-color-task-on-track-contrast: #000000;
  --sf-color-task-on-track-tint-contrast: #000000;
  --sf-color-task-on-track-shade-contrast: #ffffff;
  --sf-color-task-on-track-light: #9deeb2;
  --sf-color-task-on-track-light-rgb: 157,238,178;
  --sf-color-task-on-track-light-tint: rgb(201.1, 245.65, 212.65);
  --sf-color-task-on-track-light-shade: rgb(32.1152173913, 185.1347826087, 71.7869565217);
  --sf-color-task-on-track-light-contrast: #000000;
  --sf-color-task-on-track-light-tint-contrast: #000000;
  --sf-color-task-on-track-light-shade-contrast: #ffffff;
  --sf-color-task-on-track-badge: rgba(39, 225, 147, 0.1);
  --sf-color-task-on-track-badge-rgb: 39,225,147;
  --sf-color-task-on-track-badge-tint: rgba(136.2, 238.5, 195.6, 0.1);
  --sf-color-task-on-track-badge-shade: rgba(17.7073170732, 127.4926829268, 81.4536585366, 0.1);
  --sf-color-task-on-track-badge-contrast: #000000;
  --sf-color-task-on-track-badge-tint-contrast: #000000;
  --sf-color-task-on-track-badge-shade-contrast: #ffffff;
  --sf-color-task-on-track-badge-fg: #27e193;
  --sf-color-task-on-track-badge-fg-rgb: 39,225,147;
  --sf-color-task-on-track-badge-fg-tint: rgb(136.2, 238.5, 195.6);
  --sf-color-task-on-track-badge-fg-shade: rgb(17.7073170732, 127.4926829268, 81.4536585366);
  --sf-color-task-on-track-badge-fg-contrast: #000000;
  --sf-color-task-on-track-badge-fg-tint-contrast: #000000;
  --sf-color-task-on-track-badge-fg-shade-contrast: #ffffff;
  --sf-color-danger-light: rgba(240, 65, 65, 0.25);
  --sf-color-danger-light-rgb: 240,65,65;
  --sf-color-danger-light-tint: rgba(246.75, 150.5, 150.5, 0.25);
  --sf-color-danger-light-shade: rgba(155.4756097561, 12.2743902439, 12.2743902439, 0.25);
  --sf-color-danger-light-contrast: #ffffff;
  --sf-color-danger-light-tint-contrast: #000000;
  --sf-color-danger-light-shade-contrast: #ffffff;
  --sfumato-dummy-suffix: '';
}

@media (prefers-color-scheme: dark) {
  html[auto-theme] {
    --sfumato-dummy-prefix: '';
    --sf-color-white: black;
    --sf-color-white-rgb: 0,0,0;
    --sf-color-white-contrast: #ffffff;
    --sf-color-black: white;
    --sf-color-black-rgb: 255,255,255;
    --sf-color-black-contrast: #000000;
    --sf-color-super-light: #101010;
    --sf-color-super-light-rgb: 16,16,16;
    --sf-color-super-light-tint: rgb(8.8, 8.8, 8.8);
    --sf-color-super-light-shade: rgb(123.55, 123.55, 123.55);
    --sf-color-super-light-contrast: #ffffff;
    --sf-color-super-light-tint-contrast: #ffffff;
    --sf-color-super-light-shade-contrast: #ffffff;
    --sf-color-light: #282828;
    --sf-color-light-rgb: 40,40,40;
    --sf-color-light-tint: #161616;
    --sf-color-light-shade: rgb(136.75, 136.75, 136.75);
    --sf-color-light-contrast: #ffffff;
    --sf-color-light-tint-contrast: #ffffff;
    --sf-color-light-shade-contrast: #ffffff;
    --sf-color-medium: #757575;
    --sf-color-medium-rgb: 117,117,117;
    --sf-color-medium-tint: rgb(64.35, 64.35, 64.35);
    --sf-color-medium-shade: rgb(179.1, 179.1, 179.1);
    --sf-color-medium-contrast: #ffffff;
    --sf-color-medium-tint-contrast: #ffffff;
    --sf-color-medium-shade-contrast: #000000;
    --sf-color-dark: #efefef;
    --sf-color-dark-rgb: 239,239,239;
    --sf-color-dark-tint: rgb(131.45, 131.45, 131.45);
    --sf-color-dark-shade: rgb(246.2, 246.2, 246.2);
    --sf-color-dark-contrast: #000000;
    --sf-color-dark-tint-contrast: #ffffff;
    --sf-color-dark-shade-contrast: #000000;
    --sf-color-black-translucent: rgba(255, 255, 255, 0.25);
    --sf-color-black-translucent-rgb: 255,255,255;
    --sf-color-white-translucent: rgba(0, 0, 0, 0.25);
    --sf-color-white-translucent-rgb: 0,0,0;
    --sf-color-silver: #a6a3a3;
    --sf-color-silver-rgb: 166,163,163;
    --sf-color-silver-tint: rgb(91.9745856354, 88.9754143646, 88.9754143646);
    --sf-color-silver-shade: rgb(206.05, 204.4, 204.4);
    --sf-color-silver-contrast: #000000;
    --sf-color-silver-tint-contrast: #ffffff;
    --sf-color-silver-shade-contrast: #000000;
    --sf-color-gold: #b68c41;
    --sf-color-gold-rgb: 182,140,65;
    --sf-color-gold-tint: rgb(100.1, 77, 35.75);
    --sf-color-gold-shade: rgb(216.9342105263, 192.337854251, 148.4157894737);
    --sf-color-gold-contrast: #ffffff;
    --sf-color-gold-tint-contrast: #ffffff;
    --sf-color-gold-shade-contrast: #000000;
    --sf-color-brown: #604131;
    --sf-color-brown-rgb: 96,65,49;
    --sf-color-brown-tint: rgb(52.8, 35.75, 26.95);
    --sf-color-brown-shade: rgb(187.1603448276, 144.2413793103, 122.0896551724);
    --sf-color-brown-contrast: #ffffff;
    --sf-color-brown-tint-contrast: #ffffff;
    --sf-color-brown-shade-contrast: #ffffff;
    --sf-color-yellow: #e8b825;
    --sf-color-yellow-rgb: 232,184,37;
    --sf-color-yellow-tint: rgb(133.8302904564, 104.3630705394, 14.1197095436);
    --sf-color-yellow-shade: rgb(242.35, 215.95, 135.1);
    --sf-color-yellow-contrast: #000000;
    --sf-color-yellow-tint-contrast: #ffffff;
    --sf-color-yellow-shade-contrast: #000000;
    --sf-color-orange: #d66629;
    --sf-color-orange-rgb: 214,102,41;
    --sf-color-orange-tint: rgb(117.7, 56.1, 22.55);
    --sf-color-orange-shade: rgb(232.45, 170.85, 137.3);
    --sf-color-orange-contrast: #ffffff;
    --sf-color-orange-tint-contrast: #ffffff;
    --sf-color-orange-shade-contrast: #000000;
    --sf-color-red: #f04141;
    --sf-color-red-rgb: 240,65,65;
    --sf-color-red-tint: rgb(155.4756097561, 12.2743902439, 12.2743902439);
    --sf-color-red-shade: rgb(246.75, 150.5, 150.5);
    --sf-color-red-contrast: #ffffff;
    --sf-color-red-tint-contrast: #ffffff;
    --sf-color-red-shade-contrast: #000000;
    --sf-color-purple: #6a3db6;
    --sf-color-purple-rgb: 106,61,182;
    --sf-color-purple-tint: rgb(58.3, 33.55, 100.1);
    --sf-color-purple-shade: rgb(172.2080246914, 145.0135802469, 218.1364197531);
    --sf-color-purple-contrast: #ffffff;
    --sf-color-purple-tint-contrast: #ffffff;
    --sf-color-purple-shade-contrast: #ffffff;
    --sf-color-blue: #0088ff;
    --sf-color-blue-rgb: 0,136,255;
    --sf-color-blue-tint: rgb(0, 74.8, 140.25);
    --sf-color-blue-shade: rgb(114.75, 189.55, 255);
    --sf-color-blue-contrast: #ffffff;
    --sf-color-blue-tint-contrast: #ffffff;
    --sf-color-blue-shade-contrast: #000000;
    --sf-color-green: #27b36b;
    --sf-color-green-rgb: 39,179,107;
    --sf-color-green-tint: rgb(21.45, 98.45, 58.85);
    --sf-color-green-shade: rgb(123.1311926606, 226.2688073394, 173.2266055046);
    --sf-color-green-contrast: #ffffff;
    --sf-color-green-tint-contrast: #ffffff;
    --sf-color-green-shade-contrast: #000000;
    --sf-color-primary: #00315c;
    --sf-color-primary-rgb: 0,49,92;
    --sf-color-primary-tint: rgb(0, 26.95, 50.6);
    --sf-color-primary-shade: rgb(25.1, 147.5467391304, 255);
    --sf-color-primary-contrast: #ffffff;
    --sf-color-primary-tint-contrast: #ffffff;
    --sf-color-primary-shade-contrast: #ffffff;
    --sf-color-secondary: #27aae1;
    --sf-color-secondary-rgb: 39,170,225;
    --sf-color-secondary-tint: rgb(17.7073170732, 95.0292682927, 127.4926829268);
    --sf-color-secondary-shade: rgb(136.2, 208.25, 238.5);
    --sf-color-secondary-contrast: #ffffff;
    --sf-color-secondary-tint-contrast: #ffffff;
    --sf-color-secondary-shade-contrast: #000000;
    --sf-color-tertiary: #304659;
    --sf-color-tertiary-rgb: 48,70,89;
    --sf-color-tertiary-tint: rgb(26.4, 38.5, 48.95);
    --sf-color-tertiary-shade: rgb(121.7273722628, 154.6711678832, 183.1226277372);
    --sf-color-tertiary-contrast: #ffffff;
    --sf-color-tertiary-tint-contrast: #ffffff;
    --sf-color-tertiary-shade-contrast: #ffffff;
    --sf-color-quaternary: #27e193;
    --sf-color-quaternary-rgb: 39,225,147;
    --sf-color-quaternary-tint: rgb(17.7073170732, 127.4926829268, 81.4536585366);
    --sf-color-quaternary-shade: rgb(136.2, 238.5, 195.6);
    --sf-color-quaternary-contrast: #000000;
    --sf-color-quaternary-tint-contrast: #ffffff;
    --sf-color-quaternary-shade-contrast: #000000;
    --sf-color-quinary: #27e193;
    --sf-color-quinary-rgb: 39,225,147;
    --sf-color-quinary-tint: rgb(17.7073170732, 127.4926829268, 81.4536585366);
    --sf-color-quinary-shade: rgb(136.2, 238.5, 195.6);
    --sf-color-quinary-contrast: #000000;
    --sf-color-quinary-tint-contrast: #ffffff;
    --sf-color-quinary-shade-contrast: #000000;
    --sf-color-canvas-gradient1: #00315c;
    --sf-color-canvas-gradient1-rgb: 0,49,92;
    --sf-color-canvas-gradient2: #011f43;
    --sf-color-canvas-gradient2-rgb: 1,31,67;
    --sf-color-menu-hover: #527799;
    --sf-color-menu-hover-rgb: 82,119,153;
    --sf-color-menu-hover-contrast: #ffffff;
    --sf-color-light: #1d1f21;
    --sf-color-light-rgb: 29,31,33;
    --sf-color-light-tint: rgb(15.95, 17.05, 18.15);
    --sf-color-light-shade: rgb(123.8516129032, 131.8, 139.7483870968);
    --sf-color-light-contrast: #ffffff;
    --sf-color-light-tint-contrast: #ffffff;
    --sf-color-light-shade-contrast: #ffffff;
    --sf-color-overlay: rgba(48, 70, 89, 0.95);
    --sf-color-overlay-rgb: 48,70,89;
    --sf-color-overlay-contrast: #ffffff;
    --sf-color-busy-overlay: rgba(0, 0, 0, 0.65);
    --sf-color-busy-overlay-rgb: 0,0,0;
    --sf-color-busy-overlay-contrast: #ffffff;
    --sf-color-blank-canvas: #00315c;
    --sf-color-blank-canvas-rgb: 0,49,92;
    --sf-color-blank-canvas-contrast: #ffffff;
    --sf-color-canvas: #181818;
    --sf-color-canvas-rgb: 24,24,24;
    --sf-color-canvas-contrast: #ffffff;
    --sf-color-panel: #1f1f1f;
    --sf-color-panel-rgb: 31,31,31;
    --sf-color-panel-tint: rgb(17.05, 17.05, 17.05);
    --sf-color-panel-shade: rgb(131.8, 131.8, 131.8);
    --sf-color-panel-contrast: #ffffff;
    --sf-color-panel-tint-contrast: #ffffff;
    --sf-color-panel-shade-contrast: #ffffff;
    --sf-color-tab: #181d23;
    --sf-color-tab-rgb: 24,29,35;
    --sf-color-tab-tint: rgb(13.2, 15.95, 19.25);
    --sf-color-tab-shade: rgb(107.8516949153, 128.8728813559, 154.0983050847);
    --sf-color-tab-contrast: #ffffff;
    --sf-color-tab-tint-contrast: #ffffff;
    --sf-color-tab-shade-contrast: #ffffff;
    --sf-color-tab-alt: #546eb2;
    --sf-color-tab-alt-rgb: 84,110,178;
    --sf-color-tab-alt-tint: rgb(44.7407258065, 59.847983871, 99.3592741935);
    --sf-color-tab-alt-shade: rgb(160.95, 175.25, 212.65);
    --sf-color-tab-alt-contrast: #ffffff;
    --sf-color-tab-alt-tint-contrast: #ffffff;
    --sf-color-tab-alt-shade-contrast: #000000;
    --sf-color-tab-line: #a8adb3;
    --sf-color-tab-line-rgb: 168,173,179;
    --sf-color-tab-line-tint: rgb(88.9852760736, 94.8395705521, 101.8647239264);
    --sf-color-tab-line-shade: rgb(207.15, 209.9, 213.2);
    --sf-color-tab-line-contrast: #000000;
    --sf-color-tab-line-tint-contrast: #ffffff;
    --sf-color-tab-line-shade-contrast: #000000;
    --sf-color-tab-selected: #243f4c;
    --sf-color-tab-selected-rgb: 36,63,76;
    --sf-color-tab-selected-tint: rgb(19.8, 34.65, 41.8);
    --sf-color-tab-selected-shade: rgb(106.4607142857, 159.23125, 184.6392857143);
    --sf-color-tab-selected-contrast: #ffffff;
    --sf-color-tab-selected-tint-contrast: #ffffff;
    --sf-color-tab-selected-shade-contrast: #ffffff;
    --sf-color-tab-line-selected: #27aae1;
    --sf-color-tab-line-selected-rgb: 39,170,225;
    --sf-color-tab-line-selected-tint: rgb(17.7073170732, 95.0292682927, 127.4926829268);
    --sf-color-tab-line-selected-shade: rgb(136.2, 208.25, 238.5);
    --sf-color-tab-line-selected-contrast: #ffffff;
    --sf-color-tab-line-selected-tint-contrast: #ffffff;
    --sf-color-tab-line-selected-shade-contrast: #000000;
    --sf-color-grid-row-hover-bg: #202324;
    --sf-color-grid-row-hover-bg-rgb: 32,35,36;
    --sf-color-grid-row-hover-bg-tint: rgb(17.6, 19.25, 19.8);
    --sf-color-grid-row-hover-bg-shade: rgb(126.3, 137.025, 140.6);
    --sf-color-grid-row-hover-bg-contrast: #ffffff;
    --sf-color-grid-row-hover-bg-tint-contrast: #ffffff;
    --sf-color-grid-row-hover-bg-shade-contrast: #ffffff;
    --sf-color-grid-row-hover-outline: #404344;
    --sf-color-grid-row-hover-outline-rgb: 64,67,68;
    --sf-color-grid-row-hover-outline-tint: rgb(35.2, 36.85, 37.4);
    --sf-color-grid-row-hover-outline-shade: rgb(147.9, 152.625, 154.2);
    --sf-color-grid-row-hover-outline-contrast: #ffffff;
    --sf-color-grid-row-hover-outline-tint-contrast: #ffffff;
    --sf-color-grid-row-hover-outline-shade-contrast: #ffffff;
    --sf-color-grid-row-selected-bg: #2a414d;
    --sf-color-grid-row-selected-bg-rgb: 42,65,77;
    --sf-color-grid-row-selected-bg-tint: rgb(23.1, 35.75, 42.35);
    --sf-color-grid-row-selected-bg-shade: rgb(115.85, 157.4142857143, 179.1);
    --sf-color-grid-row-selected-bg-contrast: #ffffff;
    --sf-color-grid-row-selected-bg-tint-contrast: #ffffff;
    --sf-color-grid-row-selected-bg-shade-contrast: #ffffff;
    --sf-color-grid-row-selected-outline: #45798a;
    --sf-color-grid-row-selected-outline-rgb: 69,121,138;
    --sf-color-grid-row-selected-outline-tint: rgb(37.95, 66.55, 75.9);
    --sf-color-grid-row-selected-outline-shade: rgb(143.9, 185.7637681159, 199.45);
    --sf-color-grid-row-selected-outline-contrast: #ffffff;
    --sf-color-grid-row-selected-outline-tint-contrast: #ffffff;
    --sf-color-grid-row-selected-outline-shade-contrast: #000000;
    --sf-color-input-background: #1a1a1a;
    --sf-color-input-background-rgb: 26,26,26;
    --sf-color-input-background-tint: rgb(14.3, 14.3, 14.3);
    --sf-color-input-background-shade: rgb(129.05, 129.05, 129.05);
    --sf-color-input-background-contrast: #ffffff;
    --sf-color-input-background-tint-contrast: #ffffff;
    --sf-color-input-background-shade-contrast: #ffffff;
    --sf-color-read-only-input-background: #282828;
    --sf-color-read-only-input-background-rgb: 40,40,40;
    --sf-color-read-only-input-background-tint: #161616;
    --sf-color-read-only-input-background-shade: rgb(136.75, 136.75, 136.75);
    --sf-color-read-only-input-background-contrast: #ffffff;
    --sf-color-read-only-input-background-tint-contrast: #ffffff;
    --sf-color-read-only-input-background-shade-contrast: #ffffff;
    --sf-color-input-accent: rgba(255, 255, 255, 0.3);
    --sf-color-input-accent-rgb: 255,255,255;
    --sf-color-input-accent-tint: rgb(140.25, 140.25, 140.25);
    --sf-color-input-accent-shade: white;
    --sf-color-read-only-input-accent: rgba(205, 205, 205, 0.3);
    --sf-color-read-only-input-accent-rgb: 205,205,205;
    --sf-color-read-only-input-accent-tint: rgb(112.75, 112.75, 112.75);
    --sf-color-read-only-input-accent-shade: rgb(227.5, 227.5, 227.5);
    --sf-color-published: #00a12d;
    --sf-color-published-rgb: 0,161,45;
    --sf-color-published-tint: rgb(0, 88.55, 24.75);
    --sf-color-published-shade: rgb(63.05, 255, 116.700621118);
    --sf-color-unpublished: black;
    --sf-color-unpublished-rgb: 0,0,0;
    --sf-color-unpublished-tint: black;
    --sf-color-unpublished-shade: rgb(114.75, 114.75, 114.75);
    --sf-color-favorite: #27aae1;
    --sf-color-favorite-rgb: 39,170,225;
    --sf-color-flag: #613995;
    --sf-color-flag-rgb: 97,57,149;
    --sf-color-watch: #e68200;
    --sf-color-watch-rgb: 230,130,0;
    --sf-color-critical: #546eb2;
    --sf-color-critical-rgb: 84,110,178;
    --sf-color-notification: #ff0101;
    --sf-color-notification-rgb: 255,1,1;
    --sf-color-highlight: #253640;
    --sf-color-highlight-rgb: 37,54,64;
    --sf-color-highlight-tint: rgb(20.35, 29.7, 35.2);
    --sf-color-highlight-shade: rgb(112.4574257426, 150.3202970297, 172.5925742574);
    --sf-color-highlight-contrast: #ffffff;
    --sf-color-highlight-tint-contrast: #ffffff;
    --sf-color-highlight-shade-contrast: #ffffff;
    --sf-color-danger-light: rgba(240, 65, 65, 0.25);
    --sf-color-danger-light-rgb: 240,65,65;
    --sf-color-danger-light-tint: rgba(155.4756097561, 12.2743902439, 12.2743902439, 0.25);
    --sf-color-danger-light-shade: rgba(246.75, 150.5, 150.5, 0.25);
    --sf-color-danger-light-contrast: #ffffff;
    --sf-color-danger-light-tint-contrast: #ffffff;
    --sf-color-danger-light-shade-contrast: #000000;
    --sfumato-dummy-suffix: '';
  }
}
html[dark-theme] {
  --sfumato-dummy-prefix: '';
  --sf-color-white: black;
  --sf-color-white-rgb: 0,0,0;
  --sf-color-white-contrast: #ffffff;
  --sf-color-black: white;
  --sf-color-black-rgb: 255,255,255;
  --sf-color-black-contrast: #000000;
  --sf-color-super-light: #101010;
  --sf-color-super-light-rgb: 16,16,16;
  --sf-color-super-light-tint: rgb(8.8, 8.8, 8.8);
  --sf-color-super-light-shade: rgb(123.55, 123.55, 123.55);
  --sf-color-super-light-contrast: #ffffff;
  --sf-color-super-light-tint-contrast: #ffffff;
  --sf-color-super-light-shade-contrast: #ffffff;
  --sf-color-light: #282828;
  --sf-color-light-rgb: 40,40,40;
  --sf-color-light-tint: #161616;
  --sf-color-light-shade: rgb(136.75, 136.75, 136.75);
  --sf-color-light-contrast: #ffffff;
  --sf-color-light-tint-contrast: #ffffff;
  --sf-color-light-shade-contrast: #ffffff;
  --sf-color-medium: #757575;
  --sf-color-medium-rgb: 117,117,117;
  --sf-color-medium-tint: rgb(64.35, 64.35, 64.35);
  --sf-color-medium-shade: rgb(179.1, 179.1, 179.1);
  --sf-color-medium-contrast: #ffffff;
  --sf-color-medium-tint-contrast: #ffffff;
  --sf-color-medium-shade-contrast: #000000;
  --sf-color-dark: #efefef;
  --sf-color-dark-rgb: 239,239,239;
  --sf-color-dark-tint: rgb(131.45, 131.45, 131.45);
  --sf-color-dark-shade: rgb(246.2, 246.2, 246.2);
  --sf-color-dark-contrast: #000000;
  --sf-color-dark-tint-contrast: #ffffff;
  --sf-color-dark-shade-contrast: #000000;
  --sf-color-black-translucent: rgba(255, 255, 255, 0.25);
  --sf-color-black-translucent-rgb: 255,255,255;
  --sf-color-white-translucent: rgba(0, 0, 0, 0.25);
  --sf-color-white-translucent-rgb: 0,0,0;
  --sf-color-silver: #a6a3a3;
  --sf-color-silver-rgb: 166,163,163;
  --sf-color-silver-tint: rgb(91.9745856354, 88.9754143646, 88.9754143646);
  --sf-color-silver-shade: rgb(206.05, 204.4, 204.4);
  --sf-color-silver-contrast: #000000;
  --sf-color-silver-tint-contrast: #ffffff;
  --sf-color-silver-shade-contrast: #000000;
  --sf-color-gold: #b68c41;
  --sf-color-gold-rgb: 182,140,65;
  --sf-color-gold-tint: rgb(100.1, 77, 35.75);
  --sf-color-gold-shade: rgb(216.9342105263, 192.337854251, 148.4157894737);
  --sf-color-gold-contrast: #ffffff;
  --sf-color-gold-tint-contrast: #ffffff;
  --sf-color-gold-shade-contrast: #000000;
  --sf-color-brown: #604131;
  --sf-color-brown-rgb: 96,65,49;
  --sf-color-brown-tint: rgb(52.8, 35.75, 26.95);
  --sf-color-brown-shade: rgb(187.1603448276, 144.2413793103, 122.0896551724);
  --sf-color-brown-contrast: #ffffff;
  --sf-color-brown-tint-contrast: #ffffff;
  --sf-color-brown-shade-contrast: #ffffff;
  --sf-color-yellow: #e8b825;
  --sf-color-yellow-rgb: 232,184,37;
  --sf-color-yellow-tint: rgb(133.8302904564, 104.3630705394, 14.1197095436);
  --sf-color-yellow-shade: rgb(242.35, 215.95, 135.1);
  --sf-color-yellow-contrast: #000000;
  --sf-color-yellow-tint-contrast: #ffffff;
  --sf-color-yellow-shade-contrast: #000000;
  --sf-color-orange: #d66629;
  --sf-color-orange-rgb: 214,102,41;
  --sf-color-orange-tint: rgb(117.7, 56.1, 22.55);
  --sf-color-orange-shade: rgb(232.45, 170.85, 137.3);
  --sf-color-orange-contrast: #ffffff;
  --sf-color-orange-tint-contrast: #ffffff;
  --sf-color-orange-shade-contrast: #000000;
  --sf-color-red: #f04141;
  --sf-color-red-rgb: 240,65,65;
  --sf-color-red-tint: rgb(155.4756097561, 12.2743902439, 12.2743902439);
  --sf-color-red-shade: rgb(246.75, 150.5, 150.5);
  --sf-color-red-contrast: #ffffff;
  --sf-color-red-tint-contrast: #ffffff;
  --sf-color-red-shade-contrast: #000000;
  --sf-color-purple: #6a3db6;
  --sf-color-purple-rgb: 106,61,182;
  --sf-color-purple-tint: rgb(58.3, 33.55, 100.1);
  --sf-color-purple-shade: rgb(172.2080246914, 145.0135802469, 218.1364197531);
  --sf-color-purple-contrast: #ffffff;
  --sf-color-purple-tint-contrast: #ffffff;
  --sf-color-purple-shade-contrast: #ffffff;
  --sf-color-blue: #0088ff;
  --sf-color-blue-rgb: 0,136,255;
  --sf-color-blue-tint: rgb(0, 74.8, 140.25);
  --sf-color-blue-shade: rgb(114.75, 189.55, 255);
  --sf-color-blue-contrast: #ffffff;
  --sf-color-blue-tint-contrast: #ffffff;
  --sf-color-blue-shade-contrast: #000000;
  --sf-color-green: #27b36b;
  --sf-color-green-rgb: 39,179,107;
  --sf-color-green-tint: rgb(21.45, 98.45, 58.85);
  --sf-color-green-shade: rgb(123.1311926606, 226.2688073394, 173.2266055046);
  --sf-color-green-contrast: #ffffff;
  --sf-color-green-tint-contrast: #ffffff;
  --sf-color-green-shade-contrast: #000000;
  --sf-color-primary: #00315c;
  --sf-color-primary-rgb: 0,49,92;
  --sf-color-primary-tint: rgb(0, 26.95, 50.6);
  --sf-color-primary-shade: rgb(25.1, 147.5467391304, 255);
  --sf-color-primary-contrast: #ffffff;
  --sf-color-primary-tint-contrast: #ffffff;
  --sf-color-primary-shade-contrast: #ffffff;
  --sf-color-secondary: #27aae1;
  --sf-color-secondary-rgb: 39,170,225;
  --sf-color-secondary-tint: rgb(17.7073170732, 95.0292682927, 127.4926829268);
  --sf-color-secondary-shade: rgb(136.2, 208.25, 238.5);
  --sf-color-secondary-contrast: #ffffff;
  --sf-color-secondary-tint-contrast: #ffffff;
  --sf-color-secondary-shade-contrast: #000000;
  --sf-color-tertiary: #304659;
  --sf-color-tertiary-rgb: 48,70,89;
  --sf-color-tertiary-tint: rgb(26.4, 38.5, 48.95);
  --sf-color-tertiary-shade: rgb(121.7273722628, 154.6711678832, 183.1226277372);
  --sf-color-tertiary-contrast: #ffffff;
  --sf-color-tertiary-tint-contrast: #ffffff;
  --sf-color-tertiary-shade-contrast: #ffffff;
  --sf-color-quaternary: #27e193;
  --sf-color-quaternary-rgb: 39,225,147;
  --sf-color-quaternary-tint: rgb(17.7073170732, 127.4926829268, 81.4536585366);
  --sf-color-quaternary-shade: rgb(136.2, 238.5, 195.6);
  --sf-color-quaternary-contrast: #000000;
  --sf-color-quaternary-tint-contrast: #ffffff;
  --sf-color-quaternary-shade-contrast: #000000;
  --sf-color-quinary: #27e193;
  --sf-color-quinary-rgb: 39,225,147;
  --sf-color-quinary-tint: rgb(17.7073170732, 127.4926829268, 81.4536585366);
  --sf-color-quinary-shade: rgb(136.2, 238.5, 195.6);
  --sf-color-quinary-contrast: #000000;
  --sf-color-quinary-tint-contrast: #ffffff;
  --sf-color-quinary-shade-contrast: #000000;
  --sf-color-canvas-gradient1: #00315c;
  --sf-color-canvas-gradient1-rgb: 0,49,92;
  --sf-color-canvas-gradient2: #011f43;
  --sf-color-canvas-gradient2-rgb: 1,31,67;
  --sf-color-menu-hover: #527799;
  --sf-color-menu-hover-rgb: 82,119,153;
  --sf-color-menu-hover-contrast: #ffffff;
  --sf-color-light: #1d1f21;
  --sf-color-light-rgb: 29,31,33;
  --sf-color-light-tint: rgb(15.95, 17.05, 18.15);
  --sf-color-light-shade: rgb(123.8516129032, 131.8, 139.7483870968);
  --sf-color-light-contrast: #ffffff;
  --sf-color-light-tint-contrast: #ffffff;
  --sf-color-light-shade-contrast: #ffffff;
  --sf-color-overlay: rgba(48, 70, 89, 0.95);
  --sf-color-overlay-rgb: 48,70,89;
  --sf-color-overlay-contrast: #ffffff;
  --sf-color-busy-overlay: rgba(0, 0, 0, 0.65);
  --sf-color-busy-overlay-rgb: 0,0,0;
  --sf-color-busy-overlay-contrast: #ffffff;
  --sf-color-blank-canvas: #00315c;
  --sf-color-blank-canvas-rgb: 0,49,92;
  --sf-color-blank-canvas-contrast: #ffffff;
  --sf-color-canvas: #181818;
  --sf-color-canvas-rgb: 24,24,24;
  --sf-color-canvas-contrast: #ffffff;
  --sf-color-panel: #1f1f1f;
  --sf-color-panel-rgb: 31,31,31;
  --sf-color-panel-tint: rgb(17.05, 17.05, 17.05);
  --sf-color-panel-shade: rgb(131.8, 131.8, 131.8);
  --sf-color-panel-contrast: #ffffff;
  --sf-color-panel-tint-contrast: #ffffff;
  --sf-color-panel-shade-contrast: #ffffff;
  --sf-color-tab: #181d23;
  --sf-color-tab-rgb: 24,29,35;
  --sf-color-tab-tint: rgb(13.2, 15.95, 19.25);
  --sf-color-tab-shade: rgb(107.8516949153, 128.8728813559, 154.0983050847);
  --sf-color-tab-contrast: #ffffff;
  --sf-color-tab-tint-contrast: #ffffff;
  --sf-color-tab-shade-contrast: #ffffff;
  --sf-color-tab-alt: #546eb2;
  --sf-color-tab-alt-rgb: 84,110,178;
  --sf-color-tab-alt-tint: rgb(44.7407258065, 59.847983871, 99.3592741935);
  --sf-color-tab-alt-shade: rgb(160.95, 175.25, 212.65);
  --sf-color-tab-alt-contrast: #ffffff;
  --sf-color-tab-alt-tint-contrast: #ffffff;
  --sf-color-tab-alt-shade-contrast: #000000;
  --sf-color-tab-line: #a8adb3;
  --sf-color-tab-line-rgb: 168,173,179;
  --sf-color-tab-line-tint: rgb(88.9852760736, 94.8395705521, 101.8647239264);
  --sf-color-tab-line-shade: rgb(207.15, 209.9, 213.2);
  --sf-color-tab-line-contrast: #000000;
  --sf-color-tab-line-tint-contrast: #ffffff;
  --sf-color-tab-line-shade-contrast: #000000;
  --sf-color-tab-selected: #243f4c;
  --sf-color-tab-selected-rgb: 36,63,76;
  --sf-color-tab-selected-tint: rgb(19.8, 34.65, 41.8);
  --sf-color-tab-selected-shade: rgb(106.4607142857, 159.23125, 184.6392857143);
  --sf-color-tab-selected-contrast: #ffffff;
  --sf-color-tab-selected-tint-contrast: #ffffff;
  --sf-color-tab-selected-shade-contrast: #ffffff;
  --sf-color-tab-line-selected: #27aae1;
  --sf-color-tab-line-selected-rgb: 39,170,225;
  --sf-color-tab-line-selected-tint: rgb(17.7073170732, 95.0292682927, 127.4926829268);
  --sf-color-tab-line-selected-shade: rgb(136.2, 208.25, 238.5);
  --sf-color-tab-line-selected-contrast: #ffffff;
  --sf-color-tab-line-selected-tint-contrast: #ffffff;
  --sf-color-tab-line-selected-shade-contrast: #000000;
  --sf-color-grid-row-hover-bg: #202324;
  --sf-color-grid-row-hover-bg-rgb: 32,35,36;
  --sf-color-grid-row-hover-bg-tint: rgb(17.6, 19.25, 19.8);
  --sf-color-grid-row-hover-bg-shade: rgb(126.3, 137.025, 140.6);
  --sf-color-grid-row-hover-bg-contrast: #ffffff;
  --sf-color-grid-row-hover-bg-tint-contrast: #ffffff;
  --sf-color-grid-row-hover-bg-shade-contrast: #ffffff;
  --sf-color-grid-row-hover-outline: #404344;
  --sf-color-grid-row-hover-outline-rgb: 64,67,68;
  --sf-color-grid-row-hover-outline-tint: rgb(35.2, 36.85, 37.4);
  --sf-color-grid-row-hover-outline-shade: rgb(147.9, 152.625, 154.2);
  --sf-color-grid-row-hover-outline-contrast: #ffffff;
  --sf-color-grid-row-hover-outline-tint-contrast: #ffffff;
  --sf-color-grid-row-hover-outline-shade-contrast: #ffffff;
  --sf-color-grid-row-selected-bg: #2a414d;
  --sf-color-grid-row-selected-bg-rgb: 42,65,77;
  --sf-color-grid-row-selected-bg-tint: rgb(23.1, 35.75, 42.35);
  --sf-color-grid-row-selected-bg-shade: rgb(115.85, 157.4142857143, 179.1);
  --sf-color-grid-row-selected-bg-contrast: #ffffff;
  --sf-color-grid-row-selected-bg-tint-contrast: #ffffff;
  --sf-color-grid-row-selected-bg-shade-contrast: #ffffff;
  --sf-color-grid-row-selected-outline: #45798a;
  --sf-color-grid-row-selected-outline-rgb: 69,121,138;
  --sf-color-grid-row-selected-outline-tint: rgb(37.95, 66.55, 75.9);
  --sf-color-grid-row-selected-outline-shade: rgb(143.9, 185.7637681159, 199.45);
  --sf-color-grid-row-selected-outline-contrast: #ffffff;
  --sf-color-grid-row-selected-outline-tint-contrast: #ffffff;
  --sf-color-grid-row-selected-outline-shade-contrast: #000000;
  --sf-color-input-background: #1a1a1a;
  --sf-color-input-background-rgb: 26,26,26;
  --sf-color-input-background-tint: rgb(14.3, 14.3, 14.3);
  --sf-color-input-background-shade: rgb(129.05, 129.05, 129.05);
  --sf-color-input-background-contrast: #ffffff;
  --sf-color-input-background-tint-contrast: #ffffff;
  --sf-color-input-background-shade-contrast: #ffffff;
  --sf-color-read-only-input-background: #282828;
  --sf-color-read-only-input-background-rgb: 40,40,40;
  --sf-color-read-only-input-background-tint: #161616;
  --sf-color-read-only-input-background-shade: rgb(136.75, 136.75, 136.75);
  --sf-color-read-only-input-background-contrast: #ffffff;
  --sf-color-read-only-input-background-tint-contrast: #ffffff;
  --sf-color-read-only-input-background-shade-contrast: #ffffff;
  --sf-color-input-accent: rgba(255, 255, 255, 0.3);
  --sf-color-input-accent-rgb: 255,255,255;
  --sf-color-input-accent-tint: rgb(140.25, 140.25, 140.25);
  --sf-color-input-accent-shade: white;
  --sf-color-read-only-input-accent: rgba(205, 205, 205, 0.3);
  --sf-color-read-only-input-accent-rgb: 205,205,205;
  --sf-color-read-only-input-accent-tint: rgb(112.75, 112.75, 112.75);
  --sf-color-read-only-input-accent-shade: rgb(227.5, 227.5, 227.5);
  --sf-color-published: #00a12d;
  --sf-color-published-rgb: 0,161,45;
  --sf-color-published-tint: rgb(0, 88.55, 24.75);
  --sf-color-published-shade: rgb(63.05, 255, 116.700621118);
  --sf-color-unpublished: black;
  --sf-color-unpublished-rgb: 0,0,0;
  --sf-color-unpublished-tint: black;
  --sf-color-unpublished-shade: rgb(114.75, 114.75, 114.75);
  --sf-color-favorite: #27aae1;
  --sf-color-favorite-rgb: 39,170,225;
  --sf-color-flag: #613995;
  --sf-color-flag-rgb: 97,57,149;
  --sf-color-watch: #e68200;
  --sf-color-watch-rgb: 230,130,0;
  --sf-color-critical: #546eb2;
  --sf-color-critical-rgb: 84,110,178;
  --sf-color-notification: #ff0101;
  --sf-color-notification-rgb: 255,1,1;
  --sf-color-highlight: #253640;
  --sf-color-highlight-rgb: 37,54,64;
  --sf-color-highlight-tint: rgb(20.35, 29.7, 35.2);
  --sf-color-highlight-shade: rgb(112.4574257426, 150.3202970297, 172.5925742574);
  --sf-color-highlight-contrast: #ffffff;
  --sf-color-highlight-tint-contrast: #ffffff;
  --sf-color-highlight-shade-contrast: #ffffff;
  --sf-color-danger-light: rgba(240, 65, 65, 0.25);
  --sf-color-danger-light-rgb: 240,65,65;
  --sf-color-danger-light-tint: rgba(155.4756097561, 12.2743902439, 12.2743902439, 0.25);
  --sf-color-danger-light-shade: rgba(246.75, 150.5, 150.5, 0.25);
  --sf-color-danger-light-contrast: #ffffff;
  --sf-color-danger-light-tint-contrast: #ffffff;
  --sf-color-danger-light-shade-contrast: #000000;
  --sfumato-dummy-suffix: '';
}

/**
 * @nuclide Element Colors
 * @section Colors > Assignments > Elements
 * These colors are used for primitive elements.
 * DO NOT REMOVE any of these colors. But feel free to change their values.
 * Contrast colors are foreground colors for their named complement.
 */
:root {
  --sf-color-anchor: var(--sf-color-secondary);
  --sf-color-anchor-contrast: var(--sf-color-secondary-contrast);
  --sf-color-code: var(--sf-color-black-translucent);
  --sf-color-code-contrast: var(--sf-color-black-contrast);
  --sf-color-button: var(--sf-color-secondary);
  --sf-color-button-contrast: var(--sf-color-secondary-contrast);
  --sf-color-button-hover: var(--sf-color-active);
  --sf-color-button-hover-contrast: var(--sf-color-active-contrast);
  --sf-color-line: var(--sf-color-input-accent);
  --sf-color-table-line: var(--sf-color-input-accent);
  --sf-color-gripper: var(--sf-color-input-accent);
}

/**
 * @nuclide Input Colors
 * @section Colors > Assignments > Input
 * These colors are used across the application for input controls.
 * DO NOT REMOVE any of these colors. But feel free to change their values.
 * Contrast colors are foreground colors for their named complement.
 */
:root {
  --sf-color-input-line: var(--sf-color-input-accent);
  --sf-color-input: var(--sf-color-input-background);
  --sf-color-input-contrast: var(--sf-color-input-background-contrast);
  --sf-color-input-label: var(--sf-color-panel);
  --sf-color-input-label-contrast: var(--sf-color-input-line);
  --sf-color-input-active: var(--sf-color-active);
  --sf-color-input-active-contrast: var(--sf-color-active-contrast);
  --sf-color-input-active-tint: var(--sf-color-active-tint);
  --sf-color-input-active-tint-contrast: var(--sf-color-active-tint-contrast);
  --sf-color-input-placeholder: var(--sf-color-input-accent);
  --sf-color-read-only-input-line: var(--sf-color-read-only-input-accent);
  --sf-color-read-only-input: var(--sf-color-read-only-input-background);
  --sf-color-read-only-input-contrast: var(--sf-color-read-only-input-background-contrast);
  --sf-color-read-only-input-placeholder: var(--sf-color-read-only-input-accent);
  --sf-color-toggle-unchecked: var(--sf-color-light);
  --sf-color-toggle-unchecked-contrast: var(--sf-color-black);
  --sf-color-toggle-checked: var(--sf-color-secondary);
  --sf-color-toggle-checked-contrast: var(--sf-color-secondary-contrast);
  --sf-color-radio-unchecked: var(--sf-color-light);
  --sf-color-radio-unchecked-contrast: var(--sf-color-black);
  --sf-color-radio-checked: var(--sf-color-secondary);
  --sf-color-radio-checked-contrast: var(--sf-color-secondary-contrast);
}

/**
 * @nuclide State Colors
 * @section Colors > Aliases > State
 * These colors are used for various UI states.
 * DO NOT REMOVE any of these colors. But feel free to change their values.
 * Contrast colors are foreground colors for their named complement.
 */
:root {
  --sf-color-disabled: var(--sf-color-medium-tint);
  --sf-color-disabled-contrast: var(--sf-color-white);
  --sf-color-active: var(--sf-color-secondary);
  --sf-color-active-contrast: var(--sf-color-secondary-contrast);
  --sf-color-active-tint: var(--sf-color-secondary-tint);
  --sf-color-active-tint-contrast: var(--sf-color-secondary-tint-contrast);
  --sf-color-success: var(--sf-color-green);
  --sf-color-success-contrast: var(--sf-color-green-contrast);
  --sf-color-warning: var(--sf-color-yellow);
  --sf-color-warning-contrast: var(--sf-color-yellow-contrast);
  --sf-color-danger: var(--sf-color-red);
  --sf-color-danger-contrast: var(--sf-color-red-contrast);
}

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct box sizing in Firefox.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 */
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Additional Form Resets
   ========================================================================== */
button,
input,
optgroup,
select,
textarea,
option, a[role=button] {
  outline: none;
}

form {
  margin: 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

legend {
  display: block;
  width: 100%;
}

input[type=radio],
input[type=checkbox] {
  width: 1rem;
  height: 1rem;
}

input[type=range] {
  display: inline-block;
  min-width: 50%;
}

select[multiple],
select[size] {
  height: auto;
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/**
 * Font and other base styles are established in this file.
 * It should be called after the configuration files have been loaded.
 */
* {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-font-size-adjust: none;
  -webkit-marquee-increment: 0;
  word-spacing: initial;
  letter-spacing: initial;
  word-break: break-word;
}
*, *:before, *:after {
  box-sizing: border-box;
}
* > * {
  font-weight: inherit;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html, body {
  overflow: visible;
  max-width: 100vw;
}

body {
  position: relative;
}
body [sf-elastic-wrapper] {
  max-width: var(--elas-breakpoint);
  margin-left: auto;
  margin-right: auto;
}
body main {
  max-width: 100vw;
  min-height: 85vh;
}
@media screen and (max-width: 539px) {
  body main {
    overflow-x: hidden;
  }
}

/**
 * @nuclide Visually Hide
 * @section Mixins > Styles
 * @modifiers
 *  [sf-visually-hide], [sf-visually-hide-{breakpoint}-and-up], [sf-visually-hide-below-{breakpoint}] - Visually hide an element based on media breakpoints without using `display: none`.
 * @markup
 *  <div sf-hide></div>
 *  <div sf-hide-tabp-and-up></div>
 */
[sf-visually-hide], [sf-zero-visually-hide], .sf-visually-hide, .sf-zero-visually-hide {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

@media screen and (min-width: 400px) {
  [sf-visually-hide-phab-and-up], .sf-visually-hide-phab-and-up {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (max-width: 399px) {
  [sf-visually-hide-below-phab], .sf-visually-hide-below-phab {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (min-width: 540px) {
  [sf-visually-hide-tabp-and-up], .sf-visually-hide-tabp-and-up {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (max-width: 539px) {
  [sf-visually-hide-below-tabp], .sf-visually-hide-below-tabp {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (min-width: 800px) {
  [sf-visually-hide-tabl-and-up], .sf-visually-hide-tabl-and-up {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (max-width: 799px) {
  [sf-visually-hide-below-tabl], .sf-visually-hide-below-tabl {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (min-width: 1280px) {
  [sf-visually-hide-note-and-up], .sf-visually-hide-note-and-up {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (max-width: 1279px) {
  [sf-visually-hide-below-note], .sf-visually-hide-below-note {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (min-width: 1440px) {
  [sf-visually-hide-desk-and-up], .sf-visually-hide-desk-and-up {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (max-width: 1439px) {
  [sf-visually-hide-below-desk], .sf-visually-hide-below-desk {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (min-width: 1600px) {
  [sf-visually-hide-elas-and-up], .sf-visually-hide-elas-and-up {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
@media screen and (max-width: 1599px) {
  [sf-visually-hide-below-elas], .sf-visually-hide-below-elas {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}
/**
 * @nuclide Hide
 * @section Mixins > Styles
 * @modifiers
 *  [sf-hide], [sf-hide-{breakpoint}-and-up], [sf-hide-below-{breakpoint}] - Hide an element based on media breakpoints using `display: none`.
 * @markup
 *  <div sf-hide></div>
 *  <div sf-hide-tabp-and-up></div>
 */
[sf-hide], [sf-zero-hide], .sf-hide, .sf-zero-hide {
  display: none !important;
}

@media screen and (min-width: 400px) {
  [sf-hide-phab-and-up], .sf-hide-phab-and-up {
    display: none !important;
  }
}
@media screen and (max-width: 399px) {
  [sf-hide-below-phab], .sf-hide-below-phab {
    display: none !important;
  }
}
@media screen and (min-width: 540px) {
  [sf-hide-tabp-and-up], .sf-hide-tabp-and-up {
    display: none !important;
  }
}
@media screen and (max-width: 539px) {
  [sf-hide-below-tabp], .sf-hide-below-tabp {
    display: none !important;
  }
}
@media screen and (min-width: 800px) {
  [sf-hide-tabl-and-up], .sf-hide-tabl-and-up {
    display: none !important;
  }
}
@media screen and (max-width: 799px) {
  [sf-hide-below-tabl], .sf-hide-below-tabl {
    display: none !important;
  }
}
@media screen and (min-width: 1280px) {
  [sf-hide-note-and-up], .sf-hide-note-and-up {
    display: none !important;
  }
}
@media screen and (max-width: 1279px) {
  [sf-hide-below-note], .sf-hide-below-note {
    display: none !important;
  }
}
@media screen and (min-width: 1440px) {
  [sf-hide-desk-and-up], .sf-hide-desk-and-up {
    display: none !important;
  }
}
@media screen and (max-width: 1439px) {
  [sf-hide-below-desk], .sf-hide-below-desk {
    display: none !important;
  }
}
@media screen and (min-width: 1600px) {
  [sf-hide-elas-and-up], .sf-hide-elas-and-up {
    display: none !important;
  }
}
@media screen and (max-width: 1599px) {
  [sf-hide-below-elas], .sf-hide-below-elas {
    display: none !important;
  }
}
/**
 * @structure Mobile Scroll Wrapper
 * @section Layout > Blocks
 * @modifiers
 *  [sf-scrollable] - Allows wide content to scroll horizontally on mobile.
 * @markup
 *  <div sf-scrollable>
 *    <div sf-scrollable-inner>
 *      <div sf-scrollable-content>
 *        ...
 *      </div>
 *    </div>
 *    <div sf-arrow><i class="fa-light fs-long-arrow-left"></i>scrollable</div>
 *  </div>
 */
[sf-scrollable] {
  --max-scroll-width: 90rem;
  position: relative;
  display: grid;
}
[sf-scrollable] > [sf-arrow] {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: right;
  color: rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
  line-height: 1;
}
[sf-scrollable] > [sf-arrow] > i {
  font-size: 0.6rem;
  line-height: 1;
}
@media screen and (max-width: 539px) {
  [sf-scrollable] > [sf-arrow] {
    padding-right: var(--sf-zero-block-lr-padding);
  }
}
@media screen and (min-width: 400px) and (max-width: 539px) {
  [sf-scrollable] > [sf-arrow] {
    padding-right: var(--sf-phab-block-lr-padding);
  }
}
@media screen and (max-width: 539px) {
  [sf-scrollable] {
    margin-left: calc(var(--sf-zero-block-lr-padding) * -1);
    margin-right: calc(var(--sf-zero-block-lr-padding) * -1);
  }
}
@media screen and (min-width: 400px) and (max-width: 539px) {
  [sf-scrollable] {
    margin-left: calc(var(--sf-phab-block-lr-padding) * -1);
    margin-right: calc(var(--sf-phab-block-lr-padding) * -1);
  }
}
@media screen and (min-width: 540px) {
  [sf-scrollable] > div:nth-of-type(2) {
    display: none;
  }
}
[sf-scrollable] > [sf-scrollable-inner] {
  position: relative;
  display: block;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media screen and (min-width: 540px) {
  [sf-scrollable] > [sf-scrollable-inner] {
    border-radius: var(--sf-border-radius);
  }
}
[sf-scrollable] > [sf-scrollable-inner]::-webkit-scrollbar {
  display: none;
}
[sf-scrollable] > [sf-scrollable-inner] > [sf-scrollable-content] {
  display: block;
  position: relative;
  min-width: 100%;
  width: 100%;
  width: max-content;
  width: -webkit-max-content;
  max-width: var(--max-scroll-width);
}
@media screen and (max-width: 399px) {
  [sf-scrollable] > [sf-scrollable-inner] > [sf-scrollable-content] {
    padding-left: var(--sf-zero-block-lr-padding);
    padding-right: var(--sf-zero-block-lr-padding);
  }
}
@media screen and (min-width: 400px) and (max-width: 539px) {
  [sf-scrollable] > [sf-scrollable-inner] > [sf-scrollable-content] {
    padding-left: var(--sf-phab-block-lr-padding);
    padding-right: var(--sf-phab-block-lr-padding);
  }
}
@media screen and (min-width: 540px) {
  [sf-scrollable] > [sf-scrollable-inner] > [sf-scrollable-content] {
    padding-left: 0;
    padding-right: 0;
    /*                min-width: auto;
    width: auto;*/
  }
}

html {
  --sf-font-size: var(--sf-zero-font-size);
  --sf-font-weight: var(--sf-zero-font-weight);
  --sf-line-height: var(--sf-zero-line-height);
  font-family: var(--sf-font-family-body);
  font-size: var(--sf-font-size);
  font-weight: var(--sf-font-weight);
  line-height: var(--sf-line-height);
}
@media screen and (min-width: 400px) {
  html {
    --sf-font-size: var(--sf-phab-font-size);
    --sf-font-weight: var(--sf-phab-font-weight);
    --sf-line-height: var(--sf-phab-line-height);
  }
}
@media screen and (min-width: 540px) {
  html {
    --sf-font-size: var(--sf-tabp-font-size);
    --sf-font-weight: var(--sf-tabp-font-weight);
    --sf-line-height: var(--sf-tabp-line-height);
  }
}
@media screen and (min-width: 800px) {
  html {
    --sf-font-size: var(--sf-tabl-font-size);
    --sf-font-weight: var(--sf-tabl-font-weight);
    --sf-line-height: var(--sf-tabl-line-height);
  }
}
@media screen and (min-width: 1280px) {
  html {
    --sf-font-size: var(--sf-note-font-size);
    --sf-font-weight: var(--sf-note-font-weight);
    --sf-line-height: var(--sf-note-line-height);
  }
}
@media screen and (min-width: 1440px) {
  html {
    --sf-font-size: var(--sf-desk-font-size);
    --sf-font-weight: var(--sf-desk-font-weight);
    --sf-line-height: var(--sf-desk-line-height);
  }
}
@media screen and (min-width: 1600px) {
  html {
    --sf-font-size: var(--sf-elas-font-size);
    --sf-font-weight: var(--sf-elas-font-weight);
    --sf-line-height: var(--sf-elas-line-height);
  }
}
html pre, html code {
  font-family: var(--sf-font-family-mono);
}
html p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}
html p:last-child {
  margin-bottom: 0;
}
html p[sf-tight] {
  margin-bottom: 0.5rem;
}
html code {
  vertical-align: top;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  cursor: pointer;
}

a:not([role=button]) {
  color: var(--sf-color-anchor);
  transition-property: color;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  animation-delay: 0s;
}

blockquote {
  border-left: solid 0 var(--sf-color-light);
  border-left-width: 0.75rem;
  margin: 1.5rem 0;
  padding-left: 1.3344rem;
  padding-right: 1.3344rem;
  font-style: italic;
}
@media screen and (min-width: 540px) {
  blockquote {
    margin: 1.5rem 2.5rem 1.5rem 3.5rem;
    padding-left: 1.5rem;
    padding-right: 4rem;
  }
}
blockquote:last-child {
  margin-bottom: 0;
}
blockquote cite {
  display: block;
  margin-top: 1.5rem;
  font-size: 85%;
}
@media screen and (min-width: 540px) {
  blockquote cite {
    margin-top: 1.25rem;
  }
}

strong {
  font-weight: var(--sf-bold-font-weight);
}
strong em {
  font-weight: var(--sf-bold-font-weight);
}

small {
  font-size: var(--sf-small-font-size);
  line-height: var(--sf-small-line-height);
}

:not(pre) > code, :not(pre) > code[class*=language-] {
  display: inline-block;
  margin: 0;
  padding: 0.05rem 0.5rem 0.15rem 0.5rem;
  border-radius: 0.1rem;
  font-size: var(--sf-code-font-size);
  line-height: var(--sf-code-line-height);
}
:not(pre) > code {
  background: var(--sf-color-code);
  color: var(--sf-color-code-contrast);
}

hr {
  margin: 0 0 2rem;
  height: var(--sf-line-width);
  min-height: var(--sf-line-width);
  border: none;
  background-color: var(--sf-color-line);
}
hr:last-child {
  margin-bottom: 0;
}

[sf-nowrap] {
  white-space: nowrap;
}

h1 {
  font-family: var(--sf-h1-font-family);
  font-size: var(--sf-zero-h1-font-size);
  font-weight: var(--sf-zero-h1-font-weight);
  line-height: var(--sf-zero-h1-line-height);
  margin-top: var(--sf-zero-h1-margin-top);
  margin-bottom: var(--sf-zero-h1-margin-bottom);
}
h1:first-child {
  margin-top: 0;
}
h1:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 400px) {
  h1 {
    font-size: var(--sf-phab-h1-font-size);
    font-weight: var(--sf-phab-h1-font-weight);
    line-height: var(--sf-phab-h1-line-height);
    margin-top: var(--sf-phab-h1-margin-top);
    margin-bottom: var(--sf-phab-h1-margin-bottom);
  }
}
@media screen and (min-width: 540px) {
  h1 {
    font-size: var(--sf-tabp-h1-font-size);
    font-weight: var(--sf-tabp-h1-font-weight);
    line-height: var(--sf-tabp-h1-line-height);
    margin-top: var(--sf-tabp-h1-margin-top);
    margin-bottom: var(--sf-tabp-h1-margin-bottom);
  }
}
@media screen and (min-width: 800px) {
  h1 {
    font-size: var(--sf-tabl-h1-font-size);
    font-weight: var(--sf-tabl-h1-font-weight);
    line-height: var(--sf-tabl-h1-line-height);
    margin-top: var(--sf-tabl-h1-margin-top);
    margin-bottom: var(--sf-tabl-h1-margin-bottom);
  }
}
@media screen and (min-width: 1280px) {
  h1 {
    font-size: var(--sf-note-h1-font-size);
    font-weight: var(--sf-note-h1-font-weight);
    line-height: var(--sf-note-h1-line-height);
    margin-top: var(--sf-note-h1-margin-top);
    margin-bottom: var(--sf-note-h1-margin-bottom);
  }
}
@media screen and (min-width: 1440px) {
  h1 {
    font-size: var(--sf-desk-h1-font-size);
    font-weight: var(--sf-desk-h1-font-weight);
    line-height: var(--sf-desk-h1-line-height);
    margin-top: var(--sf-desk-h1-margin-top);
    margin-bottom: var(--sf-desk-h1-margin-bottom);
  }
}
@media screen and (min-width: 1600px) {
  h1 {
    font-size: var(--sf-elas-h1-font-size);
    font-weight: var(--sf-elas-h1-font-weight);
    line-height: var(--sf-elas-h1-line-height);
    margin-top: var(--sf-elas-h1-margin-top);
    margin-bottom: var(--sf-elas-h1-margin-bottom);
  }
}
h2 {
  font-family: var(--sf-h2-font-family);
  font-size: var(--sf-zero-h2-font-size);
  font-weight: var(--sf-zero-h2-font-weight);
  line-height: var(--sf-zero-h2-line-height);
  margin-top: var(--sf-zero-h2-margin-top);
  margin-bottom: var(--sf-zero-h2-margin-bottom);
}
h2:first-child {
  margin-top: 0;
}
h2:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 400px) {
  h2 {
    font-size: var(--sf-phab-h2-font-size);
    font-weight: var(--sf-phab-h2-font-weight);
    line-height: var(--sf-phab-h2-line-height);
    margin-top: var(--sf-phab-h2-margin-top);
    margin-bottom: var(--sf-phab-h2-margin-bottom);
  }
}
@media screen and (min-width: 540px) {
  h2 {
    font-size: var(--sf-tabp-h2-font-size);
    font-weight: var(--sf-tabp-h2-font-weight);
    line-height: var(--sf-tabp-h2-line-height);
    margin-top: var(--sf-tabp-h2-margin-top);
    margin-bottom: var(--sf-tabp-h2-margin-bottom);
  }
}
@media screen and (min-width: 800px) {
  h2 {
    font-size: var(--sf-tabl-h2-font-size);
    font-weight: var(--sf-tabl-h2-font-weight);
    line-height: var(--sf-tabl-h2-line-height);
    margin-top: var(--sf-tabl-h2-margin-top);
    margin-bottom: var(--sf-tabl-h2-margin-bottom);
  }
}
@media screen and (min-width: 1280px) {
  h2 {
    font-size: var(--sf-note-h2-font-size);
    font-weight: var(--sf-note-h2-font-weight);
    line-height: var(--sf-note-h2-line-height);
    margin-top: var(--sf-note-h2-margin-top);
    margin-bottom: var(--sf-note-h2-margin-bottom);
  }
}
@media screen and (min-width: 1440px) {
  h2 {
    font-size: var(--sf-desk-h2-font-size);
    font-weight: var(--sf-desk-h2-font-weight);
    line-height: var(--sf-desk-h2-line-height);
    margin-top: var(--sf-desk-h2-margin-top);
    margin-bottom: var(--sf-desk-h2-margin-bottom);
  }
}
@media screen and (min-width: 1600px) {
  h2 {
    font-size: var(--sf-elas-h2-font-size);
    font-weight: var(--sf-elas-h2-font-weight);
    line-height: var(--sf-elas-h2-line-height);
    margin-top: var(--sf-elas-h2-margin-top);
    margin-bottom: var(--sf-elas-h2-margin-bottom);
  }
}
h3 {
  font-family: var(--sf-h3-font-family);
  font-size: var(--sf-zero-h3-font-size);
  font-weight: var(--sf-zero-h3-font-weight);
  line-height: var(--sf-zero-h3-line-height);
  margin-top: var(--sf-zero-h3-margin-top);
  margin-bottom: var(--sf-zero-h3-margin-bottom);
}
h3:first-child {
  margin-top: 0;
}
h3:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 400px) {
  h3 {
    font-size: var(--sf-phab-h3-font-size);
    font-weight: var(--sf-phab-h3-font-weight);
    line-height: var(--sf-phab-h3-line-height);
    margin-top: var(--sf-phab-h3-margin-top);
    margin-bottom: var(--sf-phab-h3-margin-bottom);
  }
}
@media screen and (min-width: 540px) {
  h3 {
    font-size: var(--sf-tabp-h3-font-size);
    font-weight: var(--sf-tabp-h3-font-weight);
    line-height: var(--sf-tabp-h3-line-height);
    margin-top: var(--sf-tabp-h3-margin-top);
    margin-bottom: var(--sf-tabp-h3-margin-bottom);
  }
}
@media screen and (min-width: 800px) {
  h3 {
    font-size: var(--sf-tabl-h3-font-size);
    font-weight: var(--sf-tabl-h3-font-weight);
    line-height: var(--sf-tabl-h3-line-height);
    margin-top: var(--sf-tabl-h3-margin-top);
    margin-bottom: var(--sf-tabl-h3-margin-bottom);
  }
}
@media screen and (min-width: 1280px) {
  h3 {
    font-size: var(--sf-note-h3-font-size);
    font-weight: var(--sf-note-h3-font-weight);
    line-height: var(--sf-note-h3-line-height);
    margin-top: var(--sf-note-h3-margin-top);
    margin-bottom: var(--sf-note-h3-margin-bottom);
  }
}
@media screen and (min-width: 1440px) {
  h3 {
    font-size: var(--sf-desk-h3-font-size);
    font-weight: var(--sf-desk-h3-font-weight);
    line-height: var(--sf-desk-h3-line-height);
    margin-top: var(--sf-desk-h3-margin-top);
    margin-bottom: var(--sf-desk-h3-margin-bottom);
  }
}
@media screen and (min-width: 1600px) {
  h3 {
    font-size: var(--sf-elas-h3-font-size);
    font-weight: var(--sf-elas-h3-font-weight);
    line-height: var(--sf-elas-h3-line-height);
    margin-top: var(--sf-elas-h3-margin-top);
    margin-bottom: var(--sf-elas-h3-margin-bottom);
  }
}
h4 {
  font-family: var(--sf-h4-font-family);
  font-size: var(--sf-zero-h4-font-size);
  font-weight: var(--sf-zero-h4-font-weight);
  line-height: var(--sf-zero-h4-line-height);
  margin-top: var(--sf-zero-h4-margin-top);
  margin-bottom: var(--sf-zero-h4-margin-bottom);
}
h4:first-child {
  margin-top: 0;
}
h4:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 400px) {
  h4 {
    font-size: var(--sf-phab-h4-font-size);
    font-weight: var(--sf-phab-h4-font-weight);
    line-height: var(--sf-phab-h4-line-height);
    margin-top: var(--sf-phab-h4-margin-top);
    margin-bottom: var(--sf-phab-h4-margin-bottom);
  }
}
@media screen and (min-width: 540px) {
  h4 {
    font-size: var(--sf-tabp-h4-font-size);
    font-weight: var(--sf-tabp-h4-font-weight);
    line-height: var(--sf-tabp-h4-line-height);
    margin-top: var(--sf-tabp-h4-margin-top);
    margin-bottom: var(--sf-tabp-h4-margin-bottom);
  }
}
@media screen and (min-width: 800px) {
  h4 {
    font-size: var(--sf-tabl-h4-font-size);
    font-weight: var(--sf-tabl-h4-font-weight);
    line-height: var(--sf-tabl-h4-line-height);
    margin-top: var(--sf-tabl-h4-margin-top);
    margin-bottom: var(--sf-tabl-h4-margin-bottom);
  }
}
@media screen and (min-width: 1280px) {
  h4 {
    font-size: var(--sf-note-h4-font-size);
    font-weight: var(--sf-note-h4-font-weight);
    line-height: var(--sf-note-h4-line-height);
    margin-top: var(--sf-note-h4-margin-top);
    margin-bottom: var(--sf-note-h4-margin-bottom);
  }
}
@media screen and (min-width: 1440px) {
  h4 {
    font-size: var(--sf-desk-h4-font-size);
    font-weight: var(--sf-desk-h4-font-weight);
    line-height: var(--sf-desk-h4-line-height);
    margin-top: var(--sf-desk-h4-margin-top);
    margin-bottom: var(--sf-desk-h4-margin-bottom);
  }
}
@media screen and (min-width: 1600px) {
  h4 {
    font-size: var(--sf-elas-h4-font-size);
    font-weight: var(--sf-elas-h4-font-weight);
    line-height: var(--sf-elas-h4-line-height);
    margin-top: var(--sf-elas-h4-margin-top);
    margin-bottom: var(--sf-elas-h4-margin-bottom);
  }
}
h5 {
  font-family: var(--sf-h5-font-family);
  font-size: var(--sf-zero-h5-font-size);
  font-weight: var(--sf-zero-h5-font-weight);
  line-height: var(--sf-zero-h5-line-height);
  margin-top: var(--sf-zero-h5-margin-top);
  margin-bottom: var(--sf-zero-h5-margin-bottom);
}
h5:first-child {
  margin-top: 0;
}
h5:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 400px) {
  h5 {
    font-size: var(--sf-phab-h5-font-size);
    font-weight: var(--sf-phab-h5-font-weight);
    line-height: var(--sf-phab-h5-line-height);
    margin-top: var(--sf-phab-h5-margin-top);
    margin-bottom: var(--sf-phab-h5-margin-bottom);
  }
}
@media screen and (min-width: 540px) {
  h5 {
    font-size: var(--sf-tabp-h5-font-size);
    font-weight: var(--sf-tabp-h5-font-weight);
    line-height: var(--sf-tabp-h5-line-height);
    margin-top: var(--sf-tabp-h5-margin-top);
    margin-bottom: var(--sf-tabp-h5-margin-bottom);
  }
}
@media screen and (min-width: 800px) {
  h5 {
    font-size: var(--sf-tabl-h5-font-size);
    font-weight: var(--sf-tabl-h5-font-weight);
    line-height: var(--sf-tabl-h5-line-height);
    margin-top: var(--sf-tabl-h5-margin-top);
    margin-bottom: var(--sf-tabl-h5-margin-bottom);
  }
}
@media screen and (min-width: 1280px) {
  h5 {
    font-size: var(--sf-note-h5-font-size);
    font-weight: var(--sf-note-h5-font-weight);
    line-height: var(--sf-note-h5-line-height);
    margin-top: var(--sf-note-h5-margin-top);
    margin-bottom: var(--sf-note-h5-margin-bottom);
  }
}
@media screen and (min-width: 1440px) {
  h5 {
    font-size: var(--sf-desk-h5-font-size);
    font-weight: var(--sf-desk-h5-font-weight);
    line-height: var(--sf-desk-h5-line-height);
    margin-top: var(--sf-desk-h5-margin-top);
    margin-bottom: var(--sf-desk-h5-margin-bottom);
  }
}
@media screen and (min-width: 1600px) {
  h5 {
    font-size: var(--sf-elas-h5-font-size);
    font-weight: var(--sf-elas-h5-font-weight);
    line-height: var(--sf-elas-h5-line-height);
    margin-top: var(--sf-elas-h5-margin-top);
    margin-bottom: var(--sf-elas-h5-margin-bottom);
  }
}
h6 {
  font-family: var(--sf-h6-font-family);
  font-size: var(--sf-zero-h6-font-size);
  font-weight: var(--sf-zero-h6-font-weight);
  line-height: var(--sf-zero-h6-line-height);
  margin-top: var(--sf-zero-h6-margin-top);
  margin-bottom: var(--sf-zero-h6-margin-bottom);
}
h6:first-child {
  margin-top: 0;
}
h6:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 400px) {
  h6 {
    font-size: var(--sf-phab-h6-font-size);
    font-weight: var(--sf-phab-h6-font-weight);
    line-height: var(--sf-phab-h6-line-height);
    margin-top: var(--sf-phab-h6-margin-top);
    margin-bottom: var(--sf-phab-h6-margin-bottom);
  }
}
@media screen and (min-width: 540px) {
  h6 {
    font-size: var(--sf-tabp-h6-font-size);
    font-weight: var(--sf-tabp-h6-font-weight);
    line-height: var(--sf-tabp-h6-line-height);
    margin-top: var(--sf-tabp-h6-margin-top);
    margin-bottom: var(--sf-tabp-h6-margin-bottom);
  }
}
@media screen and (min-width: 800px) {
  h6 {
    font-size: var(--sf-tabl-h6-font-size);
    font-weight: var(--sf-tabl-h6-font-weight);
    line-height: var(--sf-tabl-h6-line-height);
    margin-top: var(--sf-tabl-h6-margin-top);
    margin-bottom: var(--sf-tabl-h6-margin-bottom);
  }
}
@media screen and (min-width: 1280px) {
  h6 {
    font-size: var(--sf-note-h6-font-size);
    font-weight: var(--sf-note-h6-font-weight);
    line-height: var(--sf-note-h6-line-height);
    margin-top: var(--sf-note-h6-margin-top);
    margin-bottom: var(--sf-note-h6-margin-bottom);
  }
}
@media screen and (min-width: 1440px) {
  h6 {
    font-size: var(--sf-desk-h6-font-size);
    font-weight: var(--sf-desk-h6-font-weight);
    line-height: var(--sf-desk-h6-line-height);
    margin-top: var(--sf-desk-h6-margin-top);
    margin-bottom: var(--sf-desk-h6-margin-bottom);
  }
}
@media screen and (min-width: 1600px) {
  h6 {
    font-size: var(--sf-elas-h6-font-size);
    font-weight: var(--sf-elas-h6-font-weight);
    line-height: var(--sf-elas-h6-line-height);
    margin-top: var(--sf-elas-h6-margin-top);
    margin-bottom: var(--sf-elas-h6-margin-bottom);
  }
}
/**
 * Where `margin-left` is concerned, we want to try and indent certain elements by a consistent amount
 */
ul, dl {
  padding: 0;
  margin: 1.75rem 0 2.25rem 1.25rem;
  list-style: square;
}
@media screen and (min-width: 540px) {
  ul, dl {
    margin-right: 0;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
  }
}
ul:first-child, dl:first-child {
  margin-top: 0;
}
ul:last-child, dl:last-child {
  margin-bottom: 0;
}

ol {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
  margin: 0 0 2rem 0.1rem;
}
ol > li {
  display: table;
  counter-increment: item;
}
ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.5rem;
  white-space: nowrap;
}
ol > li > ol > li {
  margin: 0;
}
ol > li > ol > li:before {
  content: counters(item, ".") " ";
}
ol:first-child {
  margin-top: 0;
}
ol:last-child {
  margin-bottom: 0;
}

ul > ol, ul > ul, ul > dl, ol > ol, ol > ul, ol > dl, dl > ol, dl > ul, dl > dl {
  margin-left: 3rem;
  margin-top: 1rem;
}
ul li, ul dd, ul dt, ol li, ol dd, ol dt, dl li, dl dd, dl dt {
  padding-top: 0.5rem;
}
ul li:first-child, ul dd:first-child, ul dt:first-child, ol li:first-child, ol dd:first-child, ol dt:first-child, dl li:first-child, dl dd:first-child, dl dt:first-child {
  padding-top: 0;
}
ul li > ol, ul li > ul, ul dd > ol, ul dd > ul, ul dt > ol, ul dt > ul, ol li > ol, ol li > ul, ol dd > ol, ol dd > ul, ol dt > ol, ol dt > ul, dl li > ol, dl li > ul, dl dd > ol, dl dd > ul, dl dt > ol, dl dt > ul {
  margin-top: 1rem;
}
ul li > ol > li:first-child, ul li > ul > li:first-child, ul dd > ol > li:first-child, ul dd > ul > li:first-child, ul dt > ol > li:first-child, ul dt > ul > li:first-child, ol li > ol > li:first-child, ol li > ul > li:first-child, ol dd > ol > li:first-child, ol dd > ul > li:first-child, ol dt > ol > li:first-child, ol dt > ul > li:first-child, dl li > ol > li:first-child, dl li > ul > li:first-child, dl dd > ol > li:first-child, dl dd > ul > li:first-child, dl dt > ol > li:first-child, dl dt > ul > li:first-child {
  padding-top: 0;
}
ul[sf-expanded], ol[sf-expanded], dl[sf-expanded] {
  margin-top: 2rem;
}
@media screen and (min-width: 540px) {
  ul[sf-expanded], ol[sf-expanded], dl[sf-expanded] {
    margin-top: 2rem;
  }
}
ul[sf-expanded] > li, ul[sf-expanded] > dd, ul[sf-expanded] > dt, ol[sf-expanded] > li, ol[sf-expanded] > dd, ol[sf-expanded] > dt, dl[sf-expanded] > li, dl[sf-expanded] > dd, dl[sf-expanded] > dt {
  padding-top: 2rem;
}
ul[sf-expanded] > li:first-child, ul[sf-expanded] > dd:first-child, ul[sf-expanded] > dt:first-child, ol[sf-expanded] > li:first-child, ol[sf-expanded] > dd:first-child, ol[sf-expanded] > dt:first-child, dl[sf-expanded] > li:first-child, dl[sf-expanded] > dd:first-child, dl[sf-expanded] > dt:first-child {
  padding-top: 0;
}
ul[sf-tight], ol[sf-tight], dl[sf-tight] {
  margin-top: 0;
}
@media screen and (min-width: 540px) {
  ul[sf-tight], ol[sf-tight], dl[sf-tight] {
    margin-top: 0;
  }
}
ul[sf-tight] > li, ul[sf-tight] > dd, ul[sf-tight] > dt, ol[sf-tight] > li, ol[sf-tight] > dd, ol[sf-tight] > dt, dl[sf-tight] > li, dl[sf-tight] > dd, dl[sf-tight] > dt {
  padding-top: 0.5rem;
}
ul[sf-tight] > li:first-child, ul[sf-tight] > dd:first-child, ul[sf-tight] > dt:first-child, ol[sf-tight] > li:first-child, ol[sf-tight] > dd:first-child, ol[sf-tight] > dt:first-child, dl[sf-tight] > li:first-child, dl[sf-tight] > dd:first-child, dl[sf-tight] > dt:first-child {
  padding-top: 0;
}

/**
 * @nuclide Remove Media Gaps
 *
 * Remove gap between elements and the bottom of their containers.
 * @section Layout > Media
 * @markup
 *  <audio />
 *  <canvas />
 *  <img />
 *  <svg />
 *  <video />
 */
audio,
canvas,
img,
video {
  vertical-align: middle;
}

/**
 * @nuclide Fluid Images
 *
 * Responsive images.
 * @section Layout > Media
 * @markup
 *  <img />
 *  <svg />
 */
img, svg {
  position: relative;
  width: 100%;
  max-width: 100%;
  -ms-interpolation-mode: bicubic;
}

/**
 * @nuclide Non-fluid images
 * @section Layout > Media
 * @modifiers
 *  [width, height] - Non-fluid images if you specify `width` and/or `height` attributes.
 * @markup
 *  <img width="100"></object>
 */
img[width],
img[height] {
  width: auto;
  max-width: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table:last-child {
  margin-bottom: 0;
}
table th, table td {
  margin: 0;
  text-align: left;
  padding: 0.5rem 1rem 0 0;
}
@media screen and (min-width: 540px) {
  table th, table td {
    padding-top: 0.75rem;
    padding-right: 1.25rem;
  }
}
table th:last-child, table td:last-child {
  padding-right: 0;
}
table th {
  font-weight: bold;
}

/**
 * Global application styles can go here
 */
html.blank-layout {
  background-color: var(--sf-color-blank-canvas);
  background-image: linear-gradient(-240.9614574653deg, var(--sf-color-canvas-gradient1) 0.8014743952%, var(--sf-color-canvas-gradient2) 97.1825137122%);
  color: var(--sf-color-blank-canvas-contrast);
}
html.main-layout {
  background-color: var(--sf-color-canvas);
  color: var(--sf-color-canvas-contrast);
}

/*# sourceMappingURL=sfumato.css.map */