@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
                @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css');
            
         :root {
            --s-fs-tree-inline-space-ratio: 2.9;
        }
:root {
            --s-fs-tree-inline-space-ratio: 2.9;
        }
/* importing sugar toolkit */
/**
* Init sugar. This will import a reset css and print the
* needed variables
*/
/**
        * @name          Global reset
        * @namespace          sugar.style.resets
        * @type               Styleguide
        * @menu           Styleguide / Resets        /styleguide/resets/global
        * @platform       css
        * @status       beta
        * 
        * These mixins allows you to apply some resets like `destyle` and/or the `sugar` one.
        * The `destyle` one is well known and you can find the documentation on their website.
        * The `sugar` one is our own that add some resets like setting max-width to 100% for images, and some more. Check our his own documentation page.
        * 
        * @feature      Apply the `destyle` reset
        * @feature      Apply the `sugar` reset
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @example        css
        * @sugar.reset;
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/**
        * @name          Destyle reset
        * @namespace          sugar.style.resets
        * @type               Styleguide
        * @menu           Styleguide / Resets        /styleguide/resets/destyle
        * @platform       css
        * @status       beta
        * 
        * These mixins allows you to apply the `destyle` reset easily.
        * 
        * @feature      Ensures consistency across browsers as much as possible
        * @feature      Prevents the necessity of reseting user agent styles
        * @feature      Prevents style inspector bloat by only targeting what is necessary
        * @feature      Removes margins & paddings
        * @feature      Removes default font styles and ensures proper inheritance
        * @feature      Contributes to the separation of presentation and semantics
        * @feature      Sets sensible default styles
        * @feature      Well suited for utility class libraries and large codebases
        * @feature      Made for modern browsers only, therefor small in size (~0.95kb)
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @example        css
        * @sugar.reset.destyle;
        * 
        * @see          https://github.com/nicolas-cusan/destyle.css
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/* purgecss start ignore */
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
  ::before,
  ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
  }
/* Document */
/* ============================================ */
/**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   * 3. Remove gray overlay on links for iOS.
   */
html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: transparent; /* 3*/
  }
/* Sections */
/* ============================================ */
/**
   * Remove the margin in all browsers.
   */
body {
    margin: 0;
  }
/**
   * Render the main element consistently in IE.
   */
main {
    display: block;
  }
/* Vertical rhythm */
/* ============================================ */
p,
  table,
  blockquote,
  address,
  pre,
  iframe,
  form,
  figure,
  dl {
    margin: 0;
  }
/* Headings */
/* ============================================ */
h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
  }
/* Lists (enumeration) */
/* ============================================ */
ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* Lists (definition) */
/* ============================================ */
dt {
    font-weight: bold;
  }
dd {
    margin-left: 0;
  }
/* Grouping content */
/* ============================================ */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
  }
/**
   * 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: inherit; /* 2 */
  }
address {
    font-style: inherit;
  }
/* Text-level semantics */
/* ============================================ */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
  }
/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
            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: inherit; /* 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;
  }
/* Embedded content */
/* ============================================ */
/**
   * Prevent vertical alignment issues.
   */
img,
  embed,
  object,
  iframe {
    vertical-align: bottom;
  }
/* Forms */
/* ============================================ */
/**
   * Reset form fields to make them styleable
   */
button,
  input,
  optgroup,
  select,
  textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
  }
/**
   * Reset radio and checkbox appearance to preserve their look in iOS.
   */
[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
         appearance: checkbox;
  }
[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
         appearance: radio;
  }
/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
  input {
    /* 1 */
    overflow: visible;
  }
/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
  select {
    /* 1 */
    text-transform: none;
  }
/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
  }
button[disabled],
  [type="button"][disabled],
  [type="reset"][disabled],
  [type="submit"][disabled] {
    cursor: default;
  }
/**
   * 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;
  }
/**
   * Remove arrow in IE10 & IE11
   */
select::-ms-expand {
    display: none;
  }
/**
   * Remove padding
   */
option {
    padding: 0;
  }
/**
   * Reset to invisible
   */
fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
  }
/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from fieldset elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    fieldset elements in all browsers.
   */
legend {
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
    vertical-align: baseline;
  }
/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
    overflow: auto;
  }
/**
   * 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 outline style in Safari.
   */
[type="search"] {
    outline-offset: -2px; /* 1 */
  }
/**
   * 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 */
  }
/**
   * Clickable labels
   */
label[for] {
    cursor: pointer;
  }
/* 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;
  }
/* Table */
/* ============================================ */
table {
    border-collapse: collapse;
    border-spacing: 0;
  }
caption {
    text-align: left;
  }
td,
  th {
    vertical-align: top;
    padding: 0;
  }
th {
    text-align: left;
    font-weight: bold;
  }
/* purgecss end ignore */
/**
        * @name          Sugar reset
        * @namespace          sugar.style.resets
        * @type               Styleguide
        * @menu           Styleguide / Resets        /styleguide/resets/sugar
        * @platform       css
        * @status       beta
        * 
        * This mixin allows you to apply the `sugar` reset easily.
        * 
        * @feature     Handle body height for IOS devices using the `fill-available` and `min-height: -webkit-fill-available;` technique
        * @feature     Ensure template are not displayed
        * @feature     Ensure hidden things are not displayed
        * @feature     Set the `box-sizing` to `border-box` for all HTMLElement
        * @feature     Set the webkit highlight color to transparent color
        * @feature     Remove outline on every elements
        * @feature     Set the `max-width` to `100%` for images
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @example        css       Simple usage
        * @sugar.reset.sugar;
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/* purgecss start ignore */
/**
     * Body height
     */
html {
        height: -webkit-fill-available;
        height: -moz-available;
        height: fill-available;
    }
body {
        min-height: calc(100 * var(--vh,1vh)) ;
        min-height: -webkit-fill-available;
    }
/**
     * Add the correct display in IE 10+.
     */
template {
        display: none;
    }
/**
     * Add the correct display in IE 10.
     */
[hidden] {
        display: none;
    }
/**
     * Set box sizing to berder box
     * Set the webkit highlight color to transparent color
     * Remote outline on every elements
     */
* {
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        outline: none;
    }
/**
     * Max width 100% for images
     */
img {
        max-width: 100%;
    }
/* purgecss end ignore */
body {
--s: default;
--s-variant: light;
--s-color-current-h: 0;
--s-color-current-s: 0;
--s-color-current-l: 50;
--s-color-current-a: 1;
--s-color-current-origin-h: 0;
--s-color-current-origin-s: 0;
--s-color-current-origin-l: 50;
--s-color-current-origin-a: 1;
--s-color-current-text-saturation-offset: 0;
--s-color-current-text-lightness-offset: 0;
--s-color-current-placeholder-saturation-offset: 0;
--s-color-current-placeholder-lightness-offset: 0;
--s-color-current-placeholder-a: 0.4;
--s-color-current-foreground-saturation-offset: 0;
--s-color-current-foreground-lightness-offset: 50;
--s-color-current-background-saturation-offset: 0;
--s-color-current-background-lightness-offset: 50;
--s-color-current-surface-saturation-offset: 0;
--s-color-current-surface-lightness-offset: 40;
--s-color-current-ui-saturation-offset: 0;
--s-color-current-ui-lightness-offset: 49;
--s-color-current-border-saturation-offset: 0;
--s-color-current-border-lightness-offset: 0;
--s-color-current-border-a: 0.2;
--s-color-current-hover-saturation-offset: 0;
--s-color-current-hover-lightness-offset: 40;
--s-color-current-active-saturation-offset: 0;
--s-color-current-active-lightness-offset: -10;
--s-color-current-gradient-start-saturation-offset: 0;
--s-color-current-gradient-start-lightness-offset: 0;
--s-color-current-gradient-end-saturation-offset: 0;
--s-color-current-gradient-end-lightness-offset: 20;
--s-color-main-h: 0;
--s-color-main-s: 0;
--s-color-main-l: 50;
--s-color-main-a: 1;
--s-color-main-origin-h: 0;
--s-color-main-origin-s: 0;
--s-color-main-origin-l: 50;
--s-color-main-origin-a: 1;
--s-color-main-text-saturation-offset: 0;
--s-color-main-text-lightness-offset: 0;
--s-color-main-text-saturation-offset: 0;
--s-color-main-text-lightness-offset: -15;
--s-color-main-placeholder-saturation-offset: 0;
--s-color-main-placeholder-lightness-offset: 0;
--s-color-main-placeholder-a: 0.4;
--s-color-main-foreground-saturation-offset: 0;
--s-color-main-foreground-lightness-offset: 50;
--s-color-main-background-saturation-offset: 0;
--s-color-main-background-lightness-offset: 50;
--s-color-main-surface-saturation-offset: 0;
--s-color-main-surface-lightness-offset: 40;
--s-color-main-surface-saturation-offset: 0;
--s-color-main-surface-lightness-offset: 49;
--s-color-main-ui-saturation-offset: 0;
--s-color-main-ui-lightness-offset: 49;
--s-color-main-border-saturation-offset: 0;
--s-color-main-border-lightness-offset: 0;
--s-color-main-border-a: 0.2;
--s-color-main-hover-saturation-offset: 0;
--s-color-main-hover-lightness-offset: 40;
--s-color-main-active-saturation-offset: 0;
--s-color-main-active-lightness-offset: -10;
--s-color-main-gradient-start-saturation-offset: 0;
--s-color-main-gradient-start-lightness-offset: 0;
--s-color-main-gradient-end-saturation-offset: 0;
--s-color-main-gradient-end-lightness-offset: 20;
--s-color-accent-h: 44;
--s-color-accent-s: 100;
--s-color-accent-l: 50;
--s-color-accent-a: 1;
--s-color-accent-origin-h: 44;
--s-color-accent-origin-s: 100;
--s-color-accent-origin-l: 50;
--s-color-accent-origin-a: 1;
--s-color-accent-text-saturation-offset: 0;
--s-color-accent-text-lightness-offset: 0;
--s-color-accent-placeholder-saturation-offset: 0;
--s-color-accent-placeholder-lightness-offset: 0;
--s-color-accent-placeholder-a: 0.4;
--s-color-accent-foreground-saturation-offset: 0;
--s-color-accent-foreground-lightness-offset: 50;
--s-color-accent-background-saturation-offset: 0;
--s-color-accent-background-lightness-offset: 50;
--s-color-accent-surface-saturation-offset: 0;
--s-color-accent-surface-lightness-offset: 40;
--s-color-accent-ui-saturation-offset: 0;
--s-color-accent-ui-lightness-offset: 49;
--s-color-accent-border-saturation-offset: 0;
--s-color-accent-border-lightness-offset: 0;
--s-color-accent-border-a: 0.2;
--s-color-accent-hover-saturation-offset: 0;
--s-color-accent-hover-lightness-offset: 40;
--s-color-accent-active-saturation-offset: 0;
--s-color-accent-active-lightness-offset: -10;
--s-color-accent-gradient-start-saturation-offset: 0;
--s-color-accent-gradient-start-lightness-offset: 0;
--s-color-accent-gradient-end-saturation-offset: 0;
--s-color-accent-gradient-end-lightness-offset: 20;
--s-color-complementary-h: 256;
--s-color-complementary-s: 93;
--s-color-complementary-l: 65;
--s-color-complementary-a: 1;
--s-color-complementary-origin-h: 256;
--s-color-complementary-origin-s: 93;
--s-color-complementary-origin-l: 65;
--s-color-complementary-origin-a: 1;
--s-color-complementary-text-saturation-offset: 0;
--s-color-complementary-text-lightness-offset: 0;
--s-color-complementary-text-saturation-offset: 0;
--s-color-complementary-text-lightness-offset: 15;
--s-color-complementary-placeholder-saturation-offset: 0;
--s-color-complementary-placeholder-lightness-offset: 0;
--s-color-complementary-placeholder-a: 0.4;
--s-color-complementary-foreground-saturation-offset: 0;
--s-color-complementary-foreground-lightness-offset: 50;
--s-color-complementary-background-saturation-offset: 0;
--s-color-complementary-background-lightness-offset: 50;
--s-color-complementary-surface-saturation-offset: 0;
--s-color-complementary-surface-lightness-offset: 40;
--s-color-complementary-ui-saturation-offset: 0;
--s-color-complementary-ui-lightness-offset: 49;
--s-color-complementary-border-saturation-offset: 0;
--s-color-complementary-border-lightness-offset: 0;
--s-color-complementary-border-a: 0.2;
--s-color-complementary-hover-saturation-offset: 0;
--s-color-complementary-hover-lightness-offset: 40;
--s-color-complementary-active-saturation-offset: 0;
--s-color-complementary-active-lightness-offset: -10;
--s-color-complementary-gradient-start-saturation-offset: 0;
--s-color-complementary-gradient-start-lightness-offset: 0;
--s-color-complementary-gradient-end-saturation-offset: 0;
--s-color-complementary-gradient-end-lightness-offset: 20;
--s-color-success-h: 86;
--s-color-success-s: 100;
--s-color-success-l: 50;
--s-color-success-a: 1;
--s-color-success-origin-h: 86;
--s-color-success-origin-s: 100;
--s-color-success-origin-l: 50;
--s-color-success-origin-a: 1;
--s-color-success-text-saturation-offset: 0;
--s-color-success-text-lightness-offset: 0;
--s-color-success-placeholder-saturation-offset: 0;
--s-color-success-placeholder-lightness-offset: 0;
--s-color-success-placeholder-a: 0.4;
--s-color-success-foreground-saturation-offset: 0;
--s-color-success-foreground-lightness-offset: 50;
--s-color-success-background-saturation-offset: 0;
--s-color-success-background-lightness-offset: 50;
--s-color-success-surface-saturation-offset: 0;
--s-color-success-surface-lightness-offset: 40;
--s-color-success-ui-saturation-offset: 0;
--s-color-success-ui-lightness-offset: 49;
--s-color-success-border-saturation-offset: 0;
--s-color-success-border-lightness-offset: 0;
--s-color-success-border-a: 0.2;
--s-color-success-hover-saturation-offset: 0;
--s-color-success-hover-lightness-offset: 40;
--s-color-success-active-saturation-offset: 0;
--s-color-success-active-lightness-offset: -10;
--s-color-success-gradient-start-saturation-offset: 0;
--s-color-success-gradient-start-lightness-offset: 0;
--s-color-success-gradient-end-saturation-offset: 0;
--s-color-success-gradient-end-lightness-offset: 20;
--s-color-warning-h: 50;
--s-color-warning-s: 100;
--s-color-warning-l: 50;
--s-color-warning-a: 1;
--s-color-warning-origin-h: 50;
--s-color-warning-origin-s: 100;
--s-color-warning-origin-l: 50;
--s-color-warning-origin-a: 1;
--s-color-warning-text-saturation-offset: 0;
--s-color-warning-text-lightness-offset: 0;
--s-color-warning-placeholder-saturation-offset: 0;
--s-color-warning-placeholder-lightness-offset: 0;
--s-color-warning-placeholder-a: 0.4;
--s-color-warning-foreground-saturation-offset: 0;
--s-color-warning-foreground-lightness-offset: 50;
--s-color-warning-background-saturation-offset: 0;
--s-color-warning-background-lightness-offset: 50;
--s-color-warning-surface-saturation-offset: 0;
--s-color-warning-surface-lightness-offset: 40;
--s-color-warning-ui-saturation-offset: 0;
--s-color-warning-ui-lightness-offset: 49;
--s-color-warning-border-saturation-offset: 0;
--s-color-warning-border-lightness-offset: 0;
--s-color-warning-border-a: 0.2;
--s-color-warning-hover-saturation-offset: 0;
--s-color-warning-hover-lightness-offset: 40;
--s-color-warning-active-saturation-offset: 0;
--s-color-warning-active-lightness-offset: -10;
--s-color-warning-gradient-start-saturation-offset: 0;
--s-color-warning-gradient-start-lightness-offset: 0;
--s-color-warning-gradient-end-saturation-offset: 0;
--s-color-warning-gradient-end-lightness-offset: 20;
--s-color-error-h: 346;
--s-color-error-s: 100;
--s-color-error-l: 50;
--s-color-error-a: 1;
--s-color-error-origin-h: 346;
--s-color-error-origin-s: 100;
--s-color-error-origin-l: 50;
--s-color-error-origin-a: 1;
--s-color-error-text-saturation-offset: 0;
--s-color-error-text-lightness-offset: 0;
--s-color-error-placeholder-saturation-offset: 0;
--s-color-error-placeholder-lightness-offset: 0;
--s-color-error-placeholder-a: 0.4;
--s-color-error-foreground-saturation-offset: 0;
--s-color-error-foreground-lightness-offset: 50;
--s-color-error-background-saturation-offset: 0;
--s-color-error-background-lightness-offset: 50;
--s-color-error-surface-saturation-offset: 0;
--s-color-error-surface-lightness-offset: 40;
--s-color-error-ui-saturation-offset: 0;
--s-color-error-ui-lightness-offset: 49;
--s-color-error-border-saturation-offset: 0;
--s-color-error-border-lightness-offset: 0;
--s-color-error-border-a: 0.2;
--s-color-error-hover-saturation-offset: 0;
--s-color-error-hover-lightness-offset: 40;
--s-color-error-active-saturation-offset: 0;
--s-color-error-active-lightness-offset: -10;
--s-color-error-gradient-start-saturation-offset: 0;
--s-color-error-gradient-start-lightness-offset: 0;
--s-color-error-gradient-end-saturation-offset: 0;
--s-color-error-gradient-end-lightness-offset: 20;
--s-color-info-h: 180;
--s-color-info-s: 100;
--s-color-info-l: 50;
--s-color-info-a: 1;
--s-color-info-origin-h: 180;
--s-color-info-origin-s: 100;
--s-color-info-origin-l: 50;
--s-color-info-origin-a: 1;
--s-color-info-text-saturation-offset: 0;
--s-color-info-text-lightness-offset: 0;
--s-color-info-text-saturation-offset: 0;
--s-color-info-text-lightness-offset: -10;
--s-color-info-placeholder-saturation-offset: 0;
--s-color-info-placeholder-lightness-offset: 0;
--s-color-info-placeholder-a: 0.4;
--s-color-info-foreground-saturation-offset: 0;
--s-color-info-foreground-lightness-offset: 50;
--s-color-info-background-saturation-offset: 0;
--s-color-info-background-lightness-offset: 50;
--s-color-info-surface-saturation-offset: 0;
--s-color-info-surface-lightness-offset: 40;
--s-color-info-ui-saturation-offset: 0;
--s-color-info-ui-lightness-offset: 49;
--s-color-info-border-saturation-offset: 0;
--s-color-info-border-lightness-offset: 0;
--s-color-info-border-a: 0.2;
--s-color-info-hover-saturation-offset: 0;
--s-color-info-hover-lightness-offset: 40;
--s-color-info-active-saturation-offset: 0;
--s-color-info-active-lightness-offset: -10;
--s-color-info-gradient-start-saturation-offset: 0;
--s-color-info-gradient-start-lightness-offset: 0;
--s-color-info-gradient-end-saturation-offset: 0;
--s-color-info-gradient-end-lightness-offset: 20;
--s-easing-default: cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-timing-slow: .6s;
--s-timing-default: .3s;
--s-timing-fast: .1s;
--s-transition-slow: all .6s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-transition-default: all .3s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-transition-fast: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-layout-offset-top: 0;
--s-layout-offset-right: 0;
--s-layout-offset-bottom: 0;
--s-layout-offset-left: 0;
--s-layout-container-default: 1280px;
--s-layout-container-wide: 1440px;
--s-layout-container-full: none;
--s-layout-grid-1: 1;
--s-layout-grid-2: 2;
--s-layout-grid-3: 3;
--s-layout-grid-4: 4;
--s-layout-grid-5: 5;
--s-layout-grid-6: 6;
--s-layout-grid-7: 7;
--s-layout-grid-8: 8;
--s-layout-grid-9: 9;
--s-layout-grid-10: 10;
--s-layout-grid-11: 11;
--s-layout-grid-12: 12;
--s-layout-layout-1: 1;
--s-layout-layout-12: 1 2;
--s-layout-layout-21: 2 1;
--s-layout-layout-112: 1 1 2;
--s-layout-layout-122: 1 2 2;
--s-layout-layout-123: 1 2 3;
--s-layout-layout-211: 2 1 1;
--s-layout-layout-221: 2 2 1;
--s-layout-layout-321: 3 2 1;
--s-layout-layout-1112: 1 1 1 2;
--s-layout-layout-1222: 1 2 2 2;
--s-layout-layout-1234: 1 2 3 4;
--s-layout-layout-2221: 2 2 2 1;
--s-layout-layout-11112: 1 1 1 1 2;
--s-layout-layout-12222: 1 2 2 2 2;
--s-layout-layout-12345: 1 2 3 4 5;
--s-layout-layout-22221: 2 2 2 2 1;
--s-layout-layout-111112: 1 1 1 1 1 2;
--s-layout-layout-122222: 1 2 2 2 2 2;
--s-layout-layout-123456: 1 2 3 4 5 6;
--s-layout-layout-1-2: 1 _ 2;
--s-layout-layout-2-1: 2 _ 1;
--s-layout-layout-12-33: 1 2 _ 3 3;
--s-layout-layout-1-23: 1 _ 2 3;
--s-layout-layout-1-2-3: 1 _ 2 _ 3;
--s-layout-layout-32-1: 3 2 _ 1;
--s-layout-layout-3-21: 3 _ 2 1;
--s-layout-layout-12-34: 1 2 _ 3 4;
--s-layout-layout-123-4: 1 2 3 _ 4;
--s-layout-layout-1-234: 1 _ 2 3 4;
--s-layout-layout-1-2-3-4: 1 _ 2 _ 3 _ 4;
--s-layout-layout-123-45: 1 2 3 _ 4 5;
--s-layout-layout-12-345: 1 2 _ 3 4 5;
--s-layout-layout-1-2345: 1 _ 2 3 4 5;
--s-layout-layout-1234-5: 1 2 3 4 _ 5;
--s-layout-layout-1-2-3-4-5: 1 _ 2 _ 3 _ 4 _ 5;
--s-scale-10: 1;
--s-scale-11: 1.1;
--s-scale-12: 1.2;
--s-scale-13: 1.3;
--s-scale-14: 1.4;
--s-scale-15: 1.5;
--s-scale-16: 1.6;
--s-scale-17: 1.7;
--s-scale-18: 1.8;
--s-scale-19: 1.9;
--s-scale-20: 2;
--s-scale-default: 1;
--s-scale-01: 0.1;
--s-scale-02: 0.2;
--s-scale-03: 0.3;
--s-scale-04: 0.4;
--s-scale-05: 0.5;
--s-scale-06: 0.6;
--s-scale-07: 0.7;
--s-scale-08: 0.8;
--s-scale-09: 0.9;
--s-opacity-0: 0;
--s-opacity-10: 0.1;
--s-opacity-20: 0.2;
--s-opacity-30: 0.3;
--s-opacity-40: 0.4;
--s-opacity-50: 0.5;
--s-opacity-60: 0.6;
--s-opacity-70: 0.7;
--s-opacity-80: 0.8;
--s-opacity-90: 0.9;
--s-opacity-100: 1;
--s-width-0: 0;
--s-width-10: 10%;
--s-width-20: 20%;
--s-width-30: 30%;
--s-width-40: 40%;
--s-width-50: 50%;
--s-width-60: 60%;
--s-width-70: 70%;
--s-width-80: 80%;
--s-width-90: 90%;
--s-width-100: 100%;
--s-height-0: 0;
--s-height-10: 10%;
--s-height-20: 20%;
--s-height-30: 30%;
--s-height-40: 40%;
--s-height-50: 50%;
--s-height-60: 60%;
--s-height-70: 70%;
--s-height-80: 80%;
--s-height-90: 90%;
--s-height-100: 100%;
--s-depth-0: 0;
--s-depth-5: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.006),
  0px 2.5px 1.5px rgba(0, 0, 0, 0.005),
  0px 3.5px 3.4px rgba(0, 0, 0, 0.006),
  0px 4.4px 4.3px rgba(0, 0, 0, 0.007),
  0px 10px 10px rgba(0, 0, 0, 0.01);
--s-depth-10: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
--s-depth-20: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
--s-depth-30: 0px 0.6px 0.4px rgba(0, 0, 0, 0.008),
  0px 1.3px 1px rgba(0, 0, 0, 0.012),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.015),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.018),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.022),
  0px 20px 15px rgba(0, 0, 0, 0.03);
--s-depth-40: 0px 0.8px 0.6px rgba(0, 0, 0, 0.008),
  0px 2px 1.3px rgba(0, 0, 0, 0.012),
  0px 3.8px 2.5px rgba(0, 0, 0, 0.015),
  0px 6.7px 4.5px rgba(0, 0, 0, 0.018),
  0px 12.5px 8.4px rgba(0, 0, 0, 0.022),
  0px 30px 20px rgba(0, 0, 0, 0.03);
--s-depth-50: 0px 1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.3px 2px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.8px rgba(0, 0, 0, 0.02),
  0px 7.8px 6.7px rgba(0, 0, 0, 0.024),
  0px 14.6px 12.5px rgba(0, 0, 0, 0.029),
  0px 35px 30px rgba(0, 0, 0, 0.04);
--s-depth-60: 0px 1px 0.7px rgba(0, 0, 0, 0.011),
  0px 2.3px 1.7px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.1px rgba(0, 0, 0, 0.02),
  0px 7.8px 5.6px rgba(0, 0, 0, 0.024),
  0px 14.6px 10.4px rgba(0, 0, 0, 0.029),
  0px 35px 25px rgba(0, 0, 0, 0.04);
--s-depth-70: 0px 1.1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.7px 2px rgba(0, 0, 0, 0.016),
  0px 5px 3.8px rgba(0, 0, 0, 0.02),
  0px 8.9px 6.7px rgba(0, 0, 0, 0.024),
  0px 16.7px 12.5px rgba(0, 0, 0, 0.029),
  0px 40px 30px rgba(0, 0, 0, 0.04);
--s-depth-80: 0px 1.1px 1px rgba(0, 0, 0, 0.011),
  0px 2.7px 2.3px rgba(0, 0, 0, 0.016),
  0px 5px 4.4px rgba(0, 0, 0, 0.02),
  0px 8.9px 7.8px rgba(0, 0, 0, 0.024),
  0px 16.7px 14.6px rgba(0, 0, 0, 0.029),
  0px 40px 35px rgba(0, 0, 0, 0.04);
--s-depth-90: 0px 1.4px 1.1px rgba(0, 0, 0, 0.011),
  0px 3.3px 2.7px rgba(0, 0, 0, 0.016),
  0px 6.1px 5px rgba(0, 0, 0, 0.02),
  0px 10.9px 8.9px rgba(0, 0, 0, 0.024),
  0px 20.5px 16.7px rgba(0, 0, 0, 0.029),
  0px 49px 40px rgba(0, 0, 0, 0.04);
--s-depth-100: 0px 1.4px 1.4px rgba(0, 0, 0, 0.011),
  0px 3.3px 3.5px rgba(0, 0, 0, 0.016),
  0px 6.1px 6.5px rgba(0, 0, 0, 0.02),
  0px 10.9px 11.6px rgba(0, 0, 0, 0.024),
  0px 20.5px 21.7px rgba(0, 0, 0, 0.029),
  0px 49px 52px rgba(0, 0, 0, 0.04);
--s-depth-default: 0;
--s-size-0: 0.25;
--s-size-5: 0.5;
--s-size-10: 0.65;
--s-size-15: 0.7;
--s-size-20: 0.75;
--s-size-25: 0.95;
--s-size-30: 1.1;
--s-size-40: 1.35;
--s-size-50: 1.8;
--s-size-60: 2.5;
--s-size-70: 3.2;
--s-size-80: 4.5;
--s-size-90: 7;
--s-size-100: 20;
--s-size-default: 16px;
--s-font-family-default-font-family: "Roboto";
--s-font-family-default-font-weight: 400;
--s-font-family-default-import: "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
--s-font-family-title-font-family: "Roboto";
--s-font-family-title-font-weight: 500;
--s-font-family-title-import: "https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap";
--s-font-family-quote-font-family: "Palatino, Times, Georgia, serif";
--s-font-family-quote-font-weight: normal;
--s-font-family-quote-font-style: normal;
--s-font-family-quote-font-display: auto;
--s-font-family-quote-cap-height: 0.65;
--s-font-family-code-font-family: Menlo, Monaco, Consolas, Courier New, monospace;
--s-font-family-code-font-weight: normal;
--s-font-family-code-font-style: normal;
--s-font-family-code-font-display: auto;
--s-font-family-code-cap-height: 0.65;
--s-font-size-0: 0;
--s-font-size-5: 0.5;
--s-font-size-10: 0.65;
--s-font-size-15: 0.7;
--s-font-size-20: 0.75;
--s-font-size-25: 0.95;
--s-font-size-30: 1.1;
--s-font-size-40: 1.35;
--s-font-size-50: 1.8;
--s-font-size-60: 2.5;
--s-font-size-70: 3.2;
--s-font-size-80: 4.5;
--s-font-size-90: 7;
--s-font-size-100: 20;
--s-font-size-default: 16px;
--s-border-width-0: 0;
--s-border-width-10: 1;
--s-border-width-20: 2;
--s-border-width-30: 4;
--s-border-width-40: 6;
--s-border-width-50: 8;
--s-border-width-60: 12;
--s-border-width-70: 16;
--s-border-width-80: 20;
--s-border-width-90: 24;
--s-border-width-100: 30;
--s-border-width-default: 1px;
--s-border-radius-0: 0;
--s-border-radius-10: 0.8;
--s-border-radius-20: 1.6;
--s-border-radius-30: 2.4;
--s-border-radius-40: 3.2;
--s-border-radius-50: 4;
--s-border-radius-60: 5.2;
--s-border-radius-70: 6.4;
--s-border-radius-80: 8;
--s-border-radius-90: 10;
--s-border-radius-100: 12;
--s-border-radius-default: 5px;
--s-space-0: 0;
--s-space-10: 0.375;
--s-space-20: 0.75;
--s-space-30: 1.4;
--s-space-40: 2;
--s-space-50: 3.5;
--s-space-60: 5;
--s-space-70: 7.5;
--s-space-80: 10;
--s-space-90: 15;
--s-space-100: 20;
--s-space-default: 1rem;
--s-margin-0: 0;
--s-margin-10: 0.375;
--s-margin-20: 0.75;
--s-margin-30: 1.4;
--s-margin-40: 2;
--s-margin-50: 3.5;
--s-margin-60: 5;
--s-margin-70: 7.5;
--s-margin-80: 10;
--s-margin-90: 15;
--s-margin-100: 20;
--s-margin-default: 1rem;
--s-padding-0: 0;
--s-padding-10: 0.375;
--s-padding-20: 0.75;
--s-padding-30: 1.4;
--s-padding-40: 2;
--s-padding-50: 3.5;
--s-padding-60: 5;
--s-padding-70: 7.5;
--s-padding-80: 10;
--s-padding-90: 15;
--s-padding-100: 20;
--s-padding-default: 1rem;
--s-offsize-0: 0;
--s-offsize-10: 0.375;
--s-offsize-20: 0.75;
--s-offsize-30: 1.4;
--s-offsize-40: 2;
--s-offsize-50: 3.5;
--s-offsize-60: 5;
--s-offsize-70: 7.5;
--s-offsize-80: 10;
--s-offsize-90: 15;
--s-offsize-100: 20;
--s-offsize-default: 1rem;
--s-ui-code-example-padding-inline: 3.5;
--s-ui-code-example-padding-block: 3.5;
--s-ui-default-padding-inline: 1.25;
--s-ui-default-padding-block: 0.75;
--s-ui-default-border-radius: 1;
--s-ui-default-border-width: 1px;
--s-ui-default-transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-ui-default-default-lnf: solid;
--s-ui-default-depth: 0;
--s-ui-default-outline: true;
--s-ui-default-spacing: 1.4;
--s-ui-default-rhythm-vertical-margin-bottom: 60;
--s-ui-menu-padding-inline: 2;
--s-ui-menu-padding-block: 1.4;
--s-ui-menu-border-radius: 1;
--s-ui-menu-border-width: 1px;
--s-ui-menu-transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-ui-menu-default-lnf: solid;
--s-ui-menu-default-type: primary;
--s-ui-menu-depth: 0;
--s-ui-menu-rhythm-vertical-margin-bottom: 60;
--s-ui-card-padding-inline: 3.5;
--s-ui-card-padding-block: 3.5;
--s-ui-form-padding-inline: 1;
--s-ui-form-padding-block: 0.75;
--s-ui-form-border-radius: 1;
--s-ui-form-transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-ui-form-outline: true;
--s-ui-form-rhythm-vertical-margin-bottom: 40;
--s-ui-outline-active: true;
--s-ui-outline-border-width: 10px;
--s-ui-outline-border-radius: 1;
--s-ui-outline-transition: all .2s ease-out;
--s-ui-scrollbar-size: 2px;
--s-ui-scrollbar-color: accent;
--s-ui-label-default-lnf: inline;
--s-ui-dropdown-padding-inline: 0.75;
--s-ui-dropdown-padding-block: 0.75;
--s-ui-dropdown-item-padding-inline: 1.25;
--s-ui-dropdown-item-padding-block: 0.75;
--s-ui-list-default-lnf: dl;
--s-ui-list-bullet-char: -;
--s-ui-fs-tree-bullet-char: ●;
--s-ui-tooltip-default-position: top;
--s-ui-tooltip-arrow-size: 15px;
--s-ui-loader-duration: 1s;
--s-ui-loader-easing: linear;color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
        background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);font-size: calc(var(--s-font-size-default, 16px) * 1);--s-shape: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
        --s-scale: var(--s-scale-default, 1);
}
.s-wireframe body {
            color: rgba(0, 0, 0, 0.5);background-color: #ffffff;
}
[theme$="dark"] .s-wireframe body, .s-wireframe body[theme$="dark"] {
            background-color: #2D323A;
}
[theme$="dark"] .s-wireframe body, .s-wireframe body[theme$="dark"] {
                color: rgba(255, 255, 255, 0.7);
}
/**
        * @name               default
        * @namespace          sugar.style.font
        * @type               CssFontFace
        * @platform           css
        * @status             beta
        * 
        * This declare the @font-face for the "<yellow>default</yellow> font family"
        * 
        * @since          2.0.0
        * @author 	                Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/**
        * @name               title
        * @namespace          sugar.style.font
        * @type               CssFontFace
        * @platform           css
        * @status             beta
        * 
        * This declare the @font-face for the "<yellow>title</yellow> font family"
        * 
        * @since          2.0.0
        * @author 	                Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
::-moz-selection {
        color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0) + -40) * 1%),1);
        background: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
    }
::selection {
        color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0) + -40) * 1%),1);
        background: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
    }
[theme$="dark"] {
--s: default;
--s-variant: dark;
--s-color-current-h: 0;
--s-color-current-s: 0;
--s-color-current-l: 50;
--s-color-current-a: 1;
--s-color-current-origin-h: 0;
--s-color-current-origin-s: 0;
--s-color-current-origin-l: 50;
--s-color-current-origin-a: 1;
--s-color-current-text-saturation-offset: 0;
--s-color-current-text-lightness-offset: 15;
--s-color-current-placeholder-saturation-offset: 0;
--s-color-current-placeholder-lightness-offset: 50;
--s-color-current-placeholder-a: 0.4;
--s-color-current-foreground-saturation-offset: 0;
--s-color-current-foreground-lightness-offset: 50;
--s-color-current-background-saturation-offset: 0;
--s-color-current-background-lightness-offset: -30;
--s-color-current-surface-saturation-offset: 0;
--s-color-current-surface-lightness-offset: -25;
--s-color-current-ui-saturation-offset: 0;
--s-color-current-ui-lightness-offset: -28;
--s-color-current-border-saturation-offset: 0;
--s-color-current-border-lightness-offset: 0;
--s-color-current-border-a: 0.4;
--s-color-current-hover-saturation-offset: 0;
--s-color-current-hover-lightness-offset: 40;
--s-color-current-active-saturation-offset: 0;
--s-color-current-active-lightness-offset: -10;
--s-color-current-gradient-start-saturation-offset: 0;
--s-color-current-gradient-start-lightness-offset: 0;
--s-color-current-gradient-end-saturation-offset: 0;
--s-color-current-gradient-end-lightness-offset: -20;
--s-color-main-h: 0;
--s-color-main-s: 0;
--s-color-main-l: 50;
--s-color-main-a: 1;
--s-color-main-origin-h: 0;
--s-color-main-origin-s: 0;
--s-color-main-origin-l: 50;
--s-color-main-origin-a: 1;
--s-color-main-text-saturation-offset: 0;
--s-color-main-text-lightness-offset: 15;
--s-color-main-text-saturation-offset: 0;
--s-color-main-text-lightness-offset: 50;
--s-color-main-placeholder-saturation-offset: 0;
--s-color-main-placeholder-lightness-offset: 50;
--s-color-main-placeholder-a: 0.4;
--s-color-main-foreground-saturation-offset: 0;
--s-color-main-foreground-lightness-offset: 50;
--s-color-main-background-saturation-offset: 0;
--s-color-main-background-lightness-offset: -30;
--s-color-main-surface-saturation-offset: 0;
--s-color-main-surface-lightness-offset: -25;
--s-color-main-ui-saturation-offset: 0;
--s-color-main-ui-lightness-offset: -28;
--s-color-main-border-saturation-offset: 0;
--s-color-main-border-lightness-offset: 0;
--s-color-main-border-a: 0.4;
--s-color-main-hover-saturation-offset: 0;
--s-color-main-hover-lightness-offset: 40;
--s-color-main-active-saturation-offset: 0;
--s-color-main-active-lightness-offset: -10;
--s-color-main-gradient-start-saturation-offset: 0;
--s-color-main-gradient-start-lightness-offset: 0;
--s-color-main-gradient-end-saturation-offset: 0;
--s-color-main-gradient-end-lightness-offset: -20;
--s-color-accent-h: 44;
--s-color-accent-s: 100;
--s-color-accent-l: 50;
--s-color-accent-a: 1;
--s-color-accent-origin-h: 44;
--s-color-accent-origin-s: 100;
--s-color-accent-origin-l: 50;
--s-color-accent-origin-a: 1;
--s-color-accent-text-saturation-offset: 0;
--s-color-accent-text-lightness-offset: 15;
--s-color-accent-placeholder-saturation-offset: 0;
--s-color-accent-placeholder-lightness-offset: 50;
--s-color-accent-placeholder-a: 0.4;
--s-color-accent-foreground-saturation-offset: 0;
--s-color-accent-foreground-lightness-offset: 50;
--s-color-accent-background-saturation-offset: 0;
--s-color-accent-background-lightness-offset: -30;
--s-color-accent-surface-saturation-offset: 0;
--s-color-accent-surface-lightness-offset: -25;
--s-color-accent-ui-saturation-offset: 0;
--s-color-accent-ui-lightness-offset: -28;
--s-color-accent-border-saturation-offset: 0;
--s-color-accent-border-lightness-offset: 0;
--s-color-accent-border-a: 0.4;
--s-color-accent-hover-saturation-offset: 0;
--s-color-accent-hover-lightness-offset: 40;
--s-color-accent-active-saturation-offset: 0;
--s-color-accent-active-lightness-offset: -10;
--s-color-accent-gradient-start-saturation-offset: 0;
--s-color-accent-gradient-start-lightness-offset: 0;
--s-color-accent-gradient-end-saturation-offset: 0;
--s-color-accent-gradient-end-lightness-offset: -20;
--s-color-complementary-h: 256;
--s-color-complementary-s: 93;
--s-color-complementary-l: 65;
--s-color-complementary-a: 1;
--s-color-complementary-origin-h: 256;
--s-color-complementary-origin-s: 93;
--s-color-complementary-origin-l: 65;
--s-color-complementary-origin-a: 1;
--s-color-complementary-text-saturation-offset: 0;
--s-color-complementary-text-lightness-offset: 15;
--s-color-complementary-placeholder-saturation-offset: 0;
--s-color-complementary-placeholder-lightness-offset: 50;
--s-color-complementary-placeholder-a: 0.4;
--s-color-complementary-foreground-saturation-offset: 0;
--s-color-complementary-foreground-lightness-offset: 50;
--s-color-complementary-background-saturation-offset: 0;
--s-color-complementary-background-lightness-offset: -30;
--s-color-complementary-surface-saturation-offset: 0;
--s-color-complementary-surface-lightness-offset: -25;
--s-color-complementary-ui-saturation-offset: 0;
--s-color-complementary-ui-lightness-offset: -28;
--s-color-complementary-border-saturation-offset: 0;
--s-color-complementary-border-lightness-offset: 0;
--s-color-complementary-border-a: 0.4;
--s-color-complementary-hover-saturation-offset: 0;
--s-color-complementary-hover-lightness-offset: 40;
--s-color-complementary-active-saturation-offset: 0;
--s-color-complementary-active-lightness-offset: -10;
--s-color-complementary-gradient-start-saturation-offset: 0;
--s-color-complementary-gradient-start-lightness-offset: 0;
--s-color-complementary-gradient-end-saturation-offset: 0;
--s-color-complementary-gradient-end-lightness-offset: -20;
--s-color-success-h: 86;
--s-color-success-s: 100;
--s-color-success-l: 50;
--s-color-success-a: 1;
--s-color-success-origin-h: 86;
--s-color-success-origin-s: 100;
--s-color-success-origin-l: 50;
--s-color-success-origin-a: 1;
--s-color-success-text-saturation-offset: 0;
--s-color-success-text-lightness-offset: 15;
--s-color-success-placeholder-saturation-offset: 0;
--s-color-success-placeholder-lightness-offset: 50;
--s-color-success-placeholder-a: 0.4;
--s-color-success-foreground-saturation-offset: 0;
--s-color-success-foreground-lightness-offset: 50;
--s-color-success-background-saturation-offset: 0;
--s-color-success-background-lightness-offset: -30;
--s-color-success-surface-saturation-offset: 0;
--s-color-success-surface-lightness-offset: -25;
--s-color-success-ui-saturation-offset: 0;
--s-color-success-ui-lightness-offset: -28;
--s-color-success-border-saturation-offset: 0;
--s-color-success-border-lightness-offset: 0;
--s-color-success-border-a: 0.4;
--s-color-success-hover-saturation-offset: 0;
--s-color-success-hover-lightness-offset: 40;
--s-color-success-active-saturation-offset: 0;
--s-color-success-active-lightness-offset: -10;
--s-color-success-gradient-start-saturation-offset: 0;
--s-color-success-gradient-start-lightness-offset: 0;
--s-color-success-gradient-end-saturation-offset: 0;
--s-color-success-gradient-end-lightness-offset: -20;
--s-color-warning-h: 50;
--s-color-warning-s: 100;
--s-color-warning-l: 50;
--s-color-warning-a: 1;
--s-color-warning-origin-h: 50;
--s-color-warning-origin-s: 100;
--s-color-warning-origin-l: 50;
--s-color-warning-origin-a: 1;
--s-color-warning-text-saturation-offset: 0;
--s-color-warning-text-lightness-offset: 15;
--s-color-warning-placeholder-saturation-offset: 0;
--s-color-warning-placeholder-lightness-offset: 50;
--s-color-warning-placeholder-a: 0.4;
--s-color-warning-foreground-saturation-offset: 0;
--s-color-warning-foreground-lightness-offset: 50;
--s-color-warning-background-saturation-offset: 0;
--s-color-warning-background-lightness-offset: -30;
--s-color-warning-surface-saturation-offset: 0;
--s-color-warning-surface-lightness-offset: -25;
--s-color-warning-ui-saturation-offset: 0;
--s-color-warning-ui-lightness-offset: -28;
--s-color-warning-border-saturation-offset: 0;
--s-color-warning-border-lightness-offset: 0;
--s-color-warning-border-a: 0.4;
--s-color-warning-hover-saturation-offset: 0;
--s-color-warning-hover-lightness-offset: 40;
--s-color-warning-active-saturation-offset: 0;
--s-color-warning-active-lightness-offset: -10;
--s-color-warning-gradient-start-saturation-offset: 0;
--s-color-warning-gradient-start-lightness-offset: 0;
--s-color-warning-gradient-end-saturation-offset: 0;
--s-color-warning-gradient-end-lightness-offset: -20;
--s-color-error-h: 346;
--s-color-error-s: 100;
--s-color-error-l: 50;
--s-color-error-a: 1;
--s-color-error-origin-h: 346;
--s-color-error-origin-s: 100;
--s-color-error-origin-l: 50;
--s-color-error-origin-a: 1;
--s-color-error-text-saturation-offset: 0;
--s-color-error-text-lightness-offset: 15;
--s-color-error-placeholder-saturation-offset: 0;
--s-color-error-placeholder-lightness-offset: 50;
--s-color-error-placeholder-a: 0.4;
--s-color-error-foreground-saturation-offset: 0;
--s-color-error-foreground-lightness-offset: 50;
--s-color-error-background-saturation-offset: 0;
--s-color-error-background-lightness-offset: -30;
--s-color-error-surface-saturation-offset: 0;
--s-color-error-surface-lightness-offset: -25;
--s-color-error-ui-saturation-offset: 0;
--s-color-error-ui-lightness-offset: -28;
--s-color-error-border-saturation-offset: 0;
--s-color-error-border-lightness-offset: 0;
--s-color-error-border-a: 0.4;
--s-color-error-hover-saturation-offset: 0;
--s-color-error-hover-lightness-offset: 40;
--s-color-error-active-saturation-offset: 0;
--s-color-error-active-lightness-offset: -10;
--s-color-error-gradient-start-saturation-offset: 0;
--s-color-error-gradient-start-lightness-offset: 0;
--s-color-error-gradient-end-saturation-offset: 0;
--s-color-error-gradient-end-lightness-offset: -20;
--s-color-info-h: 180;
--s-color-info-s: 100;
--s-color-info-l: 50;
--s-color-info-a: 1;
--s-color-info-origin-h: 180;
--s-color-info-origin-s: 100;
--s-color-info-origin-l: 50;
--s-color-info-origin-a: 1;
--s-color-info-text-saturation-offset: 0;
--s-color-info-text-lightness-offset: 15;
--s-color-info-placeholder-saturation-offset: 0;
--s-color-info-placeholder-lightness-offset: 50;
--s-color-info-placeholder-a: 0.4;
--s-color-info-foreground-saturation-offset: 0;
--s-color-info-foreground-lightness-offset: 50;
--s-color-info-background-saturation-offset: 0;
--s-color-info-background-lightness-offset: -30;
--s-color-info-surface-saturation-offset: 0;
--s-color-info-surface-lightness-offset: -25;
--s-color-info-ui-saturation-offset: 0;
--s-color-info-ui-lightness-offset: -28;
--s-color-info-border-saturation-offset: 0;
--s-color-info-border-lightness-offset: 0;
--s-color-info-border-a: 0.4;
--s-color-info-hover-saturation-offset: 0;
--s-color-info-hover-lightness-offset: 40;
--s-color-info-active-saturation-offset: 0;
--s-color-info-active-lightness-offset: -10;
--s-color-info-gradient-start-saturation-offset: 0;
--s-color-info-gradient-start-lightness-offset: 0;
--s-color-info-gradient-end-saturation-offset: 0;
--s-color-info-gradient-end-lightness-offset: -20;
--s-easing-default: cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-timing-slow: .6s;
--s-timing-default: .3s;
--s-timing-fast: .1s;
--s-transition-slow: all .6s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-transition-default: all .3s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-transition-fast: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-layout-offset-top: 0;
--s-layout-offset-right: 0;
--s-layout-offset-bottom: 0;
--s-layout-offset-left: 0;
--s-layout-container-default: 1280px;
--s-layout-container-wide: 1440px;
--s-layout-container-full: none;
--s-layout-grid-1: 1;
--s-layout-grid-2: 2;
--s-layout-grid-3: 3;
--s-layout-grid-4: 4;
--s-layout-grid-5: 5;
--s-layout-grid-6: 6;
--s-layout-grid-7: 7;
--s-layout-grid-8: 8;
--s-layout-grid-9: 9;
--s-layout-grid-10: 10;
--s-layout-grid-11: 11;
--s-layout-grid-12: 12;
--s-layout-layout-1: 1;
--s-layout-layout-12: 1 2;
--s-layout-layout-21: 2 1;
--s-layout-layout-112: 1 1 2;
--s-layout-layout-122: 1 2 2;
--s-layout-layout-123: 1 2 3;
--s-layout-layout-211: 2 1 1;
--s-layout-layout-221: 2 2 1;
--s-layout-layout-321: 3 2 1;
--s-layout-layout-1112: 1 1 1 2;
--s-layout-layout-1222: 1 2 2 2;
--s-layout-layout-1234: 1 2 3 4;
--s-layout-layout-2221: 2 2 2 1;
--s-layout-layout-11112: 1 1 1 1 2;
--s-layout-layout-12222: 1 2 2 2 2;
--s-layout-layout-12345: 1 2 3 4 5;
--s-layout-layout-22221: 2 2 2 2 1;
--s-layout-layout-111112: 1 1 1 1 1 2;
--s-layout-layout-122222: 1 2 2 2 2 2;
--s-layout-layout-123456: 1 2 3 4 5 6;
--s-layout-layout-1-2: 1 _ 2;
--s-layout-layout-2-1: 2 _ 1;
--s-layout-layout-12-33: 1 2 _ 3 3;
--s-layout-layout-1-23: 1 _ 2 3;
--s-layout-layout-1-2-3: 1 _ 2 _ 3;
--s-layout-layout-32-1: 3 2 _ 1;
--s-layout-layout-3-21: 3 _ 2 1;
--s-layout-layout-12-34: 1 2 _ 3 4;
--s-layout-layout-123-4: 1 2 3 _ 4;
--s-layout-layout-1-234: 1 _ 2 3 4;
--s-layout-layout-1-2-3-4: 1 _ 2 _ 3 _ 4;
--s-layout-layout-123-45: 1 2 3 _ 4 5;
--s-layout-layout-12-345: 1 2 _ 3 4 5;
--s-layout-layout-1-2345: 1 _ 2 3 4 5;
--s-layout-layout-1234-5: 1 2 3 4 _ 5;
--s-layout-layout-1-2-3-4-5: 1 _ 2 _ 3 _ 4 _ 5;
--s-scale-10: 1;
--s-scale-11: 1.1;
--s-scale-12: 1.2;
--s-scale-13: 1.3;
--s-scale-14: 1.4;
--s-scale-15: 1.5;
--s-scale-16: 1.6;
--s-scale-17: 1.7;
--s-scale-18: 1.8;
--s-scale-19: 1.9;
--s-scale-20: 2;
--s-scale-default: 1;
--s-scale-01: 0.1;
--s-scale-02: 0.2;
--s-scale-03: 0.3;
--s-scale-04: 0.4;
--s-scale-05: 0.5;
--s-scale-06: 0.6;
--s-scale-07: 0.7;
--s-scale-08: 0.8;
--s-scale-09: 0.9;
--s-opacity-0: 0;
--s-opacity-10: 0.1;
--s-opacity-20: 0.2;
--s-opacity-30: 0.3;
--s-opacity-40: 0.4;
--s-opacity-50: 0.5;
--s-opacity-60: 0.6;
--s-opacity-70: 0.7;
--s-opacity-80: 0.8;
--s-opacity-90: 0.9;
--s-opacity-100: 1;
--s-width-0: 0;
--s-width-10: 10%;
--s-width-20: 20%;
--s-width-30: 30%;
--s-width-40: 40%;
--s-width-50: 50%;
--s-width-60: 60%;
--s-width-70: 70%;
--s-width-80: 80%;
--s-width-90: 90%;
--s-width-100: 100%;
--s-height-0: 0;
--s-height-10: 10%;
--s-height-20: 20%;
--s-height-30: 30%;
--s-height-40: 40%;
--s-height-50: 50%;
--s-height-60: 60%;
--s-height-70: 70%;
--s-height-80: 80%;
--s-height-90: 90%;
--s-height-100: 100%;
--s-depth-0: 0;
--s-depth-5: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.006),
  0px 2.5px 1.5px rgba(0, 0, 0, 0.005),
  0px 3.5px 3.4px rgba(0, 0, 0, 0.006),
  0px 4.4px 4.3px rgba(0, 0, 0, 0.007),
  0px 10px 10px rgba(0, 0, 0, 0.01);
--s-depth-10: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
--s-depth-20: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
--s-depth-30: 0px 0.6px 0.4px rgba(0, 0, 0, 0.008),
  0px 1.3px 1px rgba(0, 0, 0, 0.012),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.015),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.018),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.022),
  0px 20px 15px rgba(0, 0, 0, 0.03);
--s-depth-40: 0px 0.8px 0.6px rgba(0, 0, 0, 0.008),
  0px 2px 1.3px rgba(0, 0, 0, 0.012),
  0px 3.8px 2.5px rgba(0, 0, 0, 0.015),
  0px 6.7px 4.5px rgba(0, 0, 0, 0.018),
  0px 12.5px 8.4px rgba(0, 0, 0, 0.022),
  0px 30px 20px rgba(0, 0, 0, 0.03);
--s-depth-50: 0px 1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.3px 2px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.8px rgba(0, 0, 0, 0.02),
  0px 7.8px 6.7px rgba(0, 0, 0, 0.024),
  0px 14.6px 12.5px rgba(0, 0, 0, 0.029),
  0px 35px 30px rgba(0, 0, 0, 0.04);
--s-depth-60: 0px 1px 0.7px rgba(0, 0, 0, 0.011),
  0px 2.3px 1.7px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.1px rgba(0, 0, 0, 0.02),
  0px 7.8px 5.6px rgba(0, 0, 0, 0.024),
  0px 14.6px 10.4px rgba(0, 0, 0, 0.029),
  0px 35px 25px rgba(0, 0, 0, 0.04);
--s-depth-70: 0px 1.1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.7px 2px rgba(0, 0, 0, 0.016),
  0px 5px 3.8px rgba(0, 0, 0, 0.02),
  0px 8.9px 6.7px rgba(0, 0, 0, 0.024),
  0px 16.7px 12.5px rgba(0, 0, 0, 0.029),
  0px 40px 30px rgba(0, 0, 0, 0.04);
--s-depth-80: 0px 1.1px 1px rgba(0, 0, 0, 0.011),
  0px 2.7px 2.3px rgba(0, 0, 0, 0.016),
  0px 5px 4.4px rgba(0, 0, 0, 0.02),
  0px 8.9px 7.8px rgba(0, 0, 0, 0.024),
  0px 16.7px 14.6px rgba(0, 0, 0, 0.029),
  0px 40px 35px rgba(0, 0, 0, 0.04);
--s-depth-90: 0px 1.4px 1.1px rgba(0, 0, 0, 0.011),
  0px 3.3px 2.7px rgba(0, 0, 0, 0.016),
  0px 6.1px 5px rgba(0, 0, 0, 0.02),
  0px 10.9px 8.9px rgba(0, 0, 0, 0.024),
  0px 20.5px 16.7px rgba(0, 0, 0, 0.029),
  0px 49px 40px rgba(0, 0, 0, 0.04);
--s-depth-100: 0px 1.4px 1.4px rgba(0, 0, 0, 0.011),
  0px 3.3px 3.5px rgba(0, 0, 0, 0.016),
  0px 6.1px 6.5px rgba(0, 0, 0, 0.02),
  0px 10.9px 11.6px rgba(0, 0, 0, 0.024),
  0px 20.5px 21.7px rgba(0, 0, 0, 0.029),
  0px 49px 52px rgba(0, 0, 0, 0.04);
--s-depth-default: 0;
--s-size-0: 0.25;
--s-size-5: 0.5;
--s-size-10: 0.65;
--s-size-15: 0.7;
--s-size-20: 0.75;
--s-size-25: 0.95;
--s-size-30: 1.1;
--s-size-40: 1.35;
--s-size-50: 1.8;
--s-size-60: 2.5;
--s-size-70: 3.2;
--s-size-80: 4.5;
--s-size-90: 7;
--s-size-100: 20;
--s-size-default: 16px;
--s-font-family-default-font-family: "Roboto";
--s-font-family-default-font-weight: 400;
--s-font-family-default-import: "https://fonts.googleapis.com/css2?family=Roboto&display=swap";
--s-font-family-title-font-family: "Roboto";
--s-font-family-title-font-weight: 500;
--s-font-family-title-import: "https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap";
--s-font-family-quote-font-family: "Palatino, Times, Georgia, serif";
--s-font-family-quote-font-weight: normal;
--s-font-family-quote-font-style: normal;
--s-font-family-quote-font-display: auto;
--s-font-family-quote-cap-height: 0.65;
--s-font-family-code-font-family: Menlo, Monaco, Consolas, Courier New, monospace;
--s-font-family-code-font-weight: normal;
--s-font-family-code-font-style: normal;
--s-font-family-code-font-display: auto;
--s-font-family-code-cap-height: 0.65;
--s-font-size-0: 0;
--s-font-size-5: 0.5;
--s-font-size-10: 0.65;
--s-font-size-15: 0.7;
--s-font-size-20: 0.75;
--s-font-size-25: 0.95;
--s-font-size-30: 1.1;
--s-font-size-40: 1.35;
--s-font-size-50: 1.8;
--s-font-size-60: 2.5;
--s-font-size-70: 3.2;
--s-font-size-80: 4.5;
--s-font-size-90: 7;
--s-font-size-100: 20;
--s-font-size-default: 16px;
--s-border-width-0: 0;
--s-border-width-10: 1;
--s-border-width-20: 2;
--s-border-width-30: 4;
--s-border-width-40: 6;
--s-border-width-50: 8;
--s-border-width-60: 12;
--s-border-width-70: 16;
--s-border-width-80: 20;
--s-border-width-90: 24;
--s-border-width-100: 30;
--s-border-width-default: 1px;
--s-border-radius-0: 0;
--s-border-radius-10: 0.8;
--s-border-radius-20: 1.6;
--s-border-radius-30: 2.4;
--s-border-radius-40: 3.2;
--s-border-radius-50: 4;
--s-border-radius-60: 5.2;
--s-border-radius-70: 6.4;
--s-border-radius-80: 8;
--s-border-radius-90: 10;
--s-border-radius-100: 12;
--s-border-radius-default: 5px;
--s-space-0: 0;
--s-space-10: 0.375;
--s-space-20: 0.75;
--s-space-30: 1.4;
--s-space-40: 2;
--s-space-50: 3.5;
--s-space-60: 5;
--s-space-70: 7.5;
--s-space-80: 10;
--s-space-90: 15;
--s-space-100: 20;
--s-space-default: 1rem;
--s-margin-0: 0;
--s-margin-10: 0.375;
--s-margin-20: 0.75;
--s-margin-30: 1.4;
--s-margin-40: 2;
--s-margin-50: 3.5;
--s-margin-60: 5;
--s-margin-70: 7.5;
--s-margin-80: 10;
--s-margin-90: 15;
--s-margin-100: 20;
--s-margin-default: 1rem;
--s-padding-0: 0;
--s-padding-10: 0.375;
--s-padding-20: 0.75;
--s-padding-30: 1.4;
--s-padding-40: 2;
--s-padding-50: 3.5;
--s-padding-60: 5;
--s-padding-70: 7.5;
--s-padding-80: 10;
--s-padding-90: 15;
--s-padding-100: 20;
--s-padding-default: 1rem;
--s-offsize-0: 0;
--s-offsize-10: 0.375;
--s-offsize-20: 0.75;
--s-offsize-30: 1.4;
--s-offsize-40: 2;
--s-offsize-50: 3.5;
--s-offsize-60: 5;
--s-offsize-70: 7.5;
--s-offsize-80: 10;
--s-offsize-90: 15;
--s-offsize-100: 20;
--s-offsize-default: 1rem;
--s-ui-code-example-padding-inline: 3.5;
--s-ui-code-example-padding-block: 3.5;
--s-ui-default-padding-inline: 1.25;
--s-ui-default-padding-block: 0.75;
--s-ui-default-border-radius: 1;
--s-ui-default-border-width: 1px;
--s-ui-default-transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-ui-default-default-lnf: solid;
--s-ui-default-depth: 0;
--s-ui-default-outline: true;
--s-ui-default-spacing: 1.4;
--s-ui-default-rhythm-vertical-margin-bottom: 60;
--s-ui-menu-padding-inline: 2;
--s-ui-menu-padding-block: 1.4;
--s-ui-menu-border-radius: 1;
--s-ui-menu-border-width: 1px;
--s-ui-menu-transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-ui-menu-default-lnf: solid;
--s-ui-menu-default-type: primary;
--s-ui-menu-depth: 0;
--s-ui-menu-rhythm-vertical-margin-bottom: 60;
--s-ui-card-padding-inline: 3.5;
--s-ui-card-padding-block: 3.5;
--s-ui-form-padding-inline: 1;
--s-ui-form-padding-block: 0.75;
--s-ui-form-border-radius: 1;
--s-ui-form-transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995);
--s-ui-form-outline: true;
--s-ui-form-rhythm-vertical-margin-bottom: 40;
--s-ui-outline-active: true;
--s-ui-outline-border-width: 10px;
--s-ui-outline-border-radius: 1;
--s-ui-outline-transition: all .2s ease-out;
--s-ui-scrollbar-size: 2px;
--s-ui-scrollbar-color: accent;
--s-ui-label-default-lnf: inline;
--s-ui-dropdown-padding-inline: 0.75;
--s-ui-dropdown-padding-block: 0.75;
--s-ui-dropdown-item-padding-inline: 1.25;
--s-ui-dropdown-item-padding-block: 0.75;
--s-ui-list-default-lnf: dl;
--s-ui-list-bullet-char: -;
--s-ui-fs-tree-bullet-char: ●;
--s-ui-tooltip-default-position: top;
--s-ui-tooltip-arrow-size: 15px;
--s-ui-loader-duration: 1s;
--s-ui-loader-easing: linear;color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
        background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);font-size: calc(var(--s-font-size-default, 16px) * 1);--s-shape: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
        --s-scale: var(--s-scale-default, 1);
}
.s-wireframe [theme$="dark"] {
            color: rgba(0, 0, 0, 0.5);background-color: #ffffff;
}
[theme$="dark"] .s-wireframe [theme$="dark"], .s-wireframe [theme$="dark"][theme$="dark"] {
            background-color: #2D323A;
}
[theme$="dark"] .s-wireframe [theme$="dark"], .s-wireframe [theme$="dark"][theme$="dark"] {
                color: rgba(255, 255, 255, 0.7);
}
/**
* Generate some utility classes like "s-tc:accent, s-mb:30", etc...
* that depends on your theme configuration
*/
/**
        * @name          Global reset
        * @namespace          sugar.style.resets
        * @type               Styleguide
        * @menu           Styleguide / Resets        /styleguide/resets/global
        * @platform       css
        * @status       beta
        * 
        * These mixins allows you to apply some resets like `destyle` and/or the `sugar` one.
        * The `destyle` one is well known and you can find the documentation on their website.
        * The `sugar` one is our own that add some resets like setting max-width to 100% for images, and some more. Check our his own documentation page.
        * 
        * @feature      Apply the `destyle` reset
        * @feature      Apply the `sugar` reset
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @example        css
        * @sugar.reset;
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/**
        * @name          Destyle reset
        * @namespace          sugar.style.resets
        * @type               Styleguide
        * @menu           Styleguide / Resets        /styleguide/resets/destyle
        * @platform       css
        * @status       beta
        * 
        * These mixins allows you to apply the `destyle` reset easily.
        * 
        * @feature      Ensures consistency across browsers as much as possible
        * @feature      Prevents the necessity of reseting user agent styles
        * @feature      Prevents style inspector bloat by only targeting what is necessary
        * @feature      Removes margins & paddings
        * @feature      Removes default font styles and ensures proper inheritance
        * @feature      Contributes to the separation of presentation and semantics
        * @feature      Sets sensible default styles
        * @feature      Well suited for utility class libraries and large codebases
        * @feature      Made for modern browsers only, therefor small in size (~0.95kb)
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @example        css
        * @sugar.reset.destyle;
        * 
        * @see          https://github.com/nicolas-cusan/destyle.css
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/* purgecss start ignore */
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
  ::before,
  ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
  }
/* Document */
/* ============================================ */
/**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   * 3. Remove gray overlay on links for iOS.
   */
html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: transparent; /* 3*/
  }
/* Sections */
/* ============================================ */
/**
   * Remove the margin in all browsers.
   */
body {
    margin: 0;
  }
/**
   * Render the main element consistently in IE.
   */
main {
    display: block;
  }
/* Vertical rhythm */
/* ============================================ */
p,
  table,
  blockquote,
  address,
  pre,
  iframe,
  form,
  figure,
  dl {
    margin: 0;
  }
/* Headings */
/* ============================================ */
h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
  }
/* Lists (enumeration) */
/* ============================================ */
ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* Lists (definition) */
/* ============================================ */
dt {
    font-weight: bold;
  }
dd {
    margin-left: 0;
  }
/* Grouping content */
/* ============================================ */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
  }
/**
   * 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: inherit; /* 2 */
  }
address {
    font-style: inherit;
  }
/* Text-level semantics */
/* ============================================ */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
  }
/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
            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: inherit; /* 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;
  }
/* Embedded content */
/* ============================================ */
/**
   * Prevent vertical alignment issues.
   */
img,
  embed,
  object,
  iframe {
    vertical-align: bottom;
  }
/* Forms */
/* ============================================ */
/**
   * Reset form fields to make them styleable
   */
button,
  input,
  optgroup,
  select,
  textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
  }
/**
   * Reset radio and checkbox appearance to preserve their look in iOS.
   */
[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
         appearance: checkbox;
  }
[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
         appearance: radio;
  }
/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
  input {
    /* 1 */
    overflow: visible;
  }
/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
  select {
    /* 1 */
    text-transform: none;
  }
/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
  }
button[disabled],
  [type="button"][disabled],
  [type="reset"][disabled],
  [type="submit"][disabled] {
    cursor: default;
  }
/**
   * 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;
  }
/**
   * Remove arrow in IE10 & IE11
   */
select::-ms-expand {
    display: none;
  }
/**
   * Remove padding
   */
option {
    padding: 0;
  }
/**
   * Reset to invisible
   */
fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
  }
/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from fieldset elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    fieldset elements in all browsers.
   */
legend {
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
    vertical-align: baseline;
  }
/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
    overflow: auto;
  }
/**
   * 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 outline style in Safari.
   */
[type="search"] {
    outline-offset: -2px; /* 1 */
  }
/**
   * 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 */
  }
/**
   * Clickable labels
   */
label[for] {
    cursor: pointer;
  }
/* 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;
  }
/* Table */
/* ============================================ */
table {
    border-collapse: collapse;
    border-spacing: 0;
  }
caption {
    text-align: left;
  }
td,
  th {
    vertical-align: top;
    padding: 0;
  }
th {
    text-align: left;
    font-weight: bold;
  }
/* purgecss end ignore */
/**
        * @name          Sugar reset
        * @namespace          sugar.style.resets
        * @type               Styleguide
        * @menu           Styleguide / Resets        /styleguide/resets/sugar
        * @platform       css
        * @status       beta
        * 
        * This mixin allows you to apply the `sugar` reset easily.
        * 
        * @feature     Handle body height for IOS devices using the `fill-available` and `min-height: -webkit-fill-available;` technique
        * @feature     Ensure template are not displayed
        * @feature     Ensure hidden things are not displayed
        * @feature     Set the `box-sizing` to `border-box` for all HTMLElement
        * @feature     Set the webkit highlight color to transparent color
        * @feature     Remove outline on every elements
        * @feature     Set the `max-width` to `100%` for images
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @example        css       Simple usage
        * @sugar.reset.sugar;
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/* purgecss start ignore */
/**
     * Body height
     */
html {
        height: -webkit-fill-available;
        height: -moz-available;
        height: fill-available;
    }
body {
        min-height: calc(100 * var(--vh,1vh)) ;
        min-height: -webkit-fill-available;
    }
/**
     * Add the correct display in IE 10+.
     */
template {
        display: none;
    }
/**
     * Add the correct display in IE 10.
     */
[hidden] {
        display: none;
    }
/**
     * Set box sizing to berder box
     * Set the webkit highlight color to transparent color
     * Remote outline on every elements
     */
* {
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        outline: none;
    }
/**
     * Max width 100% for images
     */
img {
        max-width: 100%;
    }
/* purgecss end ignore */
/**
        * @name          Avatar
        * @namespace          sugar.style.ui.avatar
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/avatar
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply some avatar style around any image.
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @install          css
        * \@sugar.ui.avatar.classes;
        * 
        * .my-avatar {
        *   @sugar.ui.avatar;
        * }
        * 
        * @cssClass             s-avatar                Apply the avatar style
        * @cssClass             s-avatar:interactive            Specify that this avatar is interactive
        * 
        * @example        html         Default
        *   <div class="s-avatar s-font:100 s-mie:20">
        *   <img src="https://i.pravatar.cc/300?v=58975" />
        * </div>
        *   <div class="s-avatar s-font:100 s-mie:20 s-color:accent">
        *   <img src="https://i.pravatar.cc/300?v=34948" />
        * </div>
        *   <div class="s-avatar s-font:100 s-mie:20 s-color:complementary">
        *   <img src="https://i.pravatar.cc/300?v=49026" />
        * </div>
        *   <div class="s-avatar s-font:100 s-mie:20 s-color:info">
        *   <img src="https://i.pravatar.cc/300?v=65155" />
        * </div>
        *   <div class="s-avatar s-font:100 s-mie:20 s-color:success">
        *   <img src="https://i.pravatar.cc/300?v=2666" />
        * </div>
        *   <div class="s-avatar s-font:100 s-mie:20 s-color:error">
        *   <img src="https://i.pravatar.cc/300?v=81085" />
        * </div>
        * 
        * @example       html         Notifications
        * <div class="s-avatar s-font:100 s-mie:20" notifications="10">
        *   <img src="https://i.pravatar.cc/300?v=51109" />
        * </div>
        * <div class="s-avatar s-font:100 s-mie:20 s-color:accent" notifications="10">
        *   <img src="https://i.pravatar.cc/300?v=3341" />
        * </div>
        * <div class="s-avatar s-font:100 s-mie:20 s-color:complementary" notifications="10">
        *   <img src="https://i.pravatar.cc/300?v=83142" />
        * </div>
        * <div class="s-avatar s-color:info s-font:100 s-mie:20" notifications>
        *   <img src="https://i.pravatar.cc/300?v=25899" />
        * </div>
        * <div class="s-avatar s-color:success s-font:100 s-mie:20" notifications>
        *   <img src="https://i.pravatar.cc/300?v=24223" />
        * </div>
        * <div class="s-avatar s-color:error s-font:100 s-mie:20" notifications>
        *   <img src="https://i.pravatar.cc/300?v=61234" />
        * </div>
        * 
        * @example       html         Interactive
        * <div class="s-avatar:interactive s-font:100 s-mie:20">
        *    <img src="https://i.pravatar.cc/300?v=90131" />
        * </div>
        * <div class="s-avatar:interactive s-font:100 s-mie:20 s-color:accent">
        *    <img src="https://i.pravatar.cc/300?v=91186" />
        * </div>
        * <div class="s-avatar:interactive s-font:100 s-mie:20 s-color:complementary">
        *    <img src="https://i.pravatar.cc/300?v=63556" />
        * </div>
        * <div class="s-avatar:interactive s-font:100 s-mie:20 s-color:info">
        *    <img src="https://i.pravatar.cc/300?v=5091" />
        * </div>
        * <div class="s-avatar:interactive s-font:100 s-mie:20 s-color:success">
        *    <img src="https://i.pravatar.cc/300?v=3977" />
        * </div>
        * <div class="s-avatar:interactive s-font:100 s-mie:20 s-color:error">
        *    <img src="https://i.pravatar.cc/300?v=3005" />
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-avatar {position: relative;
            display: inline-block;
            width: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
            height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
          }
.s-avatar img {
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                -o-object-fit: cover;
                   object-fit: cover;
                border-radius: 50%;
                overflow: hidden;
            }
.s-avatar[notifications]:after {
                        content: attr(notifications);
                        position: absolute;
                        top: 0.2em; right: 0.2em;
                        font-size: calc(0.15em * var(--s-scale, 1) * var(--s-scale-global, 1));
                        min-width: 1.5em;
                        min-height: 1.5em;
                    }
.s-wireframe .s-avatar {position: relative;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 50%;background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-avatar, .s-wireframe .s-avatar[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-avatar > * {
            display: block !important;
        }
.s-wireframe .s-avatar:after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;border: 1px solid rgba(0,0,0,0.1);
        }
[theme$="dark"] .s-wireframe .s-avatar:after, .s-wireframe .s-avatar:after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-avatar:after {border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
}
.s-wireframe .s-avatar {

    

                background-image: url("data:image/svg+xml,%3Csvg width='257' height='226' viewBox='0 0 257 226' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M65.8381 57H210.701L201.063 22.9177C200.462 20.7919 198.251 19.556 196.126 20.1571L65.8381 57ZM231.485 57L220.308 17.4755C216.702 4.72081 203.438 -2.69502 190.683 0.911767L17.4755 49.8918C4.72081 53.4986 -2.69502 66.7621 0.911766 79.5168L29 178.845V202C29 215.255 39.7452 226 53 226H233C246.255 226 257 215.255 257 202V81C257 67.7452 246.255 57 233 57H231.485ZM29 105.346V81C29 75.2817 30.9999 70.0304 34.3384 65.9075L22.9177 69.1371C20.7919 69.7382 19.556 71.9488 20.1571 74.0746L29 105.346ZM53 77H233C235.209 77 237 78.7909 237 81V202C237 204.209 235.209 206 233 206H53C50.7909 206 49 204.209 49 202V81C49 78.7909 50.7909 77 53 77Z' fill='%23E7E7E7'/%3E%3Cpath d='M205.607 183.007L86.9502 182.552C82.8292 182.536 80.4956 177.821 82.9821 174.535L125.089 118.882C126.926 116.454 130.489 116.218 132.63 118.383L154.551 140.539C156.537 142.547 159.79 142.512 161.733 140.464L168.456 133.377C170.531 131.19 174.056 131.323 175.96 133.661L209.503 174.85C212.169 178.123 209.829 183.023 205.607 183.007Z' fill='%23E7E7E7'/%3E%3Ccircle cx='202.073' cy='108.213' r='14' fill='%23E7E7E7'/%3E%3C/svg%3E%0A");
}
.s-wireframe .s-avatar img {
                display: none;
            }
.s-avatar:not(.s-bare) img {
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                border-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                border-style: solid;
                border-width: var(--s-ui-default-border-width, 1px);
                border-radius: 9999px;
            }
.s-avatar:not(.s-bare)[notifications]:after {
                        background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                        color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1));
                        border-radius: 9999px;
                        padding: 0.33em;
                        font-weight: bold;
                    }
.s-wireframe .s-avatar:not(.s-bare) {position: relative;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 50%;background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-avatar:not(.s-bare), .s-wireframe .s-avatar:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-avatar:not(.s-bare) > * {
            display: block !important;
        }
.s-wireframe .s-avatar:not(.s-bare):after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;border: 1px solid rgba(0,0,0,0.1);
        }
[theme$="dark"] .s-wireframe .s-avatar:not(.s-bare):after, .s-wireframe .s-avatar:not(.s-bare):after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-avatar:not(.s-bare):after {border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
}
.s-wireframe .s-avatar:not(.s-bare) {

    

                background-image: url("data:image/svg+xml,%3Csvg width='257' height='226' viewBox='0 0 257 226' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M65.8381 57H210.701L201.063 22.9177C200.462 20.7919 198.251 19.556 196.126 20.1571L65.8381 57ZM231.485 57L220.308 17.4755C216.702 4.72081 203.438 -2.69502 190.683 0.911767L17.4755 49.8918C4.72081 53.4986 -2.69502 66.7621 0.911766 79.5168L29 178.845V202C29 215.255 39.7452 226 53 226H233C246.255 226 257 215.255 257 202V81C257 67.7452 246.255 57 233 57H231.485ZM29 105.346V81C29 75.2817 30.9999 70.0304 34.3384 65.9075L22.9177 69.1371C20.7919 69.7382 19.556 71.9488 20.1571 74.0746L29 105.346ZM53 77H233C235.209 77 237 78.7909 237 81V202C237 204.209 235.209 206 233 206H53C50.7909 206 49 204.209 49 202V81C49 78.7909 50.7909 77 53 77Z' fill='%23E7E7E7'/%3E%3Cpath d='M205.607 183.007L86.9502 182.552C82.8292 182.536 80.4956 177.821 82.9821 174.535L125.089 118.882C126.926 116.454 130.489 116.218 132.63 118.383L154.551 140.539C156.537 142.547 159.79 142.512 161.733 140.464L168.456 133.377C170.531 131.19 174.056 131.323 175.96 133.661L209.503 174.85C212.169 178.123 209.829 183.023 205.607 183.007Z' fill='%23E7E7E7'/%3E%3Ccircle cx='202.073' cy='108.213' r='14' fill='%23E7E7E7'/%3E%3C/svg%3E%0A");
}
.s-wireframe .s-avatar:not(.s-bare) img {
                display: none;
            }
.s-avatar-interactive {cursor: pointer;
          }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-avatar-interactive:hover img {

        animation: s-outline-in .1s ease-out forwards;
                position: absolute;
}
.s-wireframe .s-avatar-interactive {position: relative;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 50%;background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-avatar-interactive, .s-wireframe .s-avatar-interactive[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-avatar-interactive > * {
            display: block !important;
        }
.s-wireframe .s-avatar-interactive:after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;border: 1px solid rgba(0,0,0,0.1);
        }
[theme$="dark"] .s-wireframe .s-avatar-interactive:after, .s-wireframe .s-avatar-interactive:after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-avatar-interactive:after {border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
}
.s-wireframe .s-avatar-interactive {

    

                background-image: url("data:image/svg+xml,%3Csvg width='257' height='226' viewBox='0 0 257 226' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M65.8381 57H210.701L201.063 22.9177C200.462 20.7919 198.251 19.556 196.126 20.1571L65.8381 57ZM231.485 57L220.308 17.4755C216.702 4.72081 203.438 -2.69502 190.683 0.911767L17.4755 49.8918C4.72081 53.4986 -2.69502 66.7621 0.911766 79.5168L29 178.845V202C29 215.255 39.7452 226 53 226H233C246.255 226 257 215.255 257 202V81C257 67.7452 246.255 57 233 57H231.485ZM29 105.346V81C29 75.2817 30.9999 70.0304 34.3384 65.9075L22.9177 69.1371C20.7919 69.7382 19.556 71.9488 20.1571 74.0746L29 105.346ZM53 77H233C235.209 77 237 78.7909 237 81V202C237 204.209 235.209 206 233 206H53C50.7909 206 49 204.209 49 202V81C49 78.7909 50.7909 77 53 77Z' fill='%23E7E7E7'/%3E%3Cpath d='M205.607 183.007L86.9502 182.552C82.8292 182.536 80.4956 177.821 82.9821 174.535L125.089 118.882C126.926 116.454 130.489 116.218 132.63 118.383L154.551 140.539C156.537 142.547 159.79 142.512 161.733 140.464L168.456 133.377C170.531 131.19 174.056 131.323 175.96 133.661L209.503 174.85C212.169 178.123 209.829 183.023 205.607 183.007Z' fill='%23E7E7E7'/%3E%3Ccircle cx='202.073' cy='108.213' r='14' fill='%23E7E7E7'/%3E%3C/svg%3E%0A");
}
.s-wireframe .s-avatar-interactive img {
                display: none;
            }
/**
        * @name          Backdrop
        * @namespace          sugar.style.ui.backdrop
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/backdrop
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice backdrop with simple class.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.backdrop.classes;
        * 
        * .my-backdrop {
        *   @sugar.ui.backdrop;
        * }
        * 
        * @cssClass                 s-backdrop          Apply the backdrop styling
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-backdrop {position: fixed;
        top: 0;
        left: 0;
        width: 200vw;
        height: calc(200 * var(--vh,1vh)) ;
        z-index: 100;
        transform: translate(-50%, -50%);
        }
.s-backdrop:not(.s-bare) {background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),0.7);
                    -webkit-backdrop-filter: blur(5px);
                            backdrop-filter: blur(5px);
            }
/**
        * @name          Badge
        * @namespace          sugar.style.ui.badge
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/badges
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display any HTMLElement as a badge
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.badge.classes;
        * 
        * .my-badge {
        *   @sugar.ui.badge;
        * }
        * 
         * @cssClass     s-badge           Apply the solid badge style
 * @cssClass     s-badge:outline           Apply the outline badge style
        * 
         * @example        html       solid
            *   <a class="s-badge s-mie:20">Say hello!</a>
            *   <a class="s-badge s-mie:20 s-color:accent">Say hello!</a>
            *   <a class="s-badge s-mie:20 s-color:complementary">Say hello!</a>
            *   <a class="s-badge s-color:error">Say hello!</a>
            * 
 * @example        html       outline
            *   <a class="s-badge:outline s-mie:20">Say hello!</a>
            *   <a class="s-badge:outline s-mie:20 s-color:accent">Say hello!</a>
            *   <a class="s-badge:outline s-mie:20 s-color:complementary">Say hello!</a>
            *   <a class="s-badge:outline s-color:error">Say hello!</a>
            * 
        * 
        * @example          html        Shapes
        * <a class="s-badge s-mie:20 s-mbe:20">Say hello!</a>
        * <a class="s-badge s-shape:pill s-mie:20 s-mbe:20">Say hello!</a>
        * <a class="s-badge s-shape:square s-mie:20 s-mbe:20">Say hello!</a>
        * 
        * @example        html       Scales
        *   <a class="s-badge s-scale:05 s-mie:20 s-mbe:20">Say hello!</a>
        *   <a class="s-badge s-scale:1 s-mie:20 s-mbe:20">Say hello!</a>
        *   <a class="s-badge s-scale:12 s-mie:20 s-mbe:20">Say hello!</a>
        *   <a class="s-badge s-scale:15 s-mie:20 s-mbe:20">Say hello!</a>
        *   <a class="s-badge s-scale:20 s-mbe:20">Say hello!</a>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-badge {display: inline-flex;
        align-items: center;
        line-height: 1;
        white-space: nowrap;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
            }
.s-wireframe .s-badge {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-badge, .s-wireframe .s-badge[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-badge {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-badge, .s-wireframe .s-badge[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-badge:not(.s-bare) {font-size: calc(0.75em * var(--s-scale, 1) * var(--s-scale-global, 1));
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
            vertical-align: baseline;
            font-weight: bold;
            text-rendering: optimizeLegibility;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
            }
.s-badge:not(.s-bare) > * {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
            }
.s-badge:not(.s-bare) {

        

                     color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1));
                     background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
}
.s-wireframe .s-badge:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-badge:not(.s-bare), .s-wireframe .s-badge:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-badge:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-badge:not(.s-bare), .s-wireframe .s-badge:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-badge--outline:not(.s-bare) {font-size: calc(0.75em * var(--s-scale, 1) * var(--s-scale-global, 1));
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
            vertical-align: baseline;
            font-weight: bold;
            text-rendering: optimizeLegibility;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
            }
.s-badge--outline:not(.s-bare) > * {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
            }
.s-badge--outline:not(.s-bare) {

        

                position: relative;
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                background: none !important;
                text-shadow: none !important;
}
.s-badge--outline:not(.s-bare):after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) solid 1px;
                    pointer-events: none;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                }
.s-wireframe .s-badge--outline:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-badge--outline:not(.s-bare), .s-wireframe .s-badge--outline:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-badge--outline:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-badge--outline:not(.s-bare), .s-wireframe .s-badge--outline:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
/**
        * @name          Blockquote
        * @namespace          sugar.style.ui.blockquote
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/blockquote
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice blockquote with simple class.
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for vertical rhythm through the `s-rhythm:vertical` class
        * @feature          Support for text formatting through the `s-format:text` class
        * @feature          Full RTL support
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.blockquote.classes;
        * 
        * .my-blockquote {
        *   @sugar.ui.blockquote;
        * }
        * 
        * @cssClass         s-blockquote            Apply the blockquote styling
        * @cssClass         s-format:text blockquote            Apply the s-blockquote styling on plain blockquotes
        * @cssClass         s-rhythm:vertical &                 Apply the vertical rhythm on the blockquote
        *
        * @example        html       Colors (none-exhaustive)
        *   <p class="s-blockquote s-mbe:30 s-color:accent">
        *       Voluptate qui quisquam in eveniet pariatur natus doloribus quis. Numquam quia sint sit qui. Incidunt et cum veritatis fuga dolorum error magnam nemo ex. Et suscipit magni error maiores. Nobis sint quos tempore.
        *   </p>
        *   <p class="s-blockquote s-mbe:30 s-color:error">
        *       Nostrum natus iusto soluta vel maiores consequuntur accusantium temporibus. Similique voluptatibus dolor dolorem molestias repellat. Voluptatem nulla sed et non quia ratione a consequuntur. Placeat blanditiis est.
        *   </p>
        *   <p class="s-blockquote s-mbe:30 s-color:info">
        *       Voluptatem minima veritatis autem ea et ducimus qui. Sit eos omnis ut officia consequatur omnis excepturi nisi. Esse iusto et quaerat doloremque magnam enim suscipit iure. Eum quibusdam repudiandae libero vero. Rerum itaque et eius et.
        *   </p>
        *
        * @example    html       RTL Support
        *   <p class="s-blockquote s-mbe:30" dir="rtl">
        *       Eos quo sint quis assumenda dolorum itaque. Amet harum sint debitis consequuntur est. Odit distinctio odio enim. Quasi totam est. Numquam ut temporibus quaerat dolorem voluptatem illum. Nihil laborum molestias consequuntur rerum omnis officiis sint iusto.
        *   </p>
        * 
        * @example          html        Shapes
        * <p class="s-blockquote s-color:accent s-shape:default s-mbe:30">
        *       Qui ea et reiciendis sunt rerum inventore. Commodi sit quam deserunt quasi non quidem. Porro architecto modi. Mollitia ipsam et mollitia fuga.
        *   </p>
        *   <p class="s-blockquote s-color:accent s-shape:pill s-mbe:30">
        *       Molestiae voluptates sit cum ea fugit in mollitia. Ut laborum rerum dolorem exercitationem qui fugiat natus. Illo at officiis in aut et unde iste. Qui quas laborum. Doloribus magni assumenda quia commodi assumenda voluptas. Maiores beatae enim.
        *   </p>
        * <p class="s-blockquote s-color:accent s-shape:square s-mbe:30">
        *       Molestiae aspernatur sequi rerum et corrupti. Sit exercitationem tenetur voluptas doloremque sunt dolore. Sequi qui vitae exercitationem numquam.
        *   </p>
        * 
        * @example          html        Scales
        * <p class="s-blockquote s-scale:07 s-mbe:30">
        *       Et harum deleniti non est autem natus ipsum velit explicabo. Velit voluptas totam eum qui voluptatem. Beatae quia voluptatum qui eum sunt.
        *   </p>
        *   <p class="s-blockquote s-scale:10 s-mbe:30">
        *       Temporibus quam odio magni porro porro. Nam non corrupti similique quas distinctio placeat deleniti et. Blanditiis ratione cupiditate fugit molestiae temporibus ullam asperiores et.
        *   </p>
        * <p class="s-blockquote s-scale:13 s-mbe:30">
        *       Aperiam rem saepe enim est nostrum iste commodi sed. Dolore et vero. Rerum doloremque aspernatur. Dolorum qui commodi.
        *   </p>
        * <p class="s-blockquote s-scale:16 s-mbe:30">
        *       Corrupti quia quam tempore provident dolore. Quas suscipit quia velit. Magni nostrum officiis. Illo rerum perferendis ut maiores cum iste et possimus. At quia in fuga sit. Reprehenderit consectetur nisi consectetur alias accusamus odio voluptas et debitis.
        *   </p>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-blockquote {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
        

            display: block;
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
        }
.s-blockquote:not(.s-bare) {border-inline-start: var(--s-ui-default-border-width, 1px) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-surface-foreground-a, 1));
            background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-lightness-offset, 0)) * 1%),var(--s-color-current-surface-a, 1));
            font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));font-family: var(--s-font-family-quote-font-family, "Palatino, Times, Georgia, serif"); 
 font-weight: var(--s-font-family-quote-font-weight, normal); 
 font-style: var(--s-font-family-quote-font-style, normal);
    }
.s-format-text blockquote:not(.s-format-none blockquote), .preview .s-format-text blockquote {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
        

            display: block;
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
    

            border-inline-start: var(--s-ui-default-border-width, 1px) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-surface-foreground-a, 1));
            background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-lightness-offset, 0)) * 1%),var(--s-color-current-surface-a, 1));
            font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));font-family: var(--s-font-family-quote-font-family, "Palatino, Times, Georgia, serif"); 
 font-weight: var(--s-font-family-quote-font-weight, normal); 
 font-style: var(--s-font-family-quote-font-style, normal);
                }
.s-rhythm-vertical > blockquote,.s-rhythm-vertical >  .s-blockquote {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 5);
                }
/**
        * @name          Buttons
        * @namespace          sugar.style.ui.button
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/button
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display any HTMLElement as a button
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for vertical rhythm through the `s-rhythm:vertical` class
        * @feature          Support for text formatting through the `s-format:text` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.button.classes;
        * 
        * .my-button {
        *   @sugar.ui.button;
        * }
        * 
         * @cssClass     s-btn           Apply the solid button lnf
 * @cssClass     s-btn:gradient           Apply the gradient button lnf
 * @cssClass     s-btn:outline           Apply the outline button lnf
 * @cssClass     s-btn:text           Apply the text button lnf
 * @cssClass     s-btn:loading           Apply the loading button lnf
        * @cssClass            s-format:text button             Apply the button style on button tags inside the s-format:text scope 
        * @cssClass            s-rhythm:vertical              Apply the default vertical rhythm on scoped button(s)
        * 
         * @example        html       solid lnf <span class="s-badge:outline s-scale:05">default</span>
            *   <a tabindex="0" class="s-btn: s-mie:20 s-mbe:20"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn: s-mie:20 s-mbe:20 s-color:accent"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn: s-mie:20 s-mbe:20 s-color:complementary"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn: s-mie:20 s-mbe:20 s-color:info"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn: s-mie:20 s-mbe:20 s-color:error"><span>Click me!</span></a>
            *   <a tabindex="0" disabled class="s-btn: s-mie:20 s-mbe:20"><span>Click me!</span></a>
            * 
 * @example        html       gradient lnf 
            *   <a tabindex="0" class="s-btn::gradient s-mie:20 s-mbe:20"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::gradient s-mie:20 s-mbe:20 s-color:accent"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::gradient s-mie:20 s-mbe:20 s-color:complementary"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::gradient s-mie:20 s-mbe:20 s-color:info"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::gradient s-mie:20 s-mbe:20 s-color:error"><span>Click me!</span></a>
            *   <a tabindex="0" disabled class="s-btn::gradient s-mie:20 s-mbe:20"><span>Click me!</span></a>
            * 
 * @example        html       outline lnf 
            *   <a tabindex="0" class="s-btn::outline s-mie:20 s-mbe:20"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::outline s-mie:20 s-mbe:20 s-color:accent"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::outline s-mie:20 s-mbe:20 s-color:complementary"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::outline s-mie:20 s-mbe:20 s-color:info"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::outline s-mie:20 s-mbe:20 s-color:error"><span>Click me!</span></a>
            *   <a tabindex="0" disabled class="s-btn::outline s-mie:20 s-mbe:20"><span>Click me!</span></a>
            * 
 * @example        html       text lnf 
            *   <a tabindex="0" class="s-btn::text s-mie:20 s-mbe:20"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::text s-mie:20 s-mbe:20 s-color:accent"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::text s-mie:20 s-mbe:20 s-color:complementary"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::text s-mie:20 s-mbe:20 s-color:info"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::text s-mie:20 s-mbe:20 s-color:error"><span>Click me!</span></a>
            *   <a tabindex="0" disabled class="s-btn::text s-mie:20 s-mbe:20"><span>Click me!</span></a>
            * 
 * @example        html       loading lnf 
            *   <a tabindex="0" class="s-btn::loading s-mie:20 s-mbe:20"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::loading s-mie:20 s-mbe:20 s-color:accent"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::loading s-mie:20 s-mbe:20 s-color:complementary"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::loading s-mie:20 s-mbe:20 s-color:info"><span>Click me!</span></a>
            *   <a tabindex="0" class="s-btn::loading s-mie:20 s-mbe:20 s-color:error"><span>Click me!</span></a>
            *   <a tabindex="0" disabled class="s-btn::loading s-mie:20 s-mbe:20"><span>Click me!</span></a>
            * 
        * 
        * @example       html       Shapes
        *   <a tabindex="0" class="s-btn s-shape:default s-mie:20">Click me!</a>
        *   <a tabindex="0" class="s-btn s-shape:pill s-mie:20">Click me!</a>
        *   <a tabindex="0" class="s-btn s-shape:square s-mie:20">Click me!</a>
        * 
        * @example       html       Scales
        *   <a tabindex="0" class="s-btn s-scale:07 s-mie:20">Click me!</a>
        *   <a tabindex="0" class="s-btn s-scale:1 s-mie:20">Click me!</a>
        *   <a tabindex="0" class="s-btn s-scale:13 s-mie:20">Click me!</a>
        *   <a tabindex="0" class="s-btn s-scale:16 s-mie:20">Click me!</a>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-btn {--s-btn-padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
          --s-btn-padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
          
          --s-btn-confirm-width: auto;

          font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          line-height: 1;
          text-decoration: none !important;
          position: relative;
          display: inline-flex;
          
          cursor: pointer;
          -webkit-user-select: none;
             -moz-user-select: none;
                  user-select: none;
          white-space: nowrap;
          vertical-align: middle;
          padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
          padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
          gap: calc(var(--s-margin-default, 1rem) * 0.75);
          align-items: center;
          justify-content: center;
        }
.s-btn > * {
            pointer-events: none;
          }
.s-btn[confirm] {
            width: calc(var(--s-btn-confirm-width) * var(--s-scale, 1));

          }
.s-btn[confirm]:after {
              content: attr(confirm);
              position: absolute;
              top: 0; left: 0;
              opacity: 0;
              width: calc(var(--s-btn-confirm-width) * var(--s-scale, 1));
              height: 100%;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              pointer-events: none;
              padding-inline: calc(var(--s-btn-padding-inline) * 0.5);
            }
.s-btn[confirm]:focus:after,
            .s-btn[confirm]:focus-within:after {
                opacity: 1;
            }
.s-wireframe .s-btn {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-btn, .s-wireframe .s-btn[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-btn {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-btn, .s-wireframe .s-btn[theme$="dark"] {
            background-color: #2D323A;
}
.s-btn:not(.s-bare) {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          text-decoration: none;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        }
.s-btn:not(.s-bare):after {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          }
.s-btn:not(.s-bare) {
        

                  background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                  border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1)) solid var(--s-ui-default-border-width, 1px);
                  color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
                  transition: var(--s-ui-default-transition, 0);
}
.s-btn:not(.s-bare):hover {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + -6) * 1%),1);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
                  }
[theme$="dark"] .s-btn:not(.s-bare):hover, .s-btn:not(.s-bare):hover[theme$="dark"] {
                      background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + 6) * 1%),1);
}
.s-btn:not(.s-bare):active {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + -10) * 1%),1);
                  }
[theme$="dark"] .s-btn:not(.s-bare):active, .s-btn:not(.s-bare):active[theme$="dark"] {
                      background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + 10) * 1%),1);
}
.s-btn:not(.s-bare):disabled {
            opacity: 0.3;
            pointer-events: none;
          }
.s-btn:not(.s-bare)[confirm] {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;

          }
.s-btn:not(.s-bare)[confirm]:after {
              background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
              color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;--s-color-current-h: var(--s-color-error-h);
--s-color-current-s: var(--s-color-error-s);
--s-color-current-l: var(--s-color-error-l);
--s-color-current-text-saturation-offset: var(--s-color-error-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-error-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-error-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-error-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-error-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-error-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-error-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-error-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-error-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-error-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-error-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-error-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-error-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-error-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-error-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-error-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-error-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-error-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-error-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-error-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-error-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-error-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
            }
.s-btn:not(.s-bare)[confirm]:hover:after, .s-btn:not(.s-bare)[confirm]:focus:after, .s-btn:not(.s-bare)[confirm]:focus-within:after {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
              }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-btn:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-wireframe .s-btn:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-btn:not(.s-bare), .s-wireframe .s-btn:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-btn:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-btn:not(.s-bare), .s-wireframe .s-btn:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-btn-gradient:not(.s-bare) {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          text-decoration: none;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        }
.s-btn-gradient:not(.s-bare):after {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          }
.s-btn-gradient:not(.s-bare) {
        

                    background: none !important;
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
                    transition: var(--s-ui-default-transition, 0);
                    border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1)) solid var(--s-ui-default-border-width, 1px);

                    --borderWidth: var(--s-ui-default-border-width, 1px);
}
.s-btn-gradient:not(.s-bare) > * {
                      position: relative;
                      z-index: 1;
                    }
.s-btn-gradient:not(.s-bare):before {
                      content: '';
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;background-image: linear-gradient(var(--s-gradient-angle, 90), var(--s-gradient-start, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-gradient-start-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-gradient-start-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-gradient-start-lightness-offset, 0)) * 1%),var(--s-color-current-gradient-start-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-gradient-end-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-gradient-end-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-gradient-end-lightness-offset, 0)) * 1%),var(--s-color-current-gradient-end-a, 1))) 100%);
                      transition: var(--s-ui-default-transition, 0);
                    }
.s-btn-gradient:not(.s-bare):after {
                      content: '';
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;background-image: linear-gradient(var(--s-gradient-angle, 90), var(--s-gradient-start, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-gradient-end-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-gradient-end-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-gradient-end-lightness-offset, 0)) * 1%),var(--s-color-current-gradient-end-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-gradient-start-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-gradient-start-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-gradient-start-lightness-offset, 0)) * 1%),var(--s-color-current-gradient-start-a, 1))) 100%);
                      opacity: 0;
                      transition: var(--s-ui-default-transition, 0);
                    }
.s-btn-gradient:not(.s-bare):hover {
                      color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
                    }
.s-btn-gradient:not(.s-bare):hover:after {
                        opacity: 1;
                      }
.s-btn-gradient:not(.s-bare):disabled {
            opacity: 0.3;
            pointer-events: none;
          }
.s-btn-gradient:not(.s-bare)[confirm] {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;

          }
.s-btn-gradient:not(.s-bare)[confirm]:after {
              background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
              color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;--s-color-current-h: var(--s-color-error-h);
--s-color-current-s: var(--s-color-error-s);
--s-color-current-l: var(--s-color-error-l);
--s-color-current-text-saturation-offset: var(--s-color-error-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-error-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-error-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-error-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-error-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-error-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-error-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-error-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-error-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-error-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-error-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-error-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-error-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-error-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-error-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-error-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-error-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-error-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-error-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-error-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-error-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-error-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
            }
.s-btn-gradient:not(.s-bare)[confirm]:hover:after, .s-btn-gradient:not(.s-bare)[confirm]:focus:after, .s-btn-gradient:not(.s-bare)[confirm]:focus-within:after {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
              }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-btn-gradient:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-wireframe .s-btn-gradient:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-btn-gradient:not(.s-bare), .s-wireframe .s-btn-gradient:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-btn-gradient:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-btn-gradient:not(.s-bare), .s-wireframe .s-btn-gradient:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-btn-outline:not(.s-bare) {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          text-decoration: none;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        }
.s-btn-outline:not(.s-bare):after {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          }
.s-btn-outline:not(.s-bare) {
        

                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
                border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) solid var(--s-ui-default-border-width, 1px);
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) !important;
                transition: var(--s-ui-default-transition, 0);
}
.s-btn-outline:not(.s-bare):hover {
                  background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                  color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
                }
.s-btn-outline:not(.s-bare):disabled {
            opacity: 0.3;
            pointer-events: none;
          }
.s-btn-outline:not(.s-bare)[confirm] {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;

          }
.s-btn-outline:not(.s-bare)[confirm]:after {
              background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
              color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;--s-color-current-h: var(--s-color-error-h);
--s-color-current-s: var(--s-color-error-s);
--s-color-current-l: var(--s-color-error-l);
--s-color-current-text-saturation-offset: var(--s-color-error-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-error-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-error-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-error-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-error-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-error-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-error-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-error-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-error-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-error-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-error-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-error-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-error-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-error-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-error-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-error-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-error-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-error-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-error-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-error-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-error-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-error-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
            }
.s-btn-outline:not(.s-bare)[confirm]:hover:after, .s-btn-outline:not(.s-bare)[confirm]:focus:after, .s-btn-outline:not(.s-bare)[confirm]:focus-within:after {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
              }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-btn-outline:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-wireframe .s-btn-outline:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-btn-outline:not(.s-bare), .s-wireframe .s-btn-outline:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-btn-outline:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-btn-outline:not(.s-bare), .s-wireframe .s-btn-outline:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-btn-text:not(.s-bare) {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          text-decoration: none;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        }
.s-btn-text:not(.s-bare):after {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          }
.s-btn-text:not(.s-bare) {
        

                  background: none !important;
                  border: rgba(0,0,0,0) solid var(--s-ui-default-border-width, 1px);
                  color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) !important;
                  box-shadow: none !important;
                  transition: var(--s-ui-default-transition, 0);
}
.s-btn-text:not(.s-bare):disabled {
            opacity: 0.3;
            pointer-events: none;
          }
.s-btn-text:not(.s-bare)[confirm] {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;

          }
.s-btn-text:not(.s-bare)[confirm]:after {
              background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
              color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;--s-color-current-h: var(--s-color-error-h);
--s-color-current-s: var(--s-color-error-s);
--s-color-current-l: var(--s-color-error-l);
--s-color-current-text-saturation-offset: var(--s-color-error-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-error-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-error-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-error-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-error-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-error-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-error-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-error-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-error-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-error-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-error-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-error-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-error-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-error-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-error-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-error-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-error-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-error-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-error-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-error-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-error-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-error-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
            }
.s-btn-text:not(.s-bare)[confirm]:hover:after, .s-btn-text:not(.s-bare)[confirm]:focus:after, .s-btn-text:not(.s-bare)[confirm]:focus-within:after {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
              }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-btn-text:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-wireframe .s-btn-text:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-btn-text:not(.s-bare), .s-wireframe .s-btn-text:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-btn-text:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-btn-text:not(.s-bare), .s-wireframe .s-btn-text:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-btn-loading:not(.s-bare) {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          text-decoration: none;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        }
.s-btn-loading:not(.s-bare):after {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          }
.s-btn-loading:not(.s-bare) {
        

                  position: relative;
                  pointer-events: none !important;
}
.s-btn-loading:not(.s-bare) img,
                  .s-btn-loading:not(.s-bare) i,
                  .s-btn-loading:not(.s-bare) .s-icon,
                  .s-btn-loading:not(.s-bare) svg {
                      display: none;
                  }
.s-btn-loading:not(.s-bare):before {
                      content: '';
                      display: block;
                      width: 1em;
                      height: 1em;
                      border-radius: 50%;
                      border: 3px solid currentColor;
                      border-bottom: none;
                      animation: s-btn-loading 0.4s linear infinite;
                  }
.s-btn-loading:not(.s-bare):disabled {
            opacity: 0.3;
            pointer-events: none;
          }
.s-btn-loading:not(.s-bare)[confirm] {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;

          }
.s-btn-loading:not(.s-bare)[confirm]:after {
              background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
              color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;--s-color-current-h: var(--s-color-error-h);
--s-color-current-s: var(--s-color-error-s);
--s-color-current-l: var(--s-color-error-l);
--s-color-current-text-saturation-offset: var(--s-color-error-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-error-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-error-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-error-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-error-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-error-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-error-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-error-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-error-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-error-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-error-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-error-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-error-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-error-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-error-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-error-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-error-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-error-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-error-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-error-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-error-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-error-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
            }
.s-btn-loading:not(.s-bare)[confirm]:hover:after, .s-btn-loading:not(.s-bare)[confirm]:focus:after, .s-btn-loading:not(.s-bare)[confirm]:focus-within:after {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
              }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-btn-loading:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-wireframe .s-btn-loading:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-btn-loading:not(.s-bare), .s-wireframe .s-btn-loading:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-btn-loading:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-btn-loading:not(.s-bare), .s-wireframe .s-btn-loading:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-btn-block {
        display: block !important;
        width: 100%;
      }
.s-format-text button:not(.s-format-none button), .preview .s-format-text button {--s-btn-padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
          --s-btn-padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
          
          --s-btn-confirm-width: auto;

          font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          line-height: 1;
          text-decoration: none !important;
          position: relative;
          display: inline-flex;
          
          cursor: pointer;
          -webkit-user-select: none;
             -moz-user-select: none;
                  user-select: none;
          white-space: nowrap;
          vertical-align: middle;
          padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
          padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
          gap: calc(var(--s-margin-default, 1rem) * 0.75);
          align-items: center;
          justify-content: center;
                }
.s-format-text button:not(.s-format-none button) > *, .preview .s-format-text button > * {
            pointer-events: none;
          }
.s-format-text button:not(.s-format-none button)[confirm], .preview .s-format-text button[confirm] {
            width: calc(var(--s-btn-confirm-width) * var(--s-scale, 1));

          }
.s-format-text button:not(.s-format-none button)[confirm]:after, .preview .s-format-text button[confirm]:after {
              content: attr(confirm);
              position: absolute;
              top: 0; left: 0;
              opacity: 0;
              width: calc(var(--s-btn-confirm-width) * var(--s-scale, 1));
              height: 100%;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              pointer-events: none;
              padding-inline: calc(var(--s-btn-padding-inline) * 0.5);
            }
.s-format-text button:not(.s-format-none button)[confirm]:focus:after,
            .s-format-text button:not(.s-format-none button)[confirm]:focus-within:after,
            .preview .s-format-text button[confirm]:focus:after,
            .preview .s-format-text button[confirm]:focus-within:after {
                opacity: 1;
            }
.s-format-text button:not(.s-format-none button), .preview .s-format-text button {

    

          font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          text-decoration: none;
}
.s-format-text button:not(.s-format-none button), .preview .s-format-text button {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-format-text button:not(.s-format-none button):after, .preview .s-format-text button:after {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          }
.s-format-text button:not(.s-format-none button), .preview .s-format-text button {
        

                  background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                  border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1)) solid var(--s-ui-default-border-width, 1px);
                  color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
                  transition: var(--s-ui-default-transition, 0);
}
.s-format-text button:not(.s-format-none button):hover, .preview .s-format-text button:hover {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + -6) * 1%),1);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
                  }
[theme$="dark"] .s-format-text button:not(.s-format-none button):hover, .s-format-text button:not(.s-format-none button):hover[theme$="dark"], [theme$="dark"] .preview .s-format-text button:hover, .preview .s-format-text button:hover[theme$="dark"] {
                      background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + 6) * 1%),1);
}
.s-format-text button:not(.s-format-none button):active, .preview .s-format-text button:active {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + -10) * 1%),1);
                  }
[theme$="dark"] .s-format-text button:not(.s-format-none button):active, .s-format-text button:not(.s-format-none button):active[theme$="dark"], [theme$="dark"] .preview .s-format-text button:active, .preview .s-format-text button:active[theme$="dark"] {
                      background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + 10) * 1%),1);
}
.s-format-text button:not(.s-format-none button):disabled, .preview .s-format-text button:disabled {
            opacity: 0.3;
            pointer-events: none;
          }
.s-format-text button:not(.s-format-none button)[confirm], .preview .s-format-text button[confirm] {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;

          }
.s-format-text button:not(.s-format-none button)[confirm]:after, .preview .s-format-text button[confirm]:after {
              background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
              color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;--s-color-current-h: var(--s-color-error-h);
--s-color-current-s: var(--s-color-error-s);
--s-color-current-l: var(--s-color-error-l);
--s-color-current-text-saturation-offset: var(--s-color-error-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-error-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-error-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-error-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-error-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-error-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-error-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-error-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-error-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-error-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-error-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-error-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-error-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-error-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-error-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-error-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-error-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-error-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-error-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-error-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-error-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-error-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
            }
.s-format-text button:not(.s-format-none button)[confirm]:hover:after, .s-format-text button:not(.s-format-none button)[confirm]:focus:after, .s-format-text button:not(.s-format-none button)[confirm]:focus-within:after, .preview .s-format-text button[confirm]:hover:after, .preview .s-format-text button[confirm]:focus:after, .preview .s-format-text button[confirm]:focus-within:after {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1)) !important;
              }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-format-text button:not(.s-format-none button):focus:not(:hover), .preview .s-format-text button:focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-wireframe .s-format-text button:not(.s-format-none button), .s-wireframe .preview .s-format-text button {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-format-text button:not(.s-format-none button), .s-wireframe .s-format-text button:not(.s-format-none button)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text button, .s-wireframe .preview .s-format-text button[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-format-text button:not(.s-format-none button), .s-wireframe .preview .s-format-text button {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-format-text button:not(.s-format-none button), .s-wireframe .s-format-text button:not(.s-format-none button)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text button, .s-wireframe .preview .s-format-text button[theme$="dark"] {
            background-color: #2D323A;
}
.s-rhythm-vertical > button,.s-rhythm-vertical >  .s-btn {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 5);
                }
/**
        * @name          Checkbox
        * @namespace          sugar.style.ui.checkbox
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/forms/checkbox
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice checkbox in your forms
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.checkbox.classes;
        * 
        * .my-checkbox {
        *   @sugar.ui.checkbox;
        * }
        * 
         * @cssClass     s-checkbox           Apply the solid checkbox lnf
        * 
         * @example        html       solid
            *   <label class="s-mbe:30 s-label">
            *     Direct Assurance Associate Ada Brakus
            *     <input type="checkbox" checked class="s-checkbox" name="checkbox-lnf-solid-1" value="hello 1" />
            *   </label>
            *   <label class="s-mbe:30 s-label">
            *     <span>I'm disabled</span>
            *     <input type="checkbox" disabled class="s-checkbox s-color:accent" name="checkbox-lnf-solid-3" value="hello 3" />
            *   </label>
            * 
        * 
        * @example      html       Shapes
        *   <label class="s-mbe:30 s-label">
        *     <span>Global Research Facilitator Maryann Smith</span>
        *     <input type="checkbox" class="s-checkbox s-shape:default s-color:accent" name="checkbox-style-color-2" value="hello 2" />
        *   </label>
        * <label class="s-mbe:30 s-label">
        *     <span>Principal Response Representative Marilyn Herman</span>
        *     <input type="checkbox" class="s-checkbox s-shape:square s-color:accent" name="checkbox-style-color-2" value="hello 2" />
        *   </label>
        * <label class="s-mbe:30 s-label">
        *     <span>Forward Marketing Supervisor Essie Stoltenberg</span>
        *     <input type="checkbox" class="s-checkbox s-shape:pill s-color:accent" name="checkbox-style-color-2" value="hello 2" />
        *   </label>
        * 
        * @example      html       Colors (none-exhaustive)
        *   <label class="s-mbe:30 s-label">
        *     <span>Internal Research Analyst Rhonda Howe</span>
        *     <input type="checkbox" class="s-checkbox s-color:accent" name="checkbox-style-color-2" value="hello 2" />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>Direct Group Assistant Victoria Ryan DDS</span>
        *     <input type="checkbox" class="s-checkbox s-color:complementary" name="checkbox-style-color-3" value="hello 3" />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>I'm disabled</span>
        *     <input type="checkbox" disabled class="s-checkbox s-color:error" name="checkbox-style-color-4" value="hello 4" />
        *   </label>
        * 
        * @example          html        RTL
        * <div dir="rtl">
        *   <label class="s-mbe:30 s-label">
        *     <span>Senior Markets Planner Pete Russel</span>
        *     <input type="checkbox" checked class="s-checkbox" name="checkbox-style-ltr-1" value="hello 1" />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>I'm disabled</span>
        *     <input type="checkbox" disabled class="s-checkbox" name="checkbox-style-ltr-3" value="hello 3" />
        *   </label>
        * </div>
        * 
        * @example          html        Scales
        *   <label class="s-mbe:30 s-label s-scale:07">
        *     <span>Human Research Associate Sheryl Mills</span>
        *     <input type="checkbox" checked class="s-checkbox" name="checkbox-style-ltr-1" value="hello 1" />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>Forward Accounts Associate Ben Hilpert</span>
        *     <input type="checkbox" class="s-checkbox" name="checkbox-style-ltr-2" value="hello 2" />
        *   </label>
        *   <label class="s-mbe:30 s-label s-scale:13">
        *     <span>Central Security Technician Bennie Mann V</span>
        *     <input type="checkbox" class="s-checkbox" name="checkbox-style-ltr-3" value="hello 3" />
        *   </label>
        * 
        * @example      html        Vertical rhythm / Text format
        *   <div class="s-format:text">
        *     <input type="checkbox" />
        *   </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-checkbox {appearance: none !important;
                -moz-appearance: none !important;
                -webkit-appearance: none !important;
                position: relative;
                width: 1.2em;
                height: 1.2em;
                font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            }
.s-checkbox:disabled {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
                }
.s-checkbox:disabled:hover, .s-checkbox:disabled:focus, .s-checkbox:disabled:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-checkbox:disabled, .s-checkbox:disabled * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-checkbox:not(.s-bare) {transition: var(--s-ui-form-transition, 0);
                    border: var(--s-ui-default-border-width, 1px) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                    background-color: transparent;
                    transition: var(--s-ui-form-transition, 0);
                    box-shadow: 0 0 0 0 hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        }
.s-checkbox:not(.s-bare):after {
                        content: '';
                        position: absolute;
                        top: 50%; left: 50%;
                        width: 0.6em; height: 0.6em;
                        transform: translate(-50%, -50%);
                        background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                        opacity: 0;
                        transition: var(--s-ui-form-transition, 0);border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                    }
label:hover > .s-checkbox:not(.s-bare):not(:disabled):after,
                    .s-checkbox:not(.s-bare):hover:not(:disabled):after {
                        opacity: 0.2;
                    }
.s-checkbox:not(.s-bare):checked:not(:disabled):after {
                        opacity: 1 !important;
                    }
.s-checkbox:not(.s-bare):focus:not(:hover):not(:active):not(:disabled) {
                        box-shadow: 0 0 0 var(--s-ui-outline-border-width, 10px) hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3);
                    }
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]), .preview .s-format-text input[type="checkbox"] {appearance: none !important;
                -moz-appearance: none !important;
                -webkit-appearance: none !important;
                position: relative;
                width: 1.2em;
                height: 1.2em;
                font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
                }
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):disabled, .preview .s-format-text input[type="checkbox"]:disabled {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
                }
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):disabled:hover, .s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):disabled:focus, .s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):disabled:active, .preview .s-format-text input[type="checkbox"]:disabled:hover, .preview .s-format-text input[type="checkbox"]:disabled:focus, .preview .s-format-text input[type="checkbox"]:disabled:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):disabled, .s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):disabled *, .preview .s-format-text input[type="checkbox"]:disabled, .preview .s-format-text input[type="checkbox"]:disabled * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]), .preview .s-format-text input[type="checkbox"] {
            

                
                    transition: var(--s-ui-form-transition, 0);
                    border: var(--s-ui-default-border-width, 1px) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                    background-color: transparent;
                    transition: var(--s-ui-form-transition, 0);
                    box-shadow: 0 0 0 0 hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
}
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]), .preview .s-format-text input[type="checkbox"] {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):after, .preview .s-format-text input[type="checkbox"]:after {
                        content: '';
                        position: absolute;
                        top: 50%; left: 50%;
                        width: 0.6em; height: 0.6em;
                        transform: translate(-50%, -50%);
                        background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                        opacity: 0;
                        transition: var(--s-ui-form-transition, 0);border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                    }
label:hover > .s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):not(:disabled):after,
                    .s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):hover:not(:disabled):after,
                    label:hover > .preview .s-format-text input[type="checkbox"]:not(:disabled):after,
                    .preview .s-format-text input[type="checkbox"]:hover:not(:disabled):after {
                        opacity: 0.2;
                    }
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):checked:not(:disabled):after, .preview .s-format-text input[type="checkbox"]:checked:not(:disabled):after {
                        opacity: 1 !important;
                    }
.s-format-text input[type="checkbox"]:not(.s-format-none input[type="checkbox"]):focus:not(:hover):not(:active):not(:disabled), .preview .s-format-text input[type="checkbox"]:focus:not(:hover):not(:active):not(:disabled) {
                        box-shadow: 0 0 0 var(--s-ui-outline-border-width, 10px) hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3);
                    }
.s-rhythm-vertical > input[type="checkbox"],.s-rhythm-vertical >  .s-checkbox {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 2);
                }
/**
        * @name          Dropdown
        * @namespace          sugar.style.ui.dropdown
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/dropdown
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice dropdown on buttons or whatever
        *
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.dropdown.classes;
        * 
        * .my-dropdown {
        *   @sugar.ui.dropdown;
        * }
        * 
        * @cssClass             s-dropdown-container        The container of the dropdown that will trigger the display, hide, etc...
        * @cssClass             s-dropdown                  Apply the dropdown styling
        * @cssClass       s-dropdown:bottom      Apply the bottom dropdown position
        * @cssClass       s-dropdown:bottom-start        Apply the bottom start dropdown position
        * @cssClass       s-dropdown:bottom-end        Apply the bottom end dropdown position
        * @cssClass       s-dropdown:top        Apply the top dropdown position
        * @cssClass       s-dropdown:top-start        Apply the top start dropdown position
        * @cssClass       s-dropdown:top-end        Apply the top end dropdown position
        * 
        * @example        html       Simple dropdown
        * <div class="s-dropdown-container">
        *   <button class="s-btn s-color:accent">
        *      Click me!
        *   </button>
        *   <div class="s-dropdown s-bg:base s-p:30 s-radius">
        *      <p class="s-typo:p s-mbe:30">Dynamic Data Strategist Genevieve Champlin</p>
        *      <a class="s-btn s-color:accent">You find me!</a>
        *   </div>
        * </div>
        * 
        * @example        html       Position
        * <div class="s-dropdown-container s-mie:20">
        *   <button class="s-btn s-color:accent">
        *       Bottom (default)
        *   </button>
        *   <div class="s-dropdown">
        *          <p class="s-typo:p s-mbe:30">Dynamic Solutions Facilitator Ira Stracke</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * <div class="s-dropdown-container s-mie:20">
        *   <button class="s-btn s-color:accent">
        *       Bottom start
        *   </button>
        *   <div class="s-dropdown:bottom-start">
        *          <p class="s-typo:p s-mbe:30">Legacy Creative Strategist Johnnie Raynor</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * <div class="s-dropdown-container s-mie:20">
        *   <button class="s-btn s-color:accent">
        *       Bottom end
        *   </button>
        *   <div class="s-dropdown:bottom-end">
        *          <p class="s-typo:p s-mbe:30">Future Operations Manager Mrs. Ramona Kulas</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * <div class="s-dropdown-container s-mie:20">
        *   <button class="s-btn s-color:accent">
        *       Top
        *   </button>
        *   <div class="s-dropdown:top">
        *          <p class="s-typo:p s-mbe:30">Chief Optimization Architect Meredith Goodwin</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * <div class="s-dropdown-container s-mie:20">
        *   <button class="s-btn s-color:accent">
        *       Top start
        *   </button>
        *   <div class="s-dropdown:top-start">
        *          <p class="s-typo:p s-mbe:30">Direct Response Agent Ray Funk</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * <div class="s-dropdown-container s-mie:20">
        *   <button class="s-btn s-color:accent">
        *      Top end
        *   </button>
        *   <div class="s-dropdown:top-end">
        *          <p class="s-typo:p s-mbe:30">Legacy Usability Representative Sidney Beer</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * 
        * @example      html        RTL Support
        *  <div class="s-dropdown-container s-mie:20" dir="rtl">
        *   <button class="s-btn s-color:accent">
        *       Click me!
        *   </button>
        *   <div class="s-dropdown">
        *          <p class="s-typo:p s-mbe:30">Regional Paradigm Designer Brett Towne</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        *  <div class="s-dropdown-container s-mie:20" dir="rtl">
        *   <button class="s-btn s-color:accent">
        *       Top start
        *   </button>
        *   <div class="s-dropdown:top-start">
        *          <p class="s-typo:p s-mbe:30">Internal Research Developer Alfonso Pollich</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * <div class="s-dropdown-container s-mie:20" dir="rtl">
        *   <button class="s-btn s-color:accent">
        *       Top end
        *   </button>
        *   <div class="s-dropdown:top-end">
        *          <p class="s-typo:p s-mbe:30">Global Program Designer Troy O'Kon</p>
        *          <a class="s-btn s-color:accent">You find me!</a>
        *       </div>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-dropdown {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
          position: absolute;
          -webkit-appearance: none;
          -moz-appearance: none;
               appearance: none;
          line-height: 1;
          outline: 0;
          white-space: nowrap;
          cursor: auto;
          z-index: 50;
            }
.s-dropdown:disabled, .s-dropdown[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
}
.s-dropdown:disabled:hover, .s-dropdown:disabled:focus, .s-dropdown:disabled:active, .s-dropdown[disabled]:hover, .s-dropdown[disabled]:focus, .s-dropdown[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-dropdown:disabled, .s-dropdown:disabled *, .s-dropdown[disabled], .s-dropdown[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-dropdown:disabled, .s-dropdown[disabled] {
opacity: 0 !important;
}
.s-wireframe .s-dropdown {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown, .s-wireframe .s-dropdown[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown, .s-wireframe .s-dropdown[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown:not(.s-bare) {background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));
            border: var(--s-ui-default-border-width, 1px) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1));border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);box-shadow: var(--s-depth-0, 0);transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
            }
.s-dropdown:not(.s-bare)-item {
                padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
                padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;

            }
.s-dropdown:not(.s-bare)-item:hover, .s-dropdown:not(.s-bare)-item:focus {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + -10) * 1%),1);
                }
.s-wireframe .s-dropdown:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown:not(.s-bare), .s-wireframe .s-dropdown:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown:not(.s-bare), .s-wireframe .s-dropdown:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown {top: 100%;
                    left: 50%;
                    transform: translateX(-50%);
        }
.s-wireframe .s-dropdown {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown, .s-wireframe .s-dropdown[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown, .s-wireframe .s-dropdown[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown-bottom-start {top: 100%;
                    left: 0;
                    transform: none;
        }
[dir="rtl"] .s-dropdown-bottom-start,
                    .s-dropdown-bottom-start[dir="rtl"] {
                        right: 0;
                        left: auto;
                    }
.s-wireframe .s-dropdown-bottom-start {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown-bottom-start, .s-wireframe .s-dropdown-bottom-start[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown-bottom-start {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown-bottom-start, .s-wireframe .s-dropdown-bottom-start[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown-bottom-end {top: 100%;
                    right: 0;
                    left: auto;
                    transform: none;
        }
[dir="rtl"] .s-dropdown-bottom-end,
                    .s-dropdown-bottom-end[dir="rtl"] {
                        right: auto;
                        left: 0;
                    }
.s-wireframe .s-dropdown-bottom-end {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown-bottom-end, .s-wireframe .s-dropdown-bottom-end[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown-bottom-end {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown-bottom-end, .s-wireframe .s-dropdown-bottom-end[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown-top {bottom: 100%;
                    top: auto;
                    left: 50%;
                    transform: translateX(-50%);
        }
.s-wireframe .s-dropdown-top {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown-top, .s-wireframe .s-dropdown-top[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown-top {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown-top, .s-wireframe .s-dropdown-top[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown-top-start {bottom: 100%;
                    top: auto;
                    left: 0;
                    transform: none;
        }
[dir="rtl"] .s-dropdown-top-start,
                    .s-dropdown-top-start[dir="rtl"] {
                        right: 0;
                        left: auto;
                    }
.s-wireframe .s-dropdown-top-start {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown-top-start, .s-wireframe .s-dropdown-top-start[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown-top-start {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown-top-start, .s-wireframe .s-dropdown-top-start[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown-top-end {bottom: 100%;
                    top: auto;
                    left: auto;
                    right: 0;
                    transform: none;
        }
[dir="rtl"] .s-dropdown-top-end,
                    .s-dropdown-top-end[dir="rtl"] {
                        right: auto;
                        left: 0;
                    }
.s-wireframe .s-dropdown-top-end {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-dropdown-top-end, .s-wireframe .s-dropdown-top-end[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-dropdown-top-end {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-dropdown-top-end, .s-wireframe .s-dropdown-top-end[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-dropdown-container {
                position: relative;
                display: inline-block;
                cursor: pointer;
            }
.s-dropdown-container > .s-dropdown {
                    opacity: 0;
                    pointer-events: none;
                }
.s-dropdown-container.active > .s-dropdown,
                .s-dropdown-container[active] > .s-dropdown,
                .s-dropdown-container:focus > .s-dropdown,
                .s-dropdown-container:focus-within > .s-dropdown,
                .s-dropdown-container > .s-dropdown:hover,
                .s-dropdown-container > .s-dropdown:focus,
                .s-dropdown-container > .s-dropdown:focus-within {
                    pointer-events: all;
                    opacity: 1;
                }
/**
        * @name          Fs Tree
        * @namespace          sugar.style.ui.fsTree
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/fs-tree
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display a nice filesystem tree
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.fsTree.classes;
        * 
        * .my-fsTree {
        *   @sugar.ui.fsTree;
        * }
        * 
        * @cssClass     s-fs-tree       Apply the filesystem tree lnf
        * 
        * @example        html       Default
        *   <ul class="s-fs-tree:">
            *       <li class="active">
            *           <div>
            *               <i class="s-icon:folder-open"></i>
            *               <span tabindex="0">Boyd Murazik</span>
            *           </div>
            *           <ul>
            *               <li>
            *                   <div>
            *                       <i class="s-icon:file"></i>
            *                       <a tabindex="0">Mr. Kristine Hilpert</a>
            *                   </div>
            *               </li>
            *               <li class="active">
            *                   <div>
            *                       <i class="s-icon:folder-open"></i>
            *                       <span tabindex="0">Nellie O'Conner</span>
            *                   </div>
                                <ul>
                    *               <li>
                    *                   <div>
                    *                       <i class="s-icon:file-pdf"></i>
                    *                       <a tabindex="0">Valerie Funk</a>
                    *                   </div>
                    *               </li>
                    *               <li>
                    *                  <div>
                    *                       <i class="s-icon:file-code"></i>
                    *                       <a tabindex="0">Ms. Nora Gutkowski</a>
                    *                  </div>
                    *               </li>
                    *              <li>
                    *                   <div>
                    *                       <i class="s-icon:file-image"></i>
                    *                       <a tabindex="0">Rudolph Stracke</a>
                    *                   </div>
                    *               </li>
                    *           </ul>
            *               </li>
            *              <li>
            *                   <div>
            *                       <i class="s-icon:file-archive"></i>
            *                       <a tabindex="0">Billy Jacobs Jr.</a>
            *                   </div>
            *               </li>
            *           </ul>
            *           <li class="s-disabled">
            *               <div>
        *                       <i class="s-icon:file"></i>
        *                       <a tabindex="0">Andrew Marvin</a>
        *                  </div>
        *               </li>
            *           <li>
            *               <div>
        *                       <i class="s-icon:file-code"></i>
        *                       <a tabindex="0">Ada McClure</a>
        *                 </div>
        *               </li>
            *       </li>
            *   </ul>
            *
        *
        * @example        html       Shapes
        * <div class="s-shape:pill">
        *   <ul class="s-fs-tree:">
            *       <li class="active">
            *           <div>
            *               <i class="s-icon:folder-open"></i>
            *               <span tabindex="0">Darrel Thompson</span>
            *           </div>
            *           <ul>
            *               <li>
            *                   <div>
            *                       <i class="s-icon:file"></i>
            *                       <a tabindex="0">Irene Schroeder IV</a>
            *                   </div>
            *               </li>
            *               <li class="active">
            *                   <div>
            *                       <i class="s-icon:folder-open"></i>
            *                       <span tabindex="0">Mr. Kathleen Price</span>
            *                   </div>
                                <ul>
                    *               <li>
                    *                   <div>
                    *                       <i class="s-icon:file-pdf"></i>
                    *                       <a tabindex="0">Tricia Hartmann II</a>
                    *                   </div>
                    *               </li>
                    *               <li>
                    *                  <div>
                    *                       <i class="s-icon:file-code"></i>
                    *                       <a tabindex="0">Ellen Kilback</a>
                    *                  </div>
                    *               </li>
                    *              <li>
                    *                   <div>
                    *                       <i class="s-icon:file-image"></i>
                    *                       <a tabindex="0">Ebony Heaney</a>
                    *                   </div>
                    *               </li>
                    *           </ul>
            *               </li>
            *              <li>
            *                   <div>
            *                       <i class="s-icon:file-archive"></i>
            *                       <a tabindex="0">Colleen Simonis</a>
            *                   </div>
            *               </li>
            *           </ul>
            *           <li class="s-disabled">
            *               <div>
        *                       <i class="s-icon:file"></i>
        *                       <a tabindex="0">Lynette Kihn</a>
        *                  </div>
        *               </li>
            *           <li>
            *               <div>
        *                       <i class="s-icon:file-code"></i>
        *                       <a tabindex="0">Elsa Trantow</a>
        *                 </div>
        *               </li>
            *       </li>
            *   </ul>
            *
        * </div>
        * <div class="s-shape:square">
        *   <ul class="s-fs-tree:">
            *       <li class="active">
            *           <div>
            *               <i class="s-icon:folder-open"></i>
            *               <span tabindex="0">Julian Pfannerstill</span>
            *           </div>
            *           <ul>
            *               <li>
            *                   <div>
            *                       <i class="s-icon:file"></i>
            *                       <a tabindex="0">Carroll Cummerata</a>
            *                   </div>
            *               </li>
            *               <li class="active">
            *                   <div>
            *                       <i class="s-icon:folder-open"></i>
            *                       <span tabindex="0">Lamar Becker</span>
            *                   </div>
                                <ul>
                    *               <li>
                    *                   <div>
                    *                       <i class="s-icon:file-pdf"></i>
                    *                       <a tabindex="0">Monique Barrows</a>
                    *                   </div>
                    *               </li>
                    *               <li>
                    *                  <div>
                    *                       <i class="s-icon:file-code"></i>
                    *                       <a tabindex="0">Bryan Schaefer</a>
                    *                  </div>
                    *               </li>
                    *              <li>
                    *                   <div>
                    *                       <i class="s-icon:file-image"></i>
                    *                       <a tabindex="0">Dr. Elijah Reichel</a>
                    *                   </div>
                    *               </li>
                    *           </ul>
            *               </li>
            *              <li>
            *                   <div>
            *                       <i class="s-icon:file-archive"></i>
            *                       <a tabindex="0">Kari Hahn</a>
            *                   </div>
            *               </li>
            *           </ul>
            *           <li class="s-disabled">
            *               <div>
        *                       <i class="s-icon:file"></i>
        *                       <a tabindex="0">Bertha Jones</a>
        *                  </div>
        *               </li>
            *           <li>
            *               <div>
        *                       <i class="s-icon:file-code"></i>
        *                       <a tabindex="0">Wm Fisher</a>
        *                 </div>
        *               </li>
            *       </li>
            *   </ul>
            *
        * </div>
        *
        * @example        html       RTL
        * <div dir="rtl">
        *   <ul class="s-fs-tree:">
            *       <li class="active">
            *           <div>
            *               <i class="s-icon:folder-open"></i>
            *               <span tabindex="0">Joyce Renner</span>
            *           </div>
            *           <ul>
            *               <li>
            *                   <div>
            *                       <i class="s-icon:file"></i>
            *                       <a tabindex="0">Ms. Maurice Jaskolski</a>
            *                   </div>
            *               </li>
            *               <li class="active">
            *                   <div>
            *                       <i class="s-icon:folder-open"></i>
            *                       <span tabindex="0">Kim Swaniawski</span>
            *                   </div>
                                <ul>
                    *               <li>
                    *                   <div>
                    *                       <i class="s-icon:file-pdf"></i>
                    *                       <a tabindex="0">Shirley Reichert MD</a>
                    *                   </div>
                    *               </li>
                    *               <li>
                    *                  <div>
                    *                       <i class="s-icon:file-code"></i>
                    *                       <a tabindex="0">Rosemary Simonis</a>
                    *                  </div>
                    *               </li>
                    *              <li>
                    *                   <div>
                    *                       <i class="s-icon:file-image"></i>
                    *                       <a tabindex="0">Miss Isaac Bechtelar</a>
                    *                   </div>
                    *               </li>
                    *           </ul>
            *               </li>
            *              <li>
            *                   <div>
            *                       <i class="s-icon:file-archive"></i>
            *                       <a tabindex="0">Edith Fay</a>
            *                   </div>
            *               </li>
            *           </ul>
            *           <li class="s-disabled">
            *               <div>
        *                       <i class="s-icon:file"></i>
        *                       <a tabindex="0">Joan Moore</a>
        *                  </div>
        *               </li>
            *           <li>
            *               <div>
        *                       <i class="s-icon:file-code"></i>
        *                       <a tabindex="0">Wilbert Casper</a>
        *                 </div>
        *               </li>
            *       </li>
            *   </ul>
            *
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-fs-tree {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }
.s-fs-tree li > div {
                position: relative;
                margin-inline-start: cale(1em * var(--s-fs-tree-inline-space-ratio, 1));
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
.s-fs-tree li > div > a {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
.s-fs-tree li {
                position: relative;
            }
.s-fs-tree li > div {
                    padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
                    padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
                    text-overflow: ellipsis;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                }
.s-fs-tree li:not(.s-disabled .s-fs-tree li) {
                    cursor: pointer;
                }
.s-fs-tree li > i.s-when-active,
                .s-fs-tree li > div > i.s-when-active {
                    display: none;
                }
.s-fs-tree li.active > i.s-when-active,
                    .s-fs-tree li.active > div i.s-when-active,
                    .s-fs-tree li[active] > i.s-when-active,
                    .s-fs-tree li[active] > div i.s-when-active {
                        display: inline-block;
                    }
.s-fs-tree li.active > i.s-when-active + i, .s-fs-tree li.active > div i.s-when-active + i, .s-fs-tree li[active] > i.s-when-active + i, .s-fs-tree li[active] > div i.s-when-active + i {
                            display: none;
                        }
.s-fs-tree li.active > div, .s-fs-tree li[active] > div {
                        font-weight: bold;
                    }
.s-fs-tree li:not(.active, [active]) > ul, .s-fs-tree li:not(.active, [active]) > ol {
                    display: none;
                }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-fs-tree li > [tabindex]:focus:not(:hover):not(.s-disabled .s-fs-tree li) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-fs-tree li > ul,
                .s-fs-tree li > ol {
                    margin-inline-start: calc(0.5em * var(--s-fs-tree-inline-space-ratio, 1));
                }
.s-fs-tree li:hover > ul > li:before,
                    .s-fs-tree li:hover > ol > li:before,
                    .s-fs-tree li:focus > ul > li:before,
                    .s-fs-tree li:focus > ol > li:before,
                    .s-fs-tree li:focus-within > ul > li:before,
                    .s-fs-tree li:focus-within > ol > li:before {
                        background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.5);
                    }
[dir="rtl"] .s-fs-tree ul li > div:before, [dir="rtl"] .s-fs-tree ol li > div:before, .s-fs-tree[dir="rtl"] ul li > div:before, .s-fs-tree[dir="rtl"] ol li > div:before {
                            top: 0;
                            right: calc(0.15em * var(--s-fs-tree-inline-space-ratio, 1));
                            left: auto;
                        }
[dir="rtl"] .s-fs-tree ul li > div:after, [dir="rtl"] .s-fs-tree ol li > div:after, .s-fs-tree[dir="rtl"] ul li > div:after, .s-fs-tree[dir="rtl"] ol li > div:after {
                            bottom: 0;
                            left: auto;
                            right: calc(0.5em * var(--s-fs-tree-inline-space-ratio, 1));
                        }
.s-fs-tree:not(.s-bare) li:not(.s-disabled) > div:hover {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-lightness-offset, 0)) * 1%),var(--s-color-current-surface-a, 1));
                }
/**
        * @name          Input
        * @namespace          sugar.style.ui.input
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/forms/text-input
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some lnfs to your text input
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.input.classes;
        * 
        * .my-input {
        *   @sugar.ui.input;
        * }
        * 
         * @cssClass     s-input           Apply the solid input lnf
 * @cssClass     s-input:underline           Apply the underline input lnf
        * 
         * @example        html       solid lnf
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Kayla Yost</span>
            *       <input type="text" placeholder="Type something!" class="s-input:solid s-width:40" />
            *  </label>
            *   <label class="s-label:responsive s-mbe:30">
            *        <span>I'm disabled</span>
            *       <input type="text" disabled placeholder="Type something!" class="s-input:solid s-width:40" />
            *   </label>
            *   <label dir="rtl" class="s-label:responsive s-mbe:30">
            *       <span>Support RTL</span>
            *       <input type="text" placeholder="Type something! (RTL)" class="s-input:solid s-width:40" />
            *   </label>
            * 
            * 
 * @example        html       underline lnf
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Jermaine Bode</span>
            *       <input type="text" placeholder="Type something!" class="s-input:underline s-width:40" />
            *  </label>
            *   <label class="s-label:responsive s-mbe:30">
            *        <span>I'm disabled</span>
            *       <input type="text" disabled placeholder="Type something!" class="s-input:underline s-width:40" />
            *   </label>
            *   <label dir="rtl" class="s-label:responsive s-mbe:30">
            *       <span>Support RTL</span>
            *       <input type="text" placeholder="Type something! (RTL)" class="s-input:underline s-width:40" />
            *   </label>
            * 
            * 
        *
         * @example        html       Shapes
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Hugo Huels</span>
            *       <input type="text" placeholder="Type something!" class="s-input:solid s-shape:default s-width:40" />
            *  </label>
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Casey Harris</span>
            *       <input type="text" placeholder="Type something!" class="s-input:solid s-shape:square s-width:40" />
            *  </label>
            * <label class="s-label:responsive s-mbe:30">
            *       <span>Trevor Fadel</span>
            *       <input type="text" placeholder="Type something!" class="s-input:solid s-shape:pill s-width:40" />
            *  </label>
            * 
 * @example        html       Shapes
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Dominick Smith DVM</span>
            *       <input type="text" placeholder="Type something!" class="s-input:underline s-shape:default s-width:40" />
            *  </label>
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Dewey Kovacek</span>
            *       <input type="text" placeholder="Type something!" class="s-input:underline s-shape:square s-width:40" />
            *  </label>
            * <label class="s-label:responsive s-mbe:30">
            *       <span>Isabel Johns</span>
            *       <input type="text" placeholder="Type something!" class="s-input:underline s-shape:pill s-width:40" />
            *  </label>
            * 
        *
        * @example        html       Colors (non-exhaustive)
         
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Mabel O'Reilly</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-color:main s-width:40" />
            *   </label>
            * 
 
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Neil Schulist</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-color:accent s-width:40" />
            *   </label>
            * 
 
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Mr. Marta Hermiston</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-color:complementary s-width:40" />
            *   </label>
            * 
 
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Leticia Waters</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-color:error s-width:40" />
            *   </label>
            * 
        *
        * @example        html       Scales (non-exhaustive)
         
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Derrick Wehner</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-scale:07 s-width:40" />
            *   </label>
            * 
 
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Calvin Frami</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-scale:10 s-width:40" />
            *   </label>
            * 
 
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Ollie Bruen</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-scale:13 s-width:40" />
            *   </label>
            * 
 
            *   <label class="s-label:responsive s-mbe:30">
            *       <span>Karl Effertz</span>
            *       <input type="text" placeholder="Type something!" class="s-input s-scale:16 s-width:40" />
            *   </label>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-input {width: 100%;
        }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-input:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-input:not(.s-bare) {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            display: inline-block;
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);


        

            color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
            background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-ui-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-ui-lightness-offset, 0)) * 1%),var(--s-color-main-ui-a, 1));
            font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2) solid var(--s-ui-default-border-width, 1px);
            border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            transition: var(--s-ui-default-transition, 0);box-shadow: var(--s-depth-0, 0);
            cursor: auto !important;
}
.s-input:not(.s-bare)::-moz-placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-input:not(.s-bare)::placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-input:not(.s-bare)::-moz-selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-input:not(.s-bare)::selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-input:not(.s-bare):not(textarea) {
                line-height: 1;
            }
.s-input:not(.s-bare)[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
            }
.s-input:not(.s-bare)[disabled]:hover, .s-input:not(.s-bare)[disabled]:focus, .s-input:not(.s-bare)[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-input:not(.s-bare)[disabled], .s-input:not(.s-bare)[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-input:not(.s-bare):hover {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3) solid 1px;
}
.s-input:not(.s-bare):focus {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-input:not(.s-bare):active:not(:hover), .s-input:not(.s-bare).active, .s-input:not(.s-bare)[active] {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-wireframe .s-input:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-input:not(.s-bare), .s-wireframe .s-input:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-input:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-input:not(.s-bare), .s-wireframe .s-input:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-input:not(.s-bare) {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-input.s-input-underline:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-input.s-input-underline:not(.s-bare) {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            display: inline-block;
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);


        

            color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
            background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-ui-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-ui-lightness-offset, 0)) * 1%),var(--s-color-main-ui-a, 1));
            font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2) solid var(--s-ui-default-border-width, 1px);
            border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            transition: var(--s-ui-default-transition, 0);box-shadow: var(--s-depth-0, 0);
            cursor: auto !important;
}
.s-input.s-input-underline:not(.s-bare)::-moz-placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-input.s-input-underline:not(.s-bare)::placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-input.s-input-underline:not(.s-bare)::-moz-selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-input.s-input-underline:not(.s-bare)::selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-input.s-input-underline:not(.s-bare):not(textarea) {
                line-height: 1;
            }
.s-input.s-input-underline:not(.s-bare)[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
            }
.s-input.s-input-underline:not(.s-bare)[disabled]:hover, .s-input.s-input-underline:not(.s-bare)[disabled]:focus, .s-input.s-input-underline:not(.s-bare)[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-input.s-input-underline:not(.s-bare)[disabled], .s-input.s-input-underline:not(.s-bare)[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-input.s-input-underline:not(.s-bare):hover {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3) solid 1px;
}
.s-input.s-input-underline:not(.s-bare):focus {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-input.s-input-underline:not(.s-bare):active:not(:hover), .s-input.s-input-underline:not(.s-bare).active, .s-input.s-input-underline:not(.s-bare)[active] {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-wireframe .s-input.s-input-underline:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-input.s-input-underline:not(.s-bare), .s-wireframe .s-input.s-input-underline:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-input.s-input-underline:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-input.s-input-underline:not(.s-bare), .s-wireframe .s-input.s-input-underline:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-input.s-input-underline:not(.s-bare) {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
  

                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
                    border-top: none !important;
                    border-left: none !important;
                    border-right: none !important;
                    border-bottom: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3) solid 1px !important;
                    padding-inline: 1ch !important;
}
.s-input.s-input-underline:not(.s-bare):hover, .s-input.s-input-underline:not(.s-bare):focus {
                        border-bottom: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),1) solid 1px !important;
                        background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.1);
                    }
/**
        * @name          Input container
        * @namespace          sugar.style.ui.inputContainer
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/forms/input-container
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some lnfs to input container
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.inputContainer.classes;
        * 
        * .my-inputContainer {
        *   @sugar.ui.inputContainer;
        * }
        * 
         * @cssClass     s-input-container           Apply the group input container lnf
 * @cssClass     s-input-container:addon           Apply the addon input container lnf
        * 
        * @example    html          Group
        * <label class="s-label:responsive s-mbe:30">
        *      <span>Bernard Nader</span>
        *      <div class="s-input-container:group s-width:50">
        *           <input type="text" placeholder="Keywords..." class="s-input" />
        *           <button class="s-btn s-color:accent">Search!</button>
        *      </div>
        * </label>
        * 
        * @example    html          Group (rtl)
        * <label dir="rtl" class="s-label:responsive s-mbe:30">
        *      <span>Tomas Ledner</span>
        *      <div class="s-input-container:group s-width:50">
        *           <input type="text" placeholder="Keywords..." class="s-input" />
        *           <button class="s-btn s-color:accent">Search!</button>
        *      </div>
        * </label>
        * 
        * @example    html          Addon
        * <label class="s-label:responsive s-mbe:30">
        *      <span>Antonia Morar</span>
        *      <div class="s-input-container:addon s-width:50">
        *           <input type="text" placeholder="Keywords..." class="s-input" />
        *           <div>
        *              <i class="s-icon:ui-copy"></i>
        *           </div>
        *      </div>
        * </label>
        * 
        * @example    html          Addon (rtl)
        * <label dir="rtl" class="s-label:responsive s-mbe:30">
        *      <span>May Rolfson</span>
        *      <div class="s-input-container:addon s-width:50">
        *           <input type="text" placeholder="Keywords..." class="s-input" />
        *           <div>
        *               <i class="s-icon:ui-copy"></i>
        *           </div>
        *      </div>
        * </label>
        * 
        * @example    html          Addon + group
        * <label class="s-label:responsive s-mbe:30">
        *    <span>Lowell Ankunding</span>
        *    <div class="s-input-container:group s-width:50">
        *       <div class="s-input-container:addon">
        *          <input type="text" placeholder="Keywords..." class="s-input" />
        *          <div>
        *             <i class="s-icon:ui-copy"></i>
        *          </div>
        *       </div>
        *       <button class="s-btn s-color:complementary">Search!</button>
        *    </div>
        * </label>
        * 
        * @example    html          Addon + group (rtl)
        * <label dir="rtl" class="s-label:responsive s-mbe:30">
        *    <span>Marty Dibbert</span>
        *    <div class="s-input-container:group s-width:50">
        *       <div class="s-input-container:addon">
        *          <input type="text" placeholder="Keywords..." class="s-input" />
        *          <div>
        *             <i class="s-icon:ui-copy"></i>
        *          </div>
        *       </div>
        *       <button class="s-btn s-color:complementary">Search!</button>
        *    </div>
        * </label>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-input-container-group {width: 100%;
        

                    display: flex;
        }
.s-input-container-group:not([dir="rtl"] .s-input-container-group):not([dir="rtl"]) > *:first-child,
                        .s-input-container-group:not([dir="rtl"] .s-input-container-group):not([dir="rtl"]) > .s-input-container > *:first-child {
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                        }
.s-input-container-group:not([dir="rtl"] .s-input-container-group):not([dir="rtl"]) > *:last-child,
                        .s-input-container-group:not([dir="rtl"] .s-input-container-group):not([dir="rtl"]) > .s-input-container > *:last-child {
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                        }
[dir="rtl"] .s-input-container-group > *:first-child,
                        [dir="rtl"] .s-input-container-group > .s-input-container > *:first-child,
                        .s-input-container-group[dir="rtl"] > *:first-child,
                        .s-input-container-group[dir="rtl"] > .s-input-container > *:first-child {
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                        }
[dir="rtl"] .s-input-container-group > *:last-child,
                        [dir="rtl"] .s-input-container-group > .s-input-container > *:last-child,
                        .s-input-container-group[dir="rtl"] > *:last-child,
                        .s-input-container-group[dir="rtl"] > .s-input-container > *:last-child {
                            border-top-right-radius: 0;
                            border-bottom-right-radius: 0;
                        }
.s-input-container-group > *:not(:first-child, :last-child), .s-input-container-group > .s-input-container > *:not(:first-child, :last-child) {
                        border-radius: 0;
                    }
.s-input-container-group:not(.s-bare) {
        }
.s-input-container-addon {width: 100%;
        

                    display: block;
                    position: relative;
        }
.s-input-container-addon > *:first-child {
                        width: 100%;
                        padding-inline-end: 3em;
                    }
.s-input-container-addon > *:first-child + * {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        height: 100%;
                        aspect-ratio: 1;
                        top: 0; right: 0;
                    }
[dir="rtl"] .s-input-container-addon > *:first-child + *, .s-input-container-addon[dir="rtl"] > *:first-child + * {
                            right: auto;
                            left: 0;
                        }
.s-input-container-addon:not(.s-bare) {
        }
/**
        * @name          Label
        * @namespace          sugar.style.ui.label
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/forms/labels
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to structure forms using labels.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.label.classes;
        * 
        * .my-label {
        *   @sugar.ui.label;
        * } 
        *
         * @cssClass     s-label           Apply the inline label lnf
 * @cssClass     s-label:block           Apply the block label lnf
 * @cssClass     s-label:float           Apply the float label lnf
        * @cssClass         s-label:inline          Make sure the input and label stay inline even on mobile. Usefull for checkbox and radio for example.
        * 
         * @example        html       inline lnf
            *   <label class="s-mbe:30 s-label">
            *     <input type="text" class="s-input s-width:40" placeholder="Type something!" />
            *     <span>Forward Accountability Executive Josephine Rowe</span>
            *   </label>
            *   <label class="s-mbe:30 s-label">
            *     <textarea class="s-input s-width:40" placeholder="Type something!" rows="3"></textarea>
            *     <span>Investor Accounts Director Ms. Frances Hand</span>
            *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <input type="text" disabled class="s-input s-width:40" placeholder="Type something!" />
        *     <span>I'm disabled</span>
    *   </label>
    *   <label dir="rtl" class="s-mbe:30 s-label">
    *     <input type="text" class="s-input s-width:40" placeholder="Type something!" />
    *     <span>Support RTL</span>
    *   </label>
    *   <label class="s-mbe:30 s-label s-color:accent">
    *     <input type="text" class="s-input s-width:40" placeholder="Type something!" />
    *     <span>With the accent color</span>
    *   </label>
            * 
 * @example        html       block lnf
            *   <label class="s-mbe:30 s-label:block">
            *     <input type="text" class="s-input " placeholder="Type something!" />
            *     <span>Senior Solutions Officer Catherine Konopelski</span>
            *   </label>
            *   <label class="s-mbe:30 s-label:block">
            *     <textarea class="s-input " placeholder="Type something!" rows="3"></textarea>
            *     <span>Forward Interactions Facilitator Kate Rippin</span>
            *   </label>
        *   <label class="s-mbe:30 s-label:block">
        *     <input type="text" disabled class="s-input " placeholder="Type something!" />
        *     <span>I'm disabled</span>
    *   </label>
    *   <label dir="rtl" class="s-mbe:30 s-label:block">
    *     <input type="text" class="s-input " placeholder="Type something!" />
    *     <span>Support RTL</span>
    *   </label>
    *   <label class="s-mbe:30 s-label:block s-color:accent">
    *     <input type="text" class="s-input " placeholder="Type something!" />
    *     <span>With the accent color</span>
    *   </label>
            * 
 * @example        html       float lnf
            *   <label class="s-mbe:30 s-label:float">
            *     <input type="text" class="s-input s-width:40" placeholder="Type something!" />
            *     <span>Legacy Implementation Orchestrator Dawn Kautzer</span>
            *   </label>
            *   <label class="s-mbe:30 s-label:float">
            *     <textarea class="s-input s-width:40" placeholder="Type something!" rows="3"></textarea>
            *     <span>Chief Response Supervisor Kathleen Walter</span>
            *   </label>
        *   <label class="s-mbe:30 s-label:float">
        *     <input type="text" disabled class="s-input s-width:40" placeholder="Type something!" />
        *     <span>I'm disabled</span>
    *   </label>
    *   <label dir="rtl" class="s-mbe:30 s-label:float">
    *     <input type="text" class="s-input s-width:40" placeholder="Type something!" />
    *     <span>Support RTL</span>
    *   </label>
    *   <label class="s-mbe:30 s-label:float s-color:accent">
    *     <input type="text" class="s-input s-width:40" placeholder="Type something!" />
    *     <span>With the accent color</span>
    *   </label>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-label {width: 100%;
          font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          display: flex;
            }
.s-label > span {
            order: -1;
            cursor: pointer;
          }
.s-label[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
          }
.s-label[disabled]:hover, .s-label[disabled]:focus, .s-label[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-label[disabled], .s-label[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-label {

    

                  display: flex;
                  justify-content: space-between;
                  gap: calc(var(--s-margin-default, 1rem) * 0.75);
}
.s-label:not(:has(textarea)) {
                    align-items: center;
                  }
.s-label:has(textarea) > span {
                    padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * var(--s-ui-form-padding-block, 0.75));
                  }
.s-label:not(.s-bare) {
                }
.s-label-block {width: 100%;
          font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          display: flex;
            }
.s-label-block > span {
            order: -1;
            cursor: pointer;
          }
.s-label-block[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
          }
.s-label-block[disabled]:hover, .s-label-block[disabled]:focus, .s-label-block[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-label-block[disabled], .s-label-block[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-label-block {

    

                  display: flex;
                  justify-content: space-between;
                  align-items: initial !important;
                  gap: calc(var(--s-margin-default, 1rem) * 0.75);
                  flex-direction: column;
}
.s-label-block input:not([type="checkbox"]):not([type="radio"]),
                  .s-label-block select,
                  .s-label-block textarea {
                    width: 100%;
                  }
.s-label-block:not(.s-bare) {
                }
.s-label-float {width: 100%;
          font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          display: flex;
            }
.s-label-float > span {
            order: -1;
            cursor: pointer;
          }
.s-label-float[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
          }
.s-label-float[disabled]:hover, .s-label-float[disabled]:focus, .s-label-float[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-label-float[disabled], .s-label-float[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-label-float {

    

                  display: block;
                  position: relative;
}
.s-label-float > span {
                    margin-inline-start: 0;
                  }
.s-label-float input:not([type="checkbox"]):not([type="radio"]),
                  .s-label-float textarea {
                    padding-block: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.5);
                  }
.s-label-float > span {
                    top: 0;
                    line-height: initial;
                    left: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                    padding-block: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.2);
                    position: absolute;
                    z-index: 1;
                    transform: scale(1);
                    transform-origin: 0 0;
                    -webkit-user-select: none;
                       -moz-user-select: none;
                            user-select: none;
                  }
.s-label-float:focus > span, .s-label-float:focus-within > span {
                      top: 0;
                      left: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                      transform: scale(0.6);
                      opacity: 0.8;
                    }
.s-label-float:focus input:not([type="checkbox"]):not([type="radio"]),
                    .s-label-float:focus textarea,
                    .s-label-float:focus-within input:not([type="checkbox"]):not([type="radio"]),
                    .s-label-float:focus-within textarea {
                      padding-block-start: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.5 * 1.2);
                      padding-block-end: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.5 * 0.8);
                    }
.s-label-float input:not(:-moz-placeholder-shown), .s-label-float textarea:not(:-moz-placeholder-shown) {
                      padding-block-start: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.5 * 1.2) !important;
                      padding-block-end: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.5 * 0.8) !important;
                  }
.s-label-float input:not(:placeholder-shown),
                  .s-label-float textarea:not(:placeholder-shown) {
                      padding-block-start: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.5 * 1.2) !important;
                      padding-block-end: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) * 1.5 * 0.8) !important;
                  }
.s-label-float input:not(:-moz-placeholder-shown):not([type="checkbox"]):not([type="radio"]) + span, .s-label-float textarea:not(:-moz-placeholder-shown) + span {
                    top: 0;
                    left: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                    transform: scale(0.6);
                    opacity: 0.8;
                  }
.s-label-float input:not(:placeholder-shown):not([type="checkbox"]):not([type="radio"]) + span,
                  .s-label-float textarea:not(:placeholder-shown) + span {
                    top: 0;
                    left: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                    transform: scale(0.6);
                    opacity: 0.8;
                  }
[dir="rtl"] .s-label-float > *:not(input):not(textarea):not(select), .s-label-float[dir="rtl"] > *:not(input):not(textarea):not(select) {
                      left: auto;
                      right: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                      transform-origin: 100% 0;
                    }
[dir="rtl"] .s-label-float:focus > *:not(input):not(textarea):not(select), [dir="rtl"] .s-label-float:focus-within > *:not(input):not(textarea):not(select), .s-label-float[dir="rtl"]:focus > *:not(input):not(textarea):not(select), .s-label-float[dir="rtl"]:focus-within > *:not(input):not(textarea):not(select) {
                        left: auto;
                        right: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                        opacity: 0.8;
                      }
[dir="rtl"] .s-label-float > input:not(:-moz-placeholder-shown):not([type="checkbox"]):not([type="radio"]) + span, [dir="rtl"] .s-label-float > textarea:not(:-moz-placeholder-shown) + span, .s-label-float[dir="rtl"] > input:not(:-moz-placeholder-shown):not([type="checkbox"]):not([type="radio"]) + span, .s-label-float[dir="rtl"] > textarea:not(:-moz-placeholder-shown) + span {
                      left: auto;
                      right: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                      opacity: 0.8;
                    }
[dir="rtl"] .s-label-float > input:not(:placeholder-shown):not([type="checkbox"]):not([type="radio"]) + span,
                    [dir="rtl"] .s-label-float > textarea:not(:placeholder-shown) + span,
                    .s-label-float[dir="rtl"] > input:not(:placeholder-shown):not([type="checkbox"]):not([type="radio"]) + span,
                    .s-label-float[dir="rtl"] > textarea:not(:placeholder-shown) + span {
                      left: auto;
                      right: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                      opacity: 0.8;
                    }
.s-label-float input:not([type="checkbox"]):not([type="radio"]),
                  .s-label-float textarea {
                    width: 100%;
                    margin: 0;
                  }
.s-label-float > .disabled + *,
                  .s-label-float > [disabled] + * {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
                  }
.s-label-float > .disabled + *:hover, .s-label-float > .disabled + *:focus, .s-label-float > .disabled + *:active, .s-label-float > [disabled] + *:hover, .s-label-float > [disabled] + *:focus, .s-label-float > [disabled] + *:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-label-float > .disabled + *, .s-label-float > .disabled + * *, .s-label-float > [disabled] + *, .s-label-float > [disabled] + * * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-label-float:not(.s-bare) {width: 100%;
                }
.s-label-float:not(.s-bare) > *:not(input):not(textarea):not(select) {
                    transition: var(--s-ui-default-transition, 0);
                  }
.s-label-float:not(.s-bare) > *:not(input):not(textarea):not(select) {
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-text-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-text-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-text-lightness-offset, 0)) * 1%),var(--s-color-current-text-a, 1));
                  }
.s-label-float:not(.s-bare) > input:not([type="checkbox"]):not([type="radio"]),
                  .s-label-float:not(.s-bare) > textarea,
                  .s-label-float:not(.s-bare) > select {
                    width: 100% !important;
                    transition: var(--s-ui-default-transition, 0);
                  }
.s-label-float:not(.s-bare) > input:not([type="checkbox"]):not([type="radio"])::-moz-placeholder, .s-label-float:not(.s-bare) > textarea::-moz-placeholder, .s-label-float:not(.s-bare) > select::-moz-placeholder {
                      color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
                    }
.s-label-float:not(.s-bare) > input:not([type="checkbox"]):not([type="radio"])::placeholder, .s-label-float:not(.s-bare) > textarea::placeholder, .s-label-float:not(.s-bare) > select::placeholder {
                      color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
                    }
.s-label-float:not(.s-bare):focus > input:not([type="checkbox"]):not([type="radio"])::-moz-placeholder, .s-label-float:not(.s-bare):focus > textarea::-moz-placeholder, .s-label-float:not(.s-bare):focus > select::-moz-placeholder, .s-label-float:not(.s-bare):focus-within > input:not([type="checkbox"]):not([type="radio"])::-moz-placeholder, .s-label-float:not(.s-bare):focus-within > textarea::-moz-placeholder, .s-label-float:not(.s-bare):focus-within > select::-moz-placeholder {
                        color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-placeholder-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-placeholder-lightness-offset, 0)) * 1%),var(--s-color-current-placeholder-a, 1));
                      }
.s-label-float:not(.s-bare):focus > input:not([type="checkbox"]):not([type="radio"])::placeholder, .s-label-float:not(.s-bare):focus > textarea::placeholder, .s-label-float:not(.s-bare):focus > select::placeholder, .s-label-float:not(.s-bare):focus-within > input:not([type="checkbox"]):not([type="radio"])::placeholder, .s-label-float:not(.s-bare):focus-within > textarea::placeholder, .s-label-float:not(.s-bare):focus-within > select::placeholder {
                        color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-placeholder-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-placeholder-lightness-offset, 0)) * 1%),var(--s-color-current-placeholder-a, 1));
                      }
.s-label-float:not(.s-bare) > input:not(:placeholder-shown):not([type="checkbox"]):not([type="radio"])::-moz-placeholder, .s-label-float:not(.s-bare) > textarea:not(:placeholder-shown)::-moz-placeholder {
                      color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-placeholder-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-placeholder-lightness-offset, 0)) * 1%),var(--s-color-current-placeholder-a, 1));
                    }
.s-label-float:not(.s-bare) > input:not(:-moz-placeholder-shown):not([type="checkbox"]):not([type="radio"])::placeholder, .s-label-float:not(.s-bare) > textarea:not(:-moz-placeholder-shown)::placeholder {
                      color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-placeholder-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-placeholder-lightness-offset, 0)) * 1%),var(--s-color-current-placeholder-a, 1));
                    }
.s-label-float:not(.s-bare) > input:not(:placeholder-shown):not([type="checkbox"]):not([type="radio"])::placeholder, .s-label-float:not(.s-bare) > textarea:not(:placeholder-shown)::placeholder {
                      color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-placeholder-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-placeholder-lightness-offset, 0)) * 1%),var(--s-color-current-placeholder-a, 1));
                    }
.s-label-responsive {
            text-align: initial;
        }
.s-label-responsive > span {
                width: clamp(100px, 50%, 50%);
            }
.s-label-responsive > input:not([type="radio"][type="checkbox"]),
            .s-label-responsive > textarea,
            .s-label-responsive > div {
                width: clamp(250px, 50%, 50%);
            }
@media (max-width: 639px) {
.s-label-responsive {width: 100%;
          font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
          display: flex;
            }

          .s-label-responsive > span {
            order: -1;
            cursor: pointer;
          }

          .s-label-responsive[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
          }
        
        .s-label-responsive[disabled]:hover, .s-label-responsive[disabled]:focus, .s-label-responsive[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }

        .s-label-responsive[disabled], .s-label-responsive[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }

          .s-label-responsive {

    

                  display: flex;
                  justify-content: space-between;
                  align-items: initial !important;
                  gap: calc(var(--s-margin-default, 1rem) * 0.75);
                  flex-direction: column;
            }

                  .s-label-responsive input:not([type="checkbox"]):not([type="radio"]),
                  .s-label-responsive select,
                  .s-label-responsive textarea {
                    width: 100%;
                  }

                .s-label-responsive > span,
                .s-label-responsive > input:not([type="radio"][type="checkbox"]),
                .s-label-responsive > textarea,
                .s-label-responsive > div {
                    width: 100%;
                }

                .s-label-responsive:not(.s-label-float) > span {
                    padding-block-start: 0;
                }
}
/**
        * @name          List
        * @namespace          sugar.style.ui.list
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/lists
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply list lnfs to any ul, ol, dl, etc...
        * 
        * @feature          Support for vertical rhythm through the `s-rhythm:vertical` class
        * @feature          Support for text formatting through the `s-format:text` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.list.classes;
        * 
        * .my-list {
        *   @sugar.ui.list;
        * }
        * 
         * @cssClass     s-list           Apply the dl list lnf
 * @cssClass     s-list:ul           Apply the ul list lnf
 * @cssClass     s-list:ol           Apply the ol list lnf
 * @cssClass     s-list:icon           Apply the icon list lnf
        * 
         * @example        html       dl lnf <span class="s-badge:outline s-scale:05">default</span>
            *   <ul class="s-list:dl ">
            *     <li>Regional Directives Specialist Darlene Veum</li>
            *     <li>Legacy Research Associate Edna Green</li>
            *     <li>Dynamic Usability Executive Jennie Cruickshank</li>
            *   </ul>
            * 
 * @example        html       ul lnf 
            *   <ul class="s-list:ul ">
            *     <li>Future Functionality Architect Mrs. Eula O'Kon</li>
            *     <li>Chief Web Officer Mrs. Lena Bruen</li>
            *     <li>Dynamic Integration Developer Dr. Elena Orn</li>
            *   </ul>
            * 
 * @example        html       ol lnf 
            *   <ul class="s-list:ol s-color:accent s-scale:15">
            *     <li>Legacy Identity Director Ellis Kuhic</li>
            *     <li>Investor Configuration Developer Vernon Mueller</li>
            *     <li>Investor Creative Producer Velma Wilkinson II</li>
            *   </ul>
            * 
 * @example        html       icon lnf 
            *   <ul class="s-list:icon ">
            *     <li><i class="s-icon:user"></i>Principal Program Designer Myrtle Rosenbaum</li>
            *     <li><i class="s-icon:heart s-color:accent"></i>Legacy Infrastructure Assistant Jimmy Weber</li>
            *     <li><i class="s-icon:fire s-color:error"></i>Senior Paradigm Producer Bradford Hackett</li>
            *   </ul>
            * 
        *
        * @example        html          RTL Support
        * <div dir="rtl">
        *   <ul class="s-list:ul s-color:accent s-mbe:30">
        *     <li>Chief Security Executive Kerry Schuster</li>
        *     <li>Human Division Representative Rochelle Greenholt</li>
        *   </ul>
        *   <ul class="s-list:ol s-color:accent s-mbe:30">
        *     <li>Central Accounts Agent Mr. Lynn Bins</li>
        *     <li>Dynamic Accounts Representative Miss Maureen Schmitt</li>
        *   </ul>
        *   <ul class="s-list:icon s-color:accent s-mbe:30">
        *     <li><i class="s-icon:user"></i> Dynamic Directives Assistant Alfred Bashirian</li>
        *     <li><i class="s-icon:heart s-color:error"></i> Dynamic Paradigm Orchestrator Benny Ryan</li>
        *   </ul>
        * </div>
        * 
        * @example          html         Colors (none-exhaustive)
        *   <ul class="s-list:ol s-color:accent">
        *     <li>Customer Quality Director Dr. Monica Wiegand</li>
        *     <li class="s-color:complementary">Senior Applications Analyst Miss Noah Nader</li>
        *     <li class="s-color:error">Human Usability Supervisor Bob Schroeder</li>
        *   </ul>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-list {position: relative;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        }
.s-list > * {
            display: block !important;
            padding-inline-start: 1em;
            margin-bottom: 0.3em;
            margin-top: 0.3em;
            line-height: 1.8;
        }
.s-list:not(.s-bare) > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list:not(.s-bare) > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list:not(.s-bare) > *:before, .s-list:not(.s-bare)[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list:not(.s-bare) > * {
                    }
.s-list-ul:not(.s-bare) > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list-ul:not(.s-bare) > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list-ul:not(.s-bare) > *:before, .s-list-ul:not(.s-bare)[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list-ul:not(.s-bare) > * {
                    }
.s-list-ol:not(.s-bare) > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list-ol:not(.s-bare) > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list-ol:not(.s-bare) > *:before, .s-list-ol:not(.s-bare)[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list-ol:not(.s-bare) > * {
                    }
.s-list-icon:not(.s-bare) > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list-icon:not(.s-bare) > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list-icon:not(.s-bare) > *:before, .s-list-icon:not(.s-bare)[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list-icon:not(.s-bare) > * {
                    }
.s-list-ul {position: relative;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
      }
.s-list-ul > * {
            display: block !important;
            padding-inline-start: 1em;
            margin-bottom: 0.3em;
            margin-top: 0.3em;
            line-height: 1.8;
        }
.s-list-ul > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list-ul > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list-ul > *:before, .s-list-ul[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list-ul > *:before {
                            content: "-";
                            margin-top: 0.25em;
                            font-size: 0.7em;
                        }
.s-list-icon {position: relative;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
      }
.s-list-icon > * {
            display: block !important;
            padding-inline-start: 1em;
            margin-bottom: 0.3em;
            margin-top: 0.3em;
            line-height: 1.8;
        }
.s-list-icon > * > i:first-child {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list-icon > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list-icon > * > i:first-child, .s-list-icon[dir="rtl"] > * > i:first-child {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list-icon > * {
                        padding-inline-start: 1.5em;
                    }
.s-list-icon > *:before {
                            content: ' ' !important;
                        }
.s-list-icon > * > i:first-child {
                            margin-top: 0.55em;
                            font-size: 0.8em;
                        }
.s-list-ol {position: relative;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));

        counter-reset: s-ol-list;
      }
.s-list-ol > * {
            display: block !important;
            padding-inline-start: 1em;
            margin-bottom: 0.3em;
            margin-top: 0.3em;
            line-height: 1.8;
        }
.s-list-ol > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list-ol > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list-ol > *:before, .s-list-ol[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list-ol > * {
                        counter-increment: s-ol-list;
                    }
.s-list-ol > *:before {
                            content: counter(s-ol-list);
                            margin-top: 0.25em;
                            font-size: 0.7em;
                        }
.s-list-dl {position: relative;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
      }
.s-list-dl > * {
            display: block !important;
            padding-inline-start: 1em;
            margin-bottom: 0.3em;
            margin-top: 0.3em;
            line-height: 1.8;
        }
.s-list-dl > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-list-dl > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-list-dl > *:before, .s-list-dl[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-list-dl > * {
                    }
.s-format-text ul:not(.s-format-none ul), .preview .s-format-text ul {position: relative;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                }
.s-format-text ul:not(.s-format-none ul) > *, .preview .s-format-text ul > * {
            display: block !important;
            padding-inline-start: 1em;
            margin-bottom: 0.3em;
            margin-top: 0.3em;
            line-height: 1.8;
        }
.s-format-text ul:not(.s-format-none ul) > *:before, .preview .s-format-text ul > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-format-text ul:not(.s-format-none ul) > * > *:not(i), .preview .s-format-text ul > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-format-text ul:not(.s-format-none ul) > *:before, .s-format-text ul:not(.s-format-none ul)[dir="rtl"] > *:before, [dir="rtl"] .preview .s-format-text ul > *:before, .preview .s-format-text ul[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-format-text ul:not(.s-format-none ul) > *:before, .preview .s-format-text ul > *:before {
                            content: "-";
                            margin-top: 0.25em;
                            font-size: 0.7em;
                        }
.s-format-text ol:not(.s-format-none ol), .preview .s-format-text ol {position: relative;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));

        counter-reset: s-ol-list;
                }
.s-format-text ol:not(.s-format-none ol) > *, .preview .s-format-text ol > * {
            display: block !important;
            padding-inline-start: 1em;
            margin-bottom: 0.3em;
            margin-top: 0.3em;
            line-height: 1.8;
        }
.s-format-text ol:not(.s-format-none ol) > *:before, .preview .s-format-text ol > *:before {
                    display: inline-block;
                    position: absolute;
                    left: 0.5em;
                    transform: translateX(-50%);
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                }
.s-format-text ol:not(.s-format-none ol) > * > *:not(i), .preview .s-format-text ol > * > *:not(i) {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                }
[dir="rtl"] .s-format-text ol:not(.s-format-none ol) > *:before, .s-format-text ol:not(.s-format-none ol)[dir="rtl"] > *:before, [dir="rtl"] .preview .s-format-text ol > *:before, .preview .s-format-text ol[dir="rtl"] > *:before {
                    left: auto;
                    right: 0;
                    transform: none;
                }
.s-format-text ol:not(.s-format-none ol) > *, .preview .s-format-text ol > * {
                        counter-increment: s-ol-list;
                    }
.s-format-text ol:not(.s-format-none ol) > *:before, .preview .s-format-text ol > *:before {
                            content: counter(s-ol-list);
                            margin-top: 0.25em;
                            font-size: 0.7em;
                        }
.s-rhythm-vertical > ul,.s-rhythm-vertical >  .s-list-ul,.s-rhythm-vertical > 
                ol,.s-rhythm-vertical >  .s-list-ol {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 5);
                }
/**
        * @name          Loader
        * @namespace          sugar.style.ui.loader
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/loaders
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply loader styles like "spinner", and more to come...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.loader.classes;
        * 
        * .my-loader {
        *   @sugar.ui.loader;
        * }
        * 
        
            * @cssClass         s-loader:spinner            Display a spinner loader
        

            * @cssClass         s-loader:round            Display a round loader
        

            * @cssClass         s-loader:drop            Display a drop loader
        

            * @cssClass         s-loader:square-dots            Display a square-dots loader
        
        * 
        
            * @example        html      spinner loader
            *   <div class="s-grid:5">
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:spinner s-scale:20"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:spinner s-scale:20 s-color:accent"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:spinner s-scale:20 s-color:complementary"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:spinner s-scale:20 s-color:info"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:spinner s-scale:20 s-color:error"></div>
            *       </div>
            *   </div>
        

            * @example        html      round loader
            *   <div class="s-grid:5">
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:round s-scale:20"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:round s-scale:20 s-color:accent"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:round s-scale:20 s-color:complementary"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:round s-scale:20 s-color:info"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:round s-scale:20 s-color:error"></div>
            *       </div>
            *   </div>
        

            * @example        html      drop loader
            *   <div class="s-grid:5">
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:drop s-scale:20"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:drop s-scale:20 s-color:accent"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:drop s-scale:20 s-color:complementary"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:drop s-scale:20 s-color:info"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:drop s-scale:20 s-color:error"></div>
            *       </div>
            *   </div>
        

            * @example        html      square-dots loader
            *   <div class="s-grid:5">
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:square-dots s-scale:20"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:square-dots s-scale:20 s-color:accent"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:square-dots s-scale:20 s-color:complementary"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:square-dots s-scale:20 s-color:info"></div>
            *       </div>
            *       <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
            *           <div class="s-loader:square-dots s-scale:20 s-color:error"></div>
            *       </div>
            *   </div>
        
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-loader-spinner {display: inline-block;
    pointer-events: none;
    text-indent: -9999em;
    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid currentColor;
    border-bottom: 0.3em solid currentColor;
    border-left: 0.3em solid rgba(0,0,0,0);
    border-radius: 50%;
    width: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
    height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
    animation: s-loader-spinner 1s linear infinite;
            }
@keyframes s-loader-spinner {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
.s-wireframe .s-loader-spinner {
            border-color: rgba(0,0,0,.5);
            border-bottom-color: rgba(0, 0, 0, 0);
}
.s-loader-round {pointer-events: none;
    display: inline-block;
    border-radius: 50%;
    background: currentColor;
    width: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
    height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
    animation: s-loader-round 1s linear infinite;
            }
@keyframes s-loader-round {
       0%, 100% {
            animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
        }
        0% {
            transform: rotateY(0deg);
        }
        50% {
            transform: rotateY(900deg);
            animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
        }
        100% {
            transform: rotateY(1800deg);
        }
    }
.s-wireframe .s-loader-round {
           background: rgba(0,0,0,.5);
}
.s-loader-drop {position: relative;
    display: inline-block;
    pointer-events: none;
    width: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
    height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
            }
.s-loader-drop:before,
    .s-loader-drop:after {
        content: '';
        display: block;
        position: absolute;
        top: 50%; left: 50%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
        border: calc(0.1em * var(--s-scale, 1) * var(--s-scale-global, 1)) solid currentColor;
        border-radius: 50%;
        width: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1)); height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
    }
.s-loader-drop:before {
        animation: s-loader-drop 1s linear infinite;
    }
.s-loader-drop:after {
        animation: s-loader-drop 1s linear 0.7s infinite;
    }
@keyframes s-loader-drop {
        from {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0);
        }
        to {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1);
        }
    }
.s-wireframe .s-loader-drop:before,
            .s-wireframe .s-loader-drop:after {
                border-color: rgba(0,0,0,.5);
            }
.s-loader-square-dots {display: inline-block;
    position: relative;
    pointer-events: none;
    overflow: hidden;
    height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
    width: calc(1.2ch * var(--s-scale, 1) * var(--s-scale-global, 1));
    text-rendering: geometricPrecision;
            }
.s-loader-square-dots:before {
        font-size: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
        position: absolute;
        top: 0;
        left: calc(-0.225ch);
        white-space: nowrap;
        color: currentColor;
        display: block;
        content: "⠁⠈⠀⠀⠀⠠⠄⠂";
        z-index: 1;
        text-indent: 0;
        animation: s-loader-square-dots-s-2cdfd82b-abb3-475f-9a8a-0bc6e8c745bf 1s steps(8) infinite;
    }
.s-loader-square-dots:after {
        font-size: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: calc(0.59ch);
        color: currentColor;
        content: "⠀⠀⠁⠂⠄⠀⠀⠀";
        display: block;
        text-indent: 0;
        -webkit-clip-path: polygon(0 0, 1ch 0, 1ch 100%, 0 100%);
                clip-path: polygon(0 0, 1ch 0, 1ch 100%, 0 100%);
        animation: s-loader-square-dots-s-2cdfd82b-abb3-475f-9a8a-0bc6e8c745bf 1s steps(8) infinite;
    }
@keyframes s-loader-square-dots-s-2cdfd82b-abb3-475f-9a8a-0bc6e8c745bf {
        to {
            text-indent: -9.8ch;
        }
    }
.s-wireframe .s-loader-square-dots {
       color: rgba(0,0,0,.5);
}
.s-wireframe .s-loader-square-dots:before,
       .s-wireframe .s-loader-square-dots:after {
        color: rgba(0,0,0,.5);
       }
[theme$="dark"] .s-wireframe .s-loader-square-dots, .s-wireframe .s-loader-square-dots[theme$="dark"] {
            color: rgba(255,255,255,.5);
}
[theme$="dark"] .s-wireframe .s-loader-square-dots:before,
        [theme$="dark"] .s-wireframe .s-loader-square-dots:after,
        .s-wireframe .s-loader-square-dots[theme$="dark"]:before,
        .s-wireframe .s-loader-square-dots[theme$="dark"]:after {
            color: rgba(255,255,255,.5);
        }
/**
        * @name          Media
        * @namespace          sugar.style.ui.media
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/media
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply some media style around any image.
        * 
        * @support      chromium
        * @support      firefox
        * @support      safari
        * @support      edge
        * 
        * @install          css
        * \@sugar.ui.media.classes;
        * 
        * .my-media {
        *   @sugar.ui.media;
        * }
        * 
        * @cssClass             s-media                Apply the media style
        * @cssClass             s-media-container       Apply on the HTMLElement that contains a media
        * 
        * @example        html         Default
        * <figure class="s-media-container">
        *   <img class="s-media" src="https://picsum.photos/1600/900?v=23488" />
        * </figure>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-wireframe .s-media {
                opacity: 0;
                pointer-events: none;
                width: 100%;
}
.s-wireframe .s-media-container {position: relative;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 50%;background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-media-container, .s-wireframe .s-media-container[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-media-container > * {
            display: block !important;
        }
.s-wireframe .s-media-container:after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;border: 1px solid rgba(0,0,0,0.1);
        }
[theme$="dark"] .s-wireframe .s-media-container:after, .s-wireframe .s-media-container:after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-media-container:after {border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
}
.s-wireframe .s-media-container {

    

                background-image: url("data:image/svg+xml,%3Csvg width='257' height='226' viewBox='0 0 257 226' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M65.8381 57H210.701L201.063 22.9177C200.462 20.7919 198.251 19.556 196.126 20.1571L65.8381 57ZM231.485 57L220.308 17.4755C216.702 4.72081 203.438 -2.69502 190.683 0.911767L17.4755 49.8918C4.72081 53.4986 -2.69502 66.7621 0.911766 79.5168L29 178.845V202C29 215.255 39.7452 226 53 226H233C246.255 226 257 215.255 257 202V81C257 67.7452 246.255 57 233 57H231.485ZM29 105.346V81C29 75.2817 30.9999 70.0304 34.3384 65.9075L22.9177 69.1371C20.7919 69.7382 19.556 71.9488 20.1571 74.0746L29 105.346ZM53 77H233C235.209 77 237 78.7909 237 81V202C237 204.209 235.209 206 233 206H53C50.7909 206 49 204.209 49 202V81C49 78.7909 50.7909 77 53 77Z' fill='%23E7E7E7'/%3E%3Cpath d='M205.607 183.007L86.9502 182.552C82.8292 182.536 80.4956 177.821 82.9821 174.535L125.089 118.882C126.926 116.454 130.489 116.218 132.63 118.383L154.551 140.539C156.537 142.547 159.79 142.512 161.733 140.464L168.456 133.377C170.531 131.19 174.056 131.323 175.96 133.661L209.503 174.85C212.169 178.123 209.829 183.023 205.607 183.007Z' fill='%23E7E7E7'/%3E%3Ccircle cx='202.073' cy='108.213' r='14' fill='%23E7E7E7'/%3E%3C/svg%3E%0A");
}
.s-wireframe .s-media-container:has(.s-media-map) {position: relative;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 50%;background-color: #ffffff;
                }
[theme$="dark"] .s-wireframe .s-media-container:has(.s-media-map), .s-wireframe .s-media-container:has(.s-media-map)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-media-container:has(.s-media-map) > * {
            display: block !important;
        }
.s-wireframe .s-media-container:has(.s-media-map):after {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;border: 1px solid rgba(0,0,0,0.1);
        }
[theme$="dark"] .s-wireframe .s-media-container:has(.s-media-map):after, .s-wireframe .s-media-container:has(.s-media-map):after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-media-container:has(.s-media-map):after {border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
}
.s-wireframe .s-media-container:has(.s-media-map) {

    

                background-image: url("data:image/svg+xml,%3Csvg width='800' height='709' viewBox='0 0 800 709' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M382.26 454.668C387.332 459.129 393.665 461.365 400.003 461.365C406.341 461.365 412.676 459.129 417.745 454.668C424.17 449.009 575.028 314.544 575.028 175.09C575.028 78.5457 496.515 0 400.005 0C303.493 0 224.977 78.5457 224.977 175.09C224.972 314.544 375.835 449.009 382.26 454.668ZM400.003 129.342C425.059 129.342 445.376 149.819 445.376 175.09C445.376 200.359 425.059 220.838 400.003 220.838C374.939 220.838 354.623 200.356 354.623 175.09C354.623 149.819 374.939 129.342 400.003 129.342Z' fill='%23E7E7E7'/%3E%3Cpath d='M736.316 454.59L716.041 383.541C712.75 372.009 702.215 364.061 690.228 364.061H545.53C540.299 371.837 534.78 379.643 528.943 387.492C488.385 441.984 447.154 478.843 442.583 482.873C430.812 493.238 415.693 498.946 400.003 498.946C384.323 498.946 369.204 493.243 357.416 482.868C352.851 478.843 311.614 441.979 271.059 387.492C265.222 379.643 259.703 371.834 254.472 364.061H109.771C97.7846 364.061 87.2499 372.009 83.9583 383.541L59.7939 468.217L599.941 567.153L736.316 454.59Z' fill='%23E7E7E7'/%3E%3Cpath d='M798.97 674.168L747.171 492.629L490.168 708.382H773.159C781.582 708.382 789.515 704.43 794.587 697.707C799.659 690.981 801.278 682.265 798.97 674.168Z' fill='%23E7E7E7'/%3E%3Cpath d='M131.428 519.547L49.4342 504.527L1.02995 674.168C-1.27848 682.265 0.340384 690.982 5.41515 697.705C10.4872 704.428 18.4199 708.38 26.8428 708.38H131.428V519.547Z' fill='%23E7E7E7'/%3E%3Cpath d='M169.012 526.434V708.379H431.712L562.578 598.52L169.012 526.434Z' fill='%23E7E7E7'/%3E%3C/svg%3E%0A");
}
.s-media:not(.s-bare) {
        }
/**
        * @name          Radio
        * @namespace          sugar.style.ui.radio
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/forms/radio
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice radio in your forms
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.radio.classes;
        * 
        * .my-radio {
        *   @sugar.ui.radio;
        * }
        * 
         * @cssClass     s-radio           Apply the solid radio lnf
        * 
         * @example        html       solid lnf
            *   <label class="s-mbe:30 s-label">
            *     <span>Chief Usability Strategist Calvin Harber</span>
            *     <input type="radio" checked class="s-radio" name="radio-lnf-solid" value="hello 1" checked />
            *   </label>
            *   <label class="s-mbe:30 s-label">
            *     <span>I'm disabled</span>
            *     <input type="radio" disabled class="s-radio" name="radio-lnf-solid" value="hello 3" />
            *   </label>
            * 
        *
        * @example        html          Shapes
        *   <label class="s-mbe:30 s-label">
        *     <span>District Infrastructure Representative Francisco Robel</span>
        *     <input type="radio" checked class="s-radio s-shape:default" name="radio-style-color" value="hello 1" checked />
        * </label>
        * <label class="s-mbe:30 s-label">
        *     <span>Lead Factors Architect Joanna O'Conner V</span>
        *     <input type="radio" checked class="s-radio s-shape:square" name="radio-style-color" value="hello 1" checked />
        * </label>
        * <label class="s-mbe:30 s-label">
        *     <span>Senior Implementation Technician Wilbur Abernathy</span>
        *     <input type="radio" checked class="s-radio s-shape:pill" name="radio-style-color" value="hello 1" checked />
        * </label>
        * 
        * @example        html          Colors (none-exhaustive)
        *   <label class="s-mbe:30 s-label">
        *     <span>Dynamic Operations Representative Levi Balistreri</span>
        *     <input type="radio" checked class="s-radio" name="radio-style-color" value="hello 1" checked />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>Legacy Factors Representative Randolph Hudson DDS</span>
        *     <input type="radio" class="s-radio s-color:accent" name="radio-style-color" value="hello 2" />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>Forward Operations Producer Tom Pouros</span>
        *     <input type="radio" class="s-radio s-color:complementary" name="radio-style-color" value="hello 3" />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>I'm disabled</span>
        *     <input type="radio" disabled class="s-radio s-color:error" name="radio-style-color" value="hello 4" />
        *   </label>
        * 
        * @example        html          RTL
        * <div dir="rtl">
        *   <label class="s-mbe:30 s-label">
        *     <span>Regional Brand Supervisor Edmund Feest</span>
        *     <input type="radio" checked class="s-radio s-color:accent" name="radio-style-ltr" value="hello 1" checked />
        *   </label>
        * </div>
        * 
        * @example        html          Scales
        *   <label class="s-mbe:30 s-label s-scale:07">
        *     <span>National Program Representative Elisa Casper</span>
        *     <input type="radio" checked class="s-radio s-color:accent" name="radio-style-scale" value="hello 1" checked />
        *   </label>
        *   <label class="s-mbe:30 s-label">
        *     <span>District Creative Architect Mary Collier</span>
        *     <input type="radio" class="s-radio s-color:accent" name="radio-style-scale" value="hello 2" />
        *   </label>
        *   <label class="s-mbe:30 s-label s-scale:13">
        *     <span>Dynamic Implementation Engineer Roy Dickinson</span>
        *     <input type="radio" class="s-radio s-color:accent" name="radio-style-scale" value="hello 3" />
        *   </label>
        *   <label class="s-mbe:30 s-label s-scale:16">
        *     <span>Principal Research Strategist Kimberly Windler</span>
        *     <input type="radio" class="s-radio s-color:accent" name="radio-style-scale" value="hello 3" />
        *   </label>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-radio {appearance: none !important;
                -moz-appearance: none !important;
                -webkit-appearance: none !important;
                position: relative;
                width: 1.4em;
                height: 1.4em;
                font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
                margin-block: 0.7em 0.9em;
            }
.s-radio:disabled {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
                }
.s-radio:disabled:hover, .s-radio:disabled:focus, .s-radio:disabled:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-radio:disabled, .s-radio:disabled * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-radio:not(.s-bare) {transition: var(--s-ui-form-transition, 0);
                    border: var(--s-ui-default-border-width, 1px) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                    background-color: transparent;
                    transition: var(--s-ui-form-transition, 0);
                    box-shadow: 0 0 0 0 hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
.s-radio:not(.s-bare).s-shape {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                    }
.s-radio:not(.s-bare):not(.s-shape) {
                        border-radius: 999px;
                    }
.s-radio:not(.s-bare):after {
                        content: '';
                        position: absolute;
                        top: 50%; left: 50%;
                        width: 0.4em; height: 0.4em;
                        transform: translate(-50%, -50%);
                        background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                        opacity: 0;
                        transition: var(--s-ui-form-transition, 0);
                    }
label:hover > .s-radio:not(.s-bare):not(:disabled):after,
                    .s-radio:not(.s-bare):hover:not(:disabled):after {
                        opacity: 0.2;
                    }
.s-radio:not(.s-bare):checked:not(:disabled):after {
                        opacity: 1 !important;
                    }
.s-radio:not(.s-bare):focus:not(:hover):not(:active):not(:disabled) {
                        box-shadow: 0 0 0 var(--s-ui-outline-border-width, 10px) hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3);
                    }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]), .preview .s-format-text input[type="radio"] {appearance: none !important;
                -moz-appearance: none !important;
                -webkit-appearance: none !important;
                position: relative;
                width: 1.4em;
                height: 1.4em;
                font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
                margin-block: 0.7em 0.9em;
                }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):disabled, .preview .s-format-text input[type="radio"]:disabled {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
                }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):disabled:hover, .s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):disabled:focus, .s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):disabled:active, .preview .s-format-text input[type="radio"]:disabled:hover, .preview .s-format-text input[type="radio"]:disabled:focus, .preview .s-format-text input[type="radio"]:disabled:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):disabled, .s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):disabled *, .preview .s-format-text input[type="radio"]:disabled, .preview .s-format-text input[type="radio"]:disabled * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]), .preview .s-format-text input[type="radio"] {
            

                
                    transition: var(--s-ui-form-transition, 0);
                    border: var(--s-ui-default-border-width, 1px) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                    background-color: transparent;
                    transition: var(--s-ui-form-transition, 0);
                    box-shadow: 0 0 0 0 hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
}
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]).s-shape, .preview .s-format-text input[type="radio"].s-shape {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                    }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):not(.s-shape), .preview .s-format-text input[type="radio"]:not(.s-shape) {
                        border-radius: 999px;
                    }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):after, .preview .s-format-text input[type="radio"]:after {
                        content: '';
                        position: absolute;
                        top: 50%; left: 50%;
                        width: 0.4em; height: 0.4em;
                        transform: translate(-50%, -50%);
                        background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
                        opacity: 0;
                        transition: var(--s-ui-form-transition, 0);
                    }
label:hover > .s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):not(:disabled):after,
                    .s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):hover:not(:disabled):after,
                    label:hover > .preview .s-format-text input[type="radio"]:not(:disabled):after,
                    .preview .s-format-text input[type="radio"]:hover:not(:disabled):after {
                        opacity: 0.2;
                    }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):checked:not(:disabled):after, .preview .s-format-text input[type="radio"]:checked:not(:disabled):after {
                        opacity: 1 !important;
                    }
.s-format-text input[type="radio"]:not(.s-format-none input[type="radio"]):focus:not(:hover):not(:active):not(:disabled), .preview .s-format-text input[type="radio"]:focus:not(:hover):not(:active):not(:disabled) {
                        box-shadow: 0 0 0 var(--s-ui-outline-border-width, 10px) hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3);
                    }
.s-rhythm-vertical > input[type="radio"],.s-rhythm-vertical >  .s-radio {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 2);
                }
/**
        * @name          Range 
        * @namespace          sugar.style.ui.range
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/forms/range
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice radio in your forms
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.range.classes;
        * 
        * .my-range {
        *   @sugar.ui.range;
        * }
        * 
         * @cssClass     s-range           Apply the solid range lnf
        * 
         * @example        html       solid
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>Human Creative Administrator Carroll Johns</span>
            *     <input type="range" class="s-range" min="0" max="100" step="10" />
            *   </label>
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>Dynamic Identity Liaison Melinda Wilderman</span>
            *     <input type="range" class="s-range s-color:accent" min="0" max="100" step="10" />
            *   </label>
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>Investor Functionality Specialist Jeannette Marquardt</span>
            *     <input type="range" class="s-range s-color:complementary" min="0" max="100" step="10" />
            *   </label>
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>I'm disabled</span>
            *     <input type="range" disabled class="s-range s-color:complementary" min="0" max="100" step="10" />
            *   </label>
            * 
        * 
        * @example        html          Shapes
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-shape:default" min="0" max="100" step="10" />
        *     <span>Legacy Implementation Orchestrator Dewey Williamson</span>
        * </label>
        * <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-shape:square" min="0" max="100" step="10" />
        *     <span>Corporate Creative Associate Dr. Christy Gerhold</span>
        * </label>
        * <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-shape:pill" min="0" max="100" step="10" />
        *     <span>Legacy Response Developer Irene Douglas</span>
        * </label>
        * 
        * @example        html          Colors (none-exclusive)
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range" min="0" max="100" step="10" />
        *     <span>Direct Markets Engineer Adrienne Shanahan</span>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-color:accent" min="0" max="100" step="10" />
        *     <span>Investor Usability Designer Kristin Von</span>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-color:complementary" min="0" max="100" step="10" />
        *     <span>Customer Creative Specialist Marjorie Rolfson</span>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-color:error" disabled min="0" max="100" step="10" />
        *     <span>Human Marketing Representative Kelvin Ferry IV</span>
        *   </label>
        * 
        * @example      html        RTL
        * <div dir="rtl">
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Legacy Solutions Officer Lori Swaniawski</span>
        *     <input type="range" class="s-range" min="0" max="100" step="10" />
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>National Response Director Betsy Grant</span>
        *     <input type="range" class="s-range s-color:accent" min="0" max="100" step="10" />
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Global Solutions Facilitator Sonya Bednar</span>
        *     <input type="range" class="s-range s-color:complementary" min="0" max="100" step="10" />
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Senior Mobility Associate Kent Herman</span>
        *     <input type="range" class="s-range s-color:error" disabled min="0" max="100" step="10" />
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     I'm disabled
        *     <input type="range" disabled class="s-range s-color:error" disabled min="0" max="100" step="10" />
        *   </label>
        * </div>
        *
        * @example        html          Scales
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-scale:08" min="0" max="100" step="10" />
        *     <span>Lead Paradigm Agent Malcolm Prohaska</span>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range" min="0" max="100" step="10" />
        *     <span>International Solutions Engineer Tony Runte</span>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-scale:12" min="0" max="100" step="10" />
        *     <span>District Implementation Developer Cassandra Weissnat</span>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <input type="range" class="s-range s-scale:14" min="0" max="100" step="10" />
        *     <span>District Web Facilitator Sidney Bergnaum</span>
        *   </label>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-range {--track-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-ui-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-ui-lightness-offset, 0)) * 1%),var(--s-color-main-ui-a, 1));
        --thumb-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));

        --focus-spread: var(--s-ui-outline-border-width, 10px);

        --thumb-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
        --thumb-height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
        --thumb-width: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
        --thumb-border-width: var(--s-ui-default-border-width, 1px);
        --thumb-border-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1));

        --track-width: 100%;
        --track-height: calc(0.5em * var(--s-scale, 1) * var(--s-scale-global, 1));
        --track-border-width: var(--s-ui-default-border-width, 1px);
        --track-border-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);

        --track-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
        --contrast: 5%;


            -webkit-appearance: none;
            background: transparent;

            margin-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * var(--s-ui-form-padding-block, 0.75));
        }
.s-range::-moz-focus-outer {
                border: 0;
            }
.s-range:focus {
                outline: 0;
            }
.s-range::-webkit-slider-runnable-track {
                
        height: var(--track-height);
        width: 100%;
        cursor: pointer;
    
            }
.s-range::-webkit-slider-thumb {
                
        box-sizing: border-box;
        height: var(--thumb-height);
        width: var(--thumb-width);
        cursor: pointer;
    
                -webkit-appearance: none;
                margin-top: calc( ((var(--track-border-width) * -1 * 2 + var(--track-height)) / 2 - var(--thumb-height) / 2));
            }
.s-range::-moz-range-track {
                
        height: var(--track-height);
        width: 100%;
        cursor: pointer;
    
                height: calc(var(--track-height) / 2);
            }
.s-range::-moz-range-thumb {
                
        box-sizing: border-box;
        height: var(--thumb-height);
        width: var(--thumb-width);
        cursor: pointer;
    
            }
.s-range::-ms-track {
                
        height: var(--track-height);
        width: 100%;
        cursor: pointer;
    
            }
.s-range::-ms-fill-lower {
            }
.s-range::-ms-fill-upper {
            }
.s-range::-ms-thumb {
                
        box-sizing: border-box;
        height: var(--thumb-height);
        width: var(--thumb-width);
        cursor: pointer;
    
                margin-top: calc(var(--.track-height) / 4);
            }
.s-range:disabled::-webkit-slider-thumb,
                .s-range:disabled::-moz-range-thumb,
                .s-range:disabled::-ms-thumb,
                .s-range:disabled::-webkit-slider-runnable-track,
                .s-range:disabled::-ms-fill-lower,
                .s-range:disabled::-ms-fill-upper {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
                }
.s-range:disabled::-webkit-slider-thumb:hover, .s-range:disabled::-webkit-slider-thumb:focus, .s-range:disabled::-webkit-slider-thumb:active, .s-range:disabled::-moz-range-thumb:hover, .s-range:disabled::-moz-range-thumb:focus, .s-range:disabled::-moz-range-thumb:active, .s-range:disabled::-ms-thumb:hover, .s-range:disabled::-ms-thumb:focus, .s-range:disabled::-ms-thumb:active, .s-range:disabled::-webkit-slider-runnable-track:hover, .s-range:disabled::-webkit-slider-runnable-track:focus, .s-range:disabled::-webkit-slider-runnable-track:active, .s-range:disabled::-ms-fill-lower:hover, .s-range:disabled::-ms-fill-lower:focus, .s-range:disabled::-ms-fill-lower:active, .s-range:disabled::-ms-fill-upper:hover, .s-range:disabled::-ms-fill-upper:focus, .s-range:disabled::-ms-fill-upper:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-range:disabled::-webkit-slider-thumb, .s-range:disabled::-webkit-slider-thumb *, .s-range:disabled::-moz-range-thumb, .s-range:disabled::-moz-range-thumb *, .s-range:disabled::-ms-thumb, .s-range:disabled::-ms-thumb *, .s-range:disabled::-webkit-slider-runnable-track, .s-range:disabled::-webkit-slider-runnable-track *, .s-range:disabled::-ms-fill-lower, .s-range:disabled::-ms-fill-lower *, .s-range:disabled::-ms-fill-upper, .s-range:disabled::-ms-fill-upper * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
                    user-select: none !important;
        }
.s-wireframe .s-range::-webkit-slider-runnable-track {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-webkit-slider-runnable-track, .s-wireframe .s-range::-webkit-slider-runnable-track[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-webkit-slider-runnable-track {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-webkit-slider-runnable-track, .s-wireframe .s-range::-webkit-slider-runnable-track[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range::-moz-range-track {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-moz-range-track, .s-wireframe .s-range::-moz-range-track[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-moz-range-track {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-moz-range-track, .s-wireframe .s-range::-moz-range-track[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range::-ms-track {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-ms-track, .s-wireframe .s-range::-ms-track[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-ms-track {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-ms-track, .s-wireframe .s-range::-ms-track[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range::-ms-fill-lower {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-ms-fill-lower, .s-wireframe .s-range::-ms-fill-lower[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-ms-fill-lower {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-ms-fill-lower, .s-wireframe .s-range::-ms-fill-lower[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range::-ms-fill-upper {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-ms-fill-upper, .s-wireframe .s-range::-ms-fill-upper[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-ms-fill-upper {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-ms-fill-upper, .s-wireframe .s-range::-ms-fill-upper[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range::-webkit-slider-thumb {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-webkit-slider-thumb, .s-wireframe .s-range::-webkit-slider-thumb[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-webkit-slider-thumb {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-webkit-slider-thumb, .s-wireframe .s-range::-webkit-slider-thumb[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range::-moz-range-thumb {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-moz-range-thumb, .s-wireframe .s-range::-moz-range-thumb[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-moz-range-thumb {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-moz-range-thumb, .s-wireframe .s-range::-moz-range-thumb[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range::-ms-thumb {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range::-ms-thumb, .s-wireframe .s-range::-ms-thumb[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range::-ms-thumb {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range::-ms-thumb, .s-wireframe .s-range::-ms-thumb[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-range:not(.s-bare) {--track-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-ui-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-ui-lightness-offset, 0)) * 1%),var(--s-color-main-ui-a, 1));
        --thumb-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));

        --focus-spread: var(--s-ui-outline-border-width, 10px);

        --thumb-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
        --thumb-height: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
        --thumb-width: calc(1em * var(--s-scale, 1) * var(--s-scale-global, 1));
        --thumb-border-width: var(--s-ui-default-border-width, 1px);
        --thumb-border-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1));

        --track-width: 100%;
        --track-height: calc(0.5em * var(--s-scale, 1) * var(--s-scale-global, 1));
        --track-border-width: var(--s-ui-default-border-width, 1px);
        --track-border-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);

        --track-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
        --contrast: 5%;
            }
.s-range:not(.s-bare):hover::-webkit-slider-runnable-track, .s-range:not(.s-bare):focus::-webkit-slider-runnable-track {
                    background: var(--track-color);
                    border: var(--thumb-border-width) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3);
                }
.s-range:not(.s-bare):hover::-moz-range-track, .s-range:not(.s-bare):focus::-moz-range-track {
                    background: var(--track-color);
                    border: var(--thumb-border-width) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3);
                }
.s-range:not(.s-bare):hover::-ms-track, .s-range:not(.s-bare):focus::-ms-track {
                    background: var(--track-color);
                    border: var(--thumb-border-width) solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3);
                }
.s-range:not(.s-bare):hover::-ms-fill-lower, .s-range:not(.s-bare):focus::-ms-fill-lower {
                    background: var(--track-color);
                }
.s-range:not(.s-bare):hover::-ms-fill-upper, .s-range:not(.s-bare):focus::-ms-fill-upper {
                    background: var(--track-color);
                }
.s-range:not(.s-bare):hover::-webkit-slider-thumb, .s-range:not(.s-bare):focus::-webkit-slider-thumb {
                     box-shadow: 0 0 0 var(--focus-spread) var(--thumb-border-color);
                }
.s-range:not(.s-bare):hover::-moz-range-thumb, .s-range:not(.s-bare):focus::-moz-range-thumb {
                     box-shadow: 0 0 0 var(--focus-spread) var(--thumb-border-color);
                }
.s-range:not(.s-bare):hover::-ms-thumb, .s-range:not(.s-bare):focus::-ms-thumb {
                     box-shadow: 0 0 0 var(--focus-spread) var(--thumb-border-color);
                }
.s-range:not(.s-bare)::-webkit-slider-thumb {
                
        background: var(--thumb-color);
        border: var(--thumb-border-width) solid var(--thumb-border-color);
        border-radius: var(--thumb-radius);
        box-shadow: 0 0 0 0 var(--thumb-border-color);
    
            }
.s-range:not(.s-bare)::-moz-range-thumb {
                
        background: var(--thumb-color);
        border: var(--thumb-border-width) solid var(--thumb-border-color);
        border-radius: var(--thumb-radius);
        box-shadow: 0 0 0 0 var(--thumb-border-color);
    
            }
.s-range:not(.s-bare)::-ms-thumb {
                
        background: var(--thumb-color);
        border: var(--thumb-border-width) solid var(--thumb-border-color);
        border-radius: var(--thumb-radius);
        box-shadow: 0 0 0 0 var(--thumb-border-color);
    
            }
.s-range:not(.s-bare)::-webkit-slider-runnable-track {
                
        -webkit-transition: var(--s-ui-form-transition, 0);
                
        transition: var(--s-ui-form-transition, 0);
    
                background: var(--track-color);
                border: var(--track-border-width) solid var(--track-border-color);
                border-radius: var(--track-radius);
            }
.s-range:not(.s-bare)::-moz-range-track {
                
        -moz-transition: var(--s-ui-form-transition, 0);
                
        transition: var(--s-ui-form-transition, 0);
    
                background: var(--track-color);
                border: var(--track-border-width) solid var(--track-border-color);
                border-radius: var(--track-radius);
            }
.s-range:not(.s-bare)::-ms-track {
                
        -ms-transition: var(--s-ui-form-transition, 0);
                
        transition: var(--s-ui-form-transition, 0);
    
                background: transparent;
                border-color: transparent;
                border-width: calc(var(--thumb-height) / 2) 0;
                color: transparent;
            }
.s-range:not(.s-bare)::-ms-fill-lower {
                background: var(--ie-bottom-track-color);
                border: var(--track-border-width) solid var(--track-border-color);
                border-radius: calc(var(--track-radius) * 2);
            }
.s-range:not(.s-bare)::-ms-fill-upper {
                background: var(--track-color);
                border: var(--track-border-width) solid var(--track-border-color);
                border-radius: calc(var(--track-radius) * 2);
            }
.s-wireframe .s-range:not(.s-bare)::-webkit-slider-runnable-track {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-webkit-slider-runnable-track, .s-wireframe .s-range:not(.s-bare)::-webkit-slider-runnable-track[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-webkit-slider-runnable-track {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-webkit-slider-runnable-track, .s-wireframe .s-range:not(.s-bare)::-webkit-slider-runnable-track[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range:not(.s-bare)::-moz-range-track {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-moz-range-track, .s-wireframe .s-range:not(.s-bare)::-moz-range-track[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-moz-range-track {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-moz-range-track, .s-wireframe .s-range:not(.s-bare)::-moz-range-track[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range:not(.s-bare)::-ms-track {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-track, .s-wireframe .s-range:not(.s-bare)::-ms-track[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-ms-track {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-track, .s-wireframe .s-range:not(.s-bare)::-ms-track[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range:not(.s-bare)::-ms-fill-lower {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-fill-lower, .s-wireframe .s-range:not(.s-bare)::-ms-fill-lower[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-ms-fill-lower {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-fill-lower, .s-wireframe .s-range:not(.s-bare)::-ms-fill-lower[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range:not(.s-bare)::-ms-fill-upper {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-fill-upper, .s-wireframe .s-range:not(.s-bare)::-ms-fill-upper[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-ms-fill-upper {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-fill-upper, .s-wireframe .s-range:not(.s-bare)::-ms-fill-upper[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range:not(.s-bare)::-webkit-slider-thumb {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-webkit-slider-thumb, .s-wireframe .s-range:not(.s-bare)::-webkit-slider-thumb[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-webkit-slider-thumb {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-webkit-slider-thumb, .s-wireframe .s-range:not(.s-bare)::-webkit-slider-thumb[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range:not(.s-bare)::-moz-range-thumb {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-moz-range-thumb, .s-wireframe .s-range:not(.s-bare)::-moz-range-thumb[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-moz-range-thumb {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-moz-range-thumb, .s-wireframe .s-range:not(.s-bare)::-moz-range-thumb[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-range:not(.s-bare)::-ms-thumb {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-thumb, .s-wireframe .s-range:not(.s-bare)::-ms-thumb[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-range:not(.s-bare)::-ms-thumb {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-range:not(.s-bare)::-ms-thumb, .s-wireframe .s-range:not(.s-bare)::-ms-thumb[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
/**
        * @name          Select
        * @namespace          sugar.style.ui.select
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/forms/select
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice select in your forms
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.select.classes;
        * 
        * .my-select {
        *   @sugar.ui.select;
        * }
        * 
         * @cssClass     s-select           Apply the solid select lnf
 * @cssClass     s-select:underline           Apply the underline select lnf
        * 
         * @example        html       solid lnf
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>Dynamic Quality Administrator Ignacio Olson PhD</span>
            *     <select class="s-select s-width:40" name="select-lnf-solid">
            *       <option value="value1">John Rath</option>
            *       <option value="value2">Wilson Bartoletti IV</option>
            *       <option value="value3">Marcella O'Connell</option>
            *     </select>
            *   </label>
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>I'm disabled</span>
            *     <select disabled class="s-select s-width:40" name="select-lnf-solid">
            *       <option value="value1">Kurt Luettgen</option>
            *       <option value="value2">Brendan Leuschke</option>
            *       <option value="value3">Darrin Prohaska</option>
            *     </select>
            *   </label>
            * 
 * @example        html       underline lnf
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>Principal Program Liaison Charlotte Ernser</span>
            *     <select class="s-select:underline s-width:40" name="select-lnf-underline">
            *       <option value="value1">Miss Charlie Quitzon</option>
            *       <option value="value2">Ernesto Reilly</option>
            *       <option value="value3">Brian Osinski V</option>
            *     </select>
            *   </label>
            *   <label class="s-mbe:30 s-label:responsive">
            *     <span>I'm disabled</span>
            *     <select disabled class="s-select:underline s-width:40" name="select-lnf-underline">
            *       <option value="value1">Sherman Macejkovic</option>
            *       <option value="value2">Dianna Williamson</option>
            *       <option value="value3">Duane Will</option>
            *     </select>
            *   </label>
            * 
        * 
        * @example      html            Shapes
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Chief Accounts Analyst Ricky Raynor</span>
        *     <select class="s-select s-shape:default s-width:40" name="select-color-accent">
        *       <option value="value1">Dianna Kuhlman</option>
        *       <option value="value2">Ms. Monique Turcotte</option>
        *       <option value="value3">Kyle Thompson</option>
        *     </select>
        * </label>
        * <label class="s-mbe:30 s-label:responsive">
        *     <span>Dynamic Directives Executive Lisa Schimmel</span>
        *     <select class="s-select s-shape:square s-width:40" name="select-color-accent">
        *       <option value="value1">Dr. Mario Shields</option>
        *       <option value="value2">Maggie Howell</option>
        *       <option value="value3">Brooke Borer</option>
        *     </select>
        * </label>
        * <label class="s-mbe:30 s-label:responsive">
        *     <span>Legacy Security Coordinator Roger Price MD</span>
        *     <select class="s-select s-shape:pill s-width:40" name="select-color-accent">
        *       <option value="value1">Lance Langosh</option>
        *       <option value="value2">Gary Bogan</option>
        *       <option value="value3">Vicki Oberbrunner</option>
        *     </select>
        * </label>
        * 
        * @example      html            Colors (none-exhaustive)
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Customer Directives Analyst Rufus Beahan</span>
        *     <select class="s-select s-width:40" name="select-color-accent">
        *       <option value="value1">Marta Hoeger</option>
        *       <option value="value2">Lindsey Kassulke</option>
        *       <option value="value3">Taylor Cole Jr.</option>
        *     </select>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>National Applications Assistant Laura Schoen Jr.</span>
        *     <select class="s-select s-color:accent s-width:40" name="select-color-complementary">
        *       <option value="value1">Ms. Hattie Torp</option>
        *       <option value="value2">Annette Jacobi</option>
        *       <option value="value3">Donald Abshire</option>
        *     </select>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Senior Brand Engineer Joyce Emard</span>
        *     <select class="s-select s-color:complementary s-width:40" name="select-color-error">
        *       <option value="value1">Mrs. Marc Prosacco</option>
        *       <option value="value2">Santos Wolff</option>
        *       <option value="value3">Carole Walter</option>
        *     </select>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Chief Research Producer Edmond Schaefer</span>
        *     <select class="s-select s-color:error s-width:40" name="select-color-error" disabled>
        *       <option value="value1">Lynn Leuschke</option>
        *       <option value="value2">Mrs. Donna Cartwright</option>
        *       <option value="value3">Laura Effertz</option>
        *     </select>
        *   </label>
        * 
        * @example      html            Multiple
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Direct Research Technician Rickey Schroeder IV</span>
        *     <select class="s-select s-color:accent s-width:40" multiple name="select-color-accent">
        *       <option value="value1">Nicolas Funk</option>
        *       <option value="value2">Doug Ondricka</option>
        *       <option value="value3">Daisy Tremblay</option>
        *     </select>
        *   </label>
        * 
        * @example          html            RTL
        * <div dir="rtl">
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Central Integration Consultant Karl Wintheiser</span>
        *     <select class="s-select s-color:accent s-width:40" name="select-color-accent">
        *       <option value="value1">Esther Osinski</option>
        *       <option value="value2">Natalie Volkman</option>
        *       <option value="value3">Tamara Kshlerin</option>
        *     </select>
        *   </label>
        * </div>
        * 
        * @example          html           Scales
        *   <label class="s-mbe:30 s-label:responsive s-scale:07">
        *     <span>Dynamic Directives Assistant Shelly Bernier</span>
        *     <select class="s-select s-color:accent s-width:40" name="select-color-accent">
        *       <option value="value1">Nathan Jacobi</option>
        *       <option value="value2">Edmond O'Reilly</option>
        *       <option value="value3">Ms. Brandi Rempel</option>
        *     </select>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive">
        *     <span>Chief Mobility Supervisor Miss Andy Ritchie</span>
        *     <select class="s-select s-color:accent s-width:40" name="select-color-accent">
        *       <option value="value1">Clarence Trantow</option>
        *       <option value="value2">Adrienne Collins</option>
        *       <option value="value3">Michelle Hermiston</option>
        *     </select>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive s-scale:13">
        *     <span>Corporate Factors Producer Salvador Cronin</span>
        *     <select class="s-select s-color:accent s-width:40" name="select-color-accent">
        *       <option value="value1">Bradley Weimann</option>
        *       <option value="value2">Lydia Abbott DVM</option>
        *       <option value="value3">Gene Stanton DVM</option>
        *     </select>
        *   </label>
        *   <label class="s-mbe:30 s-label:responsive s-scale:16">
        *     <span>Future Mobility Coordinator Ebony Luettgen</span>
        *     <select class="s-select s-color:accent s-width:40" name="select-color-accent">
        *       <option value="value1">Rosalie Purdy</option>
        *       <option value="value2">Brandon Rath</option>
        *       <option value="value3">Daisy Collins</option>
        *     </select>
        *   </label>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-select {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            display: inline-block;
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
                }
.s-wireframe .s-select {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-select, .s-wireframe .s-select[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-select {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-select, .s-wireframe .s-select[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-select {
            position: relative;
            -webkit-appearance: none;
            -moz-appearance: none;
                 appearance: none;
            line-height: 1;
            outline: 0;
}
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-select:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-select:not(.s-bare) {color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
            background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-ui-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-ui-lightness-offset, 0)) * 1%),var(--s-color-main-ui-a, 1));
            font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2) solid var(--s-ui-default-border-width, 1px);
            border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            transition: var(--s-ui-default-transition, 0);box-shadow: var(--s-depth-0, 0);
            cursor: auto !important;
}
.s-select:not(.s-bare)::-moz-placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-select:not(.s-bare)::placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-select:not(.s-bare)::-moz-selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-select:not(.s-bare)::selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-select:not(.s-bare):not(textarea) {
                line-height: 1;
            }
.s-select:not(.s-bare)[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
            }
.s-select:not(.s-bare)[disabled]:hover, .s-select:not(.s-bare)[disabled]:focus, .s-select:not(.s-bare)[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-select:not(.s-bare)[disabled], .s-select:not(.s-bare)[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-select:not(.s-bare):hover {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3) solid 1px;
}
.s-select:not(.s-bare):focus {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-select:not(.s-bare):active:not(:hover), .s-select:not(.s-bare).active, .s-select:not(.s-bare)[active] {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-wireframe .s-select:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-select:not(.s-bare), .s-wireframe .s-select:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-select:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-select:not(.s-bare), .s-wireframe .s-select:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-select:not(.s-bare) {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
            overflow: hidden;
}
.s-select:not(.s-bare).placeholder,
            .s-select:not(.s-bare):invalid {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),0.3);
            }
.s-select:not(.s-bare)[multiple] option:checked,
            .s-select:not(.s-bare)[multiple] option[selected] {
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.5);
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
            }
.s-select:not(.s-bare)[multiple]:focus option:checked,
            .s-select:not(.s-bare)[multiple]:focus option[selected] {
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-lightness-offset, 0)) * 1%),var(--s-color-current-ui-a, 1));
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
            }
.s-select:not(.s-bare):not([multiple]) {
                padding-inline-end: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1) + 1.5em);

                --padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);

                background-repeat: no-repeat;
                background-image: linear-gradient(45deg, transparent 50%, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) 50%), linear-gradient(135deg, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) 50%, transparent 50%);
                background-position: right calc(var(--padding-inline) + 5px) top 50%, right var(--padding-inline) top 50%;
                background-size: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)) calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)), calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)) calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
            }
[dir="rtl"] .s-select:not(.s-bare):not([multiple]),
                .s-select:not(.s-bare):not([multiple])[dir="rtl"] {
                    background-position: left var(--padding-inline) top 50%, left calc(var(--padding-inline) + calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1))) top 50%;
                }
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-select.s-select-underline:not(.s-bare):focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-select.s-select-underline:not(.s-bare) {color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
            background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-ui-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-ui-lightness-offset, 0)) * 1%),var(--s-color-main-ui-a, 1));
            font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2) solid var(--s-ui-default-border-width, 1px);
            border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            transition: var(--s-ui-default-transition, 0);box-shadow: var(--s-depth-0, 0);
            cursor: auto !important;
}
.s-select.s-select-underline:not(.s-bare)::-moz-placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-select.s-select-underline:not(.s-bare)::placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-select.s-select-underline:not(.s-bare)::-moz-selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-select.s-select-underline:not(.s-bare)::selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-select.s-select-underline:not(.s-bare):not(textarea) {
                line-height: 1;
            }
.s-select.s-select-underline:not(.s-bare)[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
            }
.s-select.s-select-underline:not(.s-bare)[disabled]:hover, .s-select.s-select-underline:not(.s-bare)[disabled]:focus, .s-select.s-select-underline:not(.s-bare)[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-select.s-select-underline:not(.s-bare)[disabled], .s-select.s-select-underline:not(.s-bare)[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-select.s-select-underline:not(.s-bare):hover {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3) solid 1px;
}
.s-select.s-select-underline:not(.s-bare):focus {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-select.s-select-underline:not(.s-bare):active:not(:hover), .s-select.s-select-underline:not(.s-bare).active, .s-select.s-select-underline:not(.s-bare)[active] {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-wireframe .s-select.s-select-underline:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-select.s-select-underline:not(.s-bare), .s-wireframe .s-select.s-select-underline:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-select.s-select-underline:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-select.s-select-underline:not(.s-bare), .s-wireframe .s-select.s-select-underline:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-select.s-select-underline:not(.s-bare) {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
            overflow: hidden;
}
.s-select.s-select-underline:not(.s-bare).placeholder,
            .s-select.s-select-underline:not(.s-bare):invalid {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),0.3);
            }
.s-select.s-select-underline:not(.s-bare)[multiple] option:checked,
            .s-select.s-select-underline:not(.s-bare)[multiple] option[selected] {
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.5);
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
            }
.s-select.s-select-underline:not(.s-bare)[multiple]:focus option:checked,
            .s-select.s-select-underline:not(.s-bare)[multiple]:focus option[selected] {
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-lightness-offset, 0)) * 1%),var(--s-color-current-ui-a, 1));
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
            }
.s-select.s-select-underline:not(.s-bare):not([multiple]) {
                padding-inline-end: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1) + 1.5em);

                --padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);

                background-repeat: no-repeat;
                background-image: linear-gradient(45deg, transparent 50%, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) 50%), linear-gradient(135deg, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) 50%, transparent 50%);
                background-position: right calc(var(--padding-inline) + 5px) top 50%, right var(--padding-inline) top 50%;
                background-size: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)) calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)), calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)) calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
            }
[dir="rtl"] .s-select.s-select-underline:not(.s-bare):not([multiple]),
                .s-select.s-select-underline:not(.s-bare):not([multiple])[dir="rtl"] {
                    background-position: left var(--padding-inline) top 50%, left calc(var(--padding-inline) + calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1))) top 50%;
                }
.s-select.s-select-underline:not(.s-bare) {

        

                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
                    border-top: none !important;
                    border-left: none !important;
                    border-right: none !important;
                    border-bottom: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3) solid 1px !important;
                    padding-inline: 1ch !important;
}
.s-select.s-select-underline:not(.s-bare):hover, .s-select.s-select-underline:not(.s-bare):focus {
                        border-bottom: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),1) solid 1px !important;
                        background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.1);
                    }
.s-format-text select:not(.s-format-none select), .preview .s-format-text select {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            display: inline-block;
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
                }
.s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .preview .s-format-text select {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .s-format-text select:not(.s-format-none select)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text select, .s-wireframe .preview .s-format-text select[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .preview .s-format-text select {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .s-format-text select:not(.s-format-none select)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text select, .s-wireframe .preview .s-format-text select[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-format-text select:not(.s-format-none select), .preview .s-format-text select {
            position: relative;
            -webkit-appearance: none;
            -moz-appearance: none;
                 appearance: none;
            line-height: 1;
            outline: 0;
}
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-format-text select:not(.s-format-none select):focus:not(:hover), .preview .s-format-text select:focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-format-text select:not(.s-format-none select), .preview .s-format-text select {color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
            background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-ui-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-ui-lightness-offset, 0)) * 1%),var(--s-color-main-ui-a, 1));
            font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2) solid var(--s-ui-default-border-width, 1px);
            border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            transition: var(--s-ui-default-transition, 0);box-shadow: var(--s-depth-0, 0);
            cursor: auto !important;
}
.s-format-text select:not(.s-format-none select)::-moz-placeholder, .preview .s-format-text select::-moz-placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-format-text select:not(.s-format-none select)::placeholder, .preview .s-format-text select::placeholder {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-placeholder-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-placeholder-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-placeholder-lightness-offset, 0)) * 1%),var(--s-color-main-placeholder-a, 1));
            }
.s-format-text select:not(.s-format-none select)::-moz-selection, .preview .s-format-text select::-moz-selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-format-text select:not(.s-format-none select)::selection, .preview .s-format-text select::selection {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-100-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-100-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-100-lightness-offset, 0)) * 1%),var(--s-color-current-100-a, 1));
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-format-text select:not(.s-format-none select):not(textarea), .preview .s-format-text select:not(textarea) {
                line-height: 1;
            }
.s-format-text select:not(.s-format-none select)[disabled], .preview .s-format-text select[disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
            }
.s-format-text select:not(.s-format-none select)[disabled]:hover, .s-format-text select:not(.s-format-none select)[disabled]:focus, .s-format-text select:not(.s-format-none select)[disabled]:active, .preview .s-format-text select[disabled]:hover, .preview .s-format-text select[disabled]:focus, .preview .s-format-text select[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-format-text select:not(.s-format-none select)[disabled], .s-format-text select:not(.s-format-none select)[disabled] *, .preview .s-format-text select[disabled], .preview .s-format-text select[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-format-text select:not(.s-format-none select):hover, .preview .s-format-text select:hover {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.3) solid 1px;
}
.s-format-text select:not(.s-format-none select):focus, .preview .s-format-text select:focus {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-format-text select:not(.s-format-none select):active:not(:hover), .s-format-text select:not(.s-format-none select).active, .s-format-text select:not(.s-format-none select)[active], .preview .s-format-text select:active:not(:hover), .preview .s-format-text select.active, .preview .s-format-text select[active] {
border: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.4) solid 1px;
}
.s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .preview .s-format-text select {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .s-format-text select:not(.s-format-none select)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text select, .s-wireframe .preview .s-format-text select[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .preview .s-format-text select {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-format-text select:not(.s-format-none select), .s-wireframe .s-format-text select:not(.s-format-none select)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text select, .s-wireframe .preview .s-format-text select[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-format-text select:not(.s-format-none select), .preview .s-format-text select {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
            overflow: hidden;
}
.s-format-text select:not(.s-format-none select).placeholder,
            .s-format-text select:not(.s-format-none select):invalid,
            .preview .s-format-text select.placeholder,
            .preview .s-format-text select:invalid {
                color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),0.3);
            }
.s-format-text select:not(.s-format-none select)[multiple] option:checked,
            .s-format-text select:not(.s-format-none select)[multiple] option[selected],
            .preview .s-format-text select[multiple] option:checked,
            .preview .s-format-text select[multiple] option[selected] {
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.5);
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
            }
.s-format-text select:not(.s-format-none select)[multiple]:focus option:checked,
            .s-format-text select:not(.s-format-none select)[multiple]:focus option[selected],
            .preview .s-format-text select[multiple]:focus option:checked,
            .preview .s-format-text select[multiple]:focus option[selected] {
                -moz-appearance: none;
                -webkit-appearance: none;
                appearance: none;
                background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-lightness-offset, 0)) * 1%),var(--s-color-current-ui-a, 1));
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
            }
.s-format-text select:not(.s-format-none select):not([multiple]), .preview .s-format-text select:not([multiple]) {
                padding-inline-end: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1) + 1.5em);

                --padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);

                background-repeat: no-repeat;
                background-image: linear-gradient(45deg, transparent 50%, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) 50%), linear-gradient(135deg, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) 50%, transparent 50%);
                background-position: right calc(var(--padding-inline) + 5px) top 50%, right var(--padding-inline) top 50%;
                background-size: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)) calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)), calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1)) calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
            }
[dir="rtl"] .s-format-text select:not(.s-format-none select):not([multiple]),
                .s-format-text select:not(.s-format-none select):not([multiple])[dir="rtl"],
                [dir="rtl"] .preview .s-format-text select:not([multiple]),
                .preview .s-format-text select:not([multiple])[dir="rtl"] {
                    background-position: left var(--padding-inline) top 50%, left calc(var(--padding-inline) + calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1))) top 50%;
                }
.s-rhythm-vertical > select,.s-rhythm-vertical >  .s-select {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 2);
                }
/**
        * @name          Switch
        * @namespace          sugar.style.ui.switch
        * @type               Styleguide
        * @menu           Styleguide / Forms        /styleguide/form/switch
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to style checkbox HTMLElement as switches
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.switch.classes;
        * 
        * .my-switch {
        *   @sugar.ui.switch;
        * }
        * 
         * @cssClass     s-switch           Apply the solid switch lnf
        * 
         * @example        html       solid lnf
            *   <label class="s-mbe:30 s-label">
            *     <span>Future Identity Manager Marty Bogan</span>
            *     <input type="checkbox" class="s-switch" />
            *   </label>
                <label class="s-mbe:30 s-label">
            *     <span>I'm disabled</span>
            *     <input type="checkbox" disabled class="s-switch" />
            *   </label>
            * 
        *
        * @example      html            Shapes
        *   <label class="s-mbe:30 s-label">
        *     <span>Human Accountability Liaison Rodolfo Lueilwitz</span>
        *     <input type="checkbox" class="s-switch s-shape:default" />
        *   </label>
        * <label class="s-mbe:30 s-label">
        *     <span>Principal Web Engineer Violet Blanda</span>
        *     <input type="checkbox" class="s-switch s-shape:square" />
        *   </label>
        * <label class="s-mbe:30 s-label">
        *     <span>Principal Implementation Associate Suzanne Jacobi</span>
        *     <input type="checkbox" class="s-switch s-shape:pill" />
        *   </label>
        *
        * @example      html            RTL Support
        * <div dir="rtl">
        *   <label class="s-mbe:30 s-label">
        *     <span>Central Interactions Officer Ruth Lebsack</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        * </div>
        * 
        * @example      html            Colors (non-exhauustive)
        
        *   <label class="s-mbe:30 s-label s-color:main">
        *     <span>Global Optimization Strategist Joe Luettgen</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        

        *   <label class="s-mbe:30 s-label s-color:accent">
        *     <span>Forward Web Planner Kristen Emard</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        

        *   <label class="s-mbe:30 s-label s-color:complementary">
        *     <span>Human Quality Designer Fred Pouros</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        

        *   <label class="s-mbe:30 s-label s-color:error">
        *     <span>Lead Tactics Architect Donna Robel</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        
        * 
        * @example      html            Scales
        *   <label class="s-mbe:30 s-label s-scale:05">
        *     <span>Dynamic Identity Engineer Tracy Braun</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        *   <label class="s-mbe:30 s-label s-scale:10">
        *     <span>Senior Creative Administrator Maggie Wiza</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        *   <label class="s-mbe:30 s-label s-scale:15">
        *     <span>Product Intranet Manager Jacqueline Nader</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        *   <label class="s-mbe:30 s-label s-scale:20">
        *     <span>International Identity Technician Evelyn Williamson</span>
        *     <input type="checkbox" class="s-switch" />
        *   </label>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-switch {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
        margin-block: 0.7em 0.9em;

        --thumb-size: 1.4em;
        --thumb-color-active: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1));
        --thumb-color-inactive: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
        --thumb-color-highlight: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);

        --track-size: calc(var(--thumb-size) * 2);
        --track-padding: 0.2em;
        --track-color-active: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
        --track-color-inactive: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);

        --isLTR: 1;
        }
[dir="rtl"] .s-switch, .s-switch[dir="rtl"] {
            --isLTR: -1;
}
.s-switch {

        --thumb-position: 0%;

        --thumb-transition-duration: var(--s-ui-form-transition, 0);
        
        padding: var(--track-padding);
        inline-size: var(--track-size);
        block-size: var(--thumb-size);

        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        pointer-events: all;
        cursor: pointer;
        touch-action: pan-y;
        outline-offset: 5px;
        box-sizing: content-box;

        flex-shrink: 0;
        display: grid;
        align-items: center;
        grid: [track] 1fr / [track] 1fr;
}
.s-switch:checked::before {
            }
.s-switch:checked::after {
            }
.s-switch::before {
            --highlight-size: 0;

            content: "";
            cursor: pointer;
            pointer-events: none;
            grid-area: track;
            inline-size: var(--thumb-size);
            block-size: var(--thumb-size);
        }
.s-switch::after {
            content: "";
            cursor: pointer;
            pointer-events: none;
            grid-area: track;
            inline-size: var(--thumb-size);
            block-size: var(--thumb-size);
        }
.s-switch:not(:disabled):hover::before {
        }
.s-switch:not(:disabled):focus::before {
        }
.s-switch:checked {
            --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
        }
.s-switch:indeterminate {
            --thumb-position: calc(
                calc(calc(var(--track-size) / 2) - calc(var(--thumb-size) / 2))
                * var(--isLTR)
            );
        }
.s-switch:disabled, .s-switch[disabled] {
--thumb-color: transparent;pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
}
.s-switch:disabled:hover, .s-switch:disabled:focus, .s-switch:disabled:active, .s-switch[disabled]:hover, .s-switch[disabled]:focus, .s-switch[disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-switch:disabled, .s-switch:disabled *, .s-switch[disabled], .s-switch[disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
.s-wireframe .s-switch {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-switch, .s-wireframe .s-switch[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-switch {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-switch, .s-wireframe .s-switch[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-switch::before {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-switch::before, .s-wireframe .s-switch::before[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-switch::before {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-switch::before, .s-wireframe .s-switch::before[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-switch:not(.s-bare) {font-size: calc(0.8rem * var(--s-scale, 1) * var(--s-scale-global, 1));        
                    background: var(--track-color-inactive);

                    border: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-border-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-border-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-border-lightness-offset, 0)) * 1%),var(--s-color-main-border-a, 1)) solid 1px;
                    outline-offset: 5px;
                    
                    transition: var(--thumb-transition-duration);
            }
.s-switch:not(.s-bare):checked::before {
                            background: var(--thumb-color-active) !important;
                        }
.s-switch:not(.s-bare):checked::after {
                        }
.s-switch:not(.s-bare)::before {
                        --highlight-size: 0;

                        background: var(--thumb-color-inactive);
                        box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
                        transform: translateX(var(--thumb-position));
                        transition: var(--thumb-transition-duration);
                    }
.s-switch:not(.s-bare)::after {
                        background: rgba(255,255,25,0);
                        box-shadow: 0;
                        transition: ;
                    }
.s-switch:not(.s-bare):not(:disabled):hover::before {
                        --highlight-size: .5rem;
                    }
.s-switch:not(.s-bare):not(:disabled):focus::before {
                        --highlight-size: .25rem;
                    }
.s-switch:not(.s-bare):checked {
                        background: var(--track-color-active);
                    }
.s-switch:not(.s-bare) {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-switch:not(.s-bare):after,
                    .s-switch:not(.s-bare):before {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                    }
.s-wireframe .s-switch:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-switch:not(.s-bare), .s-wireframe .s-switch:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-switch:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-switch:not(.s-bare), .s-wireframe .s-switch:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-switch:not(.s-bare)::before {background-color: #ffffff;
            }
[theme$="dark"] .s-wireframe .s-switch:not(.s-bare)::before, .s-wireframe .s-switch:not(.s-bare)::before[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-switch:not(.s-bare)::before {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-switch:not(.s-bare)::before, .s-wireframe .s-switch:not(.s-bare)::before[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
/**
        * @name          Table
        * @namespace          sugar.style.ui.table
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/table
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display nice tables with ease.
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.table.classes;
        * 
        * .my-table {
        *   @sugar.ui.table;
        * }
        * 
        * @cssClass     s-table            Apply the table lnf
        * 
        * @example        html       Default
        *   <table class="s-table s-mbe:30">
        *       <tr>
        *           <th>Jeff Mayer</th>
        *           <th>Sergio Herzog</th>
        *           <th>Christy Schroeder</th>
        *       </tr>
        *       <tr>
        *           <td>Christian Wisozk</td>
        *           <td>Hilda Mills</td>
        *           <td>Steve Wunsch</td>
        *       </tr>
        *       <tr>
        *           <td>Paul Dach</td>
        *           <td>Jerome Hartmann I</td>
        *           <td>Tiffany Stiedemann</td>
        *       </tr>
        *   </table>
        *
        * @example      html        RTL Support
        * <div dir="rtl">
        *   <table class="s-table">
        *       <tr>
        *           <th>Pearl Cassin</th>
        *           <th>Floyd Bauch</th>
        *           <th>Ryan Legros</th>
        *       </tr>
        *       <tr>
        *           <td>Susan Borer</td>
        *           <td>Vickie Ernser</td>
        *           <td>Miss Doreen Gutmann</td>
        *       </tr>
        *       <tr>
        *           <td>Johnny Koss</td>
        *           <td>Ora O'Reilly</td>
        *           <td>Marian Wyman</td>
        *       </tr>
        *   </table>
        * </div>
        * 
        * @example      html        Shapes
        *   <table class="s-table s-shape:square s-mbe:30">
        *       <tr>
        *           <th>Dallas Paucek</th>
        *           <th>Dorothy Carroll</th>
        *           <th>Sammy Weber</th>
        *       </tr>
        *       <tr>
        *           <td>Margarita Auer</td>
        *           <td>Dr. Laurie Cormier</td>
        *           <td>Drew Wisoky</td>
        *       </tr>
        *       <tr>
        *           <td>Emily Ernser</td>
        *           <td>Alma Ankunding</td>
        *           <td>Grady Metz</td>
        *       </tr>
        *   </table>
        * 
        * <table class="s-table s-shape:pill">
       *       <tr>
       *           <th>Hope Auer</th>
       *           <th>Danielle Nader</th>
       *           <th>Jason Lebsack</th>
       *       </tr>
       *       <tr>
       *           <td>Candace Shields</td>
       *           <td>Sherri Beahan</td>
       *           <td>Dan Balistreri</td>
       *       </tr>
       *       <tr>
       *           <td>Sherri Franecki</td>
       *           <td>Alfonso Bayer MD</td>
       *           <td>Ms. Nicholas Kuvalis</td>
       *       </tr>
       *   </table>
        * 
        * @example      html        Scales
        
        *   <table class="s-table s-scale:07 s-mbe:30">
        *       <tr>
        *           <th>Bill Bernhard</th>
        *           <th>Shaun McLaughlin</th>
        *           <th>Benny Leuschke</th>
        *       </tr>
        *       <tr>
        *           <td>Francis O'Reilly</td>
        *           <td>Maryann Cassin V</td>
        *           <td>Holly Considine</td>
        *       </tr>
        *       <tr>
        *           <td>Jose Wisoky</td>
        *           <td>Marcia Zemlak</td>
        *           <td>Lorene Nitzsche PhD</td>
        *       </tr>
        *   </table>
        

        *   <table class="s-table s-scale:1 s-mbe:30">
        *       <tr>
        *           <th>April Ryan</th>
        *           <th>Lionel Brakus</th>
        *           <th>Orlando Torp DVM</th>
        *       </tr>
        *       <tr>
        *           <td>Gwendolyn Powlowski</td>
        *           <td>Kelly Stiedemann</td>
        *           <td>Bonnie Feil</td>
        *       </tr>
        *       <tr>
        *           <td>Pablo Bernier</td>
        *           <td>Miss Pearl Douglas</td>
        *           <td>Pedro Towne</td>
        *       </tr>
        *   </table>
        

        *   <table class="s-table s-scale:13 s-mbe:30">
        *       <tr>
        *           <th>Darin Jacobs</th>
        *           <th>Terrell Rau</th>
        *           <th>Mack Barrows</th>
        *       </tr>
        *       <tr>
        *           <td>Darnell Rempel</td>
        *           <td>Angel White</td>
        *           <td>Ebony Hauck</td>
        *       </tr>
        *       <tr>
        *           <td>Iris MacGyver</td>
        *           <td>Andrew Sanford</td>
        *           <td>Gary Hickle</td>
        *       </tr>
        *   </table>
        

        *   <table class="s-table s-scale:16 s-mbe:30">
        *       <tr>
        *           <th>Earl Stanton</th>
        *           <th>Freda VonRueden III</th>
        *           <th>Ms. Angelina Kilback</th>
        *       </tr>
        *       <tr>
        *           <td>Oliver Labadie</td>
        *           <td>Nathaniel Gusikowski</td>
        *           <td>Yolanda Dickinson</td>
        *       </tr>
        *       <tr>
        *           <td>Darnell Ondricka</td>
        *           <td>Patrick Ernser</td>
        *           <td>Emilio Blanda</td>
        *       </tr>
        *   </table>
        
        * 
        * @example      html        Colors (non-exhaustive)
        
        *   <table class="s-table s-color:main s-mbe:30">
        *       <tr>
        *           <th>Lynn Rosenbaum</th>
        *           <th>Wilma Mertz</th>
        *           <th>Beulah Larkin II</th>
        *       </tr>
        *       <tr>
        *           <td>Charlie Ullrich</td>
        *           <td>Neil O'Conner PhD</td>
        *           <td>Margarita Predovic DVM</td>
        *       </tr>
        *       <tr>
        *           <td>Jeannie Schinner PhD</td>
        *           <td>Nick Runolfsson</td>
        *           <td>Krista Larson</td>
        *       </tr>
        *   </table>
        

        *   <table class="s-table s-color:accent s-mbe:30">
        *       <tr>
        *           <th>Thomas Conn</th>
        *           <th>Francis Haag</th>
        *           <th>Sonia Cronin</th>
        *       </tr>
        *       <tr>
        *           <td>Angel Douglas</td>
        *           <td>Debra Hilll</td>
        *           <td>Marian Beier</td>
        *       </tr>
        *       <tr>
        *           <td>Marshall Toy</td>
        *           <td>Bobbie Rippin</td>
        *           <td>Lionel Kuhn III</td>
        *       </tr>
        *   </table>
        

        *   <table class="s-table s-color:complementary s-mbe:30">
        *       <tr>
        *           <th>Dr. Wallace Medhurst</th>
        *           <th>Eunice Kuhlman</th>
        *           <th>Corey Ortiz</th>
        *       </tr>
        *       <tr>
        *           <td>Christy Kunze</td>
        *           <td>Mrs. Emilio Ondricka</td>
        *           <td>Kerry Wiegand</td>
        *       </tr>
        *       <tr>
        *           <td>Ora Lakin</td>
        *           <td>Santiago Leuschke</td>
        *           <td>Raul Wuckert</td>
        *       </tr>
        *   </table>
        

        *   <table class="s-table s-color:error s-mbe:30">
        *       <tr>
        *           <th>Tracey Kiehn</th>
        *           <th>Sadie Prohaska</th>
        *           <th>Luz Torphy</th>
        *       </tr>
        *       <tr>
        *           <td>Brooke Robel</td>
        *           <td>Dr. Terrance Gerhold</td>
        *           <td>Miss Homer Yundt</td>
        *       </tr>
        *       <tr>
        *           <td>Rudy Paucek IV</td>
        *           <td>Amber Weimann PhD</td>
        *           <td>Angelina Connelly</td>
        *       </tr>
        *   </table>
        
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-table {width: 100%;
    font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
    table-layout: fixed;
    overflow-wrap: break-word;
    border-collapse: collapse;
                }
.s-table, .s-table th, .s-table td {
    
    }
.s-table th {
        vertical-align: middle;
    }
.s-table td, .s-table th {
        padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
         padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);

    }
[dir="rtl"] .s-table td, .s-table td[dir="rtl"], [dir="rtl"] .s-table th, .s-table th[dir="rtl"] {
            text-align: right;
}
.s-wireframe .s-table {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-table, .s-wireframe .s-table[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-table {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-table, .s-wireframe .s-table[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-table > tr:nth-child(even),
            .s-wireframe .s-table > tbody > tr:nth-child(even) {background: #fafafa;
            }
[theme$="dark"] .s-wireframe .s-table > tr:nth-child(even), .s-wireframe .s-table > tr:nth-child(even)[theme$="dark"], [theme$="dark"] .s-wireframe .s-table > tbody > tr:nth-child(even), .s-wireframe .s-table > tbody > tr:nth-child(even)[theme$="dark"] {
            background: #3B424C;
}
.s-table:not(.s-bare) {box-shadow: var(--s-depth-0, 0);
            position: relative;
            box-shadow: 0 0 0 var(--s-ui-default-border-width, 1px) hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1));
            overflow: hidden;border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
                }
.s-table:not(.s-bare), .s-table:not(.s-bare) th, .s-table:not(.s-bare) td {

            }
.s-table:not(.s-bare) th {
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-lightness-offset, 0)) * 1%),var(--s-color-current-surface-a, 1));
                font-weight: bold;
            }
.s-table:not(.s-bare) td, .s-table:not(.s-bare) th {
            
            }
.s-wireframe .s-table:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-table:not(.s-bare), .s-wireframe .s-table:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-table:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-table:not(.s-bare), .s-wireframe .s-table:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-table:not(.s-bare) > tr:nth-child(even),
            .s-wireframe .s-table:not(.s-bare) > tbody > tr:nth-child(even) {background: #fafafa;
            }
[theme$="dark"] .s-wireframe .s-table:not(.s-bare) > tr:nth-child(even), .s-wireframe .s-table:not(.s-bare) > tr:nth-child(even)[theme$="dark"], [theme$="dark"] .s-wireframe .s-table:not(.s-bare) > tbody > tr:nth-child(even), .s-wireframe .s-table:not(.s-bare) > tbody > tr:nth-child(even)[theme$="dark"] {
            background: #3B424C;
}
.s-format-text table:not(.s-format-none table), .preview .s-format-text table {width: 100%;
    font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
    table-layout: fixed;
    overflow-wrap: break-word;
    border-collapse: collapse;
          }
.s-format-text table:not(.s-format-none table), .s-format-text table:not(.s-format-none table) th, .s-format-text table:not(.s-format-none table) td, .preview .s-format-text table, .preview .s-format-text table th, .preview .s-format-text table td {
    
    }
.s-format-text table:not(.s-format-none table) th, .preview .s-format-text table th {
        vertical-align: middle;
    }
.s-format-text table:not(.s-format-none table) td, .s-format-text table:not(.s-format-none table) th, .preview .s-format-text table td, .preview .s-format-text table th {
        padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
         padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);

    }
[dir="rtl"] .s-format-text table:not(.s-format-none table) td, .s-format-text table:not(.s-format-none table) td[dir="rtl"], [dir="rtl"] .s-format-text table:not(.s-format-none table) th, .s-format-text table:not(.s-format-none table) th[dir="rtl"], [dir="rtl"] .preview .s-format-text table td, .preview .s-format-text table td[dir="rtl"], [dir="rtl"] .preview .s-format-text table th, .preview .s-format-text table th[dir="rtl"] {
            text-align: right;
}
.s-format-text table:not(.s-format-none table), .preview .s-format-text table {box-shadow: var(--s-depth-0, 0);
            position: relative;
            box-shadow: 0 0 0 var(--s-ui-default-border-width, 1px) hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-border-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-border-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-border-lightness-offset, 0)) * 1%),var(--s-color-current-border-a, 1));
            overflow: hidden;
}
.s-format-text table:not(.s-format-none table), .preview .s-format-text table {border-radius: var(--s-shape, calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-format-text table:not(.s-format-none table), .s-format-text table:not(.s-format-none table) th, .s-format-text table:not(.s-format-none table) td, .preview .s-format-text table, .preview .s-format-text table th, .preview .s-format-text table td {

            }
.s-format-text table:not(.s-format-none table) th, .preview .s-format-text table th {
                background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-lightness-offset, 0)) * 1%),var(--s-color-current-surface-a, 1));
                font-weight: bold;
            }
.s-format-text table:not(.s-format-none table) td, .s-format-text table:not(.s-format-none table) th, .preview .s-format-text table td, .preview .s-format-text table th {
            
            }
.s-wireframe .s-format-text table:not(.s-format-none table), .s-wireframe .preview .s-format-text table {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-format-text table:not(.s-format-none table), .s-wireframe .s-format-text table:not(.s-format-none table)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text table, .s-wireframe .preview .s-format-text table[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-format-text table:not(.s-format-none table), .s-wireframe .preview .s-format-text table {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-format-text table:not(.s-format-none table), .s-wireframe .s-format-text table:not(.s-format-none table)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text table, .s-wireframe .preview .s-format-text table[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-format-text table:not(.s-format-none table) > tr:nth-child(even),
            .s-wireframe .s-format-text table:not(.s-format-none table) > tbody > tr:nth-child(even),
            .s-wireframe .preview .s-format-text table > tr:nth-child(even),
            .s-wireframe .preview .s-format-text table > tbody > tr:nth-child(even) {background: #fafafa;
            }
[theme$="dark"] .s-wireframe .s-format-text table:not(.s-format-none table) > tr:nth-child(even), .s-wireframe .s-format-text table:not(.s-format-none table) > tr:nth-child(even)[theme$="dark"], [theme$="dark"] .s-wireframe .s-format-text table:not(.s-format-none table) > tbody > tr:nth-child(even), .s-wireframe .s-format-text table:not(.s-format-none table) > tbody > tr:nth-child(even)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text table > tr:nth-child(even), .s-wireframe .preview .s-format-text table > tr:nth-child(even)[theme$="dark"], [theme$="dark"] .s-wireframe .preview .s-format-text table > tbody > tr:nth-child(even), .s-wireframe .preview .s-format-text table > tbody > tr:nth-child(even)[theme$="dark"] {
            background: #3B424C;
}
.s-rhythm-vertical > table,.s-rhythm-vertical >  .s-table {
              margin-bottom: calc(var(--s-margin-default, 1rem) * 5);
          }
/**
        * @name          Tabs
        * @namespace          sugar.style.ui.tabs
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/tabs
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to style list (or any others) HTMLElement as tabs
        * 
        * @feature          Support for shaping through the `s-shape:...` class
        * @feature          Support for scaling through the `s-scale:...` class
        * @feature          Support for colorizing through the `s-color:...` class
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.tabs.classes;
        * 
        * .my-tabs {
        *   @sugar.ui.tabs;
        * }
        * 
        * @cssClass     s-tabs                  Apply the tabs lnf
        * @cssClass       s-tabs:grow        Make the tabs items grow and take the available space
        * @cssClass       s-tabs:fill       Add a background to the tabs
        * @cssClass       s-tabs:vertical    Display the tabs horizontally
        * 
        * @example        html       Default
        *   <ul class="s-tabs s-color:accent">
        *     <li tabindex="0" active>Beulah Graham</li>
        *     <li tabindex="0">Alonzo Hirthe II</li>
        *     <li tabindex="0">Donna Koch</li>
        *   </ul>
        * 
        * @example        html       Grow
        *   <ul class="s-tabs:grow">
        *     <li tabindex="0" active>Brandi Zieme</li>
        *     <li tabindex="0">David Johnston</li>
        *     <li tabindex="0">Virginia Wilkinson</li>
        *   </ul>
        * 
        * @example        html       Fill
        *   <ul class="s-tabs:fill">
        *     <li tabindex="0" active>Jason King</li>
        *     <li tabindex="0">Marguerite Hoeger</li>
        *     <li tabindex="0">Brad Corkery</li>
        *   </ul>
        * 
        * @example        html       Shapes
        *   <ul class="s-tabs s-shape:square s-mbe:30">
        *     <li tabindex="0" active>Angel McLaughlin</li>
        *     <li tabindex="0">Amelia D'Amore</li>
        *     <li tabindex="0">Ron Kulas</li>
        *   </ul>
        * <ul class="s-tabs s-shape:pill">
        *     <li tabindex="0" active>Kari Orn</li>
        *     <li tabindex="0">Kellie Roberts III</li>
        *     <li tabindex="0">Jesse Schulist</li>
        *   </ul>
        * 
        * @example      html        RTL
        * <div dir="rtl">
        *   <ul class="s-tabs">
        *     <li class="s-color:accent" tabindex="0" active>Natasha Bayer</li>
        *     <li class="s-color:complementary" tabindex="0">Leigh Shanahan</li>
        *     <li tabindex="0">Mario Hagenes</li>
        *   </ul>
        * </div>
        * 
        * @example      html        Vertical
        *   <ul class="s-tabs:vertical s-color:complementary">
        *     <li tabindex="0" active>Angel Torphy</li>
        *     <li tabindex="0">Elisa Heller</li>
        *     <li tabindex="0">Kurt Goldner</li>
        *   </ul>
        * 
        * @example      html        Scales
        *   <ul class="s-tabs:grow s-scale:13 s-color:accent">
        *     <li tabindex="0" active>Rufus Mosciski III</li>
        *     <li tabindex="0">Faye Feil</li>
        *     <li tabindex="0">Molly Mraz</li>
        *   </ul>
        *
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-tabs > *:focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-tabs {
      

        font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
}
.s-tabs > template {
          display: none;
        }
.s-wireframe .s-tabs > * {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tabs > *, .s-wireframe .s-tabs > *[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-tabs > * {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tabs > *, .s-wireframe .s-tabs > *[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tabs > *.active {background: #fafafa;
}
[theme$="dark"] .s-wireframe .s-tabs > *.active, .s-wireframe .s-tabs > *.active[theme$="dark"] {
            background: #3B424C;
}
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-tabs:not(.s-bare) > *:focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-tabs:not(.s-bare) {
      

          -webkit-user-select: none;
      

             -moz-user-select: none;
      

                  user-select: none;
}
.s-tabs:not(.s-bare) > * {
            text-align: center;
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
            transition: var(--s-ui-default-transition, 0);
            cursor: pointer;
            display: block;      
          }
.s-tabs:not(.s-bare) > *:active:not(:hover), .s-tabs:not(.s-bare) > *.active, .s-tabs:not(.s-bare) > *[active] {
background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
}
.s-tabs:not(.s-bare) > *:active:not(:hover), .s-tabs:not(.s-bare) > *:active:not(:hover) *, .s-tabs:not(.s-bare) > *.active, .s-tabs:not(.s-bare) > *.active *, .s-tabs:not(.s-bare) > *[active], .s-tabs:not(.s-bare) > *[active] * {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1));
              }
.s-tabs:not(.s-bare) > *:hover {
background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + 5) * 1%),1);
}
.s-tabs:not(.s-bare) > *:hover, .s-tabs:not(.s-bare) > *:hover * {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1));
              }
.s-tabs:not(.s-bare) {
        


                border-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
}
.s-tabs:not(.s-bare) > *:first-child,
                .s-tabs:not(.s-bare) > template + * {
                  border-top-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                  border-bottom-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                  border-top-right-radius: 0;
                  border-bottom-right-radius: 0;
                }
.s-tabs:not(.s-bare) > *:last-child {
                  border-top-left-radius: 0;
                  border-bottom-left-radius: 0;
                  border-top-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                  border-bottom-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                }
[dir="rtl"] .s-tabs:not(.s-bare) > *:first-child,
                .s-tabs:not(.s-bare)[dir="rtl"] > *:first-child,
                [dir="rtl"] .s-tabs:not(.s-bare) > template + *,
                .s-tabs:not(.s-bare)[dir="rtl"] > template + * {
                  border-top-left-radius: 0;
                  border-bottom-left-radius: 0;
                  border-top-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                  border-bottom-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                }
[dir="rtl"] .s-tabs:not(.s-bare) > *:last-child,
                .s-tabs:not(.s-bare)[dir="rtl"] > *:last-child {
                  border-top-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                  border-bottom-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1));
                  border-top-right-radius: 0;
                  border-bottom-right-radius: 0;
                }
.s-tabs:not(.s-bare) > *:first-child:last-child,
                .s-tabs:not(.s-bare) > template + *:last-child {
                  border-top-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                  border-bottom-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                  border-top-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                  border-bottom-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                }
.s-wireframe .s-tabs:not(.s-bare) > * {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tabs:not(.s-bare) > *, .s-wireframe .s-tabs:not(.s-bare) > *[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-tabs:not(.s-bare) > * {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tabs:not(.s-bare) > *, .s-wireframe .s-tabs:not(.s-bare) > *[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tabs:not(.s-bare) > *.active {background: #fafafa;
}
[theme$="dark"] .s-wireframe .s-tabs:not(.s-bare) > *.active, .s-wireframe .s-tabs:not(.s-bare) > *.active[theme$="dark"] {
            background: #3B424C;
}
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-tabs-grow > *:focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-tabs-grow {
      

      
              display: flex;
}
.s-tabs-grow > * {
                flex-grow: 1;
              }
.s-wireframe .s-tabs-grow > * {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tabs-grow > *, .s-wireframe .s-tabs-grow > *[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-tabs-grow > * {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tabs-grow > *, .s-wireframe .s-tabs-grow > *[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tabs-grow > *.active {background: #fafafa;
}
[theme$="dark"] .s-wireframe .s-tabs-grow > *.active, .s-wireframe .s-tabs-grow > *.active[theme$="dark"] {
            background: #3B424C;
}
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-tabs-fill > *:focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-tabs-fill {
      

      
              background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-surface-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-surface-lightness-offset, 0)) * 1%),var(--s-color-current-surface-a, 1));
}
.s-wireframe .s-tabs-fill > * {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tabs-fill > *, .s-wireframe .s-tabs-fill > *[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-tabs-fill > * {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tabs-fill > *, .s-wireframe .s-tabs-fill > *[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tabs-fill > *.active {background: #fafafa;
}
[theme$="dark"] .s-wireframe .s-tabs-fill > *.active, .s-wireframe .s-tabs-fill > *.active[theme$="dark"] {
            background: #3B424C;
}
@keyframes s-outline-in {
            from {
                outline: 0px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0);
            }
            to {
                outline: 10px solid hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),0.2);
            }
        }
.s-tabs-vertical > *:focus:not(:hover) {

        animation: s-outline-in .1s ease-out forwards;
}
.s-tabs-vertical {
      

          display: block;
}
.s-tabs-vertical > * {
            display: block;
            text-align: inherit;
          }
.s-tabs-vertical > *:first-child,
                  .s-tabs-vertical > template + * {
                    border-top-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                    border-bottom-left-radius: 0 !important;
                    border-top-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                    border-bottom-right-radius: 0 !important;
                  }
.s-tabs-vertical > *:last-child {
                    border-top-left-radius: 0 !important;
                    border-bottom-left-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                    border-top-right-radius: 0 !important;
                    border-bottom-right-radius: var(--s-shape, calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1)) !important;
                  }
.s-wireframe .s-tabs-vertical > * {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tabs-vertical > *, .s-wireframe .s-tabs-vertical > *[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-tabs-vertical > * {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tabs-vertical > *, .s-wireframe .s-tabs-vertical > *[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tabs-vertical > *.active {background: #fafafa;
}
[theme$="dark"] .s-wireframe .s-tabs-vertical > *.active, .s-wireframe .s-tabs-vertical > *.active[theme$="dark"] {
            background: #3B424C;
}
/**
        * @name          Toggle
        * @namespace          sugar.style.ui.toggle
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/toggles
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to display any HTMLElement as a toggle.
        * Toggles are element that have at least 2 states. Active and unactive.
        * This active state respect these rules:
        * 
        * - &:active
        * - &:focus
        * - &:focus-within
        * - input:checked + &
        * - input:checked + .s-menu + &
        * - :active > &
        * - :focus > &
        * - :focus-within > &
        * - &:has(input:checked)
        * - input:checked + * > &
        * - input:checked + .s-menu + * > &
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.toggle.classes;
        * 
        * .my-toggle {
        *   @sugar.ui.toggle;
        * }
        * 
         * @cssClass     s-toggle:burger           Apply the burger toggle style
        * 

        * @example        html          Toggles
        *   <div class="s-grid:5 @mobile s-grid:2">
         *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <label class="s-font:70">
        *       <input type="checkbox" hidden />
        *       <div class="s-toggle:burger"></div>
        *     </label>
        *     <p class="s-typo:p s-mbs:30">burger</p>
        *   </div>
        *   </div>
        *
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-toggle-container,
            label:has(> .s-toggle) {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 1em;
                height: 1em;
            }
.s-toggle-burger {display: inline-block;
        

                position: relative;
                top: 0.5em;
                width: 1em;
                height: 0.1em;
                background-color: currentColor;
                transition: all 0.3s ease-in-out;
                transform: translateY(-0.5em);border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
            }
.s-toggle-burger:before,
                .s-toggle-burger:after {
                    content: '';
                    width: 100%;
                    height: 100%;
                    background-color: currentColor;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    transition: all 0.3s ease-in-out;
                    opacity: 1;border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
                }
.s-toggle-burger:before {
                    transform-origin: 0 0;
                    top: -0.3em;
                }
.s-toggle-burger:after {
                    transform-origin: 100% 100%;
                    top: 0.3em;
                }
.s-toggle-burger:active,
                .s-toggle-burger:focus,
                .s-toggle-burger:focus-within,
                input:checked + .s-toggle-burger,
                input:checked + .s-menu + .s-toggle-burger,
                .s-toggle-burger:has(input:checked),
                :active > .s-toggle-burger,
                :focus > .s-toggle-burger,
                :focus-within > .s-toggle-burger,
                input:checked + * > .s-toggle-burger,
                input:checked + .s-menu + * > .s-toggle-burger {                
                    transform: translateY(-0.5em) rotate(45deg);
                }
.s-toggle-burger:active:before, .s-toggle-burger:focus:before, .s-toggle-burger:focus-within:before, input:checked + .s-toggle-burger:before, input:checked + .s-menu + .s-toggle-burger:before, .s-toggle-burger:has(input:checked):before, :active > .s-toggle-burger:before, :focus > .s-toggle-burger:before, :focus-within > .s-toggle-burger:before, input:checked + * > .s-toggle-burger:before, input:checked + .s-menu + * > .s-toggle-burger:before {
                        transform: translateX(5%) translateY(-0.1em) rotate(90deg);
                    }
.s-toggle-burger:active:after, .s-toggle-burger:focus:after, .s-toggle-burger:focus-within:after, input:checked + .s-toggle-burger:after, input:checked + .s-menu + .s-toggle-burger:after, .s-toggle-burger:has(input:checked):after, :active > .s-toggle-burger:after, :focus > .s-toggle-burger:after, :focus-within > .s-toggle-burger:after, input:checked + * > .s-toggle-burger:after, input:checked + .s-menu + * > .s-toggle-burger:after {
                        transform: translateX(-50%) rotate(80deg);
                        opacity: 0;
                    }
/**
        * @name          Tooltip
        * @namespace          sugar.style.ui.tooltip
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/tooltip
        * @platform       css
        * @status       beta
        * 
        * These classes allows you display nice tooltips on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ui.tooltip.classes;
        * 
        * .my-tooltip {
        *   @sugar.ui.tooltip;
        * }
        * 
        * @cssClass             s-tooltip-container             Allows to hide and show your tooltip on hover (focus)
        * @cssClass             s-tooltip-container:active     Allow to display a tooltip without having the need of the user interaction
        * @cssClass             s-tooltip                       Apply on the element you want as a tooltip
         * @cssClass     s-tooltip           Apply the solid tooltip lnf
        * @cssClass             s-tooltip:top                 Align your tooltip at "top". This is the default. Only then not using the "s-floating" feature       
        * @cssClass             s-tooltip:right               Align your tooltip at "right". Only then not using the "s-floating" feature
        * @cssClass             s-tooltip:left               Align your tooltip at "left". Only then not using the "s-floating" feature
        * @cssClass             s-tooltip:bottom               Align your tooltip at "bottom". Only then not using the "s-floating" feature
        * @cssClass             s-tooltip:interactive          Allow the user to interact with the tooltip. Only then not using the "s-floating" feature
        * 
         * @example        html       solid
                *   <span class="s-tooltip-container">
                *       <a class="s-btn s-mie:20">Hover me!</a>
                *       <div class="s-white-space:nowrap s-tooltip s-color:accent" s-floating>
                *           Chief Implementation Facilitator Myra Boyle
                *       </div>
                *   </span>
                *   <span class="s-tooltip-container">
                *       <a class="s-btn s-mie:20">Hover me!</a>
                *       <div class="s-white-space:nowrap s-tooltip s-color:complementary" s-floating>
                *           Human Marketing Consultant Harold Nitzsche Jr.
                *       </div>
                *   </span>
                *   <span class="s-tooltip-container">
                *       <a class="s-btn s-mie:20">Hover me!</a>
                *       <div class="s-white-space:nowrap s-tooltip s-color:info" s-floating>
                *           Customer Data Technician Miss Tina Bergnaum
                *       </div>
                *   </span>
            
        * 
        * @example      html        Positions (no s-floating feature)
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Block start (default)</a>
        *       <div class="s-tooltip s-white-space:nowrap s-color:accent">
        *           Future Metrics Agent Courtney Murazik II
        *       </div>
        *   </span>
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Inline end</a>
        *       <div class="s-tooltip:right s-white-space:nowrap s-color:accent">
        *           District Interactions Administrator Shelley Weissnat Jr.
        *       </div>
        *   </span>
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Block end</a>
        *       <div class="s-tooltip:bottom s-white-space:nowrap s-color:accent">
        *           Legacy Paradigm Designer Darryl Howe
        *       </div>
        *   </span>
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Inline start</a>
        *       <div class="s-tooltip:left s-white-space:nowrap s-color:accent">
        *           Future Metrics Administrator Phyllis Gutmann
        *       </div>
        *   </span>
        * 
        * @example      html        Colors (none-exhaustive)
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Accent</a>
        *       <div class="s-tooltip s-white-space:nowrap s-color:accent" s-floating>
        *           Corporate Quality Director Benny Rowe
        *       </div>
        *   </span>
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Complementary</a>
        *       <div class="s-tooltip s-white-space:nowrap s-color:complementary" s-floating>
        *           Global Program Planner Raymond O'Connell
        *       </div>
        *   </span>
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Error</a>
        *       <div class="s-tooltip s-white-space:nowrap s-color:error" s-floating>
        *           Investor Solutions Planner Harry Osinski
        *       </div>
        *   </span>
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">Info</a>
        *       <div class="s-tooltip s-white-space:nowrap s-color:info" s-floating>
        *           Direct Branding Director Darrin Reynolds
        *       </div>
        *   </span>
        * 
        * @example      html        Interactive
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">I'm not interactive</a>
        *       <div class="s-tooltip s-white-space:nowrap">
        *           <a class="s-btn s-color:accent">Click me if you can!</a>
        *       </div>
        *   </span>
        *   <span class="s-tooltip-container">
        *       <a class="s-btn s-mie:20">I'm interactive</a>
        *       <div class="s-tooltip:interactive s-white-space:nowrap">
        *           <a class="s-btn s-color:accent">Click me because you can!</a>
        *       </div>
        *   </span>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-tooltip-container {
                position: relative;
                display: inline-block;
            }
.s-tooltip-container > .s-tooltip {
                    opacity: 0;
                }
.s-tooltip-container:focus > .s-tooltip-interactive, .s-tooltip-container:focus-within > .s-tooltip-interactive, .s-tooltip-container:hover > .s-tooltip-interactive {
                        pointer-events: all;
                        opacity: 1;
                    }
.s-tooltip-container:not(:focus):not(:focus-within):not(:hover) > .s-tooltip {
                        
                    }
.s-tooltip-container:focus > .s-tooltip,
                .s-tooltip-container:focus-within > .s-tooltip,
                .s-tooltip-container .s-tooltip:focus,
                .s-tooltip-container:hover > .s-tooltip {
                    opacity: 1;
                }
.s-tooltip {font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
            position: absolute;
            z-index: 50;
            display: block;
            max-width: 9999999px !important;
            pointer-events: none;
            white-space: nowrap;
            }
.s-tooltip:before {
                content: '' !important;
                position: absolute;
                background: rgba(0,0,0,0);
            }
.s-tooltip-container-active > .s-tooltip {
            opacity: 1;
        }
.s-tooltip:not([s-floating]) {
}
.s-wireframe .s-tooltip {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tooltip, .s-wireframe .s-tooltip[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tooltip {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tooltip, .s-wireframe .s-tooltip[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-tooltip-container-active > .s-tooltip:not(.s-bare) {
            opacity: 1;
        }
.s-tooltip:not(.s-bare) {
    

          background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
          color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-foreground-a, 1));
          transition: var(--s-ui-default-transition, 0);
          transition-property: opacity;
          padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
          padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
}
.s-tooltip:not(.s-bare) {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
}
.s-tooltip:not(.s-bare) {box-shadow: var(--s-depth-0, 0);
}
.s-tooltip:not(.s-bare):not([s-floating]):after {
                    content: " ";
                    position: absolute;
                    border-style: default;
                    border-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) transparent transparent transparent;
                }
.s-tooltip:not(.s-bare):not([s-floating]) {
}
.s-wireframe .s-tooltip:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tooltip:not(.s-bare), .s-wireframe .s-tooltip:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tooltip:not(.s-bare) {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tooltip:not(.s-bare), .s-wireframe .s-tooltip:not(.s-bare)[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-tooltip-container-active > .s-tooltip-interactive {
            opacity: 1;
        }
.s-tooltip-interactive:not(.s-tooltip-container > .s-tooltip),
                .s-tooltip-container-active > .s-tooltip-interactive,
                .s-tooltip-container:focus > .s-tooltip-interactive,
                .s-tooltip-container:focus-within > .s-tooltip-interactive,
                .s-tooltip-container .s-tooltip-interactive:focus,
                .s-tooltip-container:hover > .s-tooltip-interactive {
                    pointer-events: all;
                }
.s-tooltip-interactive:not([s-floating]) {
}
.s-wireframe .s-tooltip-interactive {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tooltip-interactive, .s-wireframe .s-tooltip-interactive[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tooltip-interactive {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tooltip-interactive, .s-wireframe .s-tooltip-interactive[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-tooltip-container-active > .s-tooltip[placement="top"], .s-tooltip-container-active > .s-tooltip {
            opacity: 1;
        }
.s-tooltip[placement="top"]:not([s-floating]), .s-tooltip:not([s-floating]) {
  
                bottom: calc(100% + var(--s-ui-tooltip-arrow-size, 15px));
                left: 50%;
                transform: translateX(-50%);
            
}
.s-tooltip[placement="top"]:not([s-floating]):after, .s-tooltip:not([s-floating]):after {
                    top: 100%;
                    left: 50%;
                    margin-left: calc(var(--s-ui-tooltip-arrow-size, 15px) * -1 / 2);
                    border-width: calc(var(--s-ui-tooltip-arrow-size, 15px) / 2);
                }
.s-tooltip[placement="top"]:before, .s-tooltip:before {
                  width: 100%;
                  height: var(--s-ui-tooltip-arrow-size, 15px);
                  top: 100%;
                  left: 0;
                }
.s-wireframe .s-tooltip[placement="top"], .s-wireframe .s-tooltip {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="top"], .s-wireframe .s-tooltip[placement="top"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip, .s-wireframe .s-tooltip[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tooltip[placement="top"], .s-wireframe .s-tooltip {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="top"], .s-wireframe .s-tooltip[placement="top"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip, .s-wireframe .s-tooltip[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-tooltip-container-active > .s-tooltip[placement="right"], .s-tooltip-container-active > .s-tooltip-right {
            opacity: 1;
        }
.s-tooltip[placement="right"]:not([s-floating]), .s-tooltip-right:not([s-floating]) {
  
                top: 50%;
                left: calc(100% + var(--s-ui-tooltip-arrow-size, 15px));
                right: auto;    
                bottom: auto;
                transform: translateY(-50%);
            
}
.s-tooltip[placement="right"]:not([s-floating]):after, .s-tooltip-right:not([s-floating]):after {
                    top: 50%;
                    left: auto;
                    right: 100%;
                    bottom: auto;
                    margin-top: calc(var(--s-ui-tooltip-arrow-size, 15px) * -1 / 2);
                    border-width: calc(var(--s-ui-tooltip-arrow-size, 15px) / 2);
                    transform: rotate(90deg);
                }
.s-tooltip[placement="right"]:before, .s-tooltip-right:before {
                  height: 100%;
                  width: var(--s-ui-tooltip-arrow-size, 15px);
                  right: 100%;
                  left: auto;
                  bottom: auto;
                  top: 0;
                }
.s-wireframe .s-tooltip[placement="right"], .s-wireframe .s-tooltip-right {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="right"], .s-wireframe .s-tooltip[placement="right"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip-right, .s-wireframe .s-tooltip-right[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tooltip[placement="right"], .s-wireframe .s-tooltip-right {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="right"], .s-wireframe .s-tooltip[placement="right"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip-right, .s-wireframe .s-tooltip-right[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-tooltip-container-active > .s-tooltip[placement="left"], .s-tooltip-container-active > .s-tooltip-left {
            opacity: 1;
        }
.s-tooltip[placement="left"]:not([s-floating]), .s-tooltip-left:not([s-floating]) {
  
                top: 50%;
                right: calc(100% + var(--s-ui-tooltip-arrow-size, 15px));
                left: auto;    
                bottom: auto;
                transform: translateY(-50%);
            
}
.s-tooltip[placement="left"]:not([s-floating]):after, .s-tooltip-left:not([s-floating]):after {
                    top: 50%;
                    right: auto;
                    left: calc(100% + var(--s-ui-tooltip-arrow-size, 15px) / 2 - 1px);
                    bottom: auto;
                    margin-top: calc(var(--s-ui-tooltip-arrow-size, 15px) * -1 / 2);
                    border-width: calc(var(--s-ui-tooltip-arrow-size, 15px) / 2);
                    transform: rotate(-90deg);
                }
.s-tooltip[placement="left"]:before, .s-tooltip-left:before {
                  height: 100%;
                  width: var(--s-ui-tooltip-arrow-size, 15px);
                  left: 100%;
                  right: auto;
                  bottom: auto;
                  top: 0;
                }
.s-wireframe .s-tooltip[placement="left"], .s-wireframe .s-tooltip-left {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="left"], .s-wireframe .s-tooltip[placement="left"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip-left, .s-wireframe .s-tooltip-left[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tooltip[placement="left"], .s-wireframe .s-tooltip-left {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="left"], .s-wireframe .s-tooltip[placement="left"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip-left, .s-wireframe .s-tooltip-left[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-tooltip-container-active > .s-tooltip[placement="bottom"], .s-tooltip-container-active > .s-tooltip-bottom {
            opacity: 1;
        }
.s-tooltip[placement="bottom"]:not([s-floating]), .s-tooltip-bottom:not([s-floating]) {
  
                bottom: auto;
                right: auto;
                left: 50%;
                top: calc(100% + var(--s-ui-tooltip-arrow-size, 15px));
                transform: translateX(-50%);
            
}
.s-tooltip[placement="bottom"]:not([s-floating]):after, .s-tooltip-bottom:not([s-floating]):after {
                    bottom: 100%;
                    top: auto;
                    left: 50%;
                    right: auto;
                    margin-left: calc(var(--s-ui-tooltip-arrow-size, 15px) * -1 / 2);
                    border-width: calc(var(--s-ui-tooltip-arrow-size, 15px) / 2);
                    transform: rotate(180deg);
                }
.s-tooltip[placement="bottom"]:before, .s-tooltip-bottom:before {
                  width: 100%;
                  height: var(--s-ui-tooltip-arrow-size, 15px);
                  bottom: 100%;
                  top: auto;
                  left: 0;
                }
.s-wireframe .s-tooltip[placement="bottom"], .s-wireframe .s-tooltip-bottom {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="bottom"], .s-wireframe .s-tooltip[placement="bottom"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip-bottom, .s-wireframe .s-tooltip-bottom[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-tooltip[placement="bottom"], .s-wireframe .s-tooltip-bottom {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-tooltip[placement="bottom"], .s-wireframe .s-tooltip[placement="bottom"][theme$="dark"], [theme$="dark"] .s-wireframe .s-tooltip-bottom, .s-wireframe .s-tooltip-bottom[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
/**
        * @name          Typo
        * @namespace          sugar.style.helpers.typo
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/typography
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply basic typo styles like `sub`, `strong`, etc... on any HTMLElement
        * These styles are defined in the `theme.typo` theme settings.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.typo.classes;
        * 
         * @cssClass            s-typo:h1          Apply the `h1` style
 * @cssClass            s-typo:h2          Apply the `h2` style
 * @cssClass            s-typo:h3          Apply the `h3` style
 * @cssClass            s-typo:h4          Apply the `h4` style
 * @cssClass            s-typo:h5          Apply the `h5` style
 * @cssClass            s-typo:h6          Apply the `h6` style
 * @cssClass            s-typo:p          Apply the `p` style
 * @cssClass            s-typo:lead          Apply the `lead` style
 * @cssClass            s-typo:hr          Apply the `hr` style
 * @cssClass            s-typo:pre:not([class])          Apply the `pre:not([class])` style
 * @cssClass            s-typo:code:not(pre > code)          Apply the `code:not(pre > code)` style
 * @cssClass            s-typo:blockquote          Apply the `blockquote` style
 * @cssClass            s-typo:a          Apply the `a` style
 * @cssClass            s-typo:quote          Apply the `quote` style
 * @cssClass            s-typo:bold          Apply the `bold` style
 * @cssClass            s-typo:italic          Apply the `italic` style
 * @cssClass            s-typo:large          Apply the `large` style
 * @cssClass            s-typo:larger          Apply the `larger` style
 * @cssClass            s-typo:largest          Apply the `largest` style
 * @cssClass            s-typo:small          Apply the `small` style
 * @cssClass            s-typo:smaller          Apply the `smaller` style
 * @cssClass            s-typo:smallest          Apply the `smallest` style
 * @cssClass            s-typo:mark          Apply the `mark` style
 * @cssClass            s-typo:del          Apply the `del` style
 * @cssClass            s-typo:ins          Apply the `ins` style
 * @cssClass            s-typo:sub          Apply the `sub` style
 * @cssClass            s-typo:sup          Apply the `sup` style
 * @cssClass            s-typo:main          Apply the `main` style
 * @cssClass            s-typo:mainGradient          Apply the `mainGradient` style
 * @cssClass            s-typo:accent          Apply the `accent` style
 * @cssClass            s-typo:accentGradient          Apply the `accentGradient` style
 * @cssClass            s-typo:complementary          Apply the `complementary` style
 * @cssClass            s-typo:complementaryGradient          Apply the `complementaryGradient` style
 * @cssClass            s-typo:success          Apply the `success` style
 * @cssClass            s-typo:successGradient          Apply the `successGradient` style
 * @cssClass            s-typo:warning          Apply the `warning` style
 * @cssClass            s-typo:warningGradient          Apply the `warningGradient` style
 * @cssClass            s-typo:error          Apply the `error` style
 * @cssClass            s-typo:errorGradient          Apply the `errorGradient` style
 * @cssClass            s-typo:info          Apply the `info` style
 * @cssClass            s-typo:infoGradient          Apply the `infoGradient` style
        * @cssClass             s-format:text           Format automatically child tags like `strong` to the `s-typo:string` style
        * @cssClass             s-rhythm:vertical           Apply the vertical rhythm to all direct child tags
        *
          * @example        html        h1
            *   <h1 class="s-typo:h1">
            *       Dwayne McDermott
            *   </h1>
            * 
 * @example        html        h2
            *   <h2 class="s-typo:h2">
            *       Karl White
            *   </h2>
            * 
 * @example        html        h3
            *   <h3 class="s-typo:h3">
            *       Dominick Rogahn
            *   </h3>
            * 
 * @example        html        h4
            *   <h4 class="s-typo:h4">
            *       Lucille Jenkins
            *   </h4>
            * 
 * @example        html        h5
            *   <h5 class="s-typo:h5">
            *       John Christiansen
            *   </h5>
            * 
 * @example        html        h6
            *   <h6 class="s-typo:h6">
            *       Bruce Reichel Sr.
            *   </h6>
            * 
 * @example        html        p
            *   <p class="s-typo:p">
            *       Gerald Kshlerin
            *   </p>
            * 
 * @example        html        lead
            *   <lead class="s-typo:lead">
            *       Marjorie Haley
            *   </lead>
            * 
 * @example        html        hr
            *   <hr class="s-typo:hr">
            *       Constance Kirlin
            *   </hr>
            * 
 * @example        html        pre:not([class])
            *   <pre:not([class]) class="s-typo:pre:not([class])">
            *       Jorge Boyle III
            *   </pre:not([class])>
            * 
 * @example        html        code:not(pre > code)
            *   <code:not(pre > code) class="s-typo:code:not(pre > code)">
            *       Gretchen Jaskolski
            *   </code:not(pre > code)>
            * 
 * @example        html        blockquote
            *   <blockquote class="s-typo:blockquote">
            *       David Rogahn
            *   </blockquote>
            * 
 * @example        html        a
            *   <a class="s-typo:a">
            *       Shelley Hilpert
            *   </a>
            * 
 * @example        html        quote
            *   <quote class="s-typo:quote">
            *       Latoya Altenwerth
            *   </quote>
            * 
 * @example        html        bold
            *   <bold class="s-typo:bold">
            *       Pat Steuber Sr.
            *   </bold>
            * 
 * @example        html        italic
            *   <italic class="s-typo:italic">
            *       Tamara Harvey
            *   </italic>
            * 
 * @example        html        large
            *   <large class="s-typo:large">
            *       Cora Hills
            *   </large>
            * 
 * @example        html        larger
            *   <larger class="s-typo:larger">
            *       Sylvester Herzog
            *   </larger>
            * 
 * @example        html        largest
            *   <largest class="s-typo:largest">
            *       Heidi Morar
            *   </largest>
            * 
 * @example        html        small
            *   <small class="s-typo:small">
            *       Mabel Kovacek
            *   </small>
            * 
 * @example        html        smaller
            *   <smaller class="s-typo:smaller">
            *       Lucia Beer
            *   </smaller>
            * 
 * @example        html        smallest
            *   <smallest class="s-typo:smallest">
            *       Celia Mosciski
            *   </smallest>
            * 
 * @example        html        mark
            *   <mark class="s-typo:mark">
            *       Raymond Hermann DVM
            *   </mark>
            * 
 * @example        html        del
            *   <del class="s-typo:del">
            *       Hope Hartmann I
            *   </del>
            * 
 * @example        html        ins
            *   <ins class="s-typo:ins">
            *       Angie Bergnaum
            *   </ins>
            * 
 * @example        html        sub
            *   <sub class="s-typo:sub">
            *       Betty Schoen
            *   </sub>
            * 
 * @example        html        sup
            *   <sup class="s-typo:sup">
            *       Kristine Konopelski
            *   </sup>
            * 
 * @example        html        main
            *   <main class="s-typo:main">
            *       Terry Bergnaum
            *   </main>
            * 
 * @example        html        mainGradient
            *   <mainGradient class="s-typo:mainGradient">
            *       Hazel Ernser
            *   </mainGradient>
            * 
 * @example        html        accent
            *   <accent class="s-typo:accent">
            *       Heidi Beatty
            *   </accent>
            * 
 * @example        html        accentGradient
            *   <accentGradient class="s-typo:accentGradient">
            *       Dr. Vivian Kuhn
            *   </accentGradient>
            * 
 * @example        html        complementary
            *   <complementary class="s-typo:complementary">
            *       Lewis Hane
            *   </complementary>
            * 
 * @example        html        complementaryGradient
            *   <complementaryGradient class="s-typo:complementaryGradient">
            *       Curtis Bosco
            *   </complementaryGradient>
            * 
 * @example        html        success
            *   <success class="s-typo:success">
            *       Benny Stanton
            *   </success>
            * 
 * @example        html        successGradient
            *   <successGradient class="s-typo:successGradient">
            *       Jimmy Williamson
            *   </successGradient>
            * 
 * @example        html        warning
            *   <warning class="s-typo:warning">
            *       Toni Emard
            *   </warning>
            * 
 * @example        html        warningGradient
            *   <warningGradient class="s-typo:warningGradient">
            *       Geraldine Hammes
            *   </warningGradient>
            * 
 * @example        html        error
            *   <error class="s-typo:error">
            *       Clayton Mayert
            *   </error>
            * 
 * @example        html        errorGradient
            *   <errorGradient class="s-typo:errorGradient">
            *       Sheryl Pfannerstill
            *   </errorGradient>
            * 
 * @example        html        info
            *   <info class="s-typo:info">
            *       Curtis Corkery
            *   </info>
            * 
 * @example        html        infoGradient
            *   <infoGradient class="s-typo:infoGradient">
            *       Clifton Purdy
            *   </infoGradient>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-typo-h1 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-80, 4.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
        }
@media (max-width: 639px) {
.s-typo-h1 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-70, 3.2) * var(--s-scale, 1) * var(--s-scale-global, 1)))
        }
}
.s-format-text h1:not(.s-format-none h1), .preview .s-format-text h1 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-80, 4.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
            }
@media (max-width: 639px) {
.s-format-text h1:not(.s-format-none h1), .preview .s-format-text h1 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-70, 3.2) * var(--s-scale, 1) * var(--s-scale-global, 1)))
            }
}
.s-rhythm-vertical > h1,.s-rhythm-vertical >  .h1 {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-h2 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-70, 3.2) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
        }
@media (max-width: 639px) {
.s-typo-h2 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-60, 2.5) * var(--s-scale, 1) * var(--s-scale-global, 1)))
        }
}
.s-format-text h2:not(.s-format-none h2), .preview .s-format-text h2 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-70, 3.2) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
            }
@media (max-width: 639px) {
.s-format-text h2:not(.s-format-none h2), .preview .s-format-text h2 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-60, 2.5) * var(--s-scale, 1) * var(--s-scale-global, 1)))
            }
}
.s-rhythm-vertical > h2,.s-rhythm-vertical >  .h2 {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-h3 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-60, 2.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
        }
@media (max-width: 639px) {
.s-typo-h3 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)))
        }
}
.s-format-text h3:not(.s-format-none h3), .preview .s-format-text h3 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-60, 2.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
            }
@media (max-width: 639px) {
.s-format-text h3:not(.s-format-none h3), .preview .s-format-text h3 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)))
            }
}
.s-rhythm-vertical > h3,.s-rhythm-vertical >  .h3 {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-h4 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
        }
@media (max-width: 639px) {
.s-typo-h4 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)))
        }
}
.s-format-text h4:not(.s-format-none h4), .preview .s-format-text h4 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
            }
@media (max-width: 639px) {
.s-format-text h4:not(.s-format-none h4), .preview .s-format-text h4 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)))
            }
}
.s-rhythm-vertical > h4,.s-rhythm-vertical >  .h4 {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-h5 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
        }
@media (max-width: 639px) {
.s-typo-h5 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)))
        }
}
.s-format-text h5:not(.s-format-none h5), .preview .s-format-text h5 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
            }
@media (max-width: 639px) {
.s-format-text h5:not(.s-format-none h5), .preview .s-format-text h5 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)))
            }
}
.s-rhythm-vertical > h5,.s-rhythm-vertical >  .h5 {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 2);
            }
.s-typo-h6 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
        }
@media (max-width: 639px) {
.s-typo-h6 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)))
        }
}
.s-format-text h6:not(.s-format-none h6), .preview .s-format-text h6 {
                display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
            }
@media (max-width: 639px) {
.s-format-text h6:not(.s-format-none h6), .preview .s-format-text h6 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)))
            }
}
.s-rhythm-vertical > h6,.s-rhythm-vertical >  .h6 {
                
            }
.s-typo-p {
                display: block;font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.8;
max-width: 55ch;
color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),0.5);
        }
.s-format-text p:not(.s-format-none p), .preview .s-format-text p {
                display: block;font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.8;
max-width: 55ch;
color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),0.5);
            }
.s-rhythm-vertical > p,.s-rhythm-vertical >  .p {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 2);
            }
.s-typo-lead {
                display: block;font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.6;
max-width: 55ch;
        }
@media (max-width: 639px) {
.s-typo-lead {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)))
        }
}
.s-format-text lead:not(.s-format-none lead), .preview .s-format-text lead {
                display: block;font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.6;
max-width: 55ch;
            }
@media (max-width: 639px) {
.s-format-text lead:not(.s-format-none lead), .preview .s-format-text lead {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)))
            }
}
.s-rhythm-vertical > lead,.s-rhythm-vertical >  .lead {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 2);
            }
.s-typo-hr {
                display: block;
color: #808080;
opacity: 0.2;
        }
.s-format-text hr:not(.s-format-none hr), .preview .s-format-text hr {
                display: block;
color: #808080;
opacity: 0.2;
            }
.s-rhythm-vertical > hr,.s-rhythm-vertical >  .hr {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-pre:not([class]) {
                display: block;font-family: var(--s-font-family-code-font-family, Menlo, Monaco, Consolas, Courier New, monospace); 
 font-weight: var(--s-font-family-code-font-weight, normal); 
 font-style: var(--s-font-family-code-font-style, normal);
color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1));
line-height: 1.5;
padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);box-shadow: var(--s-depth-0, 0);
        }
.s-format-text pre:not([class]):not(.s-format-none pre:not([class])), .preview .s-format-text pre:not([class]) {
                display: block;font-family: var(--s-font-family-code-font-family, Menlo, Monaco, Consolas, Courier New, monospace); 
 font-weight: var(--s-font-family-code-font-weight, normal); 
 font-style: var(--s-font-family-code-font-style, normal);
color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1));
line-height: 1.5;
padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.25);
padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);box-shadow: var(--s-depth-0, 0);
            }
.s-rhythm-vertical > pre:not([class]),.s-rhythm-vertical >  .pre:not([class]) {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-code:not(pre > code) {
                display: inline-block;font-family: var(--s-font-family-code-font-family, Menlo, Monaco, Consolas, Courier New, monospace); 
 font-weight: var(--s-font-family-code-font-weight, normal); 
 font-style: var(--s-font-family-code-font-style, normal);
color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
line-height: 1.1;
background-color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-surface-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-surface-lightness-offset, 0)) * 1%),var(--s-color-accent-surface-a, 1));
border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.8);
padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
        }
.s-format-text code:not(pre > code):not(.s-format-none code:not(pre > code)), .preview .s-format-text code:not(pre > code) {
                display: inline-block;font-family: var(--s-font-family-code-font-family, Menlo, Monaco, Consolas, Courier New, monospace); 
 font-weight: var(--s-font-family-code-font-weight, normal); 
 font-style: var(--s-font-family-code-font-style, normal);
color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
line-height: 1.1;
background-color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-surface-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-surface-lightness-offset, 0)) * 1%),var(--s-color-accent-surface-a, 1));
border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.8);
padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
            }
.s-rhythm-vertical > code:not(pre > code),.s-rhythm-vertical >  .code:not(pre > code) {
                
            }
.s-typo-blockquote {
                display: block;font-family: var(--s-font-family-quote-font-family, "Palatino, Times, Georgia, serif"); 
 font-weight: var(--s-font-family-quote-font-weight, normal); 
 font-style: var(--s-font-family-quote-font-style, normal);
        }
.s-format-text blockquote:not(.s-format-none blockquote), .preview .s-format-text blockquote {
                display: block;font-family: var(--s-font-family-quote-font-family, "Palatino, Times, Georgia, serif"); 
 font-weight: var(--s-font-family-quote-font-weight, normal); 
 font-style: var(--s-font-family-quote-font-style, normal);
            }
.s-rhythm-vertical > blockquote,.s-rhythm-vertical >  .blockquote {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-a {
                color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
text-decoration: underline;
        }
.s-format-text a:not(.s-format-none a), .preview .s-format-text a {
                color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
text-decoration: underline;
            }
.s-rhythm-vertical > a,.s-rhythm-vertical >  .a {
                
            }
.s-typo-quote {font-family: var(--s-font-family-quote-font-family, "Palatino, Times, Georgia, serif"); 
 font-weight: var(--s-font-family-quote-font-weight, normal); 
 font-style: var(--s-font-family-quote-font-style, normal);
        }
.s-format-text quote:not(.s-format-none quote), .preview .s-format-text quote {font-family: var(--s-font-family-quote-font-family, "Palatino, Times, Georgia, serif"); 
 font-weight: var(--s-font-family-quote-font-weight, normal); 
 font-style: var(--s-font-family-quote-font-style, normal);
            }
.s-rhythm-vertical > quote,.s-rhythm-vertical >  .quote {
                margin-bottom: calc(var(--s-margin-default, 1rem) * 3.5);
            }
.s-typo-bold {
                font-weight: bold;
        }
.s-format-text bold:not(.s-format-none bold), .preview .s-format-text bold {
                font-weight: bold;
            }
.s-rhythm-vertical > bold,.s-rhythm-vertical >  .bold {
                
            }
.s-typo-italic {
                font-style: italic;
        }
.s-format-text italic:not(.s-format-none italic), .preview .s-format-text italic {
                font-style: italic;
            }
.s-rhythm-vertical > italic,.s-rhythm-vertical >  .italic {
                
            }
.s-typo-large {font-size: calc(var(--s-font-size-default, 16px) * 1.1em);
        }
.s-format-text large:not(.s-format-none large), .preview .s-format-text large {font-size: calc(var(--s-font-size-default, 16px) * 1.1em);
            }
.s-rhythm-vertical > large,.s-rhythm-vertical >  .large {
                
            }
.s-typo-larger {font-size: calc(var(--s-font-size-default, 16px) * 1.2em);
        }
.s-format-text larger:not(.s-format-none larger), .preview .s-format-text larger {font-size: calc(var(--s-font-size-default, 16px) * 1.2em);
            }
.s-rhythm-vertical > larger,.s-rhythm-vertical >  .larger {
                
            }
.s-typo-largest {font-size: calc(var(--s-font-size-default, 16px) * 1.3em);
        }
.s-format-text largest:not(.s-format-none largest), .preview .s-format-text largest {font-size: calc(var(--s-font-size-default, 16px) * 1.3em);
            }
.s-rhythm-vertical > largest,.s-rhythm-vertical >  .largest {
                
            }
.s-typo-small {font-size: calc(var(--s-font-size-default, 16px) * 0.9em);
        }
.s-format-text small:not(.s-format-none small), .preview .s-format-text small {font-size: calc(var(--s-font-size-default, 16px) * 0.9em);
            }
.s-rhythm-vertical > small,.s-rhythm-vertical >  .small {
                
            }
.s-typo-smaller {font-size: calc(var(--s-font-size-default, 16px) * 0.8em);
        }
.s-format-text smaller:not(.s-format-none smaller), .preview .s-format-text smaller {font-size: calc(var(--s-font-size-default, 16px) * 0.8em);
            }
.s-rhythm-vertical > smaller,.s-rhythm-vertical >  .smaller {
                
            }
.s-typo-smallest {font-size: calc(var(--s-font-size-default, 16px) * 0.7em);
        }
.s-format-text smallest:not(.s-format-none smallest), .preview .s-format-text smallest {font-size: calc(var(--s-font-size-default, 16px) * 0.7em);
            }
.s-rhythm-vertical > smallest,.s-rhythm-vertical >  .smallest {
                
            }
.s-typo-mark {
                background-color: #ffbb00;
        }
.s-format-text mark:not(.s-format-none mark), .preview .s-format-text mark {
                background-color: #ffbb00;
            }
.s-rhythm-vertical > mark,.s-rhythm-vertical >  .mark {
                
            }
.s-typo-del {
                text-decoration: line-through;
        }
.s-format-text del:not(.s-format-none del), .preview .s-format-text del {
                text-decoration: line-through;
            }
.s-rhythm-vertical > del,.s-rhythm-vertical >  .del {
                
            }
.s-typo-ins {
                text-decoration: underline;
        }
.s-format-text ins:not(.s-format-none ins), .preview .s-format-text ins {
                text-decoration: underline;
            }
.s-rhythm-vertical > ins,.s-rhythm-vertical >  .ins {
                
            }
.s-typo-sub {
                vertical-align: sub;font-size: calc(var(--s-font-size-default, 16px) * 0.6em);
        }
.s-format-text sub:not(.s-format-none sub), .preview .s-format-text sub {
                vertical-align: sub;font-size: calc(var(--s-font-size-default, 16px) * 0.6em);
            }
.s-rhythm-vertical > sub,.s-rhythm-vertical >  .sub {
                
            }
.s-typo-sup {
                vertical-align: sup;font-size: calc(var(--s-font-size-default, 16px) * 0.6em);
        }
.s-format-text sup:not(.s-format-none sup), .preview .s-format-text sup {
                vertical-align: sup;font-size: calc(var(--s-font-size-default, 16px) * 0.6em);
            }
.s-rhythm-vertical > sup,.s-rhythm-vertical >  .sup {
                
            }
.s-typo-main {
                color: #808080;
        }
.s-format-text main:not(.s-format-none main), .preview .s-format-text main {
                color: #808080;
            }
.s-rhythm-vertical > main,.s-rhythm-vertical >  .main {
                
            }
.s-typo-mainGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #808080 0%, #8c8c8c 100%);
        }
.s-format-text mainGradient:not(.s-format-none mainGradient), .preview .s-format-text mainGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #808080 0%, #8c8c8c 100%);
            }
.s-rhythm-vertical > mainGradient,.s-rhythm-vertical >  .mainGradient {
                
            }
.s-typo-accent {
                color: #ffbb00;
        }
.s-format-text accent:not(.s-format-none accent), .preview .s-format-text accent {
                color: #ffbb00;
            }
.s-rhythm-vertical > accent,.s-rhythm-vertical >  .accent {
                
            }
.s-typo-accentGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #ffbb00 0%, #ffc21a 100%);
        }
.s-format-text accentGradient:not(.s-format-none accentGradient), .preview .s-format-text accentGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #ffbb00 0%, #ffc21a 100%);
            }
.s-rhythm-vertical > accentGradient,.s-rhythm-vertical >  .accentGradient {
                
            }
.s-typo-complementary {
                color: #7f53f9;
        }
.s-format-text complementary:not(.s-format-none complementary), .preview .s-format-text complementary {
                color: #7f53f9;
            }
.s-rhythm-vertical > complementary,.s-rhythm-vertical >  .complementary {
                
            }
.s-typo-complementaryGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #8054F9 0%, #916bfa 100%);
        }
.s-format-text complementaryGradient:not(.s-format-none complementaryGradient), .preview .s-format-text complementaryGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #8054F9 0%, #916bfa 100%);
            }
.s-rhythm-vertical > complementaryGradient,.s-rhythm-vertical >  .complementaryGradient {
                
            }
.s-typo-success {
                color: #91ff00;
        }
.s-format-text success:not(.s-format-none success), .preview .s-format-text success {
                color: #91ff00;
            }
.s-rhythm-vertical > success,.s-rhythm-vertical >  .success {
                
            }
.s-typo-successGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #91ff00 0%, #9cff1a 100%);
        }
.s-format-text successGradient:not(.s-format-none successGradient), .preview .s-format-text successGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #91ff00 0%, #9cff1a 100%);
            }
.s-rhythm-vertical > successGradient,.s-rhythm-vertical >  .successGradient {
                
            }
.s-typo-warning {
                color: #ffd500;
        }
.s-format-text warning:not(.s-format-none warning), .preview .s-format-text warning {
                color: #ffd500;
            }
.s-rhythm-vertical > warning,.s-rhythm-vertical >  .warning {
                
            }
.s-typo-warningGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #ffd500 0%, #ffd91a 100%);
        }
.s-format-text warningGradient:not(.s-format-none warningGradient), .preview .s-format-text warningGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #ffd500 0%, #ffd91a 100%);
            }
.s-rhythm-vertical > warningGradient,.s-rhythm-vertical >  .warningGradient {
                
            }
.s-typo-error {
                color: #ff003c;
        }
.s-format-text error:not(.s-format-none error), .preview .s-format-text error {
                color: #ff003c;
            }
.s-rhythm-vertical > error,.s-rhythm-vertical >  .error {
                
            }
.s-typo-errorGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #ff003b 0%, #ff1a4f 100%);
        }
.s-format-text errorGradient:not(.s-format-none errorGradient), .preview .s-format-text errorGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #ff003b 0%, #ff1a4f 100%);
            }
.s-rhythm-vertical > errorGradient,.s-rhythm-vertical >  .errorGradient {
                
            }
.s-typo-info {
                color: #00ffff;
        }
.s-format-text info:not(.s-format-none info), .preview .s-format-text info {
                color: #00ffff;
            }
.s-rhythm-vertical > info,.s-rhythm-vertical >  .info {
                
            }
.s-typo-infoGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #00ffff 0%, #1affff 100%);
        }
.s-format-text infoGradient:not(.s-format-none infoGradient), .preview .s-format-text infoGradient {
                background-size: 100%;
background-image: linear-gradient(90deg, #00ffff 0%, #1affff 100%);
            }
.s-rhythm-vertical > infoGradient,.s-rhythm-vertical >  .infoGradient {
                
            }
.s-container {
            margin: 0 auto;
   
 
        --s-container-max-width: calc(var(--s-layout-container-default, 1280px) * var(--s-scale, 1) * var(--s-scale-global, 1));
            width: 100%;
            max-width: calc(var(--s-layout-container-default, 1280px) * var(--s-scale, 1) * var(--s-scale-global, 1));
        }
.s-container-wide {
            margin: 0 auto;
   
 
        --s-container-max-width: calc(var(--s-layout-container-wide, 1440px) * var(--s-scale, 1) * var(--s-scale-global, 1));
            width: 100%;
            max-width: calc(var(--s-layout-container-wide, 1440px) * var(--s-scale, 1) * var(--s-scale-global, 1));
        }
.s-container-full {
            margin: 0 auto;
   
 
        --s-container-max-width: calc(var(--s-layout-container-full, none) * var(--s-scale, 1) * var(--s-scale-global, 1));
            width: 100%;
            max-width: calc(var(--s-layout-container-full, none) * var(--s-scale, 1) * var(--s-scale-global, 1));
        }
.s-grid-1 {
          display: grid;
          grid-template-columns: repeat(1, minmax(0, 1fr));
        }
.s-grid-2 {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
.s-grid-3 {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
.s-grid-4 {
          display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
.s-grid-5 {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
        }
.s-grid-6 {
          display: grid;
          grid-template-columns: repeat(6, minmax(0, 1fr));
        }
.s-grid-7 {
          display: grid;
          grid-template-columns: repeat(7, minmax(0, 1fr));
        }
.s-grid-8 {
          display: grid;
          grid-template-columns: repeat(8, minmax(0, 1fr));
        }
.s-grid-9 {
          display: grid;
          grid-template-columns: repeat(9, minmax(0, 1fr));
        }
.s-grid-10 {
          display: grid;
          grid-template-columns: repeat(10, minmax(0, 1fr));
        }
.s-grid-11 {
          display: grid;
          grid-template-columns: repeat(11, minmax(0, 1fr));
        }
.s-grid-12 {
          display: grid;
          grid-template-columns: repeat(12, minmax(0, 1fr));
        }
/**
        * @name          Group
        * @namespace          sugar.style.helpers.group
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/group
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to group elements like s-btn, s-input, etc...
        * Note that for this to work fine when direction is "rtl", you MUST specify the dir="rtl" attribute
        * on the html tag
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.group.classes;
        * 
        * @cssClass             s-group             Group some elements (button, inputs, etc...) together
        * 
        * @example       html       Button group
        * <span class="s-group">
        *   <a class="s-btn">I'm a cool block button</a>
        *   <a class="s-btn s-color:accent">+</a>
        * </span>
        * 
        * @example       html       Form input group
        * <span class="s-group s-color:accent">
        *   <input type="text" class="s-input" placeholder="Type something..." />
        *   <input type="text" class="s-input" placeholder="And something else..." />
        * </span>
        * 
        * @example       html       MIxed group
        * <span class="s-group s-color:accent">
        *   <input type="text" class="s-input" placeholder="Type something..." />
        *   <a class="s-btn">+</a>
        * </span>
        * 
        * @example       html           RTL support
        * <span class="s-group" dir="rtl">
        *   <a class="s-btn">I'm a cool block button</a>
        *   <a class="s-btn s-color:accent">+</a>
        * </span>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-group {
          display: flex !important;   
          flex-wrap: nowrap;
          vertical-align: top;
      }
.s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:not(:first-child):not(:last-child),
        .s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:not(:first-child):not(:last-child):before,
        .s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:not(:first-child):not(:last-child):after {
            border-radius: 0 !important;
        }
.s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:first-child:not(:last-child),
        .s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:first-child:not(:last-child):before,
        .s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:first-child:not(:last-child):after {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
.s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:last-child:not(:first-child),
        .s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:last-child:not(:first-child):before,
        .s-group:not([dir="rtl"] .s-group):not(.s-group[dir="rtl"]) > *:last-child:not(:first-child):after {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }
*[dir="rtl"] .s-group > *:not(:last-child):not(:first-child),
        *[dir="rtl"] .s-group > *:not(:last-child):not(:first-child):before,
        *[dir="rtl"] .s-group > *:not(:last-child):not(:first-child):after,
        .s-group[dir="rtl"] > *:not(:last-child):not(:first-child),
        .s-group[dir="rtl"] > *:not(:last-child):not(:first-child):before,
        .s-group[dir="rtl"] > *:not(:last-child):not(:first-child):after {
            border-radius: 0 !important;
        }
*[dir="rtl"] .s-group > *:last-child:not(:first-child),
        *[dir="rtl"] .s-group > *:last-child:not(:first-child):before,
        *[dir="rtl"] .s-group > *:last-child:not(:first-child):after,
        .s-group[dir="rtl"] > *:last-child:not(:first-child),
        .s-group[dir="rtl"] > *:last-child:not(:first-child):before,
        .s-group[dir="rtl"] > *:last-child:not(:first-child):after {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
*[dir="rtl"] .s-group > *:first-child:not(:last-child),
        *[dir="rtl"] .s-group > *:first-child:not(:last-child):before,
        *[dir="rtl"] .s-group > *:first-child:not(:last-child):after,
        .s-group[dir="rtl"] > *:first-child:not(:last-child),
        .s-group[dir="rtl"] > *:first-child:not(:last-child):before,
        .s-group[dir="rtl"] > *:first-child:not(:last-child):after {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }
/**
        * @name          Gradient
        * @namespace          sugar.style.helpers.gradient
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/gradients
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to compose some gradient on your HTMLElement and on your text
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.gradient.classes;
        * 
         * @cssClass         s-gradient:current         Apply the current gradient
                         * @cssClass         s-gradient:text:current    Apply the current text gradient
 * @cssClass         s-gradient:main         Apply the main gradient
                         * @cssClass         s-gradient:text:main    Apply the main text gradient
 * @cssClass         s-gradient:accent         Apply the accent gradient
                         * @cssClass         s-gradient:text:accent    Apply the accent text gradient
 * @cssClass         s-gradient:complementary         Apply the complementary gradient
                         * @cssClass         s-gradient:text:complementary    Apply the complementary text gradient
 * @cssClass         s-gradient:success         Apply the success gradient
                         * @cssClass         s-gradient:text:success    Apply the success text gradient
 * @cssClass         s-gradient:warning         Apply the warning gradient
                         * @cssClass         s-gradient:text:warning    Apply the warning text gradient
 * @cssClass         s-gradient:error         Apply the error gradient
                         * @cssClass         s-gradient:text:error    Apply the error text gradient
 * @cssClass         s-gradient:info         Apply the info gradient
                         * @cssClass         s-gradient:text:info    Apply the info text gradient
        *
         *
                    * @example       html       current gradient
                    * <div class="s-gradient:current s-radius" style="height: 100px"></div>
                    *
 *
                    * @example       html       main gradient
                    * <div class="s-gradient:main s-radius" style="height: 100px"></div>
                    *
 *
                    * @example       html       accent gradient
                    * <div class="s-gradient:accent s-radius" style="height: 100px"></div>
                    *
 *
                    * @example       html       complementary gradient
                    * <div class="s-gradient:complementary s-radius" style="height: 100px"></div>
                    *
 *
                    * @example       html       success gradient
                    * <div class="s-gradient:success s-radius" style="height: 100px"></div>
                    *
 *
                    * @example       html       warning gradient
                    * <div class="s-gradient:warning s-radius" style="height: 100px"></div>
                    *
 *
                    * @example       html       error gradient
                    * <div class="s-gradient:error s-radius" style="height: 100px"></div>
                    *
 *
                    * @example       html       info gradient
                    * <div class="s-gradient:info s-radius" style="height: 100px"></div>
                    *
        *
        * @example       html       Mixed accent/complementary gradient
        * <div class="s-gradient:accent:end-complementary s-radius" style="height: 100px"></div>
        * 
        * @example       html       Mixed complementary/error gradient
        * <div class="s-gradient:complementary:end-error s-radius" style="height: 100px"></div>
        *
        * @example       html       Linear gradient with an angle
        * <div class="s-gradient:complementary:end-error:a-0 s-radius" style="height: 100px"></div>
        * 
        * @example       html       Radial gradient
        * <div class="s-gradient:radial:accent s-radius" style="height: 250px"></div>
        * 
        * @example       html       Radial gradient with position
        * <div class="s-gradient:radial:complementary:x-10:y-90 s-radius" style="height: 250px"></div>
        *
         *
                    * @example       html       current text gradient
                    * <div class="s-gradient:text:current s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
 *
                    * @example       html       main text gradient
                    * <div class="s-gradient:text:main s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
 *
                    * @example       html       accent text gradient
                    * <div class="s-gradient:text:accent s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
 *
                    * @example       html       complementary text gradient
                    * <div class="s-gradient:text:complementary s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
 *
                    * @example       html       success text gradient
                    * <div class="s-gradient:text:success s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
 *
                    * @example       html       warning text gradient
                    * <div class="s-gradient:text:warning s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
 *
                    * @example       html       error text gradient
                    * <div class="s-gradient:text:error s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
 *
                    * @example       html       info text gradient
                    * <div class="s-gradient:text:info s-typo:bold s-font:80 s-display:inline-block s-display:inline-block">
                    *   I wish I was a shiny text gradient... But...
                    * </div>
                    *
        * 
        * @example       html       Mixed accent/complementary text gradient
        * <div class="s-gradient:text:accent:end-complementary s-typo:bold s-font:80 s-display:inline-block">
        *   I wish I was a shiny text gradient... But...
        * </div>
        * 
        * @example       html       Mixed complementary/error gradient
        * <div class="s-gradient:text:complementary:end-error s-typo:bold s-font:80 s-display:inline-block">
        *   I wish I was a shiny text gradient... But...
        * </div>
        *
        * @example       html       Linear gradient with an angle
        * <div class="s-gradient:text:complementary:end-error:a-0 s-typo:bold s-font:80 s-display:inline-block">
        *   I wish I was a shiny text gradient... But...
        * </div>
        * 
        * @example       html       Radial gradient
        * <div class="s-gradient:text:radial:accent:end-error s-typo:bold s-font:80 s-display:inline-block">
        *   I wish I was a shiny text gradient... But...
        * </div>
        * 
        * @example       html       Radial gradient with position
        * <div class="s-gradient:text:radial:complementary:end-accent:x-30:y-100 s-typo:bold s-font:80 s-display:inline-block">
        *   I wish I was a shiny text gradient... But...
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-gradient-current:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-current.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1))) 100%);
          }
.s-gradient-current.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-text-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-text-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-text-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-text-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-current.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-text-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-text-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-text-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-text-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-current {
                --s-gradient-end: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
            }
.s-gradient-main:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0)) * 1%),var(--s-color-main-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-main.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0)) * 1%),var(--s-color-main-a, 1))) 100%);
          }
.s-gradient-main.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-main.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-main {
                --s-gradient-end: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0)) * 1%),var(--s-color-main-a, 1));
            }
.s-gradient-accent:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-accent.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1))) 100%);
          }
.s-gradient-accent.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-text-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-text-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-text-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-text-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-accent.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-text-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-text-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-text-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-text-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-accent {
                --s-gradient-end: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
            }
.s-gradient-complementary:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0)) * 1%),var(--s-color-complementary-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-complementary.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0)) * 1%),var(--s-color-complementary-a, 1))) 100%);
          }
.s-gradient-complementary.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-text-spin ,0)),calc((var(--s-color-complementary-s, 0) + var(--s-color-complementary-text-saturation-offset, 0)) * 1%),calc((var(--s-color-complementary-l, 0) + var(--s-color-complementary-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-text-spin ,0)),calc((var(--s-color-complementary-s, 0) + var(--s-color-complementary-text-saturation-offset, 0)) * 1%),calc((var(--s-color-complementary-l, 0) + var(--s-color-complementary-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-complementary.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-text-spin ,0)),calc((var(--s-color-complementary-s, 0) + var(--s-color-complementary-text-saturation-offset, 0)) * 1%),calc((var(--s-color-complementary-l, 0) + var(--s-color-complementary-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-text-spin ,0)),calc((var(--s-color-complementary-s, 0) + var(--s-color-complementary-text-saturation-offset, 0)) * 1%),calc((var(--s-color-complementary-l, 0) + var(--s-color-complementary-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-complementary {
                --s-gradient-end: hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0)) * 1%),var(--s-color-complementary-a, 1));
            }
.s-gradient-success:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0)) * 1%),var(--s-color-success-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-success.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0)) * 1%),var(--s-color-success-a, 1))) 100%);
          }
.s-gradient-success.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-text-spin ,0)),calc((var(--s-color-success-s, 0) + var(--s-color-success-text-saturation-offset, 0)) * 1%),calc((var(--s-color-success-l, 0) + var(--s-color-success-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-text-spin ,0)),calc((var(--s-color-success-s, 0) + var(--s-color-success-text-saturation-offset, 0)) * 1%),calc((var(--s-color-success-l, 0) + var(--s-color-success-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-success.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-text-spin ,0)),calc((var(--s-color-success-s, 0) + var(--s-color-success-text-saturation-offset, 0)) * 1%),calc((var(--s-color-success-l, 0) + var(--s-color-success-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-text-spin ,0)),calc((var(--s-color-success-s, 0) + var(--s-color-success-text-saturation-offset, 0)) * 1%),calc((var(--s-color-success-l, 0) + var(--s-color-success-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-success {
                --s-gradient-end: hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0)) * 1%),var(--s-color-success-a, 1));
            }
.s-gradient-warning:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0)) * 1%),var(--s-color-warning-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-warning.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0)) * 1%),var(--s-color-warning-a, 1))) 100%);
          }
.s-gradient-warning.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-text-spin ,0)),calc((var(--s-color-warning-s, 0) + var(--s-color-warning-text-saturation-offset, 0)) * 1%),calc((var(--s-color-warning-l, 0) + var(--s-color-warning-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-text-spin ,0)),calc((var(--s-color-warning-s, 0) + var(--s-color-warning-text-saturation-offset, 0)) * 1%),calc((var(--s-color-warning-l, 0) + var(--s-color-warning-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-warning.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-text-spin ,0)),calc((var(--s-color-warning-s, 0) + var(--s-color-warning-text-saturation-offset, 0)) * 1%),calc((var(--s-color-warning-l, 0) + var(--s-color-warning-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-text-spin ,0)),calc((var(--s-color-warning-s, 0) + var(--s-color-warning-text-saturation-offset, 0)) * 1%),calc((var(--s-color-warning-l, 0) + var(--s-color-warning-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-warning {
                --s-gradient-end: hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0)) * 1%),var(--s-color-warning-a, 1));
            }
.s-gradient-error:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0)) * 1%),var(--s-color-error-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-error.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0)) * 1%),var(--s-color-error-a, 1))) 100%);
          }
.s-gradient-error.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-text-spin ,0)),calc((var(--s-color-error-s, 0) + var(--s-color-error-text-saturation-offset, 0)) * 1%),calc((var(--s-color-error-l, 0) + var(--s-color-error-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-text-spin ,0)),calc((var(--s-color-error-s, 0) + var(--s-color-error-text-saturation-offset, 0)) * 1%),calc((var(--s-color-error-l, 0) + var(--s-color-error-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-error.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-text-spin ,0)),calc((var(--s-color-error-s, 0) + var(--s-color-error-text-saturation-offset, 0)) * 1%),calc((var(--s-color-error-l, 0) + var(--s-color-error-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-text-spin ,0)),calc((var(--s-color-error-s, 0) + var(--s-color-error-text-saturation-offset, 0)) * 1%),calc((var(--s-color-error-l, 0) + var(--s-color-error-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-error {
                --s-gradient-end: hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0)) * 1%),var(--s-color-error-a, 1));
            }
.s-gradient-info:not(.s-gradient-text):not(.s-gradient-radial) {background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0)) * 1%),var(--s-color-info-a, 1))) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0) + 20) * 1%),1)) 100%);
          }
.s-gradient-info.s-gradient-radial:not(.s-gradient-text) {background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0) + 20) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0)) * 1%),var(--s-color-info-a, 1))) 100%);
          }
.s-gradient-info.s-gradient-text:not(.s-gradient-radial) {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: linear-gradient(var(--s-gradient-angle, 90deg), var(--s-gradient-start, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-text-spin ,0)),calc((var(--s-color-info-s, 0) + var(--s-color-info-text-saturation-offset, 0)) * 1%),calc((var(--s-color-info-l, 0) + var(--s-color-info-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-text-spin ,0)),calc((var(--s-color-info-s, 0) + var(--s-color-info-text-saturation-offset, 0)) * 1%),calc((var(--s-color-info-l, 0) + var(--s-color-info-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-info.s-gradient-text.s-gradient-radial {background-size: 100%;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;background-image: radial-gradient(farthest-corner at var(--s-gradient-x, 50%) var(--s-gradient-y, 50%), var(--s-gradient-start, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-text-spin ,0)),calc((var(--s-color-info-s, 0) + var(--s-color-info-text-saturation-offset, 0)) * 1%),calc((var(--s-color-info-l, 0) + var(--s-color-info-text-lightness-offset, 0) + -5) * 1%),1)) 0%, var(--s-gradient-end, hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-text-spin ,0)),calc((var(--s-color-info-s, 0) + var(--s-color-info-text-saturation-offset, 0)) * 1%),calc((var(--s-color-info-l, 0) + var(--s-color-info-text-lightness-offset, 0) + 5) * 1%),1)) 100%);
          }
.s-gradient-end-info {
                --s-gradient-end: hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0)) * 1%),var(--s-color-info-a, 1));
            }
.s-gradient-a-0 {
            --s-gradient-angle: 0deg;
        }
.s-gradient-a-45 {
            --s-gradient-angle: 45deg;
        }
.s-gradient-a-90 {
            --s-gradient-angle: 90deg;
        }
.s-gradient-a-135 {
            --s-gradient-angle: 135deg;
        }
.s-gradient-a-180 {
            --s-gradient-angle: 180deg;
        }
.s-gradient-a-225 {
            --s-gradient-angle: 225deg;
        }
.s-gradient-a-270 {
            --s-gradient-angle: 270deg;
        }
.s-gradient-y-0 {
            --s-gradient-y: 0%;
        }
.s-gradient-y-10 {
            --s-gradient-y: 10%;
        }
.s-gradient-y-20 {
            --s-gradient-y: 20%;
        }
.s-gradient-y-30 {
            --s-gradient-y: 30%;
        }
.s-gradient-y-40 {
            --s-gradient-y: 40%;
        }
.s-gradient-y-50 {
            --s-gradient-y: 50%;
        }
.s-gradient-y-60 {
            --s-gradient-y: 60%;
        }
.s-gradient-y-70 {
            --s-gradient-y: 70%;
        }
.s-gradient-y-80 {
            --s-gradient-y: 80%;
        }
.s-gradient-y-90 {
            --s-gradient-y: 90%;
        }
.s-gradient-y-100 {
            --s-gradient-y: 100%;
        }
.s-gradient-x-0 {
            --s-gradient-x: 0%;
        }
.s-gradient-x-10 {
            --s-gradient-x: 10%;
        }
.s-gradient-x-20 {
            --s-gradient-x: 20%;
        }
.s-gradient-x-30 {
            --s-gradient-x: 30%;
        }
.s-gradient-x-40 {
            --s-gradient-x: 40%;
        }
.s-gradient-x-50 {
            --s-gradient-x: 50%;
        }
.s-gradient-x-60 {
            --s-gradient-x: 60%;
        }
.s-gradient-x-70 {
            --s-gradient-x: 70%;
        }
.s-gradient-x-80 {
            --s-gradient-x: 80%;
        }
.s-gradient-x-90 {
            --s-gradient-x: 90%;
        }
.s-gradient-x-100 {
            --s-gradient-x: 100%;
        }
.s-layout-1 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
}
.s-layout-12 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-21 > *:nth-child(1) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-21 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-21 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-112 > *:nth-child(2) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-112 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-112 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-122 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-122 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-122 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-123 > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-211 > *:nth-child(1) {
                    grid-column-start: 2;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-211 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-211 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-221 > *:nth-child(1) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-221 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-221 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-321 > *:nth-child(1) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-321 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-321 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-321 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1112 > *:nth-child(2) {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1112 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1112 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1222 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1222 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1222 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1234 > *:nth-child(4) {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234 > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-2221 > *:nth-child(1) {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-2221 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-2221 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-11112 > *:nth-child(2) {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-11112 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-11112 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-12222 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12222 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12222 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-12345 > *:nth-child(5) {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12345 > *:nth-child(4) {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12345 > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12345 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12345 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12345 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-22221 > *:nth-child(1) {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-22221 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-22221 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-111112 > *:nth-child(2) {
                    grid-column-start: 6;
                    grid-column-end: 7;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-111112 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-111112 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-122222 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 7;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-122222 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-122222 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-123456 > *:nth-child(6) {
                    grid-column-start: 6;
                    grid-column-end: 7;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123456 > *:nth-child(5) {
                    grid-column-start: 5;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123456 > *:nth-child(4) {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123456 > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123456 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123456 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123456 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1_2 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1_2 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
}
.s-layout-2_1 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-2_1 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-2_1 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
}
.s-layout-12_33 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-12_33 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12_33 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12_33 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1_23 > *:nth-child(3) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_23 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_23 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1_23 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1_2_3 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 3;
                    grid-row-end: 4;
}
.s-layout-1_2_3 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2_3 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1_2_3 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
}
.s-layout-32_1 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-32_1 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-32_1 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-32_1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-3_21 > *:nth-child(1) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-3_21 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-3_21 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-3_21 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-12_34 > *:nth-child(4) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-12_34 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-12_34 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12_34 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12_34 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-123_4 > *:nth-child(4) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-123_4 > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123_4 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123_4 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123_4 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1_234 > *:nth-child(4) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_234 > *:nth-child(3) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_234 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_234 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1_234 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1_2_3_4 > *:nth-child(4) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 4;
                    grid-row-end: 5;
}
.s-layout-1_2_3_4 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 3;
                    grid-row-end: 4;
}
.s-layout-1_2_3_4 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2_3_4 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1_2_3_4 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
}
.s-layout-123_45 > *:nth-child(5) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-123_45 > *:nth-child(4) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-123_45 > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123_45 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123_45 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-123_45 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-12_345 > *:nth-child(5) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-12_345 > *:nth-child(4) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-12_345 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-12_345 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12_345 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-12_345 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1_2345 > *:nth-child(5) {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2345 > *:nth-child(4) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2345 > *:nth-child(3) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2345 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2345 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1_2345 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1234_5 > *:nth-child(5) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1234_5 > *:nth-child(4) {
                    grid-column-start: 4;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234_5 > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234_5 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234_5 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1234_5 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
}
.s-layout-1_2_3_4_5 > *:nth-child(5) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 5;
                    grid-row-end: 6;
}
.s-layout-1_2_3_4_5 > *:nth-child(4) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 4;
                    grid-row-end: 5;
}
.s-layout-1_2_3_4_5 > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 3;
                    grid-row-end: 4;
}
.s-layout-1_2_3_4_5 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
}
.s-layout-1_2_3_4_5 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-layout-1_2_3_4_5 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
}
.s-layout-gap-x-0 > * {
        padding-left: 0;
        padding-right: 0;
      }
.s-layout-gap-y-0 > * {
        padding-top: 0;
        padding-bottom: 0;
      }
.s-layout-gap-0 > * {
        padding: 0;
      }
.s-layout-gap-x-10 > * {
        padding-left: var(--s-space-10, 0.375);
        padding-right: var(--s-space-10, 0.375);
      }
.s-layout-gap-y-10 > * {
        padding-top: var(--s-space-10, 0.375);
        padding-bottom: var(--s-space-10, 0.375);
      }
.s-layout-gap-10 > * {
        padding: var(--s-space-10, 0.375);
      }
.s-layout-gap-x-20 > * {
        padding-left: var(--s-space-20, 0.75);
        padding-right: var(--s-space-20, 0.75);
      }
.s-layout-gap-y-20 > * {
        padding-top: var(--s-space-20, 0.75);
        padding-bottom: var(--s-space-20, 0.75);
      }
.s-layout-gap-20 > * {
        padding: var(--s-space-20, 0.75);
      }
.s-layout-gap-x-30 > * {
        padding-left: var(--s-space-30, 1.4);
        padding-right: var(--s-space-30, 1.4);
      }
.s-layout-gap-y-30 > * {
        padding-top: var(--s-space-30, 1.4);
        padding-bottom: var(--s-space-30, 1.4);
      }
.s-layout-gap-30 > * {
        padding: var(--s-space-30, 1.4);
      }
.s-layout-gap-x-40 > * {
        padding-left: var(--s-space-40, 2);
        padding-right: var(--s-space-40, 2);
      }
.s-layout-gap-y-40 > * {
        padding-top: var(--s-space-40, 2);
        padding-bottom: var(--s-space-40, 2);
      }
.s-layout-gap-40 > * {
        padding: var(--s-space-40, 2);
      }
.s-layout-gap-x-50 > * {
        padding-left: var(--s-space-50, 3.5);
        padding-right: var(--s-space-50, 3.5);
      }
.s-layout-gap-y-50 > * {
        padding-top: var(--s-space-50, 3.5);
        padding-bottom: var(--s-space-50, 3.5);
      }
.s-layout-gap-50 > * {
        padding: var(--s-space-50, 3.5);
      }
.s-layout-gap-x-60 > * {
        padding-left: var(--s-space-60, 5);
        padding-right: var(--s-space-60, 5);
      }
.s-layout-gap-y-60 > * {
        padding-top: var(--s-space-60, 5);
        padding-bottom: var(--s-space-60, 5);
      }
.s-layout-gap-60 > * {
        padding: var(--s-space-60, 5);
      }
.s-layout-gap-x-70 > * {
        padding-left: var(--s-space-70, 7.5);
        padding-right: var(--s-space-70, 7.5);
      }
.s-layout-gap-y-70 > * {
        padding-top: var(--s-space-70, 7.5);
        padding-bottom: var(--s-space-70, 7.5);
      }
.s-layout-gap-70 > * {
        padding: var(--s-space-70, 7.5);
      }
.s-layout-gap-x-80 > * {
        padding-left: var(--s-space-80, 10);
        padding-right: var(--s-space-80, 10);
      }
.s-layout-gap-y-80 > * {
        padding-top: var(--s-space-80, 10);
        padding-bottom: var(--s-space-80, 10);
      }
.s-layout-gap-80 > * {
        padding: var(--s-space-80, 10);
      }
.s-layout-gap-x-90 > * {
        padding-left: var(--s-space-90, 15);
        padding-right: var(--s-space-90, 15);
      }
.s-layout-gap-y-90 > * {
        padding-top: var(--s-space-90, 15);
        padding-bottom: var(--s-space-90, 15);
      }
.s-layout-gap-90 > * {
        padding: var(--s-space-90, 15);
      }
.s-layout-gap-x-100 > * {
        padding-left: var(--s-space-100, 20);
        padding-right: var(--s-space-100, 20);
      }
.s-layout-gap-y-100 > * {
        padding-top: var(--s-space-100, 20);
        padding-bottom: var(--s-space-100, 20);
      }
.s-layout-gap-100 > * {
        padding: var(--s-space-100, 20);
      }
.s-layout-gap-x > * {
        padding-left: var(--s-space-default, 1rem);
        padding-right: var(--s-space-default, 1rem);
      }
.s-layout-gap-y > * {
        padding-top: var(--s-space-default, 1rem);
        padding-bottom: var(--s-space-default, 1rem);
      }
.s-layout-gap > * {
        padding: var(--s-space-default, 1rem);
      }
.s-layout-gap-between > *:first-child {
          padding-left: 0 !important;
        }
.s-layout-gap-between > *:last-child {
          padding-right: 0 !important;
        }
.s-layout-align-start {
          align-items: start;
        }
.s-layout-align-end {
          align-items: end;
        }
.s-layout-align-center {
          align-items: center;
        }
.s-layout-align-stretch {
          align-items: stretch;
        }
.s-layout-justify-start {
          justify-items: start;
        }
.s-layout-justify-end {
          justify-items: end;
        }
.s-layout-justify-center {
          justify-items: center;
        }
.s-layout-justify-stretch {
          justify-items: stretch;
        }
/**
        * @name          Clearfix
        * @namespace          sugar.style.helpers.clearfix
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/clearfix
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply a clearfix on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.clearfix.classes;
        * 
        * .my-element {
        *   \@sugar.clearfix;
        * }         
        * 
         * @cssClass     s-clearfixs-clearfix            Apply the overflow clearfix
 * @cssClass     s-clearfixs-clearfix:facebook            Apply the facebook clearfix
 * @cssClass     s-clearfixs-clearfix:micro            Apply the micro clearfix
 * @cssClass     s-clearfixs-clearfix:after            Apply the after clearfix
        * 
         * @example        html         overflow
            *   <div class="s-clearfix s-bg:ui">
            *       <img src="https://picsum.photos/200/200" style="float: right" />
            *   </div>
            * 
 * @example        html         facebook
            *   <div class="s-clearfix:facebook s-bg:ui">
            *       <img src="https://picsum.photos/200/200" style="float: right" />
            *   </div>
            * 
 * @example        html         micro
            *   <div class="s-clearfix:micro s-bg:ui">
            *       <img src="https://picsum.photos/200/200" style="float: right" />
            *   </div>
            * 
 * @example        html         after
            *   <div class="s-clearfix:after s-bg:ui">
            *       <img src="https://picsum.photos/200/200" style="float: right" />
            *   </div>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-clearfix:not(.s-clearfix-facebook):not(.s-clearfix-micro):not(.s-clearfix-after) {overflow: hidden;
                }
.s-clearfix-facebook {display: table-cell;
                vertical-align: top;
                width: 10000px !important;
                }
.s-clearfix-micro {zoom: 1;
                }
.s-clearfix-micro:before,
                .s-clearfix-micro:after {
                    content: ' ';
                    display: table;
                }
.s-clearfix-micro:after {
                    clear: both;
                }
.s-clearfix-after:after {
                    content: "";
                    clear: both;
                    display: table;
                }
/**
        * @name          Cursor
        * @namespace          sugar.style.helpers.cursor
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/cursor
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply a specific cursor on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.cursor.classes; 
        * 
         * @cssClass     s-cursor:auto            Apply the auto cursor
 * @cssClass     s-cursor:default            Apply the default cursor
 * @cssClass     s-cursor:none            Apply the none cursor
 * @cssClass     s-cursor:context-menu            Apply the context-menu cursor
 * @cssClass     s-cursor:help            Apply the help cursor
 * @cssClass     s-cursor:pointer            Apply the pointer cursor
 * @cssClass     s-cursor:progress            Apply the progress cursor
 * @cssClass     s-cursor:wait            Apply the wait cursor
 * @cssClass     s-cursor:cell            Apply the cell cursor
 * @cssClass     s-cursor:crosshair            Apply the crosshair cursor
 * @cssClass     s-cursor:text            Apply the text cursor
 * @cssClass     s-cursor:vertical-text            Apply the vertical-text cursor
 * @cssClass     s-cursor:alias            Apply the alias cursor
 * @cssClass     s-cursor:copy            Apply the copy cursor
 * @cssClass     s-cursor:move            Apply the move cursor
 * @cssClass     s-cursor:no-drop            Apply the no-drop cursor
 * @cssClass     s-cursor:not-allowed            Apply the not-allowed cursor
 * @cssClass     s-cursor:e-resize            Apply the e-resize cursor
 * @cssClass     s-cursor:n-resize            Apply the n-resize cursor
 * @cssClass     s-cursor:ne-resize            Apply the ne-resize cursor
 * @cssClass     s-cursor:nw-resize            Apply the nw-resize cursor
 * @cssClass     s-cursor:s-resize            Apply the s-resize cursor
 * @cssClass     s-cursor:se-resize            Apply the se-resize cursor
 * @cssClass     s-cursor:sw-resize            Apply the sw-resize cursor
 * @cssClass     s-cursor:w-resize            Apply the w-resize cursor
 * @cssClass     s-cursor:ew-resize            Apply the ew-resize cursor
 * @cssClass     s-cursor:ns-resize            Apply the ns-resize cursor
 * @cssClass     s-cursor:nesw-resize            Apply the nesw-resize cursor
 * @cssClass     s-cursor:nwse-resize            Apply the nwse-resize cursor
 * @cssClass     s-cursor:col-resize            Apply the col-resize cursor
 * @cssClass     s-cursor:row-resize            Apply the row-resize cursor
 * @cssClass     s-cursor:all-scroll            Apply the all-scroll cursor
 * @cssClass     s-cursor:zoom-in            Apply the zoom-in cursor
 * @cssClass     s-cursor:zoom-out            Apply the zoom-out cursor
 * @cssClass     s-cursor:grab            Apply the grab cursor
 * @cssClass     s-cursor:grabbing            Apply the grabbing cursor
        * 
        * @example         html
        * <div class="s-grid:5 s-gap:30 @tablet s-grid:3 @mobile s-grid:1">
         *   <div class="s-cursor:auto s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">auto</p>
        *   </div>
            * 
 *   <div class="s-cursor:default s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">default</p>
        *   </div>
            * 
 *   <div class="s-cursor:none s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">none</p>
        *   </div>
            * 
 *   <div class="s-cursor:context-menu s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">context-menu</p>
        *   </div>
            * 
 *   <div class="s-cursor:help s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">help</p>
        *   </div>
            * 
 *   <div class="s-cursor:pointer s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">pointer</p>
        *   </div>
            * 
 *   <div class="s-cursor:progress s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">progress</p>
        *   </div>
            * 
 *   <div class="s-cursor:wait s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">wait</p>
        *   </div>
            * 
 *   <div class="s-cursor:cell s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">cell</p>
        *   </div>
            * 
 *   <div class="s-cursor:crosshair s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">crosshair</p>
        *   </div>
            * 
 *   <div class="s-cursor:text s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">text</p>
        *   </div>
            * 
 *   <div class="s-cursor:vertical-text s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">vertical-text</p>
        *   </div>
            * 
 *   <div class="s-cursor:alias s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">alias</p>
        *   </div>
            * 
 *   <div class="s-cursor:copy s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">copy</p>
        *   </div>
            * 
 *   <div class="s-cursor:move s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">move</p>
        *   </div>
            * 
 *   <div class="s-cursor:no-drop s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">no-drop</p>
        *   </div>
            * 
 *   <div class="s-cursor:not-allowed s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">not-allowed</p>
        *   </div>
            * 
 *   <div class="s-cursor:e-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">e-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:n-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">n-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:ne-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">ne-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:nw-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">nw-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:s-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">s-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:se-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">se-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:sw-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">sw-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:w-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">w-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:ew-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">ew-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:ns-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">ns-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:nesw-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">nesw-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:nwse-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">nwse-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:col-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">col-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:row-resize s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">row-resize</p>
        *   </div>
            * 
 *   <div class="s-cursor:all-scroll s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">all-scroll</p>
        *   </div>
            * 
 *   <div class="s-cursor:zoom-in s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">zoom-in</p>
        *   </div>
            * 
 *   <div class="s-cursor:zoom-out s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">zoom-out</p>
        *   </div>
            * 
 *   <div class="s-cursor:grab s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">grab</p>
        *   </div>
            * 
 *   <div class="s-cursor:grabbing s-bg:main-surface s-p:30 s-text:center s-ratio:16-9" style="padding-block-start: 30%">
                <p class="s-typo:p:bold">grabbing</p>
        *   </div>
            * 
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-cursor-auto {
            cursor: auto;
        }
.s-cursor-default {
            cursor: default;
        }
.s-cursor-none {
            cursor: none;
        }
.s-cursor-context-menu {
            cursor: context-menu;
        }
.s-cursor-help {
            cursor: help;
        }
.s-cursor-pointer {
            cursor: pointer;
        }
.s-cursor-progress {
            cursor: progress;
        }
.s-cursor-wait {
            cursor: wait;
        }
.s-cursor-cell {
            cursor: cell;
        }
.s-cursor-crosshair {
            cursor: crosshair;
        }
.s-cursor-text {
            cursor: text;
        }
.s-cursor-vertical-text {
            cursor: vertical-text;
        }
.s-cursor-alias {
            cursor: alias;
        }
.s-cursor-copy {
            cursor: copy;
        }
.s-cursor-move {
            cursor: move;
        }
.s-cursor-no-drop {
            cursor: no-drop;
        }
.s-cursor-not-allowed {
            cursor: not-allowed;
        }
.s-cursor-e-resize {
            cursor: e-resize;
        }
.s-cursor-n-resize {
            cursor: n-resize;
        }
.s-cursor-ne-resize {
            cursor: ne-resize;
        }
.s-cursor-nw-resize {
            cursor: nw-resize;
        }
.s-cursor-s-resize {
            cursor: s-resize;
        }
.s-cursor-se-resize {
            cursor: se-resize;
        }
.s-cursor-sw-resize {
            cursor: sw-resize;
        }
.s-cursor-w-resize {
            cursor: w-resize;
        }
.s-cursor-ew-resize {
            cursor: ew-resize;
        }
.s-cursor-ns-resize {
            cursor: ns-resize;
        }
.s-cursor-nesw-resize {
            cursor: nesw-resize;
        }
.s-cursor-nwse-resize {
            cursor: nwse-resize;
        }
.s-cursor-col-resize {
            cursor: col-resize;
        }
.s-cursor-row-resize {
            cursor: row-resize;
        }
.s-cursor-all-scroll {
            cursor: all-scroll;
        }
.s-cursor-zoom-in {
            cursor: zoom-in;
        }
.s-cursor-zoom-out {
            cursor: zoom-out;
        }
.s-cursor-grab {
            cursor: grab;
        }
.s-cursor-grabbing {
            cursor: grabbing;
        }
/**
        * @name          Colors
        * @namespace          sugar.style.helpers.color
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/colors
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to set text and background colors easily to any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.color.classes;
        * 
        * .my-element {
        *   \@sugar.color(accent);
        * }                   
        * 
         * @cssClass            s-color:current       Apply the current color for the "current" color
 * @cssClass            s-color:main       Apply the main color for the "current" color
 * @cssClass            s-color:accent       Apply the accent color for the "current" color
 * @cssClass            s-color:complementary       Apply the complementary color for the "current" color
 * @cssClass            s-color:success       Apply the success color for the "current" color
 * @cssClass            s-color:warning       Apply the warning color for the "current" color
 * @cssClass            s-color:error       Apply the error color for the "current" color
 * @cssClass            s-color:info       Apply the info color for the "current" color
         * @cssClass            s-tc:current       Apply the current text color
 * @cssClass            s-tc:main       Apply the main text color
 * @cssClass            s-tc:accent       Apply the accent text color
 * @cssClass            s-tc:complementary       Apply the complementary text color
 * @cssClass            s-tc:success       Apply the success text color
 * @cssClass            s-tc:warning       Apply the warning text color
 * @cssClass            s-tc:error       Apply the error text color
 * @cssClass            s-tc:info       Apply the info text color
         * @cssClass            s-bg:current       Apply the current background color
 * @cssClass            s-bg:main       Apply the main background color
 * @cssClass            s-bg:accent       Apply the accent background color
 * @cssClass            s-bg:complementary       Apply the complementary background color
 * @cssClass            s-bg:success       Apply the success background color
 * @cssClass            s-bg:warning       Apply the warning background color
 * @cssClass            s-bg:error       Apply the error background color
 * @cssClass            s-bg:info       Apply the info background color
        *
        * @example        html          Text color
         * <h4 class="s-typo:h4 s-mbe:20">current</h4>
                    * <div class="s-tc:current s-mb:30">Orville Deckow DVM</div>
 * <h4 class="s-typo:h4 s-mbe:20">main</h4>
                    * <div class="s-tc:main s-mb:30">Kari Lowe</div>
 * <h4 class="s-typo:h4 s-mbe:20">accent</h4>
                    * <div class="s-tc:accent s-mb:30">Betty Crona</div>
 * <h4 class="s-typo:h4 s-mbe:20">complementary</h4>
                    * <div class="s-tc:complementary s-mb:30">Vicky Terry</div>
 * <h4 class="s-typo:h4 s-mbe:20">success</h4>
                    * <div class="s-tc:success s-mb:30">Philip Stanton</div>
 * <h4 class="s-typo:h4 s-mbe:20">warning</h4>
                    * <div class="s-tc:warning s-mb:30">Josh MacGyver</div>
 * <h4 class="s-typo:h4 s-mbe:20">error</h4>
                    * <div class="s-tc:error s-mb:30">Travis Glover</div>
 * <h4 class="s-typo:h4 s-mbe:20">info</h4>
                    * <div class="s-tc:info s-mb:30">Julian Bechtelar IV</div>
        *
        * @example        html          Background color
          * <h4 class="s-typo:h4 s-mbe:20">current</h4>
                    * <div class="s-bg:current s-p:10 s-mb:30 s-radius">Tyler Hudson</div>
  * <h4 class="s-typo:h4 s-mbe:20">main</h4>
                    * <div class="s-bg:main s-p:10 s-mb:30 s-radius">Willie Schaefer</div>
  * <h4 class="s-typo:h4 s-mbe:20">accent</h4>
                    * <div class="s-bg:accent s-p:10 s-mb:30 s-radius">Randy Mann</div>
  * <h4 class="s-typo:h4 s-mbe:20">complementary</h4>
                    * <div class="s-bg:complementary s-p:10 s-mb:30 s-radius">Brenda Leannon</div>
  * <h4 class="s-typo:h4 s-mbe:20">success</h4>
                    * <div class="s-bg:success s-p:10 s-mb:30 s-radius">Alberta Rosenbaum</div>
  * <h4 class="s-typo:h4 s-mbe:20">warning</h4>
                    * <div class="s-bg:warning s-p:10 s-mb:30 s-radius">Miss Eddie VonRueden</div>
  * <h4 class="s-typo:h4 s-mbe:20">error</h4>
                    * <div class="s-bg:error s-p:10 s-mb:30 s-radius">Marta Rice</div>
  * <h4 class="s-typo:h4 s-mbe:20">info</h4>
                    * <div class="s-bg:info s-p:10 s-mb:30 s-radius">Erik Huel</div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-color-current {--s-color-current-h: var(--s-color-current-h);
--s-color-current-s: var(--s-color-current-s);
--s-color-current-l: var(--s-color-current-l);
--s-color-current-text-saturation-offset: var(--s-color-current-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-current-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-current-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-current-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-current-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-current-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-current-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-current-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-current-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-current-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-current-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-current-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-current-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-current-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-current-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-current-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-current-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-current-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-current-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-current-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-current-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-current-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-current-a, 1);
                    }
.s-bg-current {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) !important;
                }
.s-color-main {--s-color-current-h: var(--s-color-main-h);
--s-color-current-s: var(--s-color-main-s);
--s-color-current-l: var(--s-color-main-l);
--s-color-current-text-saturation-offset: var(--s-color-main-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-main-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-main-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-main-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-main-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-main-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-main-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-main-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-main-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-main-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-main-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-main-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-main-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-main-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-main-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-main-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-main-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-main-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-main-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-main-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-main-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-main-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-main-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-main-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-main-a, 1);
                    }
.s-bg-main {
                    background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0)) * 1%),var(--s-color-main-a, 1)) !important;
                }
.s-color-accent {--s-color-current-h: var(--s-color-accent-h);
--s-color-current-s: var(--s-color-accent-s);
--s-color-current-l: var(--s-color-accent-l);
--s-color-current-text-saturation-offset: var(--s-color-accent-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-accent-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-accent-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-accent-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-accent-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-accent-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-accent-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-accent-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-accent-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-accent-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-accent-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-accent-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-accent-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-accent-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-accent-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-accent-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-accent-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-accent-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-accent-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-accent-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-accent-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-accent-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
                    }
.s-bg-accent {
                    background-color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1)) !important;
                }
.s-color-complementary {--s-color-current-h: var(--s-color-complementary-h);
--s-color-current-s: var(--s-color-complementary-s);
--s-color-current-l: var(--s-color-complementary-l);
--s-color-current-text-saturation-offset: var(--s-color-complementary-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-complementary-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-complementary-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-complementary-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-complementary-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-complementary-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-complementary-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-complementary-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-complementary-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-complementary-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-complementary-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-complementary-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-complementary-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-complementary-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-complementary-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-complementary-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-complementary-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-complementary-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-complementary-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-complementary-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-complementary-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-complementary-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-complementary-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-complementary-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-complementary-a, 1);
                    }
.s-bg-complementary {
                    background-color: hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0)) * 1%),var(--s-color-complementary-a, 1)) !important;
                }
.s-color-success {--s-color-current-h: var(--s-color-success-h);
--s-color-current-s: var(--s-color-success-s);
--s-color-current-l: var(--s-color-success-l);
--s-color-current-text-saturation-offset: var(--s-color-success-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-success-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-success-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-success-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-success-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-success-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-success-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-success-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-success-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-success-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-success-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-success-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-success-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-success-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-success-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-success-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-success-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-success-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-success-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-success-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-success-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-success-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-success-a, 1);
                    }
.s-bg-success {
                    background-color: hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0)) * 1%),var(--s-color-success-a, 1)) !important;
                }
.s-color-warning {--s-color-current-h: var(--s-color-warning-h);
--s-color-current-s: var(--s-color-warning-s);
--s-color-current-l: var(--s-color-warning-l);
--s-color-current-text-saturation-offset: var(--s-color-warning-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-warning-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-warning-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-warning-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-warning-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-warning-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-warning-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-warning-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-warning-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-warning-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-warning-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-warning-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-warning-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-warning-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-warning-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-warning-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-warning-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-warning-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-warning-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-warning-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-warning-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-warning-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-warning-a, 1);
                    }
.s-bg-warning {
                    background-color: hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0)) * 1%),var(--s-color-warning-a, 1)) !important;
                }
.s-color-error {--s-color-current-h: var(--s-color-error-h);
--s-color-current-s: var(--s-color-error-s);
--s-color-current-l: var(--s-color-error-l);
--s-color-current-text-saturation-offset: var(--s-color-error-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-error-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-error-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-error-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-error-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-error-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-error-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-error-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-error-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-error-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-error-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-error-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-error-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-error-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-error-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-error-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-error-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-error-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-error-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-error-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-error-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-error-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-error-a, 1);
                    }
.s-bg-error {
                    background-color: hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0)) * 1%),var(--s-color-error-a, 1)) !important;
                }
.s-color-info {--s-color-current-h: var(--s-color-info-h);
--s-color-current-s: var(--s-color-info-s);
--s-color-current-l: var(--s-color-info-l);
--s-color-current-text-saturation-offset: var(--s-color-info-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-info-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-undefined-saturation-offset: var(--s-color-info-undefined-saturation-offset, 0);
--s-color-current-undefined-lightness-offset: var(--s-color-info-undefined-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-info-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-info-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-info-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-info-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-info-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-info-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-info-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-info-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-info-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-info-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-info-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-info-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-info-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-info-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-info-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-info-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-info-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-info-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-info-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-info-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-info-a, 1);
                    }
.s-bg-info {
                    background-color: hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0)) * 1%),var(--s-color-info-a, 1)) !important;
                }
.s-tc-current {
                    color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-text-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-text-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-text-lightness-offset, 0)) * 1%),var(--s-color-current-text-a, 1)) !important;
                }
.s-bg-current {
                    background-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1)) !important;
                }
.s-tc-main {
                    color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1)) !important;
                }
.s-bg-main {
                    background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0)) * 1%),var(--s-color-main-a, 1)) !important;
                }
.s-tc-accent {
                    color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-text-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-text-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-text-lightness-offset, 0)) * 1%),var(--s-color-accent-text-a, 1)) !important;
                }
.s-bg-accent {
                    background-color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1)) !important;
                }
.s-tc-complementary {
                    color: hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-text-spin ,0)),calc((var(--s-color-complementary-s, 0) + var(--s-color-complementary-text-saturation-offset, 0)) * 1%),calc((var(--s-color-complementary-l, 0) + var(--s-color-complementary-text-lightness-offset, 0)) * 1%),var(--s-color-complementary-text-a, 1)) !important;
                }
.s-bg-complementary {
                    background-color: hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0)) * 1%),var(--s-color-complementary-a, 1)) !important;
                }
.s-tc-success {
                    color: hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-text-spin ,0)),calc((var(--s-color-success-s, 0) + var(--s-color-success-text-saturation-offset, 0)) * 1%),calc((var(--s-color-success-l, 0) + var(--s-color-success-text-lightness-offset, 0)) * 1%),var(--s-color-success-text-a, 1)) !important;
                }
.s-bg-success {
                    background-color: hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0)) * 1%),var(--s-color-success-a, 1)) !important;
                }
.s-tc-warning {
                    color: hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-text-spin ,0)),calc((var(--s-color-warning-s, 0) + var(--s-color-warning-text-saturation-offset, 0)) * 1%),calc((var(--s-color-warning-l, 0) + var(--s-color-warning-text-lightness-offset, 0)) * 1%),var(--s-color-warning-text-a, 1)) !important;
                }
.s-bg-warning {
                    background-color: hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0)) * 1%),var(--s-color-warning-a, 1)) !important;
                }
.s-tc-error {
                    color: hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-text-spin ,0)),calc((var(--s-color-error-s, 0) + var(--s-color-error-text-saturation-offset, 0)) * 1%),calc((var(--s-color-error-l, 0) + var(--s-color-error-text-lightness-offset, 0)) * 1%),var(--s-color-error-text-a, 1)) !important;
                }
.s-bg-error {
                    background-color: hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0)) * 1%),var(--s-color-error-a, 1)) !important;
                }
.s-tc-info {
                    color: hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-text-spin ,0)),calc((var(--s-color-info-s, 0) + var(--s-color-info-text-saturation-offset, 0)) * 1%),calc((var(--s-color-info-l, 0) + var(--s-color-info-text-lightness-offset, 0)) * 1%),var(--s-color-info-text-a, 1)) !important;
                }
.s-bg-info {
                    background-color: hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0)) * 1%),var(--s-color-info-a, 1)) !important;
                }
.s-bg-odd > *:nth-child(even) {
              background-color: transparent !important;
            }
.s-bg-even > *:nth-child(even) {
            background-color: transparent !important;
        }
/**
        * @name          Fit Sizes
        * @namespace          sugar.style.helpers.fit
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/fit-sizes
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply a fit size on any HTMLElement.
        * On image and video, uses `object-fit` property, on all others,
        * simply fill the element using an absolute position, top: 0, left: 0 and width/height: 100%.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.fit.classes;
        * 
        * .my-element {
        *   \@sugar.fit(fill);
        * }  
        * 
         * @cssClass     s-fit:fill       Apply the fill fit size
 * @cssClass     s-fit:cover       Apply the cover fit size
 * @cssClass     s-fit:contain       Apply the contain fit size
 * @cssClass     s-fit:none       Apply the none fit size
 * @cssClass     s-fit:abs       Apply the abs fit size
        * 
         * @example         html        fill
            *   <div class="s-ratio:16-9 s-bg:ui">
            *       <img class="s-fit:fill s-radius" src="https://picsum.photos/1000/1000" />
            *   </div>
            * 
 * @example         html        cover
            *   <div class="s-ratio:16-9 s-bg:ui">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/1000/1000" />
            *   </div>
            * 
 * @example         html        contain
            *   <div class="s-ratio:16-9 s-bg:ui">
            *       <img class="s-fit:contain s-radius" src="https://picsum.photos/1000/1000" />
            *   </div>
            * 
 * @example         html        none
            *   <div class="s-ratio:16-9 s-bg:ui">
            *       <img class="s-fit:none s-radius" src="https://picsum.photos/1000/1000" />
            *   </div>
            * 
 * @example         html        abs
            *   <div class="s-ratio:16-9 s-bg:ui">
            *       <img class="s-fit:abs s-radius" src="https://picsum.photos/1000/1000" />
            *   </div>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-fit-fill {
                    -o-object-fit: fill;
                       object-fit: fill;
                }
.s-fit-fill {
            width: 100%; height: 100%;
        }
.s-fit-cover {
                    -o-object-fit: cover;
                       object-fit: cover;
                }
.s-fit-cover {
            width: 100%; height: 100%;
        }
.s-fit-contain {
                    -o-object-fit: contain;
                       object-fit: contain;
                }
.s-fit-contain {
            width: 100%; height: 100%;
        }
.s-fit-none {
                    -o-object-fit: none;
                       object-fit: none;
                }
.s-fit-none {
            width: 100%; height: 100%;
        }
.s-fit-abs {
                    position: absolute;
                    top: 0; left: 0;
                }
.s-fit-abs {
            width: 100%; height: 100%;
        }
/**
        * @name          Link
        * @namespace          sugar.style.helpers.link
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/link
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply some link styling utils to any HTMLElement.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.link.classes;
        * 
        * .my-element {
        *   \@sugar.link.stretch;
        * } 
        * 
        * @cssClass             s-link:stretch                  Stretch a link clickable area without changing his actual size and style
        * 
        * @example          html            Stretch
        * <div class="s-position:relative s-bg:main-surface s-radius s-p:50">
        *   <a href="#" class="s-link:stretch s-bg:accent s-radius s-p:20">I'm a stretched link!</a>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-link-stretch:after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            pointer-events: auto;
            content: '';
            background-color: rgba(0, 0, 0, 0);
        }
/**
        * @name          Gap
        * @namespace          sugar.style.helpers.gap
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/gap
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some gap attributes on any HTMLElement and with
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.gap.classes;
        * 
        * @cssClass                 s-gap              Apply the default gap to any HTMLElement
        * @cssClass                s-gap:row          Apply the default row gap to any HTMLElement
        * @cssClass                s-gap:column          Apply the default column gap to any HTMLElement
        
            * @cssClass                s-gap:default          Apply the default gap to any HTMLElement
            * @cssClass                s-gap:row:default          Apply the default row gap to any HTMLElement
            * @cssClass                s-gap:column:default          Apply the default column gap to any HTMLElement
        ,
            * @cssClass                s-gap:0          Apply the 0 gap to any HTMLElement
            * @cssClass                s-gap:row:0          Apply the 0 row gap to any HTMLElement
            * @cssClass                s-gap:column:0          Apply the 0 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:10          Apply the 10 gap to any HTMLElement
            * @cssClass                s-gap:row:10          Apply the 10 row gap to any HTMLElement
            * @cssClass                s-gap:column:10          Apply the 10 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:20          Apply the 20 gap to any HTMLElement
            * @cssClass                s-gap:row:20          Apply the 20 row gap to any HTMLElement
            * @cssClass                s-gap:column:20          Apply the 20 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:30          Apply the 30 gap to any HTMLElement
            * @cssClass                s-gap:row:30          Apply the 30 row gap to any HTMLElement
            * @cssClass                s-gap:column:30          Apply the 30 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:40          Apply the 40 gap to any HTMLElement
            * @cssClass                s-gap:row:40          Apply the 40 row gap to any HTMLElement
            * @cssClass                s-gap:column:40          Apply the 40 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:50          Apply the 50 gap to any HTMLElement
            * @cssClass                s-gap:row:50          Apply the 50 row gap to any HTMLElement
            * @cssClass                s-gap:column:50          Apply the 50 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:60          Apply the 60 gap to any HTMLElement
            * @cssClass                s-gap:row:60          Apply the 60 row gap to any HTMLElement
            * @cssClass                s-gap:column:60          Apply the 60 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:70          Apply the 70 gap to any HTMLElement
            * @cssClass                s-gap:row:70          Apply the 70 row gap to any HTMLElement
            * @cssClass                s-gap:column:70          Apply the 70 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:80          Apply the 80 gap to any HTMLElement
            * @cssClass                s-gap:row:80          Apply the 80 row gap to any HTMLElement
            * @cssClass                s-gap:column:80          Apply the 80 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:90          Apply the 90 gap to any HTMLElement
            * @cssClass                s-gap:row:90          Apply the 90 row gap to any HTMLElement
            * @cssClass                s-gap:column:90          Apply the 90 column gap to any HTMLElement
        ,
            * @cssClass                s-gap:100          Apply the 100 gap to any HTMLElement
            * @cssClass                s-gap:row:100          Apply the 100 row gap to any HTMLElement
            * @cssClass                s-gap:column:100          Apply the 100 column gap to any HTMLElement
        
        * 
        * @example        html          Simple flex grid
        * <div class="s-flex s-gap:40">
        *   <div class="s-ratio:16-9 s-flex-item:grow s-radius s-p:30 s-bg:main-surface">1</div>
        *   <div class="s-ratio:16-9 s-flex-item:grow s-radius s-p:30 s-bg:main-surface">2</div>
        *   <div class="s-ratio:16-9 s-flex-item:grow s-radius s-p:30 s-bg:main-surface">3</div>
        * </div>
        * 
        * @example        html          Simple grid
        * <div class="s-grid:3 s-gap:40">
        *   <div class="s-ratio:16-9 s-bg:main-surface s-radius s-p:30">1</div>
        *   <div class="s-ratio:16-9 s-bg:main-surface s-radius s-p:30">2</div>
        *   <div class="s-ratio:16-9 s-bg:main-surface s-radius s-p:30">3</div>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-gap:not(.s-gap-column):not(.s-gap-row) {
                    gap: 1rem;
                }
.s-gap-row.s-gap {
                    row-gap: 1rem;
                }
.s-gap-column.s-gap {
                    -moz-column-gap: 1rem;
                         column-gap: 1rem;
                }
.s-gap-0:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 0);
                }
.s-gap-row.s-gap-0 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 0);
                }
.s-gap-column.s-gap-0 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 0);
                         column-gap: calc(var(--s-margin-default, 1rem) * 0);
                }
.s-gap-10:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 0.375);
                }
.s-gap-row.s-gap-10 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 0.375);
                }
.s-gap-column.s-gap-10 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 0.375);
                         column-gap: calc(var(--s-margin-default, 1rem) * 0.375);
                }
.s-gap-20:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 0.75);
                }
.s-gap-row.s-gap-20 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 0.75);
                }
.s-gap-column.s-gap-20 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 0.75);
                         column-gap: calc(var(--s-margin-default, 1rem) * 0.75);
                }
.s-gap-30:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 1.4);
                }
.s-gap-row.s-gap-30 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 1.4);
                }
.s-gap-column.s-gap-30 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 1.4);
                         column-gap: calc(var(--s-margin-default, 1rem) * 1.4);
                }
.s-gap-40:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 2);
                }
.s-gap-row.s-gap-40 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 2);
                }
.s-gap-column.s-gap-40 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 2);
                         column-gap: calc(var(--s-margin-default, 1rem) * 2);
                }
.s-gap-50:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 3.5);
                }
.s-gap-row.s-gap-50 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 3.5);
                }
.s-gap-column.s-gap-50 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 3.5);
                         column-gap: calc(var(--s-margin-default, 1rem) * 3.5);
                }
.s-gap-60:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 5);
                }
.s-gap-row.s-gap-60 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 5);
                }
.s-gap-column.s-gap-60 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 5);
                         column-gap: calc(var(--s-margin-default, 1rem) * 5);
                }
.s-gap-70:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 7.5);
                }
.s-gap-row.s-gap-70 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 7.5);
                }
.s-gap-column.s-gap-70 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 7.5);
                         column-gap: calc(var(--s-margin-default, 1rem) * 7.5);
                }
.s-gap-80:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 10);
                }
.s-gap-row.s-gap-80 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 10);
                }
.s-gap-column.s-gap-80 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 10);
                         column-gap: calc(var(--s-margin-default, 1rem) * 10);
                }
.s-gap-90:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 15);
                }
.s-gap-row.s-gap-90 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 15);
                }
.s-gap-column.s-gap-90 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 15);
                         column-gap: calc(var(--s-margin-default, 1rem) * 15);
                }
.s-gap-100:not(.s-gap-column):not(.s-gap-row) {
                    gap: calc(var(--s-margin-default, 1rem) * 20);
                }
.s-gap-row.s-gap-100 {
                    row-gap: calc(var(--s-margin-default, 1rem) * 20);
                }
.s-gap-column.s-gap-100 {
                    -moz-column-gap: calc(var(--s-margin-default, 1rem) * 20);
                         column-gap: calc(var(--s-margin-default, 1rem) * 20);
                }
.s-hide {
        display: none;
    }
/**
        * @name          Text
        * @namespace          sugar.style.helpers.text
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/text
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply some text styling like `text-align: left`, `text-align: right`, `text-decoration: underline`, etc...
        * directly inside your HTML.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.text.classes; 
        * 
        * @cssClass             s-text:left             Align the text to the left
        * @cssClass             s-text:right             Align the text to the right
        * @cssClass             s-text:center             Align the text to the center
        * @cssClass             s-text:start             Align the text to the start (rtl aware)
        * @cssClass             s-text:end             Align the text to the end (rtl aware)
        * @cssClass             s-text:justify             Align the text to the justify
        * @cssClass             s-text:decoration:none                  Apply the none text decoration
        * @cssClass             s-text:overline             Apply the overline text decoration
        * @cssClass             s-text:line-through             Apply the line-through text decoration
        * @cssClass             s-text:underline             Apply the underline text decoration
        * @cssClass             s-text:lowercase             Apply the lowercase text transform
        * @cssClass             s-text:uppercase             Apply the uppercase text transform
        * @cssClass             s-text:capitalize             Apply the capitalize text transform
        * 
        * @example        html          Aligns
        *   <div class="s-text:left s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (left) Raymond Pollich
        *   </div>
        *   <div class="s-text:right s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (right) Mr. Elisa Wolf
        *   </div>
        *   <div class="s-text:center s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (center) Lionel Konopelski
        *   </div>
        *   <div class="s-text:start s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (start) Bobby Leuschke
        *   </div>
        *   <div class="s-text:end s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (end) Stacy Rodriguez
        *   </div>
        * 
        * @example        html          Decorations
        *   <div class="s-text:overline s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (overline) Marlene Ernser
        *   </div>
        *   <div class="s-text:underline s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (underline) Bernadette Waelchi
        *   </div>
        *   <div class="s-text:line-through s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (line-through) Joseph Glover
        *   </div>
        * 
        * @example        html          Transforms
        *   <div class="s-text:lowercase s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (lowercase) Doug Ward
        *   </div>
        *   <div class="s-text:uppercase s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (uppercase) Robyn Parker
        *   </div>
        *   <div class="s-text:capitalize s-bg:main s-p:20 s-mbe:30 s-radius">
        *       (capitalize) Angela Parisian III
        *   </div>
        * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-text-left {
            text-align: left;
        }
.s-text-right {
            text-align: right;
        }
.s-text-center {
            text-align: center;
        }
.s-text-start {
            text-align: start;
        }
.s-text-end {
            text-align: end;
        }
.s-text-justify {
            text-align: justify;
        }
.s-text-decoration.s-text-none {
            text-decoration: none !important;
        }
.s-text-overline {
            text-decoration: overline;
        }
.s-text-underline {
            text-decoration: underline;
        }
.s-text-line-through {
            text-decoration: line-through;
        }
.s-text-lowercase {
            text-transform: lowercase;
        }
.s-text-uppercase {
            text-transform: uppercase;
        }
.s-text-capitalize {
            text-transform: capitalize;
        }
.s-font-default {font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);
}
.s-font-title {font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);
}
.s-font-quote {font-family: var(--s-font-family-quote-font-family, "Palatino, Times, Georgia, serif"); 
 font-weight: var(--s-font-family-quote-font-weight, normal); 
 font-style: var(--s-font-family-quote-font-style, normal);
}
.s-font-code {font-family: var(--s-font-family-code-font-family, Menlo, Monaco, Consolas, Courier New, monospace); 
 font-weight: var(--s-font-family-code-font-weight, normal); 
 font-style: var(--s-font-family-code-font-style, normal);
}
.s-font-0 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-0, 0) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-5 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-5, 0.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-10 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-10, 0.65) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-15 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-15, 0.7) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-20 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-20, 0.75) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-25 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-25, 0.95) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-30 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-30, 1.1) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-40 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-50 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-60 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-60, 2.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-70 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-70, 3.2) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-80 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-80, 4.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-90 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-90, 7) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-100 {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-100, 20) * var(--s-scale, 1) * var(--s-scale-global, 1)));
}
.s-font-reset-size {
  font-size: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
}
.s-font-reset-family {font-family: var(--s-font-family-default-font-family, "Roboto"); 
 font-weight: var(--s-font-family-default-font-weight, 400);
}
.s-font-ultra-condensed {
                font-stretch: ultra-condensed;
            }
.s-font-extra-condensed {
                font-stretch: extra-condensed;
            }
.s-font-condensed {
                font-stretch: condensed;
            }
.s-font-semi-condensed {
                font-stretch: semi-condensed;
            }
.s-font-semi-expanded {
                font-stretch: semi-expanded;
            }
.s-font-expanded {
                font-stretch: expanded;
            }
.s-font-extra-expanded {
                font-stretch: extra-expanded;
            }
.s-font-ultra-expanded {
                font-stretch: ultra-expanded;
            }
.s-font-italic {
                font-style: italic;
            }
.s-font-oblique {
                font-style: oblique;
            }
.s-font-bold {
                font-weight: bold;
            }
.s-font-bolder {
                font-weight: bolder;
            }
.s-font-lighter {
                font-weight: lighter;
            }
.s-font-weight-100 {
                font-weight: 100;
            }
.s-font-weight-200 {
                font-weight: 200;
            }
.s-font-weight-300 {
                font-weight: 300;
            }
.s-font-weight-400 {
                font-weight: 400;
            }
.s-font-weight-500 {
                font-weight: 500;
            }
.s-font-weight-600 {
                font-weight: 600;
            }
.s-font-weight-700 {
                font-weight: 700;
            }
.s-font-weight-800 {
                font-weight: 800;
            }
.s-font-weight-900 {
                font-weight: 900;
            }
/**
        * @name          Depth
        * @namespace          sugar.style.helpers.depth
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/depth
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some depth shadows to any HTMLElement.
        * These depths are defined in the theme configuration under `theme.depth` namespace.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.depth.classes;
        * 
        * .my-element {
        *   \@sugar.depth(100);
        * }          
        * 
         * @cssClass          s-depth:default      Apply the depth default to any HTMLElement
 * @cssClass          s-depth:text:default      Apply the text depth default to any HTMLElement
 * @cssClass          s-depth:box:default      Apply the depth default to any HTMLElement
 * @cssClass          s-depth:0      Apply the depth 0 to any HTMLElement
 * @cssClass          s-depth:text:0      Apply the text depth 0 to any HTMLElement
 * @cssClass          s-depth:box:0      Apply the depth 0 to any HTMLElement
 * @cssClass          s-depth:5      Apply the depth 5 to any HTMLElement
 * @cssClass          s-depth:text:5      Apply the text depth 5 to any HTMLElement
 * @cssClass          s-depth:box:5      Apply the depth 5 to any HTMLElement
 * @cssClass          s-depth:10      Apply the depth 10 to any HTMLElement
 * @cssClass          s-depth:text:10      Apply the text depth 10 to any HTMLElement
 * @cssClass          s-depth:box:10      Apply the depth 10 to any HTMLElement
 * @cssClass          s-depth:20      Apply the depth 20 to any HTMLElement
 * @cssClass          s-depth:text:20      Apply the text depth 20 to any HTMLElement
 * @cssClass          s-depth:box:20      Apply the depth 20 to any HTMLElement
 * @cssClass          s-depth:30      Apply the depth 30 to any HTMLElement
 * @cssClass          s-depth:text:30      Apply the text depth 30 to any HTMLElement
 * @cssClass          s-depth:box:30      Apply the depth 30 to any HTMLElement
 * @cssClass          s-depth:40      Apply the depth 40 to any HTMLElement
 * @cssClass          s-depth:text:40      Apply the text depth 40 to any HTMLElement
 * @cssClass          s-depth:box:40      Apply the depth 40 to any HTMLElement
 * @cssClass          s-depth:50      Apply the depth 50 to any HTMLElement
 * @cssClass          s-depth:text:50      Apply the text depth 50 to any HTMLElement
 * @cssClass          s-depth:box:50      Apply the depth 50 to any HTMLElement
 * @cssClass          s-depth:60      Apply the depth 60 to any HTMLElement
 * @cssClass          s-depth:text:60      Apply the text depth 60 to any HTMLElement
 * @cssClass          s-depth:box:60      Apply the depth 60 to any HTMLElement
 * @cssClass          s-depth:70      Apply the depth 70 to any HTMLElement
 * @cssClass          s-depth:text:70      Apply the text depth 70 to any HTMLElement
 * @cssClass          s-depth:box:70      Apply the depth 70 to any HTMLElement
 * @cssClass          s-depth:80      Apply the depth 80 to any HTMLElement
 * @cssClass          s-depth:text:80      Apply the text depth 80 to any HTMLElement
 * @cssClass          s-depth:box:80      Apply the depth 80 to any HTMLElement
 * @cssClass          s-depth:90      Apply the depth 90 to any HTMLElement
 * @cssClass          s-depth:text:90      Apply the text depth 90 to any HTMLElement
 * @cssClass          s-depth:box:90      Apply the depth 90 to any HTMLElement
 * @cssClass          s-depth:100      Apply the depth 100 to any HTMLElement
 * @cssClass          s-depth:text:100      Apply the text depth 100 to any HTMLElement
 * @cssClass          s-depth:box:100      Apply the depth 100 to any HTMLElement
        *
         * @example          html        Depth default
                <div class="s-depth:default s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:default">s-depth:default</span>
                </div>
 * @example          html        Depth 0
                <div class="s-depth:0 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:0">s-depth:0</span>
                </div>
 * @example          html        Depth 5
                <div class="s-depth:5 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:5">s-depth:5</span>
                </div>
 * @example          html        Depth 10
                <div class="s-depth:10 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:10">s-depth:10</span>
                </div>
 * @example          html        Depth 20
                <div class="s-depth:20 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:20">s-depth:20</span>
                </div>
 * @example          html        Depth 30
                <div class="s-depth:30 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:30">s-depth:30</span>
                </div>
 * @example          html        Depth 40
                <div class="s-depth:40 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:40">s-depth:40</span>
                </div>
 * @example          html        Depth 50
                <div class="s-depth:50 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:50">s-depth:50</span>
                </div>
 * @example          html        Depth 60
                <div class="s-depth:60 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:60">s-depth:60</span>
                </div>
 * @example          html        Depth 70
                <div class="s-depth:70 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:70">s-depth:70</span>
                </div>
 * @example          html        Depth 80
                <div class="s-depth:80 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:80">s-depth:80</span>
                </div>
 * @example          html        Depth 90
                <div class="s-depth:90 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:90">s-depth:90</span>
                </div>
 * @example          html        Depth 100
                <div class="s-depth:100 s-bg:main-surface s-width:40 s-ratio:16-9 s-text:center s-radius s-p:30 @tablet s-width:60 @mobile s-width:100">
                    <span class="s-depth:text:100">s-depth:100</span>
                </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-depth:not(.s-depth-text),
.s-depth-box.s-depth- {box-shadow: var(--s-depth-0, 0);
}
.s-depth-0:not(.s-depth-text),
.s-depth-box.s-depth--0 {box-shadow: var(--s-depth-0, 0);
}
.s-depth-5:not(.s-depth-text),
.s-depth-box.s-depth--5 {box-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.006),
  0px 2.5px 1.5px rgba(0, 0, 0, 0.005),
  0px 3.5px 3.4px rgba(0, 0, 0, 0.006),
  0px 4.4px 4.3px rgba(0, 0, 0, 0.007),
  0px 10px 10px rgba(0, 0, 0, 0.01);
}
.s-depth-10:not(.s-depth-text),
.s-depth-box.s-depth--10 {box-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
}
.s-depth-20:not(.s-depth-text),
.s-depth-box.s-depth--20 {box-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
}
.s-depth-30:not(.s-depth-text),
.s-depth-box.s-depth--30 {box-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.008),
  0px 1.3px 1px rgba(0, 0, 0, 0.012),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.015),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.018),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.022),
  0px 20px 15px rgba(0, 0, 0, 0.03);
}
.s-depth-40:not(.s-depth-text),
.s-depth-box.s-depth--40 {box-shadow: 0px 0.8px 0.6px rgba(0, 0, 0, 0.008),
  0px 2px 1.3px rgba(0, 0, 0, 0.012),
  0px 3.8px 2.5px rgba(0, 0, 0, 0.015),
  0px 6.7px 4.5px rgba(0, 0, 0, 0.018),
  0px 12.5px 8.4px rgba(0, 0, 0, 0.022),
  0px 30px 20px rgba(0, 0, 0, 0.03);
}
.s-depth-50:not(.s-depth-text),
.s-depth-box.s-depth--50 {box-shadow: 0px 1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.3px 2px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.8px rgba(0, 0, 0, 0.02),
  0px 7.8px 6.7px rgba(0, 0, 0, 0.024),
  0px 14.6px 12.5px rgba(0, 0, 0, 0.029),
  0px 35px 30px rgba(0, 0, 0, 0.04);
}
.s-depth-60:not(.s-depth-text),
.s-depth-box.s-depth--60 {box-shadow: 0px 1px 0.7px rgba(0, 0, 0, 0.011),
  0px 2.3px 1.7px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.1px rgba(0, 0, 0, 0.02),
  0px 7.8px 5.6px rgba(0, 0, 0, 0.024),
  0px 14.6px 10.4px rgba(0, 0, 0, 0.029),
  0px 35px 25px rgba(0, 0, 0, 0.04);
}
.s-depth-70:not(.s-depth-text),
.s-depth-box.s-depth--70 {box-shadow: 0px 1.1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.7px 2px rgba(0, 0, 0, 0.016),
  0px 5px 3.8px rgba(0, 0, 0, 0.02),
  0px 8.9px 6.7px rgba(0, 0, 0, 0.024),
  0px 16.7px 12.5px rgba(0, 0, 0, 0.029),
  0px 40px 30px rgba(0, 0, 0, 0.04);
}
.s-depth-80:not(.s-depth-text),
.s-depth-box.s-depth--80 {box-shadow: 0px 1.1px 1px rgba(0, 0, 0, 0.011),
  0px 2.7px 2.3px rgba(0, 0, 0, 0.016),
  0px 5px 4.4px rgba(0, 0, 0, 0.02),
  0px 8.9px 7.8px rgba(0, 0, 0, 0.024),
  0px 16.7px 14.6px rgba(0, 0, 0, 0.029),
  0px 40px 35px rgba(0, 0, 0, 0.04);
}
.s-depth-90:not(.s-depth-text),
.s-depth-box.s-depth--90 {box-shadow: 0px 1.4px 1.1px rgba(0, 0, 0, 0.011),
  0px 3.3px 2.7px rgba(0, 0, 0, 0.016),
  0px 6.1px 5px rgba(0, 0, 0, 0.02),
  0px 10.9px 8.9px rgba(0, 0, 0, 0.024),
  0px 20.5px 16.7px rgba(0, 0, 0, 0.029),
  0px 49px 40px rgba(0, 0, 0, 0.04);
}
.s-depth-100:not(.s-depth-text),
.s-depth-box.s-depth--100 {box-shadow: 0px 1.4px 1.4px rgba(0, 0, 0, 0.011),
  0px 3.3px 3.5px rgba(0, 0, 0, 0.016),
  0px 6.1px 6.5px rgba(0, 0, 0, 0.02),
  0px 10.9px 11.6px rgba(0, 0, 0, 0.024),
  0px 20.5px 21.7px rgba(0, 0, 0, 0.029),
  0px 49px 52px rgba(0, 0, 0, 0.04);
}
.s-depth-text.s-depth {text-shadow: var(--s-depth-0, 0);
}
.s-depth-text.s-depth-0 {text-shadow: var(--s-depth-0, 0);
}
.s-depth-text.s-depth-5 {text-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.006),
  0px 2.5px 1.5px rgba(0, 0, 0, 0.005),
  0px 3.5px 3.4px rgba(0, 0, 0, 0.006),
  0px 4.4px 4.3px rgba(0, 0, 0, 0.007),
  0px 10px 10px rgba(0, 0, 0, 0.01);
}
.s-depth-text.s-depth-10 {text-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
}
.s-depth-text.s-depth-20 {text-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
}
.s-depth-text.s-depth-30 {text-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.008),
  0px 1.3px 1px rgba(0, 0, 0, 0.012),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.015),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.018),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.022),
  0px 20px 15px rgba(0, 0, 0, 0.03);
}
.s-depth-text.s-depth-40 {text-shadow: 0px 0.8px 0.6px rgba(0, 0, 0, 0.008),
  0px 2px 1.3px rgba(0, 0, 0, 0.012),
  0px 3.8px 2.5px rgba(0, 0, 0, 0.015),
  0px 6.7px 4.5px rgba(0, 0, 0, 0.018),
  0px 12.5px 8.4px rgba(0, 0, 0, 0.022),
  0px 30px 20px rgba(0, 0, 0, 0.03);
}
.s-depth-text.s-depth-50 {text-shadow: 0px 1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.3px 2px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.8px rgba(0, 0, 0, 0.02),
  0px 7.8px 6.7px rgba(0, 0, 0, 0.024),
  0px 14.6px 12.5px rgba(0, 0, 0, 0.029),
  0px 35px 30px rgba(0, 0, 0, 0.04);
}
.s-depth-text.s-depth-60 {text-shadow: 0px 1px 0.7px rgba(0, 0, 0, 0.011),
  0px 2.3px 1.7px rgba(0, 0, 0, 0.016),
  0px 4.4px 3.1px rgba(0, 0, 0, 0.02),
  0px 7.8px 5.6px rgba(0, 0, 0, 0.024),
  0px 14.6px 10.4px rgba(0, 0, 0, 0.029),
  0px 35px 25px rgba(0, 0, 0, 0.04);
}
.s-depth-text.s-depth-70 {text-shadow: 0px 1.1px 0.8px rgba(0, 0, 0, 0.011),
  0px 2.7px 2px rgba(0, 0, 0, 0.016),
  0px 5px 3.8px rgba(0, 0, 0, 0.02),
  0px 8.9px 6.7px rgba(0, 0, 0, 0.024),
  0px 16.7px 12.5px rgba(0, 0, 0, 0.029),
  0px 40px 30px rgba(0, 0, 0, 0.04);
}
.s-depth-text.s-depth-80 {text-shadow: 0px 1.1px 1px rgba(0, 0, 0, 0.011),
  0px 2.7px 2.3px rgba(0, 0, 0, 0.016),
  0px 5px 4.4px rgba(0, 0, 0, 0.02),
  0px 8.9px 7.8px rgba(0, 0, 0, 0.024),
  0px 16.7px 14.6px rgba(0, 0, 0, 0.029),
  0px 40px 35px rgba(0, 0, 0, 0.04);
}
.s-depth-text.s-depth-90 {text-shadow: 0px 1.4px 1.1px rgba(0, 0, 0, 0.011),
  0px 3.3px 2.7px rgba(0, 0, 0, 0.016),
  0px 6.1px 5px rgba(0, 0, 0, 0.02),
  0px 10.9px 8.9px rgba(0, 0, 0, 0.024),
  0px 20.5px 16.7px rgba(0, 0, 0, 0.029),
  0px 49px 40px rgba(0, 0, 0, 0.04);
}
.s-depth-text.s-depth-100 {text-shadow: 0px 1.4px 1.4px rgba(0, 0, 0, 0.011),
  0px 3.3px 3.5px rgba(0, 0, 0, 0.016),
  0px 6.1px 6.5px rgba(0, 0, 0, 0.02),
  0px 10.9px 11.6px rgba(0, 0, 0, 0.024),
  0px 20.5px 21.7px rgba(0, 0, 0, 0.029),
  0px 49px 52px rgba(0, 0, 0, 0.04);
}
/**
        * @name          Disabled
        * @namespace          sugar.style.helpers.disabled
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/disabled
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply the disabled style on any HTMLElement.
        * This make sure **no pointer events** stays active as well as displaying the **not-allowed cursor**.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.disabled.classes;
        * 
        * .my-element {
        *   \@sugar.disabled;
        * }  
        * 
        * @cssClass                 s-disabled              Apply the disabled styling on any HTMLElement
        * 
        * @example        html      Disabled
        * <input type="text" class="s-input s-disabled" placeholder="I'm disabled" />
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-disabled,
            [disabled] {pointer-events: none;
        opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
            }
.s-disabled:hover, .s-disabled:focus, .s-disabled:active, [disabled]:hover, [disabled]:focus, [disabled]:active {
            opacity: var(--s-helpers-disabled-opacity, 0.4) !important;
        }
.s-disabled, .s-disabled *, [disabled], [disabled] * {
            cursor: not-allowed !important;
            -webkit-user-select: none !important;
               -moz-user-select: none !important;
                    user-select: none !important;
        }
/**
        * @name          Flexbox
        * @namespace          sugar.style.helpers.flex
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/flexbox
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some flex attributes on any HTMLElement and with
        * that you can **create some layouts directly in your HTML**.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.flex.classes;
        * 
        * @cssClass                 s-flex              Apply a display "flex" on any HTMLElement
        * @cssClass                 s-flex:row          Apply the flex direction to "row"
        * @cssClass                 s-flex:row-reverse          Apply the flex direction to "row-reverse"
        * @cssClass                 s-flex:column          Apply the flex direction to "column"
        * @cssClass                 s-flex:column-reverse          Apply the flex direction to "column-reverse"
        * @cssClass                 s-flex:nowrap             Apply the wrap property to "nowrap"
        * @cssClass                 s-flex:wrap             Apply the wrap property to "wrap"
        * @cssClass                 s-flex:wrap-reverse             Apply the wrap property to "wrap-reverse"
        * @cssClass                 s-flex:justify-start             Apply the justify property to "start"
        * @cssClass                 s-flex:justify-flex-start             Apply the justify property to "flex-start"
        * @cssClass                 s-flex:justify-end             Apply the justify property to "end"
        * @cssClass                 s-flex:justify-flex-end             Apply the justify property to "flex-end"
        * @cssClass                 s-flex:justify-center             Apply the justify property to "center"  
        * @cssClass                 s-flex:justify-space-between             Apply the justify property to "space-between"
        * @cssClass                 s-flex:justify-space-around             Apply the justify property to "space-around"
        * @cssClass                 s-flex:justify-space-evenly             Apply the justify property to "space-evenly"
        * @cssClass                 s-flex:justify-stretch             Apply the justify property to "stretch"
        * @cssClass                 s-flex:align-start             Apply the align property to "start"
        * @cssClass                 s-flex:align-flex-start             Apply the align property to "flex-start"
        * @cssClass                 s-flex:align-end             Apply the align property to "end"
        * @cssClass                 s-flex:align-flex-end             Apply the align property to "flex-end"
        * @cssClass                 s-flex:align-center             Apply the align property to "center"
        * @cssClass                 s-flex:align-baseline             Apply the align property to "baseline"
        * @cssClass                 s-flex-item:grow             Apply the flex-grow property to "1"
        * @cssClass                 s-flex-item:shrink             Apply the flex-shrink property to "1"
        * @cssClass                 s-flex-item:align-flex-start        Align item to the start
        * @cssClass                 s-flex-item:align-flex-end        Align item to the end
        * @cssClass                 s-flex-item:align-center        Align item to the center
        * @cssClass                 s-flex-item:align-baseline        Align item to the baseline
        * @cssClass                 s-flex-item:align-stretch        Align item to the stretch
        * @cssClass                 s-flex-item:order-{0...20}             Apply the order {0...20} to any flex item
        * @cssClass                 s-flex-item:grow-{0...20}             Apply the grow {0...20} to any flex item
        * @cssClass                 s-flex-item:shrink-{0...20}             Apply the shrink {0...20} to any flex item
        * 
        * @example        html          Simple grid
        *   <div class="s-flex:row:wrap s-radius">
        *     <div class="s-bg:main s-width:50 s-p:30">Jon Schimmel MD</div>
        *     <div class="s-bg:accent s-width:50 s-p:30">Jaime Turner</div>
        *     <div class="s-bg:complementary s-width:50 s-p:30">Mark Kling MD</div>
        *     <div class="s-bg:info s-width:50 s-p:30">Mr. Latoya Dach</div>
        *   </div>
        * 
        * @example        html          Grow
        *   <div class="s-flex:row:nowrap s-radius">
        *     <div class="s-flex-item:grow s-bg:main s-p:30">Leo Parisian</div>
        *     <div class="s-bg:accent s-p:30">Beatrice Champlin</div>
        *     <div class="s-bg:complementary s-p:30">Sonya Moore</div>
        *   </div>
        * 
        * @example      html          Orders
        *   <div class="s-flex:row:nowrap s-radius">
        *     <div class="s-flex-item:order-3 s-bg:main s-p:30">Peter Powlowski MD</div>
        *     <div class="s-bg:accent s-p:30">Sarah Kutch</div>
        *     <div class="s-bg:complementary s-p:30">Spencer Sipes Jr.</div>
        *   </div>
        * 
        * @example          html            Aligns
        *   <div class="s-flex:row:nowrap:align-end s-radius">
        *     <div class="s-bg:main s-p:30">Danny Klein</div>
        *     <div class="s-bg:accent s-p:30">Larry Mohr MD<br />Jean Klocko<br />Myrtle Senger<br />Gregory Crooks Jr.<br />Ms. Daisy Yost</div>
        *     <div class="s-bg:complementary s-p:30">Kerry Ryan</div>
        *   </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-flex {
                display: flex;
            }
.s-flex-row {
                flex-direction: row;
            }
.s-flex-row-reverse {
                flex-direction: row-reverse;
            }
.s-flex-column {
                flex-direction: column;
            }
.s-flex-column-reverse {
                flex-direction: column-reverse;
            }
.s-flex-nowrap {
                flex-wrap: nowrap;
            }
.s-flex-wrap {
                flex-wrap: wrap;
            }
.s-flex-wrap-reverse {
                flex-wrap: wrap-reverse;
            }
.s-flex-justify-start {
                justify-content: start;
            }
.s-flex-justify-flex-start {
                justify-content: flex-start;
            }
.s-flex-justify-end {
                justify-content: end;
            }
.s-flex-justify-flex-end {
                justify-content: flex-end;
            }
.s-flex-justify-center {
                justify-content: center;
            }
.s-flex-justify-space-between {
                justify-content: space-between;
            }
.s-flex-justify-space-around {
                justify-content: space-around;
            }
.s-flex-justify-space-evenly {
                justify-content: space-evenly;
            }
.s-flex-justify-stretch {
                justify-content: stretch;
            }
.s-flex-align-start {
                align-items: start;
            }
.s-flex-align-flex-start {
                align-items: flex-start;
            }
.s-flex-align-end {
                align-items: end;
            }
.s-flex-align-flex-end {
                align-items: flex-end;
            }
.s-flex-align-center {
                align-items: center;
            }
.s-flex-align-baseline {
                align-items: baseline;
            }
.s-flex-item-grow {
            flex-grow: 1;
        }
.s-flex-item-shrink {
            flex-shrink: 1;
        }
.s-flex-item-order-1 {
                    order: 1;
                }
.s-flex-item-order-2 {
                    order: 2;
                }
.s-flex-item-order-3 {
                    order: 3;
                }
.s-flex-item-order-4 {
                    order: 4;
                }
.s-flex-item-order-5 {
                    order: 5;
                }
.s-flex-item-order-6 {
                    order: 6;
                }
.s-flex-item-order-7 {
                    order: 7;
                }
.s-flex-item-order-8 {
                    order: 8;
                }
.s-flex-item-order-9 {
                    order: 9;
                }
.s-flex-item-order-10 {
                    order: 10;
                }
.s-flex-item-order-11 {
                    order: 11;
                }
.s-flex-item-order-12 {
                    order: 12;
                }
.s-flex-item-order-13 {
                    order: 13;
                }
.s-flex-item-order-14 {
                    order: 14;
                }
.s-flex-item-order-15 {
                    order: 15;
                }
.s-flex-item-order-16 {
                    order: 16;
                }
.s-flex-item-order-17 {
                    order: 17;
                }
.s-flex-item-order-18 {
                    order: 18;
                }
.s-flex-item-order-19 {
                    order: 19;
                }
.s-flex-item-grow-1 {
                    flex-grow: 1;
                }
.s-flex-item-grow-2 {
                    flex-grow: 2;
                }
.s-flex-item-grow-3 {
                    flex-grow: 3;
                }
.s-flex-item-grow-4 {
                    flex-grow: 4;
                }
.s-flex-item-grow-5 {
                    flex-grow: 5;
                }
.s-flex-item-grow-6 {
                    flex-grow: 6;
                }
.s-flex-item-grow-7 {
                    flex-grow: 7;
                }
.s-flex-item-grow-8 {
                    flex-grow: 8;
                }
.s-flex-item-grow-9 {
                    flex-grow: 9;
                }
.s-flex-item-grow-10 {
                    flex-grow: 10;
                }
.s-flex-item-grow-11 {
                    flex-grow: 11;
                }
.s-flex-item-grow-12 {
                    flex-grow: 12;
                }
.s-flex-item-grow-13 {
                    flex-grow: 13;
                }
.s-flex-item-grow-14 {
                    flex-grow: 14;
                }
.s-flex-item-grow-15 {
                    flex-grow: 15;
                }
.s-flex-item-grow-16 {
                    flex-grow: 16;
                }
.s-flex-item-grow-17 {
                    flex-grow: 17;
                }
.s-flex-item-grow-18 {
                    flex-grow: 18;
                }
.s-flex-item-grow-19 {
                    flex-grow: 19;
                }
.s-flex-item-shrink-1 {
                    flex-shrink: 1;
                }
.s-flex-item-shrink-2 {
                    flex-shrink: 2;
                }
.s-flex-item-shrink-3 {
                    flex-shrink: 3;
                }
.s-flex-item-shrink-4 {
                    flex-shrink: 4;
                }
.s-flex-item-shrink-5 {
                    flex-shrink: 5;
                }
.s-flex-item-shrink-6 {
                    flex-shrink: 6;
                }
.s-flex-item-shrink-7 {
                    flex-shrink: 7;
                }
.s-flex-item-shrink-8 {
                    flex-shrink: 8;
                }
.s-flex-item-shrink-9 {
                    flex-shrink: 9;
                }
.s-flex-item-shrink-10 {
                    flex-shrink: 10;
                }
.s-flex-item-shrink-11 {
                    flex-shrink: 11;
                }
.s-flex-item-shrink-12 {
                    flex-shrink: 12;
                }
.s-flex-item-shrink-13 {
                    flex-shrink: 13;
                }
.s-flex-item-shrink-14 {
                    flex-shrink: 14;
                }
.s-flex-item-shrink-15 {
                    flex-shrink: 15;
                }
.s-flex-item-shrink-16 {
                    flex-shrink: 16;
                }
.s-flex-item-shrink-17 {
                    flex-shrink: 17;
                }
.s-flex-item-shrink-18 {
                    flex-shrink: 18;
                }
.s-flex-item-shrink-19 {
                    flex-shrink: 19;
                }
.s-flex-item-align-flex-start {
                align-self: flex-start;
            }
.s-flex-item-align-flex-end {
                align-self: flex-end;
            }
.s-flex-item-align-center {
                align-self: center;
            }
.s-flex-item-align-baseline {
                align-self: baseline;
            }
.s-flex-item-align-stretch {
                align-self: stretch;
            }
/**
        * @name          Float
        * @namespace          sugar.style.helpers.float
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/float
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some float styling into your html.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.float.classes;
        * 
        * @cssClass     s-float:left         Apply the left float style
        * @cssClass     s-float:right         Apply the right float style
        * @cssClass     s-float:none         Apply the none float style
        * 
        * @example        html              Left
        * <div class="s-bg:accent s-clearfix  s-p:30 s-radius">
        *     <div class="s-float:left">I'm a cool float left element</div>
        * </div>
        * 
        * @example      html                Right
        * <div class="s-bg:complementary s-clearfix s-p:30 s-radius">
        *     <div class="s-float:right">I'm a cool float right element</div>
        * </div>
        * 
        * @example      html                None
        * <div class="s-bg:error s-p:30 s-radius">
        *     <div class="s-float:none">I'm a cool float none element</div>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-float-left {
        float: left;
    }
.s-float-right {
        float: right;
    }
.s-float-none {
        float: none;
    }
/**
        * @name          Ratio
        * @namespace          sugar.style.helpers.ratio
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/ratio
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some ratio to any HTMLElement.
        * **These classes make use of the `aspect-ratio` css property**
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.ratio.classes;
        * 
        * .my-element {
        *   \@sugar.ratio(16/9);
        * } 
        * 
         * @cssClass     s-ratio:1             Apply the 1 ratio
 * @cssClass     s-ratio:16-9             Apply the 16-9 ratio
 * @cssClass     s-ratio:16-10             Apply the 16-10 ratio
 * @cssClass     s-ratio:21-9             Apply the 21-9 ratio
 * @cssClass     s-ratio:1-2             Apply the 1-2 ratio
 * @cssClass     s-ratio:2-1             Apply the 2-1 ratio
 * @cssClass     s-ratio:2-3             Apply the 2-3 ratio
 * @cssClass     s-ratio:3-2             Apply the 3-2 ratio
 * @cssClass     s-ratio:4-3             Apply the 4-3 ratio
 * @cssClass     s-ratio:3-4             Apply the 3-4 ratio
        * 
         * @example             html        1
            *   <div class="s-ratio:1 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        16-9
            *   <div class="s-ratio:16-9 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        16-10
            *   <div class="s-ratio:16-10 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        21-9
            *   <div class="s-ratio:21-9 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        1-2
            *   <div class="s-ratio:1-2 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        2-1
            *   <div class="s-ratio:2-1 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        2-3
            *   <div class="s-ratio:2-3 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        3-2
            *   <div class="s-ratio:3-2 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        4-3
            *   <div class="s-ratio:4-3 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
 * @example             html        3-4
            *   <div class="s-ratio:3-4 s-width:40">
            *       <img class="s-fit:cover s-radius" src="https://picsum.photos/500/500" />
            *   </div>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-ratio-1 {
    aspect-ratio: 1;
}
.s-ratio-16-9 {
    aspect-ratio: 16/9;
}
.s-ratio-16-10 {
    aspect-ratio: 16/10;
}
.s-ratio-21-9 {
    aspect-ratio: 21/9;
}
.s-ratio-1-2 {
    aspect-ratio: 1/2;
}
.s-ratio-2-1 {
    aspect-ratio: 2/1;
}
.s-ratio-2-3 {
    aspect-ratio: 2/3;
}
.s-ratio-3-2 {
    aspect-ratio: 3/2;
}
.s-ratio-4-3 {
    aspect-ratio: 4/3;
}
.s-ratio-3-4 {
    aspect-ratio: 3/4;
}
/**
        * @name          Radius
        * @namespace          sugar.style.helpers
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/radius
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply border radius on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.border.classes;
        * 
        * .my-element {
        *   \@sugar.border.radius(40);
        *   \@sugar.border.width(10);
        * }         
        * 
        * @cssClass             s-radius            Apply the default border radius to any HTMLElement
        
 * @cssClass      s-radius:0      Apply the border radius 0 to any HTMLElement
 * @cssClass      s-radius:10      Apply the border radius 10 to any HTMLElement
 * @cssClass      s-radius:20      Apply the border radius 20 to any HTMLElement
 * @cssClass      s-radius:30      Apply the border radius 30 to any HTMLElement
 * @cssClass      s-radius:40      Apply the border radius 40 to any HTMLElement
 * @cssClass      s-radius:50      Apply the border radius 50 to any HTMLElement
 * @cssClass      s-radius:60      Apply the border radius 60 to any HTMLElement
 * @cssClass      s-radius:70      Apply the border radius 70 to any HTMLElement
 * @cssClass      s-radius:80      Apply the border radius 80 to any HTMLElement
 * @cssClass      s-radius:90      Apply the border radius 90 to any HTMLElement
 * @cssClass      s-radius:100      Apply the border radius 100 to any HTMLElement
        *
        * @example        html          Border radius
        

              *   <div class="s-radius:0 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     0
              *   </div> 
            

              *   <div class="s-radius:10 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     10
              *   </div> 
            

              *   <div class="s-radius:20 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     20
              *   </div> 
            

              *   <div class="s-radius:30 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     30
              *   </div> 
            

              *   <div class="s-radius:40 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     40
              *   </div> 
            

              *   <div class="s-radius:50 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     50
              *   </div> 
            

              *   <div class="s-radius:60 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     60
              *   </div> 
            

              *   <div class="s-radius:70 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     70
              *   </div> 
            

              *   <div class="s-radius:80 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     80
              *   </div> 
            

              *   <div class="s-radius:90 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     90
              *   </div> 
            

              *   <div class="s-radius:100 s-display:inline-block s-width:20 s-bg:main s-pbs:30 s-mie:30 s-mbe:30 s-text:center s-ratio:1">
              *     100
              *   </div> 
            
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/**
        * @name          Border width
        * @namespace          sugar.style.helpers
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/border-width
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some border width to any HTMLElement
        * 
        * @support      chromium        
        * @support      firefox         
        * @support      safari          
        * @support      edge           
        * 
        
 * @cssClass      s-bwidth:0      Apply the border width 0 to any HTMLElement
 * @cssClass      s-bwidth:10      Apply the border width 10 to any HTMLElement
 * @cssClass      s-bwidth:20      Apply the border width 20 to any HTMLElement
 * @cssClass      s-bwidth:30      Apply the border width 30 to any HTMLElement
 * @cssClass      s-bwidth:40      Apply the border width 40 to any HTMLElement
 * @cssClass      s-bwidth:50      Apply the border width 50 to any HTMLElement
 * @cssClass      s-bwidth:60      Apply the border width 60 to any HTMLElement
 * @cssClass      s-bwidth:70      Apply the border width 70 to any HTMLElement
 * @cssClass      s-bwidth:80      Apply the border width 80 to any HTMLElement
 * @cssClass      s-bwidth:90      Apply the border width 90 to any HTMLElement
 * @cssClass      s-bwidth:100      Apply the border width 100 to any HTMLElement
        *
        * @example             html         Border width
        
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:0">
              *     0
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:10">
              *     10
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:20">
              *     20
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:30">
              *     30
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:40">
              *     40
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:50">
              *     50
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:60">
              *     60
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:70">
              *     70
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:80">
              *     80
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:90">
              *     90
              *   </div> 
            
   <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:100">
              *     100
              *   </div> 
            
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
/**
        * @name          Border color
        * @namespace          sugar.style.helpers.border
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/border-color
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some border color to any HTMLElement
        * 
        * @support      chromium        
        * @support      firefox         
        * @support      safari          
        * @support      edge           
        * 
         * @cssClass      s-bcolor:current      Apply the border color current to any HTMLElement
 * @cssClass      s-bcolor:main      Apply the border color main to any HTMLElement
 * @cssClass      s-bcolor:accent      Apply the border color accent to any HTMLElement
 * @cssClass      s-bcolor:complementary      Apply the border color complementary to any HTMLElement
 * @cssClass      s-bcolor:success      Apply the border color success to any HTMLElement
 * @cssClass      s-bcolor:warning      Apply the border color warning to any HTMLElement
 * @cssClass      s-bcolor:error      Apply the border color error to any HTMLElement
 * @cssClass      s-bcolor:info      Apply the border color info to any HTMLElement
        *
        * @example             html         Border color
         * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:current s-bwidth:20">
              *     current
              *   </div> 
            
 * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:main s-bwidth:20">
              *     main
              *   </div> 
            
 * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:accent s-bwidth:20">
              *     accent
              *   </div> 
            
 * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:complementary s-bwidth:20">
              *     complementary
              *   </div> 
            
 * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:success s-bwidth:20">
              *     success
              *   </div> 
            
 * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:warning s-bwidth:20">
              *     warning
              *   </div> 
            
 * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:error s-bwidth:20">
              *     error
              *   </div> 
            
 * <div class="s-display:inline-block s-width:20 s-pbs:20 s-mie:20 s-mbe:20 s-text:center s-ratio:1 s-bcolor:info s-bwidth:20">
              *     info
              *   </div> 
            
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-radius {border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
            }
.s-radius-0 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0);
            }
.s-radius-10 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.8);
            }
.s-radius-20 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.6);
            }
.s-radius-30 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2.4);
            }
.s-radius-40 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.2);
            }
.s-radius-50 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 4);
            }
.s-radius-60 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5.2);
            }
.s-radius-70 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 6.4);
            }
.s-radius-80 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 8);
            }
.s-radius-90 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10);
            }
.s-radius-100 {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 12);
            }
.s-bwidth {border-width: 1px;
        }
.s-bwidth-0 {border-width: calc(var(--s-border-width-default, 1px) * 0);
        }
.s-bwidth-10 {border-width: calc(var(--s-border-width-default, 1px) * 1);
        }
.s-bwidth-20 {border-width: calc(var(--s-border-width-default, 1px) * 2);
        }
.s-bwidth-30 {border-width: calc(var(--s-border-width-default, 1px) * 4);
        }
.s-bwidth-40 {border-width: calc(var(--s-border-width-default, 1px) * 6);
        }
.s-bwidth-50 {border-width: calc(var(--s-border-width-default, 1px) * 8);
        }
.s-bwidth-60 {border-width: calc(var(--s-border-width-default, 1px) * 12);
        }
.s-bwidth-70 {border-width: calc(var(--s-border-width-default, 1px) * 16);
        }
.s-bwidth-80 {border-width: calc(var(--s-border-width-default, 1px) * 20);
        }
.s-bwidth-90 {border-width: calc(var(--s-border-width-default, 1px) * 24);
        }
.s-bwidth-100 {border-width: calc(var(--s-border-width-default, 1px) * 30);
        }
.s-bcolor-current {
            border-color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));
        }
.s-bcolor-main {
            border-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0)) * 1%),var(--s-color-main-a, 1));
        }
.s-bcolor-accent {
            border-color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
        }
.s-bcolor-complementary {
            border-color: hsla(calc(var(--s-color-complementary-h, 0) + var(--s-color-complementary-spin ,0)),calc((var(--s-color-complementary-s, 0)) * 1%),calc((var(--s-color-complementary-l, 0)) * 1%),var(--s-color-complementary-a, 1));
        }
.s-bcolor-success {
            border-color: hsla(calc(var(--s-color-success-h, 0) + var(--s-color-success-spin ,0)),calc((var(--s-color-success-s, 0)) * 1%),calc((var(--s-color-success-l, 0)) * 1%),var(--s-color-success-a, 1));
        }
.s-bcolor-warning {
            border-color: hsla(calc(var(--s-color-warning-h, 0) + var(--s-color-warning-spin ,0)),calc((var(--s-color-warning-s, 0)) * 1%),calc((var(--s-color-warning-l, 0)) * 1%),var(--s-color-warning-a, 1));
        }
.s-bcolor-error {
            border-color: hsla(calc(var(--s-color-error-h, 0) + var(--s-color-error-spin ,0)),calc((var(--s-color-error-s, 0)) * 1%),calc((var(--s-color-error-l, 0)) * 1%),var(--s-color-error-a, 1));
        }
.s-bcolor-info {
            border-color: hsla(calc(var(--s-color-info-h, 0) + var(--s-color-info-spin ,0)),calc((var(--s-color-info-s, 0)) * 1%),calc((var(--s-color-info-l, 0)) * 1%),var(--s-color-info-a, 1));
        }
/**
        * @name          Display
        * @namespace          sugar.style.helpers.display
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/display
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply the some display like `inline`, `inline-block`, `block`, etc...
        * on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.display.classes;
        * 
        * @cssClass                 s-display:block           Apply the display `block` to any HTMLElement
        * @cssClass                 s-display:inline-block           Apply the display `inline-block` to any HTMLElement
        * @cssClass                 s-display:contents           Apply the display `contents` to any HTMLElement
        * @cssClass                 s-display:flex           Apply the display `flex` to any HTMLElement
        * @cssClass                 s-display:grid           Apply the display `grid` to any HTMLElement
        * @cssClass                 s-display:inline-flex           Apply the display `inline-flex` to any HTMLElement
        * @cssClass                 s-display:inline-grid           Apply the display `inline-grid` to any HTMLElement
        * @cssClass                 s-display:none           Apply the display `none` to any HTMLElement
        * 
        * @example    html      Block
        *   <div class="s-display:block">
        *     <p class="s-typo:p">Albert Pagac</p>
        *     <p class="s-typo:p">Mark Franecki</p>
        *     <p class="s-typo:p">Erick Blick</p>
        *   </div>
        * 
        * @example    html      Inline-block
        *   <div class="s-display:inline-block">
        *     <p class="s-typo:p">Kristi Turcotte</p>
        *     <p class="s-typo:p">Ms. Susan Conroy</p>
        *     <p class="s-typo:p">Archie Daniel</p>
        *   </div>
        * 
        * @example   html      Contents
        *   <div class="s-display:contents">
        *     <p class="s-typo:p">Vickie Mante</p>
        *     <p class="s-typo:p">Cora Littel</p>
        *     <p class="s-typo:p">Madeline Yost</p>
        *   </div>
        * 
        * @example          html      Flex 
        *   <div class="s-display:flex">
        *     <p class="s-typo:p">Emmett Hermiston</p>
        *     <p class="s-typo:p">Natasha Macejkovic</p>
        *     <p class="s-typo:p">Darnell Runolfsdottir</p>
        *   </div>
        * 
        * @example          html      Grid
        *   <div class="s-display:grid">
        *     <p class="s-typo:p">Jake Sporer</p>
        *     <p class="s-typo:p">Rafael Upton</p>
        *     <p class="s-typo:p">Keith Ankunding</p>
        *   </div>
        * 
        * @example          html      Inline-flex
        *   <div class="s-display:inline-flex">
        *     <p class="s-typo:p">Ellen Smith</p>
        *     <p class="s-typo:p">Clinton Abernathy</p>
        *     <p class="s-typo:p">Dorothy Toy</p>
        *   </div>
        * 
        * @example         html      Inline-grid
        *   <div class="s-display:inline-grid">
        *     <p class="s-typo:p">Juana Metz</p>
        *     <p class="s-typo:p">Wilson Nitzsche</p>
        *     <p class="s-typo:p">Lauren Brown</p>
        *   </div>
        * 
        * @example     html      None
        *   <div class="s-display:none">
        *     <p class="s-typo:p">Jeannette Oberbrunner</p>
        *     <p class="s-typo:p">Glen Daniel</p>
        *     <p class="s-typo:p">Lorene Herzog</p>
        *   </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-display-block{
          display: block !important;
      }
.s-display-inline-block{
          display: inline-block !important;
      }
.s-display-contents{
          display: contents !important;
      }
.s-display-flex{
          display: flex !important;
      }
.s-display-grid{
          display: grid !important;
      }
.s-display-inline-flex{
          display: inline-flex !important;
      }
.s-display-inline-grid{
          display: inline-grid !important;
      }
.s-display-none{
          display: none !important;
      }
/**
        * @name          Overflow
        * @namespace          sugar.style.helpers.overflow
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/overflow
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some overflow attributes on any HTMLElement.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.overflow.classes;
        * 
        * @cssClass         s-overflow:auto             Apply the "auto" overflow attribute
        * @cssClass         s-overflow:hidden             Apply the "hidden" overflow attribute
        * @cssClass         s-overflow:inherit             Apply the "inherit" overflow attribute
        * @cssClass         s-overflow:initial             Apply the "initial" overflow attribute
        * @cssClass         s-overflow:overlay             Apply the "overlay" overflow attribute
        * @cssClass         s-overflow:revert             Apply the "revert" overflow attribute
        * @cssClass         s-overflow:scroll             Apply the "scroll" overflow attribute
        * @cssClass         s-overflow:visible             Apply the "visible" overflow attribute
        * @cssClass         s-overflow:unset             Apply the "unset" overflow attribute
        * 
        * @example        html          Auto
        * <div class="s-overflow:auto">
        *   I'm in an "auto" overflow container
        * </div>
        * 
        * @example        html          Hidden
       * <div class="s-overflow:hidden">
       *   I'm in an "hidden" overflow container
       * </div>
       * 
       * @example        html          Inherit
       * <div class="s-overflow:inherit">
       *   I'm in an "inherit" overflow container
       * </div>
       * 
       * @example        html          Initial
       * <div class="s-overflow:initial">
       *   I'm in an "initial" overflow container
       * </div>
       * 
       * @example        html          Overlay
       * <div class="s-overflow:overlay">
       *   I'm in an "overlay" overflow container
       * </div>
       * 
       * @example        html          Revert
       * <div class="s-overflow:revert">
       *   I'm in an "revert" overflow container
       * </div>
       * 
       * @example        html          Scroll
       * <div class="s-overflow:scroll">
       *   I'm in an "scroll" overflow container
       * </div>
       * 
       * @example        html          Visible
       * <div class="s-overflow:visible">
       *   I'm in an "visible" overflow container
       * </div>
       * 
       * @example        html          Unset
       * <div class="s-overflow:unset">
       *   I'm in an "unset" overflow container
       * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-overflow-auto {
        overflow: auto;
    }
.s-overflow-hidden {
        overflow: hidden;
    }
.s-overflow-inherit {
        overflow: inherit;
    }
.s-overflow-initial {
        overflow: initial;
    }
.s-overflow-overlay {
        overflow: overlay;
    }
.s-overflow-revert {
        overflow: revert;
    }
.s-overflow-scroll {
        overflow: scroll;
    }
.s-overflow-visible {
        overflow: visible;
    }
.s-overflow-unset {
        overflow: unset;
    }
/**
        * @name          Positions
        * @namespace          sugar.style.helpers.position
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/positions
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some positions like `absolute`, `fixed`, etc... on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.position.classes;
        * 
        * @cssClass       s-position:absolute       Apply the `absolute` position
        * @cssClass       s-position:relative       Apply the `relative` position
        * @cssClass       s-position:fixed       Apply the `fixed` position
        * @cssClass       s-position:sticky       Apply the `sticky` position
        * @cssClass       s-position:top        Apply the `top` position to `0`
        * @cssClass       s-position:left        Apply the `left` position to `0`
        * @cssClass       s-position:right        Apply the `right` position to `0`
        * @cssClass       s-position:bottom        Apply the `bottom` position to `0`
        * @cssClass       s-position:center        Center the element either horizontally, vertically or both if no other alignement are specified
        * 
        * @example        html    Absolute
        *   <div class="s-position:relative s-ratio:16-9">
        *       <img class="s-position:absolute:top:left s-radius" src="https://picsum.photos/100/100?v=323333"/>
        *       <img class="s-position:absolute:top:center s-radius" src="https://picsum.photos/100/100?v=3232"/>
        *       <img class="s-position:absolute:top:right s-radius" src="https://picsum.photos/100/100?v=3222132"/>
        *       <img class="s-position:absolute:center:left s-radius" src="https://picsum.photos/100/100?v=322232"/>
        *       <img class="s-position:absolute:center s-radius" src="https://picsum.photos/100/100?v=3434"/>
        *       <img class="s-position:absolute:center:right s-radius" src="https://picsum.photos/100/100?v=35456232"/>
        *       <img class="s-position:absolute:bottom:left s-radius" src="https://picsum.photos/100/100?v=6566"/>
        *       <img class="s-position:absolute:bottom:center s-radius" src="https://picsum.photos/100/100?v=8787"/>
        *       <img class="s-position:absolute:bottom:right s-radius" src="https://picsum.photos/100/100?v=2323"/>
        *   </div>
        * 
        * @example        html        Relative
        *   <div class="s-position:relative s-ratio:21-9">
        *       <img class="s-position:relative" src="https://picsum.photos/100/100"/>
        *   </div>
        * 
        * @example        html        Fixed
        *   <div class="s-position:relative s-ratio:21-9">
        *       <img class="s-position:fixed:top:left s-radius" src="https://picsum.photos/100/100?v=323333"/>
        *       <img class="s-position:fixed:top:center s-radius" src="https://picsum.photos/100/100?v=3232"/>
        *       <img class="s-position:fixed:top:right s-radius" src="https://picsum.photos/100/100?v=3222132"/>
        *       <img class="s-position:fixed:center:left s-radius" src="https://picsum.photos/100/100?v=322232"/>
        *       <img class="s-position:fixed:center s-radius" src="https://picsum.photos/100/100?v=3434"/>
        *       <img class="s-position:fixed:center:right s-radius" src="https://picsum.photos/100/100?v=35456232"/>
        *       <img class="s-position:fixed:bottom:left s-radius" src="https://picsum.photos/100/100?v=6566"/>
        *       <img class="s-position:fixed:bottom:center s-radius" src="https://picsum.photos/100/100?v=8787"/>
        *       <img class="s-position:fixed:bottom:right s-radius" src="https://picsum.photos/100/100?v=2323"/>
        *   </div>
        * 
        * @example    html    Sticky
        *   <div class="s-position:relative s-ratio:21-9">
        *       <div class="s-position:sticky:top">
        *         <img class="s-mbs:100 s-radius" src="https://picsum.photos/100/100?v=323333"/>
        *     </div>
        *   </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-position-absolute{
          position: absolute !important;
      }
.s-position-relative{
          position: relative !important;
      }
.s-position-fixed{
          position: fixed !important;
      }
.s-position-sticky{
          position: sticky !important;
      }
.s-position-top {
        top: 0;
      }
.s-position-left {
        left: 0;
      }
.s-position-bottom {
        bottom: 0;
      }
.s-position-right {
        right: 0;
      }
.s-position-center:not(.s-position-top):not(.s-position-bottom):not(.s-position-left):not(.s-position-right) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
.s-position-center.s-position-left,
      .s-position-center.s-position-right {
        top: 50%;
        transform: translateY(-50%);
      }
.s-position-center.s-position-top,
      .s-position-center.s-position-bottom {
        left: 50%;
        transform: translateX(-50%);
      }
/**
        * @name          Pointer
        * @namespace          sugar.style.helpers.pointer
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/pointer
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some pointer attributes on any HTMLElement.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.pointer.classes;
        * 
        * @cssClass         s-pointer-events:none           Apply the pointer-events "none" attribute
        * @cssClass         s-pointer-events:all           Apply the pointer-events "all" attribute
        * @cssClass         s-pointer-events:auto           Apply the pointer-events "auto" attribute
        * @cssClass         s-pointer-events:fill           Apply the pointer-events "fill" attribute
        * 
        * @example        html          None
        * <div class="s-pointer-events:none">
        *   I'm in an "none" pointer-events container
        * </div>
        * 
        * @example        html          all
       * <div class="s-pointer-events:all">
       *   I'm in an "all" pointer-events container
       * </div>
       * 
       * @example        html          Auto
       * <div class="s-pointer-events:auto">
       *   I'm in an "auto" pointer-events container
       * </div>
       * 
       * @example        html          Fill
       * <div class="s-pointer-events:fill">
       *   I'm in an "fill" pointer-events container
       * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-pointer-events-none {
        pointer-events: none;
    }
.s-pointer-events-all {
        pointer-events: all;
    }
.s-pointer-events-auto {
        pointer-events: auto;
    }
.s-pointer-events-fill {
        pointer-events: fill;
    }
/**
        * @name          Transitions
        * @namespace          sugar.style.helpers.transition
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/transition
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply some transitions on any HTMLElement.
        * These transitions are defined in the `theme.transition` theme settings.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.transition.classes;
        * 
         * @cssClass             s-transition:slow            Apply the `slow` transition, * @cssClass             s-transition            Apply the `default` transition, * @cssClass             s-transition:fast            Apply the `fast` transition
        * 
        
                * @example          html        slow
                *   <div class="s-bg:main-surface s-radius:30" id="s-transition-s-fdde0c62-19af-4189-b4d7-277c1bf2398b">
                *      <div class="s-transition:slow s-ratio:1 s-bg:accent s-radius:30"></div>
                *       <style>
                *           #s-transition-s-fdde0c62-19af-4189-b4d7-277c1bf2398b > div { position: relative; left: 0; width: 100px; }
                *           #s-transition-s-fdde0c62-19af-4189-b4d7-277c1bf2398b:hover > div { left: calc(100% - 100px); )  }
                *       </style>
                *   </div>

                * @example          html        default
                *   <div class="s-bg:main-surface s-radius:30" id="s-transition-s-f3965bd2-ace7-40e5-9307-1013bbaade45">
                *      <div class="s-transition s-ratio:1 s-bg:accent s-radius:30"></div>
                *       <style>
                *           #s-transition-s-f3965bd2-ace7-40e5-9307-1013bbaade45 > div { position: relative; left: 0; width: 100px; }
                *           #s-transition-s-f3965bd2-ace7-40e5-9307-1013bbaade45:hover > div { left: calc(100% - 100px); )  }
                *       </style>
                *   </div>

                * @example          html        fast
                *   <div class="s-bg:main-surface s-radius:30" id="s-transition-s-552f1f5d-622f-47b4-a4ad-03d5ffc2c90a">
                *      <div class="s-transition:fast s-ratio:1 s-bg:accent s-radius:30"></div>
                *       <style>
                *           #s-transition-s-552f1f5d-622f-47b4-a4ad-03d5ffc2c90a > div { position: relative; left: 0; width: 100px; }
                *           #s-transition-s-552f1f5d-622f-47b4-a4ad-03d5ffc2c90a:hover > div { left: calc(100% - 100px); )  }
                *       </style>
                *   </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-transition--slow {transition: all .6s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
}
.s-transition {transition: all .3s cubic-bezier(0.700, 0.000, 0.305, 0.995);
}
.s-transition--fast {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
}
/**
        * @name          Margin
        * @namespace          sugar.style.helpers.margin
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/margin
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply margins to any HTMLElement
        * 
        * @feature          Support for RTL by using margin-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.margin.classes;
        * 
        
* @cssClass     s-m:0        Apply the `0` space all around
* @cssClass     s-mb:0        Apply the `0` block start and end space
* @cssClass     s-mbs:0        Apply the `0` block start space
* @cssClass     s-mbe:0        Apply the `0` block end space
* @cssClass     s-mi:0        Apply the `0` inline start and end space
* @cssClass     s-mis:0        Apply the `0` inline start space
* @cssClass     s-mie:0        Apply the `0` inline end space
* @cssClass     s-mb:-0        Apply the `0` negative block start and end space
* @cssClass     s-mbs:-0        Apply the `0` negative block start space
* @cssClass     s-mbe:-0        Apply the `0` negative block end space
* @cssClass     s-mi:-0        Apply the `0` negative inline start and end space
* @cssClass     s-mis:-0        Apply the `0` negative inline start space
* @cssClass     s-mie:-0        Apply the `0` negative inline end space
* @cssClass     s-m:10        Apply the `10` space all around
* @cssClass     s-mb:10        Apply the `10` block start and end space
* @cssClass     s-mbs:10        Apply the `10` block start space
* @cssClass     s-mbe:10        Apply the `10` block end space
* @cssClass     s-mi:10        Apply the `10` inline start and end space
* @cssClass     s-mis:10        Apply the `10` inline start space
* @cssClass     s-mie:10        Apply the `10` inline end space
* @cssClass     s-mb:-10        Apply the `10` negative block start and end space
* @cssClass     s-mbs:-10        Apply the `10` negative block start space
* @cssClass     s-mbe:-10        Apply the `10` negative block end space
* @cssClass     s-mi:-10        Apply the `10` negative inline start and end space
* @cssClass     s-mis:-10        Apply the `10` negative inline start space
* @cssClass     s-mie:-10        Apply the `10` negative inline end space
* @cssClass     s-m:20        Apply the `20` space all around
* @cssClass     s-mb:20        Apply the `20` block start and end space
* @cssClass     s-mbs:20        Apply the `20` block start space
* @cssClass     s-mbe:20        Apply the `20` block end space
* @cssClass     s-mi:20        Apply the `20` inline start and end space
* @cssClass     s-mis:20        Apply the `20` inline start space
* @cssClass     s-mie:20        Apply the `20` inline end space
* @cssClass     s-mb:-20        Apply the `20` negative block start and end space
* @cssClass     s-mbs:-20        Apply the `20` negative block start space
* @cssClass     s-mbe:-20        Apply the `20` negative block end space
* @cssClass     s-mi:-20        Apply the `20` negative inline start and end space
* @cssClass     s-mis:-20        Apply the `20` negative inline start space
* @cssClass     s-mie:-20        Apply the `20` negative inline end space
* @cssClass     s-m:30        Apply the `30` space all around
* @cssClass     s-mb:30        Apply the `30` block start and end space
* @cssClass     s-mbs:30        Apply the `30` block start space
* @cssClass     s-mbe:30        Apply the `30` block end space
* @cssClass     s-mi:30        Apply the `30` inline start and end space
* @cssClass     s-mis:30        Apply the `30` inline start space
* @cssClass     s-mie:30        Apply the `30` inline end space
* @cssClass     s-mb:-30        Apply the `30` negative block start and end space
* @cssClass     s-mbs:-30        Apply the `30` negative block start space
* @cssClass     s-mbe:-30        Apply the `30` negative block end space
* @cssClass     s-mi:-30        Apply the `30` negative inline start and end space
* @cssClass     s-mis:-30        Apply the `30` negative inline start space
* @cssClass     s-mie:-30        Apply the `30` negative inline end space
* @cssClass     s-m:40        Apply the `40` space all around
* @cssClass     s-mb:40        Apply the `40` block start and end space
* @cssClass     s-mbs:40        Apply the `40` block start space
* @cssClass     s-mbe:40        Apply the `40` block end space
* @cssClass     s-mi:40        Apply the `40` inline start and end space
* @cssClass     s-mis:40        Apply the `40` inline start space
* @cssClass     s-mie:40        Apply the `40` inline end space
* @cssClass     s-mb:-40        Apply the `40` negative block start and end space
* @cssClass     s-mbs:-40        Apply the `40` negative block start space
* @cssClass     s-mbe:-40        Apply the `40` negative block end space
* @cssClass     s-mi:-40        Apply the `40` negative inline start and end space
* @cssClass     s-mis:-40        Apply the `40` negative inline start space
* @cssClass     s-mie:-40        Apply the `40` negative inline end space
* @cssClass     s-m:50        Apply the `50` space all around
* @cssClass     s-mb:50        Apply the `50` block start and end space
* @cssClass     s-mbs:50        Apply the `50` block start space
* @cssClass     s-mbe:50        Apply the `50` block end space
* @cssClass     s-mi:50        Apply the `50` inline start and end space
* @cssClass     s-mis:50        Apply the `50` inline start space
* @cssClass     s-mie:50        Apply the `50` inline end space
* @cssClass     s-mb:-50        Apply the `50` negative block start and end space
* @cssClass     s-mbs:-50        Apply the `50` negative block start space
* @cssClass     s-mbe:-50        Apply the `50` negative block end space
* @cssClass     s-mi:-50        Apply the `50` negative inline start and end space
* @cssClass     s-mis:-50        Apply the `50` negative inline start space
* @cssClass     s-mie:-50        Apply the `50` negative inline end space
* @cssClass     s-m:60        Apply the `60` space all around
* @cssClass     s-mb:60        Apply the `60` block start and end space
* @cssClass     s-mbs:60        Apply the `60` block start space
* @cssClass     s-mbe:60        Apply the `60` block end space
* @cssClass     s-mi:60        Apply the `60` inline start and end space
* @cssClass     s-mis:60        Apply the `60` inline start space
* @cssClass     s-mie:60        Apply the `60` inline end space
* @cssClass     s-mb:-60        Apply the `60` negative block start and end space
* @cssClass     s-mbs:-60        Apply the `60` negative block start space
* @cssClass     s-mbe:-60        Apply the `60` negative block end space
* @cssClass     s-mi:-60        Apply the `60` negative inline start and end space
* @cssClass     s-mis:-60        Apply the `60` negative inline start space
* @cssClass     s-mie:-60        Apply the `60` negative inline end space
* @cssClass     s-m:70        Apply the `70` space all around
* @cssClass     s-mb:70        Apply the `70` block start and end space
* @cssClass     s-mbs:70        Apply the `70` block start space
* @cssClass     s-mbe:70        Apply the `70` block end space
* @cssClass     s-mi:70        Apply the `70` inline start and end space
* @cssClass     s-mis:70        Apply the `70` inline start space
* @cssClass     s-mie:70        Apply the `70` inline end space
* @cssClass     s-mb:-70        Apply the `70` negative block start and end space
* @cssClass     s-mbs:-70        Apply the `70` negative block start space
* @cssClass     s-mbe:-70        Apply the `70` negative block end space
* @cssClass     s-mi:-70        Apply the `70` negative inline start and end space
* @cssClass     s-mis:-70        Apply the `70` negative inline start space
* @cssClass     s-mie:-70        Apply the `70` negative inline end space
* @cssClass     s-m:80        Apply the `80` space all around
* @cssClass     s-mb:80        Apply the `80` block start and end space
* @cssClass     s-mbs:80        Apply the `80` block start space
* @cssClass     s-mbe:80        Apply the `80` block end space
* @cssClass     s-mi:80        Apply the `80` inline start and end space
* @cssClass     s-mis:80        Apply the `80` inline start space
* @cssClass     s-mie:80        Apply the `80` inline end space
* @cssClass     s-mb:-80        Apply the `80` negative block start and end space
* @cssClass     s-mbs:-80        Apply the `80` negative block start space
* @cssClass     s-mbe:-80        Apply the `80` negative block end space
* @cssClass     s-mi:-80        Apply the `80` negative inline start and end space
* @cssClass     s-mis:-80        Apply the `80` negative inline start space
* @cssClass     s-mie:-80        Apply the `80` negative inline end space
* @cssClass     s-m:90        Apply the `90` space all around
* @cssClass     s-mb:90        Apply the `90` block start and end space
* @cssClass     s-mbs:90        Apply the `90` block start space
* @cssClass     s-mbe:90        Apply the `90` block end space
* @cssClass     s-mi:90        Apply the `90` inline start and end space
* @cssClass     s-mis:90        Apply the `90` inline start space
* @cssClass     s-mie:90        Apply the `90` inline end space
* @cssClass     s-mb:-90        Apply the `90` negative block start and end space
* @cssClass     s-mbs:-90        Apply the `90` negative block start space
* @cssClass     s-mbe:-90        Apply the `90` negative block end space
* @cssClass     s-mi:-90        Apply the `90` negative inline start and end space
* @cssClass     s-mis:-90        Apply the `90` negative inline start space
* @cssClass     s-mie:-90        Apply the `90` negative inline end space
* @cssClass     s-m:100        Apply the `100` space all around
* @cssClass     s-mb:100        Apply the `100` block start and end space
* @cssClass     s-mbs:100        Apply the `100` block start space
* @cssClass     s-mbe:100        Apply the `100` block end space
* @cssClass     s-mi:100        Apply the `100` inline start and end space
* @cssClass     s-mis:100        Apply the `100` inline start space
* @cssClass     s-mie:100        Apply the `100` inline end space
* @cssClass     s-mb:-100        Apply the `100` negative block start and end space
* @cssClass     s-mbs:-100        Apply the `100` negative block start space
* @cssClass     s-mbe:-100        Apply the `100` negative block end space
* @cssClass     s-mi:-100        Apply the `100` negative inline start and end space
* @cssClass     s-mis:-100        Apply the `100` negative inline start space
* @cssClass     s-mie:-100        Apply the `100` negative inline end space
        * @cssClass                s-m:auto            Apply the `auto` space all around
        * @cssClass                s-mb:auto          Apply the `auto` block start and end space
        * @cssClass                s-mbs:auto          Apply the `auto` block start space
        * @cssClass                s-mbe:auto          Apply the `auto` block end space
        * @cssClass                s-mi:auto          Apply the `auto` inline start and end space
        * @cssClass                s-mis:auto          Apply the `auto` inline start space
        * @cssClass                s-mie:auto          Apply the `auto` inline end space
        *
        * 
        * @example        html               Inline
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Miss Denise O'Hara</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">Tracy Halvorson</p>
        *   <p class="s-bg:main s-mie:100 s-radius s-mbe:20 s-p:30">Nettie Moore</p>
        *   <p class="s-bg:error s-mie:30 s-radius s-p:30">Joseph Howell DVM</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-mbe:40 s-p:30 s-text:center">Kate Konopelski</div>
        *   <div class="s-bg:complementary s-radius s-mbe:20 s-p:30 s-text:center">Clara Borer</div>
        *   <div class="s-bg:main s-radius s-mbe:50 s-p:30 s-text:center">Sonia Farrell V</div>
        *   <div class="s-bg:error s-radius s-p:30 s-text:center">Carrie Fay</div>
        * 
        * @example            html                RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Tanya Williamson</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">Lula Welch</p>
        *   <p class="s-bg:main s-radius s-mie:100 s-mbe:20 s-p:30">Clinton Skiles III</p>
        *   <p class="s-bg:error s-radius s-mie:30 s-p:30">Herbert Hamill</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-m-default {
        margin: 1rem;
   }
.s-mbs-default {
        margin-block-start: 1rem !important;
   }
.s-mbe-default {
        margin-block-end: 1rem !important;
   }
.s-mis-default {
        margin-inline-start: 1rem !important;
   }
.s-mie-default {
        margin-inline-end: 1rem !important;
   }
.s-mi-default {
        margin-inline-start: 1rem !important;
        margin-inline-end: 1rem !important;
   }
.s-mb-default {
        margin-block-start: 1rem !important;
        margin-block-end: 1rem !important;
   }
.s-m-0 {
        margin: calc(var(--s-margin-default, 1rem) * 0);
   }
.s-mbs-0 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   }
.s-mbe-0 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   }
.s-mis-0 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   }
.s-mie-0 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   }
.s-mi-0 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   }
.s-mb-0 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   }
.s-m-10 {
        margin: calc(var(--s-margin-default, 1rem) * 0.375);
   }
.s-mbs-10 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   }
.s-mbe-10 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   }
.s-mis-10 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   }
.s-mie-10 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   }
.s-mi-10 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   }
.s-mb-10 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   }
.s-m-20 {
        margin: calc(var(--s-margin-default, 1rem) * 0.75);
   }
.s-mbs-20 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   }
.s-mbe-20 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   }
.s-mis-20 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   }
.s-mie-20 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   }
.s-mi-20 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   }
.s-mb-20 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   }
.s-m-30 {
        margin: calc(var(--s-margin-default, 1rem) * 1.4);
   }
.s-mbs-30 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   }
.s-mbe-30 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   }
.s-mis-30 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   }
.s-mie-30 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   }
.s-mi-30 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   }
.s-mb-30 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   }
.s-m-40 {
        margin: calc(var(--s-margin-default, 1rem) * 2);
   }
.s-mbs-40 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   }
.s-mbe-40 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   }
.s-mis-40 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   }
.s-mie-40 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   }
.s-mi-40 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   }
.s-mb-40 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   }
.s-m-50 {
        margin: calc(var(--s-margin-default, 1rem) * 3.5);
   }
.s-mbs-50 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   }
.s-mbe-50 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   }
.s-mis-50 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   }
.s-mie-50 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   }
.s-mi-50 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   }
.s-mb-50 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   }
.s-m-60 {
        margin: calc(var(--s-margin-default, 1rem) * 5);
   }
.s-mbs-60 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   }
.s-mbe-60 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   }
.s-mis-60 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   }
.s-mie-60 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   }
.s-mi-60 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   }
.s-mb-60 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   }
.s-m-70 {
        margin: calc(var(--s-margin-default, 1rem) * 7.5);
   }
.s-mbs-70 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   }
.s-mbe-70 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   }
.s-mis-70 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   }
.s-mie-70 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   }
.s-mi-70 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   }
.s-mb-70 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   }
.s-m-80 {
        margin: calc(var(--s-margin-default, 1rem) * 10);
   }
.s-mbs-80 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   }
.s-mbe-80 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   }
.s-mis-80 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   }
.s-mie-80 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   }
.s-mi-80 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   }
.s-mb-80 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   }
.s-m-90 {
        margin: calc(var(--s-margin-default, 1rem) * 15);
   }
.s-mbs-90 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   }
.s-mbe-90 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   }
.s-mis-90 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   }
.s-mie-90 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   }
.s-mi-90 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   }
.s-mb-90 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   }
.s-m-100 {
        margin: calc(var(--s-margin-default, 1rem) * 20);
   }
.s-mbs-100 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   }
.s-mbe-100 {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   }
.s-mis-100 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   }
.s-mie-100 {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   }
.s-mi-100 {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   }
.s-mb-100 {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   }
.s-m--default {
        margin: calc(1rem * -1);
   }
.s-mbs--default {
        margin-block-start: calc(1rem * -1) !important;
   }
.s-mbe--default {
        margin-block-end: calc(1rem * -1) !important;
   }
.s-mis--default {
        margin-inline-start: calc(1rem * -1) !important;
   }
.s-mie--default {
        margin-inline-end: calc(1rem * -1) !important;
   }
.s-mi--default {
        margin-inline-start: calc(1rem * -1) !important;
        margin-inline-end: calc(1rem * -1) !important;
   }
.s-mb--default {
        margin-block-start: calc(1rem * -1) !important;
        margin-block-end: calc(1rem * -1) !important;
   }
.s-m--0 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0) * -1);
   }
.s-mbs--0 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   }
.s-mbe--0 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   }
.s-mis--0 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   }
.s-mie--0 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   }
.s-mi--0 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   }
.s-mb--0 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   }
.s-m--10 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1);
   }
.s-mbs--10 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   }
.s-mbe--10 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   }
.s-mis--10 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   }
.s-mie--10 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   }
.s-mi--10 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   }
.s-mb--10 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   }
.s-m--20 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1);
   }
.s-mbs--20 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   }
.s-mbe--20 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   }
.s-mis--20 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   }
.s-mie--20 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   }
.s-mi--20 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   }
.s-mb--20 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   }
.s-m--30 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1);
   }
.s-mbs--30 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   }
.s-mbe--30 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   }
.s-mis--30 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   }
.s-mie--30 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   }
.s-mi--30 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   }
.s-mb--30 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   }
.s-m--40 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 2) * -1);
   }
.s-mbs--40 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   }
.s-mbe--40 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   }
.s-mis--40 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   }
.s-mie--40 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   }
.s-mi--40 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   }
.s-mb--40 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   }
.s-m--50 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1);
   }
.s-mbs--50 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   }
.s-mbe--50 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   }
.s-mis--50 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   }
.s-mie--50 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   }
.s-mi--50 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   }
.s-mb--50 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   }
.s-m--60 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 5) * -1);
   }
.s-mbs--60 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   }
.s-mbe--60 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   }
.s-mis--60 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   }
.s-mie--60 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   }
.s-mi--60 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   }
.s-mb--60 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   }
.s-m--70 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1);
   }
.s-mbs--70 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   }
.s-mbe--70 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   }
.s-mis--70 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   }
.s-mie--70 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   }
.s-mi--70 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   }
.s-mb--70 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   }
.s-m--80 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 10) * -1);
   }
.s-mbs--80 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   }
.s-mbe--80 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   }
.s-mis--80 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   }
.s-mie--80 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   }
.s-mi--80 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   }
.s-mb--80 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   }
.s-m--90 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 15) * -1);
   }
.s-mbs--90 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   }
.s-mbe--90 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   }
.s-mis--90 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   }
.s-mie--90 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   }
.s-mi--90 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   }
.s-mb--90 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   }
.s-m--100 {
        margin: calc(calc(var(--s-margin-default, 1rem) * 20) * -1);
   }
.s-mbs--100 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   }
.s-mbe--100 {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   }
.s-mis--100 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   }
.s-mie--100 {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   }
.s-mi--100 {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   }
.s-mb--100 {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   }
.s-m-auto {
        margin: auto;
   }
.s-mbs-auto {
        margin-block-start: auto;
   }
.s-mie-auto {
        margin-inline-end: auto;
   }
.s-mbe-auto {
        margin-block-end: auto;
   }
.s-mis-auto {
        margin-inline-start: auto;
   }
.s-mi-auto {
        margin-inline-start: auto;
        margin-inline-end: auto;
   }
.s-mb-auto {
        margin-block-start: auto;
        margin-block-end: auto;
   }
/**
        * @name          Offsize
        * @namespace          sugar.style.helpers.offsize
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/offsize
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply an offsize to any HTMLElement.
        * An offsize is a "space" that you want to ADD to the width/height of an element.
        * You can specify where you want to add this offsize like for margin and padding by using the "inline" and "block" notation.
        * 
        * @feature          Support for RTL by using {inline|block} notation...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.offsize.classes;
        * 
        
* @cssClass     s-os:0        Apply the `0` offsize all around
* @cssClass     s-osb:0        Apply the `0` block start and end offsize
* @cssClass     s-osbs:0        Apply the `0` block start offsize
* @cssClass     s-osbe:0        Apply the `0` block end offsize
* @cssClass     s-osi:0        Apply the `0` inline start and end offsize
* @cssClass     s-osis:0        Apply the `0` inline start offsize
* @cssClass     s-osie:0        Apply the `0` inline end offsize
* @cssClass     s-os:10        Apply the `10` offsize all around
* @cssClass     s-osb:10        Apply the `10` block start and end offsize
* @cssClass     s-osbs:10        Apply the `10` block start offsize
* @cssClass     s-osbe:10        Apply the `10` block end offsize
* @cssClass     s-osi:10        Apply the `10` inline start and end offsize
* @cssClass     s-osis:10        Apply the `10` inline start offsize
* @cssClass     s-osie:10        Apply the `10` inline end offsize
* @cssClass     s-os:20        Apply the `20` offsize all around
* @cssClass     s-osb:20        Apply the `20` block start and end offsize
* @cssClass     s-osbs:20        Apply the `20` block start offsize
* @cssClass     s-osbe:20        Apply the `20` block end offsize
* @cssClass     s-osi:20        Apply the `20` inline start and end offsize
* @cssClass     s-osis:20        Apply the `20` inline start offsize
* @cssClass     s-osie:20        Apply the `20` inline end offsize
* @cssClass     s-os:30        Apply the `30` offsize all around
* @cssClass     s-osb:30        Apply the `30` block start and end offsize
* @cssClass     s-osbs:30        Apply the `30` block start offsize
* @cssClass     s-osbe:30        Apply the `30` block end offsize
* @cssClass     s-osi:30        Apply the `30` inline start and end offsize
* @cssClass     s-osis:30        Apply the `30` inline start offsize
* @cssClass     s-osie:30        Apply the `30` inline end offsize
* @cssClass     s-os:40        Apply the `40` offsize all around
* @cssClass     s-osb:40        Apply the `40` block start and end offsize
* @cssClass     s-osbs:40        Apply the `40` block start offsize
* @cssClass     s-osbe:40        Apply the `40` block end offsize
* @cssClass     s-osi:40        Apply the `40` inline start and end offsize
* @cssClass     s-osis:40        Apply the `40` inline start offsize
* @cssClass     s-osie:40        Apply the `40` inline end offsize
* @cssClass     s-os:50        Apply the `50` offsize all around
* @cssClass     s-osb:50        Apply the `50` block start and end offsize
* @cssClass     s-osbs:50        Apply the `50` block start offsize
* @cssClass     s-osbe:50        Apply the `50` block end offsize
* @cssClass     s-osi:50        Apply the `50` inline start and end offsize
* @cssClass     s-osis:50        Apply the `50` inline start offsize
* @cssClass     s-osie:50        Apply the `50` inline end offsize
* @cssClass     s-os:60        Apply the `60` offsize all around
* @cssClass     s-osb:60        Apply the `60` block start and end offsize
* @cssClass     s-osbs:60        Apply the `60` block start offsize
* @cssClass     s-osbe:60        Apply the `60` block end offsize
* @cssClass     s-osi:60        Apply the `60` inline start and end offsize
* @cssClass     s-osis:60        Apply the `60` inline start offsize
* @cssClass     s-osie:60        Apply the `60` inline end offsize
* @cssClass     s-os:70        Apply the `70` offsize all around
* @cssClass     s-osb:70        Apply the `70` block start and end offsize
* @cssClass     s-osbs:70        Apply the `70` block start offsize
* @cssClass     s-osbe:70        Apply the `70` block end offsize
* @cssClass     s-osi:70        Apply the `70` inline start and end offsize
* @cssClass     s-osis:70        Apply the `70` inline start offsize
* @cssClass     s-osie:70        Apply the `70` inline end offsize
* @cssClass     s-os:80        Apply the `80` offsize all around
* @cssClass     s-osb:80        Apply the `80` block start and end offsize
* @cssClass     s-osbs:80        Apply the `80` block start offsize
* @cssClass     s-osbe:80        Apply the `80` block end offsize
* @cssClass     s-osi:80        Apply the `80` inline start and end offsize
* @cssClass     s-osis:80        Apply the `80` inline start offsize
* @cssClass     s-osie:80        Apply the `80` inline end offsize
* @cssClass     s-os:90        Apply the `90` offsize all around
* @cssClass     s-osb:90        Apply the `90` block start and end offsize
* @cssClass     s-osbs:90        Apply the `90` block start offsize
* @cssClass     s-osbe:90        Apply the `90` block end offsize
* @cssClass     s-osi:90        Apply the `90` inline start and end offsize
* @cssClass     s-osis:90        Apply the `90` inline start offsize
* @cssClass     s-osie:90        Apply the `90` inline end offsize
* @cssClass     s-os:100        Apply the `100` offsize all around
* @cssClass     s-osb:100        Apply the `100` block start and end offsize
* @cssClass     s-osbs:100        Apply the `100` block start offsize
* @cssClass     s-osbe:100        Apply the `100` block end offsize
* @cssClass     s-osi:100        Apply the `100` inline start and end offsize
* @cssClass     s-osis:100        Apply the `100` inline start offsize
* @cssClass     s-osie:100        Apply the `100` inline end offsize
        *
        * 
        * @example        html               All around
        * <div class="s-bg:main-surface s-position:relative" style="height: 250px">
        *   <div class="s-os:50 s-bg:accent s-opacity:10"></div>
        * </div>
        * 
        * @example        html               Inline
        * <div class="s-bg:main-surface">
        *   <div class="s-osi:50 s-bg:accent s-opacity:10" style="height: 250px"></div>
        * </div>
        * 
        * @example        html               Block
        * <div class="s-bg:main-surface s-position:relative" style="height: 250px">
        *   <div class="s-osb:50 s-bg:accent s-opacity:10"></div>
        * </div>
        * 
        * @example        html               Inline end
        * <div class="s-bg:main-surface">
        *   <div class="s-osie:50 s-bg:accent s-opacity:10" style="height: 250px"></div>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-os-default {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
   }
.s-os-default[dir="rtl"], [dir="rtl"] .s-os-default {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
        }
.s-os-default {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * 1) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * 1) * 2);
}
.s-osbs-default {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * 1));
   }
.s-osbe-default {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * 1));
   }
.s-osis-default {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * 1));
   }
.s-osis-default[dir="rtl"], [dir="rtl"] .s-osis-default {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
        }
.s-osie-default {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * 1));
   }
.s-osie-default[dir="rtl"], [dir="rtl"] .s-osie-default {
            left: auto;
           right: 0;
        }
.s-osi-default {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * 1) * 2);
   }
.s-osb-default {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * 1) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * 1) * 2);
   }
.s-os-0 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
   }
.s-os-0[dir="rtl"], [dir="rtl"] .s-os-0 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
        }
.s-os-0 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * 2);
}
.s-osbs-0 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)));
   }
.s-osbe-0 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)));
   }
.s-osis-0 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)));
   }
.s-osis-0[dir="rtl"], [dir="rtl"] .s-osis-0 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
        }
.s-osie-0 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)));
   }
.s-osie-0[dir="rtl"], [dir="rtl"] .s-osie-0 {
            left: auto;
           right: 0;
        }
.s-osi-0 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * 2);
   }
.s-osb-0 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-0, 0)) * 2);
   }
.s-os-10 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
   }
.s-os-10[dir="rtl"], [dir="rtl"] .s-os-10 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
        }
.s-os-10 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * 2);
}
.s-osbs-10 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)));
   }
.s-osbe-10 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)));
   }
.s-osis-10 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)));
   }
.s-osis-10[dir="rtl"], [dir="rtl"] .s-osis-10 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
        }
.s-osie-10 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)));
   }
.s-osie-10[dir="rtl"], [dir="rtl"] .s-osie-10 {
            left: auto;
           right: 0;
        }
.s-osi-10 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * 2);
   }
.s-osb-10 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-10, 0.375)) * 2);
   }
.s-os-20 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
   }
.s-os-20[dir="rtl"], [dir="rtl"] .s-os-20 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
        }
.s-os-20 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * 2);
}
.s-osbs-20 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)));
   }
.s-osbe-20 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)));
   }
.s-osis-20 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)));
   }
.s-osis-20[dir="rtl"], [dir="rtl"] .s-osis-20 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
        }
.s-osie-20 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)));
   }
.s-osie-20[dir="rtl"], [dir="rtl"] .s-osie-20 {
            left: auto;
           right: 0;
        }
.s-osi-20 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * 2);
   }
.s-osb-20 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-20, 0.75)) * 2);
   }
.s-os-30 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
   }
.s-os-30[dir="rtl"], [dir="rtl"] .s-os-30 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
        }
.s-os-30 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * 2);
}
.s-osbs-30 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)));
   }
.s-osbe-30 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)));
   }
.s-osis-30 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)));
   }
.s-osis-30[dir="rtl"], [dir="rtl"] .s-osis-30 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
        }
.s-osie-30 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)));
   }
.s-osie-30[dir="rtl"], [dir="rtl"] .s-osie-30 {
            left: auto;
           right: 0;
        }
.s-osi-30 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * 2);
   }
.s-osb-30 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-30, 1.4)) * 2);
   }
.s-os-40 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
   }
.s-os-40[dir="rtl"], [dir="rtl"] .s-os-40 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
        }
.s-os-40 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * 2);
}
.s-osbs-40 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)));
   }
.s-osbe-40 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)));
   }
.s-osis-40 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)));
   }
.s-osis-40[dir="rtl"], [dir="rtl"] .s-osis-40 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
        }
.s-osie-40 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)));
   }
.s-osie-40[dir="rtl"], [dir="rtl"] .s-osie-40 {
            left: auto;
           right: 0;
        }
.s-osi-40 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * 2);
   }
.s-osb-40 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-40, 2)) * 2);
   }
.s-os-50 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
   }
.s-os-50[dir="rtl"], [dir="rtl"] .s-os-50 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
        }
.s-os-50 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * 2);
}
.s-osbs-50 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)));
   }
.s-osbe-50 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)));
   }
.s-osis-50 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)));
   }
.s-osis-50[dir="rtl"], [dir="rtl"] .s-osis-50 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
        }
.s-osie-50 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)));
   }
.s-osie-50[dir="rtl"], [dir="rtl"] .s-osie-50 {
            left: auto;
           right: 0;
        }
.s-osi-50 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * 2);
   }
.s-osb-50 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-50, 3.5)) * 2);
   }
.s-os-60 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
   }
.s-os-60[dir="rtl"], [dir="rtl"] .s-os-60 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
        }
.s-os-60 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * 2);
}
.s-osbs-60 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)));
   }
.s-osbe-60 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)));
   }
.s-osis-60 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)));
   }
.s-osis-60[dir="rtl"], [dir="rtl"] .s-osis-60 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
        }
.s-osie-60 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)));
   }
.s-osie-60[dir="rtl"], [dir="rtl"] .s-osie-60 {
            left: auto;
           right: 0;
        }
.s-osi-60 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * 2);
   }
.s-osb-60 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-60, 5)) * 2);
   }
.s-os-70 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
   }
.s-os-70[dir="rtl"], [dir="rtl"] .s-os-70 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
        }
.s-os-70 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * 2);
}
.s-osbs-70 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)));
   }
.s-osbe-70 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)));
   }
.s-osis-70 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)));
   }
.s-osis-70[dir="rtl"], [dir="rtl"] .s-osis-70 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
        }
.s-osie-70 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)));
   }
.s-osie-70[dir="rtl"], [dir="rtl"] .s-osie-70 {
            left: auto;
           right: 0;
        }
.s-osi-70 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * 2);
   }
.s-osb-70 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-70, 7.5)) * 2);
   }
.s-os-80 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
   }
.s-os-80[dir="rtl"], [dir="rtl"] .s-os-80 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
        }
.s-os-80 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * 2);
}
.s-osbs-80 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)));
   }
.s-osbe-80 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)));
   }
.s-osis-80 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)));
   }
.s-osis-80[dir="rtl"], [dir="rtl"] .s-osis-80 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
        }
.s-osie-80 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)));
   }
.s-osie-80[dir="rtl"], [dir="rtl"] .s-osie-80 {
            left: auto;
           right: 0;
        }
.s-osi-80 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * 2);
   }
.s-osb-80 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-80, 10)) * 2);
   }
.s-os-90 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
   }
.s-os-90[dir="rtl"], [dir="rtl"] .s-os-90 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
        }
.s-os-90 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * 2);
}
.s-osbs-90 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)));
   }
.s-osbe-90 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)));
   }
.s-osis-90 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)));
   }
.s-osis-90[dir="rtl"], [dir="rtl"] .s-osis-90 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
        }
.s-osie-90 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)));
   }
.s-osie-90[dir="rtl"], [dir="rtl"] .s-osie-90 {
            left: auto;
           right: 0;
        }
.s-osi-90 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * 2);
   }
.s-osb-90 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-90, 15)) * 2);
   }
.s-os-100 {
        position: relative;
        
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
   }
.s-os-100[dir="rtl"], [dir="rtl"] .s-os-100 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
        }
.s-os-100 {

        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * 2);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * 2);
}
.s-osbs-100 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)));
   }
.s-osbe-100 {
       position: relative;
       top: 0;
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)));
   }
.s-osis-100 {
       position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)));
   }
.s-osis-100[dir="rtl"], [dir="rtl"] .s-osis-100 {
            left: auto;
           right: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
        }
.s-osie-100 {
       position: relative;
       left: 0;
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)));
   }
.s-osie-100[dir="rtl"], [dir="rtl"] .s-osie-100 {
            left: auto;
           right: 0;
        }
.s-osi-100 {
        position: relative;
        left: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
        width: calc(var(--width, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * 2);
   }
.s-osb-100 {
        position: relative;
        top: calc(calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * -1);
        height: calc(var(--height, 100%) + calc(var(--s-offsize-default, 1rem) * var(--s-offsize-100, 20)) * 2);
   }
/**
        * @name          Order
        * @namespace          sugar.style.helpers.order
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/order
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some order attributes on any HTMLElement.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.order.classes;
        * 
        
            * @cssClass             s-order-0        Apply the order 0
        

            * @cssClass             s-order-1        Apply the order 1
        

            * @cssClass             s-order-2        Apply the order 2
        

            * @cssClass             s-order-3        Apply the order 3
        

            * @cssClass             s-order-4        Apply the order 4
        

            * @cssClass             s-order-5        Apply the order 5
        

            * @cssClass             s-order-6        Apply the order 6
        

            * @cssClass             s-order-7        Apply the order 7
        

            * @cssClass             s-order-8        Apply the order 8
        

            * @cssClass             s-order-9        Apply the order 9
        

            * @cssClass             s-order-10        Apply the order 10
        

            * @cssClass             s-order-11        Apply the order 11
        

            * @cssClass             s-order-12        Apply the order 12
        

            * @cssClass             s-order-13        Apply the order 13
        

            * @cssClass             s-order-14        Apply the order 14
        

            * @cssClass             s-order-15        Apply the order 15
        

            * @cssClass             s-order-16        Apply the order 16
        

            * @cssClass             s-order-17        Apply the order 17
        

            * @cssClass             s-order-18        Apply the order 18
        

            * @cssClass             s-order-19        Apply the order 19
        
        * 
        * @example        html          Simple order
        * <div class="s-flex s-gap:40">
        *   <div class="s-order:3 s-p:30 s-ratio:16-9 s-flex-item:grow s-bg:main-surface s-radius">1</div>
        *   <div class="s-order:1 s-p:30 s-ratio:16-9 s-flex-item:grow s-bg:main-surface s-radius">2</div>
        *   <div class="s-order:2 s-p:30 s-ratio:16-9 s-flex-item:grow s-bg:main-surface s-radius">3</div>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-order-0 {
                order: 0;
            }
.s-order-1 {
                order: 1;
            }
.s-order-2 {
                order: 2;
            }
.s-order-3 {
                order: 3;
            }
.s-order-4 {
                order: 4;
            }
.s-order-5 {
                order: 5;
            }
.s-order-6 {
                order: 6;
            }
.s-order-7 {
                order: 7;
            }
.s-order-8 {
                order: 8;
            }
.s-order-9 {
                order: 9;
            }
.s-order-10 {
                order: 10;
            }
.s-order-11 {
                order: 11;
            }
.s-order-12 {
                order: 12;
            }
.s-order-13 {
                order: 13;
            }
.s-order-14 {
                order: 14;
            }
.s-order-15 {
                order: 15;
            }
.s-order-16 {
                order: 16;
            }
.s-order-17 {
                order: 17;
            }
.s-order-18 {
                order: 18;
            }
.s-order-19 {
                order: 19;
            }
.s-opacity-0 {
        opacity: 0;
   }
.s-opacity-10 {
        opacity: var(--s-opacity-10, 0.1);
   }
.s-opacity-20 {
        opacity: var(--s-opacity-20, 0.2);
   }
.s-opacity-30 {
        opacity: var(--s-opacity-30, 0.3);
   }
.s-opacity-40 {
        opacity: var(--s-opacity-40, 0.4);
   }
.s-opacity-50 {
        opacity: var(--s-opacity-50, 0.5);
   }
.s-opacity-60 {
        opacity: var(--s-opacity-60, 0.6);
   }
.s-opacity-70 {
        opacity: var(--s-opacity-70, 0.7);
   }
.s-opacity-80 {
        opacity: var(--s-opacity-80, 0.8);
   }
.s-opacity-90 {
        opacity: var(--s-opacity-90, 0.9);
   }
.s-opacity-100 {
        opacity: var(--s-opacity-100, 1);
   }
/**
        * @name          Scale
        * @namespace          sugar.style.helpers.scale
        * @type               Styleguide
        * @menu           Styleguide / Tools        /styleguide/tools/scale
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply a scale to any supported UI elements.
        * This scale does not use the transform property but increase actual values like `padding`,
        * `margin`, etc... In fact, all the properties setted with the `sugar.scallable` function.
        * It's usually a good practice to set the `font-size` of your UI element to `sugar.scalable(1rem)`
        * and then to set inner values using `em` unit.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.scale.classes;
        * 
         * @cssClass     s-scale:10             Apply the 10 scale
 * @cssClass     s-scale:11             Apply the 11 scale
 * @cssClass     s-scale:12             Apply the 12 scale
 * @cssClass     s-scale:13             Apply the 13 scale
 * @cssClass     s-scale:14             Apply the 14 scale
 * @cssClass     s-scale:15             Apply the 15 scale
 * @cssClass     s-scale:16             Apply the 16 scale
 * @cssClass     s-scale:17             Apply the 17 scale
 * @cssClass     s-scale:18             Apply the 18 scale
 * @cssClass     s-scale:19             Apply the 19 scale
 * @cssClass     s-scale:20             Apply the 20 scale
 * @cssClass     s-scale:default             Apply the default scale
 * @cssClass     s-scale:01             Apply the 01 scale
 * @cssClass     s-scale:02             Apply the 02 scale
 * @cssClass     s-scale:03             Apply the 03 scale
 * @cssClass     s-scale:04             Apply the 04 scale
 * @cssClass     s-scale:05             Apply the 05 scale
 * @cssClass     s-scale:06             Apply the 06 scale
 * @cssClass     s-scale:07             Apply the 07 scale
 * @cssClass     s-scale:08             Apply the 08 scale
 * @cssClass     s-scale:09             Apply the 09 scale
        * 
        * @example        html
         * <!-- 10 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 10</h3>
            *   <div class="s-scale:10">
            *       <a class="s-btn">Faye Bins</a>
            *   </div>
            * </div>
            * 
 * <!-- 11 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 11</h3>
            *   <div class="s-scale:11">
            *       <a class="s-btn">Agnes VonRueden</a>
            *   </div>
            * </div>
            * 
 * <!-- 12 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 12</h3>
            *   <div class="s-scale:12">
            *       <a class="s-btn">Sammy Denesik</a>
            *   </div>
            * </div>
            * 
 * <!-- 13 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 13</h3>
            *   <div class="s-scale:13">
            *       <a class="s-btn">Marcella Gorczany</a>
            *   </div>
            * </div>
            * 
 * <!-- 14 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 14</h3>
            *   <div class="s-scale:14">
            *       <a class="s-btn">Shawna O'Reilly</a>
            *   </div>
            * </div>
            * 
 * <!-- 15 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 15</h3>
            *   <div class="s-scale:15">
            *       <a class="s-btn">Terry Zemlak</a>
            *   </div>
            * </div>
            * 
 * <!-- 16 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 16</h3>
            *   <div class="s-scale:16">
            *       <a class="s-btn">Iris Kilback DVM</a>
            *   </div>
            * </div>
            * 
 * <!-- 17 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 17</h3>
            *   <div class="s-scale:17">
            *       <a class="s-btn">George Fisher</a>
            *   </div>
            * </div>
            * 
 * <!-- 18 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 18</h3>
            *   <div class="s-scale:18">
            *       <a class="s-btn">Armando Glover</a>
            *   </div>
            * </div>
            * 
 * <!-- 19 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 19</h3>
            *   <div class="s-scale:19">
            *       <a class="s-btn">Marta Schmidt</a>
            *   </div>
            * </div>
            * 
 * <!-- 20 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 20</h3>
            *   <div class="s-scale:20">
            *       <a class="s-btn">Rolando Wisozk</a>
            *   </div>
            * </div>
            * 
 * <!-- default scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale default</h3>
            *   <div class="s-scale:default">
            *       <a class="s-btn">Virgil Wunsch</a>
            *   </div>
            * </div>
            * 
 * <!-- 01 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 01</h3>
            *   <div class="s-scale:01">
            *       <a class="s-btn">Mrs. Darren Armstrong</a>
            *   </div>
            * </div>
            * 
 * <!-- 02 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 02</h3>
            *   <div class="s-scale:02">
            *       <a class="s-btn">Luis Trantow</a>
            *   </div>
            * </div>
            * 
 * <!-- 03 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 03</h3>
            *   <div class="s-scale:03">
            *       <a class="s-btn">Ben Ratke</a>
            *   </div>
            * </div>
            * 
 * <!-- 04 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 04</h3>
            *   <div class="s-scale:04">
            *       <a class="s-btn">Jeffrey Mills</a>
            *   </div>
            * </div>
            * 
 * <!-- 05 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 05</h3>
            *   <div class="s-scale:05">
            *       <a class="s-btn">Alicia Hyatt</a>
            *   </div>
            * </div>
            * 
 * <!-- 06 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 06</h3>
            *   <div class="s-scale:06">
            *       <a class="s-btn">Miss Loretta Ullrich</a>
            *   </div>
            * </div>
            * 
 * <!-- 07 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 07</h3>
            *   <div class="s-scale:07">
            *       <a class="s-btn">Elaine Hayes</a>
            *   </div>
            * </div>
            * 
 * <!-- 08 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 08</h3>
            *   <div class="s-scale:08">
            *       <a class="s-btn">Maurice Block</a>
            *   </div>
            * </div>
            * 
 * <!-- 09 scale -->
            * <div class="s-mbe:50">
            *   <h3 class="s-tc:accent s-font:30 s-mbe:30">Scale 09</h3>
            *   <div class="s-scale:09">
            *       <a class="s-btn">Lowell Robel DVM</a>
            *   </div>
            * </div>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-scale-10 {
    --s-scale: 1;
}
.s-scale-11 {
    --s-scale: 1.1;
}
.s-scale-12 {
    --s-scale: 1.2;
}
.s-scale-13 {
    --s-scale: 1.3;
}
.s-scale-14 {
    --s-scale: 1.4;
}
.s-scale-15 {
    --s-scale: 1.5;
}
.s-scale-16 {
    --s-scale: 1.6;
}
.s-scale-17 {
    --s-scale: 1.7;
}
.s-scale-18 {
    --s-scale: 1.8;
}
.s-scale-19 {
    --s-scale: 1.9;
}
.s-scale-20 {
    --s-scale: 2;
}
.s-scale-default {
    --s-scale: 1;
}
.s-scale-01 {
    --s-scale: 0.1;
}
.s-scale-02 {
    --s-scale: 0.2;
}
.s-scale-03 {
    --s-scale: 0.3;
}
.s-scale-04 {
    --s-scale: 0.4;
}
.s-scale-05 {
    --s-scale: 0.5;
}
.s-scale-06 {
    --s-scale: 0.6;
}
.s-scale-07 {
    --s-scale: 0.7;
}
.s-scale-08 {
    --s-scale: 0.8;
}
.s-scale-09 {
    --s-scale: 0.9;
}
/**
        * @name          Padding
        * @namespace          sugar.style.helpers.padding
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/padding
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply padding to any HTMLElement
        * 
        * @feature          Support for RTL by using padding-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.padding.classes;
        * 
        
* @cssClass     s-p:0        Apply the `0` padding all around
* @cssClass     s-pb:0        Apply the `0` block start and end padding
* @cssClass     s-pbs:0        Apply the `0` block start padding
* @cssClass     s-pbe:0        Apply the `0` block end padding
* @cssClass     s-pi:0        Apply the `0` inline start and end padding
* @cssClass     s-pis:0        Apply the `0` inline start padding
* @cssClass     s-pie:0        Apply the `0` inline end padding
* @cssClass     s-pb:-0        Apply the `0` negative block start and end padding
* @cssClass     s-pbs:-0        Apply the `0` negative block start padding
* @cssClass     s-pbe:-0        Apply the `0` negative block end padding
* @cssClass     s-pi:-0        Apply the `0` negative inline start and end padding
* @cssClass     s-pis:-0        Apply the `0` negative inline start padding
* @cssClass     s-pie:-0        Apply the `0` negative inline end padding
* @cssClass     s-p:10        Apply the `10` padding all around
* @cssClass     s-pb:10        Apply the `10` block start and end padding
* @cssClass     s-pbs:10        Apply the `10` block start padding
* @cssClass     s-pbe:10        Apply the `10` block end padding
* @cssClass     s-pi:10        Apply the `10` inline start and end padding
* @cssClass     s-pis:10        Apply the `10` inline start padding
* @cssClass     s-pie:10        Apply the `10` inline end padding
* @cssClass     s-pb:-10        Apply the `10` negative block start and end padding
* @cssClass     s-pbs:-10        Apply the `10` negative block start padding
* @cssClass     s-pbe:-10        Apply the `10` negative block end padding
* @cssClass     s-pi:-10        Apply the `10` negative inline start and end padding
* @cssClass     s-pis:-10        Apply the `10` negative inline start padding
* @cssClass     s-pie:-10        Apply the `10` negative inline end padding
* @cssClass     s-p:20        Apply the `20` padding all around
* @cssClass     s-pb:20        Apply the `20` block start and end padding
* @cssClass     s-pbs:20        Apply the `20` block start padding
* @cssClass     s-pbe:20        Apply the `20` block end padding
* @cssClass     s-pi:20        Apply the `20` inline start and end padding
* @cssClass     s-pis:20        Apply the `20` inline start padding
* @cssClass     s-pie:20        Apply the `20` inline end padding
* @cssClass     s-pb:-20        Apply the `20` negative block start and end padding
* @cssClass     s-pbs:-20        Apply the `20` negative block start padding
* @cssClass     s-pbe:-20        Apply the `20` negative block end padding
* @cssClass     s-pi:-20        Apply the `20` negative inline start and end padding
* @cssClass     s-pis:-20        Apply the `20` negative inline start padding
* @cssClass     s-pie:-20        Apply the `20` negative inline end padding
* @cssClass     s-p:30        Apply the `30` padding all around
* @cssClass     s-pb:30        Apply the `30` block start and end padding
* @cssClass     s-pbs:30        Apply the `30` block start padding
* @cssClass     s-pbe:30        Apply the `30` block end padding
* @cssClass     s-pi:30        Apply the `30` inline start and end padding
* @cssClass     s-pis:30        Apply the `30` inline start padding
* @cssClass     s-pie:30        Apply the `30` inline end padding
* @cssClass     s-pb:-30        Apply the `30` negative block start and end padding
* @cssClass     s-pbs:-30        Apply the `30` negative block start padding
* @cssClass     s-pbe:-30        Apply the `30` negative block end padding
* @cssClass     s-pi:-30        Apply the `30` negative inline start and end padding
* @cssClass     s-pis:-30        Apply the `30` negative inline start padding
* @cssClass     s-pie:-30        Apply the `30` negative inline end padding
* @cssClass     s-p:40        Apply the `40` padding all around
* @cssClass     s-pb:40        Apply the `40` block start and end padding
* @cssClass     s-pbs:40        Apply the `40` block start padding
* @cssClass     s-pbe:40        Apply the `40` block end padding
* @cssClass     s-pi:40        Apply the `40` inline start and end padding
* @cssClass     s-pis:40        Apply the `40` inline start padding
* @cssClass     s-pie:40        Apply the `40` inline end padding
* @cssClass     s-pb:-40        Apply the `40` negative block start and end padding
* @cssClass     s-pbs:-40        Apply the `40` negative block start padding
* @cssClass     s-pbe:-40        Apply the `40` negative block end padding
* @cssClass     s-pi:-40        Apply the `40` negative inline start and end padding
* @cssClass     s-pis:-40        Apply the `40` negative inline start padding
* @cssClass     s-pie:-40        Apply the `40` negative inline end padding
* @cssClass     s-p:50        Apply the `50` padding all around
* @cssClass     s-pb:50        Apply the `50` block start and end padding
* @cssClass     s-pbs:50        Apply the `50` block start padding
* @cssClass     s-pbe:50        Apply the `50` block end padding
* @cssClass     s-pi:50        Apply the `50` inline start and end padding
* @cssClass     s-pis:50        Apply the `50` inline start padding
* @cssClass     s-pie:50        Apply the `50` inline end padding
* @cssClass     s-pb:-50        Apply the `50` negative block start and end padding
* @cssClass     s-pbs:-50        Apply the `50` negative block start padding
* @cssClass     s-pbe:-50        Apply the `50` negative block end padding
* @cssClass     s-pi:-50        Apply the `50` negative inline start and end padding
* @cssClass     s-pis:-50        Apply the `50` negative inline start padding
* @cssClass     s-pie:-50        Apply the `50` negative inline end padding
* @cssClass     s-p:60        Apply the `60` padding all around
* @cssClass     s-pb:60        Apply the `60` block start and end padding
* @cssClass     s-pbs:60        Apply the `60` block start padding
* @cssClass     s-pbe:60        Apply the `60` block end padding
* @cssClass     s-pi:60        Apply the `60` inline start and end padding
* @cssClass     s-pis:60        Apply the `60` inline start padding
* @cssClass     s-pie:60        Apply the `60` inline end padding
* @cssClass     s-pb:-60        Apply the `60` negative block start and end padding
* @cssClass     s-pbs:-60        Apply the `60` negative block start padding
* @cssClass     s-pbe:-60        Apply the `60` negative block end padding
* @cssClass     s-pi:-60        Apply the `60` negative inline start and end padding
* @cssClass     s-pis:-60        Apply the `60` negative inline start padding
* @cssClass     s-pie:-60        Apply the `60` negative inline end padding
* @cssClass     s-p:70        Apply the `70` padding all around
* @cssClass     s-pb:70        Apply the `70` block start and end padding
* @cssClass     s-pbs:70        Apply the `70` block start padding
* @cssClass     s-pbe:70        Apply the `70` block end padding
* @cssClass     s-pi:70        Apply the `70` inline start and end padding
* @cssClass     s-pis:70        Apply the `70` inline start padding
* @cssClass     s-pie:70        Apply the `70` inline end padding
* @cssClass     s-pb:-70        Apply the `70` negative block start and end padding
* @cssClass     s-pbs:-70        Apply the `70` negative block start padding
* @cssClass     s-pbe:-70        Apply the `70` negative block end padding
* @cssClass     s-pi:-70        Apply the `70` negative inline start and end padding
* @cssClass     s-pis:-70        Apply the `70` negative inline start padding
* @cssClass     s-pie:-70        Apply the `70` negative inline end padding
* @cssClass     s-p:80        Apply the `80` padding all around
* @cssClass     s-pb:80        Apply the `80` block start and end padding
* @cssClass     s-pbs:80        Apply the `80` block start padding
* @cssClass     s-pbe:80        Apply the `80` block end padding
* @cssClass     s-pi:80        Apply the `80` inline start and end padding
* @cssClass     s-pis:80        Apply the `80` inline start padding
* @cssClass     s-pie:80        Apply the `80` inline end padding
* @cssClass     s-pb:-80        Apply the `80` negative block start and end padding
* @cssClass     s-pbs:-80        Apply the `80` negative block start padding
* @cssClass     s-pbe:-80        Apply the `80` negative block end padding
* @cssClass     s-pi:-80        Apply the `80` negative inline start and end padding
* @cssClass     s-pis:-80        Apply the `80` negative inline start padding
* @cssClass     s-pie:-80        Apply the `80` negative inline end padding
* @cssClass     s-p:90        Apply the `90` padding all around
* @cssClass     s-pb:90        Apply the `90` block start and end padding
* @cssClass     s-pbs:90        Apply the `90` block start padding
* @cssClass     s-pbe:90        Apply the `90` block end padding
* @cssClass     s-pi:90        Apply the `90` inline start and end padding
* @cssClass     s-pis:90        Apply the `90` inline start padding
* @cssClass     s-pie:90        Apply the `90` inline end padding
* @cssClass     s-pb:-90        Apply the `90` negative block start and end padding
* @cssClass     s-pbs:-90        Apply the `90` negative block start padding
* @cssClass     s-pbe:-90        Apply the `90` negative block end padding
* @cssClass     s-pi:-90        Apply the `90` negative inline start and end padding
* @cssClass     s-pis:-90        Apply the `90` negative inline start padding
* @cssClass     s-pie:-90        Apply the `90` negative inline end padding
* @cssClass     s-p:100        Apply the `100` padding all around
* @cssClass     s-pb:100        Apply the `100` block start and end padding
* @cssClass     s-pbs:100        Apply the `100` block start padding
* @cssClass     s-pbe:100        Apply the `100` block end padding
* @cssClass     s-pi:100        Apply the `100` inline start and end padding
* @cssClass     s-pis:100        Apply the `100` inline start padding
* @cssClass     s-pie:100        Apply the `100` inline end padding
* @cssClass     s-pb:-100        Apply the `100` negative block start and end padding
* @cssClass     s-pbs:-100        Apply the `100` negative block start padding
* @cssClass     s-pbe:-100        Apply the `100` negative block end padding
* @cssClass     s-pi:-100        Apply the `100` negative inline start and end padding
* @cssClass     s-pis:-100        Apply the `100` negative inline start padding
* @cssClass     s-pie:-100        Apply the `100` negative inline end padding
        *
        * 
        * @example        html          Inline
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Brenda Pfeffer</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Shannon Ortiz</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Kendra Hintz</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Jenny Douglas</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-pbs:30 s-pbe:40 s-text:center s-mbe:20">Jan Goodwin</div>
        *   <div class="s-bg:complementary s-radius s-pb:30 s-text:center s-mbe:20">Aaron Green</div>
        *   <div class="s-bg:main s-radius s-pbs:50 s-pbe:30 s-text:center s-mbe:20">Miss Ida Kling</div>
        *   <div class="s-bg:error s-radius s-pbs:100 s-pbe:60 s-text:center s-mbe:20">Rosemary Goyette</div>
        * 
        * @example       html          RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Hector Dare</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Ms. Ryan Nikolaus</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Alfonso Halvorson</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Ernestine Turcotte Jr.</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-p-default {
        padding: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
   }
.s-pbs-default {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   }
.s-pbe-default {
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   }
.s-pis-default {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   }
.s-pie-default {
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   }
.s-pi-default {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   }
.s-pb-default {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   }
.s-p-0 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0);
   }
.s-pbs-0 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   }
.s-pbe-0 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   }
.s-pis-0 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   }
.s-pie-0 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   }
.s-pi-0 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   }
.s-pb-0 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   }
.s-p-10 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
   }
.s-pbs-10 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   }
.s-pbe-10 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   }
.s-pis-10 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   }
.s-pie-10 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   }
.s-pi-10 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   }
.s-pb-10 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   }
.s-p-20 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
   }
.s-pbs-20 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   }
.s-pbe-20 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   }
.s-pis-20 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   }
.s-pie-20 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   }
.s-pi-20 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   }
.s-pb-20 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   }
.s-p-30 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
   }
.s-pbs-30 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   }
.s-pbe-30 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   }
.s-pis-30 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   }
.s-pie-30 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   }
.s-pi-30 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   }
.s-pb-30 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   }
.s-p-40 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2);
   }
.s-pbs-40 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   }
.s-pbe-40 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   }
.s-pis-40 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   }
.s-pie-40 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   }
.s-pi-40 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   }
.s-pb-40 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   }
.s-p-50 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
   }
.s-pbs-50 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   }
.s-pbe-50 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   }
.s-pis-50 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   }
.s-pie-50 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   }
.s-pi-50 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   }
.s-pb-50 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   }
.s-p-60 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5);
   }
.s-pbs-60 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   }
.s-pbe-60 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   }
.s-pis-60 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   }
.s-pie-60 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   }
.s-pi-60 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   }
.s-pb-60 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   }
.s-p-70 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5);
   }
.s-pbs-70 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   }
.s-pbe-70 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   }
.s-pis-70 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   }
.s-pie-70 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   }
.s-pi-70 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   }
.s-pb-70 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   }
.s-p-80 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10);
   }
.s-pbs-80 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   }
.s-pbe-80 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   }
.s-pis-80 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   }
.s-pie-80 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   }
.s-pi-80 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   }
.s-pb-80 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   }
.s-p-90 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15);
   }
.s-pbs-90 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   }
.s-pbe-90 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   }
.s-pis-90 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   }
.s-pie-90 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   }
.s-pi-90 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   }
.s-pb-90 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   }
.s-p-100 {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20);
   }
.s-pbs-100 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
.s-pbe-100 {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
.s-pis-100 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
.s-pie-100 {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
.s-pi-100 {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
.s-pb-100 {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
/**
        * @name          Spacing
        * @namespace          sugar.style.helpers.spacing
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/spacing
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply spacing to any HTMLElement container
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.spacing.classes;
        * 
        
* @cssClass     s-spacing:0        Apply the `0` spacing
* @cssClass     s-spacing:10        Apply the `10` spacing
* @cssClass     s-spacing:20        Apply the `20` spacing
* @cssClass     s-spacing:30        Apply the `30` spacing
* @cssClass     s-spacing:40        Apply the `40` spacing
* @cssClass     s-spacing:50        Apply the `50` spacing
* @cssClass     s-spacing:60        Apply the `60` spacing
* @cssClass     s-spacing:70        Apply the `70` spacing
* @cssClass     s-spacing:80        Apply the `80` spacing
* @cssClass     s-spacing:90        Apply the `90` spacing
* @cssClass     s-spacing:100        Apply the `100` spacing
        *
        * 
        * @example        html          Vertical spacing
        * <div class="s-spacing:40">
        *   <h1 class="s-typo:h1">Hello world</h1>
        *   <p class="s-typo:lead">Hilda Lockman DDS</p>
        *   <p class="s-typo:p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas non tortor sed aliquet. Fusce finibus erat at leo scelerisque, a lobortis purus pretium. Aliquam ornare leo id mi imperdiet.</p>
        *   <a class="s-btn s-color:accent">Simple Cta</a>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-spacing {
            display: flex;
            flex-direction: column;
            align-items: inherit;
        }
.s-spacing-default {
        gap: 1rem;
   }
.s-spacing-0 {
        gap: calc(var(--s-margin-default, 1rem) * 0);
   }
.s-spacing-10 {
        gap: calc(var(--s-margin-default, 1rem) * 0.375);
   }
.s-spacing-20 {
        gap: calc(var(--s-margin-default, 1rem) * 0.75);
   }
.s-spacing-30 {
        gap: calc(var(--s-margin-default, 1rem) * 1.4);
   }
.s-spacing-40 {
        gap: calc(var(--s-margin-default, 1rem) * 2);
   }
.s-spacing-50 {
        gap: calc(var(--s-margin-default, 1rem) * 3.5);
   }
.s-spacing-60 {
        gap: calc(var(--s-margin-default, 1rem) * 5);
   }
.s-spacing-70 {
        gap: calc(var(--s-margin-default, 1rem) * 7.5);
   }
.s-spacing-80 {
        gap: calc(var(--s-margin-default, 1rem) * 10);
   }
.s-spacing-90 {
        gap: calc(var(--s-margin-default, 1rem) * 15);
   }
.s-spacing-100 {
        gap: calc(var(--s-margin-default, 1rem) * 20);
   }
.s-spacing-row {
            flex-direction: unset;
        }
/**
        * @name          User select
        * @namespace          sugar.style.helpers.userSelect
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/user-select
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some user-select style on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.userSelect.classes;
        * 
        * @cssClass         s-user-select:all             Apply the `user-select` to `all`
        * @cssClass         s-user-select:auto             Apply the `user-select` to `auto`
        * @cssClass         s-user-select:none             Apply the `user-select` to `none`
        * @cssClass         s-user-select:text             Apply the `user-select` to `text`
        * 
        * @example        html          All
        *   <p class="s-user-select:all">
        *       Dolorum tempore dignissimos sunt eligendi sapiente pariatur sit et. Placeat in pariatur amet. Id ratione dolorem enim nihil consequatur aliquid iste distinctio. Magni officiis nam quae.
        *   </p>
        * 
        * @example      html            auto
        *   <p class="s-user-select:auto">
        *       Iste libero id et a itaque suscipit suscipit. Ratione non vel dolorem perspiciatis est. Et sunt inventore quia exercitationem. Quidem cupiditate facilis quis voluptatem quia. Error dolores non quisquam.
        *   </p>
        * 
        * @example          html            none
        *   <p class="s-user-select:none">
        *       Est sit incidunt tenetur doloremque veniam. Quis accusantium quis fugit facilis nostrum dolor esse ut vitae. Est repellendus pariatur iure dolorem ratione impedit et aut. Molestiae sapiente odio esse consequatur excepturi eos est doloribus unde. Enim nobis accusantium. Maxime labore ut aut.
        *   </p>
        * 
        * @example          html                text
        *   <p class="s-user-select:text">
        *       Reprehenderit dolorem sint. Praesentium quibusdam quisquam tenetur natus incidunt. Dolores voluptate cupiditate tempora sunt sunt.
        *   </p>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-user-select-all {
        -webkit-user-select: all;
           -moz-user-select: all;
                user-select: all;
    }
.s-user-select-auto {
        -webkit-user-select: auto;
           -moz-user-select: auto;
                user-select: auto;
    }
.s-user-select-none {
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }
.s-user-select-text {
        -webkit-user-select: text;
           -moz-user-select: text;
                user-select: text;
    }
/**
        * @name          Visibility
        * @namespace          sugar.style.helpers.visibility
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/visibility
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply a visibility style on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.visibility.classes;
        * 
        * .my-element {
        *   \@sugar.visibility.hidden;
        * } 
        * 
        * @cssClass         s-visibility:hidden             Make the element hidden in the ui
        * @cssClass         s-visibility:visible            Make the element visible in the ui
        * @cssClass         s-visibility:collapse            Make the element visibly collapased in the ui
        * 
        * @example        html              Visible
        * <div class="s-bg:main-surface s-radius s-p:30">
        *   <div style="height: 100px" class="s-bg:accent s-radius s-p:30">I'm visible</div>
        *   <div style="height: 100px" class="s-visibility:hidden s-bg:complementary s-radius s-p:30">I'm hidden</div>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-visibility-hidden {
        visibility: hidden;
    }
.s-visibility-visible {
        visibility: visible;
    }
.s-visibility-collapse {
        visibility: collapse;
    }
/**
        * @name          Visually
        * @namespace          sugar.style.helpers.visually
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/visually
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply a visually style on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.visually.classes;
        * 
        * .my-element {
        *   \@sugar.visually.hidden;
        * } 
        * 
        * @cssClass         s-visually:hidden             Make the element hidden in the ui
        * @cssClass         s-visually:visible            Make the element visible in the ui
        * 
        * @example        html             Visually
        * <div class="s-bg:main-surface s-radius s-p:30">
        *   <div style="height: 100px" class="s-bg:accent s-radius s-p:30">I'm visible</div>
        *   <div style="height: 100px" class="s-visually:hidden s-bg:complementary s-radius s-p:30">I'm hidden</div>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-visually-hidden {clip: rect(0 0 0 0);
        -webkit-clip-path: inset(50%);
                clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
/**
        * @name          Truncate
        * @namespace          sugar.style.helpers.truncate
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/truncate
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to **truncate texts to a number of lines** on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.truncate.classes;
        * 
         * @cssClass        s-truncate:1         Truncate the container to 1 line(s), * @cssClass        s-truncate:2         Truncate the container to 2 line(s), * @cssClass        s-truncate:3         Truncate the container to 3 line(s), * @cssClass        s-truncate:4         Truncate the container to 4 line(s), * @cssClass        s-truncate:5         Truncate the container to 5 line(s), * @cssClass        s-truncate:6         Truncate the container to 6 line(s), * @cssClass        s-truncate:7         Truncate the container to 7 line(s), * @cssClass        s-truncate:8         Truncate the container to 8 line(s), * @cssClass        s-truncate:9         Truncate the container to 9 line(s), * @cssClass        s-truncate:10         Truncate the container to 10 line(s)
        *
         * @example          html        1 line
            *   <p class="s-typo:p s-truncate:1">Atque provident enim officiis cumque illum numquam.<br />Dignissimos et voluptas dolores deleniti magnam sapiente debitis laborum iusto.<br />Harum officia impedit accusamus.<br />Perspiciatis dolores aut officiis asperiores.<br />Voluptas eligendi accusantium.<br />Sint qui consectetur eveniet non sequi modi nam perspiciatis iste.<br />Consectetur atque qui.<br />Repellendus sint ratione enim numquam.<br />Et nihil aut voluptatibus pariatur porro.<br />Ut molestias nisi.<br />Libero nostrum aut aut voluptatem qui doloremque deserunt labore.<br />Saepe non provident.<br />Blanditiis quia nulla distinctio.<br />Aut consequatur molestiae tenetur quidem debitis est delectus.<br />Non et repudiandae rerum ipsam et nisi.</p>
            * 
 * @example          html        2 line
            *   <p class="s-typo:p s-truncate:2">Tempore doloremque velit.<br />Dolorem id doloribus suscipit occaecati error.<br />Sed est placeat mollitia.<br />Inventore harum commodi occaecati voluptates animi vel cupiditate.<br />Numquam ipsum voluptas ullam assumenda itaque.<br />Omnis tempora fugit est quia consequuntur quae id expedita.<br />Et laudantium quia non est molestias consequatur nihil.<br />Ullam officiis amet nam aspernatur fugit omnis voluptatem facere.<br />Quia voluptas molestiae.<br />Vero minima porro omnis deserunt quod quo.<br />Minus consequatur ea.<br />Ducimus autem velit facilis sapiente a in.<br />Quo et recusandae est et ducimus sapiente eveniet.<br />Velit quae odit commodi et numquam et aut.<br />Est repellendus ab voluptatem laborum harum ut.</p>
            * 
 * @example          html        3 lines
            *   <p class="s-typo:p s-truncate:3">Ratione cum et.<br />Omnis in sed accusamus quaerat.<br />Inventore quia beatae in.<br />Aut sequi enim iure impedit fugiat nobis.<br />Eum ad et ut accusamus tempora nam quam.<br />Provident accusantium suscipit quae rem vel quisquam illo aut et.<br />Sint nam ut sapiente et sit repellendus.<br />Dolor ipsam ipsa et quia.<br />Quis laboriosam at pariatur voluptatem omnis accusantium quo quod.<br />Eum et magnam reprehenderit nostrum iusto corporis dolorem.<br />Temporibus odio nihil sunt fugiat asperiores autem fugiat rem.<br />Minima sunt est voluptatem excepturi ipsum.<br />Incidunt molestiae nam corrupti voluptatibus.<br />Totam quia sed mollitia.<br />Quo occaecati est delectus adipisci ullam.</p>
            * 
 * @example          html        4 lines
            *   <p class="s-typo:p s-truncate:4">Praesentium iure omnis quis vero et non voluptatibus ea aut.<br />Vero vero dicta non.<br />Non quis quaerat aliquam neque facere quia at.<br />Nihil similique nam quis.<br />Totam ad aut commodi.<br />Inventore aut deleniti illum culpa.<br />Qui qui velit aut nisi iusto labore debitis beatae quia.<br />Nemo molestiae modi assumenda molestias.<br />Praesentium consequuntur animi id aliquid.<br />Officia porro fuga.<br />Exercitationem quia quaerat doloribus tempora.<br />Qui et non consequuntur quis ipsa cumque.<br />Fuga vel dolor aut assumenda ullam sequi eius.<br />Reiciendis consequatur fugiat iste.<br />Voluptas ipsa architecto alias modi impedit voluptatem quia.</p>
            * 
 * @example          html        5 lines
            *   <p class="s-typo:p s-truncate:5">Laudantium omnis maiores ea vitae.<br />Aperiam veritatis et.<br />Qui praesentium facilis maiores harum rerum impedit.<br />Doloremque sed minus est ipsa velit ut eligendi sit illum.<br />Voluptatem vel omnis autem.<br />Rerum earum consectetur esse.<br />Animi reiciendis laborum quibusdam.<br />Impedit provident laboriosam odio eveniet maxime.<br />Labore corrupti vel qui qui.<br />Et non asperiores sint consequatur rerum.<br />Cum sunt officia consequuntur ipsum soluta velit laboriosam.<br />Qui harum minima quia eaque qui ducimus.<br />Esse voluptatem omnis tempore est.<br />Dolorem totam sequi et quis eum odio molestiae nisi.<br />Ea voluptas voluptate quia impedit voluptas.</p>
            * 
 * @example          html        6 lines
            *   <p class="s-typo:p s-truncate:6">Rem ullam dolor recusandae nihil nihil quasi dolore rem.<br />Ducimus nisi quidem at accusantium inventore deleniti expedita sed.<br />Excepturi quasi asperiores soluta ipsum rerum libero saepe adipisci.<br />Cum molestias dolor quia voluptates.<br />Labore ipsum et accusantium ut consequatur aut.<br />Vel dignissimos esse vel laborum consequuntur explicabo.<br />Quia vero sit possimus quia molestias sit.<br />Sint ut nihil.<br />Ullam suscipit voluptate et dolorem facilis mollitia aut.<br />Omnis et est libero quia quod enim numquam.<br />Quasi voluptas et et quidem in nisi est quas quia.<br />Similique libero animi cumque optio ea sit cum.<br />Consequuntur quo a itaque eveniet magnam sint voluptatibus aut quia.<br />Ducimus expedita incidunt voluptatem possimus quia libero corrupti.<br />Explicabo fugit odit autem magnam et tempore.</p>
            * 
 * @example          html        7 lines
            *   <p class="s-typo:p s-truncate:7">Quam similique voluptas nemo molestiae sunt.<br />Voluptas sint reiciendis qui possimus assumenda et.<br />Nihil debitis quia tempora.<br />Fugit pariatur aut amet voluptas dolor facilis.<br />Ipsam facilis sit.<br />Et asperiores laboriosam et ut voluptatem hic rerum possimus id.<br />Illum in aliquid voluptas autem est.<br />Ipsum facere nihil quidem.<br />Quia aut neque quis aliquam sit quis quia voluptatum et.<br />Autem commodi error perferendis.<br />Suscipit id architecto id facilis dolorum cum.<br />Omnis et autem nihil illum veritatis aliquid.<br />Animi dolorem magnam.<br />Dolores dolore animi debitis nihil.<br />Illo et quia ut enim commodi ratione et dolores porro.</p>
            * 
 * @example          html        8 lines
            *   <p class="s-typo:p s-truncate:8">Assumenda aspernatur atque molestias aliquam.<br />Sed et dolores.<br />Asperiores pariatur repudiandae quo dolorem.<br />Odit eos dolorem consectetur ea.<br />Tempora sed veniam repudiandae nemo eum impedit aut qui.<br />Soluta velit ullam.<br />Sint voluptas excepturi.<br />Minus nostrum minus ullam sint debitis voluptatem consequuntur quisquam.<br />Rerum vitae rem ea.<br />Aut aut aspernatur veniam ut dolores aut.<br />Id exercitationem et atque ea modi magnam.<br />Porro mollitia iusto inventore voluptate debitis quis qui a dignissimos.<br />Expedita maiores suscipit voluptatibus facere eum exercitationem qui repellendus repudiandae.<br />Aut assumenda ut cupiditate.<br />Veniam iusto et quidem in optio sequi.</p>
            * 
 * @example          html        9 lines
            *   <p class="s-typo:p s-truncate:9">Asperiores facere architecto suscipit.<br />Accusantium labore harum modi illum est voluptas unde est.<br />Occaecati at dolores impedit voluptatem aliquam rem eum et.<br />Et possimus est excepturi amet eligendi enim et porro.<br />Ea quisquam enim aut sit cumque et qui.<br />Ipsa officiis iste quasi nihil illum totam.<br />Natus tenetur non quia itaque quod et ea dolorem.<br />Deleniti saepe hic officia repellat dicta aut dolore cum.<br />Ut aliquam natus cum beatae expedita eum.<br />Perferendis veritatis ipsum qui.<br />Ipsa doloremque ut iste.<br />Nihil repellendus deserunt.<br />Et dolores numquam.<br />Placeat et beatae qui rerum placeat.<br />Rem et rerum aliquid fugiat repudiandae voluptas maiores tenetur.</p>
            * 
 * @example          html        10 lines
            *   <p class="s-typo:p s-truncate:10">Quibusdam molestiae quo.<br />Dolorem voluptatibus et adipisci saepe aut tenetur.<br />Voluptatum repudiandae animi ut iure.<br />Qui sed sapiente est ipsa dicta.<br />Est laboriosam placeat.<br />Repellat quis velit vitae.<br />Reiciendis dolor consequatur et esse minima voluptatem.<br />Sapiente est magnam quia esse omnis.<br />Dolor debitis consequatur ea molestiae ipsam.<br />Sit et alias distinctio et similique repudiandae.<br />Reiciendis quae non beatae fugit tempora ad rem.<br />Facilis magni sit in.<br />Ullam sapiente tenetur hic ipsa consectetur doloribus esse et numquam.<br />Distinctio id nihil repudiandae aut quam praesentium facilis omnis.<br />Hic sunt quod eum officiis fugiat.</p>
            * 
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-truncate-1 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        overflow: hidden;
}
.s-truncate-2 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
}
.s-truncate-3 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
}
.s-truncate-4 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
}
.s-truncate-5 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        overflow: hidden;
}
.s-truncate-6 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        line-clamp: 6;
        overflow: hidden;
}
.s-truncate-7 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
        line-clamp: 7;
        overflow: hidden;
}
.s-truncate-8 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        line-clamp: 8;
        overflow: hidden;
}
.s-truncate-9 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 9;
        line-clamp: 9;
        overflow: hidden;
}
.s-truncate-10 {display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 10;
        line-clamp: 10;
        overflow: hidden;
}
.s-until.s-until-mounted:not(.s-until-sibling):not(.s-until-siblings):not(.s-until-parent):not(.s-until-grandparent):not(.s-until-ancestor):is([mounted],[status="mounted"]) {
                display: none;
            }
*.mounted + .s-until.s-until-sibling.s-until-mounted,
            *[mounted] + .s-until.s-until-sibling.s-until-mounted,
            *[status="mounted"] + .s-until.s-until-sibling.s-until-mounted {
                display: none;
            }
*.mounted ~  .s-until.s-until-siblings.s-until-mounted,
            *[mounted] ~ .s-until.s-until-siblings.s-until-mounted,
            *[status="mounted"] ~ .s-until.s-until-siblings.s-until-mounted {
                display: none;
            }
*:not([status="mounted"]):not([mounted]):not(.mounted) > .s-until.s-until-parent.s-until-mounted {
                display: unset;
            }
*[mounted] > .s-until.s-until-parent.s-until-mounted,
            *[status="mounted"] > .s-until.s-until-parent.s-until-mounted,
            *.mounted > .s-until.s-until-parent.s-until-mounted {
                display: none;
            }
*:not([status="mounted"]):not([mounted]):not(.mounted) > * > .s-until.s-until-grandparent.s-until-mounted {
                display: unset;
            }
*[mounted] > * > .s-until.s-until-grandparent.s-until-mounted,
            *[status="mounted"] > * > .s-until.s-until-grandparent.s-until-mounted,
            *.mounted > * > .s-until.s-until-grandparent.s-until-mounted {
                display: none;
            }
*:not([status="mounted"]):not([mounted]):not(.mounted) .s-until.s-until-ancestor.s-until-mounted {
                display: unset;
            }
*[mounted] .s-until.s-until-ancestor.s-until-mounted,
            *[status="mounted"] .s-until.s-until-ancestor.s-until-mounted,
            *.mounted .s-until.s-until-ancestor.s-until-mounted {
                display: none;
            }
.s-until.s-until-active:not(.s-until-sibling):not(.s-until-siblings):not(.s-until-parent):not(.s-until-grandparent):not(.s-until-ancestor):is([active],[status="active"]) {
                display: none;
            }
*.active + .s-until.s-until-sibling.s-until-active,
            *[active] + .s-until.s-until-sibling.s-until-active,
            *[status="active"] + .s-until.s-until-sibling.s-until-active {
                display: none;
            }
*.active ~  .s-until.s-until-siblings.s-until-active,
            *[active] ~ .s-until.s-until-siblings.s-until-active,
            *[status="active"] ~ .s-until.s-until-siblings.s-until-active {
                display: none;
            }
*:not([status="active"]):not([active]):not(.active) > .s-until.s-until-parent.s-until-active {
                display: unset;
            }
*[active] > .s-until.s-until-parent.s-until-active,
            *[status="active"] > .s-until.s-until-parent.s-until-active,
            *.active > .s-until.s-until-parent.s-until-active {
                display: none;
            }
*:not([status="active"]):not([active]):not(.active) > * > .s-until.s-until-grandparent.s-until-active {
                display: unset;
            }
*[active] > * > .s-until.s-until-grandparent.s-until-active,
            *[status="active"] > * > .s-until.s-until-grandparent.s-until-active,
            *.active > * > .s-until.s-until-grandparent.s-until-active {
                display: none;
            }
*:not([status="active"]):not([active]):not(.active) .s-until.s-until-ancestor.s-until-active {
                display: unset;
            }
*[active] .s-until.s-until-ancestor.s-until-active,
            *[status="active"] .s-until.s-until-ancestor.s-until-active,
            *.active .s-until.s-until-ancestor.s-until-active {
                display: none;
            }
.s-until.s-until-loading:not(.s-until-sibling):not(.s-until-siblings):not(.s-until-parent):not(.s-until-grandparent):not(.s-until-ancestor):is([loading],[status="loading"]) {
                display: none;
            }
*.loading + .s-until.s-until-sibling.s-until-loading,
            *[loading] + .s-until.s-until-sibling.s-until-loading,
            *[status="loading"] + .s-until.s-until-sibling.s-until-loading {
                display: none;
            }
*.loading ~  .s-until.s-until-siblings.s-until-loading,
            *[loading] ~ .s-until.s-until-siblings.s-until-loading,
            *[status="loading"] ~ .s-until.s-until-siblings.s-until-loading {
                display: none;
            }
*:not([status="loading"]):not([loading]):not(.loading) > .s-until.s-until-parent.s-until-loading {
                display: unset;
            }
*[loading] > .s-until.s-until-parent.s-until-loading,
            *[status="loading"] > .s-until.s-until-parent.s-until-loading,
            *.loading > .s-until.s-until-parent.s-until-loading {
                display: none;
            }
*:not([status="loading"]):not([loading]):not(.loading) > * > .s-until.s-until-grandparent.s-until-loading {
                display: unset;
            }
*[loading] > * > .s-until.s-until-grandparent.s-until-loading,
            *[status="loading"] > * > .s-until.s-until-grandparent.s-until-loading,
            *.loading > * > .s-until.s-until-grandparent.s-until-loading {
                display: none;
            }
*:not([status="loading"]):not([loading]):not(.loading) .s-until.s-until-ancestor.s-until-loading {
                display: unset;
            }
*[loading] .s-until.s-until-ancestor.s-until-loading,
            *[status="loading"] .s-until.s-until-ancestor.s-until-loading,
            *.loading .s-until.s-until-ancestor.s-until-loading {
                display: none;
            }
@media {
                .s-until-media.s-until-wide {
                    display: none !important;
                }
}
@media (max-width: 2047px) {
                .s-until-media.s-until-desktop {
                    display: none !important;
                }
}
@media (max-width: 1279px) {
                .s-until-media.s-until-tablet {
                    display: none !important;
                }
}
@media (max-width: 639px) {
                .s-until-media.s-until-mobile {
                    display: none !important;
                }
}
.s-when.s-when-mounted:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent):not([mounted]):not(.mounted) {
                display: none;
            }
.s-when.s-when-mounted:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent)[mounted],
            .s-when.s-when-mounted:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent).mounted {
                display: unset;
            }
*:not([mounted]):not(.mounted) + .s-when.s-when-sibling.s-when-mounted {
                display: none;
            }
*[mounted] + .s-when.s-when-sibling.s-when-mounted,
            *.mounted + .s-when.s-when-sibling.s-when-mounted {
                display: unset !important;
            }
*:not([mounted]):not(.mounted) ~ .s-when.s-when-siblings.s-when-mounted {
                display: none;
            }
*[mounted] ~ .s-when.s-when-siblings.s-when-mounted,
            *.mounted ~ .s-when.s-when-siblings.s-when-mounted {
                display: unset !important;
            }
*:not([mounted]):not(.mounted) > .s-when.s-when-parent.s-when-mounted {
                display: none;
            }
*[mounted] > .s-when.s-when-parent.s-when-mounted,
            *.mounted > .s-when.s-when-parent.s-when-mounted {
                display: unset;
            }
*:not([mounted]):not(.mounted) > * > .s-when.s-when-grandparent.s-when-mounted {
                display: none;
            }
*[mounted] > * > .s-when.s-when-grandparent.s-when-mounted,
            *.mounted > * > .s-when.s-when-grandparent.s-when-mounted {
                display: unset;
            }
*:not([mounted]):not(.mounted) .s-when.s-when-ancestor.s-when-mounted {
                display: none;
            }
*[mounted] .s-when.s-when-ancestor.s-when-mounted,
            *.mounted .s-when.s-when-ancestor.s-when-mounted {
                display: unset;
            }
.s-when.s-when-active:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent):not([active]):not(.active) {
                display: none;
            }
.s-when.s-when-active:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent)[active],
            .s-when.s-when-active:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent).active {
                display: unset;
            }
*:not([active]):not(.active) + .s-when.s-when-sibling.s-when-active {
                display: none;
            }
*[active] + .s-when.s-when-sibling.s-when-active,
            *.active + .s-when.s-when-sibling.s-when-active {
                display: unset !important;
            }
*:not([active]):not(.active) ~ .s-when.s-when-siblings.s-when-active {
                display: none;
            }
*[active] ~ .s-when.s-when-siblings.s-when-active,
            *.active ~ .s-when.s-when-siblings.s-when-active {
                display: unset !important;
            }
*:not([active]):not(.active) > .s-when.s-when-parent.s-when-active {
                display: none;
            }
*[active] > .s-when.s-when-parent.s-when-active,
            *.active > .s-when.s-when-parent.s-when-active {
                display: unset;
            }
*:not([active]):not(.active) > * > .s-when.s-when-grandparent.s-when-active {
                display: none;
            }
*[active] > * > .s-when.s-when-grandparent.s-when-active,
            *.active > * > .s-when.s-when-grandparent.s-when-active {
                display: unset;
            }
*:not([active]):not(.active) .s-when.s-when-ancestor.s-when-active {
                display: none;
            }
*[active] .s-when.s-when-ancestor.s-when-active,
            *.active .s-when.s-when-ancestor.s-when-active {
                display: unset;
            }
.s-when.s-when-loading:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent):not([loading]):not(.loading) {
                display: none;
            }
.s-when.s-when-loading:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent)[loading],
            .s-when.s-when-loading:not(.s-when-sibling):not(.s-when-siblings):not(.s-when-ancestor):not(.s-when-parent):not(.s-when-grandparent).loading {
                display: unset;
            }
*:not([loading]):not(.loading) + .s-when.s-when-sibling.s-when-loading {
                display: none;
            }
*[loading] + .s-when.s-when-sibling.s-when-loading,
            *.loading + .s-when.s-when-sibling.s-when-loading {
                display: unset !important;
            }
*:not([loading]):not(.loading) ~ .s-when.s-when-siblings.s-when-loading {
                display: none;
            }
*[loading] ~ .s-when.s-when-siblings.s-when-loading,
            *.loading ~ .s-when.s-when-siblings.s-when-loading {
                display: unset !important;
            }
*:not([loading]):not(.loading) > .s-when.s-when-parent.s-when-loading {
                display: none;
            }
*[loading] > .s-when.s-when-parent.s-when-loading,
            *.loading > .s-when.s-when-parent.s-when-loading {
                display: unset;
            }
*:not([loading]):not(.loading) > * > .s-when.s-when-grandparent.s-when-loading {
                display: none;
            }
*[loading] > * > .s-when.s-when-grandparent.s-when-loading,
            *.loading > * > .s-when.s-when-grandparent.s-when-loading {
                display: unset;
            }
*:not([loading]):not(.loading) .s-when.s-when-ancestor.s-when-loading {
                display: none;
            }
*[loading] .s-when.s-when-ancestor.s-when-loading,
            *.loading .s-when.s-when-ancestor.s-when-loading {
                display: unset;
            }
.s-when-dark {
            display: none;
        }
[theme$="dark"] .s-when-dark {
            display: inherit;
        }
[theme$="dark"] .s-when-light {
            display: none;
        }
.s-when-media {
                display: none;
            }
@media {
                .s-when-media.s-when-wide {
                    display: unset;
                }
}
@media (max-width: 2047px) {
                .s-when-media.s-when-desktop {
                    display: unset;
                }
}
@media (max-width: 1279px) {
                .s-when-media.s-when-tablet {
                    display: unset;
                }
}
@media (max-width: 639px) {
                .s-when-media.s-when-mobile {
                    display: unset;
                }
}
/**
        * @name          Scrollbar
        * @namespace          sugar.style.helpers.scrollbar
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/scrollbar
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply a custom scrollbar that follows your theme settings.
        * It is based on the `theme.ui.scrollbar` settings.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.scrollbar.classes;
        * 
        * .my-element {
        *   \@sugar.scrollbar.hide;
        *   \@sugar.scrollbar;
        * } 
        * 
        * @cssClass     s-scrollbar         Apply the custom scrollbar
        * 
        * @example        html          Vertical scrollbar
        * <!-- scrollbar vertical -->
        *   <div class="s-scrollbar" style="height:100px; overflow-y: auto;">
        *       Non eos quaerat neque. Distinctio ipsum perferendis aspernatur tempora voluptas inventore et non. Eum omnis aut.
 
Harum architecto temporibus sunt vero ut et facere. Dolores sit saepe consequatur dolores fuga reprehenderit qui voluptatem sit. Occaecati et saepe quam ea animi ea.
 
Dolores assumenda eos corporis et similique nam voluptatem id. Non consequuntur molestiae. Et iure sapiente. Voluptatibus laboriosam animi illo odit. Excepturi quidem animi tempore.
 
Quia corporis quis ducimus non amet aspernatur. Et nihil nemo quia cumque numquam aut. Voluptatem rerum iste. Ad necessitatibus inventore necessitatibus dolor voluptas. Libero deleniti fugiat quia veniam.
 
Hic consequuntur aut voluptas ex quaerat numquam minus non eaque. Maxime voluptatibus autem eius eum qui ut. Quidem et voluptatum tempore et minima corrupti.
 
Illum sed porro voluptates animi consequuntur a sit iure. Qui occaecati dolor consequatur at numquam sit. Quidem qui necessitatibus qui earum porro ut omnis sequi. Sit quas possimus saepe vitae.
 
Ab voluptatem ut nisi odit quidem unde modi. Eligendi natus aspernatur velit autem saepe eius necessitatibus. Repellendus sint doloremque mollitia corrupti exercitationem dolores. Aliquam distinctio sunt fugit deleniti impedit eum esse officiis quo. Libero id fugiat possimus illum reiciendis quos voluptatem quae. Ducimus sit vel quisquam rerum.
 
Vel quidem nam neque eligendi mollitia rerum fugiat nobis. Est asperiores quia quia. Sit dolores est pariatur. Mollitia sint laudantium qui. Quis consequuntur ea esse error corrupti.
 
Sunt quam perferendis consequatur amet beatae. Quibusdam recusandae esse enim voluptatem sit. Deserunt eum itaque vel quam. Quisquam et ut est.
 
Iure deserunt error vel. Sequi numquam expedita amet ipsum tempora. Sunt et dolor dignissimos omnis dolore. Consequatur earum molestias quos. Dolorum libero sapiente.
        *   </div>
        * 
        * @example        html          Horizontal scrollbar
        *   <div class="s-scrollbar" style="white-space:nowrap; width: 200px; height: 2em; overflow-x: auto; overflow-y: hidden;">
        *       Aperiam et est. Animi sapiente cumque aspernatur impedit ipsum voluptate iste. Et aut quia temporibus ex non ad ab. Unde repellat nobis.
        *   </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-scrollbar::-webkit-scrollbar {
                width: 2px;
                height: 2px;
            }
.s-scrollbar::-webkit-scrollbar-track {
                    
                        background-color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),0.1);
                    

            }
.s-scrollbar::-webkit-scrollbar-thumb {
                
                    background-color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
                
            }
.s-wireframe .s-scrollbar::-webkit-scrollbar-track {
                background-color: rgba(0,0,0,0.05);
            }
[theme$="dark"] .s-wireframe .s-scrollbar::-webkit-scrollbar-track, .s-wireframe .s-scrollbar::-webkit-scrollbar-track[theme$="dark"] {
                    background-color: rgba(255,255,255,0.05);
}
.s-wireframe .s-scrollbar::-webkit-scrollbar-thumb {
                background-color: rgba(0,0,0,0.1);
            }
[theme$="dark"] .s-wireframe .s-scrollbar::-webkit-scrollbar-thumb, .s-wireframe .s-scrollbar::-webkit-scrollbar-thumb[theme$="dark"] {
                    background-color: rgba(255,255,255,0.1);
}
/**
        * @name          Shape
        * @namespace          sugar.style.helpers.shape
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/shape
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply a shape to any elements that support it using the
        * `border-radius: sugar.border.radius(shape);` statement.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.shape.classes;
        * 
        * @cssClass                 s-shape:default             Apply the default shape (default border radius)
        * @cssClass                 s-shape:square              Apply the square shape
        * @cssClass                 s-shape:pill                Apply the pill shape
        * 
        * @example        html              Shape on buttons
        * <a class="s-btn s-color:accent s-shape:default">Default shape</a>
        * <a class="s-btn s-color:accent s-shape:square">Square shape</a>
        * <a class="s-btn s-color:accent s-shape:pill">Pill shape</a>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-shape-default {--s-shape: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
}
.s-shape-square {--s-shape: 0;
}
.s-shape-pill {--s-shape: 99999px;
}
/**
        * @name          Widths
        * @namespace          sugar.style.helpers.width
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/widths
        * @platform       css
        * @status       beta
        * 
        * These classes allows to apply some width to any HTMLElement.
        * These widths are defined in the `theme.width` theme settings.
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.width.classes;
        * 
         * @cssClass             s-width:0            Apply the `0` width, * @cssClass             s-width:10            Apply the `10` width, * @cssClass             s-width:20            Apply the `20` width, * @cssClass             s-width:30            Apply the `30` width, * @cssClass             s-width:40            Apply the `40` width, * @cssClass             s-width:50            Apply the `50` width, * @cssClass             s-width:60            Apply the `60` width, * @cssClass             s-width:70            Apply the `70` width, * @cssClass             s-width:80            Apply the `80` width, * @cssClass             s-width:90            Apply the `90` width, * @cssClass             s-width:100            Apply the `100` width
        * 
         * @example         html        0%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:0 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:0</div>
                *   </div>
 * @example         html        10%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:10 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:10</div>
                *   </div>
 * @example         html        20%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:20 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:20</div>
                *   </div>
 * @example         html        30%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:30 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:30</div>
                *   </div>
 * @example         html        40%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:40 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:40</div>
                *   </div>
 * @example         html        50%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:50 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:50</div>
                *   </div>
 * @example         html        60%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:60 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:60</div>
                *   </div>
 * @example         html        70%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:70 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:70</div>
                *   </div>
 * @example         html        80%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:80 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:80</div>
                *   </div>
 * @example         html        90%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:90 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:90</div>
                *   </div>
 * @example         html        100%
                *   <div class="s-bg:main-surface s-radius:30">
                *      <div style="overflow:hidden" class="s-width:100 s-text:center s-bg:accent s-p:30 s-radius:30">s-width:100</div>
                *   </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-width-viewport {
        position: relative;
        left: 50%;
        width: 100vw;
        max-width: none;
        transform: translate(-50%);
   }
.s-width-0 {
            width: 0;
            max-width: none;
            min-width: none;
      }
.s-width-10 {
            width: 10%;
            max-width: none;
            min-width: none;
      }
.s-width-20 {
            width: 20%;
            max-width: none;
            min-width: none;
      }
.s-width-30 {
            width: 30%;
            max-width: none;
            min-width: none;
      }
.s-width-40 {
            width: 40%;
            max-width: none;
            min-width: none;
      }
.s-width-50 {
            width: 50%;
            max-width: none;
            min-width: none;
      }
.s-width-60 {
            width: 60%;
            max-width: none;
            min-width: none;
      }
.s-width-70 {
            width: 70%;
            max-width: none;
            min-width: none;
      }
.s-width-80 {
            width: 80%;
            max-width: none;
            min-width: none;
      }
.s-width-90 {
            width: 90%;
            max-width: none;
            min-width: none;
      }
.s-width-100 {
            width: 100%;
            max-width: none;
            min-width: none;
      }
/**
        * @name          White space
        * @namespace          sugar.style.helpers.whiteSpace
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/white-space
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply some white-space style on any HTMLElement
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.whiteSpace.classes;
        * 
        * @cssClass         s-white-space:wrap             Apply the `white-space` to `wrap`
        * @cssClass         s-white-space:nowrap             Apply the `white-space` to `nowrap`
        * @cssClass         s-white-space:break-spaces             Apply the `white-space` to `break-spaces`
        * @cssClass         s-white-space:normal             Apply the `white-space` to `normal`
        * @cssClass         s-white-space:pre             Apply the `white-space` to `pre`
        * @cssClass         s-white-space:pre-line             Apply the `white-space` to `pre-line`
        * @cssClass         s-white-space:pre-wrap             Apply the `white-space` to `pre-wrap`
        * @cssClass         s-white-space:revert             Apply the `white-space` to `revert`
        * @cssClass         s-white-space:unset             Apply the `white-space` to `unset`
        * 
        * @example        html          Wrap
        *   <p class="s-white-space:wrap">
        *       Temporibus voluptas est tempora rerum beatae. Suscipit magni autem porro voluptas nihil sed. Officia ex asperiores. Quidem sapiente vel cumque. Ratione illo quaerat qui optio.
        *   </p>
        * 
        * @example      html            Nowrap
        *   <p class="s-white-space:nowrap">
        *       Quod dolorem tenetur dolores voluptate voluptates nulla. Est fugiat blanditiis et et sed qui nihil soluta a. Nesciunt perspiciatis velit ut at delectus ea quos. Ut iusto fuga qui iste sed consequuntur et et. Magni possimus dolorem omnis repellendus perferendis eos. Inventore non id dignissimos corporis consectetur et sunt eum consectetur.
        *   </p>
        * 
        * @example          html            Break spaces
        *   <p class="s-white-space:break-spaces">
        *       Porro suscipit modi fugiat expedita esse. Rem hic eligendi. Itaque voluptatem facilis eveniet ut porro velit. Nam rerum ipsam officiis et numquam. Cupiditate in id sunt distinctio ut id nostrum.
        *   </p>
        * 
        * @example          html                Normal
        *   <p class="s-white-space:normal">
        *       Accusamus asperiores ipsum magnam est omnis quaerat expedita vitae. Aut aperiam officiis autem consectetur repellat. Fugit qui ipsa accusantium quo ipsa iusto ipsam. Molestiae quo beatae aperiam quia placeat. Porro nobis quo est distinctio tempora.
        *   </p>
        * 
        * @example      html            Pre
        *   <p class="s-white-space:pre">
        *       Ea dolorem consequuntur architecto pariatur rerum sapiente non. Accusamus cumque facere doloribus natus dolorem nisi architecto tempore. Dolore dolor eius tempore assumenda sequi pariatur numquam rerum. Molestias quae qui veritatis doloremque quo. Voluptatum voluptatibus doloremque explicabo aut eos qui accusantium unde. Voluptatem rerum suscipit.
        *   </p>
        * 
        * @example      html            Pre-line
        *   <p class="s-white-space:pre-line">
        *       Ut dolore veniam cupiditate dolores molestias ducimus qui. Repellat molestiae qui quia omnis iure officiis qui ipsa voluptas. Totam explicabo corrupti aut. Aut placeat et.
        *   </p>
        * 
        * @example      html            Pre-wrap
        *   <p class="s-white-space:pre-wrap">
        *       Culpa sit ab. Enim sint porro culpa aspernatur sapiente dolores ut animi atque. Sit accusantium eveniet dolore vero. Aliquam cupiditate facere ut dolores sit voluptatem autem minus et.
        *   </p>
        * 
        * @example          html            Revert
        *   <p class="s-white-space:revert">
        *       Dolores iste dolores nobis. Facilis qui in ea. Unde natus molestiae reprehenderit aut. Rem omnis veritatis eum eligendi labore inventore. Alias illum ullam dolor sunt est alias in eveniet. Sed atque provident.
        *   </p>
        * 
        * @example          html                Unset
        *   <p class="s-white-space:unset">
        *       Expedita velit et consequatur quasi tenetur dolorem consequatur nihil. Ducimus quia cum ut quod iure ut consequatur. Ab voluptatem ea modi quae similique ullam hic.
        *   </p>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-white-space-wrap {
        white-space: wrap;
    }
.s-white-space-nowrap {
        white-space: nowrap;
    }
.s-white-space-break-spaces {
        white-space: break-spaces;
    }
.s-white-space-normal {
        white-space: normal;
    }
.s-white-space-pre {
        white-space: pre;
    }
.s-white-space-pre-line {
        white-space: pre-line;
    }
.s-white-space-pre-wrap {
        white-space: pre-wrap;
    }
.s-white-space-revert {
        white-space: revert;
    }
.s-white-space-unset {
        white-space: unset;
    }
/**
* Generate media scoped classes to use like "@mobile s-pbe:100", etc...
* that depends on your theme configuration
*/
@media  {/**
        * @name          Margin
        * @namespace          sugar.style.helpers.margin
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/margin
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply margins to any HTMLElement
        * 
        * @feature          Support for RTL by using margin-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.margin.classes;
        * 
        
* @cssClass     s-m:0        Apply the `0` space all around
* @cssClass     s-mb:0        Apply the `0` block start and end space
* @cssClass     s-mbs:0        Apply the `0` block start space
* @cssClass     s-mbe:0        Apply the `0` block end space
* @cssClass     s-mi:0        Apply the `0` inline start and end space
* @cssClass     s-mis:0        Apply the `0` inline start space
* @cssClass     s-mie:0        Apply the `0` inline end space
* @cssClass     s-mb:-0        Apply the `0` negative block start and end space
* @cssClass     s-mbs:-0        Apply the `0` negative block start space
* @cssClass     s-mbe:-0        Apply the `0` negative block end space
* @cssClass     s-mi:-0        Apply the `0` negative inline start and end space
* @cssClass     s-mis:-0        Apply the `0` negative inline start space
* @cssClass     s-mie:-0        Apply the `0` negative inline end space
* @cssClass     s-m:10        Apply the `10` space all around
* @cssClass     s-mb:10        Apply the `10` block start and end space
* @cssClass     s-mbs:10        Apply the `10` block start space
* @cssClass     s-mbe:10        Apply the `10` block end space
* @cssClass     s-mi:10        Apply the `10` inline start and end space
* @cssClass     s-mis:10        Apply the `10` inline start space
* @cssClass     s-mie:10        Apply the `10` inline end space
* @cssClass     s-mb:-10        Apply the `10` negative block start and end space
* @cssClass     s-mbs:-10        Apply the `10` negative block start space
* @cssClass     s-mbe:-10        Apply the `10` negative block end space
* @cssClass     s-mi:-10        Apply the `10` negative inline start and end space
* @cssClass     s-mis:-10        Apply the `10` negative inline start space
* @cssClass     s-mie:-10        Apply the `10` negative inline end space
* @cssClass     s-m:20        Apply the `20` space all around
* @cssClass     s-mb:20        Apply the `20` block start and end space
* @cssClass     s-mbs:20        Apply the `20` block start space
* @cssClass     s-mbe:20        Apply the `20` block end space
* @cssClass     s-mi:20        Apply the `20` inline start and end space
* @cssClass     s-mis:20        Apply the `20` inline start space
* @cssClass     s-mie:20        Apply the `20` inline end space
* @cssClass     s-mb:-20        Apply the `20` negative block start and end space
* @cssClass     s-mbs:-20        Apply the `20` negative block start space
* @cssClass     s-mbe:-20        Apply the `20` negative block end space
* @cssClass     s-mi:-20        Apply the `20` negative inline start and end space
* @cssClass     s-mis:-20        Apply the `20` negative inline start space
* @cssClass     s-mie:-20        Apply the `20` negative inline end space
* @cssClass     s-m:30        Apply the `30` space all around
* @cssClass     s-mb:30        Apply the `30` block start and end space
* @cssClass     s-mbs:30        Apply the `30` block start space
* @cssClass     s-mbe:30        Apply the `30` block end space
* @cssClass     s-mi:30        Apply the `30` inline start and end space
* @cssClass     s-mis:30        Apply the `30` inline start space
* @cssClass     s-mie:30        Apply the `30` inline end space
* @cssClass     s-mb:-30        Apply the `30` negative block start and end space
* @cssClass     s-mbs:-30        Apply the `30` negative block start space
* @cssClass     s-mbe:-30        Apply the `30` negative block end space
* @cssClass     s-mi:-30        Apply the `30` negative inline start and end space
* @cssClass     s-mis:-30        Apply the `30` negative inline start space
* @cssClass     s-mie:-30        Apply the `30` negative inline end space
* @cssClass     s-m:40        Apply the `40` space all around
* @cssClass     s-mb:40        Apply the `40` block start and end space
* @cssClass     s-mbs:40        Apply the `40` block start space
* @cssClass     s-mbe:40        Apply the `40` block end space
* @cssClass     s-mi:40        Apply the `40` inline start and end space
* @cssClass     s-mis:40        Apply the `40` inline start space
* @cssClass     s-mie:40        Apply the `40` inline end space
* @cssClass     s-mb:-40        Apply the `40` negative block start and end space
* @cssClass     s-mbs:-40        Apply the `40` negative block start space
* @cssClass     s-mbe:-40        Apply the `40` negative block end space
* @cssClass     s-mi:-40        Apply the `40` negative inline start and end space
* @cssClass     s-mis:-40        Apply the `40` negative inline start space
* @cssClass     s-mie:-40        Apply the `40` negative inline end space
* @cssClass     s-m:50        Apply the `50` space all around
* @cssClass     s-mb:50        Apply the `50` block start and end space
* @cssClass     s-mbs:50        Apply the `50` block start space
* @cssClass     s-mbe:50        Apply the `50` block end space
* @cssClass     s-mi:50        Apply the `50` inline start and end space
* @cssClass     s-mis:50        Apply the `50` inline start space
* @cssClass     s-mie:50        Apply the `50` inline end space
* @cssClass     s-mb:-50        Apply the `50` negative block start and end space
* @cssClass     s-mbs:-50        Apply the `50` negative block start space
* @cssClass     s-mbe:-50        Apply the `50` negative block end space
* @cssClass     s-mi:-50        Apply the `50` negative inline start and end space
* @cssClass     s-mis:-50        Apply the `50` negative inline start space
* @cssClass     s-mie:-50        Apply the `50` negative inline end space
* @cssClass     s-m:60        Apply the `60` space all around
* @cssClass     s-mb:60        Apply the `60` block start and end space
* @cssClass     s-mbs:60        Apply the `60` block start space
* @cssClass     s-mbe:60        Apply the `60` block end space
* @cssClass     s-mi:60        Apply the `60` inline start and end space
* @cssClass     s-mis:60        Apply the `60` inline start space
* @cssClass     s-mie:60        Apply the `60` inline end space
* @cssClass     s-mb:-60        Apply the `60` negative block start and end space
* @cssClass     s-mbs:-60        Apply the `60` negative block start space
* @cssClass     s-mbe:-60        Apply the `60` negative block end space
* @cssClass     s-mi:-60        Apply the `60` negative inline start and end space
* @cssClass     s-mis:-60        Apply the `60` negative inline start space
* @cssClass     s-mie:-60        Apply the `60` negative inline end space
* @cssClass     s-m:70        Apply the `70` space all around
* @cssClass     s-mb:70        Apply the `70` block start and end space
* @cssClass     s-mbs:70        Apply the `70` block start space
* @cssClass     s-mbe:70        Apply the `70` block end space
* @cssClass     s-mi:70        Apply the `70` inline start and end space
* @cssClass     s-mis:70        Apply the `70` inline start space
* @cssClass     s-mie:70        Apply the `70` inline end space
* @cssClass     s-mb:-70        Apply the `70` negative block start and end space
* @cssClass     s-mbs:-70        Apply the `70` negative block start space
* @cssClass     s-mbe:-70        Apply the `70` negative block end space
* @cssClass     s-mi:-70        Apply the `70` negative inline start and end space
* @cssClass     s-mis:-70        Apply the `70` negative inline start space
* @cssClass     s-mie:-70        Apply the `70` negative inline end space
* @cssClass     s-m:80        Apply the `80` space all around
* @cssClass     s-mb:80        Apply the `80` block start and end space
* @cssClass     s-mbs:80        Apply the `80` block start space
* @cssClass     s-mbe:80        Apply the `80` block end space
* @cssClass     s-mi:80        Apply the `80` inline start and end space
* @cssClass     s-mis:80        Apply the `80` inline start space
* @cssClass     s-mie:80        Apply the `80` inline end space
* @cssClass     s-mb:-80        Apply the `80` negative block start and end space
* @cssClass     s-mbs:-80        Apply the `80` negative block start space
* @cssClass     s-mbe:-80        Apply the `80` negative block end space
* @cssClass     s-mi:-80        Apply the `80` negative inline start and end space
* @cssClass     s-mis:-80        Apply the `80` negative inline start space
* @cssClass     s-mie:-80        Apply the `80` negative inline end space
* @cssClass     s-m:90        Apply the `90` space all around
* @cssClass     s-mb:90        Apply the `90` block start and end space
* @cssClass     s-mbs:90        Apply the `90` block start space
* @cssClass     s-mbe:90        Apply the `90` block end space
* @cssClass     s-mi:90        Apply the `90` inline start and end space
* @cssClass     s-mis:90        Apply the `90` inline start space
* @cssClass     s-mie:90        Apply the `90` inline end space
* @cssClass     s-mb:-90        Apply the `90` negative block start and end space
* @cssClass     s-mbs:-90        Apply the `90` negative block start space
* @cssClass     s-mbe:-90        Apply the `90` negative block end space
* @cssClass     s-mi:-90        Apply the `90` negative inline start and end space
* @cssClass     s-mis:-90        Apply the `90` negative inline start space
* @cssClass     s-mie:-90        Apply the `90` negative inline end space
* @cssClass     s-m:100        Apply the `100` space all around
* @cssClass     s-mb:100        Apply the `100` block start and end space
* @cssClass     s-mbs:100        Apply the `100` block start space
* @cssClass     s-mbe:100        Apply the `100` block end space
* @cssClass     s-mi:100        Apply the `100` inline start and end space
* @cssClass     s-mis:100        Apply the `100` inline start space
* @cssClass     s-mie:100        Apply the `100` inline end space
* @cssClass     s-mb:-100        Apply the `100` negative block start and end space
* @cssClass     s-mbs:-100        Apply the `100` negative block start space
* @cssClass     s-mbe:-100        Apply the `100` negative block end space
* @cssClass     s-mi:-100        Apply the `100` negative inline start and end space
* @cssClass     s-mis:-100        Apply the `100` negative inline start space
* @cssClass     s-mie:-100        Apply the `100` negative inline end space
        * @cssClass                s-m:auto            Apply the `auto` space all around
        * @cssClass                s-mb:auto          Apply the `auto` block start and end space
        * @cssClass                s-mbs:auto          Apply the `auto` block start space
        * @cssClass                s-mbe:auto          Apply the `auto` block end space
        * @cssClass                s-mi:auto          Apply the `auto` inline start and end space
        * @cssClass                s-mis:auto          Apply the `auto` inline start space
        * @cssClass                s-mie:auto          Apply the `auto` inline end space
        *
        * 
        * @example        html               Inline
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Clyde Gusikowski</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">Lisa Kassulke</p>
        *   <p class="s-bg:main s-mie:100 s-radius s-mbe:20 s-p:30">Joey Bogan</p>
        *   <p class="s-bg:error s-mie:30 s-radius s-p:30">Derek Predovic</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-mbe:40 s-p:30 s-text:center">Naomi Davis</div>
        *   <div class="s-bg:complementary s-radius s-mbe:20 s-p:30 s-text:center">Roxanne Carroll</div>
        *   <div class="s-bg:main s-radius s-mbe:50 s-p:30 s-text:center">Micheal Goldner</div>
        *   <div class="s-bg:error s-radius s-p:30 s-text:center">Daisy Little II</div>
        * 
        * @example            html                RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Ron Stiedemann</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">Dr. Erick Goyette</p>
        *   <p class="s-bg:main s-radius s-mie:100 s-mbe:20 s-p:30">Dianne Rosenbaum</p>
        *   <p class="s-bg:error s-radius s-mie:30 s-p:30">Mrs. Abel Johnston</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
     
 
   .s-m-default___wide {
        margin: 1rem;
   } 
 
   .s-mbs-default___wide {
        margin-block-start: 1rem !important;
   } 
 
   .s-mbe-default___wide {
        margin-block-end: 1rem !important;
   } 
 
   .s-mis-default___wide {
        margin-inline-start: 1rem !important;
   } 
 
   .s-mie-default___wide {
        margin-inline-end: 1rem !important;
   } 
 
     .s-mi-default___wide {
        margin-inline-start: 1rem !important;
        margin-inline-end: 1rem !important;
   } 
 
   .s-mb-default___wide {
        margin-block-start: 1rem !important;
        margin-block-end: 1rem !important;
   } 
 
   .s-m-0___wide {
        margin: calc(var(--s-margin-default, 1rem) * 0);
   } 
 
   .s-mbs-0___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mbe-0___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mis-0___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mie-0___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
     .s-mi-0___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mb-0___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-m-10___wide {
        margin: calc(var(--s-margin-default, 1rem) * 0.375);
   } 
 
   .s-mbs-10___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mbe-10___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mis-10___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mie-10___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
     .s-mi-10___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mb-10___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-m-20___wide {
        margin: calc(var(--s-margin-default, 1rem) * 0.75);
   } 
 
   .s-mbs-20___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mbe-20___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mis-20___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mie-20___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
     .s-mi-20___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mb-20___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-m-30___wide {
        margin: calc(var(--s-margin-default, 1rem) * 1.4);
   } 
 
   .s-mbs-30___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mbe-30___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mis-30___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mie-30___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
     .s-mi-30___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mb-30___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-m-40___wide {
        margin: calc(var(--s-margin-default, 1rem) * 2);
   } 
 
   .s-mbs-40___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mbe-40___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mis-40___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mie-40___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
     .s-mi-40___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mb-40___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-m-50___wide {
        margin: calc(var(--s-margin-default, 1rem) * 3.5);
   } 
 
   .s-mbs-50___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mbe-50___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mis-50___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mie-50___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
     .s-mi-50___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mb-50___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-m-60___wide {
        margin: calc(var(--s-margin-default, 1rem) * 5);
   } 
 
   .s-mbs-60___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mbe-60___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mis-60___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mie-60___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
     .s-mi-60___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mb-60___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-m-70___wide {
        margin: calc(var(--s-margin-default, 1rem) * 7.5);
   } 
 
   .s-mbs-70___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mbe-70___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mis-70___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mie-70___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
     .s-mi-70___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mb-70___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-m-80___wide {
        margin: calc(var(--s-margin-default, 1rem) * 10);
   } 
 
   .s-mbs-80___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mbe-80___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mis-80___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mie-80___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
     .s-mi-80___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mb-80___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-m-90___wide {
        margin: calc(var(--s-margin-default, 1rem) * 15);
   } 
 
   .s-mbs-90___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mbe-90___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mis-90___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mie-90___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
     .s-mi-90___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mb-90___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-m-100___wide {
        margin: calc(var(--s-margin-default, 1rem) * 20);
   } 
 
   .s-mbs-100___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mbe-100___wide {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mis-100___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mie-100___wide {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
     .s-mi-100___wide {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mb-100___wide {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-m--default___wide {
        margin: calc(1rem * -1);
   } 
 
   .s-mbs--default___wide {
        margin-block-start: calc(1rem * -1) !important;
   } 
 
   .s-mbe--default___wide {
        margin-block-end: calc(1rem * -1) !important;
   } 
 
   .s-mis--default___wide {
        margin-inline-start: calc(1rem * -1) !important;
   } 
 
   .s-mie--default___wide {
        margin-inline-end: calc(1rem * -1) !important;
   } 
 
     .s-mi--default___wide {
        margin-inline-start: calc(1rem * -1) !important;
        margin-inline-end: calc(1rem * -1) !important;
   } 
 
   .s-mb--default___wide {
        margin-block-start: calc(1rem * -1) !important;
        margin-block-end: calc(1rem * -1) !important;
   } 
 
   .s-m--0___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0) * -1);
   } 
 
   .s-mbs--0___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mbe--0___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mis--0___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mie--0___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
     .s-mi--0___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mb--0___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-m--10___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1);
   } 
 
   .s-mbs--10___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mbe--10___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mis--10___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mie--10___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
     .s-mi--10___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mb--10___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-m--20___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1);
   } 
 
   .s-mbs--20___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mbe--20___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mis--20___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mie--20___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
     .s-mi--20___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mb--20___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-m--30___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1);
   } 
 
   .s-mbs--30___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mbe--30___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mis--30___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mie--30___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
     .s-mi--30___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mb--30___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-m--40___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 2) * -1);
   } 
 
   .s-mbs--40___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mbe--40___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mis--40___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mie--40___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
     .s-mi--40___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mb--40___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-m--50___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1);
   } 
 
   .s-mbs--50___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mbe--50___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mis--50___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mie--50___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
     .s-mi--50___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mb--50___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-m--60___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 5) * -1);
   } 
 
   .s-mbs--60___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mbe--60___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mis--60___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mie--60___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
     .s-mi--60___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mb--60___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-m--70___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1);
   } 
 
   .s-mbs--70___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mbe--70___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mis--70___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mie--70___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
     .s-mi--70___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mb--70___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-m--80___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 10) * -1);
   } 
 
   .s-mbs--80___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mbe--80___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mis--80___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mie--80___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
     .s-mi--80___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mb--80___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-m--90___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 15) * -1);
   } 
 
   .s-mbs--90___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mbe--90___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mis--90___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mie--90___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
     .s-mi--90___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mb--90___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-m--100___wide {
        margin: calc(calc(var(--s-margin-default, 1rem) * 20) * -1);
   } 
 
   .s-mbs--100___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mbe--100___wide {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mis--100___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mie--100___wide {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
     .s-mi--100___wide {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mb--100___wide {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-m-auto___wide {
        margin: auto;
   } 
 
   .s-mbs-auto___wide {
        margin-block-start: auto;
   } 
 
   .s-mie-auto___wide {
        margin-inline-end: auto;
   } 
 
   .s-mbe-auto___wide {
        margin-block-end: auto;
   } 
 
   .s-mis-auto___wide {
        margin-inline-start: auto;
   } 
 
   .s-mi-auto___wide {
        margin-inline-start: auto;
        margin-inline-end: auto;
   } 
 
   .s-mb-auto___wide {
        margin-block-start: auto;
        margin-block-end: auto;
   }/**
        * @name          Padding
        * @namespace          sugar.style.helpers.padding
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/padding
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply padding to any HTMLElement
        * 
        * @feature          Support for RTL by using padding-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.padding.classes;
        * 
        
* @cssClass     s-p:0        Apply the `0` padding all around
* @cssClass     s-pb:0        Apply the `0` block start and end padding
* @cssClass     s-pbs:0        Apply the `0` block start padding
* @cssClass     s-pbe:0        Apply the `0` block end padding
* @cssClass     s-pi:0        Apply the `0` inline start and end padding
* @cssClass     s-pis:0        Apply the `0` inline start padding
* @cssClass     s-pie:0        Apply the `0` inline end padding
* @cssClass     s-pb:-0        Apply the `0` negative block start and end padding
* @cssClass     s-pbs:-0        Apply the `0` negative block start padding
* @cssClass     s-pbe:-0        Apply the `0` negative block end padding
* @cssClass     s-pi:-0        Apply the `0` negative inline start and end padding
* @cssClass     s-pis:-0        Apply the `0` negative inline start padding
* @cssClass     s-pie:-0        Apply the `0` negative inline end padding
* @cssClass     s-p:10        Apply the `10` padding all around
* @cssClass     s-pb:10        Apply the `10` block start and end padding
* @cssClass     s-pbs:10        Apply the `10` block start padding
* @cssClass     s-pbe:10        Apply the `10` block end padding
* @cssClass     s-pi:10        Apply the `10` inline start and end padding
* @cssClass     s-pis:10        Apply the `10` inline start padding
* @cssClass     s-pie:10        Apply the `10` inline end padding
* @cssClass     s-pb:-10        Apply the `10` negative block start and end padding
* @cssClass     s-pbs:-10        Apply the `10` negative block start padding
* @cssClass     s-pbe:-10        Apply the `10` negative block end padding
* @cssClass     s-pi:-10        Apply the `10` negative inline start and end padding
* @cssClass     s-pis:-10        Apply the `10` negative inline start padding
* @cssClass     s-pie:-10        Apply the `10` negative inline end padding
* @cssClass     s-p:20        Apply the `20` padding all around
* @cssClass     s-pb:20        Apply the `20` block start and end padding
* @cssClass     s-pbs:20        Apply the `20` block start padding
* @cssClass     s-pbe:20        Apply the `20` block end padding
* @cssClass     s-pi:20        Apply the `20` inline start and end padding
* @cssClass     s-pis:20        Apply the `20` inline start padding
* @cssClass     s-pie:20        Apply the `20` inline end padding
* @cssClass     s-pb:-20        Apply the `20` negative block start and end padding
* @cssClass     s-pbs:-20        Apply the `20` negative block start padding
* @cssClass     s-pbe:-20        Apply the `20` negative block end padding
* @cssClass     s-pi:-20        Apply the `20` negative inline start and end padding
* @cssClass     s-pis:-20        Apply the `20` negative inline start padding
* @cssClass     s-pie:-20        Apply the `20` negative inline end padding
* @cssClass     s-p:30        Apply the `30` padding all around
* @cssClass     s-pb:30        Apply the `30` block start and end padding
* @cssClass     s-pbs:30        Apply the `30` block start padding
* @cssClass     s-pbe:30        Apply the `30` block end padding
* @cssClass     s-pi:30        Apply the `30` inline start and end padding
* @cssClass     s-pis:30        Apply the `30` inline start padding
* @cssClass     s-pie:30        Apply the `30` inline end padding
* @cssClass     s-pb:-30        Apply the `30` negative block start and end padding
* @cssClass     s-pbs:-30        Apply the `30` negative block start padding
* @cssClass     s-pbe:-30        Apply the `30` negative block end padding
* @cssClass     s-pi:-30        Apply the `30` negative inline start and end padding
* @cssClass     s-pis:-30        Apply the `30` negative inline start padding
* @cssClass     s-pie:-30        Apply the `30` negative inline end padding
* @cssClass     s-p:40        Apply the `40` padding all around
* @cssClass     s-pb:40        Apply the `40` block start and end padding
* @cssClass     s-pbs:40        Apply the `40` block start padding
* @cssClass     s-pbe:40        Apply the `40` block end padding
* @cssClass     s-pi:40        Apply the `40` inline start and end padding
* @cssClass     s-pis:40        Apply the `40` inline start padding
* @cssClass     s-pie:40        Apply the `40` inline end padding
* @cssClass     s-pb:-40        Apply the `40` negative block start and end padding
* @cssClass     s-pbs:-40        Apply the `40` negative block start padding
* @cssClass     s-pbe:-40        Apply the `40` negative block end padding
* @cssClass     s-pi:-40        Apply the `40` negative inline start and end padding
* @cssClass     s-pis:-40        Apply the `40` negative inline start padding
* @cssClass     s-pie:-40        Apply the `40` negative inline end padding
* @cssClass     s-p:50        Apply the `50` padding all around
* @cssClass     s-pb:50        Apply the `50` block start and end padding
* @cssClass     s-pbs:50        Apply the `50` block start padding
* @cssClass     s-pbe:50        Apply the `50` block end padding
* @cssClass     s-pi:50        Apply the `50` inline start and end padding
* @cssClass     s-pis:50        Apply the `50` inline start padding
* @cssClass     s-pie:50        Apply the `50` inline end padding
* @cssClass     s-pb:-50        Apply the `50` negative block start and end padding
* @cssClass     s-pbs:-50        Apply the `50` negative block start padding
* @cssClass     s-pbe:-50        Apply the `50` negative block end padding
* @cssClass     s-pi:-50        Apply the `50` negative inline start and end padding
* @cssClass     s-pis:-50        Apply the `50` negative inline start padding
* @cssClass     s-pie:-50        Apply the `50` negative inline end padding
* @cssClass     s-p:60        Apply the `60` padding all around
* @cssClass     s-pb:60        Apply the `60` block start and end padding
* @cssClass     s-pbs:60        Apply the `60` block start padding
* @cssClass     s-pbe:60        Apply the `60` block end padding
* @cssClass     s-pi:60        Apply the `60` inline start and end padding
* @cssClass     s-pis:60        Apply the `60` inline start padding
* @cssClass     s-pie:60        Apply the `60` inline end padding
* @cssClass     s-pb:-60        Apply the `60` negative block start and end padding
* @cssClass     s-pbs:-60        Apply the `60` negative block start padding
* @cssClass     s-pbe:-60        Apply the `60` negative block end padding
* @cssClass     s-pi:-60        Apply the `60` negative inline start and end padding
* @cssClass     s-pis:-60        Apply the `60` negative inline start padding
* @cssClass     s-pie:-60        Apply the `60` negative inline end padding
* @cssClass     s-p:70        Apply the `70` padding all around
* @cssClass     s-pb:70        Apply the `70` block start and end padding
* @cssClass     s-pbs:70        Apply the `70` block start padding
* @cssClass     s-pbe:70        Apply the `70` block end padding
* @cssClass     s-pi:70        Apply the `70` inline start and end padding
* @cssClass     s-pis:70        Apply the `70` inline start padding
* @cssClass     s-pie:70        Apply the `70` inline end padding
* @cssClass     s-pb:-70        Apply the `70` negative block start and end padding
* @cssClass     s-pbs:-70        Apply the `70` negative block start padding
* @cssClass     s-pbe:-70        Apply the `70` negative block end padding
* @cssClass     s-pi:-70        Apply the `70` negative inline start and end padding
* @cssClass     s-pis:-70        Apply the `70` negative inline start padding
* @cssClass     s-pie:-70        Apply the `70` negative inline end padding
* @cssClass     s-p:80        Apply the `80` padding all around
* @cssClass     s-pb:80        Apply the `80` block start and end padding
* @cssClass     s-pbs:80        Apply the `80` block start padding
* @cssClass     s-pbe:80        Apply the `80` block end padding
* @cssClass     s-pi:80        Apply the `80` inline start and end padding
* @cssClass     s-pis:80        Apply the `80` inline start padding
* @cssClass     s-pie:80        Apply the `80` inline end padding
* @cssClass     s-pb:-80        Apply the `80` negative block start and end padding
* @cssClass     s-pbs:-80        Apply the `80` negative block start padding
* @cssClass     s-pbe:-80        Apply the `80` negative block end padding
* @cssClass     s-pi:-80        Apply the `80` negative inline start and end padding
* @cssClass     s-pis:-80        Apply the `80` negative inline start padding
* @cssClass     s-pie:-80        Apply the `80` negative inline end padding
* @cssClass     s-p:90        Apply the `90` padding all around
* @cssClass     s-pb:90        Apply the `90` block start and end padding
* @cssClass     s-pbs:90        Apply the `90` block start padding
* @cssClass     s-pbe:90        Apply the `90` block end padding
* @cssClass     s-pi:90        Apply the `90` inline start and end padding
* @cssClass     s-pis:90        Apply the `90` inline start padding
* @cssClass     s-pie:90        Apply the `90` inline end padding
* @cssClass     s-pb:-90        Apply the `90` negative block start and end padding
* @cssClass     s-pbs:-90        Apply the `90` negative block start padding
* @cssClass     s-pbe:-90        Apply the `90` negative block end padding
* @cssClass     s-pi:-90        Apply the `90` negative inline start and end padding
* @cssClass     s-pis:-90        Apply the `90` negative inline start padding
* @cssClass     s-pie:-90        Apply the `90` negative inline end padding
* @cssClass     s-p:100        Apply the `100` padding all around
* @cssClass     s-pb:100        Apply the `100` block start and end padding
* @cssClass     s-pbs:100        Apply the `100` block start padding
* @cssClass     s-pbe:100        Apply the `100` block end padding
* @cssClass     s-pi:100        Apply the `100` inline start and end padding
* @cssClass     s-pis:100        Apply the `100` inline start padding
* @cssClass     s-pie:100        Apply the `100` inline end padding
* @cssClass     s-pb:-100        Apply the `100` negative block start and end padding
* @cssClass     s-pbs:-100        Apply the `100` negative block start padding
* @cssClass     s-pbe:-100        Apply the `100` negative block end padding
* @cssClass     s-pi:-100        Apply the `100` negative inline start and end padding
* @cssClass     s-pis:-100        Apply the `100` negative inline start padding
* @cssClass     s-pie:-100        Apply the `100` negative inline end padding
        *
        * 
        * @example        html          Inline
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Ms. Salvador Koepp</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Meghan Wisozk</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Mary Quigley</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Denise Lemke</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-pbs:30 s-pbe:40 s-text:center s-mbe:20">Harriet Boyle</div>
        *   <div class="s-bg:complementary s-radius s-pb:30 s-text:center s-mbe:20">Ms. Edmond Grant</div>
        *   <div class="s-bg:main s-radius s-pbs:50 s-pbe:30 s-text:center s-mbe:20">Jessica Keebler</div>
        *   <div class="s-bg:error s-radius s-pbs:100 s-pbe:60 s-text:center s-mbe:20">Caroline Schroeder</div>
        * 
        * @example       html          RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Luther Nolan PhD</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Ms. Vicki Ruecker</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Steve Weber Jr.</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Peggy Douglas PhD</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
     
 
   .s-p-default___wide {
        padding: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
   } 
 
   .s-pbs-default___wide {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pbe-default___wide {
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pis-default___wide {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pie-default___wide {
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
     .s-pi-default___wide {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pb-default___wide {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-p-0___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0);
   } 
 
   .s-pbs-0___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pbe-0___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pis-0___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pie-0___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
     .s-pi-0___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pb-0___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-p-10___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
   } 
 
   .s-pbs-10___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pbe-10___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pis-10___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pie-10___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
     .s-pi-10___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pb-10___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-p-20___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
   } 
 
   .s-pbs-20___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pbe-20___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pis-20___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pie-20___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
     .s-pi-20___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pb-20___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-p-30___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
   } 
 
   .s-pbs-30___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pbe-30___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pis-30___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pie-30___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
     .s-pi-30___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pb-30___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-p-40___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2);
   } 
 
   .s-pbs-40___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pbe-40___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pis-40___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pie-40___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
     .s-pi-40___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pb-40___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-p-50___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
   } 
 
   .s-pbs-50___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pbe-50___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pis-50___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pie-50___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
     .s-pi-50___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pb-50___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-p-60___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5);
   } 
 
   .s-pbs-60___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pbe-60___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pis-60___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pie-60___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
     .s-pi-60___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pb-60___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-p-70___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5);
   } 
 
   .s-pbs-70___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pbe-70___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pis-70___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pie-70___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
     .s-pi-70___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pb-70___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-p-80___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10);
   } 
 
   .s-pbs-80___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pbe-80___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pis-80___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pie-80___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
     .s-pi-80___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pb-80___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-p-90___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15);
   } 
 
   .s-pbs-90___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pbe-90___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pis-90___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pie-90___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
     .s-pi-90___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pb-90___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-p-100___wide {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20);
   } 
 
   .s-pbs-100___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pbe-100___wide {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pis-100___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pie-100___wide {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
     .s-pi-100___wide {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pb-100___wide {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
}
@media (max-width: 1279px) {/**
        * @name          Margin
        * @namespace          sugar.style.helpers.margin
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/margin
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply margins to any HTMLElement
        * 
        * @feature          Support for RTL by using margin-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.margin.classes;
        * 
        
* @cssClass     s-m:0        Apply the `0` space all around
* @cssClass     s-mb:0        Apply the `0` block start and end space
* @cssClass     s-mbs:0        Apply the `0` block start space
* @cssClass     s-mbe:0        Apply the `0` block end space
* @cssClass     s-mi:0        Apply the `0` inline start and end space
* @cssClass     s-mis:0        Apply the `0` inline start space
* @cssClass     s-mie:0        Apply the `0` inline end space
* @cssClass     s-mb:-0        Apply the `0` negative block start and end space
* @cssClass     s-mbs:-0        Apply the `0` negative block start space
* @cssClass     s-mbe:-0        Apply the `0` negative block end space
* @cssClass     s-mi:-0        Apply the `0` negative inline start and end space
* @cssClass     s-mis:-0        Apply the `0` negative inline start space
* @cssClass     s-mie:-0        Apply the `0` negative inline end space
* @cssClass     s-m:10        Apply the `10` space all around
* @cssClass     s-mb:10        Apply the `10` block start and end space
* @cssClass     s-mbs:10        Apply the `10` block start space
* @cssClass     s-mbe:10        Apply the `10` block end space
* @cssClass     s-mi:10        Apply the `10` inline start and end space
* @cssClass     s-mis:10        Apply the `10` inline start space
* @cssClass     s-mie:10        Apply the `10` inline end space
* @cssClass     s-mb:-10        Apply the `10` negative block start and end space
* @cssClass     s-mbs:-10        Apply the `10` negative block start space
* @cssClass     s-mbe:-10        Apply the `10` negative block end space
* @cssClass     s-mi:-10        Apply the `10` negative inline start and end space
* @cssClass     s-mis:-10        Apply the `10` negative inline start space
* @cssClass     s-mie:-10        Apply the `10` negative inline end space
* @cssClass     s-m:20        Apply the `20` space all around
* @cssClass     s-mb:20        Apply the `20` block start and end space
* @cssClass     s-mbs:20        Apply the `20` block start space
* @cssClass     s-mbe:20        Apply the `20` block end space
* @cssClass     s-mi:20        Apply the `20` inline start and end space
* @cssClass     s-mis:20        Apply the `20` inline start space
* @cssClass     s-mie:20        Apply the `20` inline end space
* @cssClass     s-mb:-20        Apply the `20` negative block start and end space
* @cssClass     s-mbs:-20        Apply the `20` negative block start space
* @cssClass     s-mbe:-20        Apply the `20` negative block end space
* @cssClass     s-mi:-20        Apply the `20` negative inline start and end space
* @cssClass     s-mis:-20        Apply the `20` negative inline start space
* @cssClass     s-mie:-20        Apply the `20` negative inline end space
* @cssClass     s-m:30        Apply the `30` space all around
* @cssClass     s-mb:30        Apply the `30` block start and end space
* @cssClass     s-mbs:30        Apply the `30` block start space
* @cssClass     s-mbe:30        Apply the `30` block end space
* @cssClass     s-mi:30        Apply the `30` inline start and end space
* @cssClass     s-mis:30        Apply the `30` inline start space
* @cssClass     s-mie:30        Apply the `30` inline end space
* @cssClass     s-mb:-30        Apply the `30` negative block start and end space
* @cssClass     s-mbs:-30        Apply the `30` negative block start space
* @cssClass     s-mbe:-30        Apply the `30` negative block end space
* @cssClass     s-mi:-30        Apply the `30` negative inline start and end space
* @cssClass     s-mis:-30        Apply the `30` negative inline start space
* @cssClass     s-mie:-30        Apply the `30` negative inline end space
* @cssClass     s-m:40        Apply the `40` space all around
* @cssClass     s-mb:40        Apply the `40` block start and end space
* @cssClass     s-mbs:40        Apply the `40` block start space
* @cssClass     s-mbe:40        Apply the `40` block end space
* @cssClass     s-mi:40        Apply the `40` inline start and end space
* @cssClass     s-mis:40        Apply the `40` inline start space
* @cssClass     s-mie:40        Apply the `40` inline end space
* @cssClass     s-mb:-40        Apply the `40` negative block start and end space
* @cssClass     s-mbs:-40        Apply the `40` negative block start space
* @cssClass     s-mbe:-40        Apply the `40` negative block end space
* @cssClass     s-mi:-40        Apply the `40` negative inline start and end space
* @cssClass     s-mis:-40        Apply the `40` negative inline start space
* @cssClass     s-mie:-40        Apply the `40` negative inline end space
* @cssClass     s-m:50        Apply the `50` space all around
* @cssClass     s-mb:50        Apply the `50` block start and end space
* @cssClass     s-mbs:50        Apply the `50` block start space
* @cssClass     s-mbe:50        Apply the `50` block end space
* @cssClass     s-mi:50        Apply the `50` inline start and end space
* @cssClass     s-mis:50        Apply the `50` inline start space
* @cssClass     s-mie:50        Apply the `50` inline end space
* @cssClass     s-mb:-50        Apply the `50` negative block start and end space
* @cssClass     s-mbs:-50        Apply the `50` negative block start space
* @cssClass     s-mbe:-50        Apply the `50` negative block end space
* @cssClass     s-mi:-50        Apply the `50` negative inline start and end space
* @cssClass     s-mis:-50        Apply the `50` negative inline start space
* @cssClass     s-mie:-50        Apply the `50` negative inline end space
* @cssClass     s-m:60        Apply the `60` space all around
* @cssClass     s-mb:60        Apply the `60` block start and end space
* @cssClass     s-mbs:60        Apply the `60` block start space
* @cssClass     s-mbe:60        Apply the `60` block end space
* @cssClass     s-mi:60        Apply the `60` inline start and end space
* @cssClass     s-mis:60        Apply the `60` inline start space
* @cssClass     s-mie:60        Apply the `60` inline end space
* @cssClass     s-mb:-60        Apply the `60` negative block start and end space
* @cssClass     s-mbs:-60        Apply the `60` negative block start space
* @cssClass     s-mbe:-60        Apply the `60` negative block end space
* @cssClass     s-mi:-60        Apply the `60` negative inline start and end space
* @cssClass     s-mis:-60        Apply the `60` negative inline start space
* @cssClass     s-mie:-60        Apply the `60` negative inline end space
* @cssClass     s-m:70        Apply the `70` space all around
* @cssClass     s-mb:70        Apply the `70` block start and end space
* @cssClass     s-mbs:70        Apply the `70` block start space
* @cssClass     s-mbe:70        Apply the `70` block end space
* @cssClass     s-mi:70        Apply the `70` inline start and end space
* @cssClass     s-mis:70        Apply the `70` inline start space
* @cssClass     s-mie:70        Apply the `70` inline end space
* @cssClass     s-mb:-70        Apply the `70` negative block start and end space
* @cssClass     s-mbs:-70        Apply the `70` negative block start space
* @cssClass     s-mbe:-70        Apply the `70` negative block end space
* @cssClass     s-mi:-70        Apply the `70` negative inline start and end space
* @cssClass     s-mis:-70        Apply the `70` negative inline start space
* @cssClass     s-mie:-70        Apply the `70` negative inline end space
* @cssClass     s-m:80        Apply the `80` space all around
* @cssClass     s-mb:80        Apply the `80` block start and end space
* @cssClass     s-mbs:80        Apply the `80` block start space
* @cssClass     s-mbe:80        Apply the `80` block end space
* @cssClass     s-mi:80        Apply the `80` inline start and end space
* @cssClass     s-mis:80        Apply the `80` inline start space
* @cssClass     s-mie:80        Apply the `80` inline end space
* @cssClass     s-mb:-80        Apply the `80` negative block start and end space
* @cssClass     s-mbs:-80        Apply the `80` negative block start space
* @cssClass     s-mbe:-80        Apply the `80` negative block end space
* @cssClass     s-mi:-80        Apply the `80` negative inline start and end space
* @cssClass     s-mis:-80        Apply the `80` negative inline start space
* @cssClass     s-mie:-80        Apply the `80` negative inline end space
* @cssClass     s-m:90        Apply the `90` space all around
* @cssClass     s-mb:90        Apply the `90` block start and end space
* @cssClass     s-mbs:90        Apply the `90` block start space
* @cssClass     s-mbe:90        Apply the `90` block end space
* @cssClass     s-mi:90        Apply the `90` inline start and end space
* @cssClass     s-mis:90        Apply the `90` inline start space
* @cssClass     s-mie:90        Apply the `90` inline end space
* @cssClass     s-mb:-90        Apply the `90` negative block start and end space
* @cssClass     s-mbs:-90        Apply the `90` negative block start space
* @cssClass     s-mbe:-90        Apply the `90` negative block end space
* @cssClass     s-mi:-90        Apply the `90` negative inline start and end space
* @cssClass     s-mis:-90        Apply the `90` negative inline start space
* @cssClass     s-mie:-90        Apply the `90` negative inline end space
* @cssClass     s-m:100        Apply the `100` space all around
* @cssClass     s-mb:100        Apply the `100` block start and end space
* @cssClass     s-mbs:100        Apply the `100` block start space
* @cssClass     s-mbe:100        Apply the `100` block end space
* @cssClass     s-mi:100        Apply the `100` inline start and end space
* @cssClass     s-mis:100        Apply the `100` inline start space
* @cssClass     s-mie:100        Apply the `100` inline end space
* @cssClass     s-mb:-100        Apply the `100` negative block start and end space
* @cssClass     s-mbs:-100        Apply the `100` negative block start space
* @cssClass     s-mbe:-100        Apply the `100` negative block end space
* @cssClass     s-mi:-100        Apply the `100` negative inline start and end space
* @cssClass     s-mis:-100        Apply the `100` negative inline start space
* @cssClass     s-mie:-100        Apply the `100` negative inline end space
        * @cssClass                s-m:auto            Apply the `auto` space all around
        * @cssClass                s-mb:auto          Apply the `auto` block start and end space
        * @cssClass                s-mbs:auto          Apply the `auto` block start space
        * @cssClass                s-mbe:auto          Apply the `auto` block end space
        * @cssClass                s-mi:auto          Apply the `auto` inline start and end space
        * @cssClass                s-mis:auto          Apply the `auto` inline start space
        * @cssClass                s-mie:auto          Apply the `auto` inline end space
        *
        * 
        * @example        html               Inline
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Elsa Roob</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">Merle Langosh</p>
        *   <p class="s-bg:main s-mie:100 s-radius s-mbe:20 s-p:30">Jean Lowe</p>
        *   <p class="s-bg:error s-mie:30 s-radius s-p:30">Jermaine Jacobs</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-mbe:40 s-p:30 s-text:center">Marcos Fisher</div>
        *   <div class="s-bg:complementary s-radius s-mbe:20 s-p:30 s-text:center">Ethel Adams</div>
        *   <div class="s-bg:main s-radius s-mbe:50 s-p:30 s-text:center">Jeffrey Carroll</div>
        *   <div class="s-bg:error s-radius s-p:30 s-text:center">Jaime Roob</div>
        * 
        * @example            html                RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Dwayne Wilderman</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">Laverne Goodwin II</p>
        *   <p class="s-bg:main s-radius s-mie:100 s-mbe:20 s-p:30">Mrs. Mildred Koelpin</p>
        *   <p class="s-bg:error s-radius s-mie:30 s-p:30">Michele Ruecker</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
     
 
   .s-m-default___tablet {
        margin: 1rem;
   } 
 
   .s-mbs-default___tablet {
        margin-block-start: 1rem !important;
   } 
 
   .s-mbe-default___tablet {
        margin-block-end: 1rem !important;
   } 
 
   .s-mis-default___tablet {
        margin-inline-start: 1rem !important;
   } 
 
   .s-mie-default___tablet {
        margin-inline-end: 1rem !important;
   } 
 
     .s-mi-default___tablet {
        margin-inline-start: 1rem !important;
        margin-inline-end: 1rem !important;
   } 
 
   .s-mb-default___tablet {
        margin-block-start: 1rem !important;
        margin-block-end: 1rem !important;
   } 
 
   .s-m-0___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 0);
   } 
 
   .s-mbs-0___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mbe-0___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mis-0___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mie-0___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
     .s-mi-0___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mb-0___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-m-10___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 0.375);
   } 
 
   .s-mbs-10___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mbe-10___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mis-10___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mie-10___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
     .s-mi-10___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mb-10___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-m-20___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 0.75);
   } 
 
   .s-mbs-20___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mbe-20___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mis-20___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mie-20___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
     .s-mi-20___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mb-20___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-m-30___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 1.4);
   } 
 
   .s-mbs-30___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mbe-30___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mis-30___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mie-30___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
     .s-mi-30___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mb-30___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-m-40___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 2);
   } 
 
   .s-mbs-40___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mbe-40___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mis-40___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mie-40___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
     .s-mi-40___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mb-40___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-m-50___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 3.5);
   } 
 
   .s-mbs-50___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mbe-50___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mis-50___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mie-50___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
     .s-mi-50___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mb-50___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-m-60___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 5);
   } 
 
   .s-mbs-60___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mbe-60___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mis-60___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mie-60___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
     .s-mi-60___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mb-60___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-m-70___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 7.5);
   } 
 
   .s-mbs-70___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mbe-70___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mis-70___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mie-70___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
     .s-mi-70___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mb-70___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-m-80___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 10);
   } 
 
   .s-mbs-80___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mbe-80___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mis-80___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mie-80___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
     .s-mi-80___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mb-80___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-m-90___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 15);
   } 
 
   .s-mbs-90___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mbe-90___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mis-90___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mie-90___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
     .s-mi-90___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mb-90___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-m-100___tablet {
        margin: calc(var(--s-margin-default, 1rem) * 20);
   } 
 
   .s-mbs-100___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mbe-100___tablet {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mis-100___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mie-100___tablet {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
     .s-mi-100___tablet {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mb-100___tablet {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-m--default___tablet {
        margin: calc(1rem * -1);
   } 
 
   .s-mbs--default___tablet {
        margin-block-start: calc(1rem * -1) !important;
   } 
 
   .s-mbe--default___tablet {
        margin-block-end: calc(1rem * -1) !important;
   } 
 
   .s-mis--default___tablet {
        margin-inline-start: calc(1rem * -1) !important;
   } 
 
   .s-mie--default___tablet {
        margin-inline-end: calc(1rem * -1) !important;
   } 
 
     .s-mi--default___tablet {
        margin-inline-start: calc(1rem * -1) !important;
        margin-inline-end: calc(1rem * -1) !important;
   } 
 
   .s-mb--default___tablet {
        margin-block-start: calc(1rem * -1) !important;
        margin-block-end: calc(1rem * -1) !important;
   } 
 
   .s-m--0___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0) * -1);
   } 
 
   .s-mbs--0___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mbe--0___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mis--0___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mie--0___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
     .s-mi--0___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mb--0___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-m--10___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1);
   } 
 
   .s-mbs--10___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mbe--10___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mis--10___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mie--10___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
     .s-mi--10___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mb--10___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-m--20___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1);
   } 
 
   .s-mbs--20___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mbe--20___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mis--20___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mie--20___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
     .s-mi--20___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mb--20___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-m--30___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1);
   } 
 
   .s-mbs--30___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mbe--30___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mis--30___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mie--30___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
     .s-mi--30___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mb--30___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-m--40___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 2) * -1);
   } 
 
   .s-mbs--40___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mbe--40___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mis--40___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mie--40___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
     .s-mi--40___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mb--40___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-m--50___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1);
   } 
 
   .s-mbs--50___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mbe--50___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mis--50___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mie--50___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
     .s-mi--50___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mb--50___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-m--60___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 5) * -1);
   } 
 
   .s-mbs--60___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mbe--60___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mis--60___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mie--60___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
     .s-mi--60___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mb--60___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-m--70___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1);
   } 
 
   .s-mbs--70___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mbe--70___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mis--70___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mie--70___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
     .s-mi--70___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mb--70___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-m--80___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 10) * -1);
   } 
 
   .s-mbs--80___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mbe--80___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mis--80___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mie--80___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
     .s-mi--80___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mb--80___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-m--90___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 15) * -1);
   } 
 
   .s-mbs--90___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mbe--90___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mis--90___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mie--90___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
     .s-mi--90___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mb--90___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-m--100___tablet {
        margin: calc(calc(var(--s-margin-default, 1rem) * 20) * -1);
   } 
 
   .s-mbs--100___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mbe--100___tablet {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mis--100___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mie--100___tablet {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
     .s-mi--100___tablet {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mb--100___tablet {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-m-auto___tablet {
        margin: auto;
   } 
 
   .s-mbs-auto___tablet {
        margin-block-start: auto;
   } 
 
   .s-mie-auto___tablet {
        margin-inline-end: auto;
   } 
 
   .s-mbe-auto___tablet {
        margin-block-end: auto;
   } 
 
   .s-mis-auto___tablet {
        margin-inline-start: auto;
   } 
 
   .s-mi-auto___tablet {
        margin-inline-start: auto;
        margin-inline-end: auto;
   } 
 
   .s-mb-auto___tablet {
        margin-block-start: auto;
        margin-block-end: auto;
   }/**
        * @name          Padding
        * @namespace          sugar.style.helpers.padding
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/padding
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply padding to any HTMLElement
        * 
        * @feature          Support for RTL by using padding-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.padding.classes;
        * 
        
* @cssClass     s-p:0        Apply the `0` padding all around
* @cssClass     s-pb:0        Apply the `0` block start and end padding
* @cssClass     s-pbs:0        Apply the `0` block start padding
* @cssClass     s-pbe:0        Apply the `0` block end padding
* @cssClass     s-pi:0        Apply the `0` inline start and end padding
* @cssClass     s-pis:0        Apply the `0` inline start padding
* @cssClass     s-pie:0        Apply the `0` inline end padding
* @cssClass     s-pb:-0        Apply the `0` negative block start and end padding
* @cssClass     s-pbs:-0        Apply the `0` negative block start padding
* @cssClass     s-pbe:-0        Apply the `0` negative block end padding
* @cssClass     s-pi:-0        Apply the `0` negative inline start and end padding
* @cssClass     s-pis:-0        Apply the `0` negative inline start padding
* @cssClass     s-pie:-0        Apply the `0` negative inline end padding
* @cssClass     s-p:10        Apply the `10` padding all around
* @cssClass     s-pb:10        Apply the `10` block start and end padding
* @cssClass     s-pbs:10        Apply the `10` block start padding
* @cssClass     s-pbe:10        Apply the `10` block end padding
* @cssClass     s-pi:10        Apply the `10` inline start and end padding
* @cssClass     s-pis:10        Apply the `10` inline start padding
* @cssClass     s-pie:10        Apply the `10` inline end padding
* @cssClass     s-pb:-10        Apply the `10` negative block start and end padding
* @cssClass     s-pbs:-10        Apply the `10` negative block start padding
* @cssClass     s-pbe:-10        Apply the `10` negative block end padding
* @cssClass     s-pi:-10        Apply the `10` negative inline start and end padding
* @cssClass     s-pis:-10        Apply the `10` negative inline start padding
* @cssClass     s-pie:-10        Apply the `10` negative inline end padding
* @cssClass     s-p:20        Apply the `20` padding all around
* @cssClass     s-pb:20        Apply the `20` block start and end padding
* @cssClass     s-pbs:20        Apply the `20` block start padding
* @cssClass     s-pbe:20        Apply the `20` block end padding
* @cssClass     s-pi:20        Apply the `20` inline start and end padding
* @cssClass     s-pis:20        Apply the `20` inline start padding
* @cssClass     s-pie:20        Apply the `20` inline end padding
* @cssClass     s-pb:-20        Apply the `20` negative block start and end padding
* @cssClass     s-pbs:-20        Apply the `20` negative block start padding
* @cssClass     s-pbe:-20        Apply the `20` negative block end padding
* @cssClass     s-pi:-20        Apply the `20` negative inline start and end padding
* @cssClass     s-pis:-20        Apply the `20` negative inline start padding
* @cssClass     s-pie:-20        Apply the `20` negative inline end padding
* @cssClass     s-p:30        Apply the `30` padding all around
* @cssClass     s-pb:30        Apply the `30` block start and end padding
* @cssClass     s-pbs:30        Apply the `30` block start padding
* @cssClass     s-pbe:30        Apply the `30` block end padding
* @cssClass     s-pi:30        Apply the `30` inline start and end padding
* @cssClass     s-pis:30        Apply the `30` inline start padding
* @cssClass     s-pie:30        Apply the `30` inline end padding
* @cssClass     s-pb:-30        Apply the `30` negative block start and end padding
* @cssClass     s-pbs:-30        Apply the `30` negative block start padding
* @cssClass     s-pbe:-30        Apply the `30` negative block end padding
* @cssClass     s-pi:-30        Apply the `30` negative inline start and end padding
* @cssClass     s-pis:-30        Apply the `30` negative inline start padding
* @cssClass     s-pie:-30        Apply the `30` negative inline end padding
* @cssClass     s-p:40        Apply the `40` padding all around
* @cssClass     s-pb:40        Apply the `40` block start and end padding
* @cssClass     s-pbs:40        Apply the `40` block start padding
* @cssClass     s-pbe:40        Apply the `40` block end padding
* @cssClass     s-pi:40        Apply the `40` inline start and end padding
* @cssClass     s-pis:40        Apply the `40` inline start padding
* @cssClass     s-pie:40        Apply the `40` inline end padding
* @cssClass     s-pb:-40        Apply the `40` negative block start and end padding
* @cssClass     s-pbs:-40        Apply the `40` negative block start padding
* @cssClass     s-pbe:-40        Apply the `40` negative block end padding
* @cssClass     s-pi:-40        Apply the `40` negative inline start and end padding
* @cssClass     s-pis:-40        Apply the `40` negative inline start padding
* @cssClass     s-pie:-40        Apply the `40` negative inline end padding
* @cssClass     s-p:50        Apply the `50` padding all around
* @cssClass     s-pb:50        Apply the `50` block start and end padding
* @cssClass     s-pbs:50        Apply the `50` block start padding
* @cssClass     s-pbe:50        Apply the `50` block end padding
* @cssClass     s-pi:50        Apply the `50` inline start and end padding
* @cssClass     s-pis:50        Apply the `50` inline start padding
* @cssClass     s-pie:50        Apply the `50` inline end padding
* @cssClass     s-pb:-50        Apply the `50` negative block start and end padding
* @cssClass     s-pbs:-50        Apply the `50` negative block start padding
* @cssClass     s-pbe:-50        Apply the `50` negative block end padding
* @cssClass     s-pi:-50        Apply the `50` negative inline start and end padding
* @cssClass     s-pis:-50        Apply the `50` negative inline start padding
* @cssClass     s-pie:-50        Apply the `50` negative inline end padding
* @cssClass     s-p:60        Apply the `60` padding all around
* @cssClass     s-pb:60        Apply the `60` block start and end padding
* @cssClass     s-pbs:60        Apply the `60` block start padding
* @cssClass     s-pbe:60        Apply the `60` block end padding
* @cssClass     s-pi:60        Apply the `60` inline start and end padding
* @cssClass     s-pis:60        Apply the `60` inline start padding
* @cssClass     s-pie:60        Apply the `60` inline end padding
* @cssClass     s-pb:-60        Apply the `60` negative block start and end padding
* @cssClass     s-pbs:-60        Apply the `60` negative block start padding
* @cssClass     s-pbe:-60        Apply the `60` negative block end padding
* @cssClass     s-pi:-60        Apply the `60` negative inline start and end padding
* @cssClass     s-pis:-60        Apply the `60` negative inline start padding
* @cssClass     s-pie:-60        Apply the `60` negative inline end padding
* @cssClass     s-p:70        Apply the `70` padding all around
* @cssClass     s-pb:70        Apply the `70` block start and end padding
* @cssClass     s-pbs:70        Apply the `70` block start padding
* @cssClass     s-pbe:70        Apply the `70` block end padding
* @cssClass     s-pi:70        Apply the `70` inline start and end padding
* @cssClass     s-pis:70        Apply the `70` inline start padding
* @cssClass     s-pie:70        Apply the `70` inline end padding
* @cssClass     s-pb:-70        Apply the `70` negative block start and end padding
* @cssClass     s-pbs:-70        Apply the `70` negative block start padding
* @cssClass     s-pbe:-70        Apply the `70` negative block end padding
* @cssClass     s-pi:-70        Apply the `70` negative inline start and end padding
* @cssClass     s-pis:-70        Apply the `70` negative inline start padding
* @cssClass     s-pie:-70        Apply the `70` negative inline end padding
* @cssClass     s-p:80        Apply the `80` padding all around
* @cssClass     s-pb:80        Apply the `80` block start and end padding
* @cssClass     s-pbs:80        Apply the `80` block start padding
* @cssClass     s-pbe:80        Apply the `80` block end padding
* @cssClass     s-pi:80        Apply the `80` inline start and end padding
* @cssClass     s-pis:80        Apply the `80` inline start padding
* @cssClass     s-pie:80        Apply the `80` inline end padding
* @cssClass     s-pb:-80        Apply the `80` negative block start and end padding
* @cssClass     s-pbs:-80        Apply the `80` negative block start padding
* @cssClass     s-pbe:-80        Apply the `80` negative block end padding
* @cssClass     s-pi:-80        Apply the `80` negative inline start and end padding
* @cssClass     s-pis:-80        Apply the `80` negative inline start padding
* @cssClass     s-pie:-80        Apply the `80` negative inline end padding
* @cssClass     s-p:90        Apply the `90` padding all around
* @cssClass     s-pb:90        Apply the `90` block start and end padding
* @cssClass     s-pbs:90        Apply the `90` block start padding
* @cssClass     s-pbe:90        Apply the `90` block end padding
* @cssClass     s-pi:90        Apply the `90` inline start and end padding
* @cssClass     s-pis:90        Apply the `90` inline start padding
* @cssClass     s-pie:90        Apply the `90` inline end padding
* @cssClass     s-pb:-90        Apply the `90` negative block start and end padding
* @cssClass     s-pbs:-90        Apply the `90` negative block start padding
* @cssClass     s-pbe:-90        Apply the `90` negative block end padding
* @cssClass     s-pi:-90        Apply the `90` negative inline start and end padding
* @cssClass     s-pis:-90        Apply the `90` negative inline start padding
* @cssClass     s-pie:-90        Apply the `90` negative inline end padding
* @cssClass     s-p:100        Apply the `100` padding all around
* @cssClass     s-pb:100        Apply the `100` block start and end padding
* @cssClass     s-pbs:100        Apply the `100` block start padding
* @cssClass     s-pbe:100        Apply the `100` block end padding
* @cssClass     s-pi:100        Apply the `100` inline start and end padding
* @cssClass     s-pis:100        Apply the `100` inline start padding
* @cssClass     s-pie:100        Apply the `100` inline end padding
* @cssClass     s-pb:-100        Apply the `100` negative block start and end padding
* @cssClass     s-pbs:-100        Apply the `100` negative block start padding
* @cssClass     s-pbe:-100        Apply the `100` negative block end padding
* @cssClass     s-pi:-100        Apply the `100` negative inline start and end padding
* @cssClass     s-pis:-100        Apply the `100` negative inline start padding
* @cssClass     s-pie:-100        Apply the `100` negative inline end padding
        *
        * 
        * @example        html          Inline
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Paulette Koepp</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Thomas Crist</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Mark Ernser</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Jessica Rowe</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-pbs:30 s-pbe:40 s-text:center s-mbe:20">Virgil Ondricka Sr.</div>
        *   <div class="s-bg:complementary s-radius s-pb:30 s-text:center s-mbe:20">Louis Goldner</div>
        *   <div class="s-bg:main s-radius s-pbs:50 s-pbe:30 s-text:center s-mbe:20">Duane Graham II</div>
        *   <div class="s-bg:error s-radius s-pbs:100 s-pbe:60 s-text:center s-mbe:20">Emilio Hintz</div>
        * 
        * @example       html          RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Gwendolyn Orn</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Shawna Jones</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Gertrude Pacocha</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Leland Morar</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
     
 
   .s-p-default___tablet {
        padding: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
   } 
 
   .s-pbs-default___tablet {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pbe-default___tablet {
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pis-default___tablet {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pie-default___tablet {
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
     .s-pi-default___tablet {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pb-default___tablet {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-p-0___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0);
   } 
 
   .s-pbs-0___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pbe-0___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pis-0___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pie-0___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
     .s-pi-0___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pb-0___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-p-10___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
   } 
 
   .s-pbs-10___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pbe-10___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pis-10___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pie-10___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
     .s-pi-10___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pb-10___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-p-20___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
   } 
 
   .s-pbs-20___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pbe-20___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pis-20___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pie-20___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
     .s-pi-20___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pb-20___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-p-30___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
   } 
 
   .s-pbs-30___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pbe-30___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pis-30___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pie-30___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
     .s-pi-30___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pb-30___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-p-40___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2);
   } 
 
   .s-pbs-40___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pbe-40___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pis-40___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pie-40___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
     .s-pi-40___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pb-40___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-p-50___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
   } 
 
   .s-pbs-50___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pbe-50___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pis-50___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pie-50___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
     .s-pi-50___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pb-50___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-p-60___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5);
   } 
 
   .s-pbs-60___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pbe-60___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pis-60___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pie-60___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
     .s-pi-60___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pb-60___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-p-70___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5);
   } 
 
   .s-pbs-70___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pbe-70___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pis-70___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pie-70___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
     .s-pi-70___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pb-70___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-p-80___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10);
   } 
 
   .s-pbs-80___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pbe-80___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pis-80___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pie-80___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
     .s-pi-80___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pb-80___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-p-90___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15);
   } 
 
   .s-pbs-90___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pbe-90___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pis-90___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pie-90___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
     .s-pi-90___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pb-90___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-p-100___tablet {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20);
   } 
 
   .s-pbs-100___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pbe-100___tablet {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pis-100___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pie-100___tablet {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
     .s-pi-100___tablet {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pb-100___tablet {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
}
@media (max-width: 639px) {/**
        * @name          Margin
        * @namespace          sugar.style.helpers.margin
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/margin
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply margins to any HTMLElement
        * 
        * @feature          Support for RTL by using margin-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.margin.classes;
        * 
        
* @cssClass     s-m:0        Apply the `0` space all around
* @cssClass     s-mb:0        Apply the `0` block start and end space
* @cssClass     s-mbs:0        Apply the `0` block start space
* @cssClass     s-mbe:0        Apply the `0` block end space
* @cssClass     s-mi:0        Apply the `0` inline start and end space
* @cssClass     s-mis:0        Apply the `0` inline start space
* @cssClass     s-mie:0        Apply the `0` inline end space
* @cssClass     s-mb:-0        Apply the `0` negative block start and end space
* @cssClass     s-mbs:-0        Apply the `0` negative block start space
* @cssClass     s-mbe:-0        Apply the `0` negative block end space
* @cssClass     s-mi:-0        Apply the `0` negative inline start and end space
* @cssClass     s-mis:-0        Apply the `0` negative inline start space
* @cssClass     s-mie:-0        Apply the `0` negative inline end space
* @cssClass     s-m:10        Apply the `10` space all around
* @cssClass     s-mb:10        Apply the `10` block start and end space
* @cssClass     s-mbs:10        Apply the `10` block start space
* @cssClass     s-mbe:10        Apply the `10` block end space
* @cssClass     s-mi:10        Apply the `10` inline start and end space
* @cssClass     s-mis:10        Apply the `10` inline start space
* @cssClass     s-mie:10        Apply the `10` inline end space
* @cssClass     s-mb:-10        Apply the `10` negative block start and end space
* @cssClass     s-mbs:-10        Apply the `10` negative block start space
* @cssClass     s-mbe:-10        Apply the `10` negative block end space
* @cssClass     s-mi:-10        Apply the `10` negative inline start and end space
* @cssClass     s-mis:-10        Apply the `10` negative inline start space
* @cssClass     s-mie:-10        Apply the `10` negative inline end space
* @cssClass     s-m:20        Apply the `20` space all around
* @cssClass     s-mb:20        Apply the `20` block start and end space
* @cssClass     s-mbs:20        Apply the `20` block start space
* @cssClass     s-mbe:20        Apply the `20` block end space
* @cssClass     s-mi:20        Apply the `20` inline start and end space
* @cssClass     s-mis:20        Apply the `20` inline start space
* @cssClass     s-mie:20        Apply the `20` inline end space
* @cssClass     s-mb:-20        Apply the `20` negative block start and end space
* @cssClass     s-mbs:-20        Apply the `20` negative block start space
* @cssClass     s-mbe:-20        Apply the `20` negative block end space
* @cssClass     s-mi:-20        Apply the `20` negative inline start and end space
* @cssClass     s-mis:-20        Apply the `20` negative inline start space
* @cssClass     s-mie:-20        Apply the `20` negative inline end space
* @cssClass     s-m:30        Apply the `30` space all around
* @cssClass     s-mb:30        Apply the `30` block start and end space
* @cssClass     s-mbs:30        Apply the `30` block start space
* @cssClass     s-mbe:30        Apply the `30` block end space
* @cssClass     s-mi:30        Apply the `30` inline start and end space
* @cssClass     s-mis:30        Apply the `30` inline start space
* @cssClass     s-mie:30        Apply the `30` inline end space
* @cssClass     s-mb:-30        Apply the `30` negative block start and end space
* @cssClass     s-mbs:-30        Apply the `30` negative block start space
* @cssClass     s-mbe:-30        Apply the `30` negative block end space
* @cssClass     s-mi:-30        Apply the `30` negative inline start and end space
* @cssClass     s-mis:-30        Apply the `30` negative inline start space
* @cssClass     s-mie:-30        Apply the `30` negative inline end space
* @cssClass     s-m:40        Apply the `40` space all around
* @cssClass     s-mb:40        Apply the `40` block start and end space
* @cssClass     s-mbs:40        Apply the `40` block start space
* @cssClass     s-mbe:40        Apply the `40` block end space
* @cssClass     s-mi:40        Apply the `40` inline start and end space
* @cssClass     s-mis:40        Apply the `40` inline start space
* @cssClass     s-mie:40        Apply the `40` inline end space
* @cssClass     s-mb:-40        Apply the `40` negative block start and end space
* @cssClass     s-mbs:-40        Apply the `40` negative block start space
* @cssClass     s-mbe:-40        Apply the `40` negative block end space
* @cssClass     s-mi:-40        Apply the `40` negative inline start and end space
* @cssClass     s-mis:-40        Apply the `40` negative inline start space
* @cssClass     s-mie:-40        Apply the `40` negative inline end space
* @cssClass     s-m:50        Apply the `50` space all around
* @cssClass     s-mb:50        Apply the `50` block start and end space
* @cssClass     s-mbs:50        Apply the `50` block start space
* @cssClass     s-mbe:50        Apply the `50` block end space
* @cssClass     s-mi:50        Apply the `50` inline start and end space
* @cssClass     s-mis:50        Apply the `50` inline start space
* @cssClass     s-mie:50        Apply the `50` inline end space
* @cssClass     s-mb:-50        Apply the `50` negative block start and end space
* @cssClass     s-mbs:-50        Apply the `50` negative block start space
* @cssClass     s-mbe:-50        Apply the `50` negative block end space
* @cssClass     s-mi:-50        Apply the `50` negative inline start and end space
* @cssClass     s-mis:-50        Apply the `50` negative inline start space
* @cssClass     s-mie:-50        Apply the `50` negative inline end space
* @cssClass     s-m:60        Apply the `60` space all around
* @cssClass     s-mb:60        Apply the `60` block start and end space
* @cssClass     s-mbs:60        Apply the `60` block start space
* @cssClass     s-mbe:60        Apply the `60` block end space
* @cssClass     s-mi:60        Apply the `60` inline start and end space
* @cssClass     s-mis:60        Apply the `60` inline start space
* @cssClass     s-mie:60        Apply the `60` inline end space
* @cssClass     s-mb:-60        Apply the `60` negative block start and end space
* @cssClass     s-mbs:-60        Apply the `60` negative block start space
* @cssClass     s-mbe:-60        Apply the `60` negative block end space
* @cssClass     s-mi:-60        Apply the `60` negative inline start and end space
* @cssClass     s-mis:-60        Apply the `60` negative inline start space
* @cssClass     s-mie:-60        Apply the `60` negative inline end space
* @cssClass     s-m:70        Apply the `70` space all around
* @cssClass     s-mb:70        Apply the `70` block start and end space
* @cssClass     s-mbs:70        Apply the `70` block start space
* @cssClass     s-mbe:70        Apply the `70` block end space
* @cssClass     s-mi:70        Apply the `70` inline start and end space
* @cssClass     s-mis:70        Apply the `70` inline start space
* @cssClass     s-mie:70        Apply the `70` inline end space
* @cssClass     s-mb:-70        Apply the `70` negative block start and end space
* @cssClass     s-mbs:-70        Apply the `70` negative block start space
* @cssClass     s-mbe:-70        Apply the `70` negative block end space
* @cssClass     s-mi:-70        Apply the `70` negative inline start and end space
* @cssClass     s-mis:-70        Apply the `70` negative inline start space
* @cssClass     s-mie:-70        Apply the `70` negative inline end space
* @cssClass     s-m:80        Apply the `80` space all around
* @cssClass     s-mb:80        Apply the `80` block start and end space
* @cssClass     s-mbs:80        Apply the `80` block start space
* @cssClass     s-mbe:80        Apply the `80` block end space
* @cssClass     s-mi:80        Apply the `80` inline start and end space
* @cssClass     s-mis:80        Apply the `80` inline start space
* @cssClass     s-mie:80        Apply the `80` inline end space
* @cssClass     s-mb:-80        Apply the `80` negative block start and end space
* @cssClass     s-mbs:-80        Apply the `80` negative block start space
* @cssClass     s-mbe:-80        Apply the `80` negative block end space
* @cssClass     s-mi:-80        Apply the `80` negative inline start and end space
* @cssClass     s-mis:-80        Apply the `80` negative inline start space
* @cssClass     s-mie:-80        Apply the `80` negative inline end space
* @cssClass     s-m:90        Apply the `90` space all around
* @cssClass     s-mb:90        Apply the `90` block start and end space
* @cssClass     s-mbs:90        Apply the `90` block start space
* @cssClass     s-mbe:90        Apply the `90` block end space
* @cssClass     s-mi:90        Apply the `90` inline start and end space
* @cssClass     s-mis:90        Apply the `90` inline start space
* @cssClass     s-mie:90        Apply the `90` inline end space
* @cssClass     s-mb:-90        Apply the `90` negative block start and end space
* @cssClass     s-mbs:-90        Apply the `90` negative block start space
* @cssClass     s-mbe:-90        Apply the `90` negative block end space
* @cssClass     s-mi:-90        Apply the `90` negative inline start and end space
* @cssClass     s-mis:-90        Apply the `90` negative inline start space
* @cssClass     s-mie:-90        Apply the `90` negative inline end space
* @cssClass     s-m:100        Apply the `100` space all around
* @cssClass     s-mb:100        Apply the `100` block start and end space
* @cssClass     s-mbs:100        Apply the `100` block start space
* @cssClass     s-mbe:100        Apply the `100` block end space
* @cssClass     s-mi:100        Apply the `100` inline start and end space
* @cssClass     s-mis:100        Apply the `100` inline start space
* @cssClass     s-mie:100        Apply the `100` inline end space
* @cssClass     s-mb:-100        Apply the `100` negative block start and end space
* @cssClass     s-mbs:-100        Apply the `100` negative block start space
* @cssClass     s-mbe:-100        Apply the `100` negative block end space
* @cssClass     s-mi:-100        Apply the `100` negative inline start and end space
* @cssClass     s-mis:-100        Apply the `100` negative inline start space
* @cssClass     s-mie:-100        Apply the `100` negative inline end space
        * @cssClass                s-m:auto            Apply the `auto` space all around
        * @cssClass                s-mb:auto          Apply the `auto` block start and end space
        * @cssClass                s-mbs:auto          Apply the `auto` block start space
        * @cssClass                s-mbe:auto          Apply the `auto` block end space
        * @cssClass                s-mi:auto          Apply the `auto` inline start and end space
        * @cssClass                s-mis:auto          Apply the `auto` inline start space
        * @cssClass                s-mie:auto          Apply the `auto` inline end space
        *
        * 
        * @example        html               Inline
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Sherry Kessler</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">April Greenfelder</p>
        *   <p class="s-bg:main s-mie:100 s-radius s-mbe:20 s-p:30">Jerry McCullough</p>
        *   <p class="s-bg:error s-mie:30 s-radius s-p:30">Tracy Grant</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-mbe:40 s-p:30 s-text:center">Clara Halvorson</div>
        *   <div class="s-bg:complementary s-radius s-mbe:20 s-p:30 s-text:center">Tyrone Goldner</div>
        *   <div class="s-bg:main s-radius s-mbe:50 s-p:30 s-text:center">Ramona Schaefer Sr.</div>
        *   <div class="s-bg:error s-radius s-p:30 s-text:center">Dr. Santiago Dietrich</div>
        * 
        * @example            html                RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-p:30 s-mbe:20">Lynn Hills</p>
        *   <p class="s-bg:complementary s-radius s-mi:50 s-mbe:20 s-p:30">Inez Abshire</p>
        *   <p class="s-bg:main s-radius s-mie:100 s-mbe:20 s-p:30">Ms. Beatrice Considine</p>
        *   <p class="s-bg:error s-radius s-mie:30 s-p:30">Michelle O'Keefe</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
     
 
   .s-m-default___mobile {
        margin: 1rem;
   } 
 
   .s-mbs-default___mobile {
        margin-block-start: 1rem !important;
   } 
 
   .s-mbe-default___mobile {
        margin-block-end: 1rem !important;
   } 
 
   .s-mis-default___mobile {
        margin-inline-start: 1rem !important;
   } 
 
   .s-mie-default___mobile {
        margin-inline-end: 1rem !important;
   } 
 
     .s-mi-default___mobile {
        margin-inline-start: 1rem !important;
        margin-inline-end: 1rem !important;
   } 
 
   .s-mb-default___mobile {
        margin-block-start: 1rem !important;
        margin-block-end: 1rem !important;
   } 
 
   .s-m-0___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 0);
   } 
 
   .s-mbs-0___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mbe-0___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mis-0___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mie-0___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
     .s-mi-0___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-mb-0___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0) !important;
   } 
 
   .s-m-10___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 0.375);
   } 
 
   .s-mbs-10___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mbe-10___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mis-10___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mie-10___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
     .s-mi-10___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-mb-10___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.375) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.375) !important;
   } 
 
   .s-m-20___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 0.75);
   } 
 
   .s-mbs-20___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mbe-20___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mis-20___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mie-20___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
     .s-mi-20___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-mb-20___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 0.75) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 0.75) !important;
   } 
 
   .s-m-30___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 1.4);
   } 
 
   .s-mbs-30___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mbe-30___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mis-30___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mie-30___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
     .s-mi-30___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-mb-30___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 1.4) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4) !important;
   } 
 
   .s-m-40___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 2);
   } 
 
   .s-mbs-40___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mbe-40___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mis-40___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mie-40___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
     .s-mi-40___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-mb-40___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2) !important;
   } 
 
   .s-m-50___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 3.5);
   } 
 
   .s-mbs-50___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mbe-50___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mis-50___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mie-50___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
     .s-mi-50___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-mb-50___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5) !important;
   } 
 
   .s-m-60___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 5);
   } 
 
   .s-mbs-60___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mbe-60___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mis-60___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mie-60___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
     .s-mi-60___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-mb-60___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 5) !important;
   } 
 
   .s-m-70___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 7.5);
   } 
 
   .s-mbs-70___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mbe-70___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mis-70___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mie-70___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
     .s-mi-70___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-mb-70___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 7.5) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 7.5) !important;
   } 
 
   .s-m-80___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 10);
   } 
 
   .s-mbs-80___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mbe-80___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mis-80___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mie-80___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
     .s-mi-80___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-mb-80___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 10) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 10) !important;
   } 
 
   .s-m-90___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 15);
   } 
 
   .s-mbs-90___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mbe-90___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mis-90___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mie-90___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
     .s-mi-90___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-mb-90___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 15) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 15) !important;
   } 
 
   .s-m-100___mobile {
        margin: calc(var(--s-margin-default, 1rem) * 20);
   } 
 
   .s-mbs-100___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mbe-100___mobile {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mis-100___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mie-100___mobile {
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
     .s-mi-100___mobile {
        margin-inline-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-inline-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-mb-100___mobile {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 20) !important;
        margin-block-end: calc(var(--s-margin-default, 1rem) * 20) !important;
   } 
 
   .s-m--default___mobile {
        margin: calc(1rem * -1);
   } 
 
   .s-mbs--default___mobile {
        margin-block-start: calc(1rem * -1) !important;
   } 
 
   .s-mbe--default___mobile {
        margin-block-end: calc(1rem * -1) !important;
   } 
 
   .s-mis--default___mobile {
        margin-inline-start: calc(1rem * -1) !important;
   } 
 
   .s-mie--default___mobile {
        margin-inline-end: calc(1rem * -1) !important;
   } 
 
     .s-mi--default___mobile {
        margin-inline-start: calc(1rem * -1) !important;
        margin-inline-end: calc(1rem * -1) !important;
   } 
 
   .s-mb--default___mobile {
        margin-block-start: calc(1rem * -1) !important;
        margin-block-end: calc(1rem * -1) !important;
   } 
 
   .s-m--0___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0) * -1);
   } 
 
   .s-mbs--0___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mbe--0___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mis--0___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mie--0___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
     .s-mi--0___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-mb--0___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0) * -1) !important;
   } 
 
   .s-m--10___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1);
   } 
 
   .s-mbs--10___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mbe--10___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mis--10___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mie--10___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
     .s-mi--10___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-mb--10___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.375) * -1) !important;
   } 
 
   .s-m--20___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1);
   } 
 
   .s-mbs--20___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mbe--20___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mis--20___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mie--20___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
     .s-mi--20___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-mb--20___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 0.75) * -1) !important;
   } 
 
   .s-m--30___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1);
   } 
 
   .s-mbs--30___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mbe--30___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mis--30___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mie--30___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
     .s-mi--30___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-mb--30___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 1.4) * -1) !important;
   } 
 
   .s-m--40___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 2) * -1);
   } 
 
   .s-mbs--40___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mbe--40___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mis--40___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mie--40___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
     .s-mi--40___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-mb--40___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 2) * -1) !important;
   } 
 
   .s-m--50___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1);
   } 
 
   .s-mbs--50___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mbe--50___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mis--50___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mie--50___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
     .s-mi--50___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-mb--50___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 3.5) * -1) !important;
   } 
 
   .s-m--60___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 5) * -1);
   } 
 
   .s-mbs--60___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mbe--60___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mis--60___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mie--60___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
     .s-mi--60___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-mb--60___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 5) * -1) !important;
   } 
 
   .s-m--70___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1);
   } 
 
   .s-mbs--70___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mbe--70___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mis--70___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mie--70___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
     .s-mi--70___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-mb--70___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 7.5) * -1) !important;
   } 
 
   .s-m--80___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 10) * -1);
   } 
 
   .s-mbs--80___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mbe--80___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mis--80___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mie--80___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
     .s-mi--80___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-mb--80___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 10) * -1) !important;
   } 
 
   .s-m--90___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 15) * -1);
   } 
 
   .s-mbs--90___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mbe--90___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mis--90___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mie--90___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
     .s-mi--90___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-mb--90___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 15) * -1) !important;
   } 
 
   .s-m--100___mobile {
        margin: calc(calc(var(--s-margin-default, 1rem) * 20) * -1);
   } 
 
   .s-mbs--100___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mbe--100___mobile {
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mis--100___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mie--100___mobile {
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
     .s-mi--100___mobile {
        margin-inline-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-inline-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-mb--100___mobile {
        margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
        margin-block-end: calc(calc(var(--s-margin-default, 1rem) * 20) * -1) !important;
   } 
 
   .s-m-auto___mobile {
        margin: auto;
   } 
 
   .s-mbs-auto___mobile {
        margin-block-start: auto;
   } 
 
   .s-mie-auto___mobile {
        margin-inline-end: auto;
   } 
 
   .s-mbe-auto___mobile {
        margin-block-end: auto;
   } 
 
   .s-mis-auto___mobile {
        margin-inline-start: auto;
   } 
 
   .s-mi-auto___mobile {
        margin-inline-start: auto;
        margin-inline-end: auto;
   } 
 
   .s-mb-auto___mobile {
        margin-block-start: auto;
        margin-block-end: auto;
   }/**
        * @name          Padding
        * @namespace          sugar.style.helpers.padding
        * @type               Styleguide
        * @menu           Styleguide / Helpers        /styleguide/helpers/padding
        * @platform       css
        * @status       beta
        * 
        * These classes allows you to apply padding to any HTMLElement
        * 
        * @feature          Support for RTL by using padding-{inline|block}-...
        * 
        * @support          chromium
        * @support          firefox
        * @support          safari
        * @support          edge
        * 
        * @install          css
        * \@sugar.padding.classes;
        * 
        
* @cssClass     s-p:0        Apply the `0` padding all around
* @cssClass     s-pb:0        Apply the `0` block start and end padding
* @cssClass     s-pbs:0        Apply the `0` block start padding
* @cssClass     s-pbe:0        Apply the `0` block end padding
* @cssClass     s-pi:0        Apply the `0` inline start and end padding
* @cssClass     s-pis:0        Apply the `0` inline start padding
* @cssClass     s-pie:0        Apply the `0` inline end padding
* @cssClass     s-pb:-0        Apply the `0` negative block start and end padding
* @cssClass     s-pbs:-0        Apply the `0` negative block start padding
* @cssClass     s-pbe:-0        Apply the `0` negative block end padding
* @cssClass     s-pi:-0        Apply the `0` negative inline start and end padding
* @cssClass     s-pis:-0        Apply the `0` negative inline start padding
* @cssClass     s-pie:-0        Apply the `0` negative inline end padding
* @cssClass     s-p:10        Apply the `10` padding all around
* @cssClass     s-pb:10        Apply the `10` block start and end padding
* @cssClass     s-pbs:10        Apply the `10` block start padding
* @cssClass     s-pbe:10        Apply the `10` block end padding
* @cssClass     s-pi:10        Apply the `10` inline start and end padding
* @cssClass     s-pis:10        Apply the `10` inline start padding
* @cssClass     s-pie:10        Apply the `10` inline end padding
* @cssClass     s-pb:-10        Apply the `10` negative block start and end padding
* @cssClass     s-pbs:-10        Apply the `10` negative block start padding
* @cssClass     s-pbe:-10        Apply the `10` negative block end padding
* @cssClass     s-pi:-10        Apply the `10` negative inline start and end padding
* @cssClass     s-pis:-10        Apply the `10` negative inline start padding
* @cssClass     s-pie:-10        Apply the `10` negative inline end padding
* @cssClass     s-p:20        Apply the `20` padding all around
* @cssClass     s-pb:20        Apply the `20` block start and end padding
* @cssClass     s-pbs:20        Apply the `20` block start padding
* @cssClass     s-pbe:20        Apply the `20` block end padding
* @cssClass     s-pi:20        Apply the `20` inline start and end padding
* @cssClass     s-pis:20        Apply the `20` inline start padding
* @cssClass     s-pie:20        Apply the `20` inline end padding
* @cssClass     s-pb:-20        Apply the `20` negative block start and end padding
* @cssClass     s-pbs:-20        Apply the `20` negative block start padding
* @cssClass     s-pbe:-20        Apply the `20` negative block end padding
* @cssClass     s-pi:-20        Apply the `20` negative inline start and end padding
* @cssClass     s-pis:-20        Apply the `20` negative inline start padding
* @cssClass     s-pie:-20        Apply the `20` negative inline end padding
* @cssClass     s-p:30        Apply the `30` padding all around
* @cssClass     s-pb:30        Apply the `30` block start and end padding
* @cssClass     s-pbs:30        Apply the `30` block start padding
* @cssClass     s-pbe:30        Apply the `30` block end padding
* @cssClass     s-pi:30        Apply the `30` inline start and end padding
* @cssClass     s-pis:30        Apply the `30` inline start padding
* @cssClass     s-pie:30        Apply the `30` inline end padding
* @cssClass     s-pb:-30        Apply the `30` negative block start and end padding
* @cssClass     s-pbs:-30        Apply the `30` negative block start padding
* @cssClass     s-pbe:-30        Apply the `30` negative block end padding
* @cssClass     s-pi:-30        Apply the `30` negative inline start and end padding
* @cssClass     s-pis:-30        Apply the `30` negative inline start padding
* @cssClass     s-pie:-30        Apply the `30` negative inline end padding
* @cssClass     s-p:40        Apply the `40` padding all around
* @cssClass     s-pb:40        Apply the `40` block start and end padding
* @cssClass     s-pbs:40        Apply the `40` block start padding
* @cssClass     s-pbe:40        Apply the `40` block end padding
* @cssClass     s-pi:40        Apply the `40` inline start and end padding
* @cssClass     s-pis:40        Apply the `40` inline start padding
* @cssClass     s-pie:40        Apply the `40` inline end padding
* @cssClass     s-pb:-40        Apply the `40` negative block start and end padding
* @cssClass     s-pbs:-40        Apply the `40` negative block start padding
* @cssClass     s-pbe:-40        Apply the `40` negative block end padding
* @cssClass     s-pi:-40        Apply the `40` negative inline start and end padding
* @cssClass     s-pis:-40        Apply the `40` negative inline start padding
* @cssClass     s-pie:-40        Apply the `40` negative inline end padding
* @cssClass     s-p:50        Apply the `50` padding all around
* @cssClass     s-pb:50        Apply the `50` block start and end padding
* @cssClass     s-pbs:50        Apply the `50` block start padding
* @cssClass     s-pbe:50        Apply the `50` block end padding
* @cssClass     s-pi:50        Apply the `50` inline start and end padding
* @cssClass     s-pis:50        Apply the `50` inline start padding
* @cssClass     s-pie:50        Apply the `50` inline end padding
* @cssClass     s-pb:-50        Apply the `50` negative block start and end padding
* @cssClass     s-pbs:-50        Apply the `50` negative block start padding
* @cssClass     s-pbe:-50        Apply the `50` negative block end padding
* @cssClass     s-pi:-50        Apply the `50` negative inline start and end padding
* @cssClass     s-pis:-50        Apply the `50` negative inline start padding
* @cssClass     s-pie:-50        Apply the `50` negative inline end padding
* @cssClass     s-p:60        Apply the `60` padding all around
* @cssClass     s-pb:60        Apply the `60` block start and end padding
* @cssClass     s-pbs:60        Apply the `60` block start padding
* @cssClass     s-pbe:60        Apply the `60` block end padding
* @cssClass     s-pi:60        Apply the `60` inline start and end padding
* @cssClass     s-pis:60        Apply the `60` inline start padding
* @cssClass     s-pie:60        Apply the `60` inline end padding
* @cssClass     s-pb:-60        Apply the `60` negative block start and end padding
* @cssClass     s-pbs:-60        Apply the `60` negative block start padding
* @cssClass     s-pbe:-60        Apply the `60` negative block end padding
* @cssClass     s-pi:-60        Apply the `60` negative inline start and end padding
* @cssClass     s-pis:-60        Apply the `60` negative inline start padding
* @cssClass     s-pie:-60        Apply the `60` negative inline end padding
* @cssClass     s-p:70        Apply the `70` padding all around
* @cssClass     s-pb:70        Apply the `70` block start and end padding
* @cssClass     s-pbs:70        Apply the `70` block start padding
* @cssClass     s-pbe:70        Apply the `70` block end padding
* @cssClass     s-pi:70        Apply the `70` inline start and end padding
* @cssClass     s-pis:70        Apply the `70` inline start padding
* @cssClass     s-pie:70        Apply the `70` inline end padding
* @cssClass     s-pb:-70        Apply the `70` negative block start and end padding
* @cssClass     s-pbs:-70        Apply the `70` negative block start padding
* @cssClass     s-pbe:-70        Apply the `70` negative block end padding
* @cssClass     s-pi:-70        Apply the `70` negative inline start and end padding
* @cssClass     s-pis:-70        Apply the `70` negative inline start padding
* @cssClass     s-pie:-70        Apply the `70` negative inline end padding
* @cssClass     s-p:80        Apply the `80` padding all around
* @cssClass     s-pb:80        Apply the `80` block start and end padding
* @cssClass     s-pbs:80        Apply the `80` block start padding
* @cssClass     s-pbe:80        Apply the `80` block end padding
* @cssClass     s-pi:80        Apply the `80` inline start and end padding
* @cssClass     s-pis:80        Apply the `80` inline start padding
* @cssClass     s-pie:80        Apply the `80` inline end padding
* @cssClass     s-pb:-80        Apply the `80` negative block start and end padding
* @cssClass     s-pbs:-80        Apply the `80` negative block start padding
* @cssClass     s-pbe:-80        Apply the `80` negative block end padding
* @cssClass     s-pi:-80        Apply the `80` negative inline start and end padding
* @cssClass     s-pis:-80        Apply the `80` negative inline start padding
* @cssClass     s-pie:-80        Apply the `80` negative inline end padding
* @cssClass     s-p:90        Apply the `90` padding all around
* @cssClass     s-pb:90        Apply the `90` block start and end padding
* @cssClass     s-pbs:90        Apply the `90` block start padding
* @cssClass     s-pbe:90        Apply the `90` block end padding
* @cssClass     s-pi:90        Apply the `90` inline start and end padding
* @cssClass     s-pis:90        Apply the `90` inline start padding
* @cssClass     s-pie:90        Apply the `90` inline end padding
* @cssClass     s-pb:-90        Apply the `90` negative block start and end padding
* @cssClass     s-pbs:-90        Apply the `90` negative block start padding
* @cssClass     s-pbe:-90        Apply the `90` negative block end padding
* @cssClass     s-pi:-90        Apply the `90` negative inline start and end padding
* @cssClass     s-pis:-90        Apply the `90` negative inline start padding
* @cssClass     s-pie:-90        Apply the `90` negative inline end padding
* @cssClass     s-p:100        Apply the `100` padding all around
* @cssClass     s-pb:100        Apply the `100` block start and end padding
* @cssClass     s-pbs:100        Apply the `100` block start padding
* @cssClass     s-pbe:100        Apply the `100` block end padding
* @cssClass     s-pi:100        Apply the `100` inline start and end padding
* @cssClass     s-pis:100        Apply the `100` inline start padding
* @cssClass     s-pie:100        Apply the `100` inline end padding
* @cssClass     s-pb:-100        Apply the `100` negative block start and end padding
* @cssClass     s-pbs:-100        Apply the `100` negative block start padding
* @cssClass     s-pbe:-100        Apply the `100` negative block end padding
* @cssClass     s-pi:-100        Apply the `100` negative inline start and end padding
* @cssClass     s-pis:-100        Apply the `100` negative inline start padding
* @cssClass     s-pie:-100        Apply the `100` negative inline end padding
        *
        * 
        * @example        html          Inline
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Lamar Cartwright Jr.</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Nathaniel Kautzer</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Brad Olson</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Billy Jenkins</p>
        * 
        * @example            html                Block
        *   <div class="s-bg:accent s-radius s-pbs:30 s-pbe:40 s-text:center s-mbe:20">Max Witting</div>
        *   <div class="s-bg:complementary s-radius s-pb:30 s-text:center s-mbe:20">Lyle Jones</div>
        *   <div class="s-bg:main s-radius s-pbs:50 s-pbe:30 s-text:center s-mbe:20">Henrietta Bradtke</div>
        *   <div class="s-bg:error s-radius s-pbs:100 s-pbe:60 s-text:center s-mbe:20">Randy Parisian</div>
        * 
        * @example       html          RTL
        * <div dir="rtl">
        *   <p class="s-bg:accent s-radius s-pi:30 s-pb:30 s-mbe:20">Enrique Jenkins</p>
        *   <p class="s-bg:complementary s-radius s-pis:50 s-pb:30 s-mbe:20">Henrietta Muller</p>
        *   <p class="s-bg:main s-radius s-pis:80 s-pb:30 s-mbe:20">Sammy VonRueden</p>
        *   <p class="s-bg:error s-radius s-pis:100 s-pb:30 s-mbe:20">Melvin Heller</p>
        * </div>
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
     
 
   .s-p-default___mobile {
        padding: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1));
   } 
 
   .s-pbs-default___mobile {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pbe-default___mobile {
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pis-default___mobile {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pie-default___mobile {
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
     .s-pi-default___mobile {
        padding-inline-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-inline-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-pb-default___mobile {
        padding-block-start: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
        padding-block-end: calc(1rem * var(--s-scale, 1) * var(--s-scale-global, 1)) !important;
   } 
 
   .s-p-0___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0);
   } 
 
   .s-pbs-0___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pbe-0___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pis-0___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pie-0___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
     .s-pi-0___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-pb-0___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0) !important;
   } 
 
   .s-p-10___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375);
   } 
 
   .s-pbs-10___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pbe-10___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pis-10___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pie-10___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
     .s-pi-10___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-pb-10___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.375) !important;
   } 
 
   .s-p-20___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
   } 
 
   .s-pbs-20___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pbe-20___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pis-20___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pie-20___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
     .s-pi-20___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-pb-20___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) !important;
   } 
 
   .s-p-30___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
   } 
 
   .s-pbs-30___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pbe-30___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pis-30___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pie-30___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
     .s-pi-30___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-pb-30___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) !important;
   } 
 
   .s-p-40___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2);
   } 
 
   .s-pbs-40___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pbe-40___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pis-40___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pie-40___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
     .s-pi-40___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-pb-40___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 2) !important;
   } 
 
   .s-p-50___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
   } 
 
   .s-pbs-50___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pbe-50___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pis-50___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pie-50___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
     .s-pi-50___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-pb-50___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5) !important;
   } 
 
   .s-p-60___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5);
   } 
 
   .s-pbs-60___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pbe-60___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pis-60___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pie-60___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
     .s-pi-60___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-pb-60___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 5) !important;
   } 
 
   .s-p-70___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5);
   } 
 
   .s-pbs-70___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pbe-70___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pis-70___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pie-70___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
     .s-pi-70___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-pb-70___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 7.5) !important;
   } 
 
   .s-p-80___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10);
   } 
 
   .s-pbs-80___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pbe-80___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pis-80___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pie-80___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
     .s-pi-80___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-pb-80___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) !important;
   } 
 
   .s-p-90___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15);
   } 
 
   .s-pbs-90___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pbe-90___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pis-90___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pie-90___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
     .s-pi-90___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-pb-90___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15) !important;
   } 
 
   .s-p-100___mobile {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20);
   } 
 
   .s-pbs-100___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pbe-100___mobile {
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pis-100___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pie-100___mobile {
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
     .s-pi-100___mobile {
        padding-inline-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-inline-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   } 
 
   .s-pb-100___mobile {
        padding-block-start: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
        padding-block-end: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20) !important;
   }
}
/* @sugar.ui.menu.classes(); */
.s-wireframe .s-slider {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-slider, .s-wireframe .s-slider[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-slider > .s-slider_root > .s-slider_slides-wrapper:after {
                content: '';
                display: block;
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                pointer-events: none;border: 1px solid rgba(0,0,0,0.1);
            }
[theme$="dark"] .s-wireframe .s-slider > .s-slider_root > .s-slider_slides-wrapper:after, .s-wireframe .s-slider > .s-slider_root > .s-slider_slides-wrapper:after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-slider > .s-slider_root > .s-slider_ui > .s-slider_nav > * {
                            background: rgba(0,0,0,.3);
                        }
.s-wireframe .s-slider > .s-slider_root > .s-slider_ui > .s-slider_progress:before {
                    background: rgba(0,0,0,.05);
                }
.s-wireframe .s-slider > .s-slider_root > .s-slider_ui > .s-slider_progress > .s-slider_progress-bar {
                    background: rgba(0,0,0,.1);
                }
.s-wireframe .s-slider > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:before,
                .s-wireframe .s-slider > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:after,
                .s-wireframe .s-slider > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:before,
                .s-wireframe .s-slider > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:after {
                    background: rgba(0,0,0,.3);
                }
.s-wireframe .s-slider .s-media-container:after {
                display: none;
            }
.s-slider[lnf*="default"]:not(.s-bare) {--s-slider-space: calc(calc(var(--s-margin-default, 1rem) * 1.4) + 1em);
            }
.s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_slides-wrapper {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                }
.s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_nav > * {
                            background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
                            transition: var(--s-ui-default-transition, 0);
                        }
.s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_progress {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            }
.s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_progress:before {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                    background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),0.3);
                }
.s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_progress > .s-slider_progress-bar {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
                    background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
                    transition: var(--s-ui-default-transition, 0);
                }
.s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next,
                .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous {
                    transition: var(--s-ui-default-transition, 0);
                }
.s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:before,
                .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:after,
                .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:before,
                .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:after {
                    background: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-ui-foreground-spin ,0)),calc((var(--s-color-current-s, 0) + var(--s-color-current-ui-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-current-l, 0) + var(--s-color-current-ui-foreground-lightness-offset, 0)) * 1%),var(--s-color-current-ui-foreground-a, 1));
                }
.s-wireframe .s-slider[lnf*="default"]:not(.s-bare) {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-slider[lnf*="default"]:not(.s-bare), .s-wireframe .s-slider[lnf*="default"]:not(.s-bare)[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_slides-wrapper:after {
                content: '';
                display: block;
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                pointer-events: none;border: 1px solid rgba(0,0,0,0.1);
            }
[theme$="dark"] .s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_slides-wrapper:after, .s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_slides-wrapper:after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_nav > * {
                            background: rgba(0,0,0,.3);
                        }
.s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_progress:before {
                    background: rgba(0,0,0,.05);
                }
.s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_progress > .s-slider_progress-bar {
                    background: rgba(0,0,0,.1);
                }
.s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:before,
                .s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:after,
                .s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:before,
                .s-wireframe .s-slider[lnf*="default"]:not(.s-bare) > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:after {
                    background: rgba(0,0,0,.3);
                }
.s-wireframe .s-slider[lnf*="default"]:not(.s-bare) .s-media-container:after {
                display: none;
            }
.s-wireframe .s-slider[behavior*="default"] {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-slider[behavior*="default"], .s-wireframe .s-slider[behavior*="default"][theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_slides-wrapper:after {
                content: '';
                display: block;
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                pointer-events: none;border: 1px solid rgba(0,0,0,0.1);
            }
[theme$="dark"] .s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_slides-wrapper:after, .s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_slides-wrapper:after[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_ui > .s-slider_nav > * {
                            background: rgba(0,0,0,.3);
                        }
.s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_ui > .s-slider_progress:before {
                    background: rgba(0,0,0,.05);
                }
.s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_ui > .s-slider_progress > .s-slider_progress-bar {
                    background: rgba(0,0,0,.1);
                }
.s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:before,
                .s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-next-arrow:after,
                .s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:before,
                .s-wireframe .s-slider[behavior*="default"] > .s-slider_root > .s-slider_ui > .s-slider_controls .s-slider_controls-previous-arrow:after {
                    background: rgba(0,0,0,.3);
                }
.s-wireframe .s-slider[behavior*="default"] .s-media-container:after {
                display: none;
            }
.s-rhythm-vertical > .s-slider {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 5);
                }
.s-google-map {min-width: 20px;
            min-height: 20px;
            position: relative;
        }
.s-google-map[lnf="default"]:not(.s-bare) {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);box-shadow: var(--s-depth-0, 0);
            }
.s-google-map[lnf="default"]:not(.s-bare) div[style*='bottom: 0px;'] * {
                    color: white !important;
                    text-shadow: none !important;
                    background: none !important;
                    opacity: 0.7 !important;
                }
.s-rhythm-vertical > .s-google-map {
                    margin-bottom: calc(var(--s-margin-default, 1rem) * 5);
                }
.s-google-map-marker {position: relative;
        }
.s-google-map-marker .s-google-map-marker_icon {
                font-size: 50px;
                transform-origin: 50% 100%;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
.s-google-map-marker:hover .s-google-map-marker_icon:has(+ .s-google-map-marker_content),
            .s-google-map-marker:hover .s-google-map-marker_content + .s-google-map-marker_icon {
                font-size: 20px;
            }
.s-google-map-marker .s-google-map-marker_content {
                position: absolute;
                bottom: 30px;
                left: 50%;
                opacity: 0;
                pointer-events: none;
                transform: translateX(-50%) translateY(-20px);
            }
.s-google-map-marker:hover .s-google-map-marker_content {
                opacity: 1;
                pointer-events: all;
                transform: translateX(-50%) translateY(0);
            }
.s-google-map[lnf="default"]:not(.s-bare) .s-google-map-marker:not(.s-bare) .s-google-map-marker_content {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
            }
.s-google-map[lnf="default"]:not(.s-bare) .s-google-map-marker:not(.s-bare) .s-google-map-marker_icon {
                color: hsla(calc(var(--s-color-current-h, 0) + var(--s-color-current-spin ,0)),calc((var(--s-color-current-s, 0)) * 1%),calc((var(--s-color-current-l, 0)) * 1%),var(--s-color-current-a, 1));transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
            }
/**
 * Define some icons to be used with classes like "s-icon:github", etc...
 * Can be fontawesome icons using the "fa", "fab", "fas" and "far" protocol
 * Or can be some filesystem svg using the "fs" protocol (accept glob)
 * With glob: fs:src/icons/*
 * Without glob: fs:src/icon/my-cool-icon.svg:my-icon
 */
/**
        * @name          Icon
        * @namespace          sugar.style.helpers.icon
        * @type               Styleguide
        * @menu           Styleguide / UI        /styleguide/ui/icons
        * @platform       css
        * @status       beta
        * 
        * These classes represent all the icons that you have listed in your project using the @sugar.icon.classes mixin.
        * By using this mixin, your icons will be accessible using the same s-icon:{name} classes
        * independently of the icon source that can be **Fontawesome** or your **Filesystem**.
        * These providers are the one that we support for now but others can be added if needed.
        * 
        * @feature      Allows you to use multiples sources and **keep the same usage classes**
        * @feature      Support for **Fontawesome** provider out of the box
        * @feature      Support for **local filesystem** icons
        * 
        * @support      chromium        
        * @support      firefox         
        * @support      safari          
        * @support      edge           
        * 
         * @cssClass      s-icon:github      Display the github icon
 * @cssClass      s-icon:discord      Display the discord icon
 * @cssClass      s-icon:twitter      Display the twitter icon
 * @cssClass      s-icon:facebook      Display the facebook icon
 * @cssClass      s-icon:patreon      Display the patreon icon
 * @cssClass      s-icon:instagram      Display the instagram icon
 * @cssClass      s-icon:drop-file      Display the drop-file icon
 * @cssClass      s-icon:help      Display the help icon
 * @cssClass      s-icon:help      Display the help icon
        * 
        * @example        html          Used icons in this website
        *   <div class="s-grid:5 @mobile s-grid:2">
         *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:github s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">github</p>
        *     <p class="s-typo:p:bold">Source: fab</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:discord s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">discord</p>
        *     <p class="s-typo:p:bold">Source: fab</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:twitter s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">twitter</p>
        *     <p class="s-typo:p:bold">Source: fab</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:facebook s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">facebook</p>
        *     <p class="s-typo:p:bold">Source: fab</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:patreon s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">patreon</p>
        *     <p class="s-typo:p:bold">Source: fab</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:instagram s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">instagram</p>
        *     <p class="s-typo:p:bold">Source: fab</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:drop-file s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">drop-file</p>
        *     <p class="s-typo:p:bold">Source: sugar</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:help s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">help</p>
        *     <p class="s-typo:p:bold">Source: sugar</p>
        *   </div>
 *
        *   <div class="s-p:30 s-text:center s-ratio:1" style="padding-block-start: 30%">
        *     <i class="s-icon:help s-font:70"></i><br/>
        *     <p class="s-typo:p s-mbs:20">help</p>
        *     <p class="s-typo:p:bold">Source: sugar</p>
        *   </div>
        *   </div>
        * 
        * @example      css
        * @sugar.icon.classes("
         *    
 *    
 *    
 *    
 *    
 *    
 *    
 *    
 *    
        * ");
        * 
        * @since      2.0.0
        * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
        */
.s-icon-github:before {
            content: "\f09b";
        }
.s-icon-discord:before {
            content: "\f392";
        }
.s-icon-twitter:before {
            content: "\f099";
        }
.s-icon-facebook:before {
            content: "\f09a";
        }
.s-icon-patreon:before {
            content: "\f3d9";
        }
.s-icon-instagram:before {
            content: "\f16d";
        }
.s-icon-drop-file {
                            }
.s-icon-help {
                            }
.s-icon-help {
                            }
.footer {
    padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10);
        background-color: rgba(0, 0, 0, 0.01);
        background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));
}
.footer .logo {
        width: 150px;
    }
.footer .s-layout > *:nth-child(3) {
                    grid-column-start: 3;
                    grid-column-end: 5;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.footer .s-layout > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.footer .s-layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.footer .s-layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
        gap: calc(var(--s-margin-default, 1rem) * 3.5);
}
@media (max-width: 639px) {
            .footer .s-layout > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 3;
                    grid-row-end: 4;
            }
            .footer .s-layout > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
            }
            .footer .s-layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
            }
            .footer .s-layout {
            padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
            }
}
.footer .s-menu--level-0 > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.footer .s-menu--level-0 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.footer .s-menu--level-0 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
}
@media (max-width: 639px) {
        .footer .s-menu--level-0 > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
            }
        .footer .s-menu--level-0 > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
            }
        .footer .s-menu--level-0 {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
            }
}
.footer .s-menu_link--level-0 {
        display: block;
        font-weight: bold;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        margin-block-end: calc(var(--s-margin-default, 1rem) * 3.5);
    }
@media (max-width: 639px) {
.footer .s-menu_item.s-menu_item--level-0:not(:first-child) {
            margin-block-start: calc(var(--s-margin-default, 1rem) * 3.5)
    }
}
.footer .s-menu_link--level-1 {
        display: block;
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-40, 1.35) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        margin-block-end: calc(var(--s-margin-default, 1rem) * 1.4);
    }
.footer .s-menu_link--level-1:hover {
            color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
        }
.footer .s-menu_link--level-1:before {
            content: '-';
            color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
            font-weight: bold;
            margin-inline-end: calc(var(--s-margin-default, 1rem) * 0.375);
        }
.section-sandbox {
    position: relative;
}
@media (max-width: 639px) {
.section-sandbox {
        padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
}
}
.section-sandbox ._type {
        width: var(--s-container-max-width, var(--s-layout-container-default, 100%));
        margin-block: calc(var(--s-margin-default, 1rem) * 3.5);
    }
.section-sandbox ._title {display: block;font-family: var(--s-font-family-title-font-family, "Roboto"); 
 font-weight: var(--s-font-family-title-font-weight, 500);font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-80, 4.5) * var(--s-scale, 1) * var(--s-scale-global, 1)));
line-height: 1.3;
max-width: 55ch;
    }
@media (max-width: 639px) {
.section-sandbox ._title {font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-70, 3.2) * var(--s-scale, 1) * var(--s-scale-global, 1)));
    }
}
.section-sandbox ._value {
        background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1));
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
    }
.section-sandbox ._video,
    .section-sandbox ._img {
        width: 450px;
        aspect-ratio: 16/9;
        -o-object-fit: cover;
           object-fit: cover;
    }
.section-slider {
    position: relative;
    z-index: 10;
        margin-block: -20px;
}
@media (max-width: 639px) {
.section-slider {
        padding-block: 0;
        margin-block-end: 100px;
        transform: scale(1.05)
}
}
.section-tabs {
    position: relative;
    z-index: 10;
    perspective: 800px;
        /* margin-block-start: -30px; */
}
.nude .section-tabs {
        margin-block-start: 0;
    }
.section-tabs ._layout > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.section-tabs ._layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.section-tabs ._layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
}
@media (max-width: 639px) {
        .section-tabs ._layout > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
            }
        .section-tabs ._layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
            }
        .section-tabs ._layout {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
            }
}
.section-tabs ._tabs {
        background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1));
        position: relative;
        z-index: 10;
            transform: rotateX(-5deg) rotateY(15deg) translateX(0%)
                translateY(0)
    }
.section-tabs ._tabs-item {
        display: block;
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4) calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
        background: linear-gradient(
            90deg,
            hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1)),
            hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1))
        );
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        transform: scale(1);
        position: relative;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
    }
.section-tabs ._tabs-item:not(:last-child) {
            border-bottom: 1px solid hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),0.1);
        }
.section-tabs ._tabs-item:hover {
            background: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),0.6);
            color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-foreground-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-foreground-lightness-offset, 0)) * 1%),var(--s-color-accent-foreground-a, 1));
        }
.section-tabs ._tabs-item.active {
            background: linear-gradient(
                -90deg,
                hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1)),
                hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1))
            );
            z-index: 2;
            color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-foreground-spin ,0)),calc((var(--s-color-accent-s, 0) + var(--s-color-accent-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-accent-l, 0) + var(--s-color-accent-foreground-lightness-offset, 0)) * 1%),var(--s-color-accent-foreground-a, 1));
            font-weight: bold;
                transform: scale(1.03)
        }
.s-wireframe .section-tabs ._tabs-item {
            border: solid 1px rgba(0, 0, 0, 0.1);
}
.s-wireframe .section-tabs ._tabs-item.active {
                background: rgba(0, 0, 0, 0.02);
}
.section-tabs ._content {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
        background-color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1));
        background-image: linear-gradient(
            45deg,
            hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-surface-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-surface-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-surface-lightness-offset, 0)) * 1%),var(--s-color-main-surface-a, 1)),
            hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1))
        );
        display: none;
        position: relative;
        z-index: 0;
    }
.section-tabs ._content.active {
            display: block;
        }
@media (min-width: 640px) {
.section-tabs ._content {
                transform: rotateX(5deg) rotateY(-15deg) translateX(1%)
                    translateY(0%) scale(1.1);
            }
}
/* Load custom views css */
.s-menu-generic {
    display: flex;
}
.s-menu-generic .s-menu-level {
        display: flex;
        flex-direction: column;
        position: relative;
    }
.s-menu-generic .s-menu-level-0 {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        align-items: center;
    }
.s-menu-generic .s-menu-level-0_item {
            display: flex;
            flex-grow: 1;
            flex-direction: column;
            align-items: center;
        }
.s-menu-generic .s-menu-level-1 {
        position: absolute;
        z-index: 1;
        top: 100%;
        pointer-events: none;
        opacity: 0;
    }
.s-menu-generic .s-menu-level-0_item:hover .s-menu-level-1 {
                opacity: 1;
                pointer-events: all;
            }
.s-menu-generic .s-menu-level-0_link {
        }
.s-menu-generic .s-menu-level-0_item {
        }
.s-menu-generic .s-menu_link {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
        display: block;
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
    }
.s-menu-generic .s-menu_link:hover {
            background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0)) * 1%),var(--s-color-main-a, 1));
            color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-foreground-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-foreground-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-foreground-lightness-offset, 0)) * 1%),var(--s-color-main-foreground-a, 1));border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
        }
.s-menu-generic .s-menu_level {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
    }
.s-menu-generic .s-menu-level-1,
    .s-menu-generic .s-menu-level-2,
    .s-menu-generic .s-menu-level-3 {box-shadow: 0px 1.4px 1.4px rgba(0, 0, 0, 0.011),
  0px 3.3px 3.5px rgba(0, 0, 0, 0.016),
  0px 6.1px 6.5px rgba(0, 0, 0, 0.02),
  0px 10.9px 11.6px rgba(0, 0, 0, 0.024),
  0px 20.5px 21.7px rgba(0, 0, 0, 0.029),
  0px 49px 52px rgba(0, 0, 0, 0.04);
    }
.s-menu-generic .s-menu-level-1 {
        background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75);
        transform: translateY(-10px);transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
    }
.s-menu-generic .s-menu-level-0_item:hover .s-menu-level-1 {
                transform: translateY(0);
            }
.s-header {
    position: sticky !important;
    top: 0;
    width: 100%;
    z-index: 100;transition: all .3s cubic-bezier(0.700, 0.000, 0.305, 0.995);box-shadow: 0px 0.6px 0.4px rgba(0, 0, 0, 0.006),
  0px 1.3px 1px rgba(0, 0, 0, 0.008),
  0px 2.5px 1.9px rgba(0, 0, 0, 0.01),
  0px 4.5px 3.4px rgba(0, 0, 0, 0.012),
  0px 8.4px 6.3px rgba(0, 0, 0, 0.014),
  0px 20px 15px rgba(0, 0, 0, 0.02);
}
.s-header ._menu-toggle {display: inline-block;
        

                position: relative;
                top: 0.5em;
                width: 1em;
                height: 0.1em;
                background-color: currentColor;
                transition: all 0.3s ease-in-out;
                transform: translateY(-0.5em);border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
    }
.s-header ._menu-toggle:before,
                .s-header ._menu-toggle:after {
                    content: '';
                    width: 100%;
                    height: 100%;
                    background-color: currentColor;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    transition: all 0.3s ease-in-out;
                    opacity: 1;border-radius: calc(5px * var(--s-scale, 1) * var(--s-scale-global, 1));
                }
.s-header ._menu-toggle:before {
                    transform-origin: 0 0;
                    top: -0.3em;
                }
.s-header ._menu-toggle:after {
                    transform-origin: 100% 100%;
                    top: 0.3em;
                }
.s-header ._menu-toggle:active,
                .s-header ._menu-toggle:focus,
                .s-header ._menu-toggle:focus-within,
                input:checked + .s-header ._menu-toggle,
                input:checked + .s-menu + .s-header ._menu-toggle,
                .s-header ._menu-toggle:has(input:checked),
                :active > .s-header ._menu-toggle,
                :focus > .s-header ._menu-toggle,
                :focus-within > .s-header ._menu-toggle,
                input:checked + * > .s-header ._menu-toggle,
                input:checked + .s-menu + * > .s-header ._menu-toggle {                
                    transform: translateY(-0.5em) rotate(45deg);
                }
.s-header ._menu-toggle:active:before, .s-header ._menu-toggle:focus:before, .s-header ._menu-toggle:focus-within:before, input:checked + .s-header ._menu-toggle:before, input:checked + .s-menu + .s-header ._menu-toggle:before, .s-header ._menu-toggle:has(input:checked):before, :active > .s-header ._menu-toggle:before, :focus > .s-header ._menu-toggle:before, :focus-within > .s-header ._menu-toggle:before, input:checked + * > .s-header ._menu-toggle:before, input:checked + .s-menu + * > .s-header ._menu-toggle:before {
                        transform: translateX(5%) translateY(-0.1em) rotate(90deg);
                    }
.s-header ._menu-toggle:active:after, .s-header ._menu-toggle:focus:after, .s-header ._menu-toggle:focus-within:after, input:checked + .s-header ._menu-toggle:after, input:checked + .s-menu + .s-header ._menu-toggle:after, .s-header ._menu-toggle:has(input:checked):after, :active > .s-header ._menu-toggle:after, :focus > .s-header ._menu-toggle:after, :focus-within > .s-header ._menu-toggle:after, input:checked + * > .s-header ._menu-toggle:after, input:checked + .s-menu + * > .s-header ._menu-toggle:after {
                        transform: translateX(-50%) rotate(80deg);
                        opacity: 0;
                    }
body.scroll-down .s-header {
        transform: translateY(-100%);
    }
@media (max-width: 639px) {
.s-header {
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
        top: 0;
        padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
        background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));
        height: 80px;box-shadow: 0px 1.4px 1.4px rgba(0, 0, 0, 0.011),
  0px 3.3px 3.5px rgba(0, 0, 0, 0.016),
  0px 6.1px 6.5px rgba(0, 0, 0, 0.02),
  0px 10.9px 11.6px rgba(0, 0, 0, 0.024),
  0px 20.5px 21.7px rgba(0, 0, 0, 0.029),
  0px 49px 52px rgba(0, 0, 0, 0.04);
            }
}
.s-header .s-logo {
        height: 30px;
    }
.s-header .s-logo [fill='white'] {
            fill: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
        }
@media (max-width: 639px) {
.s-header .s-logo {
            width: 130px;
            }
}
.s-header ._menu-toggle {
        position: absolute;
        top: calc(40px - 0.35em);
        right: 0;
        font-size: 30px;
        display: none;
    }
@media (max-width: 639px) {
.s-header ._menu-toggle {
            display: block
    }
}
.s-header ._primary-menu {
        flex-grow: 1;
    }
.s-header .s-container {
        position: relative;
        padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 0.75) 0;
        display: flex;
        align-items: center;
        gap: calc(var(--s-margin-default, 1rem) * 1.4);
    }
.s-header .s-container:before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            bottom: 0;
            width: 100vw;
            transform: translateX(-50%);
            z-index: -1;
            background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));transition: all .3s cubic-bezier(0.700, 0.000, 0.305, 0.995);
        }
@media (max-width: 639px) {
.s-header .s-container:before {
                display: none
        }
}
.s-form-generic .s-form_actions {
        display: flex;
        justify-content: flex-end;
    }
.s-card {display: flex;
            flex-direction: column;
            align-items: center;
}
.s-card.s-card--horizontal {
                
            }
.s-card.s-card--horizontal-reverse {
                
            }
.s-card.s-card--vertical-reverse {
                
            }
.s-card ._content {
                align-items: unset;
            }
.s-card ._ctas {
                display: flex;
                flex-direction: column;
            }
.s-card .s-cta {
                display: block;
            }
.s-card ._media {
                width: 100%;
            }
.s-card ._img {
                aspect-ratio: 16/9;
                -o-object-fit: cover;
                   object-fit: cover;
                width: 100%;
                height: 100%;
            }
.s-wireframe .s-card {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-card, .s-wireframe .s-card[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-card {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-card, .s-wireframe .s-card[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-card {background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);box-shadow: var(--s-depth-0, 0);
}
.s-card ._img {border-radius: calc(calc(var(--s-border-radius-default, 5px) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1);
            }
.s-card ._content {
                padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
                padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 3.5);
            }
.s-card ._ctas {
                gap: calc(var(--s-margin-default, 1rem) * 0.75);
            }
.s-wireframe .s-card {background-color: #ffffff;
}
[theme$="dark"] .s-wireframe .s-card, .s-wireframe .s-card[theme$="dark"] {
            background-color: #2D323A;
}
.s-wireframe .s-card {border: 1px solid rgba(0,0,0,0.1);
}
[theme$="dark"] .s-wireframe .s-card, .s-wireframe .s-card[theme$="dark"] {
            border: 1px solid rgba(255,255,255,0.2);
}
.s-cards ._grid {
        display: grid;
    }
.s-cards ._card {
        display: flex;
    }
.s-cards ._card > * {
            width: 100%;
        }
.s-cards-1 ._grid {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
.s-cards-2 ._grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
.s-cards-3 ._grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
.s-cards-4 ._grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
.s-cards-5 ._grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
.s-cards .s-card ._media {
            flex-grow: 0;
        }
.s-cards .s-card ._content {
            flex-grow: 1;
        }
.s-cards ._spacer {
        flex-grow: 1;
    }
.s-cards {
}
.s-section {
    position: relative;
}
.s-section ._container {
        position: relative;
        display: flex;
        flex-direction: column;
    }
.s-section ._metas {
        display: flex;
        flex-direction: column;
    }
.s-section ._backdrop-blur,
    .s-section ._backdrop {
        pointer-events: none;
    }
.s-section ._backdrop-blur,
    .s-section ._backdrop,
    .s-section ._bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
.s-section ._bg-img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
.s-section ._ctas {
        display: flex;
        gap: calc(var(--s-margin-default, 1rem) * 0.75);
    }
.s-section-align-start ._container,
    .s-section-align-start ._metas {
        align-items: start;
    }
.s-section-align-center ._container,
    .s-section-align-center ._metas {
        align-items: center;
        text-align: center;
    }
.s-section-align-end ._container,
    .s-section-align-end ._metas {
        align-items: end;
        text-align: right;
    }
.s-section-justify-start ._container,
    .s-section-justify-start ._metas {
        justify-content: start;
    }
.s-section-justify-center ._container,
    .s-section-justify-center ._metas {
        justify-content: center;
    }
.s-section-justify-end ._container,
    .s-section-justify-end ._metas {
        justify-content: end;
    }
.s-section {
    background-color: var(--s-section-bkg-color);
}
.s-section ._title {
        max-width: 30ch;
    }
.s-section {
}
.s-section-tile {
    position: relative;
    padding: 0 !important;
}
.s-section-tile ._container {
        max-width: 9999px;
        overflow: hidden;
    }
.s-section-tile .s-container ._layout {
        max-width: var(--s-container-max-width, var(--s-layout-container-default, 100%));
        margin: 0 auto;
    }
.s-section-tile ._image {
        position: relative;
    }
.s-section-tile-image-side-right ._content {
            padding-inline-start: 0 !important;
        }
.s-section-tile-image-side-left ._content {
            padding-inline-end: 0 !important;
        }
.s-section-tile .s-media-container {
        width: 50vw;
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
.s-section-tile-image-side-right .s-media-container {
        left: 0;
        right: auto;
    }
.s-section-tile .s-media {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
.s-section-tile ._layout > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-tile ._layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-tile ._layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
        gap: 0 !important;
        align-items: stretch;
}
.s-section-tile-image-side-left ._layout > *:nth-child(1) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-tile-image-side-left ._layout > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-tile-image-side-left ._layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
}
.s-section-tile ._layout {
        gap: calc(var(--s-margin-default, 1rem) * 3.5);
    }
.s-section-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.s-section-cards ._ctas {
        display: flex;
    }
.s-section-cards .s-card {box-shadow: var(--s-depth-0, 0);
        transform: scale(1);transition: all .3s cubic-bezier(0.700, 0.000, 0.305, 0.995);
    }
.s-section-cards .s-card:hover {
            transform: scale(1.01);box-shadow: 0px 1.4px 1.4px rgba(0, 0, 0, 0.011),
  0px 3.3px 3.5px rgba(0, 0, 0, 0.016),
  0px 6.1px 6.5px rgba(0, 0, 0, 0.02),
  0px 10.9px 11.6px rgba(0, 0, 0, 0.024),
  0px 20.5px 21.7px rgba(0, 0, 0, 0.029),
  0px 49px 52px rgba(0, 0, 0, 0.04);
        }
.s-section-push-block {
    position: relative;
    padding: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15);
}
@media (max-width: 639px) {
.s-section-push-block {
        padding-inline: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 1.4);
}
}
.s-section-push-block ._bkg {
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;
        transform: translate(-50%, -50%);
    }
.s-section-push-block ._bkg img {
            display: none;
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
            height: 100%;
        }
@media (max-width: 639px) {
.s-section-push-block ._bkg {
            display: none;
            }
}
.s-section-push-block ._bkg {
            display: block;
}
.s-section-push-block ._layout > *:nth-child(2) {
                    grid-column-start: 2;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-push-block ._layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-push-block ._layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
        position: relative;
        z-index: 10;
        align-items: center;
}
@media (max-width: 639px) {
        .s-section-push-block ._layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
            }
        .s-section-push-block ._layout > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
            }
        .s-section-push-block ._layout {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
            padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 20);
            gap: calc(var(--s-margin-default, 1rem) * 3.5);
            }
}
.s-section-push-block ._layout {
        gap: calc(var(--s-margin-default, 1rem) * 3.5);
    }
.s-section-testimonials {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.s-section-testimonials ._testimonial {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
.s-section-testimonials .s-media {
        width: 60px;
        height: 60px;
    }
.s-section-testimonials ._img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }
.s-section-testimonials ._author {
        text-align: left;
        display: flex;
        align-items: center;
        gap: calc(var(--s-margin-default, 1rem) * 1.4);
    }
.s-section-testimonials ._stars {
        position: relative;
    }
.s-section-testimonials ._stars ._stars-rating {
            position: absolute;
            top: 0;
            left: 0;
        }
.s-section-testimonials .s-media {
        border-radius: 50%;
        overflow: hidden;
    }
.s-section-testimonials ._rating {
        display: flex;
        flex-direction: column;
        gap: calc(var(--s-margin-default, 1rem) * 0.75);
    }
.s-section-testimonials ._stars {
        position: relative;
    }
.s-section-testimonials ._stars ._stars-total {
            color: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),0.2);
        }
.s-section-testimonials ._stars ._stars-rating {
            color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
            -webkit-clip-path: polygon(
                0% 0%,
                calc(var(--percent) * 1%) 0,
                calc(var(--percent) * 1%) 100%,
                0% 100%
            );
                    clip-path: polygon(
                0% 0%,
                calc(var(--percent) * 1%) 0,
                calc(var(--percent) * 1%) 100%,
                0% 100%
            );
        }
.s-section-hero ._ctas {
        display: flex;
    }
.s-section-hero {
    padding-block: calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 15);
}
.s-section-contact {
    position: relative;
}
.s-section-contact ._layout > *:nth-child(3) {
                    grid-column-start: 4;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-contact ._layout > *:nth-child(2) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-contact ._layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-contact ._layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
        gap: calc(var(--s-margin-default, 1rem) * 3.5);
}
@media (max-width: 639px) {
        .s-section-contact ._layout > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 3;
                    grid-row-end: 4;
            }
        .s-section-contact ._layout > *:nth-child(2) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 2;
                    grid-row-end: 3;
            }
        .s-section-contact ._layout > *:nth-child(1) {
                    grid-column-start: 1;
                    grid-column-end: 2;
                    grid-row-start: 1;
                    grid-row-end: 2;
            }
        .s-section-contact ._layout {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
            }

            .s-section-contact ._layout > *:nth-child(2) {
                display: none;
            }
}
.s-section-contact ._layout.left > *:nth-child(1) {
                    grid-column-start: 4;
                    grid-column-end: 6;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-contact ._layout.left > *:nth-child(2) {
                    grid-column-start: 3;
                    grid-column-end: 4;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-contact ._layout.left > *:nth-child(3) {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    grid-row-start: 1;
                    grid-row-end: 2;
}
.s-section-contact ._layout.left {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
      

      align-items: stretch;
    

      justify-items: stretch;
            gap: calc(var(--s-margin-default, 1rem) * 3.5);
}
.s-section-contact ._metas {
        margin-block-end: calc(var(--s-margin-default, 1rem) * 2);
    }
.s-section-contact ._address {
    }
.s-section-contact ._socials {
        margin-block-start: calc(var(--s-margin-default, 1rem) * 2);
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)));
        display: flex;
        flex-direction: row;
        gap: calc(var(--s-margin-default, 1rem) * 0.75);
    }
.s-section-contact ._socials a {transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
        }
.s-section-contact ._socials a:hover {
                color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
            }
@media (max-width: 639px) {
.s-section-contact .s-form {
            margin-block-start: calc(calc(var(--s-margin-default, 1rem) * 2) * -1)
    }
}
.s-section-contact .s-google-map {
        width: 43vw;
        height: 300px;
            margin-bottom: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) * 2 * -1);
            top: calc(calc(calc(var(--s-padding-default, 1rem) * var(--s-scale, 1) * var(--s-scale-global, 1)) * 10) * -1);
            height: 700px
    }
.s-section-contact .s-google-map-marker {--s-color-current-h: var(--s-color-accent-h);
--s-color-current-s: var(--s-color-accent-s);
--s-color-current-l: var(--s-color-accent-l);
--s-color-current-text-saturation-offset: var(--s-color-accent-text-saturation-offset, 0);
--s-color-current-text-lightness-offset: var(--s-color-accent-text-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-placeholder-saturation-offset: var(--s-color-accent-placeholder-saturation-offset, 0);
--s-color-current-placeholder-lightness-offset: var(--s-color-accent-placeholder-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-foreground-saturation-offset: var(--s-color-accent-foreground-saturation-offset, 0);
--s-color-current-foreground-lightness-offset: var(--s-color-accent-foreground-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-background-saturation-offset: var(--s-color-accent-background-saturation-offset, 0);
--s-color-current-background-lightness-offset: var(--s-color-accent-background-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-surface-saturation-offset: var(--s-color-accent-surface-saturation-offset, 0);
--s-color-current-surface-lightness-offset: var(--s-color-accent-surface-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-ui-saturation-offset: var(--s-color-accent-ui-saturation-offset, 0);
--s-color-current-ui-lightness-offset: var(--s-color-accent-ui-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-border-saturation-offset: var(--s-color-accent-border-saturation-offset, 0);
--s-color-current-border-lightness-offset: var(--s-color-accent-border-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-hover-saturation-offset: var(--s-color-accent-hover-saturation-offset, 0);
--s-color-current-hover-lightness-offset: var(--s-color-accent-hover-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-active-saturation-offset: var(--s-color-accent-active-saturation-offset, 0);
--s-color-current-active-lightness-offset: var(--s-color-accent-active-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-gradient-start-saturation-offset: var(--s-color-accent-gradient-start-saturation-offset, 0);
--s-color-current-gradient-start-lightness-offset: var(--s-color-accent-gradient-start-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
--s-color-current-gradient-end-saturation-offset: var(--s-color-accent-gradient-end-saturation-offset, 0);
--s-color-current-gradient-end-lightness-offset: var(--s-color-accent-gradient-end-lightness-offset, 0);
--s-color-current-a: var(--s-color-accent-a, 1);
    }
.s-section-contact {

    /* .s-google-map {
        width: 43vw;
        margin-bottom: calc(sugar.padding(80) * 2 * -1);
        top: calc(sugar.padding(80) * -1);
        height: 700px;
    }

    .s-google-map-marker {
        @sugar.color (accent);
    }
     */
}
.s-section-contact ._layout {
    }
.s-section-contact ._address {
    }
.s-section-contact ._socials {
        font-size: calc(var(--s-font-size-default, 16px) * calc(var(--s-font-size-50, 1.8) * var(--s-scale, 1) * var(--s-scale-global, 1)));
    }
.s-section-contact ._socials a {
            opacity: 0.5;transition: all .1s cubic-bezier(0.700, 0.000, 0.305, 0.995) !important;
        }
.s-section-contact ._socials a:hover {
                color: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
                opacity: 1;
            }
.s-section-contact .s-form {
    }
body {
    background: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-background-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-background-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-background-lightness-offset, 0)) * 1%),var(--s-color-main-background-a, 1));
    overflow-x: hidden;
}
[s-appear] {
    opacity: 0;
}
[s-appear][appear] {
    opacity: 1;
}
.content {
    min-height: calc(100 * var(--vh,1vh)) ;
}
/* logo */
.logo svg [fill='white'] {
        fill: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-spin ,0)),calc((var(--s-color-main-s, 0)) * 1%),calc((var(--s-color-main-l, 0) + -10) * 1%),1);
    }
.logo svg [fill='#FEBD0F'] {
        fill: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
    }
[theme$="dark"] .logo svg [fill='white'], .logo[theme$="dark"] svg [fill='white'] {
            fill: hsla(calc(var(--s-color-main-h, 0) + var(--s-color-main-text-spin ,0)),calc((var(--s-color-main-s, 0) + var(--s-color-main-text-saturation-offset, 0)) * 1%),calc((var(--s-color-main-l, 0) + var(--s-color-main-text-lightness-offset, 0)) * 1%),var(--s-color-main-text-a, 1));
        }
[theme$="dark"] .logo svg [fill='#FEBD0F'], .logo[theme$="dark"] svg [fill='#FEBD0F'] {
            fill: hsla(calc(var(--s-color-accent-h, 0) + var(--s-color-accent-spin ,0)),calc((var(--s-color-accent-s, 0)) * 1%),calc((var(--s-color-accent-l, 0)) * 1%),var(--s-color-accent-a, 1));
        }.s-icon-s, .s-icon-github, .s-icon-discord, .s-icon-twitter, .s-icon-facebook, .s-icon-patreon, .s-icon-instagram {
                -webkit-font-smoothing: antialiased;
                display: inline-block;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                line-height: 1;

                &:before {
                    display: inline-block;
                }
}.s-icon-s, .s-icon-github, .s-icon-discord, .s-icon-twitter, .s-icon-facebook, .s-icon-patreon, .s-icon-instagram {
                font-family: "Font Awesome 6 Brands";
                font-weight: 400
}
@keyframes s-btn-loading {
                        from {
                            transform: rotate(0deg);
                        }
                        to {
                            transform: rotate(360deg);
                        }
                    }